/* moula.world
 *
 * The design arrives as one page of inline styles. It is pulled apart into
 * classes here for the same reason buckets.ninja is: the markup stays readable,
 * a colour changes in one place, and the hover and responsive rules that inline
 * styles cannot express have somewhere to live.
 *
 * Two typefaces, deliberately. Archivo carries headings and anything numeric;
 * Barlow carries prose at light weights. Mixing them is what stops a page this
 * sparse from reading as a template.
 */

:root {
  --bg: #050505;
  --panel: #0A0A0A;
  --ink: #EDEAE6;
  --ink-bright: #FFFFFF;
  --muted: #A5A099;
  --muted-2: #C9C4BD;
  --dim: #8B857E;
  --dimmer: #6E6963;
  --accent: #F0912D;
  --accent-hi: #FFB25E;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .09);

  --head: Archivo, Helvetica, Arial, sans-serif;
  --body: Barlow, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; transition: color .15s }
a:hover { color: var(--accent-hi) }
::selection { background: var(--accent); color: #0A0A0A }

.mw-wrap { max-width: 1180px; margin: 0 auto }
.mw-pad { padding-left: 48px; padding-right: 48px }
.mw-sec { padding-top: 104px; padding-bottom: 104px; border-bottom: 1px solid var(--line) }

/* A section heading: small, spaced, in the accent. Used above every block so
   the page reads as a sequence rather than a wall. */
.mw-eyebrow {
  margin: 0 0 40px;
  font: 400 15px var(--head);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- header ---- */

.mw-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 18px 48px;
  background: rgba(5, 5, 5, .86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.mw-logo { display: flex; align-items: center }
.mw-logo img { height: 34px; width: auto; display: block }

.mw-nav {
  display: flex; align-items: center; gap: 34px;
  font-size: 13px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.mw-nav a { color: inherit }
.mw-nav a:hover { color: var(--ink) }

/* The portal button is the one thing in the header we want clicked, so it is
   the only outlined element up there. */
.mw-nav .mw-portal {
  padding: 10px 20px;
  border: 1px solid rgba(240, 145, 45, .55);
  border-radius: 2px;
  color: var(--accent);
  letter-spacing: .09em;
  transition: background .15s, color .15s, border-color .15s;
}
.mw-nav .mw-portal:hover { background: var(--accent); color: #0A0A0A; border-color: var(--accent) }

.mw-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 2px;
  background: none;
}
.mw-burger span { width: 18px; height: 1.5px; background: var(--ink); display: block }

.mw-menu {
  position: sticky; top: 79px; z-index: 19;
  padding: 10px 22px 20px;
  background: rgba(5, 5, 5, .97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: none;
}
.mw-menu[data-open="true"] { display: block }
.mw-menu-in {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 15px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.mw-menu-in a { color: inherit; padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .06) }
.mw-menu-in a:hover { color: var(--ink) }
/* Colour is restated because ".mw-menu-in a" is more specific than ".mw-btn"
   and would otherwise leave the button's text the menu's grey. */
.mw-menu-in .mw-btn { margin-top: 14px; text-align: center; border-bottom: 0; color: #0A0A0A }
.mw-menu-in .mw-btn:hover { color: #0A0A0A }

/* ---- buttons ---- */

.mw-btn {
  display: inline-block;
  padding: 15px 28px;
  background: linear-gradient(135deg, #F5A73F, #E07C12);
  color: #0A0A0A;
  font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 2px;
  transition: filter .15s;
}
.mw-btn:hover { filter: brightness(1.1); color: #0A0A0A }

.mw-btn-ghost {
  display: inline-block;
  padding: 15px 28px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--ink);
  font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 2px;
  transition: border-color .15s;
}
.mw-btn-ghost:hover { border-color: rgba(255, 255, 255, .45); color: var(--ink) }

/* ---- hero ---- */

.mw-hero {
  position: relative;
  padding: 150px 48px 130px;
  border-bottom: 1px solid var(--line);
  background-image: url('/assets/hero-doorway.jpg');
  background-size: cover;
  background-position: 68% center;
  background-repeat: no-repeat;
}
/* Two scrims rather than one. The horizontal keeps the text legible over the
   bright side of the image; the vertical stops the section edges glowing. */
.mw-scrim-x, .mw-scrim-y { position: absolute; inset: 0; pointer-events: none }
.mw-scrim-x {
  background: linear-gradient(90deg, rgba(5,5,5,.62) 0%, rgba(5,5,5,.5) 34%,
              rgba(5,5,5,.18) 62%, rgba(5,5,5,.02) 100%);
}
.mw-scrim-y {
  background: linear-gradient(180deg, rgba(5,5,5,.3) 0%, rgba(5,5,5,0) 30%, rgba(5,5,5,.2) 100%);
}
.mw-hero-in { position: relative; max-width: 1180px; margin: 0 auto }

.mw-kicker {
  display: flex; align-items: center; gap: 12px; margin-bottom: 34px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
}
.mw-kicker i { width: 26px; height: 1px; background: var(--accent); display: block }

.mw-h1 {
  margin: 0;
  font: 400 68px/1.04 var(--head);
  letter-spacing: -.02em;
  color: var(--ink-bright);
  text-wrap: pretty;
}
.mw-lede {
  margin: 30px 0 0; max-width: 560px;
  font-size: 19px; line-height: 1.65; font-weight: 300;
  color: var(--muted);
  text-wrap: pretty;
}
.mw-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px }

/* ---- trust bar ---- */

.mw-trust { padding: 40px 48px; border-bottom: 1px solid var(--line); background: var(--panel) }
.mw-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px }
.mw-trust-item { display: flex; gap: 14px; align-items: baseline }
.mw-trust-item i { font: 400 13px var(--head); color: var(--accent); font-style: normal }
.mw-trust-item div { font-size: 16px; font-weight: 300; color: var(--muted-2) }

/* ---- product cards ---- */

.mw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px }

/* Each card wears its product's colour: the rule across the top, the arrow,
   the tag borders and the border on hover all come from --c, set per card. */
.mw-card {
  position: relative;
  display: flex; flex-direction: column; gap: 26px;
  padding: 40px;
  background: radial-gradient(120% 90% at 0% 0%, var(--tint), rgba(10,10,10,0) 65%), var(--panel);
  border: 1px solid var(--line-2);
  color: inherit;
  overflow: hidden;
  transition: border-color .15s;
}
.mw-card:hover { border-color: var(--c); color: inherit }
.mw-card-rule { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--c) }
.mw-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 44px;
}
.mw-card-top img { height: 27px; width: auto; display: block }
.mw-card-arrow { font-size: 20px; color: var(--c) }
.mw-card p { margin: 0; font-size: 17px; line-height: 1.6; font-weight: 300; color: var(--muted) }
.mw-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto }
.mw-tag {
  padding: 6px 12px;
  border: 1px solid var(--c);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c);
  opacity: .75;
}

/* A product whose mark is type rather than a logo file. */
.mw-wordmark { display: flex; align-items: center; gap: 13px }
.mw-wordmark img { height: 34px }
.mw-wordmark span {
  font: 500 25px var(--head);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-bright);
}
.mw-wordmark span b { font-weight: 500; color: var(--c) }

