/* =====================================================================
   ONE MILLION CREATORS — pre-launch growth engine
   Reference: "Vercel pure-black monochrome", re-keyed to brand gold.
   Committed dark · single voice color · credibility & trust.
   Source of truth for tokens (see DESIGN.md). No build step.
   ===================================================================== */

@font-face {
  font-family: 'Wisteria';
  src: url('/fonts/wisteria.woff') format('woff'),
       url('/fonts/wisteria.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:           #0A0A0A;   /* page, near-pure black */
  --bg-2:         #050505;   /* contrast bands (deeper black) */
  --surface:      #151515;   /* elevated cards/panels */
  --surface-2:    #000000;   /* recessed wells (inputs, chips) */
  --nav:          #0A0A0A;   /* solid bar, no blur */

  --text:         #FFFFFF;   /* pure white ~19:1 */
  --muted:        #C9C9C9;   /* crisp body ~12:1 */
  --faint:        #8E8E8E;   /* small non-critical ~5.4:1 */

  --gold:         #F2C24E;   /* bright voice color, pops on black */
  --gold-2:       #FFD777;   /* hover */
  --gold-deep:    #C99A2E;
  --gold-wash:    rgba(242,194,78,.10);
  --gold-line:    rgba(242,194,78,.36);

  --border:        rgba(255,255,255,.13);
  --border-strong: rgba(255,255,255,.24);
  --green:        #84D08F;   /* lone semantic: live/success */

  --container: 1140px;
  --radius: 9px;
  --radius-sm: 7px;

  --font: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-display: 'Wisteria', 'Schibsted Grotesk', Georgia, serif;

  --ease: cubic-bezier(.22, 1, .36, 1);

  --z-sticky: 100;
  --z-overlay: 200;
}

/* ===================================================================
   LIGHT MODE (beige) — toggled via html[data-theme="light"]
   =================================================================== */
html[data-theme="light"] {
  --bg:        #FFFFFF;   /* white page (alternates with beige bands) */
  --bg-2:      #FCF9F3;   /* near-white bands → more white feel */
  --surface:   #F7F1E7;   /* elevated cards — lighter beige */
  --surface-2: #F0E9DA;   /* recessed wells (slightly deeper beige) */
  --nav:       rgba(255,255,255,.88);

  --text:   #1E1A12;
  --muted:  #5A5344;
  --faint:  #877D67;

  --gold:      #9A6B12;   /* deep gold reads on beige */
  --gold-2:    #B5841F;
  --gold-deep: #7E560E;
  --gold-wash: rgba(154,107,18,.12);
  --gold-line: rgba(154,107,18,.34);

  --border:        rgba(30,26,18,.14);
  --border-strong: rgba(30,26,18,.26);
  --green:  #4F7D3A;
}
html[data-theme="light"] .grain { opacity: .03; mix-blend-mode: multiply; }
/* hero + manifesto get their pale image variants and a beige scrim */
html[data-theme="light"] .hero::before { background-image: url('/img/bg/7-light.jpg'); opacity: .16; }
html[data-theme="light"] .hero::after {
  background:
    linear-gradient(90deg, #FFFFFF 6%, rgba(255,255,255,.86) 30%, rgba(255,255,255,.42) 64%, rgba(255,255,255,.08) 100%),
    radial-gradient(60% 80% at 88% 50%, rgba(154,107,18,.12), transparent 70%),
    linear-gradient(0deg, #FFFFFF 0%, transparent 22%);
}
html[data-theme="light"] .manifesto { background-image: url('/img/bg/1-light.jpg'); }
html[data-theme="light"] .manifesto::before { background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.8) 100%); }
html[data-theme="light"] .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A6B12' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
/* swap to the dark-text lockup in light mode */
.logo-light { display: none; }
html[data-theme="light"] .logo-dark { display: none; }
html[data-theme="light"] .logo-light { display: inline-block; }

/* theme toggle button (header) */
.theme-toggle { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border: 1px solid var(--border-strong); border-radius: 9px; background: transparent; color: var(--text); cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease); }
.theme-toggle:hover { color: var(--gold); border-color: var(--gold-line); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }
.theme-toggle .ic-moon { display: none; }
html[data-theme="light"] .theme-toggle .ic-sun { display: none; }
html[data-theme="light"] .theme-toggle .ic-moon { display: inline-flex; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--gold); color: #000; }

