/* MTRX Pay v2 — "Aurora"
   Layout concept: a bright, high-contrast page cut by a living aurora gradient (blue → violet → gold) that
   runs through the hero, the doors and every accent. Oversized display type, floating product UI, and a
   payment-route animation that shows the product rather than describes it. Partner side: the same aurora
   on near-black.
*/
:root{
  --white:#FFFFFF;
  --paper:#F5F6FA;
  --ink:#021B3A;            /* Deep Midnight (brand) */
  --ink-70:#3B4661;
  --ink-45:#6F7A93;
  --line:#E3E6EE;
  --blue:#00ADEF;
  --violet:#0A4FA3;         /* brand-derived deep blue (replaces violet) */
  --magenta:#5CC8F5;        /* light electric blue (replaces magenta) */
  --gold:#D4AF37;           /* Metallic Gold (brand) */
  --gold-deep:#A8871F;
  --mint:#2EE6A8;
  --night:#02101F;
  --night-2:#061B36;
  --night-line:rgba(255,255,255,.1);
  --night-fg:#F2F4FA;
  --night-fg-60:rgba(242,244,250,.64);
  --night-fg-40:rgba(242,244,250,.42);
  --aurora:linear-gradient(100deg,#021B3A 0%,#0A4FA3 35%,#00ADEF 75%,#5CC8F5 100%);
  --aurora-light:linear-gradient(100deg,#9FE0FF 0%,#00ADEF 55%,#5CC8F5 100%); /* for text on dark surfaces */
  --f-display:"Geist","Inter","Helvetica Neue",Arial,sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --s-1:.8125rem;--s0:1rem;--s1:1.125rem;--s2:1.375rem;--s3:1.75rem;--s4:2.25rem;
  --gutter-l:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --max:1200px;--r:20px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f-body);font-size:var(--s0);line-height:1.6;overflow-x:hidden}
body.night{background:var(--night);color:var(--night-fg)}
img,svg,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.02;letter-spacing:-.03em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.7rem,6.6vw,5.4rem);font-weight:600;letter-spacing:-.04em}
h2{font-size:clamp(2.1rem,4.6vw,3.6rem)}
h3{font-size:var(--s2);letter-spacing:-.02em;line-height:1.15}
p{margin:0}
.lede{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.55;color:var(--ink-70);max-width:38rem}
.night .lede{color:var(--night-fg-60)}
.grad{background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:200% 0}}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);display:inline-flex;align-items:center;gap:.6rem;font-weight:500}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(0,173,239,.14)}
.night .eyebrow{color:var(--blue)}
.wrap{max-width:var(--max);margin-inline:auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.band{padding-block:clamp(4.5rem,10vw,8.5rem)}
.stack{display:grid;gap:1.25rem}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}

