/* Fuentes alojadas en el sitio (Google Fonts: Cabin y Raleway, licencia OFL; Material Symbols, Apache 2.0).
   material-symbols.woff2 solo trae los iconos usados; para añadir uno, regenera el archivo desde Google Fonts con icon_names=. */
@font-face{font-family:"Cabin";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/cabin-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cabin";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/cabin-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Raleway";font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/raleway-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Raleway";font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/raleway-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Material Symbols Outlined";font-style:normal;font-weight:400;font-display:block;src:url(/assets/fonts/material-symbols.woff2) format("woff2")}

:root{
  color-scheme: light;
  /* Fluye brandbook v1: Electric Navy #282CAE · Dodger Blue #1F93F5 · Highlighter #34BFFD · Azure #2AFFCE */
  --blue:#1F93F5; --electric:#282CAE; --blue-hover:#1f2396; --blue-deep:#282CAE; --navy:#171a6e; --navy-2:#282CAE; --highlight:#34BFFD; --band-end:#0d1152;
  --sky:#c2e9ff; --sky-soft:#e7f5fe; --mint:#2affce;
  --ink:#1c1c1c; --muted:#5c5a5a; --faint:#8a8888; --line:#ececec; --soft:#f6f6f6; --paper:#ffffff;
  --ok:#077d62; --ok-bg:#d9f5ec; --warn:#8a5300; --warn-bg:#fff1d6; --warn-dot:#e58e00; --bad:#9b0000; --bad-bg:#ffe3e3;
  --display:"Raleway", "Segoe UI", system-ui, sans-serif; /* marketing: Raleway + Cabin (decisión sep 2026) */
  --body:"Cabin", "Segoe UI", system-ui, sans-serif;
  --r-sm:8px; --r:12px; --r-lg:20px; --r-xl:28px;
  --shadow-card:0 1px 2px rgba(0,2,73,.05), 0 14px 34px rgba(0,2,73,.08);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;padding-inline:clamp(16px,3vw,40px)}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;color:var(--ink)}
/* Raleway usa números de estilo antiguo por defecto: forzamos números alineados */
h1,h2,h3,.step-num,.stepper b,.kv .v,.stats .v,.score-top strong,.mock-title,.reco-main,.cases,.v{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.stepper a b{line-height:1;padding-top:1px}
p{margin:0;text-wrap:pretty}
a{color:var(--electric)}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--highlight);outline-offset:3px;border-radius:6px}
.msym{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;user-select:none}
.wrap{max-width:1200px;margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--electric)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:var(--r);font:500 16px/1 var(--body);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s}
.btn-primary{background:var(--electric);color:#fff}
.btn-primary:hover{background:var(--blue-hover);color:#fff}
.btn-ghost{background:var(--paper);color:var(--navy);border-color:var(--navy-2)}
.btn-ghost:hover{background:var(--sky-soft);color:var(--navy)}
.btn .msym{font-size:20px;transition:transform .2s}
.btn-ghost:hover .msym{transform:translateX(3px)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);margin-inline:calc(-1 * clamp(16px,3vw,40px));padding-inline:clamp(16px,3vw,40px)}
.site-header .wrap{display:flex;align-items:center;gap:32px;height:76px}
.logo img{width:118px;height:auto}
.nav{flex-grow:1;display:flex;gap:28px}
.nav a{font-size:15px;font-weight:500;color:var(--muted);text-decoration:none;padding:8px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--blue);transition:right .25s}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.header-actions{display:flex;align-items:center;gap:10px}
.country{position:relative}
.country-btn{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font:500 14px var(--body);color:var(--muted);cursor:pointer}
.country-btn:hover{border-color:#d6d6d6;color:var(--ink)}
.country-btn .msym{font-size:20px}
.country-btn .chev{font-size:18px;transition:transform .2s}
.country-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.country-menu{position:absolute;right:0;top:52px;width:250px;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 34px rgba(0,2,73,.14);display:flex;flex-direction:column;gap:2px;transform-origin:top right;animation:pop .18s ease both}
.country-menu a{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink)}
.country-menu a:hover{background:var(--soft)}
.country-menu a[aria-current="page"]{background:var(--soft)}
.country-menu .c-name{display:flex;flex-direction:column;flex-grow:1;font-size:15px;font-weight:500;line-height:1.25}
.country-menu .c-lang{font-size:12.5px;font-weight:400;color:var(--muted)}
.country-menu .msym{font-size:18px;color:var(--blue)}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);cursor:pointer;color:var(--ink)}
.mobile-nav{display:none}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(40px,7vw,88px) clamp(32px,5vw,64px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:center}
.hero h1{font-size:clamp(38px,5vw,58px);line-height:1.06;font-weight:700;letter-spacing:0;color:var(--electric)}
.hero-copy{display:flex;flex-direction:column;gap:22px}
.hero-lead{font-size:clamp(17px,1.5vw,19px);line-height:1.5;color:var(--ink);max-width:36em}
.hero-bound{font-size:15.5px;line-height:1.5;color:var(--muted);max-width:36em}
.hero-bound strong{color:var(--ink);font-weight:600}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.hero-visual{position:relative}
.hero-visual img{width:100%;height:auto;aspect-ratio:1557/1204;filter:drop-shadow(0 24px 40px rgba(0,2,73,.16))}

