:root{
  --ink:#061a23; --ink-2:#3c5b67; --ink-3:#6a8890;
  --paper:#f4f8f6; --panel:#ffffff; --panel-2:#edf3f0;
  --line:#dbe6e1; --line-strong:#c4d4cd;
  --mint:#1ac874; --mint-deep:#0f9d5b; --mint-tint:#e4f7ec; --on-mint:#04150e;
  --gold:#a97a2e; --gold-tint:#f6ecd9;
  --rose:#c23f52; --rose-tint:#fbe8ea;
  --shadow:0 1px 2px rgba(6,26,35,.06), 0 12px 32px -16px rgba(6,26,35,.18);
  --shadow-lg:0 24px 64px -24px rgba(6,26,35,.35);
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --terminal:#061a23; --terminal-2:#0b2530; --terminal-3:#04141c;
  --terminal-text:#eaf3f0; --terminal-text-2:#93aeaa; --terminal-text-3:#5e7a76;
  --px:0; --py:0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#eef5f2; --ink-2:#a9c2bf; --ink-3:#799694;
    --paper:#061a23; --panel:#0b2530; --panel-2:#0e2c38;
    --line:#1c3b46; --line-strong:#2a4e59;
    --mint:#1ac874; --mint-deep:#29e08c; --mint-tint:#0f2c25; --on-mint:#04150e;
    --gold:#e0b46b; --gold-tint:#25281c;
    --rose:#ef7787; --rose-tint:#2c1a1e;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 20px 48px -20px rgba(0,0,0,.55);
    --shadow-lg:0 30px 80px -24px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ink:#eef5f2; --ink-2:#a9c2bf; --ink-3:#799694;
  --paper:#061a23; --panel:#0b2530; --panel-2:#0e2c38;
  --line:#1c3b46; --line-strong:#2a4e59;
  --mint:#1ac874; --mint-deep:#29e08c; --mint-tint:#0f2c25; --on-mint:#04150e;
  --gold:#e0b46b; --gold-tint:#25281c;
  --rose:#ef7787; --rose-tint:#2c1a1e;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 20px 48px -20px rgba(0,0,0,.55);
  --shadow-lg:0 30px 80px -24px rgba(0,0,0,.6);
  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;} html{overflow-x:hidden;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  transition:background .35s ease, color .35s ease;
  overflow-x:hidden;
}
::selection{background:var(--mint); color:var(--on-mint);}
img{max-width:100%; display:block;}
a{color:inherit;}
button{font-family:inherit;}
h1,h2,h3,h4{font-family:'Archivo', sans-serif; font-weight:800; letter-spacing:-0.01em; text-wrap:balance; margin:0;}
p{margin:0;}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}
:focus-visible{outline:2px solid var(--mint); outline-offset:3px; border-radius:4px;}

.wrap{max-width:1200px; margin:0 auto; padding-inline:24px; position:relative;}
@media (max-width:640px){ .wrap{padding-inline:18px;} }

.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mint-deep);
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{content:""; width:16px; height:1.5px; background:var(--mint); display:inline-block;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:var(--r-pill); font-weight:700; font-size:15px;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{ background:var(--mint); color:var(--on-mint); box-shadow:0 10px 24px -10px rgba(26,200,116,.55); }
.btn-primary:hover{ background:var(--mint-deep); box-shadow:0 16px 34px -10px rgba(26,200,116,.68); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--mint); color:var(--mint-deep); }
.btn-sm{ padding:9px 16px; font-size:13.5px; }
.btn-block{width:100%;}

.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--r-pill);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600; letter-spacing:.04em; }
.pill-buy{ background:var(--mint-tint); color:var(--mint-deep); }
.pill-sell{ background:var(--rose-tint); color:var(--rose); }
.pill-gold{ background:var(--gold-tint); color:var(--gold); }

section{ padding-block:104px; position:relative; }
@media (max-width:900px){ section{ padding-block:68px; } }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(28px,4vw,42px); margin-top:14px; }
.section-head p{ color:var(--ink-2); font-size:17px; margin-top:14px; }

/* ============ reveal-on-scroll ============ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--stagger, 0) * 90ms); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============ parallax + ambient scene ============ */
.parallax{ transform:translate(calc(var(--px) * var(--depth) * 1px), calc(var(--py) * var(--depth) * 1px)); transition:transform .3s ease-out; will-change:transform; }
@media (prefers-reduced-motion: reduce){ .parallax{ transform:none !important; transition:none; } }

.scene-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.scene-rings{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
@media (prefers-reduced-motion: no-preference){
  .scene-rings{ animation:ringSpin 120s linear infinite; transform-origin:82% 16%; }
}
@keyframes ringSpin{ to{ transform:rotate(360deg); } }
.scene-grid{
  position:absolute; inset:-10% -10%;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px);
  -webkit-mask-image:radial-gradient(60% 55% at 78% 20%, #000 0%, transparent 72%);
  mask-image:radial-gradient(60% 55% at 78% 20%, #000 0%, transparent 72%);
}
.scene-blob{ position:absolute; width:46vw; height:46vw; max-width:560px; max-height:560px; border-radius:50%; filter:blur(52px); opacity:.55; }
.scene-blob-a{ top:-14%; right:-8%; background:radial-gradient(circle, rgba(26,200,116,.30), transparent 68%); }
.scene-blob-b{ bottom:-18%; left:-10%; background:radial-gradient(circle, rgba(224,180,107,.20), transparent 68%); }
@media (prefers-reduced-motion: no-preference){
  .scene-blob-a{ animation:drift1 24s ease-in-out infinite alternate; }
  .scene-blob-b{ animation:drift2 28s ease-in-out infinite alternate; }
}
@keyframes drift1{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-4%,3%) scale(1.06);} }
@keyframes drift2{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(3%,-4%) scale(1.05);} }

/* ============ NAV ============ */
header.nav{ position:sticky; top:0; z-index:80; background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand img{ width:32px; height:32px; }
.brand-word{ font-family:'Archivo',sans-serif; font-weight:800; font-size:16.5px; letter-spacing:-.01em; line-height:1.1; }
.brand-word span{ display:block; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:9.5px; letter-spacing:.22em; color:var(--ink-3); margin-top:1px; }
.nav-links{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; font-size:14.5px; font-weight:600; color:var(--ink-2); transition:color .15s; position:relative; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--mint); transform:scaleX(0); transition:transform .2s ease; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.theme-btn{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); background:var(--panel);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); flex-shrink:0; }
.theme-btn svg{ width:17px; height:17px; }
.login-link{ font-size:14.5px; font-weight:600; text-decoration:none; color:var(--ink-2); }
.login-link:hover{ color:var(--ink); }
.nav-burger{ display:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); background:var(--panel);
  align-items:center; justify-content:center; cursor:pointer; color:var(--ink); }
.nav-burger svg{ width:18px; height:18px; }
.mobile-menu{ display:none; position:fixed; inset:0; z-index:90; background:var(--paper); padding:20px 24px; overflow-y:auto;
  opacity:0; pointer-events:none; transition:opacity .25s ease; }
.mobile-menu.show{ opacity:1; pointer-events:auto; }
.mobile-menu-top{ display:flex; justify-content:space-between; align-items:center; }
.mobile-menu ul{ list-style:none; margin:44px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.mobile-menu a{ text-decoration:none; color:var(--ink); font-family:'Archivo',sans-serif; font-weight:700; font-size:28px; padding:12px 0; border-bottom:1px solid var(--line); }
.mobile-menu-cta{ margin-top:36px; display:flex; flex-direction:column; gap:12px; }
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-actions .login-link{ display:none; }
  .nav-burger{ display:inline-flex; }
  .mobile-menu{ display:block; }
}

/* ============ HERO ============ */
.hero{ padding-block:64px 40px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:40px; align-items:center; position:relative; z-index:1; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ font-size:clamp(34px,5.2vw,58px); line-height:1.04; margin-top:18px; }
.hero h1 em{ font-style:normal; background:linear-gradient(100deg, var(--mint-deep), var(--mint) 60%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ font-size:18px; color:var(--ink-2); margin-top:20px; max-width:52ch; }
.hero-cta{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:10px; flex-wrap:wrap; margin-top:34px; }
.stat-chip{ display:flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid var(--line); border-radius:var(--r-pill);
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-2); background:var(--panel); }
.stat-chip b{ color:var(--ink); font-weight:600; }
.stat-chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--mint); }