/* Nav */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--white)}
.night::before{background:var(--night)}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;transition:background .3s,border-color .3s}
.nav.scrolled{background:rgba(255,255,255,.78);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--line)}
.night .nav.scrolled{background:rgba(5,7,15,.72);border-bottom-color:var(--night-line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px}
.logo{display:flex;align-items:center;gap:.7rem}
.logo .mark{width:46px;height:36px;object-fit:contain}
.logo .word{font-family:var(--f-display);font-weight:700;font-size:1.2rem;letter-spacing:.06em;color:var(--ink)}
.logo .word em{font-style:normal;color:#12335E;margin:0 .06em;background:linear-gradient(180deg,#2E6BB0,#12335E);-webkit-background-clip:text;background-clip:text;color:transparent}
.night .logo .word{color:#E8D9A8}
.night .logo .word em{background:linear-gradient(180deg,#7FC4FF,#3B8DE0);-webkit-background-clip:text;background-clip:text}
.foot-logo{width:150px;height:auto;margin-bottom:1rem}
.night .foot-logo{filter:drop-shadow(0 0 1px rgba(255,255,255,.5))}
.nav-links{display:flex;gap:.25rem;align-items:center;font-size:.95rem;font-weight:500}
.nav-links a{color:var(--ink-70);padding:.5rem .85rem;border-radius:999px;transition:background .2s,color .2s}
.nav-links a:hover{background:var(--paper);color:var(--ink)}
.nav-links a[aria-current]{color:var(--ink);background:var(--paper)}
.night .nav-links a{color:var(--night-fg-60)}
.night .nav-links a:hover,.night .nav-links a[aria-current]{background:rgba(255,255,255,.08);color:var(--night-fg)}
.nav-links a.pill{background:var(--ink);color:#fff;margin-left:.5rem}
.nav-links a.pill:hover{background:var(--violet);color:#fff}
.night .nav-links a.pill{background:var(--night-fg);color:var(--night)}
.night .nav-links a.pill:hover{background:var(--blue)}
.nav-cta{display:flex;gap:.6rem;align-items:center}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:999px;padding:.5rem .9rem;color:inherit;font:inherit;font-weight:600;cursor:pointer}
.night .menu-btn{border-color:var(--night-line)}
@media (max-width:900px){
  .nav-links{display:none}
  .nav.open .nav-links{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:.25rem;background:var(--white);border-bottom:1px solid var(--line);padding:.6rem var(--gutter-r) 1rem var(--gutter-l);box-shadow:0 30px 40px -30px rgba(6,18,43,.3)}
  .night .nav.open .nav-links{background:var(--night-2);border-bottom-color:var(--night-line)}
  .nav.open .nav-links a{padding:.9rem 1rem}
  .nav.open .nav-links a.pill{margin:.4rem 0 0;text-align:center}
  .menu-btn{display:inline-flex}
}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-body);font-weight:600;font-size:.98rem;padding:.95rem 1.45rem;border-radius:999px;border:1px solid transparent;cursor:pointer;line-height:1;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,border-color .25s;will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 10px 30px -12px rgba(6,18,43,.5)}
.btn-primary:hover{box-shadow:0 18px 40px -14px rgba(0,173,239,.5);background:var(--violet)}
.btn-aurora{color:#fff;background:var(--aurora);background-size:200% 100%;animation:shimmer 5s linear infinite;box-shadow:0 12px 34px -12px rgba(0,173,239,.45)}
.btn-aurora:hover{box-shadow:0 20px 44px -14px rgba(212,175,55,.5)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.6)}
.btn-ghost:hover{border-color:var(--ink)}
.night .btn-ghost{border-color:var(--night-line);color:var(--night-fg);background:rgba(255,255,255,.04)}
.night .btn-ghost:hover{border-color:var(--night-fg)}
.night .btn-primary{background:var(--night-fg);color:var(--night)}
.night .btn-primary:hover{background:var(--blue);color:var(--night)}
.arrow{display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn:hover .arrow,.door:hover .arrow,.cta-card:hover .arrow{transform:translateX(4px)}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(3rem,7vw,6rem) clamp(3rem,6vw,5rem)}
.aurora-wrap{position:absolute;inset:-25% -15% auto 18%;height:125%;z-index:-1;pointer-events:none;transform:skewY(-9deg);transform-origin:right top;overflow:hidden}
.aurora-wrap canvas{width:100%;height:100%;filter:blur(38px) saturate(1.3);opacity:.9}
.aurora-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.75) 12%,rgba(255,255,255,0) 38%),linear-gradient(180deg,rgba(255,255,255,0) 50%,#fff 100%)}
.night .aurora-wrap::after{background:linear-gradient(90deg,var(--night) 0%,rgba(5,7,15,.7) 12%,rgba(5,7,15,0) 38%),linear-gradient(180deg,rgba(5,7,15,0) 50%,var(--night) 100%)}
.night .aurora-wrap canvas{opacity:.75;filter:blur(44px) saturate(1.3)}
.hero-grid{display:grid;grid-template-columns:minmax(0,6.5fr) minmax(0,5.5fr);gap:clamp(2rem,4vw,4rem);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1 .swap{display:inline-grid;vertical-align:baseline;text-align:left}
.hero h1 .swap span{grid-area:1/1;white-space:nowrap;opacity:0;transform:translateY(.5em) rotate(2deg);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.hero h1 .swap span.on{opacity:1;transform:none}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.hero-note{font-size:var(--s-1);color:var(--ink-45);max-width:42ch}

/* Floating UI stack */
.float-stage{position:relative;min-height:520px;perspective:1200px}
.card{position:absolute;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 40px 80px -30px rgba(6,18,43,.35),0 2px 8px rgba(6,18,43,.06);padding:1.2rem 1.3rem;font-size:.9rem;will-change:transform;transition:transform .15s linear}
.night .card{background:rgba(11,15,30,.78);border-color:var(--night-line);color:var(--night-fg)}
.card .k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);display:flex;justify-content:space-between;gap:1rem}
.night .card .k{color:var(--night-fg-40)}
.card .amt{font-family:var(--f-display);font-weight:600;font-size:2.1rem;letter-spacing:-.04em;margin-top:.4rem}
.card .sub{color:var(--ink-70);font-size:.85rem}
.night .card .sub{color:var(--night-fg-60)}
.card-main{left:0;top:10px;width:min(340px,100%);animation:bob 7s ease-in-out infinite}
.card-pay{right:0;top:0;width:250px;animation:bob 8s ease-in-out infinite reverse}
.card-fee{right:0;bottom:120px;width:270px;animation:bob 9s ease-in-out 1s infinite}
.card-human{left:0;bottom:-10px;width:260px;animation:bob 7.5s ease-in-out .5s infinite reverse}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.status{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.85rem;border-radius:999px;padding:.35rem .8rem;background:var(--paper);margin-top:.9rem}
.status i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(255,197,61,.6);animation:pulse 1.6s infinite}
.status.paid i{background:var(--mint);box-shadow:0 0 0 0 rgba(46,230,168,.6)}
.night .status{background:rgba(255,255,255,.08)}
@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 9px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
.bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:.7rem}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0A4FA3,#00ADEF 70%,#D4AF37);border-radius:999px;animation:fill 4.5s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes fill{0%{width:0}60%{width:100%}100%{width:100%}}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--aurora);display:inline-grid;place-items:center;color:#fff;font-weight:700;font-size:.8rem;font-family:var(--f-display)}
.chat{display:flex;gap:.7rem;align-items:flex-start;margin-top:.7rem}
.chat p{background:var(--paper);border-radius:14px 14px 14px 4px;padding:.6rem .8rem;font-size:.85rem;color:var(--ink)}
.night .chat p{background:rgba(255,255,255,.08);color:var(--night-fg)}
.typing{display:inline-flex;gap:3px;margin-left:.3rem;vertical-align:middle}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-45);animation:typing 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (max-width:900px){.float-stage{min-height:0;display:grid;gap:1rem;perspective:none}.card{position:static;width:100% !important;animation:none}}

