/* ============================================================
   MUZA — Cinematic 3D scroll site
   Brand: near-black #0A0A0A + gold #C9A84C (single accent).
   Type: Cormorant Garamond (serif display) + DM Sans (body).
   Dark only. Centered logo + slogan header.
   ============================================================ */
:root {
  --ink:        #0A0A0A;
  --surface:    #131313;
  --surface-2:  #1B1B1A;
  --line:       #2A2823;
  --text:       #F3F1EA;
  --muted:      #A29B8C;
  --muted-2:    #6E685C;
  --gold:       #C9A84C;   /* brand accent */
  --gold-2:     #E4C87C;   /* lighter gold for glows/gradients */

  --font-head: "Sora", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --maxw: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* on-video fixed colors */
  --v-text:#F7F5EF; --v-gold:#E4C87C; --v-gold-soft:rgba(201,168,76,.85);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .head { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; }
.mono-label {
  font-family: var(--font-body); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.32em;
  font-size: 0.72rem; color: var(--gold);
}
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
a { color: inherit; text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.92rem; padding: 0.85em 1.6em; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, border-color .3s, color .3s;
}
.btn-gold {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #1a1305; box-shadow: 0 6px 24px -6px rgba(201,168,76,.5);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(201,168,76,.7); }
.btn-ghost { background: rgba(201,168,76,.05); border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--gold); background: rgba(201,168,76,.12); transform: translateY(-2px); }

/* ---------- Fixed header — centered logo + slogan ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center; align-items: center;
  padding: 16px 24px; border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), backdrop-filter .4s, border-color .4s, padding .4s var(--ease);
}
.nav.scrolled { background: rgba(10,10,10,.72); backdrop-filter: blur(14px) saturate(1.15); border-bottom-color: var(--line); padding: 10px 24px; }
.brand-lockup { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nav-logo { height: 67px; width: auto; display: block; filter: drop-shadow(0 0 20px rgba(201,168,76,.4)); transition: height .4s var(--ease); }
.nav.scrolled .nav-logo { height: 50px; }
.nav-slogan {
  font-family: var(--font-body); font-weight: 500; font-size: 0.85rem;
  letter-spacing: 0.32em; text-transform: uppercase; color: rgba(201,168,76,.92);
  white-space: nowrap;
}
.nav-login {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-weight: 500; font-size: 0.85rem;
  color: rgba(243,241,234,.85); border: 1px solid rgba(201,168,76,.42);
  padding: 0.5em 1.15em; border-radius: 999px; transition: color .3s, border-color .3s, background .3s;
}
.nav-login:hover { color: #fff; border-color: var(--gold); background: rgba(201,168,76,.12); }

/* ---------- Phase rail (fixed, over dark video) ---------- */
.phase-rail {
  position: fixed; right: 30px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 22px;
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease);
}
.phase-rail::before {
  content: ""; position: absolute; right: 4px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(var(--v-gold), rgba(201,168,76,.12)); /* the gold route line */
}
.phase-rail.show { opacity: 1; }
/* row-reverse: dot sits on the outer (right) edge, label reads inward */
.phase-rail .rl { display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; color: #7c7768; transition: color .35s; cursor: pointer; }
.phase-rail .rl .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 1.5px solid #7c7768;
  transition: all .35s var(--ease); flex: none; position: relative; z-index: 1;
}
.phase-rail .rl .rl-num { font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.15em; width: 1.6em; }
.phase-rail .rl .rl-name {
  font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0; transform: translateX(6px); transition: all .35s var(--ease); white-space: nowrap;
}
.phase-rail .rl.active { color: var(--v-gold); }
.phase-rail .rl.active .dot { background: var(--v-gold); border-color: var(--v-gold); box-shadow: 0 0 14px var(--v-gold); }
.phase-rail .rl.active .rl-name { opacity: 1; transform: translateX(0); }
.phase-rail .rl.done .dot { background: rgba(201,168,76,.55); border-color: rgba(201,168,76,.55); }