/* ---------- Quote + pillars ---------- */
.quote{padding-block:clamp(24px,4vw,48px) 20px;text-align:center}
.quote blockquote{margin:0 auto;max-width:28em;font-family:var(--display);font-size:clamp(22px,2.4vw,30px);line-height:1.3;font-weight:500;color:var(--navy);text-wrap:balance}
.pillars{padding-block:28px clamp(48px,6vw,80px)}
.pillars .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pillar{padding:26px;border:1px solid var(--line);border-radius:var(--r);background:var(--soft);display:flex;flex-direction:column;gap:10px;transition:transform .25s,box-shadow .25s,background .25s}
.pillar:hover{transform:translateY(-3px);background:var(--paper);box-shadow:var(--shadow-card)}
.pillar .msym{font-size:30px;color:var(--blue)}
.pillar h3{font-size:20px;font-weight:600}
.pillar p{font-size:16px;color:var(--muted)}

/* ---------- Steps ---------- */
.steps-head{padding-block:clamp(40px,5vw,64px) clamp(36px,4vw,56px);text-align:center}
.steps-head h2{font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:0;color:var(--electric)}
.steps-head .eyebrow{display:block;margin-bottom:14px}
.steps-head .sub{margin:16px auto 0;max-width:34em;font-size:18px;color:var(--muted)}
.step{padding-block:clamp(40px,6vw,80px);scroll-margin-top:140px}
.step.alt{background:var(--soft);margin-inline:calc(-1 * clamp(16px,3vw,40px));padding-inline:clamp(16px,3vw,40px)}
.step .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center}
.step.flip .step-copy{order:2}
.step-copy{display:flex;flex-direction:column;gap:16px;max-width:520px}
.step-num{display:flex;align-items:baseline;gap:12px;font-family:var(--display);font-size:22px;font-weight:700;color:var(--blue)}
.step-num .eyebrow{font-family:var(--body)}
.step-copy h3{font-size:clamp(26px,2.6vw,34px);font-weight:700;letter-spacing:0;color:var(--electric);line-height:1.15}
.step-copy p{font-size:17px;color:var(--muted)}
.step-copy .note{font-size:15px;color:var(--ink);display:flex;gap:8px;align-items:flex-start}
.step-copy .note .msym{font-size:18px;color:var(--ok);margin-top:2px}
.closing{padding-block:clamp(40px,5vw,64px);text-align:center}
.closing p{max-width:30em;margin-inline:auto;font-family:var(--display);font-size:clamp(20px,2.2vw,26px);font-weight:500;line-height:1.35;color:var(--navy)}

