/* ViVeSecBox webshop — dark-first theme: vivesecbox.com palette × Mira-style scale
   Palette (from vendor CSS): deep #07071A/#090E24 · ink #E7E9F4 · accent cyan #22D3EE
   · indigo #6C7CFF · violet #7C5CFF. Type: Space Grotesk / Inter / IBM Plex Mono. */
:root{
  --bg-warm:#07071A; --bg-muted:#090E24; --bg-dark:#05050F; --bg-dark-alt:#0C1230;
  --card:#0A102C;
  --purple:#22D3EE; --purple-hover:#5EE1F5; --purple-soft:rgba(34,211,238,.10);
  --indigo:#6C7CFF; --violet:#7C5CFF;
  --ink:#E7E9F4; --ink-body:#A6ABCB; --ink-muted:#7A7F9E; --ink-faint:#4A4F6E;
  --chalk:#E7E9F4; --chalk-body:#A6ABCB; --chalk-muted:#7A7F9E;
  --line:rgba(231,233,244,.10); --line-dark:rgba(231,233,244,.14);
  --radius:12px; --maxw:1140px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Space Grotesk",var(--font);
  --mono:"IBM Plex Mono","SF Mono",ui-monospace,Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg-warm);color:var(--ink);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,7,26,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo img{height:26px}
.nav{display:flex;gap:28px;align-items:center;font-size:14.5px;font-weight:500;color:var(--ink-body)}
.nav a:hover{color:var(--ink)}
.nav .btn{padding:9px 18px}
.lang-toggle{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink-muted);cursor:pointer;border:1px solid var(--line-dark);border-radius:8px;padding:5px 12px;background:none;font-family:var(--font)}
.lang-toggle:hover{color:var(--ink);border-color:var(--ink-faint)}
.nav-burger{display:none}

/* Buttons — Mira-sharp, cyan on deep navy */
.btn{display:inline-block;background:var(--purple);color:#07071A;font-weight:600;font-size:15px;padding:13px 26px;border-radius:10px;border:none;cursor:pointer;font-family:var(--font);transition:background .15s,transform .12s,box-shadow .2s}
.btn:hover{background:var(--purple-hover);box-shadow:0 0 28px rgba(34,211,238,.35)}
.btn:active{transform:scale(.975)}
.btn-ghost{background:none;color:var(--ink);border:1.5px solid var(--line-dark)}
.btn-ghost:hover{background:rgba(231,233,244,.06);border-color:var(--ink-muted);box-shadow:none}
.btn-ghost-dark{background:none;color:var(--chalk);border:1.5px solid var(--line-dark)}
.btn-ghost-dark:hover{border-color:var(--chalk);background:none}
.btn-block{display:block;width:100%;text-align:center}

/* Sections */
section{padding:104px 0;position:relative}
.section-dark{background:var(--bg-dark);color:var(--chalk)}
.section-dark .muted{color:var(--chalk-body)}
.section-muted{background:var(--bg-muted)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple);margin-bottom:16px;font-weight:600}
h1{font-family:var(--display);font-size:clamp(40px,6vw,68px);line-height:.98;letter-spacing:-.02em;font-weight:500}
h2{font-family:var(--display);font-size:clamp(30px,4.2vw,46px);line-height:1.04;letter-spacing:-.015em;font-weight:500;margin-bottom:18px}
h3{font-size:19px;font-weight:600;margin-bottom:8px}
.lead{font-size:clamp(17px,2vw,20px);color:var(--ink-body);max-width:58ch}
.section-dark .lead{color:var(--chalk-body)}
.muted{color:var(--ink-muted)}
.small{font-size:13.5px}