/* ---- account layer ---- */

.mw-acct { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px }
.mw-bigstat {
  margin: 0;
  font: 400 34px/1.25 var(--head);
  color: var(--ink-bright);
  letter-spacing: -.01em;
  text-wrap: pretty;
}
/* Hairline rules between rows, drawn with the grid gap rather than borders so
   the ends line up exactly. */
.mw-steps {
  display: grid; gap: 1px;
  background: var(--line-2);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.mw-step { display: grid; grid-template-columns: 44px 1fr; gap: 24px; padding: 28px 0; background: var(--bg) }
.mw-step-n { font: 400 13px var(--head); color: var(--accent); letter-spacing: .1em }
.mw-step h3 { margin: 0; font: 400 20px var(--head); color: var(--ink-bright) }
.mw-step p { margin: 8px 0 0; font-size: 16px; line-height: 1.6; font-weight: 300; color: var(--dim) }

/* ---- portal and contact ---- */

.mw-panel-accent {
  padding: 44px;
  background: linear-gradient(140deg, rgba(240,145,45,.14), rgba(240,145,45,.02) 60%);
  border: 1px solid rgba(240, 145, 45, .28);
}
.mw-panel { padding: 44px; background: var(--panel); border: 1px solid var(--line-2) }
.mw-panel-accent .mw-eyebrow, .mw-panel .mw-eyebrow { margin-bottom: 14px }
.mw-panel-accent p { margin: 0 0 30px; font-size: 17px; line-height: 1.65; font-weight: 300; color: var(--muted-2) }

.mw-contact-list { display: grid; gap: 20px }
.mw-contact-l { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim) }
.mw-contact-v { font: 400 19px var(--head) }
.mw-contact-note { font-size: 17px; font-weight: 300; color: var(--muted-2) }

/* ---- payment strip ---- */