/* ---------- Cinematic scrub section ---------- */
.cinematic { position: relative; }
.cinematic.hero-cine { height: 260vh; }
.cinematic.phase-cine { height: 230vh; }
.sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; background: #0A0A0A; }
.cinematic.pending .sticky {
  background:
    radial-gradient(90% 70% at 22% 32%, rgba(201,168,76,.14), transparent 55%),
    radial-gradient(80% 80% at 88% 92%, rgba(201,168,76,.06), transparent 55%),
    linear-gradient(160deg, #14120C, #0A0A0A 70%);
}
.cinematic.pending .scrub-canvas { display: none; }
/* The canvas 2D context is alpha:false, so its bitmap composites as opaque
   black even before the first drawImage. Keep the canvas invisible until the
   engine confirms a painted frame (JS adds .painted), and let each section
   carry its own first frame as a CSS poster underneath — real imagery shows
   as soon as that single JPG arrives, not when the whole 900-frame preload
   settles. If the JS ever fails outright, the posters simply stay. */
.scrub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s ease; }
.cinematic.painted .scrub-canvas { opacity: 1; }
#hero-scrub .sticky { background: #07090E url("frames/hero/frame_0001.jpg") center / cover no-repeat; }
#p1 .sticky { background: #07090E url("frames/p1-request/frame_0001.jpg") center / cover no-repeat; }
#p2 .sticky { background: #07090E url("frames/p2-sourced/frame_0001.jpg") center / cover no-repeat; }
#p3 .sticky { background: #07090E url("frames/p3-inspected/frame_0001.jpg") center / cover no-repeat; }
#p4 .sticky { background: #07090E url("frames/p4-shipped/frame_0001.jpg") center / cover no-repeat; }
#p5 .sticky { background: #07090E url("frames/p5-delivered/frame_0001.jpg") center / cover no-repeat; }
.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 40%, transparent 40%, rgba(4,4,3,.55) 100%),
    linear-gradient(180deg, rgba(4,4,3,.55) 0%, transparent 22%, transparent 55%, rgba(4,4,3,.92) 100%);
}
.scrim.left {
  background:
    linear-gradient(90deg, rgba(4,4,3,.92) 0%, rgba(4,4,3,.5) 34%, transparent 62%),
    linear-gradient(180deg, rgba(4,4,3,.5) 0%, transparent 30%, transparent 60%, rgba(4,4,3,.92) 100%);
}
/* Hero needs a stronger left ground so the headline reads over the bright sky/sun */
.hero-cine .scrim {
  background:
    linear-gradient(90deg, rgba(5,5,4,.93) 0%, rgba(5,5,4,.78) 16%, rgba(5,5,4,.4) 32%, rgba(5,5,4,.1) 46%, transparent 56%),
    linear-gradient(180deg, rgba(5,5,4,.5) 0%, transparent 22%, transparent 52%, rgba(5,5,4,.85) 100%);
}

/* ---------- Hero overlay ---------- */
.hero-overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(24px, 8vw, 120px);
}
.hero-inner { max-width: 900px; }
.hero-h1 { font-size: clamp(3rem, 7.6vw, 7.2rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; margin-bottom: 24px; color: var(--v-text); filter: drop-shadow(0 4px 26px rgba(0,0,0,.62)) drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.hero-h1 .grad {
  background: linear-gradient(120deg, #E4C87C, #C9A84C);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-h1 span.w { display: inline-block; opacity: 0; transform: translateY(28px); }
.hero-sub { font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.18rem); color: rgba(247,245,239,.9); max-width: 560px; margin-bottom: 34px; text-shadow: 0 1px 16px rgba(0,0,0,.8); opacity: 0; animation: fadeUp 1s var(--ease) 1.05s forwards; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; opacity: 0; animation: fadeUp 1s var(--ease) 1.25s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

.scroll-cue {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 12;
  font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.4em; color: rgba(247,245,239,.55);
  text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity .4s;
}
.scroll-cue .bar { width: 1px; height: 40px; background: linear-gradient(var(--v-gold), transparent); animation: cuepulse 1.8s ease-in-out infinite; }
@keyframes cuepulse { 0%,100% { opacity:.35; transform: scaleY(.7);} 50% { opacity:1; transform: scaleY(1);} }

.readout {
  position: absolute; right: 28px; bottom: 30px; z-index: 12;
  font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.22em;
  color: var(--v-gold-soft); text-transform: uppercase;
}

/* ---------- Phase overlay ---------- */
.phase-overlay {
  position: absolute; inset: 0; z-index: 10; display: flex; align-items: center;
  padding: 0 clamp(24px, 8vw, 120px); opacity: 0; will-change: opacity, transform;
}
.phase-inner { max-width: 640px; }
.phase-num {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(4rem, 10vw, 9rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(201,168,76,.6); letter-spacing: -0.03em; margin-bottom: 2px; display: block;
}
.phase-title { font-size: clamp(2.4rem, 5.2vw, 4.2rem); font-weight: 700; line-height: 1.0; letter-spacing: -0.025em; margin: 4px 0 18px; color: var(--v-text); }
.phase-desc { font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.2rem); color: rgba(247,245,239,.86); max-width: 500px; }
.phase-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.chip {
  font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--v-gold);
  background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.32); padding: 0.5em 0.95em; border-radius: 999px;
}

/* ---------- Standard content sections ---------- */
section.block { position: relative; padding: clamp(45px, 6vw, 80px) 0; }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head .mono-label { display: block; margin-bottom: 16px; }
.section-head h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.04; }
.section-head p { font-family: var(--font-body); color: var(--muted); font-size: 1.08rem; margin-top: 16px; }

.value { background: radial-gradient(80% 120% at 50% 0%, rgba(201,168,76,.09), transparent 55%), var(--ink); }
.value .wrap { text-align: center; }
.value-lead { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.6rem,2.9vw,2.5rem); line-height: 1.3; max-width: 900px; margin: 0 auto; letter-spacing: -0.02em; }
.value-lead b { color: var(--gold); font-weight: 700; }
.value-note { font-family: var(--font-body); color: var(--muted); font-size: clamp(0.95rem, 1.4vw, 1.05rem); line-height: 1.6; margin: 20px auto 0; max-width: 900px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 60px; }
/* the row itself is only a scroll trigger — its columns animate individually */
.stats.reveal { opacity: 1; transform: none; transition: none; }
.stat { position: relative; padding-top: 22px; }