/* Glow orbs — the Mira-style atmosphere, in vendor colors */
.hero::before,.configurator::before,.section-dark.glow::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(110px);opacity:.32;pointer-events:none;z-index:0}
.hero::before{top:-180px;right:-140px;background:radial-gradient(closest-side,var(--violet),transparent 70%)}
.configurator::before{bottom:-260px;left:-180px;background:radial-gradient(closest-side,var(--indigo),transparent 70%);opacity:.25}
.section-dark.glow::before{top:-220px;left:35%;background:radial-gradient(closest-side,var(--purple),transparent 70%);opacity:.14}
.hero{padding:120px 0 100px;overflow:hidden}
.hero .lead{margin:22px 0 34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.trustbar{display:flex;gap:34px;flex-wrap:wrap;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.trustbar div{font-size:13.5px;color:var(--ink-muted)}
.trustbar strong{display:block;font-size:15px;color:var(--ink);font-weight:600}

/* Cards & grids */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:border-color .18s,transform .25s cubic-bezier(.2,.6,.2,1),box-shadow .25s}
.card:hover{transform:translateY(-3px);border-color:var(--line-dark)}
.section-dark .card{background:var(--bg-dark-alt);border-color:var(--line)}
.card h3{margin-top:14px}
.card .icon{width:38px;height:38px;border-radius:9px;background:var(--purple-soft);display:flex;align-items:center;justify-content:center;color:var(--purple);font-size:18px}
.step-num{font-family:var(--mono);color:var(--purple);font-size:13px;font-weight:700}

/* Pricing */
.plans{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:22px;align-items:stretch}
.price-card{display:flex;flex-direction:column}
.price-card.featured{border:1.5px solid var(--purple);position:relative;box-shadow:0 0 60px rgba(34,211,238,.12)}
.price-card .flag{position:absolute;top:-13px;left:26px;background:var(--purple);color:#07071A;font-size:12px;font-weight:650;padding:3px 12px;border-radius:8px}
.price{font-family:var(--display);font-size:40px;font-weight:600;letter-spacing:-.02em;margin:12px 0 2px}
.price small{font-size:15px;font-weight:500;color:var(--ink-muted)}
.price-card ul{list-style:none;margin:20px 0 26px;flex:1}
.price-card li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-body)}
.price-card li::before{content:"✓";color:var(--purple);font-weight:700;margin-right:10px}
.price-card.recommended{border-color:var(--purple);box-shadow:0 0 60px rgba(34,211,238,.2)}
.dayone{list-style:none;margin:18px 0 22px}
.dayone li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-body)}
.dayone li::before{content:attr(data-when);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--purple);font-weight:600;display:block;text-transform:uppercase}

/* Compare table */
.compare{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare th,.compare td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.compare th{font-weight:650;background:var(--bg-dark-alt)}
.compare td:not(:first-child),.compare th:not(:first-child){text-align:center}
.compare .yes{color:var(--purple);font-weight:700}
.compare .no{color:var(--ink-faint)}
.table-scroll{overflow-x:auto}

/* Forms */
form{max-width:640px}
.field{margin-bottom:18px}
label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink)}
label .opt{color:var(--ink-muted);font-weight:400}
input,select,textarea{width:100%;font-family:var(--font);font-size:15px;padding:12px 14px;border:1px solid var(--line-dark);border-radius:10px;background:var(--bg-dark-alt);color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--purple)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-body)}
.check input{width:auto;margin-top:4px}
.form-note{font-size:13px;color:var(--ink-muted);margin-top:14px}

/* Order summary */
.order-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:start}
.summary{position:sticky;top:96px}
.summary table{width:100%;font-size:14.5px;border-collapse:collapse}
.summary td{padding:9px 0;border-bottom:1px solid var(--line)}
.summary td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.summary .total td{font-weight:700;font-size:16px;border-bottom:none;padding-top:14px}

/* Footer */
.site-footer{background:var(--bg-dark);color:var(--chalk-body);padding:64px 0 40px;font-size:14px;border-top:1px solid var(--line)}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
.site-footer h4{color:var(--chalk);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.site-footer a{display:block;padding:4px 0;color:var(--chalk-body)}
.site-footer a:hover{color:var(--chalk)}
.footer-base{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--chalk-muted)}