/* ---------- Mockups ---------- */
.mock{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-card);overflow:hidden;font-size:14px;font-variant-numeric:tabular-nums}
.mock-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.mock-title{flex-grow:1;font-family:var(--display);font-size:16px;font-weight:600}
.mock-sub{display:block;font-family:var(--body);font-size:12.5px;font-weight:400;color:var(--muted)}
.mock-body{padding:18px;display:flex;flex-direction:column;gap:14px}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.chip.ok{background:var(--ok-bg);color:var(--ok)} .chip.info{background:var(--sky-soft);color:var(--blue-deep)} .chip.warn{background:var(--warn-bg);color:var(--warn)} .chip.mute{background:var(--soft);color:var(--muted)} .chip.bad{background:var(--bad-bg);color:var(--bad)}
.label{font-size:12px;color:var(--muted)}
.field{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.field strong{font-weight:500}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kv .v{white-space:nowrap;font-family:var(--display);font-size:clamp(17px,1.7vw,22px);font-weight:600;color:var(--navy);line-height:1.2}
.kv .v.good{color:var(--ok)}
.replay{position:absolute;top:10px;right:10px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--muted);cursor:pointer;opacity:0;transition:opacity .2s,color .2s}
.mock:hover .replay,.replay:focus-visible{opacity:1}
.replay:hover{color:var(--blue)}
.replay .msym{font-size:18px}
.mock-head .chip{margin-right:36px}