/* film-grain texture overlay — analog richness over the whole page */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
.band { position: relative; }
.band > .wrap { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--text);
}
/* Wisteria display serif for the headline moments (paired with sans body) */
h1, h2,
.triad, .manifesto .quote,
.number-line .no, .progress-head .big,
.ritem .num, .lacks .k, .lrow .at,
.foot .say {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.005em;
}
p { margin: 0; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---- layout primitives ---- */
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2rem); }
.section { padding: clamp(4rem, 9vw, 6.5rem) 0; }
.band { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.deck { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6; max-width: 46ch; text-wrap: pretty; }

/* section head: headline + one deck, left aligned */
.head { max-width: 42ch; margin-bottom: clamp(2.25rem, 5vw, 3.25rem); }
.head h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.head .deck { margin-top: 1rem; }
.head.center { max-width: 54ch; margin-left: auto; margin-right: auto; text-align: center; }
.head.center .deck { margin-left: auto; margin-right: auto; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-weight: 600; font-size: 1rem; line-height: 1;
  padding: .92rem 1.5rem; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .12s var(--ease);
  white-space: nowrap;
}
.btn-gold { background: var(--gold); color: var(--bg); }
.btn-gold:hover { background: var(--gold-2); }
.btn-gold:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--gold-line); color: var(--gold); }
.btn-lg { padding: 1.05rem 1.8rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn svg { width: 1.1em; height: 1.1em; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* ---- icons (Lucide) ---- */
.ico { display: inline-flex; }
svg.lucide { width: 1em; height: 1em; stroke-width: 1.75; vertical-align: -0.125em; }

/* ===================================================================
   NAV
   =================================================================== */
.nav { position: sticky; top: 0; z-index: var(--z-sticky); background: transparent; border-bottom: 1px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease); }
.nav.scrolled { background: var(--nav); border-bottom-color: var(--border); backdrop-filter: blur(12px); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 4.75rem; }
.brand { display: inline-flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.brand img { height: auto; width: auto; max-height: 3.4rem; max-width: 100%; flex: none; }   /* scales down (aspect kept), never distorts or pushes the actions off */
.nav-right { display: flex; align-items: center; gap: 1.5rem; flex: 0 0 auto; }
.nav-proof { color: var(--muted); font-size: .92rem; display: inline-flex; align-items: center; gap: .5rem; }
.nav-proof b { color: var(--text); font-weight: 600; }
.nav-proof .live { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); }

/* ===================================================================
   HERO
   =================================================================== */
.hero { position: relative; min-height: 84vh; display: flex; align-items: center; margin-top: -4.75rem; padding: calc(4.75rem + clamp(3rem, 7vw, 6rem)) 0 clamp(2.5rem, 5vw, 4rem); overflow: hidden; background: var(--bg); }
/* gold ink texture behind the hero, richer now */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('/img/bg/7.jpg') center right / cover no-repeat; opacity: .9;
}
/* scrim keeps the text column on near-black for crisp contrast, image breathes on the right */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #0A0A0A 6%, rgba(10,10,10,.86) 30%, rgba(10,10,10,.4) 64%, rgba(10,10,10,.1) 100%),
    radial-gradient(60% 80% at 88% 50%, rgba(242,194,78,.10), transparent 70%),
    linear-gradient(0deg, #0A0A0A 0%, transparent 22%);
}
.hero > .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 2vw, 1.75rem); align-items: center; }
.hero-copy { max-width: 46ch; }
.hero-kicker { display: inline-flex; align-items: center; gap: .6rem; color: var(--gold); font-weight: 600; font-size: .92rem; margin-bottom: 1.4rem; }
.hero-kicker .dot { width: .42rem; height: .42rem; border-radius: 50%; background: var(--gold); }
.hero h1 { font-size: clamp(2.3rem, 5vw, 4.5rem); letter-spacing: -0.01em; line-height: 1.02; }
.hero h1 .gold { color: var(--gold); }
.hero .tagline { margin-top: 1.1rem; font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 600; color: var(--text); letter-spacing: -0.02em; }
.hero .sub { margin-top: 1.2rem; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.18rem); max-width: 42ch; line-height: 1.6; }
.hero-actions { display: flex; gap: .9rem; margin-top: 1.7rem; flex-wrap: wrap; }
.hero-proof { margin-top: 1.7rem; display: flex; align-items: center; gap: 1rem; color: var(--faint); font-size: .95rem; flex-wrap: wrap; }
.hero-proof .who { display: inline-flex; }
.hero-proof .who img { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--bg); margin-left: -.55rem; object-fit: cover; background: var(--surface); }
.hero-proof .who img:first-child { margin-left: 0; }
.hero-proof b { color: var(--text); font-weight: 600; }
.hero-proof .sep { width: 1px; height: 1rem; background: var(--border-strong); }