/* Cookie banner */
.cookie-banner{position:fixed;bottom:20px;left:20px;right:20px;max-width:520px;margin:0 auto;background:var(--bg-dark-alt);border:1px solid var(--line-dark);color:var(--chalk-body);border-radius:var(--radius);padding:22px 24px;z-index:100;font-size:14px;box-shadow:0 12px 48px rgba(0,0,0,.5);display:none}
.cookie-banner.show{display:block}
.cookie-banner strong{color:var(--chalk)}
.cookie-actions{display:flex;gap:10px;margin-top:14px}
.cookie-actions .btn{padding:9px 20px;font-size:14px}

/* Notices */
.notice{background:var(--purple-soft);border:1px solid rgba(34,211,238,.25);border-radius:10px;padding:14px 18px;font-size:14px;color:var(--ink-body)}
.notice a{color:var(--purple)}

/* ===== Motion system ===== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
.hero-seq>*{opacity:0;transform:translateY(14px)}
body.loaded .hero-seq>*{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
body.loaded .hero-seq>:nth-child(1){transition-delay:.05s}
body.loaded .hero-seq>:nth-child(2){transition-delay:.15s}
body.loaded .hero-seq>:nth-child(3){transition-delay:.28s}
body.loaded .hero-seq>:nth-child(4){transition-delay:.4s}
body.loaded .hero-seq>:nth-child(5){transition-delay:.5s}
.hero-visual{clip-path:inset(0 100% 0 0 round 12px);transition:clip-path 1s cubic-bezier(.4,.1,.2,1) .35s}
body.loaded .hero-visual{clip-path:inset(0 0 0 0 round 12px)}
.fork a{transition:border-color .18s,transform .25s cubic-bezier(.2,.6,.2,1),box-shadow .25s}
@media (prefers-reduced-motion: reduce){
  .reveal,.hero-seq>*,.hero-visual{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .card:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ===== Journey rail ===== */
.journey{position:relative;display:grid;gap:0}
.jstage{position:relative;padding:44px 0 44px 64px}
.jstage::before{content:"";position:absolute;left:17px;top:0;bottom:0;width:2px;background:var(--line-dark)}
.jstage:first-child::before{top:44px}
.jstage:last-child::before{bottom:auto;height:44px}
.jstage .jdot{position:absolute;left:8px;top:44px;width:20px;height:20px;border-radius:50%;border:2px solid var(--ink-faint);background:var(--bg-muted);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;font-weight:600;color:var(--ink-muted);transition:border-color .4s,color .4s,box-shadow .4s}
.jstage.in .jdot{border-color:var(--purple);color:var(--purple);box-shadow:0 0 14px rgba(34,211,238,.4)}
.jstage .jlabel{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);font-weight:600;display:block;margin-bottom:10px}
.jstage h3{font-family:var(--display);font-size:24px;margin-bottom:10px}
.jstage p{color:var(--ink-body);max-width:58ch}