/* step 1 */
.sched{display:flex;flex-direction:column;gap:8px}
.sched li{list-style:none;display:flex;justify-content:space-between;padding:10px 12px;border-radius:10px;background:var(--soft)}
.sched{margin:0;padding:0}
.hint{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--sky-soft);color:var(--navy);font-size:13px}
.hint .msym{font-size:18px;color:var(--blue)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fake-btn{height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:14px}
.fake-btn.line{border:1px solid var(--navy-2);color:var(--navy)}
.fake-btn.fill{background:var(--electric);color:#fff}
/* step 2 */
.track{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:22px}
.track-bar{position:absolute;top:30px;left:8px;right:8px;height:3px;border-radius:3px;background:var(--line)}
.track-fill{position:absolute;top:30px;left:8px;height:3px;border-radius:3px;background:var(--ok);width:calc(66% - 4px)}
.node{position:relative;display:flex;flex-direction:column;gap:3px}
.dot{width:18px;height:18px;border-radius:50%;background:var(--paper);border:3px solid var(--line);margin-bottom:10px;position:relative;z-index:1}
.dot.done{background:var(--ok);border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}
.dot.next{border-color:var(--blue)}
.node .amt{font-weight:600}
.log{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:10px;background:var(--soft);font-size:13.5px}
.log .msym{color:var(--ok);font-size:20px}
/* step 3 */
.timeline{position:relative;display:flex;flex-direction:column;gap:14px;padding-left:22px;margin:0}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.ev{position:relative;list-style:none;display:flex;flex-direction:column;gap:1px}
.ev::before{content:"";position:absolute;left:-21px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--sky);border:2px solid var(--paper)}
.ev.ok::before{background:var(--ok)} .ev.info::before{background:var(--blue)}
.ev b{font-weight:600;font-size:14px}
.ev span{font-size:13px;color:var(--muted)}
.sec-label{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
/* step 4 */
.prof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px}
.avatar{width:38px;height:38px;border-radius:12px;background:var(--electric);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.hist{display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.hist li{list-style:none;display:flex;align-items:center;gap:8px;font-size:13.5px}
.hist li i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex-shrink:0}
.hist li i.w{background:var(--warn-dot)}
.hist li em{margin-left:auto;font-style:normal;color:var(--muted);font-size:12.5px}
.score{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:10px;background:var(--sky-soft)}
.score-top{display:flex;justify-content:space-between;align-items:baseline}
.score-top strong{font-family:var(--display);font-size:16px;color:var(--electric)}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.meter i{height:6px;border-radius:3px;background:#cfe3f5}
.meter i.on{background:var(--blue)}
.play .meter i.on{animation:grow 1s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--d,0s) + .9s)}
.score-note{font-size:12px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.stats .v{font-family:var(--display);font-size:20px;font-weight:600}
.reco{border:1px solid var(--line);border-radius:12px;background:#fafbfd;padding:14px;display:flex;flex-direction:column;gap:10px}
.reco-main{font-size:15px;font-weight:500;line-height:1.35}
.why{display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
.why li{list-style:none;display:flex;gap:6px;font-size:13px;color:var(--muted)}
.why .msym{font-size:17px}
.why .ok{color:var(--ok)} .why .warn{color:var(--warn-dot)}
.decide{font-size:12.5px;color:var(--muted)}

/* animations (play class) — resting state is the final, visible state */
.play .a{animation:rise .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.play .grow{animation:grow 1.4s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--d,0s)}
@keyframes grow{from{width:0}}
.play .fill-in{animation:fillin .4s ease both;animation-delay:var(--d,0s)}
@keyframes fillin{from{background:var(--paper);border-color:var(--line);box-shadow:none}}
.play .btn-on{animation:btnon .4s ease both;animation-delay:var(--d,0s)}
@keyframes btnon{from{background:var(--line);color:#b5b5b5}}
.play .glow{animation:glow 1.6s ease both;animation-delay:var(--d,0s)}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(0,97,254,0)}30%{box-shadow:0 0 0 4px rgba(0,97,254,.18)}100%{box-shadow:0 0 0 0 rgba(0,97,254,0)}}
.play .swap-from{animation:swapfrom var(--t,1s) steps(1,end) both}
.play .swap-to{animation:swapto var(--t,1s) steps(1,end) both}
@keyframes swapfrom{from{display:inline-flex}to{display:none}}
.swap-from{display:none}
@keyframes swapto{from{display:none}to{display:inline-flex}}

/* ---------- IA ---------- */
.band{border-radius:var(--r-xl);padding:clamp(40px,6vw,88px) clamp(20px,5vw,80px);color:#fff}
.ia{margin-block:clamp(24px,4vw,40px)}
.ia .band{background:linear-gradient(180deg,var(--electric),var(--band-end))}
.ia h2{color:#fff;font-size:clamp(28px,3vw,38px);font-weight:500;max-width:22em}
.ia .lead{margin-top:18px;max-width:40em;font-size:18px;color:var(--sky)}
.ia-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.ia-card{padding:24px;border-radius:var(--r);border:1px solid rgba(178,208,255,.35);background:rgba(255,255,255,.04);display:flex;flex-direction:column;gap:10px;transition:background .25s,border-color .25s}
.ia-card:hover{background:rgba(255,255,255,.08);border-color:rgba(178,208,255,.6)}
.ia-card .msym{font-size:30px;color:#fff}
.ia-card h3{color:#fff;font-size:20px;font-weight:500}
.ia-card p{font-size:16px;color:var(--sky)}
.ia-note{margin-top:28px;display:flex;gap:14px;align-items:center;padding:20px 24px;border-radius:var(--r);background:rgba(255,255,255,.1);font-size:17px}
.ia-note .msym{font-size:26px;color:var(--mint)}
.ia-note strong{font-weight:600}

/* ---------- About ---------- */
.about{padding-block:clamp(48px,7vw,96px)}
.about .wrap{display:flex;flex-direction:column;gap:40px}
.origin{max-width:52em;margin-inline:auto;text-align:center;font-family:var(--display);font-size:clamp(21px,2.3vw,28px);line-height:1.35;font-weight:500}
.origin span{color:var(--electric)}
/* Media block: image now; later add a <video> and the .play button on top (see comment in markup) */
.media{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:var(--r-lg);overflow:hidden;background:#0b1a6b}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media .flow{position:absolute;inset:-20%;background:
  radial-gradient(40% 55% at 20% 30%, rgba(52,191,253,.55), transparent 60%),
  radial-gradient(45% 50% at 75% 65%, rgba(31,147,245,.6), transparent 62%),
  radial-gradient(30% 40% at 55% 20%, rgba(42,255,206,.22), transparent 60%),
  linear-gradient(160deg,#282cae,#0b1a6b 60%,#06103f);
  filter:blur(8px);animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-4%,3%,0) scale(1.06)}100%{transform:translate3d(3%,-2%,0) scale(1.03)}}
.media svg.waves{position:absolute;inset:0;width:100%;height:100%;opacity:.35}
.media svg.waves path{fill:none;stroke:#b8e6ff;stroke-width:1.2;stroke-dasharray:6 10;animation:dash 18s linear infinite}
@keyframes dash{to{stroke-dashoffset:-320}}
.media .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06) translate(-1%,-1%)}}
.media .shade{position:absolute;inset:0;background:linear-gradient(35deg,rgba(40,44,174,.92) 0%,rgba(40,44,174,.62) 38%,rgba(40,44,174,.18) 70%,rgba(13,17,82,.10) 100%),linear-gradient(0deg,rgba(13,17,82,.55),rgba(13,17,82,0) 45%);mix-blend-mode:normal}
.media .cap{position:absolute;left:clamp(20px,4vw,48px);bottom:clamp(20px,4vw,44px);right:clamp(20px,4vw,48px);color:#fff;max-width:30em}
.media .cap strong{display:block;font-family:var(--display);font-size:clamp(20px,2.4vw,30px);font-weight:600;line-height:1.2}
.media .cap span{display:block;margin-top:8px;color:#d6ecff;font-size:clamp(14px,1.3vw,16px)}
.media .play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border:0;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .25s}
.media .play:hover{transform:scale(1.07)}
.media .play .msym{font-size:44px;color:var(--blue)}
.backers{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px;border-radius:var(--r);border:1px solid var(--line)}
.backers .row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(28px,6vw,72px)}
.backers img.qstp{height:clamp(84px,9vw,120px);width:auto}
.backers img.ms{height:clamp(56px,6vw,80px);width:auto}
.cases{border-radius:var(--r);background:var(--electric);color:#fff;padding:clamp(28px,4vw,44px) clamp(20px,6vw,96px)}
.cases-top{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.cases-top .eyebrow{color:var(--sky);flex-grow:1}
.dots{display:flex;gap:4px}
.dots button{width:28px;height:28px;border:0;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dots button span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .2s,transform .2s}
.dots button[aria-selected="true"] span{background:var(--mint);transform:scale(1.2)}
.case{display:flex;gap:28px;align-items:center}
.case[hidden]{display:none}
.case.enter{animation:caseIn .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes caseIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.case-logo{flex-shrink:0;width:160px;height:64px;display:flex;align-items:center;justify-content:center}
.case-logo img{max-width:100%;max-height:100%;width:auto;height:auto}
.case h3{color:#fff;font-size:21px;font-weight:600;margin-bottom:6px}
.case p{color:var(--sky);font-size:16.5px;max-width:720px}
.lockup{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-top:24px;border-top:1px solid var(--sky)}
.lockup .brand{flex-grow:1;display:flex;align-items:center;gap:10px;font-size:18px}
.lockup .brand img{height:34px;width:auto}
.lockup a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink);font-weight:500;font-size:17px;text-decoration:none}
.lockup a:hover{color:var(--electric)}

/* ---------- Building ---------- */
.building .band{background:linear-gradient(180deg,var(--electric) 18%,var(--band-end))}
.building .top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px)}
.building h2{color:#fff;font-size:clamp(28px,3vw,38px);font-weight:600;line-height:1.15}
.building .top p{font-size:18px;color:#fff;opacity:.92}
.layers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:44px}
.layer{padding:26px;border:2px solid var(--sky);border-radius:var(--r);display:flex;flex-direction:column;gap:12px}
.layer .msym{font-size:30px}
.pill{align-self:flex-start;padding:3px 10px;border:1px solid var(--sky);border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--sky)}
.layer h3{color:#fff;font-size:23px;font-weight:500}
.layer p{font-size:16px;opacity:.92}
.building .foot{margin:32px auto 0;max-width:46em;text-align:center;font-size:16px;opacity:.92}

/* ---------- FAQ ---------- */
.faq{padding-block:clamp(56px,7vw,96px) clamp(32px,4vw,48px)}
.faq h2{font-size:clamp(28px,3vw,38px);font-weight:700;letter-spacing:0;color:var(--electric);margin-bottom:28px}
.faq-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:900px}
details{border:1px solid var(--line);border-radius:var(--r);background:var(--soft);transition:background .2s}
details[open]{background:var(--paper);box-shadow:var(--shadow-card)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:22px 24px;font-family:var(--display);font-size:clamp(18px,1.7vw,21px);font-weight:600}
summary::-webkit-details-marker{display:none}
summary .msym{margin-left:auto;font-size:24px;color:var(--blue);transition:transform .25s}
details[open] summary .msym{transform:rotate(45deg)}
details .ans{padding:0 24px 22px;color:var(--muted);font-size:16.5px}
details[open] .ans{animation:rise .3s ease both}

/* ---------- Buyer strip + CTA ---------- */
.buyer{padding-block:28px;display:flex}
.buyer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;text-align:center;color:var(--muted);font-size:16px}
.buyer strong{color:var(--ink);font-weight:600}
.buyer a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;text-decoration:none}
.cta{margin-top:12px}
.cta .band{background:var(--blue-deep);border-radius:var(--r-xl) var(--r-xl) 0 0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.cta h2{color:#fff;font-size:clamp(28px,3vw,38px);font-weight:500}
.cta p{margin-top:16px;font-size:18px;color:#fff;opacity:.92;max-width:32em}
.cta .cta-go{display:flex;flex-direction:column;gap:8px;text-align:center}
.cta .cta-go .btn{background:#fff;color:var(--navy);min-height:56px}
.cta .cta-go .btn:hover{background:var(--sky-soft)}
.cta .cta-go small{color:#fff;opacity:.85;font-size:14px}

/* ---------- Footer ---------- */
.footer{background:var(--band-end);color:var(--sky);margin-inline:calc(-1 * clamp(16px,3vw,40px));padding:48px clamp(16px,3vw,40px) calc(40px + env(safe-area-inset-bottom,0px))}
.footer .wrap{display:flex;flex-direction:column;gap:28px}
.footer .row1{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.footer .row1 img{height:40px;width:auto}
.footer nav{flex-grow:1;display:flex;flex-wrap:wrap;gap:8px 24px}
.footer a{color:var(--sky);text-decoration:none;font-size:14.5px}
.footer a:hover{color:#fff}
.social{display:flex;gap:10px}
.social a{width:40px;height:40px;border:1px solid var(--sky);border-radius:var(--r);display:flex;align-items:center;justify-content:center}
.footer .row2{display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:22px;border-top:1px solid rgba(178,208,255,.3);font-size:14px}
.footer .row2 span:first-child{flex-grow:1}
.footer .row2 a{text-decoration:underline}

/* ---------- Reveal on scroll ---------- */
.paused, .paused *{animation-play-state:paused!important}
.rv.pending{opacity:0;transform:translateY(24px)}
.split.pending .w > span{transform:translateY(105%);opacity:.2}
@keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.rv.go{animation:riseIn .8s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--d,0s)}


/* ---------- Sticky stepper ---------- */
.steps-zone{position:relative}
.stepper{position:sticky;top:calc(76px + env(safe-area-inset-top,0px));z-index:40;margin-inline:calc(-1 * clamp(16px,3vw,40px));padding-inline:clamp(16px,3vw,40px);background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.stepper .wrap{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stepper a{display:flex;align-items:center;gap:10px;min-height:56px;text-decoration:none;color:var(--faint);font-size:14.5px;font-weight:500;transition:color .3s}
.stepper a b{font-family:var(--display);font-weight:600;font-size:15px;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1.5px solid currentColor;transition:background .3s,color .3s,border-color .3s}
.stepper a.done{color:var(--ink)}
.stepper a.done b{border-color:var(--ok);color:var(--ok)}
.stepper a.active{color:var(--electric)}
.stepper a.active b{background:var(--electric);border-color:var(--electric);color:#fff}
.stepper .loop{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--soft);color:var(--muted);font-size:12px;font-weight:500}
.stepper .loop .msym{font-size:15px}
.stepper a.active .loop{background:var(--sky-soft);color:var(--blue-deep)}
.stepper a b{flex-shrink:0}
.stepper a{min-width:0;white-space:nowrap}
.stepper .loop{white-space:nowrap;flex-shrink:0}
@media (max-width:1100px){.stepper .loop-t{display:none}}
@media (max-width:760px){
  .stepper .loop{display:none}
  .stepper a span.lbl{display:none}
  .stepper a.active span.lbl{display:inline}
  .stepper .wrap{grid-template-columns:auto auto auto auto;justify-content:space-between}
  .stepper a{min-height:52px;font-size:14px}
}
.stepper .bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--blue);transform-origin:left center;transform:scaleX(var(--p,0))}

/* ---------- Word-by-word headline reveal (resting state: fully visible) ---------- */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w:not(:last-child){margin-right:.26em}
.split .w > span{display:inline-block}
.split.go .w > span{animation:wordUp .9s cubic-bezier(.19,1,.22,1) both;animation-delay:calc(var(--i) * 55ms + var(--d,0s))}
@keyframes wordUp{from{transform:translateY(105%);opacity:.2}to{transform:none;opacity:1}}

/* ---------- Hero entrance + parallax ---------- */
.hero-visual{will-change:transform}
.loaded .hero-visual img{animation:heroIn 1.2s cubic-bezier(.19,1,.22,1) .25s both}
@keyframes heroIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.loaded .hero-copy > :not(h1){animation:rise .8s cubic-bezier(.22,.61,.36,1) both}
.loaded .hero-lead{animation-delay:.45s!important}.loaded .hero-bound{animation-delay:.6s!important}.loaded .hero-ctas{animation-delay:.75s!important}

/* ---------- IA structure canvas ---------- */
.ia .band{position:relative;overflow:hidden}
.ia .band > *:not(canvas){position:relative;z-index:1}
.ia canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
@media (max-width:620px){
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .header-actions .btn-primary{display:none}
  .site-header .wrap{gap:12px;justify-content:space-between}
  .mobile-nav:not([hidden]){display:flex;flex-direction:column;gap:4px;padding:8px 0 16px}
  .mobile-nav a{min-height:48px;display:flex;align-items:center;font-size:17px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
  .mobile-nav .btn{margin-top:12px;color:#fff;border:0}
  .hero .wrap,.step .wrap,.building .top,.cta .band{grid-template-columns:minmax(0,1fr)}
  .step.flip .step-copy{order:0}
  .pillars .wrap,.ia-grid{grid-template-columns:minmax(0,1fr)}
  .layers,.faq-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .case{flex-direction:column;align-items:flex-start;gap:16px}
  .case-logo{justify-content:flex-start;width:140px;height:56px}
  .prof{grid-template-columns:minmax(0,1fr)}
  .kv .v{font-size:18px}
  .mock-body{padding:14px}
  .ia-note{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .swap-from{display:none!important}
}