.mw-pay-strip { border-top: 1px solid var(--line); background: var(--panel) }
.mw-pay-in {
  max-width: 1180px; margin: 0 auto;
  padding: 28px 22px 24px;
  display: flex; gap: 8px 10px; flex-wrap: wrap; justify-content: center; align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
/* Each badge carries its own --c. Hover has to be CSS rather than script, and
   CSS cannot read an attribute, so the colour is set on the element. */
.mw-pay {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  font: 600 13px var(--head);
  color: var(--dim);
  border: 1px solid rgba(255, 255, 255, .1);
  cursor: default;
  transition: border-color .15s, color .15s;
}
.mw-pay[data-fiat="1"] { border-radius: 7px }
.mw-pay img { width: 22px; height: 22px; filter: grayscale(1) opacity(.65); transition: filter .15s }
.mw-pay-mask {
  width: 22px; height: 22px; display: block;
  background-color: var(--dim);
  transition: background-color .15s;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.mw-pay:hover { border-color: var(--c); color: var(--c) }
.mw-pay:hover img { filter: none }
.mw-pay:hover .mw-pay-mask { background-color: var(--c) }

/* ---- footer ---- */

.mw-footer { padding: 28px 48px 40px; background: var(--panel) }
.mw-footer-in {
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
}
.mw-footer img { height: 30px; width: auto; display: block }
.mw-footer-links { display: flex; flex-wrap: wrap; gap: 26px; font-size: 13px; letter-spacing: .06em; color: var(--dim) }
.mw-footer-links a { color: inherit }
.mw-footer-links a:hover { color: var(--ink) }
.mw-copy { font-size: 13px; color: var(--dimmer) }

/* ---- document pages ---- */

.mw-doc { padding: 96px 48px; max-width: 780px; margin: 0 auto }
.mw-doc h1 { margin: 0 0 12px; font: 400 42px/1.1 var(--head); color: var(--ink-bright); letter-spacing: -.02em }
.mw-doc-meta { margin: 0 0 56px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim) }
.mw-doc h2 {
  margin: 52px 0 16px;
  font: 400 15px var(--head);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.mw-doc h2:first-of-type { margin-top: 0 }
.mw-doc h3 { margin: 30px 0 10px; font: 400 19px var(--head); color: var(--ink-bright) }
.mw-doc p, .mw-doc li { font-size: 16.5px; line-height: 1.75; font-weight: 300; color: var(--muted-2) }
.mw-doc p { margin: 0 0 16px }
.mw-doc ul { margin: 0 0 16px; padding-left: 20px }
.mw-doc li { margin-bottom: 8px }
.mw-doc strong { font-weight: 500; color: var(--ink) }

/* The lede under a document title: what this covers, in one sentence. */
.mw-doc-lede { font-size: 18px; line-height: 1.7; color: var(--muted); margin-bottom: 8px }

/* A definition list, for the imprint and anywhere else facts are paired. */
.mw-dl { display: grid; grid-template-columns: 200px 1fr; gap: 14px 24px; margin: 0 0 28px }
.mw-dl dt { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding-top: 4px }
.mw-dl dd { margin: 0; font-size: 16.5px; line-height: 1.6; font-weight: 300; color: var(--muted-2) }

/* Something the reader should not skim past. */
.mw-note {
  margin: 0 0 24px;
  padding: 18px 22px;
  background: rgba(240, 145, 45, .07);
  border-left: 2px solid var(--accent);
  font-size: 16px; line-height: 1.65; font-weight: 300; color: var(--muted-2);
}
.mw-note strong { color: var(--ink) }

/* Contents list at the head of a long document. */
.mw-toc { margin: 0 0 48px; padding: 0; list-style: none; columns: 2; column-gap: 32px }
.mw-toc li { margin-bottom: 6px; font-size: 15px }
.mw-toc a { color: var(--muted) }
.mw-toc a:hover { color: var(--accent) }

/* ---- responsive ---- */

@media (max-width: 900px) {
  .mw-nav { display: none }
  .mw-burger { display: flex }
  .mw-pad, .mw-header, .mw-hero, .mw-trust, .mw-footer { padding-left: 22px; padding-right: 22px }
  .mw-sec { padding-top: 64px; padding-bottom: 64px }
  /* No photograph on a narrow screen. Cropped to a portrait viewport it never
     showed enough of the doorway to be worth the contrast it cost the text,
     and holding the copy clear of the glow left the column too narrow to read.
     A warm wash behind the headline does the job instead. */
  .mw-hero { padding-top: 96px; padding-bottom: 84px; background-image: none }
  .mw-scrim-x { background: radial-gradient(90% 70% at 50% 100%, rgba(240,145,45,.14), rgba(5,5,5,0) 70%) }
  .mw-scrim-y { display: none }
  .mw-trust-grid, .mw-grid2, .mw-acct { grid-template-columns: 1fr; gap: 18px }
  .mw-acct { gap: 34px }
  .mw-h1 { font-size: 42px }
  .mw-h1 br { display: none }
  .mw-lede { font-size: 17px }
  .mw-bigstat { font-size: 26px }
  .mw-cta-row { flex-direction: column; align-items: stretch }
  .mw-cta-row a { width: 100%; text-align: center }
  .mw-card, .mw-panel, .mw-panel-accent { padding: 26px }
  .mw-footer-in { justify-content: center; text-align: center }
  .mw-doc { padding: 64px 22px }
  .mw-dl { grid-template-columns: 1fr; gap: 4px 0 }
  .mw-dl dd { margin-bottom: 16px }
  .mw-toc { columns: 1 }
}

@media (max-width: 560px) {
  .mw-h1 { font-size: 34px }
}