/* ===== Configurator ===== */
.configurator{background:var(--bg-dark);color:var(--chalk);border-radius:18px;padding:44px;border:1px solid var(--line-dark);overflow:hidden;position:relative}
.configurator>*{position:relative;z-index:1}
.configurator h3{font-family:var(--display);font-size:24px;color:var(--chalk)}
.cq{margin-top:26px}
.cq .cq-label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk-muted);display:block;margin-bottom:10px}
.seg{display:inline-flex;flex-wrap:wrap;gap:8px}
.seg button{font-family:var(--font);font-size:14.5px;font-weight:500;color:var(--chalk-body);background:var(--bg-dark-alt);border:1px solid var(--line-dark);border-radius:9px;padding:10px 20px;cursor:pointer;transition:all .18s}
.seg button:hover{border-color:var(--chalk-muted)}
.seg button.sel{background:var(--purple);border-color:var(--purple);color:#07071A}
.crec{margin-top:34px;border-top:1px solid var(--line-dark);padding-top:28px;display:none;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.crec.show{display:flex;animation:crecIn .5s cubic-bezier(.2,.6,.2,1)}
@keyframes crecIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.crec .cname{font-family:var(--display);font-size:26px;font-weight:600}
.crec .cwhy{color:var(--chalk-body);font-size:14px;max-width:44ch;margin-top:4px}
.crec .cprice{font-family:var(--mono);font-size:30px;font-weight:600;color:var(--chalk)}
.crec .cprice small{font-size:13px;color:var(--chalk-muted);font-family:var(--font)}
@media (prefers-reduced-motion: reduce){.crec.show{animation:none}}

/* ===== Data sovereignty — containment loop ===== */
.sov-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.sov-visual{display:flex;align-items:center;justify-content:center;gap:0;padding:36px 0}
.sov-device{position:relative;width:220px;height:170px;border:2px solid var(--ink);border-radius:16px;background:var(--card);display:flex;align-items:center;justify-content:center;box-shadow:0 0 50px rgba(34,211,238,.12)}
.sov-device .sov-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);position:absolute;bottom:12px}
.sov-orbit{position:absolute;top:50%;left:50%;width:120px;height:80px;margin:-40px 0 0 -60px}
.sov-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--purple);box-shadow:0 0 10px rgba(34,211,238,.8);offset-path:inset(0 round 40px);animation:sovLoop 4.5s linear infinite}
.sov-dot:nth-child(2){animation-delay:-1.5s;opacity:.65}
.sov-dot:nth-child(3){animation-delay:-3s;opacity:.35}
@keyframes sovLoop{from{offset-distance:0%}to{offset-distance:100%}}
.sov-gap{width:84px;display:flex;flex-direction:column;align-items:center;gap:6px}
.sov-gap .gapline{width:100%;height:0;border-top:2px dashed var(--ink-faint);position:relative}
.sov-gap .gapx{font-family:var(--mono);font-weight:600;color:var(--ink-faint);font-size:13px;letter-spacing:.06em}
.sov-cloud{width:110px;height:74px;border:2px dashed var(--ink-faint);border-radius:40px;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
@media (prefers-reduced-motion: reduce){.sov-dot{animation:none;offset-distance:35%}}

/* ===== Memory × AI ===== */
.memory-line{font-family:var(--mono);font-size:13px;color:var(--purple);letter-spacing:.08em}
.mem-flow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink-body)}
.mem-flow .node{border:1px solid var(--line-dark);border-radius:10px;padding:10px 16px;background:var(--card)}
.mem-flow .node.hot{border-color:var(--purple);color:var(--ink);box-shadow:0 0 20px rgba(34,211,238,.15)}
.mem-flow .arrow{color:var(--purple)}

/* ===== Scroll story — Mira-style pinned journey ===== */
.story{background:var(--bg-dark);position:relative}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.story-media{position:sticky;top:64px;height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.story-frame{border-radius:16px;overflow:hidden;border:1px solid var(--line-dark);box-shadow:0 0 80px rgba(34,211,238,.10);aspect-ratio:3/2}
.story-frame img{width:100%;height:100%;object-fit:cover;transform-origin:center;transition:transform 1.1s cubic-bezier(.3,.1,.2,1)}
.story[data-active="2"] .story-frame img{transform:scale(1.65) translateX(16%)}
.story[data-active="3"] .story-frame img{transform:scale(1.7) translateX(-16%) translateY(-4%)}
.story[data-active="4"] .story-frame img{transform:scale(1.04)}
.story-progress{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--chalk-muted)}
.story-progress b{color:var(--purple);font-weight:600}
.story-chapters{display:grid}
.schapter{min-height:92vh;display:flex;flex-direction:column;justify-content:center;opacity:.22;transition:opacity .6s}
.schapter.on{opacity:1}
.schapter .kicker{margin-bottom:12px}
.schapter h2{font-size:clamp(32px,4.6vw,52px);line-height:1;color:var(--chalk)}
.schapter p{color:var(--chalk-body);max-width:52ch;margin-top:14px;font-size:16.5px}
.schapter .btn{margin-top:24px;align-self:flex-start}
@media (prefers-reduced-motion: reduce){
  .story-frame img{transition:none;transform:none!important}
  .schapter{opacity:1;transition:none}
}
@media(max-width:900px){
  .story-grid{grid-template-columns:1fr}
  .story-media{top:64px;height:auto;padding:16px 0;z-index:5;background:var(--bg-dark)}
  .story-frame{aspect-ratio:16/9}
  .schapter{min-height:72vh}
}