/* Marquee of truths */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1rem;background:var(--paper);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:marquee 40s linear infinite;font-family:var(--f-display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap}
.marquee-track span{display:inline-flex;align-items:center;gap:1.2rem;color:var(--ink-70)}
.marquee-track span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.night .marquee{background:var(--night-2);border-color:var(--night-line)}
.night .marquee-track span{color:var(--night-fg-60)}

/* Two doors */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;transition:grid-template-columns .6s cubic-bezier(.2,.8,.2,1)}
.doors:has(.door-biz:hover){grid-template-columns:1.35fr 1fr}
.doors:has(.door-dev:hover){grid-template-columns:1fr 1.35fr}
.door{position:relative;border-radius:28px;padding:clamp(1.6rem,3.5vw,3rem);min-height:460px;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;overflow:hidden;isolation:isolate;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.door:hover{transform:translateY(-4px);box-shadow:0 50px 90px -40px rgba(6,18,43,.5)}
.door::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(100deg,#0A4FA3,#00ADEF 60%,#D4AF37);background-size:200% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.35;transition:opacity .4s;animation:shimmer 6s linear infinite;z-index:1;pointer-events:none}
.door:hover::before{opacity:1}
.door-biz{background:linear-gradient(160deg,#fff 0%,#EAF6FD 60%,#FBF4DF 100%);color:var(--ink)}
.door-dev{background:radial-gradient(120% 90% at 100% 0%,#0A3566 0%,var(--night) 60%);color:var(--night-fg)}
.door h2{font-size:clamp(1.9rem,3.4vw,3rem);letter-spacing:-.04em}
.door p{max-width:36ch;margin-top:1rem;color:var(--ink-70);font-size:1.05rem}
.door-dev p{color:var(--night-fg-60)}
.door-dev .eyebrow{color:var(--blue)}
.door-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.door-foot small{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}
.door-dev .door-foot small{color:var(--night-fg-40)}
.glow{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;filter:blur(60px);opacity:.55;z-index:-1;right:-15%;bottom:-25%;background:radial-gradient(circle,var(--blue),transparent 70%);transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s}
.door-biz .glow{background:radial-gradient(circle,#D4AF37,transparent 70%)}
.door:hover .glow{transform:scale(1.4) translate(-10%,-10%);opacity:.8}
.door-dev .grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse at 80% 100%,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 80% 100%,#000 10%,transparent 70%)}
@media (max-width:760px){.doors{grid-template-columns:1fr !important}.door{min-height:340px}}

/* Section helpers */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:900px){.split,.split.rev{grid-template-columns:1fr}}
.sticky{position:sticky;top:110px}
@media (max-width:900px){.sticky{position:static}}

/* Manifesto */
.manifesto{position:relative;border-radius:32px;padding:clamp(2.4rem,6vw,5.5rem);color:#fff;overflow:hidden;background:var(--ink);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3rem;align-items:center;isolation:isolate}
.manifesto .aurora-wrap{inset:auto -20% -60% -20%;height:120%;transform:skewY(6deg);opacity:.9;transform-origin:left top}
.manifesto .aurora-wrap::after{background:linear-gradient(0deg,rgba(6,18,43,0) 30%,var(--ink) 100%) !important}
.manifesto .big{font-family:var(--f-display);font-weight:700;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.035em}
.manifesto .big em{font-style:normal;background:var(--aurora-light);-webkit-background-clip:text;background-clip:text;color:transparent}
.manifesto p.body{color:rgba(255,255,255,.76);max-width:46ch;font-size:1.05rem}
.manifesto .eyebrow{color:#E6C65A}
@media (max-width:900px){.manifesto{grid-template-columns:1fr}}

/* Problem tiles — bold, colourful, not a grey grid */
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.tile{border-radius:22px;padding:1.6rem;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;position:relative;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.tile:hover{transform:translateY(-6px)}
.tile h3{font-size:clamp(1.25rem,1.8vw,1.6rem);letter-spacing:-.03em;line-height:1.08}
.tile p{font-size:.95rem;opacity:.85}
.tile .n{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;opacity:.7}
.t1{grid-column:span 3;background:var(--ink);color:#fff}
.t2{grid-column:span 3;background:linear-gradient(135deg,#0A4FA3,#021B3A);color:#fff}
.t3{grid-column:span 2;background:#F6ECC9;color:var(--ink)}
.t4{grid-column:span 2;background:#E3F6FF;color:var(--ink)}
.t5{grid-column:span 2;background:linear-gradient(135deg,#D4AF37,#9A7A1C);color:var(--ink)}
@media (max-width:900px){.t1,.t2,.t3,.t4,.t5{grid-column:span 3}}
@media (max-width:600px){.t1,.t2,.t3,.t4,.t5{grid-column:span 6}.tile{min-height:0}}

/* Route animation */
.route{position:relative;border-radius:28px;background:var(--ink);color:#fff;padding:clamp(1.2rem,3vw,2.4rem);overflow:hidden;isolation:isolate}
.route svg{width:100%;height:auto}
.route .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;fill:rgba(255,255,255,.55)}
.route .node{fill:#0D1A3A;stroke:rgba(255,255,255,.18)}
.route .node.hub{fill:url(#hubg);stroke:none}
.route .ntxt{font-family:var(--f-display);font-weight:700;font-size:13px;fill:#fff;letter-spacing:-.01em}
.route .path{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.5}
.route .path.lit{stroke:url(#lineg);stroke-width:2;stroke-dasharray:6 8;animation:dash 1.2s linear infinite}
.route .path.dead{stroke:rgba(224,107,107,.6);stroke-dasharray:3 6}
@keyframes dash{to{stroke-dashoffset:-14}}
.route .dot{offset-rotate:0deg;animation:travel 5s cubic-bezier(.45,0,.3,1) infinite}
.route .dot.d2{animation-delay:1.7s}.route .dot.d3{animation-delay:3.3s}
@keyframes travel{0%{offset-distance:0%;opacity:0}6%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
.route .cap{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.route .cap b{color:var(--mint);font-weight:500}
.route .legend{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.8rem;color:rgba(255,255,255,.6);margin-top:1rem}
.route .legend i{display:inline-block;width:18px;height:2px;vertical-align:middle;margin-right:.4rem;background:var(--blue)}
.route .legend i.dead{background:rgba(212,175,55,.5)}

/* Steps — sticky scroller */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;counter-reset:step}
.step{position:relative;border-radius:24px;padding:1.8rem;background:var(--paper);display:grid;gap:.8rem;align-content:start;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),background .4s}
.step:hover{transform:translateY(-6px);background:#fff;box-shadow:0 40px 70px -40px rgba(2,27,58,.35)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--f-display);font-weight:600;font-size:3.4rem;line-height:1;letter-spacing:-.05em;background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-size:var(--s2)}
.step p{color:var(--ink-70)}
.step .note{font-size:var(--s-1);color:var(--ink-45)}
.night .step{background:var(--night-2)}
.night .step:hover{background:#0A2647}
.night .step p{color:var(--night-fg-60)}.night .step .note{color:var(--night-fg-40)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* Trust */
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.trust div{display:grid;gap:.5rem;padding:1.6rem;border-radius:22px;border:1px solid var(--line);background:#fff;transition:border-color .3s,transform .4s}
.trust div:hover{border-color:transparent;transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(6,18,43,.3)}
.trust h3{font-size:var(--s1)}
.trust p{color:var(--ink-70);font-size:.95rem}
.night .trust div{background:var(--night-2);border-color:var(--night-line)}
.night .trust p{color:var(--night-fg-60)}
@media (max-width:640px){.trust{grid-template-columns:1fr}}

/* Ledger */
.ledger{border-top:1px solid var(--line);display:grid}
.ledger-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:1rem 2rem;padding:1.6rem 0;border-bottom:1px solid var(--line);transition:padding-left .3s}
.ledger-row:hover{padding-left:.6rem}
.ledger-row h3{font-size:var(--s1)}
.ledger-row p{color:var(--ink-70);max-width:56ch}
.night .ledger,.night .ledger-row{border-color:var(--night-line)}
.night .ledger-row p{color:var(--night-fg-60)}
@media (max-width:640px){.ledger-row{grid-template-columns:1fr;gap:.5rem}}

/* Mock */
.mock{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 60px -30px rgba(6,18,43,.3);padding:1.4rem;display:grid;gap:1rem;font-size:.92rem}
.mock .mock-top{display:flex;justify-content:space-between;align-items:center;color:var(--ink-45);font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.mock .row{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-top:1px solid var(--line);color:var(--ink-70)}
.mock .row b{color:var(--ink);font-weight:600;text-align:right}
.mock .ex{font-size:.68rem;color:var(--ink-45);font-family:var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.night .mock{background:var(--night-2);border-color:var(--night-line)}
.night .mock .row{border-color:var(--night-line);color:var(--night-fg-60)}
.night .mock .row b{color:var(--night-fg)}

/* CTA */
.cta{padding-block:clamp(4rem,8vw,7rem)}
.cta-panel{border-radius:32px;padding:clamp(2.4rem,6vw,5rem);position:relative;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate}
.cta-panel .aurora-wrap{inset:-40% -20% auto -20%;height:160%;transform:skewY(-5deg);opacity:.85;transform-origin:left top}
.cta-panel .aurora-wrap::after{background:linear-gradient(180deg,rgba(6,18,43,.1) 0%,var(--ink) 85%) !important}
.cta-panel h2{font-size:clamp(2.4rem,5.5vw,4.6rem);letter-spacing:-.045em;max-width:16ch}
.cta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.5rem}
.cta-card{border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:1.5rem;display:grid;gap:.6rem;background:rgba(255,255,255,.05);backdrop-filter:blur(8px);transition:background .3s,transform .4s,border-color .3s}
.cta-card:hover{background:rgba(255,255,255,.1);transform:translateY(-4px);border-color:rgba(255,255,255,.4)}
.cta-card h3{font-size:var(--s1);color:#fff}
.cta-card p{color:rgba(255,255,255,.7);font-size:.95rem}
.cta-card span{margin-top:.4rem;font-weight:600;color:#E6C65A}
@media (max-width:900px){.cta-grid{grid-template-columns:1fr}}

/* Footer */
footer{border-top:1px solid var(--line);padding-block:3rem;font-size:.92rem;color:var(--ink-70)}
.night footer{border-top-color:var(--night-line);color:var(--night-fg-60)}
.foot{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:2rem}
.foot h4{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin-bottom:.9rem;color:var(--ink-45)}
.night .foot h4{color:var(--night-fg-40)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot a:hover{color:var(--violet)}
.night .foot a:hover{color:var(--blue)}
.legal{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-45);max-width:84ch;line-height:1.6}
.night .legal{border-top-color:var(--night-line);color:var(--night-fg-40)}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}}

/* Placeholders + chips */
.tbc{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;background:#F8F0D2;color:#6E5A12;border:1px dashed var(--gold-deep);border-radius:6px;padding:.1rem .45rem;white-space:nowrap}
.night .tbc{background:rgba(212,175,55,.14);color:#E6C65A}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:.24rem .6rem;border:1px solid var(--night-line);color:var(--night-fg-60)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.live{color:var(--mint);border-color:rgba(46,230,168,.4)}
.chip.build{color:var(--blue);border-color:rgba(0,173,239,.4)}
.chip.plan{color:#E6C65A;border-color:rgba(212,175,55,.5)}

/* Reveal: visible at rest, motion only adds */
.reveal{opacity:1;transform:none}
.words .w{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
  .js .reveal.in{opacity:1;transform:none}
  .js .words .w{opacity:0;transform:translateY(.6em) rotate(1.5deg);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
  .js .words.in .w{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}}

/* Cursor glow on dark panels */
.spot{position:absolute;inset:0;pointer-events:none;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(0,173,239,.22),transparent 60%);opacity:0;transition:opacity .4s;z-index:0}
.spotlit:hover .spot{opacity:1}

/* Form */
.form{display:grid;gap:1rem}
.field{display:grid;gap:.4rem}
.field label{font-size:.9rem;font-weight:600}
.field input,.field select,.field textarea{font:inherit;padding:.9rem 1rem;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);width:100%;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet);outline:none;box-shadow:0 0 0 4px rgba(0,173,239,.18)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.form .two{grid-template-columns:1fr}}
.toast{border:1px solid var(--line);border-left:3px solid var(--violet);background:#fff;padding:1rem 1.2rem;border-radius:12px;color:var(--ink-70)}
/* light cta grid (outside a dark panel) */
.cta-grid.light .cta-card{background:#fff;border-color:var(--line)}
.cta-grid.light .cta-card:hover{border-color:var(--violet);box-shadow:0 30px 60px -30px rgba(0,173,239,.35)}
.cta-grid.light .cta-card h3{color:var(--ink)}
.cta-grid.light .cta-card p{color:var(--ink-70)}
.cta-grid.light .cta-card span{color:var(--violet)}
.cta-grid.light .cta-card a{color:var(--violet);font-weight:600}

.steps[style*="1fr"] .step::before{font-size:1.6rem}

/* Mobile hero: let the rotating word wrap, tame the aurora */
@media (max-width:700px){
  .hero h1{font-size:clamp(2.2rem,10.5vw,3.2rem)}
  .hero h1 .swap{display:grid;width:100%}
  .hero h1 .swap span{white-space:normal;overflow-wrap:anywhere}
  .hero .eyebrow{font-size:.66rem;letter-spacing:.12em}
}
@media (max-width:900px){
  .aurora-wrap{inset:-15% -30% auto 10%;height:75%;transform:skewY(-12deg)}
  .aurora-wrap canvas{opacity:.6}
  .aurora-wrap::after{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.7) 15%,rgba(255,255,255,0) 45%),linear-gradient(180deg,rgba(255,255,255,0) 30%,#fff 90%)}
  .night .aurora-wrap::after{background:linear-gradient(90deg,var(--night) 0%,rgba(5,7,15,.7) 15%,rgba(5,7,15,0) 45%),linear-gradient(180deg,rgba(5,7,15,0) 30%,var(--night) 90%)}
}

/* Gradient text on dark surfaces must use the light gradient (navy start is invisible on navy) */
.night .grad,.manifesto .grad,.cta-panel .grad,.route .grad,.door-dev .grad,.t1 .grad,.t2 .grad{background-image:var(--aurora-light)}
.night .step::before{background:var(--aurora-light);-webkit-background-clip:text;background-clip:text}
.night .btn-aurora{background:linear-gradient(100deg,#0A4FA3,#00ADEF);color:#fff}
@media (max-width:900px){.cta-grid[style]{grid-template-columns:1fr !important}}

/* Founders */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.person{border:1px solid var(--line);border-radius:24px;padding:1.6rem;background:#fff;display:grid;gap:1rem;align-content:start;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.person:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(2,27,58,.3)}
.person-head{display:flex;gap:.9rem;align-items:center}
.person-head h3{font-size:var(--s1)}
.person .role{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);margin-top:.2rem}
.avatar.big{width:52px;height:52px;font-size:1rem;background:linear-gradient(135deg,var(--ink),#0A4FA3);box-shadow:inset 0 0 0 2px var(--gold)}
.person blockquote{margin:0;font-family:var(--f-display);font-weight:500;font-size:1.1rem;line-height:1.35;letter-spacing:-.01em;color:var(--ink);border-left:2px solid var(--gold);padding-left:.9rem}
.person details{border-top:1px solid var(--line);padding-top:.8rem}
.person summary{cursor:pointer;font-weight:600;color:var(--blue-ink,#0077B6);list-style:none;display:flex;align-items:center;gap:.5rem}
.person summary::-webkit-details-marker{display:none}
.person summary::after{content:"+";font-family:var(--f-mono);margin-left:auto;color:var(--ink-45)}
.person details[open] summary::after{content:"–"}
.person .note-body{display:grid;gap:.7rem;padding-top:.8rem;color:var(--ink-70);font-size:.95rem}
@media (max-width:900px){.people{grid-template-columns:1fr}}

/* Walkthrough video */
.how{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.5rem;align-items:stretch}
.steps-col{grid-template-columns:1fr;gap:.9rem}
.steps-col .step{padding:1.3rem 1.5rem;grid-template-columns:auto 1fr;gap:.2rem 1.1rem;align-items:center}
.steps-col .step::before{font-size:2rem;grid-row:span 3}
.steps-col .step h3{font-size:var(--s1)}
.steps-col .step p{grid-column:2;font-size:.95rem}
@media (max-width:900px){.how{grid-template-columns:1fr}}
.vid{margin:0;display:grid;gap:1rem;align-content:start}
.vid-frame{position:relative;border-radius:22px;overflow:hidden;background:var(--ink);box-shadow:0 40px 80px -36px rgba(2,27,58,.55);border:1px solid rgba(2,27,58,.12);aspect-ratio:16/9;max-width:100%}
.vid-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(100deg,#0A4FA3,#00ADEF 60%,#D4AF37);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1;opacity:.7}
.vid-frame video{width:100%;height:100%;object-fit:cover;display:block}
.vid figcaption{display:grid;gap:.4rem}
.vid figcaption p{color:var(--ink-70);font-size:.95rem;max-width:52ch}
.night .vid figcaption p{color:var(--night-fg-60)}