/* ==========================================================================
   AlloTech APEX design system — v1
   Cinematic dark, scroll-driven depth. No framework, no build step.
   Motion is progressive: every rule that hides or transforms content is gated
   behind html.apex-motion (set by allotech-apex.v1.js), so the page is fully
   readable with JS off, with reduced motion, or if a script fails.
   ========================================================================== */

@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree-var-latin.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-var-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#04060c; --bg-2:#070b14; --surface:#0b111e; --surface-2:#101829; --surface-3:#16213a;
  --line:rgba(150,180,255,.12); --line-2:rgba(150,180,255,.24);
  --text:#f4f7fb; --muted:#a3b0c6; --dim:#74829b;
  --blue:#4b8dff; --cyan:#2bd4f0; --iris:#7fb2ff; --ok:#3ddc97; --warn:#f6c453;
  --grad:linear-gradient(100deg,#6aa5ff 0%,#2bd4f0 100%);
  --display:"Figtree",ui-sans-serif,system-ui,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:72px; --s8:112px; --s9:160px;
  --ease:cubic-bezier(.2,.7,.1,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --wrap:1200px; --nav-h:56px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px var(--line);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:var(--iris);text-underline-offset:3px}
a:hover{color:#fff}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
::selection{background:rgba(43,212,240,.3)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:#fff;color:#04060c;padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.028em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(2.7rem,7.4vw,6rem);letter-spacing:-.04em}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
h3{font-size:1.2rem;line-height:1.25;letter-spacing:-.015em}
.lede,.section-lede{color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;max-width:44ch;text-wrap:pretty}
.eyebrow,.hero-tag{font:400 .78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:var(--s3)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
p{text-wrap:pretty}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;font:600 1rem/1 var(--body);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:#fff;color:#04060c}
.btn-primary:hover{color:#04060c;box-shadow:0 0 0 6px rgba(255,255,255,.12),0 16px 40px -12px rgba(75,141,255,.7)}
.btn-ghost{background:rgba(255,255,255,.05);border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.btn-accent{background:var(--grad);color:#04121c}
.btn-accent:hover{color:#04121c;box-shadow:0 14px 36px -12px rgba(43,212,240,.7)}
.btn-sm{min-height:40px;padding:0 18px;font-size:.92rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-note{color:var(--dim);font-size:.9rem;margin-top:var(--s3)}
.link-arrow{font-weight:600;text-decoration:none}

/* ---------- Header: floating glass bar ---------- */
header.site{position:fixed;inset:12px 0 auto 0;z-index:60;pointer-events:none}
header.site .navbar{pointer-events:auto;max-width:1120px;height:var(--nav-h);margin-inline:auto;padding-inline:10px 8px;width:calc(100% - 24px);display:flex;align-items:center;gap:16px;border-radius:999px;border:1px solid var(--line);background:rgba(8,12,22,.55);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);transition:background .3s,border-color .3s,box-shadow .3s}
html.is-scrolled header.site .navbar{background:rgba(6,9,17,.82);border-color:var(--line-2);box-shadow:0 18px 50px -20px rgba(0,0,0,.9)}
.brand{display:flex;align-items:center;padding:0 10px;flex:none}
.brand img{height:26px;width:auto}
.navlinks{display:flex;gap:2px;margin-inline:auto}
.navlinks a{color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:500;padding:9px 13px;border-radius:999px;transition:color .2s,background .2s}
.navlinks a:hover{color:#fff;background:rgba(255,255,255,.07)}
.navtools{display:flex;align-items:center;gap:8px;margin-left:auto}
.navlinks + .navtools{margin-left:0}
.langsw{color:var(--muted);text-decoration:none;font:400 .8rem/1 var(--mono);letter-spacing:.08em;padding:11px 12px;border-radius:999px}
.langsw:hover{color:#fff;background:rgba(255,255,255,.07)}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;width:42px;height:42px;display:grid;place-items:center;border-radius:999px;font-size:1.3rem;color:#fff}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{background:rgba(255,255,255,.08)}
.sheet{position:absolute;right:-60px;top:54px;width:min(88vw,320px);padding:10px;border-radius:var(--r-lg);background:rgba(8,12,22,.96);border:1px solid var(--line-2);box-shadow:var(--shadow);display:grid;gap:2px}
.sheet a{color:var(--text);text-decoration:none;padding:13px 14px;border-radius:12px;font-weight:500}
.sheet a:hover{background:rgba(255,255,255,.07)}
@media (max-width:940px){.navlinks{display:none}.menu{display:block}.navtools{margin-left:auto}}
@media (max-width:420px){header.site .btn-sm{padding:0 14px;font-size:.85rem}}

/* ---------- Sections ---------- */
main > section,main > .ticker{position:relative}
.section,main > section.alt,main > section:not([class]){padding-block:clamp(72px,11vw,150px)}
.section-head{display:grid;gap:var(--s4);margin-bottom:clamp(36px,5vw,64px);max-width:900px}
.section-head h2{max-width:18ch}
.section-head .lede{max-width:52ch}
main > section.alt,main > section:not([class]){border-top:1px solid var(--line)}
main > section.alt > .wrap > h2,main > section:not([class]) > .wrap > h2{max-width:20ch;margin-bottom:var(--s4)}
.section-lede{max-width:60ch;margin-bottom:clamp(32px,4vw,56px)}

/* Card primitive shared by most grids */
.pain,.step,.emp,.cell,.plan,.card,.faq,.callout,.boss-card,.node,.approval-demo{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:var(--r-lg)}

/* ---------- HERO (home) ---------- */
.hero{position:relative;isolation:isolate}
.hero-home{min-height:100svh;padding-top:calc(var(--nav-h) + 70px)}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-bg::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,transparent,var(--bg))}
.hero-core{position:absolute;left:50%;top:34%;width:min(1500px,150vw);max-width:none;translate:-50% 0;opacity:.4;-webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);mask-image:radial-gradient(closest-side,#000 45%,transparent 100%)}
.hero-grid{position:absolute;inset:auto -20% -10% -20%;height:70%;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;transform:perspective(700px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:radial-gradient(ellipse at 50% 100%,#000 0,transparent 68%);mask-image:radial-gradient(ellipse at 50% 100%,#000 0,transparent 68%);opacity:.7}
.hero-home .hero-copy{text-align:center;display:grid;justify-items:center;gap:var(--s4);max-width:980px;margin-inline:auto}
.hero-home .hero-tag{display:inline-flex;align-items:center;gap:10px;margin:0;padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);background:rgba(8,12,22,.6);color:var(--muted);letter-spacing:.1em;line-height:1.4;text-align:left}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:pulse 2.4s infinite;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
.hero-home .lede{max-width:56ch;color:#c3cde0;text-shadow:0 1px 18px rgba(4,6,12,.9)}
.hero-home .cta-row{justify-content:center}
.hero-home .cta-note{margin-top:0}
.hero-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;color:var(--dim);font-size:.92rem}
.hero-trust b{color:var(--text);font-weight:600}

/* 3D deck: the product, rising out of the floor */
.deck-scene{perspective:1600px;perspective-origin:50% 0%;margin-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,8vw,120px)}
.deck{position:relative;width:min(1040px,100%);margin-inline:auto;transform-style:preserve-3d;transform:rotateX(calc((1 - var(--pin,1)) * 46deg)) scale(calc(.86 + var(--pin,1) * .14));transform-origin:50% 0;will-change:transform}
.deck-main{border-radius:var(--r-lg);border:1px solid var(--line-2);background:linear-gradient(180deg,#0e1628,#080d19);box-shadow:0 60px 140px -40px rgba(20,90,220,.55),0 0 0 1px rgba(255,255,255,.03) inset;overflow:hidden}
.deck-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);font:400 .76rem/1 var(--mono);color:var(--dim);letter-spacing:.06em}
.deck-bar i{width:10px;height:10px;border-radius:50%;background:#26324a}
.deck-bar span{margin-left:10px}
.deck-bar .live{margin-left:auto;color:var(--ok);display:inline-flex;align-items:center;gap:8px}
.deck-body{display:grid;grid-template-columns:1.15fr 1fr;gap:0}
.deck-col{padding:18px}
.deck-col + .deck-col{border-left:1px solid var(--line)}
.deck-h{font:400 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.deck-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px}
.deck-row + .deck-row{margin-top:4px}
.deck-row:first-of-type{background:rgba(75,141,255,.1);box-shadow:0 0 0 1px rgba(75,141,255,.25) inset}
.deck-row img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px rgba(43,212,240,.35)}
.deck-row b{display:block;font:600 .98rem/1.2 var(--display)}
.deck-row small{display:block;color:var(--muted);font-size:.84rem;line-height:1.3}
.deck-row em{margin-left:auto;font:400 .7rem/1 var(--mono);font-style:normal;color:var(--ok);padding:6px 9px;border-radius:999px;background:rgba(61,220,151,.1);white-space:nowrap}
.deck-row em.wait{color:var(--warn);background:rgba(246,196,83,.1)}
.deck-log{display:grid;gap:10px;font:400 .82rem/1.4 var(--mono);color:var(--muted)}
.deck-log li{display:flex;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03)}
.deck-log time{color:var(--dim);flex:none}
.deck-log .hl{color:var(--cyan)}
.deck-float{position:absolute;width:min(300px,42%);padding:16px;border-radius:var(--r);border:1px solid var(--line-2);background:rgba(10,16,30,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 40px 90px -30px rgba(0,0,0,.9);font-size:.9rem;will-change:transform}
.deck-float .k{font:400 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.deck-float b{display:block;font:600 1rem/1.3 var(--display);margin-bottom:4px}
.deck-float small{color:var(--muted);display:block}
.deck-float .acts{display:flex;gap:8px;margin-top:12px}
.deck-float .acts span{font:600 .78rem/1 var(--body);padding:8px 12px;border-radius:999px;border:1px solid var(--line-2)}
.deck-float .acts span:first-child{background:#fff;color:#04060c;border-color:#fff}
.deck-f1{left:-8%;bottom:-11%;transform:translate3d(calc((1 - var(--pin,1)) * -90px),calc((1 - var(--pin,1)) * 60px),calc(40px + var(--pin,1) * 80px))}
.deck-f2{right:-6%;top:-9%;transform:translate3d(calc((1 - var(--pin,1)) * 90px),calc((1 - var(--pin,1)) * 50px),calc(60px + var(--pin,1) * 100px))}
.wave{display:flex;align-items:center;gap:3px;height:26px;margin-top:10px}
.wave i{flex:1;border-radius:2px;background:var(--grad);height:30%;animation:wave 1.3s ease-in-out infinite}
.wave i:nth-child(3n){animation-delay:-.4s}.wave i:nth-child(3n+1){animation-delay:-.8s}.wave i:nth-child(4n){animation-delay:-.2s}
@keyframes wave{50%{height:100%}}
.deck-cap{text-align:center;color:var(--dim);font-size:.8rem;margin-top:var(--s4)}
@media (max-width:860px){
  .deck-body{grid-template-columns:1fr}.deck-col + .deck-col{border-left:0;border-top:1px solid var(--line)}
  .deck-float{position:relative;inset:auto;width:auto;margin-top:12px;transform:none}
  .deck{transform:rotateX(calc((1 - var(--pin,1)) * 24deg))}
}

/* ---------- Ticker ---------- */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding-block:20px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker .track{display:flex;gap:56px;width:max-content;animation:ticker 46s linear infinite;font:400 .84rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ticker .track span{white-space:nowrap}
.ticker .track b,.ticker .track strong{color:var(--text);font-weight:400}
.ticker:hover .track{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- Pain grid ---------- */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pain{padding:26px;font:500 1.12rem/1.4 var(--display);letter-spacing:-.01em;color:#dfe6f2;display:flex;gap:14px;align-items:flex-start}
.pain svg{flex:none;width:22px;height:22px;color:var(--cyan);margin-top:3px}
@media (max-width:900px){.pain-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pain-grid{grid-template-columns:1fr}}

/* ---------- How it works: sticky 3D stack ---------- */
:is(#how-it-works,#comment-ca-marche) .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:start}
:is(#how-it-works,#comment-ca-marche) .section-head{position:sticky;top:120px;margin:0}
.steps{display:grid;gap:22px;perspective:1400px}
.step{position:sticky;top:calc(118px + var(--i,0) * 22px);padding:clamp(26px,3.4vw,44px);min-height:300px;display:grid;align-content:end;gap:12px;background:linear-gradient(160deg,#111b31,#080d19);border-color:var(--line-2);box-shadow:0 -24px 60px -30px rgba(0,0,0,.9);transform-origin:50% 0;transform:scale(calc(1 - var(--cover,0) * .05)) rotateX(calc(var(--cover,0) * -5deg));filter:brightness(calc(1 - var(--cover,0) * .4))}
.step .num{font:400 .86rem/1 var(--mono);letter-spacing:.14em;color:var(--cyan);position:absolute;top:26px;left:clamp(26px,3.4vw,44px)}
.step::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(closest-side,rgba(75,141,255,.28),transparent);pointer-events:none}
.step{overflow:hidden}
.step h3{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.1;letter-spacing:-.025em;max-width:16ch}
.step p{color:var(--muted);max-width:46ch}
@media (max-width:900px){:is(#how-it-works,#comment-ca-marche) .wrap{grid-template-columns:1fr}:is(#how-it-works,#comment-ca-marche) .section-head{position:static}.step{min-height:240px}}

/* ---------- Team ---------- */
.badge{display:inline-flex;align-items:center;font:400 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px;vertical-align:middle;margin-left:8px;white-space:nowrap}
.badge-prod{color:var(--ok);background:rgba(61,220,151,.1);box-shadow:0 0 0 1px rgba(61,220,151,.3) inset}
.badge-beta{color:var(--warn);background:rgba(246,196,83,.08);box-shadow:0 0 0 1px rgba(246,196,83,.26) inset}
.role{font:400 .78rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--iris);margin-top:6px}
.meta{font-size:.86rem;color:var(--dim);margin-top:auto;padding-top:14px}
.meta strong{color:var(--muted);font-weight:500}
.boss-card{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(24px,4vw,48px);margin-bottom:14px;background:radial-gradient(900px 400px at 0% 0%,rgba(75,141,255,.2),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border-color:var(--line-2)}
.boss-shot img{width:clamp(110px,15vw,176px);height:clamp(110px,15vw,176px);border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line-2),0 0 0 10px rgba(75,141,255,.08),0 30px 70px -20px rgba(43,212,240,.5)}
.boss-card h3{font-size:clamp(1.6rem,3vw,2.4rem)}
.boss-card p{color:var(--muted);max-width:62ch;margin-top:12px}
.boss-card .meta{font:400 .9rem/1.5 var(--mono);color:var(--cyan);padding-top:16px}
.emp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.emp{padding:24px;display:flex;flex-direction:column;gap:6px;transition:transform .5s var(--ease-out),border-color .3s,box-shadow .5s;transform-style:preserve-3d}
.emp:hover{border-color:var(--line-2);box-shadow:0 30px 70px -40px rgba(43,212,240,.6)}
.emp .shot,.card .shot{width:76px;height:76px !important;border-radius:50%;overflow:hidden;flex:none;margin-bottom:12px;box-shadow:0 0 0 1px var(--line-2),0 0 0 6px rgba(75,141,255,.07)}
.emp .shot img,.card .shot img{width:100%;height:100%;object-fit:cover}
.emp > p,.card p{color:var(--muted);font-size:.96rem;line-height:1.5;margin-top:8px}
.workline{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.workline span{font:400 .7rem/1 var(--mono);color:var(--muted);padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.05)}
.callout{padding:22px 24px;color:var(--muted);font-size:.98rem;margin-top:14px;border-style:dashed}
.callout strong,.callout b{color:var(--text)}
.callout .btn{margin-left:10px;margin-top:10px}
@media (max-width:960px){.emp-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.emp-grid{grid-template-columns:1fr}.boss-card{grid-template-columns:1fr}}

/* ---------- Flow ---------- */
.flow{display:grid;justify-items:center;gap:0;padding:clamp(28px,5vw,64px) 0;border-radius:var(--r-xl);border:1px solid var(--line);background:radial-gradient(700px 360px at 50% 40%,rgba(75,141,255,.16),transparent 70%)}
.flow-goal{font:500 clamp(1.1rem,2.2vw,1.6rem)/1.3 var(--display);padding:16px 26px;border-radius:999px;border:1px solid var(--line-2);background:rgba(8,12,22,.7);text-align:center;margin-inline:16px}
.flow-arrow-v{width:2px;height:56px;background:linear-gradient(180deg,transparent,var(--cyan));position:relative;overflow:hidden}
.flow-arrow-v::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:#fff;animation:drip 2.2s linear infinite}
@keyframes drip{to{top:110%}}
.flow-hub{display:grid;justify-items:center;gap:8px;font:600 1.05rem/1 var(--display)}
.flow-hub img{width:92px;height:92px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line-2),0 0 60px rgba(43,212,240,.5)}
.flow-branches{display:grid;grid-template-columns:repeat(3,minmax(0,240px));gap:14px;padding-inline:16px}
.node{padding:18px;display:flex;gap:12px;align-items:center;font-size:.92rem;color:var(--muted)}
.node img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.node b,.node strong{display:block;color:var(--text);font:600 1rem/1.2 var(--display)}
.flow-result{font:400 .86rem/1 var(--mono);letter-spacing:.06em;color:var(--ok);padding:14px 22px;border-radius:999px;background:rgba(61,220,151,.08);box-shadow:0 0 0 1px rgba(61,220,151,.3) inset;text-align:center;margin-inline:16px;line-height:1.4}
@media (max-width:720px){.flow-branches{grid-template-columns:1fr;width:100%}}

/* ---------- Timeline ---------- */
.tl{position:relative;display:grid;gap:0;max-width:880px;margin-inline:auto}
.tl::before{content:"";position:absolute;left:103px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl::after{content:"";position:absolute;left:103px;top:8px;width:2px;height:calc((100% - 16px) * var(--p,1));background:var(--grad);box-shadow:0 0 18px var(--cyan)}
.tl li{display:grid;grid-template-columns:80px 1fr;gap:48px;padding-block:22px;position:relative}
.tl li::before{content:"";position:absolute;left:98px;top:30px;width:12px;height:12px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--cyan)}
.tl .time{font:400 .92rem/1.6 var(--mono);color:var(--cyan);text-align:right;padding-top:2px}
.tl h3{font-size:1.35rem}
.tl p{color:var(--muted);margin-top:6px}
@media (max-width:600px){.tl::before,.tl::after{left:5px}.tl li{grid-template-columns:1fr;gap:4px;padding-left:28px}.tl li::before{left:0}.tl .time{text-align:left}}

/* ---------- Bento (duo / cells) ---------- */
.duo{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cell{padding:28px;display:flex;flex-direction:column;gap:10px;transition:transform .5s var(--ease-out),border-color .3s}
.cell:hover{border-color:var(--line-2)}
.cell h3{font-size:1.3rem;display:flex;align-items:center;gap:10px}
.cell h3 svg{width:22px;height:22px;color:var(--cyan);flex:none}
.cell p{color:var(--muted);font-size:.98rem}
.cell .mark{color:var(--cyan)}
:is(#trust,#confiance) .duo,#deploy-ai-stack .duo{grid-template-columns:repeat(2,1fr)}
#deploy-ai-stack .duo{margin-bottom:var(--s5)}
#deploy-ai-stack .wrap > p{color:var(--muted);margin-bottom:var(--s4)}
.cell .callout{margin:0}
.cell .callout + .callout{margin-top:12px}
ul.trust{display:grid;gap:14px}
ul.trust li{position:relative;padding-left:26px;color:var(--muted);font-size:.98rem}
ul.trust li::before{content:"";position:absolute;left:4px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok)}
ul.trust b,ul.trust strong{color:var(--text);font-weight:600}
@media (max-width:900px){.duo,:is(#trust,#confiance) .duo,#deploy-ai-stack .duo{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.duo,:is(#trust,#confiance) .duo,#deploy-ai-stack .duo{grid-template-columns:1fr}}

/* Montreal band behind "Built for a business here" */
.band-mtl{isolation:isolate}
.band-mtl::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg) 0%,rgba(4,6,12,.72) 30%,rgba(4,6,12,.9) 70%,var(--bg) 100%),var(--mtl,none) center 30%/cover no-repeat}
.band-mtl .cell{background:rgba(8,12,22,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---------- Approval demo ---------- */
.approval-scene{perspective:1400px}
.approval-demo{max-width:560px;margin-inline:auto;padding:clamp(24px,4vw,36px);display:grid;gap:14px;background:linear-gradient(160deg,#121d35,#080d19);border-color:var(--line-2);box-shadow:0 60px 120px -50px rgba(43,212,240,.5);transform:perspective(1400px) rotateX(calc((1 - var(--p,.5) * 2) * 14deg)) rotateY(calc((1 - var(--p,.5) * 2) * -10deg));will-change:transform}
html.apex-motion .approval-demo[data-r].in{transform:perspective(1400px) rotateX(calc((1 - var(--p,.5) * 2) * 14deg)) rotateY(calc((1 - var(--p,.5) * 2) * -10deg))}
.approval-demo .who{font:400 .78rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.approval-demo .what{font:600 1.6rem/1.15 var(--display);letter-spacing:-.02em}
.approval-demo .field{display:grid;gap:4px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);font-size:.94rem;color:var(--muted)}
.approval-demo .field b,.approval-demo .field strong,.approval-demo .field span:first-child{font:400 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.approval-demo .risk{font:400 .78rem/1.4 var(--mono);color:var(--warn)}
.approval-demo .actions{display:flex;flex-wrap:wrap;gap:8px}
.approval-demo .confirmed{display:none;color:var(--ok);font-weight:600}
.approval-demo.is-done .confirmed{display:block}
.approval-demo.is-done .actions{display:none}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.plan{padding:28px 24px;display:flex;flex-direction:column;gap:12px}
.plan .name{font:600 1.3rem/1 var(--display)}
.plan .who{color:var(--muted);font-size:.92rem;min-height:2.8em}
.plan .amt{font:600 3rem/1 var(--display);letter-spacing:-.04em}
.plan .per{color:var(--dim);font-size:.88rem}
.plan ul{display:grid;gap:10px;margin-block:8px auto;color:var(--muted);font-size:.94rem}
.plan li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.plan li::before{content:"";width:14px;height:8px;border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg);margin-top:5px}
.plan .btn{margin-top:18px;width:100%}
.plan.feature{background:radial-gradient(500px 300px at 50% 0%,rgba(75,141,255,.32),transparent 70%),linear-gradient(180deg,#121d35,#0a1020);border-color:rgba(106,165,255,.55);box-shadow:0 40px 100px -40px rgba(75,141,255,.7)}
.price-note{color:var(--muted);font-size:.96rem;margin-top:var(--s5);max-width:80ch}
@media (max-width:1000px){.price-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.price-grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{padding:0;margin-top:10px;max-width:900px}
.faq summary{cursor:pointer;list-style:none;padding:22px 60px 22px 24px;font:600 1.12rem/1.35 var(--display);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:26px;top:50%;width:10px;height:10px;border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{padding:0 24px 24px;color:var(--muted);max-width:75ch}

/* ---------- Final CTA ---------- */
.final{padding-block:clamp(100px,16vw,220px);text-align:center;overflow:hidden;isolation:isolate;border-top:1px solid var(--line)}
.final::before{content:"";position:absolute;left:50%;bottom:-55%;width:min(1300px,160vw);aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(43,212,240,.3),rgba(75,141,255,.16) 45%,transparent 70%);z-index:-1}
.final .wrap{display:grid;justify-items:center;gap:var(--s4)}
.final h2{font-size:clamp(2.3rem,6vw,4.8rem);max-width:16ch}
.final .lede{margin-inline:auto !important}
.final .cta-row{justify-content:center}
.glow{display:none}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line);padding-block:64px 110px;color:var(--muted);font-size:.94rem}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}
footer.site .brand{padding:0;margin-bottom:16px}
footer.site h3{font:400 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
footer.site ul{display:grid;gap:10px}
footer.site a{color:var(--muted);text-decoration:none}
footer.site a:hover{color:#fff}
.about{max-width:34ch}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:.86rem;color:var(--dim)}
@media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   AI EMPLOYEES PAGE
   ========================================================================== */
.hero-emp{padding-top:calc(var(--nav-h) + 90px);padding-bottom:0;text-align:center;overflow:hidden}
.hero-emp .wrap{display:grid;justify-items:center;gap:var(--s4)}
.hero-emp .eyebrow{margin:0}
.hero-emp .cta-row{justify-content:center}
.hero-emp .cta-note{margin:0}
/* 3D ring of the team — rotates with scroll */
.ring-scene{perspective:1100px;height:clamp(230px,30vw,340px);margin-top:clamp(20px,4vw,48px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.ring{--R:clamp(280px,36vw,520px);position:relative;width:0;height:0;margin:clamp(70px,10vw,110px) auto 0;transform-style:preserve-3d;transform:translateZ(calc(var(--R) * -1)) rotateX(-8deg) rotateY(calc(var(--spin,0) * 1deg));animation:ring 80s linear infinite}
@keyframes ring{to{transform:translateZ(calc(var(--R) * -1)) rotateX(-8deg) rotateY(calc(var(--spin,0) * 1deg + 360deg))}}
.ring img{--sz:clamp(84px,10vw,128px);position:absolute;max-width:none;left:calc(var(--sz) / -2);top:calc(var(--sz) / -2);width:var(--sz);height:var(--sz);border-radius:50%;object-fit:cover;transform:rotateY(calc(var(--n) * (360deg / var(--count)))) translateZ(var(--R));box-shadow:0 0 0 1px var(--line-2),0 20px 50px -10px rgba(43,212,240,.45);backface-visibility:hidden}

.catnav{position:sticky;top:78px;z-index:20;display:flex;gap:8px;overflow-x:auto;padding:8px;margin:0 0 var(--s5);border-radius:999px;border:1px solid var(--line);background:rgba(6,9,17,.85);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);scrollbar-width:none}
.catnav::-webkit-scrollbar{display:none}
.catnav a{flex:none;color:var(--muted);text-decoration:none;font-size:.88rem;font-weight:500;padding:10px 14px;border-radius:999px;white-space:nowrap}
.catnav a:hover,.catnav a.is-on{color:#04060c;background:#fff}
.cat-h{display:flex;align-items:baseline;gap:12px;font-size:clamp(1.5rem,2.6vw,2.1rem);margin:clamp(40px,6vw,72px) 0 var(--s4);scroll-margin-top:150px}
.cat-n{font:400 .84rem/1 var(--mono);color:var(--cyan)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{padding:22px;display:flex;flex-direction:column;transition:transform .5s var(--ease-out),border-color .3s,box-shadow .5s}
.card:hover{border-color:var(--line-2);box-shadow:0 30px 70px -40px rgba(43,212,240,.55)}
.card .top{display:flex;align-items:center;gap:14px}
.card .av{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1px var(--line-2),0 0 0 5px rgba(75,141,255,.07)}
.card h3{font-size:1.14rem}
.card .role{margin-top:4px;font-size:.72rem}
.card.emp{flex-direction:row;gap:20px;align-items:flex-start;padding:26px}
.card.emp .shot{width:96px;height:96px !important;margin:0}
.card.emp .body{display:flex;flex-direction:column;flex:1}
.card.emp .top{display:block}
.card.emp h3{font-size:1.4rem}
@media (max-width:960px){.g3{grid-template-columns:1fr 1fr}.g2{grid-template-columns:1fr}}
@media (max-width:620px){.g3{grid-template-columns:1fr}.card.emp{flex-direction:column}}

/* ==========================================================================
   MOTION (only when JS has confirmed it is running)
   ========================================================================== */
html.apex-motion [data-r]{opacity:0;transform:translate3d(0,28px,0) scale(.985);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--d,0) * 70ms)}
html.apex-motion [data-r="tilt"]{transform:perspective(1000px) rotateX(12deg) translate3d(0,40px,0);transform-origin:50% 100%}
html.apex-motion [data-r].in{opacity:1;transform:none}
html.apex-motion .hero-home .hero-copy > *{animation:rise 1s var(--ease-out) both;animation-delay:calc(var(--d,0) * 90ms + 80ms)}
html.apex-motion .hero-core{animation:core 1.6s var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translate3d(0,26px,0)}}
@keyframes core{from{opacity:0;scale:1.12}}
html.apex-motion .hero-core{transform:translate3d(0,calc(var(--pin,0) * -90px),0)}
html.apex-motion .hero-home .hero-copy{transform:translate3d(0,calc(var(--pin,0) * -24px),0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  html.apex-motion [data-r]{opacity:1;transform:none}
  .deck,.deck-float,.approval-demo,.step{transform:none !important;filter:none !important}
  .ring{transform:translateZ(calc(var(--R) * -1)) rotateX(-8deg)}
}

/* ---------- Small-screen refinements ---------- */
ul.trust li > b:first-child,ul.trust li > strong:first-child{display:block}
@media (max-width:560px){
  header.site .navtools > .btn{display:none}
  .hero-home{padding-top:calc(var(--nav-h) + 48px)}
  .hero-core{top:auto;bottom:18%;width:190vw;opacity:.38}
  .deck-bar span:not(.live):not(.pulse){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .deck-row em{display:none}
  .catnav{border-radius:var(--r);top:74px}
  .step{top:calc(92px + var(--i,0) * 14px)}
}
@media (min-width:861px) and (max-width:1220px){.deck-f1{left:10px;bottom:-16%}.deck-f2{right:10px;top:-14%}}
html{overflow-x:clip}
.nf{min-height:100svh;display:grid;align-content:center;border-top:0}
.nf h1{font-size:clamp(2.4rem,6vw,4.6rem);max-width:16ch}

/* ==========================================================================
   INNER PAGES (services, AI deployment, booking, security)
   ========================================================================== */
main > .hero:not(.hero-home):not(.hero-emp){padding:calc(var(--nav-h) + 96px) 0 clamp(40px,6vw,88px);isolation:isolate;overflow:hidden}
main > .hero:not(.hero-home):not(.hero-emp)::before{content:"";position:absolute;left:50%;top:-40%;width:min(1200px,140vw);aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(75,141,255,.22),rgba(43,212,240,.08) 50%,transparent 72%);z-index:-1;pointer-events:none}
main > .hero:not(.hero-home) .hero-copy{display:grid;gap:var(--s4);justify-items:start;max-width:900px}
main > .hero:not(.hero-home) .hero-copy .eyebrow{margin:0}
main > .hero:not(.hero-home):not(.hero-emp) h1{font-size:clamp(2.4rem,5.6vw,4.4rem)}
.hero .callout{margin-top:var(--s5);max-width:720px}
.crumb,.hero .wrap > p[style]{font:400 .78rem/1.5 var(--mono) !important;letter-spacing:.08em;color:var(--dim) !important}
.crumb a,.hero .wrap > p[style] a{color:var(--cyan);text-decoration:none}
.trust-strip,.svc-filters{display:flex;flex-wrap:wrap;gap:8px}
.svc-filters{margin-bottom:var(--s5)}
.chip,.fchip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--muted);font:500 .9rem/1 var(--body);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip{cursor:default}
.chip b{color:var(--text);font-weight:600}
.fchip:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.fchip.active{background:#fff;color:#04060c;border-color:#fff}
.svc-grid{align-items:stretch}
.card.svc{gap:10px}
.svc-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;background:rgba(75,141,255,.12);box-shadow:0 0 0 1px var(--line-2) inset;margin-bottom:4px}
.svc-feats{display:grid;gap:8px;margin:8px 0 auto;color:var(--muted);font-size:.92rem}
.svc-feats li{position:relative;padding-left:22px}
.svc-feats li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:6px;border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg)}
.card.svc .amt{font:600 1.5rem/1.2 var(--display);letter-spacing:-.02em;margin-top:14px}
.card.svc .per{color:var(--dim);font-size:.86rem}
.card.svc .btn{margin-top:14px;align-self:flex-start}
.cal-wrap{border-radius:var(--r-lg);border:1px solid var(--line-2);overflow:hidden;background:var(--surface)}
.cal-wrap iframe{display:block;width:100%;min-height:720px;border:0}
/* Security page (FR): alternating illustrated rows */
.sec-hero{padding:calc(var(--nav-h) + 96px) 0 clamp(40px,6vw,88px)}
.sec-meta,.sec-note{color:var(--dim);font-size:.9rem;margin-top:var(--s3)}
.sec-row{padding-block:clamp(40px,6vw,80px);border-top:1px solid var(--line)}
.sec-row-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.sec-row.flip .sec-art{order:2}
.sec-art{border-radius:var(--r-lg);border:1px solid var(--line);background:radial-gradient(400px 260px at 50% 40%,rgba(75,141,255,.16),transparent 70%);padding:24px;display:grid;place-items:center;min-height:240px}
.sec-art-svg{width:100%;max-width:360px;height:auto}
.sec-text{display:grid;gap:12px}
.sec-text p{color:var(--muted)}
.sec-final{text-align:center;padding-block:clamp(80px,12vw,160px);border-top:1px solid var(--line)}
@media (max-width:820px){.sec-row-inner{grid-template-columns:1fr}.sec-row.flip .sec-art{order:0}}
.fgrid{grid-template-columns:1.4fr repeat(4,1fr)}
.legal-more{flex-basis:100%;order:3}
@media (max-width:980px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:620px){.fgrid{grid-template-columns:1fr 1fr}}

/* ---------- v2: mobile menu ----------
   The panel used to hang off the menu button (right:-60px). Once the header CTA is hidden on
   phones the button sits mid-bar and the panel opened off the left edge. Anchor it to the bar. */
@media (max-width:940px){
  header.site .navbar{position:relative}
  .menu{position:static;order:3}
  .menu summary{width:44px;height:44px;font-size:1.5rem;line-height:1;border:1px solid var(--line-2);background:rgba(255,255,255,.07)}
  .menu[open] summary{background:#fff;color:#04060c;border-color:#fff}
  .sheet{left:0;right:0;top:calc(100% + 8px);width:auto;max-height:calc(100svh - 110px);overflow-y:auto;padding:12px;gap:4px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
  .sheet a{padding:15px 16px;font-size:1.05rem;min-height:48px;display:flex;align-items:center}
  .sheet a:last-child{margin-top:8px;justify-content:center;background:#fff;color:#04060c;border-radius:999px;font-weight:600}
}
@media (max-width:940px){.navlinks + .navtools{margin-left:auto}}


/* ==========================================================================
   v3 overrides (2026-10-07)
   ========================================================================== */
/* ---- How it works: a four-step timeline instead of tall stacked cards ---- */
:is(#how-it-works,#comment-ca-marche) .wrap{display:block}
:is(#how-it-works,#comment-ca-marche) .section-head{position:static;margin-bottom:clamp(40px,5vw,64px)}
.steps{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;perspective:none;padding-top:30px}
.steps::before{content:"";position:absolute;left:0;right:0;top:30px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(43,212,240,.7),rgba(124,140,255,.55) 60%,rgba(124,140,255,0))}
.steps::after{content:"";position:absolute;top:26px;left:0;width:90px;height:10px;border-radius:10px;background:radial-gradient(closest-side,#fff,rgba(43,212,240,.9) 40%,transparent);filter:blur(1px);animation:step-run 7s cubic-bezier(.5,0,.5,1) infinite}
@keyframes step-run{0%{left:-6%;opacity:0}8%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.step{position:relative !important;top:auto !important;min-height:0;overflow:visible;display:grid;align-content:start;gap:10px;padding:48px 22px 24px;transform:none;filter:none;background:linear-gradient(170deg,rgba(24,38,72,.75),rgba(9,14,28,.75));box-shadow:0 24px 60px -34px rgba(0,0,0,.9);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.step:hover{transform:translateY(-6px);border-color:rgba(43,212,240,.5);box-shadow:0 30px 70px -30px rgba(30,120,255,.55)}
.step::after{display:none}
.step .num{position:absolute;top:-26px;left:20px;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;font:600 .95rem/1 var(--mono);letter-spacing:.04em;color:#fff;background:linear-gradient(160deg,#16305f,#0a1226);border:1px solid rgba(43,212,240,.55);box-shadow:0 0 0 6px rgba(7,12,24,1),0 0 24px rgba(43,212,240,.25);animation:step-lit 7s ease-in-out infinite}
.step:nth-child(2) .num{animation-delay:1.5s}.step:nth-child(3) .num{animation-delay:3s}.step:nth-child(4) .num{animation-delay:4.5s}.step:nth-child(n+5) .num{animation-delay:5.5s}
@keyframes step-lit{0%,22%,100%{background:linear-gradient(160deg,#16305f,#0a1226);box-shadow:0 0 0 6px rgba(7,12,24,1),0 0 24px rgba(43,212,240,.25)}8%{background:linear-gradient(160deg,#2bd4f0,#4b8dff);box-shadow:0 0 0 6px rgba(7,12,24,1),0 0 36px rgba(43,212,240,.8)}}
.steps{counter-reset:step}.step{counter-increment:step}.step .num:empty::before{content:"0" counter(step)}
.step h3{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.2;letter-spacing:-.015em;max-width:none}
.step p{font-size:.95rem;max-width:none}
@media (max-width:620px){
  .steps{grid-template-columns:1fr;gap:16px;padding-top:0;padding-left:34px}
  .steps::before{left:12px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,rgba(43,212,240,.7),rgba(124,140,255,.2))}
  .steps::after{display:none}
  .step{padding:20px 18px 20px 20px}
  .step .num{top:18px;left:-48px;width:38px;height:38px;font-size:.78rem;box-shadow:0 0 0 4px rgba(7,12,24,1)}
}
@media (prefers-reduced-motion:reduce){.steps::after,.step .num{animation:none}.step:hover{transform:none}}

/* ---- seven menu items: collapse to the menu button earlier so they never crowd ---- */
@media (max-width:1100px){.navlinks{display:none}.menu{display:block}.navtools,.navlinks + .navtools{margin-left:auto}}

/* ---- "A request becomes a result": a looping walkthrough of the five steps ---- */
.flow-live{position:relative;padding-top:clamp(64px,8vw,96px)}
.flow-rail{position:absolute;top:22px;left:50%;translate:-50% 0;display:flex;gap:6px;margin:0;padding:6px;list-style:none;border-radius:999px;border:1px solid var(--line);background:rgba(8,12,22,.7);font:400 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.flow-rail li{padding:8px 12px;border-radius:999px;color:#fff;background:rgba(43,212,240,.14)}
.flow-chip{display:block;margin-top:8px;font:400 .68rem/1.3 var(--mono);letter-spacing:.04em;font-style:normal;color:var(--cyan)}
.flow-live .node{flex-wrap:wrap}
.flow-gate{display:grid;gap:6px;width:min(360px,calc(100% - 32px));padding:18px 20px;border-radius:var(--r-lg);border:1px solid rgba(255,180,84,.45);background:linear-gradient(170deg,rgba(40,30,12,.8),rgba(10,14,26,.85));text-align:left}
.flow-gate .k{font:400 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--warn)}
.flow-gate strong{font:600 1.08rem/1.2 var(--display);color:#fff}
.flow-gate small{color:var(--muted);font-size:.82rem}
.flow-gate .row{display:flex;gap:8px;margin-top:8px}
.flow-gate .row b,.flow-gate .row i{font:600 .82rem/1 var(--sans,inherit);font-style:normal;padding:9px 16px;border-radius:999px}
.flow-gate .row b{background:#fff;color:#0a1226;animation:flow-press 15s linear infinite}
.flow-gate .row i{border:1px solid var(--line-2);color:var(--muted)}
.flow-live :is(.s1,.s2,.s3,.s4,.s5){animation:15s linear infinite both}
.flow-live .s1{animation-name:flow-1}.flow-live .s2{animation-name:flow-2}.flow-live .s3{animation-name:flow-3}.flow-live .s4{animation-name:flow-4}.flow-live .s5{animation-name:flow-5}
@keyframes flow-1{0%,2%{opacity:.28;filter:saturate(.3)}7%,94%{opacity:1;filter:none}100%{opacity:.28;filter:saturate(.3)}}
@keyframes flow-2{0%,17%{opacity:.28;filter:saturate(.3)}22%,94%{opacity:1;filter:none}100%{opacity:.28;filter:saturate(.3)}}
@keyframes flow-3{0%,33%{opacity:.28;filter:saturate(.3)}38%,94%{opacity:1;filter:none}100%{opacity:.28;filter:saturate(.3)}}
@keyframes flow-4{0%,51%{opacity:.28;filter:saturate(.3)}56%,94%{opacity:1;filter:none}100%{opacity:.28;filter:saturate(.3)}}
@keyframes flow-5{0%,73%{opacity:.28;filter:saturate(.3)}78%,94%{opacity:1;filter:none}100%{opacity:.28;filter:saturate(.3)}}
@keyframes flow-press{0%,66%{scale:1;box-shadow:none}69%{scale:.92;box-shadow:0 0 0 8px rgba(255,255,255,.18)}72%,100%{scale:1;box-shadow:none}}
.flow-rail li{animation-duration:15s !important}
.flow-rail li.s1,.flow-rail li.s2,.flow-rail li.s3,.flow-rail li.s4,.flow-rail li.s5{filter:none !important}
@media (max-width:620px){.flow-rail{font-size:.54rem;letter-spacing:.02em;gap:0;padding:3px;max-width:calc(100% - 20px)}.flow-rail li{padding:6px 6px}}
@media (prefers-reduced-motion:reduce){.flow-live :is(.s1,.s2,.s3,.s4,.s5),.flow-gate .row b{animation:none !important}}

/* ---- hero: two ways in ---- */
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(640px,100%);margin:clamp(22px,3vw,34px) auto 0}
.path{display:grid;gap:6px;padding:16px 20px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:rgba(8,12,22,.55);text-decoration:none;text-align:left;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.path small{font:400 .7rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.path b{font:600 1.02rem/1.25 var(--display);color:#fff}
.path b::after{content:" →";color:var(--cyan)}
.path:hover{transform:translateY(-3px);border-color:rgba(43,212,240,.5)}
.path-hot{border-color:rgba(43,212,240,.55);background:linear-gradient(160deg,rgba(24,52,104,.75),rgba(8,14,28,.7));box-shadow:0 18px 50px -24px rgba(43,212,240,.7)}
.path-hot small{color:var(--cyan)}
#advisor{scroll-margin-top:96px}
@media (max-width:560px){.paths{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.path:hover{transform:none}}

/* ---- Boss Brain portrait on the team card was oversized and could stretch ---- */
.boss-shot img{width:clamp(84px,9vw,116px);height:clamp(84px,9vw,116px);flex:none}