/* ===== Handoff ===== */
.handoff{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.handoff-steps{list-style:none;display:grid;gap:0}
.handoff-steps li{position:relative;padding:18px 0 18px 40px;border-bottom:1px solid var(--line-dark)}
.handoff-steps li::before{content:"";position:absolute;left:10px;top:26px;width:8px;height:8px;border-radius:2px;background:var(--purple);transform:rotate(45deg)}
.handoff-steps strong{display:block;color:var(--chalk);font-size:15.5px}
.handoff-steps span{font-size:13.5px;color:var(--chalk-body)}
.handoff-steps .hwhen{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--purple);font-weight:600}

/* ===== Air-gap divider ===== */
.airgap{display:flex;align-items:center;gap:0;margin:0 auto;max-width:var(--maxw);padding:0 24px}
.airgap::before,.airgap::after{content:"";flex:1;height:1px;background:var(--line-dark)}
.airgap::before{margin-right:28px}
.airgap::after{margin-left:28px}
.airgap span{width:8px;height:8px;border-radius:2px;background:var(--purple);transform:rotate(45deg);box-shadow:0 0 12px rgba(34,211,238,.5)}

/* ===== Hero grid / outcomes / fork / FAQ ===== */
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:52px;align-items:center}
.product-shot{border-radius:var(--radius);border:1px solid var(--line-dark);overflow:hidden}
.product-shot img{width:100%;height:auto}
.hero-price-line{font-family:var(--mono);font-size:14px;color:var(--ink-body);margin-top:18px}
.hero-price-line strong{color:var(--ink)}
.outcomes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden}
.outcome{padding:24px 26px;border-left:1px solid var(--line)}
.outcome:first-child{border-left:none}
.outcome .when{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);font-weight:600;display:block;margin-bottom:8px}
.outcome strong{display:block;font-size:15px;line-height:1.35;margin-bottom:4px}
.outcome span.d{font-size:13px;color:var(--ink-muted)}
.fork{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.fork a{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:34px}
.fork a:hover{border-color:var(--purple);box-shadow:0 0 40px rgba(34,211,238,.12)}
.fork .kicker{margin-bottom:8px}
.fork h3{font-family:var(--display);font-size:22px}
.fork p{color:var(--ink-muted);font-size:14.5px;margin:8px 0 16px}
.fork .go{font-weight:600;color:var(--purple);font-size:15px}
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16px;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--purple);font-size:20px;font-weight:600}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 18px;color:var(--ink-body);font-size:15px;max-width:62ch}

@media(max-width:900px){
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .order-layout{grid-template-columns:1fr}
  .summary{position:static}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .hero-grid,.sov-grid,.handoff{grid-template-columns:1fr}
  .outcomes{grid-template-columns:1fr 1fr}
  .outcome{border-left:none;border-top:1px solid var(--line)}
  .outcome:nth-child(-n+2){border-top:none}
  .plans{grid-template-columns:1fr}
  .plans .price-card.featured{order:-1}
  .fork{grid-template-columns:1fr}
  .configurator{padding:30px 22px}
  .sov-visual{transform:scale(.85)}
}
@media(max-width:640px){
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg-warm);border-bottom:1px solid var(--line);flex-direction:column;padding:18px 24px;align-items:flex-start;gap:16px}
  .nav.open{display:flex}
  .nav-burger{display:block;background:none;border:none;font-size:24px;cursor:pointer;color:var(--ink)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  section{padding:64px 0}
}

/* ═════════ JOURNEY SITE — "From exposed to immune" components ═════════ */

/* Focus visibility (acceptance #5) */
:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:6px}