/* hero globe (live WebGL — gold-lit continents) */
.globe-stage { position: relative; width: clamp(360px, 46vw, 760px); aspect-ratio: 1; justify-self: start; margin-right: clamp(-7rem, -6vw, -1rem); }
.omc-globe { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.omc-globe:active { cursor: grabbing; }
.omc-globe canvas { display: block; }
.globe-loading { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .5s var(--ease); }
.globe-loading.hidden { opacity: 0; pointer-events: none; }
.globe-spinner { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--gold); animation: spin .8s linear infinite; }
.marker-label { transform: translate(-50%, -150%); white-space: nowrap; opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease); pointer-events: none; text-align: center; padding: .45rem .7rem; background: rgba(8,8,8,.9); border: 1px solid var(--gold-line); border-radius: 9px; box-shadow: 0 8px 24px rgba(0,0,0,.55); }
.marker-label.visible { opacity: 1; transform: translate(-50%, -165%); }
.marker-label-city { font-weight: 700; font-size: .85rem; color: #fff; letter-spacing: .05em; font-family: var(--font); }
.marker-label-date { font-size: .74rem; color: #F2C24E; font-variant-numeric: tabular-nums; margin-top: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================================================================
   WHY
   =================================================================== */
.why-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.believe { margin-top: 1.75rem; padding: 1.6rem 1.75rem; background: var(--gold-wash); border: 1px solid var(--gold-line); border-radius: var(--radius); }
.believe p { color: var(--text); font-size: 1.18rem; font-weight: 500; line-height: 1.45; }
.believe .small { margin-top: .7rem; color: var(--muted); font-size: 1rem; font-weight: 400; }
.lacks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.lacks li { display: flex; align-items: baseline; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.lacks .k { color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 600; min-width: 1.6rem; }
.lacks b { color: var(--text); font-weight: 600; }

/* ===================================================================
   RECEIVE — numbered editorial index
   =================================================================== */
.index { border-top: 1px solid var(--border); }
.ritem { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: clamp(1rem, 3vw, 2.5rem); padding: clamp(1.5rem, 3vw, 2.1rem) clamp(.5rem, 2vw, 1.25rem); margin: 0 calc(-1 * clamp(.5rem, 2vw, 1.25rem)); border-bottom: 1px solid var(--border); transition: background .3s var(--ease); }
.ritem:hover { background: var(--gold-wash); }
.ritem:hover .num { transform: translateY(-2px); }
.ritem:hover .mark { color: var(--gold); transform: translateX(3px); }
.ritem .num { font-size: clamp(1.7rem, 3.6vw, 2.8rem); font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: 1; transition: transform .3s var(--ease); }
.ritem .body h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em; }
.ritem .body p { margin-top: .5rem; color: var(--muted); max-width: 54ch; }
.ritem .body .meta { margin-top: .7rem; color: var(--faint); font-size: .92rem; }
.ritem .mark { color: var(--faint); display: none; transition: color .3s var(--ease), transform .3s var(--ease); }
@media (min-width: 720px) { .ritem .mark { display: block; } }

/* ===================================================================
   MANIFESTO — a single editorial beat
   =================================================================== */
.manifesto { position: relative; background: url('/img/bg/1.jpg') center / cover no-repeat; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; }
.manifesto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.74) 50%, rgba(10,10,10,.58) 100%); }
.manifesto .wrap { position: relative; z-index: 1; }
.manifesto .quote { font-size: clamp(2rem, 4.8vw, 3.6rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.14; max-width: 22ch; text-wrap: balance; }
.manifesto .quote .gold { color: var(--gold); }
.manifesto .by { margin-top: 1.5rem; color: var(--faint); font-size: 1rem; display: inline-flex; align-items: center; gap: .6rem; }
.manifesto .by::before { content: ""; width: 2.25rem; height: 1px; background: var(--gold-line); }

/* ===================================================================
   MOVEMENT
   =================================================================== */
.movement { text-align: center; }
.triad { font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; }
.triad span { display: block; }
.triad .g { color: var(--gold); }
.movement .deck { margin: 1.75rem auto 0; text-align: center; max-width: 50ch; }
.movement .btn { margin-top: 2.25rem; }

/* ===================================================================
   FORM
   =================================================================== */
.reserve-grid { display: grid; grid-template-columns: .85fr 1.15fr; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.reserve-aside { padding: clamp(2rem, 4vw, 3rem); background: var(--bg-2); border-right: 1px solid var(--border); }
.reserve-aside h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.reserve-aside h2 .gold { color: var(--gold); }
.reserve-aside .deck { margin-top: 1rem; }
.perks { margin-top: 1.9rem; list-style: none; padding: 0; display: grid; gap: 1rem; }
.perks li { display: flex; gap: .75rem; align-items: flex-start; color: var(--muted); font-size: 1rem; }
.perks li .ico { color: var(--gold); margin-top: .1rem; flex: none; }
.reserve-body { padding: clamp(2rem, 4vw, 3rem); background: var(--surface); }
.invited-note { display: flex; gap: .6rem; align-items: center; padding: .8rem 1rem; background: var(--gold-wash); border: 1px solid var(--gold-line); border-radius: var(--radius); color: var(--text); font-size: .95rem; margin-bottom: 1.5rem; }
.invited-note .ico { color: var(--gold); flex: none; }
.form-error { padding: .85rem 1rem; border: 1px solid rgba(220,120,120,.4); background: rgba(220,120,120,.10); border-radius: var(--radius); color: #F0C0BC; font-size: .95rem; margin-bottom: 1.3rem; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .9rem; font-weight: 600; color: var(--text); margin-bottom: .5rem; }
.field label .opt { color: var(--faint); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; font-family: inherit; font-size: 1rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; transition: border-color .2s, box-shadow .2s; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--gold-wash); }
.field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23E9BB54' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.field select option { background: var(--surface); color: var(--text); }
.field textarea { resize: vertical; min-height: 5rem; }
.field .err { color: #E9A8A2; font-size: .85rem; margin-top: .4rem; }
.form-foot { margin-top: .4rem; }
.form-note { margin-top: 1rem; color: var(--faint); font-size: .88rem; text-align: center; }

/* ===================================================================
   LEADERBOARD — community builders
   =================================================================== */
.board { border-top: 1px solid var(--border); max-width: 940px; margin: 0 auto; }
.brow { display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: 1.4rem; padding: 1.5rem clamp(.5rem, 2vw, 1.25rem); margin: 0 calc(-1 * clamp(.5rem, 2vw, 1.25rem)); border-bottom: 1px solid var(--border); transition: background .25s var(--ease); }
.brow:hover { background: var(--gold-wash); }
.brow .rk { color: var(--gold); font-family: var(--font-display); font-weight: 400; font-variant-numeric: tabular-nums; font-size: 1.7rem; letter-spacing: -0.01em; }
.brow .who { display: flex; align-items: center; gap: 1.15rem; min-width: 0; }
.brow .who img { width: 3.4rem; height: 3.4rem; border-radius: 50%; flex: none; object-fit: cover; border: 1px solid var(--border); }
.brow .who .nm { font-weight: 600; color: var(--text); font-size: 1.2rem; }
.brow .who .ct { font-size: .98rem; color: var(--faint); display: flex; align-items: center; gap: .45rem; margin-top: .15rem; }
.brow .who .ct img { width: 1.3rem; height: auto; border-radius: 2px; border: 0; }
.brow .cnt { text-align: right; }
.brow .cnt b { font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; font-size: 1.5rem; }
.brow .cnt span { display: block; font-size: .85rem; color: var(--faint); }
.brow.you { background: var(--gold-wash); }

/* WhatsApp channel join (success page) */
.wa-join { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: rgba(37,211,102,.10); border: 1px solid rgba(37,211,102,.40); color: var(--text); transition: background .2s var(--ease); }
.wa-join:hover { background: rgba(37,211,102,.18); }
.wa-ic { width: 2.85rem; height: 2.85rem; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #07130B; flex: none; }
.wa-ic svg { width: 1.55rem; height: 1.55rem; }
.wa-tx { flex: 1; min-width: 0; }
.wa-tx b { display: block; font-size: 1.08rem; }
.wa-tx small { color: var(--muted); }
.wa-go { display: inline-flex; align-items: center; gap: .4rem; color: #25D366; font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) { .wa-join { flex-wrap: wrap; } .wa-go { width: 100%; } }

/* ===================================================================
   CREATOR WALL
   =================================================================== */
.creator-wall .head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.wall-frame { position: relative; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--gold-line); }
.wall-frame img { display: block; width: 100%; height: auto; }
.wall-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.1) 34%, transparent 55%); }
.wall-frame figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(1rem, 3vw, 1.6rem); display: flex; align-items: baseline; gap: .55rem; color: rgba(255,255,255,.82); font-size: 1rem; }
.wall-frame figcaption b { color: #F2C24E; font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }

.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.story { position: relative; margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.story img { display: block; width: 100%; height: clamp(190px, 22vw, 250px); object-fit: cover; transition: transform .6s var(--ease); }
.story:hover img { transform: scale(1.05); }
.story::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(10,10,10,.92) 4%, rgba(10,10,10,.15) 58%, transparent 100%); }
.story figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1rem 1.15rem; }
.story figcaption b { display: block; color: #fff; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.story figcaption span { color: rgba(255,255,255,.78); font-size: .85rem; }

/* ===================================================================
   FOOTER
   =================================================================== */
.foot { padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem; border-top: 1px solid var(--border); }
.foot-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.foot img.lk { height: 3.5rem; width: auto; flex: none; margin-bottom: 1.1rem; }
.foot-about { color: var(--muted); font-size: 1rem; line-height: 1.65; max-width: 52ch; text-wrap: pretty; }
.foot .say { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.03em; }
.foot .say .gold { color: var(--gold); }
.foot-social { display: flex; gap: .6rem; }
.foot-social a { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); transition: .25s var(--ease); }
.foot-social a:hover { color: var(--gold); border-color: var(--gold-line); }
.foot-social svg { width: 1.05rem; height: 1.05rem; }
.foot-meta { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--faint); font-size: .9rem; }
.foot-meta a { color: var(--muted); }