/* ---- animated hero visual ---- */
.hero-visual{ position:relative; aspect-ratio:540/560; width:100%; max-width:540px; margin-inline:auto; }
.hero-ghost-logo{ position:absolute; top:2%; right:2%; width:34%; opacity:.16; filter:blur(.2px); }
.hero-curve{ position:absolute; inset:0; width:100%; height:100%; }
.orb-wrap{ position:absolute; transform-origin:center; }
.orb{ border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.25);
  transform:translate(-50%,-50%);
}
@media (prefers-reduced-motion: no-preference){
  .orb{ animation:orbFloat var(--fdur,6s) ease-in-out infinite; animation-delay:var(--fdelay,0s); }
}
@keyframes orbFloat{ 0%,100%{ transform:translate(-50%,-50%) translateY(0); } 50%{ transform:translate(-50%,-50%) translateY(-9px); } }
.orb-gold{ background:radial-gradient(circle at 34% 28%, #fbe7ae, #cf9c44 58%, #7c5a22 100%); border:1px solid rgba(255,224,150,.5); }
.orb-gold .orb-ticker{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13px; color:#3c2a08; letter-spacing:.02em; }
.orb-glass{ background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.14), rgba(6,26,35,.65) 68%); border:1px solid rgba(255,255,255,.18); color:#bcd8d2; backdrop-filter:blur(3px); }
.orb-glass svg{ width:40%; height:40%; }
.orb-accent{ border-color:rgba(26,200,116,.55); box-shadow:0 0 0 5px rgba(26,200,116,.12), 0 10px 30px -8px rgba(0,0,0,.5); color:#8ff0c2; }
.orb-label{ position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); font-size:9.5px; letter-spacing:.12em; color:var(--terminal-text-2); white-space:nowrap; }

.hero-tip{ position:absolute; background:var(--terminal-2); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:10px 14px;
  box-shadow:var(--shadow-lg); opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.hero-tip.show{ opacity:1; transform:translateY(0); }
.hero-tip .t1{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; color:var(--terminal-text); }
.hero-tip .t1 b{ color:var(--mint); font-weight:600; margin-left:4px; }
.hero-tip .t2{ font-size:10.5px; color:var(--terminal-text-3); margin-top:2px; }
.hero-tip-1{ left:0; top:52%; }
.hero-tip-2{ left:40%; top:10%; }
@media (max-width:640px){
  .hero-tip{ display:none; }
  .hero-visual{ max-width:400px; }
}

/* ============ MARQUEE ============ */
.marquee-rail{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; background:var(--panel-2); position:relative; z-index:1; }
.marquee-track{ display:flex; gap:0; width:max-content; }
@media (prefers-reduced-motion: no-preference){ .marquee-track{ animation:scrollx 38s linear infinite; } }
@keyframes scrollx{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.tick{ display:flex; align-items:center; gap:9px; padding:13px 28px; font-family:'IBM Plex Mono',monospace; font-size:13px; border-right:1px solid var(--line); white-space:nowrap; }
.tick .up{ color:var(--mint-deep); } .tick .down{ color:var(--rose); }
.tick b{ color:var(--ink); font-weight:600; }

/* ============ PILLARS ============ */
.pillars-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .pillars-grid{ grid-template-columns:1fr; } }
.pillar-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:28px;
  display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; position:relative; overflow:hidden; }
.pillar-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(26,200,116,0), rgba(26,200,116,0)); opacity:0; transition:opacity .25s ease; pointer-events:none; }
.pillar-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.pillar-card:hover::before{ opacity:1; background:linear-gradient(135deg, rgba(26,200,116,.5), rgba(224,180,107,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.pillar-code{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:var(--mint-deep); letter-spacing:.06em; }
.pillar-icon{ width:44px; height:44px; border-radius:var(--r-sm); background:var(--mint-tint); display:flex; align-items:center; justify-content:center; color:var(--mint-deep); transition:transform .25s ease; }
.pillar-card:hover .pillar-icon{ transform:scale(1.08) rotate(-4deg); }
.pillar-icon svg{ width:22px; height:22px; }
.pillar-card h3{ font-size:20px; }
.pillar-card p{ color:var(--ink-2); font-size:15px; }
.pillar-link{ margin-top:auto; font-size:14px; font-weight:700; color:var(--mint-deep); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.pillar-link svg{ width:14px; height:14px; transition:transform .15s; }
.pillar-link:hover svg{ transform:translateX(3px); }

/* ============ DARK PANEL (AGTS) ============ */
.panel-dark{ background:var(--terminal-3); color:var(--terminal-text); }
.panel-dark .eyebrow{ color:var(--mint); }
.panel-dark .eyebrow::before{ background:var(--mint); }
.panel-dark h2{ color:#fff; }
.panel-dark p{ color:#a9c2bf; }
.agts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1; }
@media (max-width:940px){ .agts-grid{ grid-template-columns:1fr; gap:40px; } }

.stepper{ position:relative; margin:30px 0 0; }
.step{ display:flex; gap:18px; align-items:flex-start; position:relative; padding-bottom:30px; }
.step:last-child{ padding-bottom:0; }
.step-rail{ position:absolute; left:16.5px; top:34px; bottom:6px; width:1.5px; background:linear-gradient(var(--mint), rgba(26,200,116,.08)); }
.step:last-child .step-rail{ display:none; }
.step-num{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(26,200,116,.4); background:var(--terminal-3); color:var(--mint);
  display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; flex-shrink:0; position:relative; z-index:1; }
.step h4{ font-family:'Archivo',sans-serif; font-size:16px; color:#eaf3f0; font-weight:700; padding-top:5px; }
.step p{ font-size:14.5px; color:#93aeaa; margin-top:4px; }
.fine{ font-size:12.5px; color:#6c8985; margin-top:26px; max-width:52ch; line-height:1.6; }

.feature-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-md); margin-top:56px; overflow:hidden; }
@media (max-width:760px){ .feature-strip{ grid-template-columns:1fr 1fr; } }
.feature-cell{ background:var(--terminal-3); padding:22px 20px; display:flex; flex-direction:column; gap:10px; }
.feature-cell svg{ width:19px; height:19px; color:var(--mint); }
.feature-cell b{ font-size:14px; color:#eaf3f0; font-family:'Archivo',sans-serif; }
.feature-cell span{ font-size:12.5px; color:#7f9995; line-height:1.5; }

/* device / phone mockups */
.device-stage{ perspective:1400px; overflow:hidden; padding:20px 0; }
.device{ max-width:300px; margin-inline:auto; position:relative; }
.device-frame{ background:linear-gradient(160deg,#132f3b,#081a22); border-radius:34px; padding:12px; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.08);
  transform:rotate3d(0.35,-1,0.06,9deg); transition:transform .3s ease-out; }
.device-screen{ background:#061218; border-radius:24px; padding:18px 16px 20px; min-height:400px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; }
.device-screen::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 60% at 100% 0%, rgba(26,200,116,.14), transparent 60%); pointer-events:none; }
.device-bar{ display:flex; justify-content:space-between; align-items:center; }
.device-tag{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.14em; color:#5e7a76; text-transform:uppercase; }
.device-head{ display:flex; align-items:center; gap:8px; }
.device-head img{ width:18px; height:18px; }
.device-head b{ color:#eaf3f0; font-size:13px; font-family:'Archivo',sans-serif; }
.device-equity{ margin-top:2px; }
.device-equity .lbl{ font-size:10.5px; color:#7f9995; font-family:'IBM Plex Mono',monospace; }
.device-equity .num{ font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:600; color:#eaf3f0; margin-top:4px; font-variant-numeric:tabular-nums; }
.device-equity .delta{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--mint); margin-top:2px; }
.phone-curve{ width:100%; height:70px; margin-top:6px; }
.device-rows{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.device-row{ display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:10px 12px; }
.device-row .k{ font-size:11.5px; color:#8aa39e; font-family:'IBM Plex Mono',monospace; }
.device-row .v{ font-size:12px; color:#eaf3f0; font-family:'IBM Plex Mono',monospace; font-weight:600; }
.device-badge{ display:flex; align-items:center; gap:10px; background:rgba(26,200,116,.1); border:1px solid rgba(26,200,116,.28); border-radius:12px; padding:11px 12px; margin-top:auto; }
.device-badge b{ display:block; font-size:12px; color:#eaf3f0; font-family:'Archivo',sans-serif; }
.device-badge span{ display:block; font-size:10.5px; color:#7f9995; margin-top:1px; }
.device-glow{ position:absolute; inset:10% 0 auto auto; width:70%; height:70%; background:radial-gradient(circle, rgba(26,200,116,.28), transparent 68%); filter:blur(40px); z-index:-1; }

/* ============ SIGNALS / PHONE ============ */
.signals-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media (max-width:940px){ .signals-grid{ grid-template-columns:1fr; gap:40px; } }
.feature-list{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.feature-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-2); }
.feature-list svg{ width:18px; height:18px; color:var(--mint-deep); flex-shrink:0; margin-top:2px; }
.feature-list b{ color:var(--ink); }

.phone-stage{ position:relative; perspective:1400px; }
.phone{ max-width:300px; margin-inline:auto; background:var(--terminal-2); border-radius:32px; padding:14px; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.08);
  transform:rotate3d(0.3,1,0.04,-8deg); }
.phone-screen{ background:#06141b; border-radius:22px; padding:16px 14px 18px; min-height:420px; display:flex; flex-direction:column; gap:12px; }
.phone-bar{ display:flex; justify-content:space-between; align-items:center; }
.phone-tag{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.14em; color:#5e7a76; text-transform:uppercase; }
.phone-title{ text-align:center; }
.phone-title b{ color:#eaf3f0; font-size:13.5px; font-family:'Archivo',sans-serif; }
.phone-title span{ display:block; font-size:10.5px; color:#5e7a76; font-family:'IBM Plex Mono',monospace; margin-top:1px; }
.msg{ background:#0f2c38; border-radius:14px; padding:13px 14px; border:1px solid rgba(255,255,255,.06); }
.msg-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.msg-sym{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:#eaf3f0; font-weight:600; }
.msg-rows{ display:grid; grid-template-columns:1fr 1fr; gap:5px 12px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#9db5b1; }
.msg-rows b{ color:#eaf3f0; font-variant-numeric:tabular-nums; }
.msg-note{ font-size:11px; color:#6c8985; margin-top:8px; line-height:1.5; }
.msg-closed{ display:inline-block; margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; background:rgba(26,200,116,.14); color:var(--mint); padding:3px 8px; border-radius:6px; }
.phone .pill-buy{ background:rgba(26,200,116,.15); color:#4be39a; }
.phone .pill-sell{ background:rgba(239,119,135,.16); color:#ef7787; }
.float-card{ position:absolute; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow-lg); }
.float-card b{ display:block; font-family:'IBM Plex Mono',monospace; font-size:16px; color:var(--mint-deep); }
.float-card span{ font-size:11px; color:var(--ink-2); }
.float-card-1{ top:-6%; right:-4%; }
@media (max-width:640px){ .float-card-1{ display:none; } }

/* ============ CURRICULUM ============ */
.roadmap{ position:relative; }
.road-item{ display:grid; grid-template-columns:64px 1fr auto; gap:20px; align-items:flex-start; padding-block:22px; border-top:1px solid var(--line); position:relative; transition:padding-left .25s ease, background .25s ease; }
.road-item:hover{ padding-left:8px; }
.road-item:first-child{ border-top:1px solid var(--line); }
.road-line{ display:none; }
.road-num{ font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:600; color:var(--line-strong); transition:color .25s ease; }
.road-item:hover .road-num{ color:var(--mint-deep); }
.road-body h4{ font-size:18px; font-weight:700; font-family:'Archivo',sans-serif; }
.road-body p{ color:var(--ink-2); font-size:14.5px; margin-top:6px; max-width:58ch; }
.road-dur{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-3); white-space:nowrap; padding-top:4px; }
@media (max-width:640px){ .road-item{ grid-template-columns:40px 1fr; } .road-dur{ grid-column:2; padding-top:0; } }

/* ============ PRICING ============ */
.billing-toggle{ display:inline-flex; align-items:center; gap:0; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px; }
.billing-toggle button{ border:none; background:transparent; padding:8px 18px; border-radius:var(--r-pill); font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--ink-2); transition:background .2s, color .2s; }
.billing-toggle button.active{ background:var(--mint); color:var(--on-mint); }
.save-tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--mint-deep); margin-left:10px; }

.price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:36px; }
.price-grid.one{ grid-template-columns:minmax(0,600px); justify-content:center; }
.price-amount s{ font-family:'IBM Plex Mono',monospace; font-size:26px; color:var(--ink-3); text-decoration:line-through; text-decoration-thickness:2px; margin-right:4px; }
.price-list li b{ font-weight:700; }
@media (max-width:840px){ .price-grid{ grid-template-columns:1fr; } }
.price-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow); transition:transform .25s ease; }
.price-card.featured{ border-color:var(--mint); position:relative; box-shadow:0 24px 60px -22px rgba(26,200,116,.35); }
.price-card.featured:hover{ transform:translateY(-4px); }
.price-badge{ position:absolute; top:-13px; left:28px; background:var(--mint); color:var(--on-mint); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; padding:4px 12px; border-radius:var(--r-pill); letter-spacing:.04em; }
.price-tier{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; }
.price-card h3{ font-size:22px; margin-top:6px; }
.price-amount{ display:flex; align-items:baseline; gap:6px; margin-top:18px; }
.price-amount b{ font-family:'IBM Plex Mono',monospace; font-size:42px; font-weight:600; letter-spacing:-.02em; }
.price-amount span{ color:var(--ink-2); font-size:14px; }
.price-desc{ color:var(--ink-2); font-size:14px; margin-top:8px; }
.price-list{ list-style:none; margin:24px 0 28px; padding:0; display:flex; flex-direction:column; gap:11px; }
.price-list li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink); }
.price-list svg{ width:16px; height:16px; color:var(--mint-deep); flex-shrink:0; margin-top:3px; }

/* ============ FAQ ============ */
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:none; padding:22px 4px; display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; color:var(--ink); }
.faq-q span{ font-size:17px; font-weight:700; font-family:'Archivo',sans-serif; }
.faq-q svg{ width:18px; height:18px; flex-shrink:0; transition:transform .25s ease; color:var(--mint-deep); }
.faq-item[data-open="true"] .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a-in{ padding:0 4px 22px; color:var(--ink-2); font-size:15px; max-width:70ch; }

/* ============ RISK PANEL ============ */
.risk-box{ border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:var(--r-sm); padding:24px 26px; background:var(--panel); }
.risk-box .eyebrow{ color:var(--gold); }
.risk-box .eyebrow::before{ background:var(--gold); }
.risk-box p{ color:var(--ink-2); font-size:13.5px; line-height:1.7; margin-top:14px; }

/* ============ FINAL CTA ============ */
.cta-band{ background:linear-gradient(135deg, var(--mint), var(--mint-deep)); color:var(--on-mint); }
.cta-band h2{ color:var(--on-mint); font-size:clamp(28px,4.4vw,44px); }
.cta-band p{ color:rgba(4,21,14,.75); margin-top:12px; font-size:17px; }
.cta-inner{ display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; }
.cta-band .btn-primary{ background:var(--on-mint); color:#fff; box-shadow:none; }
.cta-band .btn-primary:hover{ background:#0a2118; }
.cta-note{ font-size:12.5px; color:rgba(4,21,14,.65); margin-top:14px; font-family:'IBM Plex Mono',monospace; }

/* ============ FOOTER ============ */
footer{ background:var(--terminal-3); color:var(--terminal-text-2); padding-block:64px 30px; position:relative; overflow:hidden; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:40px; position:relative; z-index:1; }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-brand{ display:flex; align-items:center; gap:10px; }
.foot-brand img{ width:30px; height:30px; }
.foot-brand b{ color:#fff; font-family:'Archivo',sans-serif; font-size:15.5px; }
.foot-tag{ font-size:13.5px; margin-top:14px; max-width:32ch; line-height:1.6; }
.foot-socials{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); position:relative; z-index:1; }
.foot-social{ display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.035); padding:7px 13px 7px 11px; border-radius:var(--r-pill); font-size:12.5px; font-weight:500; line-height:1.2; text-decoration:none; color:#dbe8e4; transition:border-color .2s, background .2s, color .2s; }
.foot-social:hover{ border-color:rgba(26,200,116,.55); background:rgba(26,200,116,.08); color:#fff; }
.foot-social svg{ width:14px; height:14px; color:var(--mint); }
.foot-legal{ margin-top:22px; font-size:11.5px; line-height:1.7; color:#6f8a86; max-width:none; position:relative; z-index:1; }
.foot-h{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:#5e7a76; margin-bottom:16px; }
.foot-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot-links a{ text-decoration:none; font-size:13.8px; color:#a9c2bf; }
.foot-links a:hover{ color:#fff; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:24px; padding-top:24px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12.5px; color:#5e7a76; position:relative; z-index:1; }

/* ============ DISCOUNT POPUP ============ */
.popup-backdrop{ position:fixed; inset:0; background:rgba(3,12,16,.6); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:200; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.popup-backdrop.show{ opacity:1; pointer-events:auto; }
.popup-card{ background:var(--panel); color:var(--ink); border-radius:var(--r-lg); max-width:420px; width:100%; padding:34px 30px 28px;
  position:relative; box-shadow:var(--shadow-lg); transform:translateY(14px) scale(.98); transition:transform .3s ease; border:1px solid var(--line); }
.popup-backdrop.show .popup-card{ transform:translateY(0) scale(1); }
.popup-close{ position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--ink-2); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.popup-close svg{ width:14px; height:14px; }
.popup-card h3{ font-size:24px; margin-top:14px; }
.popup-card p{ color:var(--ink-2); font-size:14.5px; margin-top:10px; }
.code-badge{ display:flex; align-items:center; justify-content:space-between; gap:10px; border:1.5px dashed var(--mint); background:var(--mint-tint); border-radius:var(--r-sm); padding:12px 16px; margin-top:20px; }
.code-badge .code{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:16px; letter-spacing:.06em; color:var(--mint-deep); }
.code-badge button{ border:none; background:none; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; color:var(--mint-deep); cursor:pointer; letter-spacing:.04em; }
.popup-card .btn{ margin-top:20px; }
.popup-later{ display:block; text-align:center; margin-top:12px; font-size:13px; color:var(--ink-3); text-decoration:none; cursor:pointer; background:none; border:none; width:100%; }

.reopen-tab{ position:fixed; bottom:22px; right:22px; z-index:190; background:var(--ink); color:#fff; border:none; border-radius:var(--r-pill);
  padding:12px 18px; display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600;
  box-shadow:var(--shadow-lg); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .25s, transform .25s; }
.reopen-tab.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.reopen-tab .dot{ width:7px; height:7px; border-radius:50%; background:var(--mint); }
/* ===== brochure layer ===== */
.page-head{ position:relative; padding-block:76px 60px; overflow:hidden; background:var(--terminal-3); color:var(--terminal-text); }
.page-head .wrap{ position:relative; z-index:1; }
.page-head .eyebrow{ color:var(--mint); } .page-head .eyebrow::before{ background:var(--mint); }
.page-head h1{ font-size:clamp(34px,5vw,60px); line-height:1.03; margin-top:16px; color:#fff; max-width:19ch; }
.page-head p{ color:#a9c2bf; font-size:17px; margin-top:16px; max-width:60ch; }
.page-head .meta{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:#6c8985; margin-top:22px; letter-spacing:.06em; }
.crumbs{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.08em; color:#6c8985; margin-bottom:20px; }
.crumbs a{ color:#a9c2bf; text-decoration:none; } .crumbs a:hover{ color:#fff; }

/* headline lockup used by brochure sections */
.lockup{ display:flex; align-items:center; gap:18px; }
.lockup .ico{ height:62px; display:flex; align-items:center; justify-content:flex-start; flex-shrink:0; }
.lockup .ico img{ height:100%; width:auto; max-width:190px; filter:drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.lockup h2{ font-size:clamp(28px,4vw,46px); line-height:1.02; }
.lockup .sub{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mint-deep); margin-top:6px; }
.panel-dark .lockup .sub{ color:var(--mint); }
.kicker{ font-size:clamp(19px,2.3vw,24px); font-weight:700; font-family:'Archivo',sans-serif; margin-top:26px; max-width:30ch; letter-spacing:-.01em; }
.tagline{ font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(20px,2.4vw,26px); letter-spacing:-.02em; margin-top:26px; }
.tagline span{ color:var(--mint-deep); }
.panel-dark .tagline span{ color:var(--mint); }
.note{ font-size:12px; color:var(--ink-3); margin-top:18px; line-height:1.6; max-width:80ch; }
.panel-dark .note{ color:#6c8985; }

/* four pillar photo cards */
.pcards{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width:1200px){ .pcards{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:1000px){ .pcards{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pcards{ grid-template-columns:1fr; } .pcard{ min-height:290px; } .pcard p, .pcard .sub{ min-height:0; } }
.pcard{ position:relative; border-radius:var(--r-md); overflow:hidden; min-height:370px; display:flex; flex-direction:column; justify-content:flex-end;
  text-decoration:none; color:#fff; border:1px solid var(--line); background:var(--terminal-2); transition:transform .28s ease, box-shadow .28s ease; }
.pcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.pcard .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; transition:transform .5s ease, opacity .3s; }
.pcard:hover .bg{ transform:scale(1.06); opacity:.85; }
.pcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,20,28,.05) 0%, rgba(4,20,28,.62) 42%, rgba(4,20,28,.95) 78%); }
.pcard .n{ position:absolute; top:16px; right:18px; z-index:2; font-family:'IBM Plex Mono',monospace; font-size:13px; color:rgba(255,255,255,.75); }
.pcard .ico{ position:relative; z-index:2; height:40px; margin:0 20px 12px; display:flex; align-items:flex-end; }
.pcard .ico img{ height:100%; width:auto; max-width:120px; }
.pcard .txt{ position:relative; z-index:2; padding:0 20px 22px; }
.pcard h3{ font-size:21px; color:#fff; }
.pcard .sub{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.07em; color:var(--mint); margin-top:5px; text-transform:uppercase; min-height:2.4em; }
.pcard p{ font-size:13.5px; color:#c4d8d4; margin-top:10px; min-height:6.4em; }

/* price banner */
.pricebar{ text-align:center; max-width:760px; margin-inline:auto; }
.pricebar h2{ font-size:clamp(30px,4.6vw,54px); line-height:1.02; }

/* programme rail */
.progs{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:44px; }
@media (max-width:900px){ .progs{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .progs{ grid-template-columns:1fr 1fr; } }
.prog{ position:relative; }
.prog .shot{ position:relative; border-radius:10px; overflow:hidden; aspect-ratio:302/417; border:1px solid rgba(255,255,255,.12); }
.prog .shot img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.prog:hover .shot img{ transform:scale(1.07); }
.prog .cap{ margin-top:12px; }
.prog .cap b{ font-family:'Archivo',sans-serif; font-size:19px; letter-spacing:-.01em; color:#fff; }
.prog .cap span{ display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mint); margin-top:3px; }
.rail-line{ position:relative; height:1px; background:rgba(255,255,255,.16); margin-top:44px; }
.rail-line i{ position:absolute; top:-4px; width:9px; height:9px; border-radius:50%; background:#fff; }

/* TradeQuo */
.tq-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.tq-logo{ max-width:260px; opacity:.95; }
.tq-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:42px; border-top:1px solid rgba(255,255,255,.16); }
@media (max-width:1000px){ .tq-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .tq-grid{ grid-template-columns:1fr; } }
.tq-cell{ padding:26px 22px 0 0; position:relative; }
.tq-cell::before{ content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; border-radius:50%; background:#fff; }
.tq-cell b{ display:block; font-family:'Archivo',sans-serif; font-size:15px; color:#fff; margin-bottom:8px; }
.tq-cell p{ font-size:13.5px; color:#a9c2bf; line-height:1.6; }

/* stat row */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:38px; }
@media (max-width:820px){ .stats{ grid-template-columns:1fr 1fr; } }
.stat{ border:1px solid var(--line); border-radius:var(--r-md); padding:22px; background:var(--panel); }
.stat b{ display:block; font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:600; letter-spacing:-.02em; }
.stat span{ font-size:12.5px; color:var(--ink-2); display:block; margin-top:6px; }
.panel-dark .stat{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
.panel-dark .stat b{ color:#fff; } .panel-dark .stat span{ color:#a9c2bf; }

/* generic prose / legal */
.prose{ max-width:760px; }
.prose h2{ font-size:clamp(22px,2.6vw,30px); margin-top:44px; padding-top:26px; border-top:1px solid var(--line); }
.prose h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.prose h3{ font-size:18px; margin-top:26px; }
.prose p{ color:var(--ink-2); font-size:16px; line-height:1.75; margin-top:14px; }
.prose ul{ color:var(--ink-2); font-size:16px; line-height:1.7; margin:14px 0 0; padding-left:22px; }
.prose li{ margin-top:7px; } .prose li b, .prose p b{ color:var(--ink); }
.prose a{ color:var(--mint-deep); }
.prose .num{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--mint-deep); letter-spacing:.1em; display:block; margin-bottom:6px; }
.callout{ border:1px solid var(--line); border-left:3px solid var(--mint); background:var(--panel); border-radius:var(--r-sm); padding:18px 20px; margin-top:22px; font-size:15px; color:var(--ink-2); }
.todo{ border:1.5px dashed var(--gold); background:var(--gold-tint); color:var(--ink); border-radius:var(--r-sm); padding:18px 20px; margin-top:24px; font-size:14.5px; }
.todo b{ font-family:'IBM Plex Mono',monospace; letter-spacing:.08em; font-size:12px; color:var(--gold); display:block; margin-bottom:6px; }
.two-col{ display:grid; grid-template-columns:1fr 330px; gap:48px; align-items:start; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }
.aside{ position:sticky; top:96px; display:flex; flex-direction:column; gap:14px; }
.aside .box{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:20px; }
.aside .box h4{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px; font-weight:600; }
.aside .box a.nav-a{ display:block; text-decoration:none; font-size:14px; color:var(--ink-2); padding:7px 0; border-top:1px solid var(--line); }
.aside .box a.nav-a:first-of-type{ border-top:0; } .aside .box a.nav-a:hover{ color:var(--mint-deep); }
.aside .box.mint{ background:var(--mint-tint); border-color:var(--mint); }
.aside .box p{ font-size:13.5px; color:var(--ink-2); }

.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
@media (max-width:820px){ .steps-grid{ grid-template-columns:1fr; } }
.stepc{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:24px; }
.stepc .n{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--mint-deep); letter-spacing:.1em; }
.stepc h3{ font-size:18px; margin-top:10px; } .stepc p{ color:var(--ink-2); font-size:14.5px; margin-top:8px; }

.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.cc{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:24px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px; transition:transform .2s, border-color .2s; }
.cc:hover{ transform:translateY(-3px); border-color:var(--mint); }
.cc .ico{ width:40px; height:40px; border-radius:var(--r-sm); background:var(--mint-tint); color:var(--mint-deep); display:flex; align-items:center; justify-content:center; }
.cc .ico svg{ width:20px; height:20px; }
.cc b{ font-family:'Archivo',sans-serif; font-size:17px; } .cc span{ color:var(--ink-2); font-size:14px; }
.cc .val{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--mint-deep); }
.form{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; display:grid; gap:14px; }
.form label{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:6px; }
.form input,.form textarea,.form select{ width:100%; background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:12px 14px; color:var(--ink); font-family:inherit; font-size:15px; }
.form textarea{ min-height:130px; resize:vertical; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .form .row{ grid-template-columns:1fr; } }
.faq-cat{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.12em; color:var(--mint-deep); text-transform:uppercase; margin:46px 0 4px; }
.faq-cat:first-child{ margin-top:0; }
.price-amount s{ font-family:'IBM Plex Mono',monospace; font-size:26px; color:var(--ink-3); text-decoration:line-through; text-decoration-thickness:2px; margin-right:6px; }
.price-grid.one{ grid-template-columns:minmax(0,620px); justify-content:center; }
.price-list li b{ font-weight:700; }
.premium-hero{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media (max-width:900px){ .premium-hero{ grid-template-columns:1fr; } }
.nav-links a.active{ color:var(--mint-deep); }
.hero-visual .hero-ghost-logo{ opacity:.14; }
.test-index{ max-width:880px; margin:0 auto; padding:56px 24px 80px; }
.test-index .pg{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); }
.test-index .pg a{ font-weight:700; text-decoration:none; color:var(--ink); font-size:17px; }
.test-index .pg a:hover{ color:var(--mint-deep); }
.test-index .pg span{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-3); }
.st{ font-family:'IBM Plex Mono',monospace; font-size:11px; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.st-ok{ background:var(--mint-tint); color:var(--mint-deep); } .st-todo{ background:var(--gold-tint); color:var(--gold); }

/* ===== scroll progress ===== */
.prog-bar{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; background:transparent; pointer-events:none; }
.prog-bar i{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--mint), var(--mint-deep)); box-shadow:0 0 12px rgba(26,200,116,.6); }

/* ===== floating join button ===== */
.join-fab{
  position:fixed; left:22px; right:auto; bottom:calc(22px + env(safe-area-inset-bottom,0px)); z-index:150;
  display:inline-flex; align-items:center; gap:14px; text-decoration:none;
  padding:13px 20px 13px 17px; border-radius:999px;
  background:linear-gradient(135deg, var(--mint) 0%, #16b96a 100%); color:var(--on-mint);
  box-shadow:0 10px 34px -8px rgba(26,200,116,.75), 0 2px 10px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transform:translateY(24px) scale(.94);
  transition:opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1), visibility .45s;
}
.join-fab.show{ opacity:1; visibility:visible; transform:none; }
.join-fab::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
@media (prefers-reduced-motion: no-preference){
  .join-fab.show::before{ animation:fabPulse 2.6s cubic-bezier(.2,.7,.2,1) infinite; }
  .join-fab.show{ animation:fabBob 3.6s ease-in-out 1s infinite; }
}
@keyframes fabPulse{ 0%{ box-shadow:0 0 0 0 rgba(26,200,116,.55);} 70%{ box-shadow:0 0 0 20px rgba(26,200,116,0);} 100%{ box-shadow:0 0 0 0 rgba(26,200,116,0);} }
@keyframes fabBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }
.join-fab:hover{ transform:translateY(-3px) scale(1.03); animation:none; box-shadow:0 16px 42px -8px rgba(26,200,116,.9); }
.fab-mark{ width:34px; height:34px; border-radius:50%; background:rgba(4,21,14,.14); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fab-mark svg{ width:17px; height:17px; }
.fab-txt{ display:flex; flex-direction:column; line-height:1.15; }
.fab-txt b{ font-family:'Archivo',sans-serif; font-size:14.5px; font-weight:800; letter-spacing:-.01em; }
.fab-txt span{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; opacity:.78; margin-top:2px; }
.fab-arrow{ display:flex; }
.fab-arrow svg{ width:16px; height:16px; }
@media (prefers-reduced-motion: no-preference){ .join-fab:hover .fab-arrow{ animation:fabNudge .7s ease-in-out infinite; } }
@keyframes fabNudge{ 50%{ transform:translateX(4px);} }
@media (max-width:560px){
  .join-fab{ left:12px; right:auto; bottom:calc(12px + env(safe-area-inset-bottom,0px)); padding:11px 15px 11px 12px; gap:10px; max-width:calc(100vw - 96px); }
  .fab-mark{ width:30px; height:30px; }
  .fab-txt b{ font-size:13px; }
  .fab-txt span{ font-size:9.5px; }
  .join-fab.show{ animation:none; }
}

/* the same join button, placed in the page (after the four pillars) */
.join-inline-wrap{ display:flex; justify-content:center; margin-top:56px; }
.join-fab.join-inline{ position:relative; left:auto; bottom:auto; z-index:1; opacity:1; visibility:visible; transform:none; }
@media (max-width:560px){ .join-fab.join-inline{ left:auto; bottom:auto; max-width:100%; } }

/* ===== scroll parallax (uses `translate`, so it composes with transform animations) ===== */
[data-par]{ translate:0 var(--py2, 0px); will-change:translate; }
@media (prefers-reduced-motion: reduce){ [data-par]{ translate:none !important; } }

/* ===== reveal variants ===== */
.reveal-l{ opacity:0; transform:translateX(-28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--stagger,0)*90ms); }
.reveal-r{ opacity:0; transform:translateX(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--stagger,0)*90ms); }
.reveal-s{ opacity:0; transform:scale(.94); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--stagger,0)*90ms); }
.reveal-l.in-view, .reveal-r.in-view, .reveal-s.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal-l,.reveal-r,.reveal-s{ opacity:1; transform:none; transition:none; } }
/* eyebrow rule draws in */
.reveal .eyebrow::before, .eyebrow.reveal::before{ width:0; transition:width .7s cubic-bezier(.2,.7,.2,1) .15s; }
.reveal.in-view .eyebrow::before, .eyebrow.reveal.in-view::before{ width:16px; }

/* ===== card tilt ===== */
.pcards{ perspective:1100px; }
.pcard{ transform-style:preserve-3d; }
.pcard .txt, .pcard .ico{ transform:translateZ(28px); }
.lockup .ico img{ transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.lockup:hover .ico img{ transform:translateY(-4px) scale(1.06); }
.stat{ transition:transform .3s ease, border-color .3s ease; }
.stat:hover{ transform:translateY(-4px); border-color:var(--mint); }
.tq-cell{ transition:transform .3s ease; }
.tq-cell:hover{ transform:translateY(-3px); }
.prog .shot{ transform:translateZ(0); }
.prog{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.prog:hover{ transform:translateY(-6px); }

/* buttons: keep inline icons small (base CSS has no rule for this) */
.btn svg{ width:16px; height:16px; flex-shrink:0; }
.btn-sm svg{ width:14px; height:14px; }

/* ===== plan comparison ===== */
.plans{ display:grid; grid-template-columns:minmax(0,640px); justify-content:center; gap:18px; align-items:start; }
@media (max-width:860px){ .plans{ grid-template-columns:1fr; } }
.plan{ background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:30px 28px; position:relative; display:flex; flex-direction:column; height:100%; }
.plan.hi{ border-color:var(--mint); background:linear-gradient(170deg, color-mix(in srgb, var(--mint) 7%, var(--panel)) 0%, var(--panel) 46%); box-shadow:0 24px 60px -26px rgba(26,200,116,.45); }
.plan-tag{ position:absolute; top:-12px; left:26px; background:var(--mint); color:var(--on-mint); font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700; letter-spacing:.12em; padding:5px 12px; border-radius:999px; }
.plan-name{ font-family:'Archivo',sans-serif; font-weight:800; font-size:24px; letter-spacing:-.02em; }
.plan-sub{ color:var(--ink-2); font-size:14px; margin-top:7px; max-width:44ch; }
.plan-star{ display:flex; align-items:center; gap:9px; margin-top:22px; font-size:14px; font-weight:700; font-family:'Archivo',sans-serif; }
.plan-star{ line-height:20px; }
.plan-star svg{ width:15px; height:15px; color:var(--mint); flex-shrink:0; }
.plan-list{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.plan-list li{ display:flex; gap:12px; align-items:flex-start; }
.plan-list b{ display:block; font-size:14.5px; font-weight:600; line-height:20px; }
.plan-list li div span{ display:block; font-size:13px; color:var(--ink-2); margin-top:3px; line-height:1.45; }
.plan-list .pcheck{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin:0; }
.plan-list .pcheck svg{ width:11px; height:11px; }
.plan-list .pcheck.mint{ background:var(--mint); color:var(--on-mint); }
.plan-list .pcheck.dim{ background:var(--panel-2); color:var(--ink-3); border:1px solid var(--line); }
.plan-more{ margin-top:18px; }
.plan-more summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--mint-deep); text-decoration:underline; text-underline-offset:3px; }
.plan-more summary::-webkit-details-marker{ display:none; }
.plan-more summary svg{ width:15px; height:15px; transition:transform .3s ease; }
.plan-more[open] summary svg{ transform:rotate(180deg); }
.plan-more .plan-list{ margin-top:16px; animation:planOpen .35s cubic-bezier(.2,.7,.2,1); }
@keyframes planOpen{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
.plan-foot{ margin-top:auto; padding-top:24px; }
.plan .plan-foot{ border-top:1px solid var(--line); margin-top:26px; }
.plan-unlock{ font-family:'Archivo',sans-serif; font-weight:800; font-size:19px; letter-spacing:-.02em; }
.plan-price{ display:flex; align-items:baseline; gap:8px; margin:6px 0 16px; }
.plan-price b{ font-family:'IBM Plex Mono',monospace; font-size:38px; font-weight:600; letter-spacing:-.03em; }
.plan-price span{ font-size:13px; color:var(--ink-2); }
.plan-price{ flex-wrap:wrap; row-gap:4px; }
.plan-was{ font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:500; color:var(--ink-3); text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:rgba(232,84,84,.85); }
.plan-off{ font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--on-mint); background:var(--mint); padding:4px 9px; border-radius:999px; align-self:center; white-space:nowrap; }
.plan-price .plan-off{ margin-inline-start:auto; }
.fab-txt s{ opacity:.65; text-decoration-thickness:1.5px; }
.plan-note{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-3); text-align:center; margin-top:10px; letter-spacing:.04em; }
.plan.hi .btn-primary{ box-shadow:0 12px 30px -10px rgba(26,200,116,.7); }
@media (prefers-reduced-motion: no-preference){
  .plan.hi{ animation:planGlow 5s ease-in-out infinite; }
}
@keyframes planGlow{ 0%,100%{ box-shadow:0 24px 60px -26px rgba(26,200,116,.45);} 50%{ box-shadow:0 28px 70px -24px rgba(26,200,116,.7);} }

/* plans inside the modal */
.popup-card.wide{ max-width:500px; max-height:calc(100vh - 32px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:22px 22px 16px; }
.popup-card.wide h3{ font-size:clamp(21px,2.4vw,25px); text-align:center; line-height:1.12; margin-top:6px; }
.popup-card.wide h3 em{ font-style:normal; color:var(--mint-deep); }
.popup-card.wide .lede{ text-align:center; color:var(--ink-2); font-size:13.5px; margin-top:6px; }
.popup-m{ width:64px; margin:0 auto; }
.plans-modal{ margin-top:22px; grid-template-columns:1fr; }
.plans-modal .plan{ padding:22px 20px 16px; border-radius:16px; }
.plans-modal .plan-name{ font-size:20px; }
.plans-modal .plan-sub{ font-size:13px; margin-top:4px; }
.plans-modal .plan-star{ margin-top:14px; font-size:13px; }
.plans-modal .plan-list{ gap:9px; margin-top:10px; }
.plans-modal .plan-list b{ font-size:13.5px; line-height:18px; }
.plans-modal .plan-list li div span{ font-size:12px; margin-top:1px; }
.plans-modal .plan-list .pcheck{ width:18px; height:18px; }
.plans-modal .plan-more{ margin-top:12px; }
.plans-modal .plan-more summary{ font-size:12.5px; }
.plans-modal .plan-foot{ padding-top:14px; margin-top:14px; }
.plans-modal .plan-unlock{ font-size:15px; }
.plans-modal .plan-price{ margin:2px 0 12px; }
.plans-modal .plan-price b{ font-size:30px; }
.plans-modal .btn{ margin-top:0; }
.plans-modal .plan-note{ margin-top:8px; font-size:10px; letter-spacing:.02em; }
.popup-card.wide .popup-later{ margin-top:8px; }
.popup-card.wide .popup-close{ top:12px; right:12px; }
@media (max-width:560px){ .popup-card.wide{ padding:18px 14px 12px; } .plans-modal .plan{ padding:20px 16px 14px; } }

/* ===== checkout options: global (Stripe) + India gateway =====
   Both always render, so a failed geo lookup still leaves a way in. When the Worker
   stamps <html data-country="IN">, the India option moves first and takes the primary style. */
.checkout-opts{ display:flex; flex-direction:column; gap:14px; }
.checkout-opt .plan-note{ margin-top:8px; }
.plan-india{ gap:10px; }
.plan-crypto{ gap:10px; }
.plan-crypto .plan-coin{ width:18px; height:18px; color:var(--gold); flex-shrink:0; }
.plan-india .plan-flag{ width:20px; height:14px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.2); object-fit:cover; }
/* visitors in India: the India gateway is the checkout; the standard one becomes a small "Not in India?" link */
.checkout-switch{ display:none; text-align:center; font-size:12.5px; color:var(--ink-3); margin:2px 0 0; }
.checkout-switch a{ color:var(--mint-deep); font-weight:600; }
html[data-country="IN"] .checkout-opt[data-checkout-opt="global"]{ display:none; }
html[data-country="IN"] .checkout-switch{ display:block; }
html[data-country="IN"] .checkout-opt[data-checkout-opt="india"] .btn{ background:var(--mint); color:var(--on-mint); border-color:transparent; box-shadow:0 12px 30px -10px rgba(26,200,116,.7); }

/* contact cards: 4 across on desktop (email, community, Telegram, office) */
.contact-grid{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .contact-grid{ grid-template-columns:1fr; } }
.foot-social svg{ flex-shrink:0; }

/* contact form (Web3Forms) */
.hp-field{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
.form-status{ font-size:14px; border-radius:var(--r-sm); padding:12px 14px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2); }
.form-status[data-state="ok"]{ border-color:var(--mint); background:var(--mint-tint); color:var(--ink); }
.form-status[data-state="error"]{ border-color:var(--rose); background:var(--rose-tint); color:var(--ink); }
.form-status a{ color:var(--mint-deep); font-weight:600; }
.form button[disabled]{ opacity:.6; cursor:progress; }

/* ==========================================================================
   GUILD mascots — shared layer (PIP, ALPHA, REX, TICK, LEDGER)
   Source of truth for the <style id="ga-mascot-css"> block that
   tools/inject_mascots.py inlines into every page.
   ========================================================================== */
:root{ --m-ease:cubic-bezier(.2,.7,.2,1); --m-spring:cubic-bezier(.34,1.56,.64,1); }

.m-img{ display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.m-img:not([src]){ visibility:hidden; }

/* ---------- 3D mascot: tilt + ground shadow + rim light ---------- */
.m3d{ position:relative; --rx:0deg; --ry:0deg; --lx:0; }
/* perspective lives in the transform, so .m3d itself isn't a layer and its bubble can sit above neighbours */
.m3d-body{ position:relative; transform-style:preserve-3d;
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transform-origin:50% 92%; }
.m3d-bob{ position:relative; transform-origin:50% 100%; }
@media (prefers-reduced-motion: no-preference){
  .m3d-bob{ animation:mBob var(--bob,5.2s) ease-in-out infinite; }
}
@keyframes mBob{
  0%,100%{ transform:translateY(0) scale(1,1); }
  50%{ transform:translateY(-10px) scale(.992,1.012); }
}
.m3d .m-img{ filter:drop-shadow(calc(var(--lx) * -14px) 22px 18px rgba(0,0,0,.34)); }
.m3d-rim{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:.75;
  background:linear-gradient(calc(100deg + var(--lx) * 70deg), transparent 52%, rgba(26,200,116,.0) 60%, rgba(140,255,206,.55) 100%);
  -webkit-mask:var(--m-mask) center / 100% 100% no-repeat; mask:var(--m-mask) center / 100% 100% no-repeat; }
:root[data-theme="light"] .m3d-rim{ opacity:.45; }
.m3d-floor{ position:absolute; left:50%; bottom:-2%; width:62%; height:7%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.42), rgba(0,0,0,.18) 55%, transparent);
  transform:translateX(calc(-50% + var(--lx) * 18px)) scaleX(calc(1 + var(--lx) * var(--lx) * .3)); filter:blur(3px); }
.m3d-floor::after{ content:""; position:absolute; inset:-60% -30%; border-radius:50%;
  border:1px solid rgba(26,200,116,.28); box-shadow:0 0 22px rgba(26,200,116,.25), inset 0 0 18px rgba(26,200,116,.18); }
@media (prefers-reduced-motion: no-preference){ .m3d-floor::after{ animation:mRing 3.6s ease-in-out infinite; } }
@keyframes mRing{ 0%,100%{ opacity:.55; transform:scale(.94);} 50%{ opacity:1; transform:scale(1.04);} }
.m3d[data-clickable]{ cursor:pointer; }
.m3d[data-clickable] .m-img{ pointer-events:auto; }

/* pose swap: quick squash & pop hides the frame change */
.m-swap{ animation:mSwap .34s var(--m-ease); }
@keyframes mSwap{ 0%{ transform:scale(1,1);} 35%{ transform:scale(1.05,.93) translateY(4px);} 70%{ transform:scale(.97,1.04) translateY(-4px);} 100%{ transform:scale(1,1);} }
.m-hop{ animation:mHop .6s var(--m-ease); }
@keyframes mHop{ 0%,100%{ transform:translateY(0);} 40%{ transform:translateY(-26px) rotate(-3deg);} 70%{ transform:translateY(0) scale(1.04,.95);} }

/* ---------- speech bubble ---------- */
.m-bubble{ position:absolute; z-index:6; max-width:230px; width:max-content; padding:11px 15px 12px;
  background:var(--panel); color:var(--ink); border:1px solid var(--line-strong); border-radius:16px;
  font-family:'Public Sans',sans-serif; font-size:13.5px; font-weight:600; line-height:1.4;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.55); pointer-events:none;
  opacity:0; transform:translateY(8px) scale(.94); transform-origin:var(--bo,0% 100%);
  transition:opacity .35s var(--m-ease), transform .45s var(--m-spring); }
.m-bubble.show{ opacity:1; transform:none; }
.m-bubble b.m-name{ display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; color:var(--mint-deep); margin-bottom:3px; font-weight:600; }
.m-bubble::after{ content:""; position:absolute; width:12px; height:12px; background:inherit; border:inherit; border-top:0; border-left:0;
  bottom:-7px; left:var(--tail,26px); transform:rotate(45deg); border-radius:0 0 3px 0; }
.m-bubble.tail-right::after{ left:auto; right:var(--tail,26px); }
.m-bubble .m-caret{ display:inline-block; width:1px; height:1em; background:currentColor; margin-left:1px; vertical-align:-2px; }
@media (prefers-reduced-motion: no-preference){ .m-bubble .m-caret{ animation:mCaret 1s steps(1) infinite; } }
@keyframes mCaret{ 50%{ opacity:0; } }
.panel-dark .m-bubble, .page-head .m-bubble{ background:#0f2c38; color:#eaf3f0; border-color:rgba(255,255,255,.14); }

/* ---------- entrances (IntersectionObserver adds .m-in) ---------- */
.m-enter{ transition:opacity .8s var(--m-ease), transform 1s var(--m-spring); transition-delay:var(--md,0s); }
.m-enter.from-right{ opacity:0; transform:translateX(70px) rotate(4deg); }
.m-enter.from-left{ opacity:0; transform:translateX(-70px) rotate(-4deg); }
.m-enter.from-below{ opacity:0; transform:translateY(90px) scale(.9); }
.m-enter.drop{ opacity:0; transform:translateY(-120px) rotate(-6deg); }
.m-enter.m-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .m-enter{ opacity:1 !important; transform:none !important; transition:none; } }

/* ---------- peek: head rises from behind an edge ---------- */
.m-peek{ position:absolute; bottom:100%; z-index:2; overflow:hidden; pointer-events:none; }
.m-peek .m-img{ transform:translateY(100%); transition:transform .9s var(--m-spring); transition-delay:var(--md,.1s); }
.m-peek.m-in .m-img{ transform:translateY(4%); }
.m-peek.m-in:hover .m-img, .m-peek-host:hover .m-peek.m-in .m-img{ transform:translateY(-2%); }
@media (prefers-reduced-motion: reduce){ .m-peek .m-img{ transform:none; transition:none; } }
.m-peek-host{ position:relative; }

/* ---------- floating stickers ---------- */
@media (max-width:760px){ .m-sticker{ display:none; } }   /* headings span the full width on phones */
.m-sticker{ position:absolute; pointer-events:none; z-index:0; filter:drop-shadow(0 12px 18px rgba(0,0,0,.28)); }
@media (prefers-reduced-motion: no-preference){ .m-sticker .m-img{ animation:mFloat var(--fd,7s) ease-in-out infinite; } }
@keyframes mFloat{ 0%,100%{ transform:translateY(0) rotate(var(--r0,-4deg)); } 50%{ transform:translateY(-12px) rotate(var(--r1,4deg)); } }

/* ==========================================================================
   HOME — HERO
   ========================================================================== */
.hero-visual .hero-m{ position:absolute; left:31%; bottom:1%; width:43%; z-index:3; }
.hero-visual .hero-m .m-bubble{ left:-58%; top:3%; --bo:100% 100%; }
.hero-visual .hero-m .m-bubble::after{ left:auto; right:-7px; bottom:22px; transform:rotate(-45deg); }
.hero-visual .orb-wrap{ transition:none; }
.hero-visual .orb-wrap.m-orbit{ transform:none !important; will-change:left, top; }
.hero-visual .orb-wrap.m-orbit .orb{ transition:transform .2s linear, filter .3s; }
.hero-visual .hero-tip{ z-index:5; }
.hero-visual .hero-tip-2{ left:auto; right:0; top:6%; }
.hero-visual .hero-tip-1{ top:62%; }
.hero-m-stage{ position:absolute; left:14%; right:6%; bottom:-1%; height:15%; pointer-events:none; z-index:1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(26,200,116,.20), transparent 70%); }
@media (max-width:980px){ .hero-visual .hero-m .m-bubble{ left:-40%; } }
@media (max-width:640px){
  .hero-visual .hero-m{ left:28%; width:48%; }
  .hero-visual{ margin-top:56px; }
  .hero-visual .hero-m .m-bubble{ left:-14%; right:auto; top:auto; bottom:97%; max-width:210px; font-size:12.5px; --bo:20% 100%; }
  .hero-visual .hero-m .m-bubble::after{ left:30px; right:auto; bottom:-7px; transform:rotate(45deg); }
}

/* ==========================================================================
   HOME — pillar cards: character rises from behind each card
   ========================================================================== */
.pcard-slot{ position:relative; display:flex; flex-direction:column; }
.pcard-slot > .pcard{ flex:1; z-index:1; }
.pcard-m{ position:absolute; right:14px; top:-24px; width:112px; z-index:0; pointer-events:none;
  transform:translateY(0) rotate(4deg); transition:transform .55s var(--m-spring); }
.pcard-slot:hover .pcard-m, .pcard-slot:focus-within .pcard-m{ transform:translateY(-62%) rotate(-2deg); }
.pcard-m .m-bubble{ right:88%; left:auto; top:-6px; font-size:12px; max-width:160px; padding:8px 11px; --bo:100% 100%; }
.pcard-m .m-bubble::after{ left:auto; right:-7px; bottom:14px; transform:rotate(-45deg); }
.pcard-slot:hover .pcard-m .m-bubble{ opacity:1; transform:none; transition-delay:.18s; }
@media (hover:none){ .pcard-m{ transform:translateY(-28%) rotate(-2deg); } }
@media (max-width:1200px){ .pcards:has(.pcard-slot){ row-gap:70px; margin-top:24px; } }

/* ==========================================================================
   Meet the Guild — 3D cast carousel
   ========================================================================== */
.cast-sec{ overflow:hidden; }
.cast-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center; position:relative; z-index:1; }
@media (max-width:940px){ .cast-grid{ grid-template-columns:1fr; gap:10px; } }
.cast-stage{ position:relative; height:520px; perspective:1300px; touch-action:pan-y; cursor:grab; user-select:none; outline:none; }
.cast-stage:active{ cursor:grabbing; }
.cast-stage:focus-visible{ outline:2px solid var(--mint); outline-offset:6px; border-radius:18px; }
.cast-floor{ position:absolute; left:6%; right:6%; bottom:4%; height:28%; transform:rotateX(74deg); transform-style:preserve-3d; pointer-events:none; }
.cast-floor i{ position:absolute; inset:0; border-radius:50%; border:1.5px dashed rgba(26,200,116,.35); }
.cast-floor i:nth-child(2){ inset:14%; border-style:solid; border-color:rgba(26,200,116,.18); background:radial-gradient(closest-side, rgba(26,200,116,.18), transparent); }
@media (prefers-reduced-motion: no-preference){ .cast-floor i:first-child{ animation:ringSpin 60s linear infinite; } }
.cast-item{ position:absolute; left:50%; bottom:9%; width:210px; margin-left:-105px; transform-origin:50% 100%;
  transition:filter .4s ease; will-change:transform; }
.cast-item .m-img{ filter:drop-shadow(0 22px 16px rgba(0,0,0,.35)); }
.cast-item::after{ content:""; position:absolute; left:18%; right:18%; bottom:-10px; height:18px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.45), transparent); z-index:-1; }
.cast-item.front .m-img{ filter:drop-shadow(0 22px 16px rgba(0,0,0,.35)) drop-shadow(0 0 26px rgba(26,200,116,.28)); }
.cast-item button{ all:unset; position:absolute; inset:0; cursor:pointer; }
.cast-item button:focus-visible{ outline:2px solid var(--mint); outline-offset:4px; border-radius:12px; }
.cast-nav{ display:flex; gap:10px; align-items:center; justify-content:center; margin-top:4px; position:relative; z-index:2; }
.cast-nav button{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .2s, transform .2s; }
.cast-nav button:hover{ border-color:var(--mint); transform:translateY(-2px); }
.cast-nav button svg{ width:18px; height:18px; }
.cast-dots{ display:flex; gap:7px; margin-inline:8px; }
.cast-dots i{ width:7px; height:7px; border-radius:50%; background:var(--line-strong); transition:width .3s var(--m-ease), background .3s; }
.cast-dots i.on{ width:22px; border-radius:999px; background:var(--mint); }
.cast-info{ position:relative; min-height:330px; }
.cast-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow); }
.cast-card .cast-role{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mint-deep); }
.cast-card h3{ font-size:clamp(34px,4vw,48px); line-height:1; margin-top:10px; letter-spacing:-.02em; }
.cast-card h3 span{ color:var(--mint-deep); }
.cast-card .cast-pers{ color:var(--ink-2); font-size:15px; margin-top:12px; }
.cast-card blockquote{ margin:18px 0 0; padding:14px 16px; border-left:3px solid var(--mint); background:var(--panel-2); border-radius:0 12px 12px 0;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:17px; line-height:1.35; }
.cast-card .cast-where{ display:flex; align-items:center; gap:10px; margin-top:18px; font-size:13.5px; color:var(--ink-2); flex-wrap:wrap; }
.cast-card .cast-where a{ font-weight:700; color:var(--mint-deep); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.cast-card .cast-where a svg{ width:14px; height:14px; transition:transform .15s; }
.cast-card .cast-where a:hover svg{ transform:translateX(3px); }
.cast-card .cast-trait{ display:flex; gap:6px; flex-wrap:wrap; margin-top:16px; }
.cast-card .cast-trait span{ font-family:'IBM Plex Mono',monospace; font-size:11px; padding:4px 10px; border-radius:999px; background:var(--mint-tint); color:var(--mint-deep); }
.cast-card > *{ transition:opacity .35s var(--m-ease), transform .45s var(--m-ease); }
.cast-card.swapping > *{ opacity:0; transform:translateY(10px); }
@media (max-width:940px){ .cast-stage{ height:430px; } .cast-item{ width:170px; margin-left:-85px; } .cast-info{ min-height:0; } }
@media (max-width:520px){ .cast-stage{ height:360px; } .cast-item{ width:138px; margin-left:-69px; } }

/* ==========================================================================
   HOME — section cameos
   ========================================================================== */
/* Education: LEDGER in the aside */
.edu-m{ position:relative; width:170px; margin:0 auto -8px; z-index:1; }
.edu-m .m-bubble{ right:38%; left:auto; bottom:100%; top:auto; margin-bottom:-6px; --bo:100% 100%; }
.edu-m .m-bubble::after{ left:auto; right:22px; }
@media (max-width:900px){
  .edu-m{ margin-inline-start:auto; margin-inline-end:30px; }
  /* stacked: say it beside LEDGER, in the empty space of the aside row, not over the tagline above */
  .edu-m .m-bubble{ inset-inline-end:100%; right:auto; bottom:auto; top:18%; margin-bottom:0; max-width:min(230px, calc(100vw - 240px)); }
  .edu-m .m-bubble::after{ right:-7px; left:auto; bottom:16px; transform:rotate(-45deg); }
  html[dir="rtl"] .edu-m .m-bubble::after{ right:auto; left:-7px; transform:rotate(135deg); }
}

/* Analysis: TICK peeks over the stat row — from its own gap, so it never sits on the text above */
.stats.m-peek-host{ margin-top:150px; }
.stats.m-peek-host .m-peek{ inset-inline-end:3%; width:200px; height:124px; }
.stats.m-peek-host .m-bubble{ inset-inline-end:calc(3% + 210px); bottom:calc(100% + 34px); max-width:min(260px, calc(100% - 3% - 220px)); --bo:100% 100%; }
.stats.m-peek-host .m-bubble::after{ left:auto; right:-7px; bottom:14px; transform:rotate(-45deg); }
html[dir="rtl"] .stats.m-peek-host .m-bubble::after{ right:auto; left:-7px; transform:rotate(135deg); }
@media (max-width:640px){ .stats.m-peek-host{ margin-top:190px; } .stats.m-peek-host .m-peek{ width:150px; height:93px; } .stats.m-peek-host .m-bubble{ inset-inline-end:calc(3% + 158px); font-size:12px; padding:9px 11px; } }

/* Signals: ALPHA leans out from behind the phone */
.phone-stage .sig-m{ position:absolute; left:-4%; bottom:-6%; width:190px; z-index:auto; }
.phone-stage .sig-m .m-bubble{ z-index:6; }
.phone-stage .phone{ position:relative; z-index:1; }
.phone-stage .sig-m .m-bubble{ left:0; bottom:100%; top:auto; margin-bottom:6px; }
@media (max-width:640px){ .phone-stage .sig-m{ width:130px; left:-2%; } }

/* Copy: REX points at the connect box */
.copy-m{ position:relative; width:150px; margin:0 0 -4px auto; z-index:1; }
.copy-m .m-bubble{ right:92%; left:auto; top:6%; --bo:100% 100%; }
.copy-m .m-bubble::after{ left:auto; right:-7px; bottom:18px; transform:rotate(-45deg); }

/* Programmes: REX hops dot to dot along the rail as you scroll */
.rail-line{ overflow:visible; }
/* runway above the rail = REX's full jump (≈158px sprite + 46px hop) + air, so he never reaches the text above */
@media (min-width:901px){ [data-rail] .rail-line{ margin-top:224px; } }
.rail-line i{ transition:background .3s, box-shadow .3s, transform .3s var(--m-spring); }
.rail-line i.lit{ background:var(--mint); box-shadow:0 0 0 5px rgba(26,200,116,.18), 0 0 18px rgba(26,200,116,.8); transform:scale(1.25); }
.rail-rex{ position:absolute; bottom:6px; left:0; width:104px; margin-left:-52px; z-index:3; pointer-events:none; will-change:transform; }
.rail-rex .m-img{ transform-origin:50% 100%; filter:drop-shadow(0 10px 8px rgba(0,0,0,.4)); }
.rail-rex::after{ content:""; position:absolute; left:20%; right:20%; bottom:-10px; height:8px; border-radius:50%; background:rgba(0,0,0,.45); filter:blur(2px);
  transform:scale(var(--sh,1)); opacity:var(--sho,1); }
.prog.m-hot .shot{ box-shadow:0 0 0 2px var(--mint), 0 18px 40px -16px rgba(26,200,116,.6); }
.prog .shot{ transition:box-shadow .3s ease; }
@media (max-width:900px){ .rail-rex{ display:none; } }

/* Pricing: ALPHA stands beside the plan */
.plans-wrap{ position:relative; }
.price-m{ position:absolute; left:max(0px, calc(50% - 320px - 250px)); bottom:0; width:210px; z-index:1; }
.price-m .m-bubble{ left:auto; right:40%; bottom:100%; top:auto; margin-bottom:4px; --bo:100% 100%; }
.price-m .m-bubble::after{ left:auto; right:26px; }
@media (max-width:1180px){ .price-m{ display:none; } }

/* FAQ: PIP sits with the questions */
.faq-m{ position:absolute; right:-210px; top:40px; width:200px; }
.faq-m .m-bubble{ right:40%; bottom:96%; top:auto; }
.faq-m .m-bubble::after{ left:auto; right:30px; }
@media (max-width:1320px){ .faq-m{ position:relative; right:auto; top:auto; width:150px; margin:-40px 0 10px auto; } .faq-m .m-bubble{ right:90%; bottom:auto; top:0; } .faq-m .m-bubble::after{ right:-7px; bottom:16px; transform:rotate(-45deg); } }

/* Risk: ALPHA peeks over the disclosure */
.risk-box.m-peek-host .m-peek{ right:22px; width:150px; height:118px; }
.risk-box.m-peek-host .m-bubble{ right:180px; bottom:calc(100% + 30px); }
.risk-box.m-peek-host .m-bubble::after{ left:auto; right:-7px; bottom:12px; transform:rotate(-45deg); }
@media (max-width:640px){ .risk-box.m-peek-host .m-bubble{ display:none; } }

/* CTA band: REX pops over the edge — leave room so he never covers the risk box above */
section:has(+ .cta-band.m-peek-host){ padding-bottom:170px !important; }
@media (max-width:640px){ section:has(+ .cta-band.m-peek-host){ padding-bottom:130px !important; } }
.cta-band.m-peek-host{ overflow:visible; }
.cta-band.m-peek-host .m-peek{ right:8%; width:180px; height:136px; }
@media (max-width:640px){ .cta-band.m-peek-host .m-peek{ width:130px; height:98px; right:4%; } }

/* Join FAB: PIP peeks over the button */
.join-fab .fab-m{ position:absolute; left:18px; bottom:calc(100% - 6px); width:66px; height:44px; overflow:hidden; pointer-events:none; }
.join-fab .fab-m .m-img{ transform:translateY(100%); transition:transform .6s var(--m-spring) .25s; }
.join-fab.show .fab-m .m-img{ transform:translateY(6%); }
.join-fab:hover .fab-m .m-img{ transform:translateY(-4%); }

/* ==========================================================================
   Inner pages — mascot in the page header
   ========================================================================== */
.page-head .ph-m{ position:absolute; right:max(24px, calc(50% - 600px)); top:34px; bottom:0; z-index:1; }
.page-head .ph-m .m3d-body, .page-head .ph-m .m3d-bob{ height:100%; }
.page-head .ph-m .m-img{ height:100%; width:auto; max-width:none; }
.page-head .ph-m.ph-sm{ top:auto; height:min(230px, calc(100% - 34px)); }
.page-head .ph-m .m-bubble{ right:82%; left:auto; top:6%; --bo:100% 100%; }
.page-head .ph-m .m-bubble::after{ left:auto; right:-7px; bottom:20px; transform:rotate(-45deg); }
.page-head .m3d-floor{ bottom:-1%; }
.page-head h1, .page-head p{ position:relative; z-index:2; }
@media (min-width:861px){ .page-head .wrap{ padding-right:min(300px, 26vw); } }
@media (max-width:860px){
  .page-head{ padding-bottom:0; }
  .page-head .ph-m, .page-head .ph-m.ph-sm{ position:relative; right:auto; top:auto; height:auto; margin:26px 0 0 auto; width:150px; }
  .page-head .ph-m .m3d-body, .page-head .ph-m .m3d-bob{ height:auto; }
  .page-head .ph-m .m-img{ width:100%; height:auto; }
  .page-head .ph-m .m-bubble{ right:96%; }
}

/* confetti (welcome page) */
.m-confetti{ position:fixed; inset:0; pointer-events:none; z-index:300; overflow:hidden; }
.m-confetti i{ position:absolute; top:-12px; width:8px; height:13px; border-radius:2px; opacity:.95; animation:mConf var(--d,2.6s) cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes mConf{ to{ transform:translate(var(--x,0), 105vh) rotate(var(--r,540deg)); opacity:.9; } }

/* premium plan: REX pops over the plan card */
.plan.m-peek-host .m-peek{ right:26px; width:170px; height:128px; }
@media (max-width:640px){ .plan.m-peek-host .m-peek{ width:120px; height:90px; right:14px; } }

/* ==========================================================================
   GUILD reviews — Trustpilot section + star picker. Inlined by --tools/inject_reviews.py
   ========================================================================== */
.reviews-sec{ overflow:hidden; }
.rv-grid{ display:grid; grid-template-columns:1fr 440px; gap:64px; align-items:center; position:relative; z-index:1; }
@media (max-width:940px){ .rv-grid{ grid-template-columns:1fr; gap:90px; } html[lang="ur"] .rv-grid{ gap:130px; } }   /* Nastaliq bubbles run taller */
.rv-copy h2{ font-size:clamp(28px,4vw,44px); line-height:1.05; margin-top:14px; }
.rv-copy > p{ color:var(--ink-2); font-size:17px; margin-top:16px; max-width:52ch; }
.rv-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.rv-cta .btn-primary .tp-star{ width:18px; height:18px; }
.rv-points{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:10px; }
.rv-points li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); }
.rv-points svg{ width:18px; height:18px; color:#00b67a; flex-shrink:0; margin-top:2px; }

/* the card */
.rv-card{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:34px 30px 26px;
  box-shadow:var(--shadow-lg); text-align:center; }
.rv-card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(160deg, rgba(0,182,122,.55), transparent 45%, rgba(26,200,116,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.rv-tp{ display:inline-flex; align-items:center; gap:8px; font-family:'Public Sans',sans-serif; font-weight:700; font-size:19px; letter-spacing:-.01em; color:var(--ink); text-decoration:none; }
.rv-tp .tp-star{ width:26px; height:26px; }
.tp-star{ color:#00b67a; display:block; }
.rv-q{ font-family:'Archivo',sans-serif; font-weight:800; font-size:22px; margin-top:18px; }

/* Trustpilot-style square stars */
.rv-stars{ display:flex; justify-content:center; gap:6px; margin-top:18px; direction:ltr; }
.rv-star{ --c:#00b67a; width:52px; height:52px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  background:var(--panel-2); border:1px solid var(--line-strong); color:var(--ink-3); text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.rv-star svg{ width:30px; height:30px; }
.rv-star.on{ background:var(--c); border-color:var(--c); color:#fff; }
.rv-star.pop{ transform:translateY(-6px) scale(1.08); }
.rv-star:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }
.rv-stars[data-n="1"] .rv-star{ --c:#ff3722; } .rv-stars[data-n="2"] .rv-star{ --c:#ff8622; }
.rv-stars[data-n="3"] .rv-star{ --c:#ffce00; } .rv-stars[data-n="4"] .rv-star{ --c:#73cf11; }
.rv-stars[data-n="5"] .rv-star{ --c:#00b67a; }
.rv-hint{ font-size:13px; color:var(--ink-3); margin-top:12px; min-height:1.4em; }
@media (max-width:420px){ .rv-star{ width:46px; height:46px; } .rv-star svg{ width:26px; height:26px; } }
@media (prefers-reduced-motion: no-preference){
  .rv-card.m-in .rv-star{ animation:rvIn .5s cubic-bezier(.34,1.56,.64,1) both; }
  .rv-card.m-in .rv-star:nth-child(2){ animation-delay:.06s; } .rv-card.m-in .rv-star:nth-child(3){ animation-delay:.12s; }
  .rv-card.m-in .rv-star:nth-child(4){ animation-delay:.18s; } .rv-card.m-in .rv-star:nth-child(5){ animation-delay:.24s; }
}
@keyframes rvIn{ from{ opacity:0; transform:translateY(12px) scale(.8); } to{ opacity:1; transform:none; } }

.rv-live{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); min-height:44px; }
.rv-live > [data-no-t]{ display:inline-block; min-width:230px; padding:7px 18px; border-radius:999px; background:#fff; box-shadow:0 6px 18px -8px rgba(0,0,0,.45); }
.rv-live .trustpilot-widget{ min-height:24px; }
.rv-live{ position:relative; }
.rv-live:not(.tp-ready) > [data-no-t]{ position:absolute; left:50%; transform:translateX(-50%); visibility:hidden; }   /* laid out (so the TrustBox draws) but unseen until ready */
/* match the widget iframe's own (light) scheme so Chrome keeps it transparent on the dark card */
.rv-live iframe{ color-scheme:light; }
.rv-live .rv-fallback{ font-size:12.5px; color:var(--ink-3); }
.rv-live .rv-fallback a{ color:var(--mint-deep); font-weight:600; }
.rv-live.tp-ready .rv-fallback{ display:none; }
.rv-note{ font-size:12px; color:var(--ink-3); margin-top:14px; line-height:1.6; }

/* REX rises from behind the card */
.rv-m{ position:absolute; top:-26px; right:26px; width:118px; z-index:-1; pointer-events:none;
  transform:translateY(0) rotate(4deg); transition:transform .55s cubic-bezier(.34,1.56,.64,1); }
.rv-card.m-in .rv-m, .rv-card:hover .rv-m{ transform:translateY(-58%) rotate(-3deg); }
/* bubble sits on the card (not inside REX's z-index:-1 layer), to REX's inline-start side */
.m-bubble.rv-bubble{ inset-inline-end:152px; bottom:calc(100% + 14px); font-size:12.5px; max-width:min(210px, calc(100% - 170px)); text-align:start; --bo:100% 100%; }
.m-bubble.rv-bubble::after{ left:auto; right:-7px; bottom:14px; transform:rotate(-45deg); }
html[dir="rtl"] .rv-m{ right:auto; left:26px; }
html[dir="rtl"] .m-bubble.rv-bubble::after{ right:auto; left:-7px; transform:rotate(135deg); }

/* footer pill */
.foot-tp .tp-star{ width:14px; height:14px; }
/* spacing on the end side: side by side they get a gap, wrapped they stay flush with the column */

/* ==========================================================================
   GUILD i18n — language switcher, curtain transition, per-script typography
   and right-to-left fixes. Inlined into every page by --tools/build_i18n.py.
   ========================================================================== */
html.i18n-wait body{ visibility:hidden; }

/* ---------- switcher ---------- */
.lang{ position:relative; }
.lang-btn{ height:38px; display:inline-flex; align-items:center; gap:7px; padding:0 10px 0 8px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; transition:border-color .2s, transform .2s; }
.lang-btn:hover{ border-color:var(--mint); }
.lang-btn[aria-expanded="true"]{ border-color:var(--mint); box-shadow:0 0 0 3px rgba(26,200,116,.15); }
.lang-flag{ width:22px; height:15px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.18); flex-shrink:0; display:block; }
.lang-btn .chev{ width:13px; height:13px; transition:transform .25s ease; opacity:.7; }
.lang-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.lang-menu{ position:absolute; top:calc(100% + 10px); right:0; min-width:216px; margin:0; padding:6px; list-style:none; z-index:120;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:16px; box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(-6px) scale(.97); transform-origin:top right; pointer-events:none;
  transition:opacity .2s ease, transform .28s cubic-bezier(.34,1.56,.64,1); }
.lang-menu.show{ opacity:1; transform:none; pointer-events:auto; }
.lang-menu li{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px; cursor:pointer; outline:none; transition:background .15s; }
.lang-menu li:hover, .lang-menu li:focus-visible{ background:var(--panel-2); }
.lang-menu li[aria-selected="true"]{ background:var(--mint-tint); }
.lang-menu .lang-flag{ width:28px; height:19px; }
.lang-menu span{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; flex:1; }
.lang-menu b{ font-size:15px; font-weight:700; letter-spacing:0; }
.lang-menu small{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-3); letter-spacing:.06em; }
.lang-menu .tick{ width:16px; height:16px; color:var(--mint-deep); opacity:0; }
.lang-menu li[aria-selected="true"] .tick{ opacity:1; }
.lang-menu b[lang="ar"]{ font-family:'IBM Plex Sans Arabic','Public Sans',sans-serif; }
.lang-menu b[lang="ur"]{ font-family:'Noto Nastaliq Urdu','Public Sans',sans-serif; font-size:14px; }
.lang-menu b[lang="hi"]{ font-family:'Noto Sans Devanagari','Public Sans',sans-serif; }
.lang-menu b[lang="bn"]{ font-family:'Noto Sans Bengali','Public Sans',sans-serif; }
@media (max-width:560px){ .lang-btn .lang-code{ display:none; } .lang-btn{ padding:0 8px; gap:5px; } }
.theme-mirror{ display:none; }
@media (max-width:430px){
  .nav-actions #themeToggle{ display:none; }
  .mobile-menu-top .theme-mirror{ display:inline-flex; margin-inline-start:auto; margin-inline-end:10px; }
  .nav-actions{ gap:8px; }
}

.lang-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; margin-top:26px; }
.lang-grid button{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); font:600 15px 'Public Sans',sans-serif; }
.lang-grid button[aria-pressed="true"]{ border-color:var(--mint); background:var(--mint-tint); }

/* ---------- curtain transition ---------- */
.i18n-curtain{ position:fixed; inset:0; z-index:400; pointer-events:none; visibility:hidden;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  background:radial-gradient(60% 60% at 50% 45%, #0f3a33 0%, #061a23 70%); color:#eaf3f0; }
.i18n-curtain::before{ content:""; position:absolute; top:0; bottom:0; width:3px; background:var(--mint);
  box-shadow:0 0 30px 6px rgba(26,200,116,.6); }
.i18n-curtain .c-flag{ width:112px; height:75px; border-radius:12px; object-fit:cover; box-shadow:0 20px 50px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12);
  transform:translateY(12px) scale(.9); opacity:0; }
.i18n-curtain .c-name{ font:800 clamp(34px,6vw,58px)/1.3 'Archivo','IBM Plex Sans Arabic','Noto Nastaliq Urdu','Noto Sans Devanagari','Noto Sans Bengali',sans-serif; letter-spacing:-.01em;
  transform:translateY(12px); opacity:0; }
.i18n-curtain .c-sub{ font:600 11.5px 'IBM Plex Mono',monospace; letter-spacing:.2em; color:#7fb8a4; opacity:0; }
.i18n-curtain.in, .i18n-curtain.out{ visibility:visible; pointer-events:auto; }
.i18n-curtain.in{ animation:cIn .5s cubic-bezier(.7,0,.3,1) both; }
.i18n-curtain.out{ animation:cOut .55s cubic-bezier(.7,0,.3,1) both; }
.i18n-curtain.in::before{ animation:cEdgeIn .5s cubic-bezier(.7,0,.3,1) both; }
.i18n-curtain.out::before{ animation:cEdgeOut .55s cubic-bezier(.7,0,.3,1) both; }
.i18n-curtain.in .c-flag, .i18n-curtain.in .c-name, .i18n-curtain.in .c-sub{ animation:cPop .45s cubic-bezier(.34,1.56,.64,1) .18s both; }
.i18n-curtain.out .c-flag, .i18n-curtain.out .c-name, .i18n-curtain.out .c-sub{ opacity:1; transform:none; }
@keyframes cIn{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes cOut{ from{ clip-path:inset(0 0 0 0); } to{ clip-path:inset(0 0 0 100%); } }
@keyframes cEdgeIn{ from{ left:0; } to{ left:100%; } }
@keyframes cEdgeOut{ from{ left:0; } to{ left:100%; } }
.i18n-curtain.rtl.in{ animation-name:cInR; } .i18n-curtain.rtl.out{ animation-name:cOutR; }
.i18n-curtain.rtl.in::before, .i18n-curtain.rtl.out::before{ animation-name:cEdgeR; }
@keyframes cInR{ from{ clip-path:inset(0 0 0 100%); } to{ clip-path:inset(0 0 0 0); } }
@keyframes cOutR{ from{ clip-path:inset(0 0 0 0); } to{ clip-path:inset(0 100% 0 0); } }
@keyframes cEdgeR{ from{ left:100%; } to{ left:0; } }
@keyframes cPop{ from{ opacity:0; transform:translateY(12px) scale(.9); } to{ opacity:1; transform:none; } }

/* page content settles in after the swap */
.i18n-reveal main > *, .i18n-reveal .nav-row, .i18n-reveal footer .wrap{ animation:i18nIn .7s cubic-bezier(.2,.7,.2,1) both; }
.i18n-reveal main > *:nth-child(2){ animation-delay:.06s; } .i18n-reveal main > *:nth-child(3){ animation-delay:.12s; }
@keyframes i18nIn{ from{ opacity:.0; transform:translateY(14px); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }
@media (prefers-reduced-motion: reduce){ .i18n-reveal main > *, .i18n-reveal .nav-row, .i18n-reveal footer .wrap{ animation:none; } }

/* ---------- typography per script ---------- */
html:not([lang="en"]) *{ letter-spacing:0 !important; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3{ line-height:1.35 !important; }
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3,
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3{ line-height:1.3 !important; }
/* Urdu: Naskh for headings and UI (robust in tight lines), Nastaliq for reading text */
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3, html[lang="ur"] h4,
html[lang="ur"] .tagline, html[lang="ur"] .kicker, html[lang="ur"] .plan-name{ line-height:1.45 !important; }
html[lang="ur"] p, html[lang="ur"] .prose li, html[lang="ur"] .faq-a-in, html[lang="ur"] .m-bubble .m-txt,
html[lang="ur"] .cast-pers, html[lang="ur"] .cast-card blockquote{ font-family:'Noto Nastaliq Urdu','Noto Naskh Arabic','Public Sans',sans-serif; line-height:2.1; }
html[lang="ur"] .plan-list b, html[lang="ur"] .plan-list li div span{ line-height:1.6; }

/* ---------- right-to-left ---------- */
html[dir="rtl"] .marquee-rail, html[dir="rtl"] .hero-visual, html[dir="rtl"] .cast-stage,
html[dir="rtl"] .phone, html[dir="rtl"] .rail-line, html[dir="rtl"] .progs, html[dir="rtl"] .plan-price{ direction:ltr; }
html[dir="rtl"] .prog .cap, html[dir="rtl"] .phone-screen{ direction:rtl; }
html[dir="rtl"] .m-bubble{ direction:rtl; text-align:right; }
html[dir="rtl"] .btn svg, html[dir="rtl"] .pillar-link svg, html[dir="rtl"] .fab-arrow svg,
html[dir="rtl"] .cast-where a svg, html[dir="rtl"] .cast-nav svg, html[dir="rtl"] .faq-q svg{ transform:scaleX(-1); }
html[dir="rtl"] .faq-item[data-open="true"] .faq-q svg{ transform:scaleX(-1) rotate(45deg); }
html[dir="rtl"] .lang-menu{ right:auto; left:0; transform-origin:top left; }
html[dir="rtl"] .prose ul{ padding-left:0; padding-right:22px; }
html[dir="rtl"] .risk-box{ border-left:1px solid var(--line); border-right:3px solid var(--gold); }
html[dir="rtl"] .callout{ border-left:1px solid var(--line); border-right:3px solid var(--mint); }
html[dir="rtl"] .cast-card blockquote{ border-left:0; border-right:3px solid var(--mint); border-radius:12px 0 0 12px; }
html[dir="rtl"] .page-head .ph-m{ right:auto; left:max(24px, calc(50% - 600px)); }
html[dir="rtl"] .page-head .ph-m .m-bubble{ right:auto; left:82%; }
html[dir="rtl"] .page-head .ph-m .m-bubble::after{ right:auto; left:-7px; transform:rotate(135deg); }
@media (min-width:861px){ html[dir="rtl"] .page-head .wrap{ padding-right:24px; padding-left:min(300px, 26vw); } }
@media (max-width:860px){ html[dir="rtl"] .page-head .ph-m{ left:auto; margin:26px auto 0 0; } }
@media (min-width:1321px){ html[dir="rtl"] .faq-m{ right:auto; left:-210px; } }

/* translated menu labels are longer: keep each on one line and switch to the burger menu sooner */
.nav-links a, .login-link, .nav-actions .btn{ white-space:nowrap; }
@media (max-width:1000px){
  html:not([lang="en"]) .nav-links{ display:none; }
  html:not([lang="en"]) .nav-actions .login-link{ display:none; }
  html:not([lang="en"]) .nav-burger{ display:inline-flex; }
  html:not([lang="en"]) .mobile-menu{ display:block; }
}
@media (max-width:1080px){
  html[lang="fil"] .nav-links, html[lang="fil"] .nav-actions .login-link{ display:none; }
  html[lang="fil"] .nav-burger{ display:inline-flex; }
  html[lang="fil"] .mobile-menu{ display:block; }
}