/* Acts */
.act{position:relative;overflow:hidden}
.act-2{background:var(--bg-dark)}
.act-2::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(110px);opacity:.16;pointer-events:none;top:-160px;right:-160px;background:radial-gradient(closest-side,#E5484D,transparent 70%)}
.warn{color:#F2555A}

/* Mechanic A — journey spine (desktop) */
.jrail{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:0;align-items:flex-start}
.jrail::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:var(--line-dark)}
.jrail .jfill{position:absolute;left:9px;top:10px;width:2px;background:linear-gradient(180deg,var(--purple),var(--indigo));height:0;transition:height .4s ease;box-shadow:0 0 8px rgba(34,211,238,.5)}
.jrail a{position:relative;display:flex;align-items:center;gap:10px;padding:14px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-muted);text-transform:uppercase}
.jrail a .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--ink-faint);background:var(--bg-warm);z-index:1;transition:border-color .3s,box-shadow .3s}
.jrail a .lbl{opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;background:var(--bg-dark-alt);border:1px solid var(--line-dark);border-radius:7px;padding:4px 10px}
.jrail a:hover .lbl,.jrail a.on .lbl{opacity:1;transform:none}
.jrail a.on .dot{border-color:var(--purple);box-shadow:0 0 14px rgba(34,211,238,.55)}
.jrail a.on{color:var(--purple)}
/* Mobile: top progress bar */
.jbar{display:none;position:sticky;top:64px;z-index:49;height:3px;background:var(--line)}
.jbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--indigo));transition:width .3s}

/* Mechanic B — the plan that builds itself */
.plan-dock{position:fixed;right:22px;bottom:22px;z-index:70;width:250px;border:1.5px dashed var(--ink-faint);border-radius:14px;background:rgba(9,14,36,.92);backdrop-filter:blur(10px);padding:16px;transition:border-color .4s,box-shadow .4s}
.plan-dock.filling{border-style:solid;border-color:var(--line-dark)}
.plan-dock.done{border-color:var(--purple);box-shadow:0 0 40px rgba(34,211,238,.25)}
.plan-dock h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-muted);margin-bottom:10px}
.plan-dock .chips{display:flex;flex-wrap:wrap;gap:6px;min-height:24px}
.plan-dock .empty-hint{font-size:11.5px;color:var(--ink-faint);font-style:italic}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink);background:var(--purple-soft);border:1px solid rgba(34,211,238,.3);border-radius:6px;padding:3px 8px;white-space:nowrap;animation:chipIn .5s cubic-bezier(.2,.6,.2,1)}
@keyframes chipIn{from{opacity:0;transform:translateY(14px) scale(.7)}to{opacity:1;transform:none}}
.chip-fly{position:fixed;z-index:80;pointer-events:none;transition:all .6s cubic-bezier(.4,.1,.2,1)}
.plan-dock .goto{display:none;margin-top:12px}
.plan-dock.done .goto{display:block}
@media (prefers-reduced-motion: reduce){.chip{animation:none}.chip-fly{display:none}}