/* ===================================================================
   SUCCESS
   =================================================================== */
.success-hero { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem); }
.success-hero .kick { color: var(--gold); font-weight: 600; display: inline-flex; gap: .5rem; align-items: center; margin-bottom: 1.2rem; }
.success-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
.success-hero h1 .gold { color: var(--gold); }
.number-line { margin-top: 2.25rem; display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; }
.number-line .lab { color: var(--faint); font-size: .95rem; }
.number-line .no { font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: 1; }
.success-hero .welcome { margin-top: 1.5rem; color: var(--muted); font-size: 1.15rem; max-width: 52ch; }

.grow-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 3vw, 2rem); align-items: start; }
.panel { min-width: 0; padding: clamp(1.75rem, 3vw, 2.25rem); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.grow-grid { min-width: 0; }
.grow-grid > * { min-width: 0; }
.panel h3 { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; }
.panel .sub { margin-top: .6rem; color: var(--muted); }
.link-row { display: flex; gap: .6rem; margin-top: 1.4rem; }
.link-field { flex: 1; min-width: 0; padding: .85rem 1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--gold); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.1rem; }
.share-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem .95rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); font-size: .92rem; font-weight: 500; transition: .25s var(--ease); }
.share-btn:hover { color: var(--gold); border-color: var(--gold-line); }
.share-btn svg { width: 1rem; height: 1rem; flex: none; aspect-ratio: 1; }

.progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.progress-head .big { font-size: 2.6rem; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1; }
.progress-head .lab { color: var(--faint); font-size: .92rem; }
.pbar { height: .55rem; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 1.4rem 0 .8rem; }
.pbar > i { display: block; height: 100%; border-radius: 99px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
.pmeta { display: flex; justify-content: space-between; color: var(--muted); font-size: .9rem; }
.pmeta b { color: var(--gold); font-weight: 600; }

/* recognition ladder */
.ladder { border-top: 1px solid var(--border); margin-top: .5rem; }
.lrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.lrow .at { font-size: 1.4rem; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; min-width: 2.5rem; }
.lrow.done .at { color: var(--gold); }
.lrow .nm { font-weight: 600; color: var(--text); }
.lrow .nm small { display: block; font-weight: 400; color: var(--faint); font-size: .88rem; margin-top: .15rem; }
.lrow .st { font-size: .88rem; font-weight: 600; color: var(--faint); display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.lrow.done .st { color: var(--green); }

/* ===================================================================
   MOTION — reveal enhances an already-visible default (transform only)
   =================================================================== */
/* Gated on .js so content is fully visible if JS never runs (no-JS / crawlers). */
.js [data-rise] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-rise].in { opacity: 1; transform: none; }
/* gentle cascade for the numbered index + grouped cards */
.js .index .ritem:nth-child(2) { transition-delay: .06s; }
.js .index .ritem:nth-child(3) { transition-delay: .12s; }
.js .index .ritem:nth-child(4) { transition-delay: .18s; }
.js .index .ritem:nth-child(5) { transition-delay: .24s; }

/* hero page-load choreography (one signature moment) */
.js [data-in] { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
[data-hero].lit [data-in] { opacity: 1; transform: none; }
.js [data-in-globe] { opacity: 0; transform: scale(.92); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
[data-hero].lit [data-in-globe] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rise], .js [data-in], .js [data-in-globe] { transform: none !important; opacity: 1 !important; transition: none !important; }
  .globe-spinner { animation: none; }
  .pbar > i { transition: none; }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 980px) {
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .globe-stage { width: min(84vw, 440px); aspect-ratio: 1; justify-self: center; margin: .5rem auto 0; }
  .why-grid { grid-template-columns: 1fr; }
  .reserve-grid { grid-template-columns: 1fr; }
  .reserve-aside { border-right: 0; border-bottom: 1px solid var(--border); }
  .grow-grid { grid-template-columns: 1fr; }
  .nav-proof { display: none; }
}
@media (max-width: 560px) {
  .frow { grid-template-columns: 1fr; }
  .brand img { max-height: 2.5rem; }
  .nav-right { gap: .45rem; }
  .nav .btn-gold { padding: .6rem .85rem; font-size: .85rem; }
  .theme-toggle { width: 2.2rem; height: 2.2rem; }
  .btn-extra { display: none; }   /* "Reserve" only on small screens */
  .ritem { grid-template-columns: auto 1fr; }
  /* drop the full-bleed negative margins so rows keep page padding on mobile */
  .brow, .ritem { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

  /* success / referral page — mobile tuning */
  .number-line { flex-direction: column; align-items: flex-start; gap: .25rem; margin-top: 1.5rem; }
  .link-row { flex-direction: column; }
  .link-row .btn { width: 100%; }
  .progress-head { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .lrow { grid-template-columns: auto 1fr; gap: .5rem 1rem; padding: .9rem 0; }
  .lrow .st { grid-column: 1 / -1; justify-self: start; }
  .brow { gap: .8rem; padding: 1rem 0; }
  .brow .rk { font-size: 1.3rem; }
  .brow .cnt b { font-size: 1.2rem; }
  .brow .who .nm { font-size: 1.05rem; }
  .wa-join { gap: .8rem; }
  .wa-tx b { font-size: 1rem; }
  .story-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .brow { grid-template-columns: 1.6rem 1fr auto; }
  .number-line .no { font-size: 2.7rem; }
  .share-btn { font-size: .85rem; padding: .55rem .8rem; }
  .brand img { max-height: 2.2rem; }
  .nav .btn-gold { padding: .55rem .75rem; font-size: .8rem; }
}