/* 1 — gold hairline draws in, left to right */
.stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(201,168,76,.45);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .7s var(--ease);
  transition-delay: calc(var(--si, 0) * 170ms);
}
.stats.in .stat::before { transform: scaleX(1); }

/* 3D icon above the number */
.stat-ic { display: block; width: 34px; height: 34px; margin: 0 auto 14px;
  opacity: 0; transform: translateY(8px) scale(.9);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: calc(var(--si, 0) * 170ms); }
.stat-ic img { width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.stats.in .stat-ic { opacity: 1; transform: none; }

/* 2 — number appears as it starts counting (JS drives the count) */
.stat .stat-num {
  font-family: var(--font-head); font-weight: 600; font-size: clamp(2.4rem,3.8vw,3.4rem);
  color: var(--text); line-height: 1; letter-spacing: 0;
  opacity: 0; transition: opacity .45s var(--ease);
  transition-delay: calc(var(--si, 0) * 170ms + 620ms);
}
.stats.in .stat .stat-num { opacity: 1; }
/* ambient: slow gold glow pulse, only after the count finishes */
.stat .stat-num.counted { animation: stat-glow 5s ease-in-out infinite; }
@keyframes stat-glow {
  0%,100% { text-shadow: 0 0 18px rgba(201,168,76,.10); }
  50%     { text-shadow: 0 0 34px rgba(201,168,76,.38); }
}

/* 3 — label fades in beneath */
.stat .stat-label {
  font-family: var(--font-body); color: var(--muted); font-size: 0.92rem; margin-top: 10px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: calc(var(--si, 0) * 170ms + 1150ms);
}
.stats.in .stat .stat-label { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .stat::before { transform: scaleX(1) !important; transition: none !important; }
  .stat-ic, .stat .stat-num, .stat .stat-label { opacity: 1 !important; transform: none !important; transition: none !important; }
  .stat .stat-num.counted { animation: none !important; }
}

.phases-intro { text-align: center; background: var(--ink); padding-bottom: 40px; }
.phases-intro h2 { font-size: clamp(2.4rem,5.4vw,4rem); }
.phases-intro .flow { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 8px; margin-top: 30px; color: var(--muted); font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.phases-intro .flow span.node { color: var(--text); }
.phases-intro .flow span.sep { color: var(--gold); }

/* Why MUZA — bento */
.why-bento {
  display: grid; gap: 16px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "qc qc qc verify verify verify"
    "qc qc qc freight freight freight";
}
.btile {
  position: relative; overflow: hidden; border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #151410, #0d0d0c);
  padding: 30px; min-height: 212px; color: var(--gold);
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  transition: transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.btile:hover { transform: translateY(-6px); border-color: rgba(201,168,76,.55);
  box-shadow: 0 30px 64px -30px rgba(201,168,76,.5), 0 0 0 1px rgba(201,168,76,.12); }
/* cursor-following spotlight aura (21st.dev spotlight-card pattern, adapted to vanilla) */
.btile-aura { position: absolute; inset: 0; pointer-events: none; opacity: .68; transition: opacity .45s var(--ease);
  background: radial-gradient(50% 56% at var(--mx, 80%) var(--my, 16%), rgba(201,168,76,.26), transparent 62%); }
.btile:hover .btile-aura { opacity: 1; }
.btile-motif { position: absolute; top: -18%; right: -10%; width: 62%; color: var(--gold); opacity: .28; pointer-events: none; }
.btile-ic { width: 46px; height: 46px; border-radius: 12px; display: inline-grid; place-items: center; flex: none;
  background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.3); color: var(--gold);
  transition: transform .45s var(--ease), border-color .45s, background .45s; }
.btile:hover .btile-ic { transform: scale(1.07) translate(var(--ix, 0px), var(--iy, 0px));
  border-color: rgba(201,168,76,.55); background: rgba(201,168,76,.18); }

/* staggered entrance: large QC card first, then Sourcing, then Logistics */
.why-bento .btile.reveal { transition-delay: 0s; }
.why-bento .btile.reveal.d1 { transition-delay: .12s; }
.why-bento .btile.reveal.d2 { transition-delay: .24s; }

/* radar motif — actively scanning */
.radar-cross, .radar-ping, .radar-dot { transform-box: view-box; transform-origin: 100px 100px; }
.btile.in .radar-cross { animation: radar-spin 42s linear infinite; }
.btile.in .radar-ping { animation: radar-ping 3.4s ease-out infinite; }
.btile.in .radar-ping-2 { animation-delay: 1.7s; }
.btile.in .radar-dot { animation: radar-breathe 3s ease-in-out infinite; }
.radar-ping { opacity: 0; }
@keyframes radar-spin { to { transform: rotate(360deg); } }
@keyframes radar-ping {
  0%   { transform: scale(.34); opacity: 0; }
  12%  { opacity: .7; }
  100% { transform: scale(2.85); opacity: 0; }
}
@keyframes radar-breathe {
  0%,100% { transform: scale(.8); opacity: .55; }
  50%     { transform: scale(1.3); opacity: 1; }
}
.btile-ic svg { width: 22px; height: 22px; }
.btile-ic img { width: 32px; height: 32px; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.btile-txt { position: relative; z-index: 2; }
.btile-cat { display: block; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.68rem; color: var(--gold); margin-bottom: 10px; }
.btile h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; color: var(--text); font-size: 1.5rem; margin-bottom: 10px; }
.btile p { font-family: var(--font-body); color: var(--muted); font-size: 0.98rem; max-width: 44ch; }
.btile-lg { min-height: 302px; }
.btile-lg h3 { font-size: 1.95rem; }
.btile-lg .btile-aura { background: radial-gradient(56% 60% at var(--mx, 74%) var(--my, 22%), rgba(201,168,76,.28), transparent 62%); }
.btile-wide { flex-direction: row; align-items: center; gap: 40px; }
.btile-wide .btile-txt { display: flex; flex-direction: column; align-items: flex-start; }
.btile-wide .btile-ic { margin-bottom: 18px; }
.btile-ui { width: 300px; max-width: 42%; height: auto; flex: none; }
@media (max-width: 900px) {
  .why-bento { grid-template-columns: 1fr; grid-template-areas: "qc" "verify" "freight"; }
  .btile, .btile-lg { min-height: 200px; }
  .btile-wide { flex-direction: column; align-items: flex-start; gap: 26px; }
  .btile-ui { width: 100%; max-width: 340px; }
  .btile-motif { width: 46%; }
}
@media (prefers-reduced-motion: reduce) {
  .btile:hover { transform: none; box-shadow: none; }
  .btile:hover .btile-ic { transform: none; }
  .btile.in .radar-cross, .btile.in .radar-ping, .btile.in .radar-dot { animation: none !important; }
  .radar-ping { opacity: 0 !important; }
  .btile-aura { opacity: .8 !important; }
}

/* ===== App / dashboard section ===== */
.appsec { padding-top: clamp(12px, 2vw, 28px); }
.appsec-panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center;
  border: 1px solid var(--line); border-radius: 26px;
  background:
    radial-gradient(75% 130% at 100% 45%, rgba(201,168,76,.16), transparent 58%),
    linear-gradient(120deg, #0c0c0b, #131210 60%);
  padding: clamp(32px, 5vw, 64px);
}
.appsec-copy { position: relative; z-index: 3; max-width: 470px; }
.appsec-copy .mono-label { display: block; margin-bottom: 16px; }
.appsec-copy h2 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(2.1rem, 4vw, 3.3rem); line-height: 1.02; color: var(--text); margin-bottom: 18px; }
.appsec-copy p { font-family: var(--font-body); color: var(--muted); font-size: 1.06rem; line-height: 1.6; margin-bottom: 30px; }

.store-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.store-badge { display: inline-flex; align-items: center; gap: 11px; background: #0b0b0a; border: 1px solid var(--line); border-radius: 13px; padding: 9px 17px; transition: border-color .3s, transform .3s, background .3s; }
.store-badge:hover { border-color: rgba(201,168,76,.55); transform: translateY(-2px); background: #121110; }
.sb-ic { width: 24px; height: 24px; color: #F3F1EA; flex: none; }
.sb-txt { display: flex; flex-direction: column; line-height: 1.12; font-family: var(--font-body); color: #F3F1EA; text-align: left; }
.sb-txt small { font-size: 0.6rem; letter-spacing: 0.03em; opacity: .78; text-transform: uppercase; }
.sb-txt b { font-size: 1.02rem; font-weight: 600; }

.appsec-visual { position: relative; z-index: 2; display: flex; justify-content: center; }

/* real (generated) phone image + motion */
.phone-shell { position: relative; display: flex; justify-content: center; align-items: center; }
.phone-glow { position: absolute; inset: -12% -10%; z-index: 0; pointer-events: none;
  background: radial-gradient(52% 54% at 54% 46%, rgba(201,168,76,.24), transparent 70%); filter: blur(12px);
  animation: phone-glow 5s ease-in-out infinite; }
.phone-img { position: relative; z-index: 1; width: clamp(280px, 38vw, 416px); height: auto; display: block;
  filter: drop-shadow(0 50px 80px rgba(0,0,0,.7)); animation: phone-float 6.5s ease-in-out infinite; will-change: transform; }
@keyframes phone-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes phone-glow { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .phone-img, .phone-glow { animation: none !important; } }

/* floating gold particles */
.app-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.app-particles span { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(246,206,126,.95), rgba(201,168,76,.25) 55%, transparent 72%); animation: app-float linear infinite; will-change: transform, opacity; }
@keyframes app-float { 0% { transform: translate(0,0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(24px,-130px); opacity: 0; } }

/* phone mockup */
.phone { position: relative; width: clamp(238px, 25vw, 296px); aspect-ratio: 296 / 604; border-radius: 42px;
  background: linear-gradient(155deg, #303030, #0d0d0d); padding: 9px;
  box-shadow: 0 44px 90px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(201,168,76,.16), inset 0 0 0 2px rgba(255,255,255,.05); }
.phone-island { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 30%; height: 20px; background: #000; border-radius: 20px; z-index: 6; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #17140d, #09090807); }
.app-ui { position: absolute; inset: 0; padding: 42px 15px 16px; display: flex; flex-direction: column; gap: 11px; font-family: var(--font-body); }
.app-status { display: flex; justify-content: space-between; align-items: center; font-size: 0.6rem; color: rgba(243,241,234,.72); padding: 0 6px; }
.app-status-r { display: flex; gap: 3px; align-items: center; }
.app-status-r i { width: 4px; height: 7px; background: rgba(243,241,234,.6); border-radius: 1px; display: block; }
.app-status-r i.batt { width: 15px; height: 8px; border: 1px solid rgba(243,241,234,.55); background: linear-gradient(90deg, var(--gold-2) 72%, transparent 72%); border-radius: 2px; }
.app-head { display: flex; justify-content: center; padding: 2px 0 4px; }
.app-head img { height: 20px; filter: drop-shadow(0 0 8px rgba(201,168,76,.45)); }
.app-card { background: linear-gradient(180deg, rgba(201,168,76,.09), rgba(255,255,255,.02)); border: 1px solid rgba(201,168,76,.22); border-radius: 15px; padding: 13px; }
.app-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.app-ship { font-size: 0.72rem; color: var(--text); font-weight: 600; }
.app-pill { font-size: 0.54rem; text-transform: uppercase; letter-spacing: .07em; color: #1a1305; background: var(--gold-2); padding: 3px 8px; border-radius: 999px; font-weight: 700; }
.app-steps { display: flex; align-items: center; gap: 5px; margin-bottom: 12px; }
.app-steps .s { font-size: 0.52rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.app-steps .s.done, .app-steps .s.cur { color: var(--gold-2); }
.app-steps .ln { flex: 1; height: 2px; background: var(--line); border-radius: 2px; position: relative; overflow: hidden; }
.app-steps .ln.done { background: var(--gold); }
.app-steps .ln.cur::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gold); }
.app-eta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.app-eta small { font-size: 0.54rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.app-eta b { font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; color: var(--text); }
.app-chart { width: 100%; height: 40px; }
.app-chart-line { stroke-dasharray: 430; stroke-dashoffset: 430; }
.app-actlabel { font-size: 0.54rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); margin-top: 2px; }
.app-activity { display: flex; flex-direction: column; gap: 8px; }
.arow { display: flex; align-items: center; gap: 8px; font-size: 0.66rem; color: rgba(243,241,234,.82); opacity: 0; transform: translateY(6px); }
.arow small { margin-left: auto; color: var(--muted-2); font-size: 0.58rem; }
.arow .adot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 6px rgba(228,200,124,.8); flex: none; }
/* play the in-phone animations when the panel scrolls into view */
.appsec-panel.in .app-chart-line { animation: app-draw 1.8s var(--ease) .7s forwards; }
.appsec-panel.in .app-steps .ln.cur::after { animation: app-fill 2.2s var(--ease) .5s forwards; }
.appsec-panel.in .arow { animation: app-rowin .5s var(--ease) forwards; }
.appsec-panel.in .arow:nth-child(1) { animation-delay: 1.1s; }
.appsec-panel.in .arow:nth-child(2) { animation-delay: 1.35s; }
.appsec-panel.in .arow:nth-child(3) { animation-delay: 1.6s; }
@keyframes app-draw { to { stroke-dashoffset: 0; } }
@keyframes app-fill { to { width: 58%; } }
@keyframes app-rowin { to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .appsec-panel { grid-template-columns: 1fr; text-align: center; gap: 36px; }
  .appsec-copy { max-width: none; margin: 0 auto; }
  .appsec-copy h2 br { display: none; }
  .store-badges { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .app-particles span { animation: none !important; opacity: .55 !important; }
  .app-chart-line { stroke-dashoffset: 0 !important; animation: none !important; }
  .appsec-panel .app-steps .ln.cur::after { width: 58% !important; animation: none !important; }
  .arow { opacity: 1 !important; transform: none !important; animation: none !important; }
}

.presence { background: radial-gradient(80% 120% at 50% 100%, rgba(201,168,76,.08), transparent 60%), var(--ink); }

/* ===== 3D globe (globe.gl / three.js) ===== */
.globe-wrap {
  position: relative; margin: 2px auto 10px;
  width: 100%; height: clamp(600px, 70vw, 840px);
  display: flex; align-items: center; justify-content: center; overflow: visible;
}
#globe-viz { width: 100%; height: 100%; }
#globe-viz canvas { display: block; outline: none; }
.globe-fallback { background: #0A0A0A url("assets/world-night-gold.png") center/contain no-repeat; border-radius: 16px; opacity: .92; }
@media (max-width: 600px) {
  /* keep the box no taller than it is wide — globe.gl sizes the sphere off
     the shorter canvas edge, so a tall narrow box cropped the globe's sides */
  .globe-wrap { height: clamp(300px, 92vw, 420px); }
}
.hubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-top: 12px; }
.hub { background: var(--ink); padding: 28px 26px; transition: background .3s; }
.hub:hover { background: var(--surface); }
.hub .city { font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; }
.hub .role { font-family: var(--font-body); color: var(--muted); font-size: 0.85rem; margin-top: 4px; }
.hub.hq .city { color: var(--gold); }
.hub .role .pin { color: var(--gold); }

.cta { text-align: center; background: radial-gradient(90% 90% at 50% 0%, rgba(201,168,76,.14), transparent 55%), radial-gradient(90% 120% at 50% 120%, rgba(201,168,76,.08), transparent 55%), var(--ink); }
.cta h2 { font-size: clamp(2.6rem,6vw,5rem); line-height: 1.02; max-width: 820px; margin: 0 auto 22px; }
.cta p { font-family: var(--font-body); color: var(--muted); font-size: 1.1rem; max-width: 520px; margin: 0 auto 34px; }
.cta .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* no hard edge: fade from the page colour into the footer surface */
/* the radial continues .cta's bottom glow (90% 120% at 50% 120%, .08) across the join */
footer {
  padding: 66px 0 40px;
  background:
    radial-gradient(90% 120% at 50% -20%, rgba(201,168,76,.08), transparent 55%),
    linear-gradient(180deg, var(--ink) 0%, var(--surface) 38%);
}
.foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 44px; }
/* Brand block: lockup centered over the tagline + login button at all widths. */
.foot-brand { text-align: center; }
.foot-logo { height: 53px; width: auto; display: block; margin: 0 auto; filter: drop-shadow(0 0 16px rgba(201,168,76,.3)); }
.foot-tagline { color: var(--muted); font-family: var(--font-body); font-size: 0.95rem; max-width: 280px; margin: 18px auto 22px; }
.foot-login { display: inline-flex; font-size: 0.86rem; padding: 0.7em 1.3em; }
.foot-h { font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.7rem; color: var(--muted-2); margin-bottom: 18px; }
.foot-col a { display: block; color: var(--muted); font-family: var(--font-body); font-size: 0.92rem; margin-bottom: 11px; transition: color .25s; }
.foot-col a:hover { color: var(--text); }
.fc-item { display: flex; align-items: center; gap: 11px; }
.fc-item svg { width: 17px; height: 17px; fill: var(--gold); flex: none; }
.foot-copy { color: var(--muted-2); font-family: var(--font-body); font-size: 0.82rem; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: 1fr; }
  .hubs { grid-template-columns: repeat(2, 1fr); }
  .phase-rail { display: none; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  /* Brand block spans the full row — center the lockup over the tagline. */
  .foot-brand { grid-column: 1 / -1; text-align: center; }
  .foot-brand .foot-logo { margin: 0 auto; }
  .foot-brand .foot-tagline { margin: 18px auto 22px; }
}
@media (max-width: 600px) {
  .nav { padding: 14px 18px; }
  .nav-logo { height: 58px; }
  .nav-slogan { font-size: 0.72rem; letter-spacing: 0.24em; }
  .wrap { padding: 0 20px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 18px; }
  .hubs { grid-template-columns: 1fr; }
  .cinematic.hero-cine { height: 210vh; }
  .cinematic.phase-cine { height: 200vh; }
  .hero-overlay, .phase-overlay { padding: 0 22px; }
  .hero-h1 { font-size: clamp(2rem, 8.6vw, 2.9rem); }
  .hero-sub { font-size: 0.98rem; }
  .nav-login { right: 16px; font-size: 0.78rem; padding: 0.45em 0.9em; }
  .foot-top { grid-template-columns: 1fr; gap: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ============================================================
   CLIENT VOICES — testimonial carousel
   Motion adapted from the 21st.dev "Testimonial Slider" pattern
   (autoplay + pause on interaction, dots + arrow controls),
   rebuilt in vanilla CSS/JS to match the page's gold-on-black kit.
   ============================================================ */
/* Seamless section joins.
   The ambient glows are radial gradients centred ON a section edge, so they sit
   at full strength right where the section stops — against the next section's
   flat ink that reads as a hard line. Each neighbour below carries the matching
   half of the glow, so the alpha is identical on both sides of the join and the
   bloom continues across it instead of being cut. Keep these paired: change one
   side's colour/geometry and you must change the other. */

/* continues .presence's bottom glow (50% 100%, .08) */
.voices { background: radial-gradient(80% 120% at 50% 0%, rgba(201,168,76,.08), transparent 60%), var(--ink); }

/* continues .cta's top glow (90% 90% at 50% 0%, .14) */
.faq { background: radial-gradient(90% 90% at 50% 100%, rgba(201,168,76,.14), transparent 55%), var(--ink); }

.accent-rule {
  display: block; width: 64px; height: 2px; margin-top: 22px;
  background: linear-gradient(90deg, var(--gold-2), var(--gold) 55%, rgba(201,168,76,0));
  border-radius: 2px;
}

.vcar { position: relative; }

.vcard {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 62%);
  padding: clamp(34px, 4.4vw, 60px) clamp(26px, 4vw, 66px) clamp(34px, 4vw, 52px);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.9);
}
/* ambient gold bloom, same family as the Why MUZA tiles */
.vcard-aura {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 52% at 84% 8%, rgba(201,168,76,.16), transparent 64%);
}
.vquote {
  position: absolute; top: clamp(18px, 2.4vw, 30px); right: clamp(20px, 3vw, 44px);
  width: clamp(64px, 8vw, 104px); height: auto;
  opacity: .92; pointer-events: none;
  /* the render's brushed faces are near-white champagne and read grey on the
     dark card — push them back into the page's gold */
  filter: saturate(1.5) sepia(.16) drop-shadow(0 10px 26px rgba(201,168,76,.3));
  animation: vquote-float 7s ease-in-out infinite;
}
@keyframes vquote-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(-1.5deg); }
}

/* Slides are stacked absolutely and the track's height is animated to the
   active slide (JS). Sizing to the tallest quote instead would leave a dead
   gap under the short ones; hard-setting height would jump. */
.vtrack {
  position: relative; height: 0;
  transition: height .6s var(--ease);
}
.vslide {
  position: absolute; top: 0; left: 0; right: 0; margin: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.vslide.is-active { opacity: 1; transform: none; pointer-events: auto; }

.vslide blockquote {
  margin: 0; font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.55vw, 1.32rem); line-height: 1.66;
  color: var(--v-text); max-width: 68ch;
  /* keep the text clear of the quote glyph in the top-right corner — without
     this it runs underneath it once the viewport drops below the 68ch cap */
  padding-right: clamp(58px, 9vw, 128px);
}
.vslide figcaption { display: flex; flex-direction: column; gap: 5px; margin-top: 30px; }
.vname {
  font-family: var(--font-head); font-weight: 800; font-size: 1.02rem;
  letter-spacing: -.01em; color: var(--gold-2);
}
.vrole {
  font-family: var(--font-body); font-size: .9rem; color: var(--muted);
}

/* controls */
.vctrl {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: 28px;
}
.vdots { display: flex; align-items: center; gap: 10px; }
.vdot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  border: 1px solid var(--muted-2); background: transparent; cursor: pointer;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.vdot:hover { border-color: var(--gold); transform: scale(1.2); }
.vdot.is-on {
  background: var(--gold); border-color: var(--gold);
  transform: scale(1.25); box-shadow: 0 0 12px rgba(201,168,76,.6);
}
.varrows { display: flex; gap: 10px; }
.varrow {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.varrow svg { width: 19px; height: 19px; }
.varrow:hover {
  color: var(--ink); border-color: var(--gold); background: var(--gold);
  transform: translateY(-2px);
}
.varrow:active { transform: translateY(0); }
.varrow:focus-visible, .vdot:focus-visible, .faq-btn:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

/* ============================================================
   FAQ — accordion
   Motion adapted from the 21st.dev "Interactive Accordion" pattern
   (plus icon rotating to an X, height-animated panel), vanilla rebuild.
   ============================================================ */
/* The orb is anchored to the wrap, not the 760px text column, so it sits in
   the clear space to the right of the headline instead of colliding with it. */
.faq .wrap { position: relative; }
.faq-orb {
  position: absolute; top: 2px; right: 0;
  width: clamp(84px, 9vw, 124px); height: auto;
  opacity: .88; pointer-events: none;
  filter: drop-shadow(0 14px 34px rgba(201,168,76,.28));
  animation: vquote-float 8s ease-in-out infinite;
}

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { margin: 0; }
.faq-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 26px 4px; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.02rem, 1.5vw, 1.24rem); letter-spacing: -.01em;
  color: var(--text);
  transition: color .3s var(--ease);
}
.faq-btn:hover { color: var(--gold-2); }
.faq-btn[aria-expanded="true"] { color: var(--gold-2); }
.faq-t { display: block; }

/* plus -> X: the icon is a plus built from two bars; rotating the whole
   thing 45deg turns it into an X, so there's no icon swap to jar the eye. */
.faq-ic {
  position: relative; flex: none; width: 22px; height: 22px;
  transition: transform .45s var(--ease), color .3s var(--ease);
  color: var(--muted);
}
.faq-ic::before, .faq-ic::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%);
}
.faq-ic::before { width: 100%; height: 1.6px; }
.faq-ic::after  { width: 1.6px; height: 100%; transition: opacity .45s var(--ease); }
.faq-btn:hover .faq-ic { color: var(--gold); }
.faq-btn[aria-expanded="true"] .faq-ic { transform: rotate(45deg); color: var(--gold); }

.faq-a {
  height: 0; overflow: hidden;
  transition: height .45s var(--ease);
}
.faq-inner { padding: 0 64px 30px 4px; }
.faq-inner p {
  margin: 0; font-family: var(--font-body);
  font-size: 1.02rem; line-height: 1.7; color: var(--muted);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease) .08s, transform .45s var(--ease) .08s;
}
.faq-item.is-open .faq-inner p { opacity: 1; transform: none; }

/* Below ~980px the headline column fills the wrap, so the orb has no clear
   space to sit in — stack it above the eyebrow instead of overlapping. */
@media (max-width: 980px) {
  .faq-orb { position: static; display: block; width: 72px; margin-bottom: 20px; }
}
@media (max-width: 700px) {
  .vquote { width: 56px; opacity: .7; }
  .faq-orb { width: 64px; }
  .vctrl { flex-direction: column-reverse; align-items: flex-start; gap: 22px; }
  .faq-inner { padding-right: 34px; }
  .vslide blockquote { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vslide { transition: none; }
  .vquote, .faq-orb { animation: none !important; }
  .faq-a { transition: none; }
  .faq-inner p { transition: none; opacity: 1; transform: none; }
  .faq-ic, .varrow, .vdot { transition: none; }
}