/* Network diagram (SVG) */
.netmap{width:100%;height:auto}
.netmap .nd{fill:var(--bg-dark-alt);stroke:var(--ink-faint);stroke-width:1.5;transition:stroke .5s,fill .5s}
.netmap .nl{stroke:var(--ink-faint);stroke-width:1.2;opacity:.7;transition:stroke .5s,opacity .5s}
.netmap text{font-family:var(--mono);font-size:9px;fill:var(--ink-muted);letter-spacing:.06em;text-transform:uppercase}
.netmap .pulse .nl{animation:lineWarn 2.6s ease-in-out infinite}
@keyframes lineWarn{0%,100%{stroke:var(--ink-faint)}50%{stroke:#E5484D;opacity:1}}
.netmap.hit .nl{stroke:#E5484D;opacity:1}
.netmap.hit .nd{stroke:#E5484D}
.netmap .lock{opacity:0;transition:opacity .5s;fill:#E5484D;font-size:11px}
.netmap.hit .lock{opacity:1}
.netmap .bak.dead line{stroke:#E5484D;stroke-width:2}
.netmap .dead-x{opacity:0;stroke:#E5484D;stroke-width:2.5;transition:opacity .4s}
.netmap.hit .dead-x{opacity:1}
.netmap .vsb{opacity:0;transition:opacity .7s}
.netmap.healed .vsb{opacity:1}
.netmap.healed .nl{stroke:var(--ink-faint);animation:none;opacity:.7}
.netmap.healed .nd{stroke:var(--purple);fill:var(--card)}
.netmap.healed .lock,.netmap.healed .dead-x{opacity:0}
.netmap .relit{stroke:var(--purple)!important;filter:drop-shadow(0 0 6px rgba(34,211,238,.6))}
@media (prefers-reduced-motion: reduce){.netmap .pulse .nl{animation:none}}

/* Downtime ticker */
.ticker{font-family:var(--mono);font-size:clamp(28px,4vw,44px);font-weight:600;color:#F2555A;font-variant-numeric:tabular-nums}
.ticker small{font-size:14px;color:var(--chalk-muted);font-weight:400}

/* Recovery scrubber */
.scrubber{background:var(--card);border:1px solid var(--line-dark);border-radius:14px;padding:28px}
.scrubber .clock{font-family:var(--mono);font-size:clamp(34px,5vw,54px);font-weight:600;color:var(--purple);font-variant-numeric:tabular-nums}
.scrubber input[type=range]{width:100%;margin:18px 0 6px;accent-color:#22D3EE;height:6px;cursor:ew-resize}
.scrubber .ends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--ink-muted);letter-spacing:.08em}
.scrubber blockquote{margin-top:18px;font-size:15.5px;color:var(--ink-body);border-left:2px solid var(--purple);padding-left:14px;font-style:italic}

/* 6-in-1 reveal */
.sixin1{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sixin1 .mod{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;font-size:13.5px}
.sixin1 .mod b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.sixin1 .mod span{color:var(--ink-muted);font-size:12.5px}
.ghosts{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.ghosts span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-faint);border:1px dashed var(--ink-faint);border-radius:7px;padding:5px 10px;text-decoration:line-through;opacity:.8;transition:opacity 1s}
.in .ghosts span{opacity:.3}

/* Stat bars (11% vs 41%) */
.barcmp{display:grid;gap:14px;max-width:520px}
.barcmp .row{display:grid;grid-template-columns:130px 1fr 48px;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-body)}
.barcmp .bar{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.barcmp .bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--indigo),var(--purple));transition:width 1.1s cubic-bezier(.3,.1,.2,1) .2s}
.in .barcmp .bar i{width:var(--w)}
.barcmp .val{font-family:var(--mono);color:var(--purple);font-weight:600}
@media (prefers-reduced-motion: reduce){.barcmp .bar i{width:var(--w);transition:none}.ghosts span{opacity:.3;transition:none}}

/* AI module cards ("hire your coworkers") */
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.modcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;cursor:pointer;text-align:left;font-family:var(--font);transition:border-color .2s,box-shadow .25s,transform .25s;position:relative}
.modcard:hover{transform:translateY(-3px)}
.modcard .flag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--purple);border:1px solid rgba(34,211,238,.35);border-radius:5px;padding:2px 7px;position:absolute;top:14px;right:14px}
.modcard b{display:block;font-size:15px;color:var(--ink);margin-bottom:5px;padding-right:60px}
.modcard .bestfor{font-size:12.5px;color:var(--ink-muted);display:block;margin-bottom:10px}
.modcard .outcome{font-family:var(--mono);font-size:12px;color:var(--purple);letter-spacing:.02em}
.modcard.hired,.modcard.locked{border-color:var(--purple);box-shadow:0 0 26px rgba(34,211,238,.16)}
.modcard.locked{cursor:default}
.modcard .hirestate{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-faint);display:block;margin-top:12px;text-transform:uppercase}
.modcard.hired .hirestate{color:var(--purple)}

/* Spec strip */
.specstrip{display:flex;gap:26px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--ink-body);border:1px solid var(--line-dark);border-radius:10px;padding:14px 20px;background:var(--bg-dark-alt)}
.specstrip b{color:var(--purple)}

/* Act 5 plan area */
.act5-plan{max-width:820px;margin:0 auto}
.risk-row{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;font-size:13.5px;color:var(--ink-muted);margin-top:26px}
.risk-row span::before{content:"✓ ";color:var(--purple);font-weight:700}

/* Billing toggle (journey site uses monthly/annual −10%) */
.billing-toggle{display:inline-flex;border:1px solid var(--line-dark);border-radius:10px;padding:4px;background:var(--bg-dark-alt);margin:26px 0 10px;gap:2px}
.billing-toggle button{border:none;background:none;font-family:var(--font);font-size:14px;font-weight:600;padding:8px 20px;border-radius:8px;cursor:pointer;color:var(--ink-muted)}
.billing-toggle button.active{background:var(--purple);color:#07071A}
.save-badge{color:var(--purple);font-weight:650;font-size:13px}

@media(max-width:1240px){.jrail{display:none}.jbar{display:block}}
@media(max-width:900px){
  .mods{grid-template-columns:1fr 1fr}
  .sixin1{grid-template-columns:1fr 1fr}
  .plan-dock{right:0;left:0;bottom:0;width:auto;border-radius:14px 14px 0 0;border-bottom:none}
}
@media(max-width:640px){.sixin1{grid-template-columns:1fr}.mods{grid-template-columns:1fr}}

/* ═════════ Product-first components ═════════ */
/* What you get — the two boxes, real photos */
.whatget{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.getcard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.getcard .shot{aspect-ratio:3/2;overflow:hidden;background:#05050F}
.getcard .shot img{width:100%;height:100%;object-fit:cover}
.getcard .body{padding:26px}
.getcard .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);font-weight:600}
.getcard h3{font-family:var(--display);font-size:22px;margin:8px 0 6px}
.getcard p{color:var(--ink-body);font-size:14.5px}
.getcard ul{list-style:none;margin:14px 0 0}
.getcard li{padding:6px 0;font-size:13.5px;color:var(--ink-body);border-top:1px solid var(--line)}
.getcard li::before{content:"→ ";color:var(--purple)}
.plus-badge{display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:26px;color:var(--purple)}

/* Value tiles */
.vtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.vtile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px}
.vtile .big{font-family:var(--display);font-size:30px;color:var(--ink);line-height:1;margin-bottom:8px}
.vtile .big.cyan{color:var(--purple)}
.vtile p{font-size:13.5px;color:var(--ink-body)}

/* Section intro helper */
.sec-intro{max-width:60ch}

@media(max-width:900px){.whatget{grid-template-columns:1fr}.vtiles{grid-template-columns:1fr 1fr}.plus-badge{padding:8px 0}}
@media(max-width:640px){.vtiles{grid-template-columns:1fr 1fr}}

/* 4-tier pricing grid */
.plans.p4{grid-template-columns:repeat(4,1fr)}
.plans.p4 .price{font-size:32px}
@media(max-width:1024px){.plans.p4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.plans.p4{grid-template-columns:1fr}.plans.p4 .price-card.featured{order:0}}

/* ═════════ Team audit fixes (a11y + mobile UX) ═════════ */
/* Skip link (WCAG 2.4.1) */
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--purple);color:#07071A;padding:10px 16px;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}
/* AA-compliant faint text token (was #4A4F6E @ 2.35:1 → #868CAB @ ~5.7:1) */
:root{--ink-faint-text:#868CAB}
.compare .no{color:var(--ink-faint-text)}
.modcard .hirestate{color:var(--ink-faint-text)}
.plan-dock .empty-hint{color:var(--ink-faint-text)}
input::placeholder,textarea::placeholder{color:var(--ink-faint-text)}
/* Resting input border contrast (WCAG 1.4.11 → ~4:1) */
input,select,textarea{border-color:#6E7396}
/* Keyboard: reveal journey-rail label on focus too */
.jrail a:focus-visible .lbl{opacity:1;transform:none}
/* Mobile UX: product photo first in hero; hide empty plan-dock; larger diagram labels */
@media(max-width:900px){
  .hero-grid{display:flex;flex-direction:column}
  .hero-visual{order:-1;margin-bottom:20px}
  .plan-dock:not(.done){display:none}
  .netmap text{font-size:12px}
}