/* ============================================================
   inovasys.ai — Think & Automate
   Same design language as inovasys.ma. Differentiated by content,
   system behaviour and dark surface weight — not by a new identity.
   ============================================================ */

:root{
  --indigo:#0A1F44;
  --indigo-deep:#06142F;
  --night:#1E3A8A;
  --cyan-blue:#00B4D8;
  --cyan-green:#00E5C0;
  --ink:#0F172A;
  --grad:linear-gradient(90deg,#1E3A8A 0%,#00B4D8 55%,#00E5C0 100%);
  --grad-v:linear-gradient(180deg,#1E3A8A 0%,#00B4D8 55%,#00E5C0 100%);

  --paper:#FFFFFF;
  --paper-alt:#F6F8FB;
  --rule:#E3E8F0;
  --rule-strong:#CBD5E1;
  --muted:#4A5A74;
  --muted-2:#5B6B85;

  --rule-dark:rgba(255,255,255,.14);
  --rule-dark-2:rgba(255,255,255,.07);
  --muted-dark:#94A3BE;
  --panel:#0D2450;

  --ui:'Inter',system-ui,-apple-system,sans-serif;
  --mark:'Montserrat',system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(20px,5vw,80px);
  --max:1440px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--ui);font-weight:400;font-size:16px;line-height:1.5;
  color:#E8EDF5;background:var(--indigo);
  -webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}

body[data-lang="en"] [data-fr],
body[data-lang="fr"] [data-en]{display:none!important}

a:not([class]){color:var(--cyan-green);text-decoration:underline;text-underline-offset:3px}
a:not([class]):hover{color:#fff}

/* ---------- Primitives ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sec{position:relative;padding:clamp(72px,9vw,140px) 0}
.sec--light{background:var(--paper);color:var(--ink)}
.sec--alt{background:var(--paper-alt);color:var(--ink)}
.sec--deep{background:var(--indigo-deep)}

.eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-green);margin:0}
.sec--light .eyebrow,.sec--alt .eyebrow{color:var(--night)}

h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.07;color:#fff}
.sec--light h1,.sec--light h2,.sec--light h3,.sec--light h4,
.sec--alt h1,.sec--alt h2,.sec--alt h3,.sec--alt h4{color:var(--ink)}
h1{font-size:clamp(2.2rem,4.3vw,3.85rem)}
h2{font-size:clamp(1.8rem,3.2vw,2.9rem)}
h3{font-size:clamp(1.1rem,1.45vw,1.45rem);letter-spacing:-.02em}
h4{font-size:1rem;letter-spacing:-.012em}

.lead{font-size:clamp(1rem,1.2vw,1.1875rem);line-height:1.6;color:var(--muted-dark)}
.sec--light .lead,.sec--alt .lead{color:var(--muted)}
.sm{font-size:.9375rem;line-height:1.6;color:var(--muted-dark)}
.sec--light .sm,.sec--alt .sm{color:var(--muted)}
.xs{font-size:.8125rem;line-height:1.55;color:var(--muted-dark)}
.sec--light .xs,.sec--alt .xs{color:var(--muted)}

.sig{display:block;height:2px;width:72px;background:var(--grad)}
.klabel{font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark);display:block}
.sec--light .klabel,.sec--alt .klabel{color:var(--muted-2)}
.mono{font-family:var(--mono);font-size:.75rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* pending-validation token — never manufacture credibility */
.tbv{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan-green);border:1px dashed rgba(255,255,255,.28);
  background:rgba(255,255,255,.04);padding:5px 9px;
}
.tbv::before{content:"";width:5px;height:5px;background:var(--grad);flex:none}
.sec--light .tbv,.sec--alt .tbv{color:var(--night);border-color:var(--rule-strong);background:rgba(30,58,138,.03)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 26px;
  font-size:.9375rem;font-weight:600;border:1px solid transparent;border-radius:2px;
  min-height:48px;white-space:nowrap;position:relative;
  transition:background .18s,border-color .18s,color .18s;
}
.btn .arw{transition:transform .18s}
.btn:hover .arw{transform:translateX(3px)}
.btn--fill{background:#fff;color:var(--indigo)}
.btn--fill:hover{background:#E4EDF8}
.btn--fill::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .28s}
.btn--fill:hover::after{transform:scaleX(1)}
.btn--line{border-color:rgba(255,255,255,.32);color:#fff}
.btn--line:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn--dark{background:var(--indigo);color:#fff}
.btn--dark:hover{background:var(--night)}
.btn--darkline{border-color:var(--rule-strong);color:var(--ink)}
.btn--darkline:hover{border-color:var(--indigo)}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mark);font-weight:700;font-size:1.3125rem;letter-spacing:-.03em;text-transform:lowercase}
.logo,.logo--light{color:#fff}
.logo--dark{color:var(--ink)}
.logo .mono-mark{width:2.1em;height:1.65em;flex:none}
.logo .mono-mark svg{width:100%;height:100%;overflow:visible}
.logo .tld{font-family:var(--ui);font-weight:500;letter-spacing:-.01em;opacity:.55}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:80;background:rgba(10,31,68,.9);backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);border-bottom:1px solid var(--rule-dark)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:28px;height:76px}
.nav{display:flex;align-items:center;gap:2px}
.nav a{padding:10px 14px;font-size:.9375rem;font-weight:500;position:relative}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.nav a:hover::after{transform:scaleX(1)}
.hdr__side{display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;border:1px solid var(--rule-dark);border-radius:2px;overflow:hidden}
.lang button{padding:7px 11px;font-size:.75rem;font-weight:600;letter-spacing:.06em;color:var(--muted-dark)}
body[data-lang="en"] .lang button[data-lang-set="en"],
body[data-lang="fr"] .lang button[data-lang-set="fr"]{background:#fff;color:var(--indigo)}
.burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;border:1px solid var(--rule-dark);border-radius:2px}
.burger svg{width:20px;height:20px}

.mnav{position:fixed;inset:0;z-index:200;background:var(--indigo-deep);padding:22px var(--pad) 48px;overflow-y:auto;display:none}
.mnav.is-open{display:block}
.mnav__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
.mnav__x{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule-dark);border-radius:2px}
.mnav__x svg{width:20px;height:20px}
.mnav li{border-bottom:1px solid var(--rule-dark)}
.mnav li a{display:block;padding:19px 2px;font-size:1.0625rem;font-weight:600;min-height:48px}
.mnav__cta{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.mnav__cta .btn{justify-content:center}
@media(min-width:1041px){.mnav{display:none!important}}

/* ============================================================
   THE GRAMMAR — signal → understand → decide → act → measure
   One component, three fidelities. This is the reusable signature:
   it must read the same in a hero, a case row, a deck or a product UI.
   Stage colour is semantic, from the signature gradient:
     input        → night blue    #1E3A8A
   intelligence   → blue cyan     #00B4D8
     action       → green cyan    #00E5C0
   ============================================================ */
.gram{position:relative}
.gram__rail{position:absolute;left:0;right:0;top:13px;height:1px;background:var(--rule-dark);z-index:0}
.sec--light .gram__rail,.sec--alt .gram__rail{background:var(--rule)}
.gram__fill{position:absolute;left:0;top:13px;height:1px;background:var(--grad);z-index:0;width:100%}
.js .gram__fill{width:0;transition:width 1.9s cubic-bezier(.22,.61,.36,1) .15s}
.js .is-in .gram__fill,.js .gram.is-in .gram__fill{width:100%}

.gram__stages{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.stg{min-width:0}
.stg__node{
  width:27px;height:27px;border-radius:50%;border:1px solid var(--rule-dark);
  background:var(--indigo);display:flex;align-items:center;justify-content:center;
  font-size:.625rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted-dark);
  transition:border-color .5s,color .5s,box-shadow .5s;
}
.sec--light .stg__node,.sec--alt .stg__node{background:#fff;border-color:var(--rule-strong);color:var(--muted-2)}
.sec--alt .stg__node{background:var(--paper-alt)}
.stg{--accent:#1E3A8A}
.stg:nth-child(2),.stg:nth-child(3){--accent:#00B4D8}
.stg:nth-child(4),.stg:nth-child(5){--accent:#00E5C0}
.is-in .stg__node{border-color:var(--accent);color:#fff}
.sec--light .is-in .stg__node,.sec--alt .is-in .stg__node{color:var(--night)}
.is-in .stg:nth-child(5) .stg__node{background:var(--accent);color:var(--indigo);border-color:var(--accent)}

.stg__name{
  display:block;margin-top:16px;font-size:.6875rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
}
.sec--light .stg__name,.sec--alt .stg__name{color:var(--night)}
.sec--light .stg:nth-child(n+4) .stg__name,.sec--alt .stg:nth-child(n+4) .stg__name{color:#0A7A67}
.stg__q{display:block;margin-top:8px;font-size:.8125rem;line-height:1.5;color:var(--muted-dark)}
.sec--light .stg__q,.sec--alt .stg__q{color:var(--muted)}

/* ---- Fidelity A: full — carries a real payload per stage ---- */
.gram--full .gram__stages{gap:clamp(12px,1.4vw,20px)}
.gram--full .stg__panel{
  margin-top:18px;border:1px solid var(--rule-dark);background:var(--panel);
  padding:16px 16px 18px;min-height:196px;display:flex;flex-direction:column;gap:10px;
}
.gram--full .stg__panel .pk{font-size:.5625rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-dark)}
.gram--full .stg__panel .pv{font-size:.8125rem;line-height:1.45;color:#DCE5F2}
.gram--full .stg__panel .pv strong{font-weight:600;color:#fff}
/* signal readings */
.sigrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--rule-dark-2)}
.sigrow:last-child{border-bottom:0}
.sigrow .n{font-family:var(--mono);font-size:.6875rem;color:var(--muted-dark)}
.sigrow .v{font-family:var(--mono);font-size:.6875rem;color:#fff}
.sigrow .v.hot{color:var(--cyan-green)}
/* confidence / reasoning */
.meter{height:3px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.meter i{position:absolute;left:0;top:0;bottom:0;background:var(--grad);width:var(--w,60%)}
.js .meter i{width:0;transition:width 1.1s cubic-bezier(.22,.61,.36,1) .8s}
.js .is-in .meter i{width:var(--w,60%)}
/* human-in-the-loop states */
.hitl{display:flex;flex-direction:column;gap:7px}
.hitl li{display:flex;align-items:center;gap:9px;font-size:.75rem;color:#DCE5F2;padding:5px 0}
.hitl .dot{width:7px;height:7px;flex:none;border:1px solid var(--muted-dark)}
.hitl .dot--auto{background:var(--cyan-green);border-color:var(--cyan-green)}
.hitl .dot--rev{background:var(--cyan-blue);border-color:var(--cyan-blue)}
.hitl .dot--esc{background:none;border-color:var(--muted-dark)}
.hitl .st{margin-left:auto;font-size:.5625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}
/* measured result — always explicitly unverified */
.resrow{display:flex;flex-direction:column;gap:7px;padding:7px 0;border-bottom:1px solid var(--rule-dark-2)}
.resrow:last-child{border-bottom:0}
.resrow .rl{font-size:.75rem;color:#DCE5F2;line-height:1.4}

/* ---- Fidelity B: row — compact, for repeating case studies ---- */
.gram--row .gram__stages{gap:clamp(10px,1.2vw,18px)}
.gram--row .stg__node{width:22px;height:22px;font-size:.5625rem}
.gram--row .gram__rail,.gram--row .gram__fill{top:11px}
.gram--row .stg__name{margin-top:13px;font-size:.625rem}
.gram--row .stg__body{margin-top:8px;padding-top:10px;border-top:1px solid var(--rule-dark);font-size:.8125rem;line-height:1.45;color:#DCE5F2}
.sec--light .gram--row .stg__body,.sec--alt .gram--row .stg__body{border-top-color:var(--rule);color:var(--muted)}
.gram--row .stg__body .tbv{margin-top:9px}

/* ---- Fidelity C: spine — vertical, for the method ---- */
.gram--spine .gram__rail{left:13px;right:auto;top:0;bottom:0;height:auto;width:1px}
.gram--spine .gram__fill{left:13px;top:0;width:1px;height:100%}
.js .gram--spine .gram__fill{height:0;width:1px;transition:height 2s cubic-bezier(.22,.61,.36,1) .15s}
.js .gram--spine.is-in .gram__fill{height:100%}
.gram--spine .gram__stages{grid-template-columns:1fr;gap:0}
.gram--spine .stg{display:grid;grid-template-columns:27px minmax(0,.42fr) minmax(0,1fr);gap:clamp(18px,2.6vw,44px);padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--rule-dark)}
.sec--light .gram--spine .stg,.sec--alt .gram--spine .stg{border-bottom-color:var(--rule)}
.gram--spine .stg:last-child{border-bottom:0}
.gram--spine .stg__name{margin-top:4px}
.gram--spine .stg__q{margin-top:6px}
.gram--spine .stg__out{padding-top:4px}
.gram--spine .stg__out .klabel{margin-bottom:8px}
.gram--spine .stg__out p{font-size:.875rem;line-height:1.55;color:#DCE5F2}
.sec--light .gram--spine .stg__out p,.sec--alt .gram--spine .stg__out p{color:var(--muted)}

/* ============================================================
   01 — HERO
   ============================================================ */
.hero{padding:clamp(52px,6vw,88px) 0 0;overflow:hidden}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--grad);opacity:.5}
.hero__head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(52px,6vw,84px)}
.hero h1{margin:22px 0 0;max-width:20ch}
.hero__head .lead{max-width:46ch}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.gramhead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:22px;margin-bottom:clamp(28px,3vw,40px);border-bottom:1px solid var(--rule-dark)}
.sec--light .gramhead,.sec--alt .gramhead{border-bottom-color:var(--rule)}
.gramhead h2{font-size:clamp(1.15rem,1.5vw,1.4rem)}
.gramhead .note{font-size:.8125rem;color:var(--muted-dark);max-width:46ch}
.sec--light .gramhead .note,.sec--alt .gramhead .note{color:var(--muted)}

/* ============================================================
   02 — DEMO vs PRODUCTION
   ============================================================ */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(40px,5vw,64px)}
.split2__c{background:var(--paper);padding:clamp(26px,3vw,40px)}
.split2__c--demo{background:var(--paper-alt)}
.split2__c .klabel{margin-bottom:14px}
.split2__c h3{margin-bottom:20px}
.split2__c--prod{position:relative}
.split2__c--prod::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-v)}
.chk{display:flex;flex-direction:column}
.chk li{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:11px 0;border-top:1px solid var(--rule);font-size:.9375rem;color:var(--muted);align-items:start}
.chk li:first-child{border-top:0}
.chk li .m{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:700;margin-top:1px}
.chk li .m--no{color:var(--muted-2);border:1px solid var(--rule-strong)}
.chk li .m--yes{color:#fff;background:var(--night)}
.chk li strong{color:var(--ink);font-weight:600}

/* ============================================================
   03 — SOLUTIONS
   ============================================================ */
.sol{border-top:1px solid var(--rule)}
.sol__row{
  display:grid;grid-template-columns:56px minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(20px,3vw,48px);padding:clamp(26px,3.2vw,40px) 0;border-bottom:1px solid var(--rule);
  position:relative;transition:background .2s;
}
.sol__row::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.sol__row:hover::before{transform:scaleX(1)}
.sol__row:hover{background:rgba(30,58,138,.014)}
.sol__i{font-size:.6875rem;font-weight:600;letter-spacing:.14em;color:var(--muted-2);padding-top:6px;font-variant-numeric:tabular-nums}
.sol__t h3{margin-bottom:12px}
.sol__t p{font-size:.9375rem;line-height:1.6;color:var(--muted);max-width:36ch}
.sol__env{align-self:start;width:100%;border-left:1px solid var(--rule);padding-left:clamp(18px,2.4vw,30px)}
.sol__env .klabel{margin-bottom:12px}
.sol__env ul{display:grid;grid-template-columns:1fr 1fr;gap:9px 20px}
.sol__env li{font-size:.875rem;color:var(--ink);display:flex;gap:9px;line-height:1.4}
.sol__env li::before{content:"";width:3px;height:12px;background:var(--night);opacity:.35;flex:none;margin-top:4px}
.sol__env li.is-key::before{background:var(--grad);opacity:1}
.gov{border:1px dashed var(--rule-strong);background:rgba(30,58,138,.025);padding:22px 26px;display:flex;gap:18px;margin-top:clamp(36px,4vw,56px)}
.gov__bar{width:3px;align-self:stretch;background:var(--grad-v);flex:none}
.gov p{font-size:.9375rem;line-height:1.6;color:var(--muted)}
.gov strong{color:var(--ink);font-weight:600}

/* ============================================================
   04 — METHOD  /  05 — USE CASES
   ============================================================ */
.mhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(44px,5vw,72px)}
.uc{border-top:1px solid var(--rule-dark);margin-top:clamp(36px,4vw,56px)}
.uc__item{border-bottom:1px solid var(--rule-dark);padding:clamp(26px,3.2vw,42px) 0}
.uc__top{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.uc__top .n{font-size:.6875rem;font-weight:600;letter-spacing:.16em;color:var(--muted-dark);font-variant-numeric:tabular-nums}
.uc__top h3{flex:1;min-width:260px}

/* ============================================================
   06 — ARCHITECTURE
   ============================================================ */
.arch{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr) 84px minmax(0,1fr);gap:0;align-items:stretch;margin-top:clamp(40px,5vw,64px)}
.arch__col{border:1px solid var(--rule-dark);background:var(--panel);padding:24px 22px}
.sec--light .arch__col,.sec--alt .arch__col{background:var(--paper);border-color:var(--rule)}
.arch__col--ai{position:relative;background:#0A2148}
.sec--light .arch__col--ai{background:var(--paper-alt)}
.arch__col--ai::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-v)}
.arch__col .klabel{margin-bottom:16px}
.arch__col li{font-size:.875rem;color:#DCE5F2;padding:9px 0;border-top:1px solid var(--rule-dark-2);display:flex;gap:10px;align-items:center}
.sec--light .arch__col li,.sec--alt .arch__col li{color:var(--ink);border-top-color:var(--rule)}
.arch__col li:first-of-type{border-top:0}
.arch__col li .b{width:3px;height:12px;background:var(--muted-dark);flex:none;opacity:.6}
.arch__col--ai li .b{background:var(--grad-v);opacity:1}
.arch__link{display:flex;align-items:center;justify-content:center;padding-top:52px}
.arch__link svg{width:100%;height:12px;overflow:visible}
.arch__foot{margin-top:26px;display:flex;gap:16px;align-items:flex-start;border-top:1px solid var(--rule-dark);padding-top:24px}
.sec--light .arch__foot,.sec--alt .arch__foot{border-top-color:var(--rule)}
.arch__foot .sig{flex:none;margin-top:8px}

/* ============================================================
   07 — ECOSYSTEM
   ============================================================ */
.lanes{border-top:1px solid var(--rule-dark);margin-top:clamp(40px,5vw,64px)}
.lane{display:grid;grid-template-columns:190px 150px minmax(0,1fr) minmax(0,.85fr);gap:clamp(20px,3vw,44px);padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--rule-dark);align-items:start;position:relative}
.lane__spine{position:absolute;left:0;top:0;bottom:0;width:2px;background:rgba(255,255,255,.12)}
.lane--host .lane__spine{background:var(--grad-v)}
.lane__id{padding-left:22px}
.lane__id .dom{font-size:1.0625rem;font-weight:600;letter-spacing:-.022em;color:#fff}
.lane--host .lane__id .dom{font-size:1.1875rem}
.lane__id .dom .tld{font-weight:500;opacity:.6}
.lane__id .here{display:inline-block;margin-top:9px;font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);background:var(--cyan-green);padding:3px 8px}
.lane__role{font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark);padding-top:5px}
.lane--host .lane__role{color:var(--cyan-green)}
.lane__desc{font-size:.9375rem;line-height:1.6;color:var(--muted-dark)}
.lane--host .lane__desc{color:#E8EDF5}
.lane__gives{border-left:1px solid var(--rule-dark);padding-left:clamp(20px,2.4vw,32px)}
.lane__gives .klabel{margin-bottom:10px}
.lane__gives li{font-size:.875rem;color:#D5DEEC;padding:6px 0;display:flex;gap:9px;line-height:1.45}
.lane__gives li::before{content:"";width:3px;height:11px;background:var(--grad-v);flex:none;margin-top:5px}
.ownrule{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark);margin-top:clamp(36px,4vw,56px)}
.ownrule__c{background:var(--indigo);padding:26px 28px}
.sec--deep .ownrule__c{background:var(--indigo-deep)}
.ownrule__c .klabel{color:var(--cyan-green);margin-bottom:10px}
.ownrule__c p{font-size:.9375rem;line-height:1.6;color:var(--muted-dark)}

/* ============================================================
   08 — INSIGHTS  /  09 — FINAL CTA
   ============================================================ */
.ins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(36px,4vw,56px)}
.ins__c{background:var(--paper);padding:28px 26px;display:flex;flex-direction:column;gap:14px;min-height:200px}
.ins__c .klabel{color:var(--night)}
.ins__c h4{line-height:1.3}
.ins__c p{font-size:.875rem;line-height:1.55;color:var(--muted)}
.ins__c .tbv{margin-top:auto;align-self:flex-start}

.final{background:var(--indigo-deep);position:relative;overflow:hidden}
.final::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad)}
.final__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:end;padding:clamp(64px,8vw,120px) 0}
.final h2{max-width:20ch;margin-top:20px}
.final .lead{max-width:38ch;margin-top:20px}
.final__cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- Footer ---------- */
.ft{background:#040E24;padding:clamp(56px,7vw,88px) 0 32px}
.ft__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:clamp(28px,4vw,56px);padding-bottom:clamp(40px,5vw,64px)}
.ft__brand .blurb{font-size:.875rem;line-height:1.6;color:var(--muted-dark);max-width:34ch;margin-top:18px}
.ft__doms{margin-top:24px;border-top:1px solid var(--rule-dark)}
.ft__doms a{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule-dark);font-size:.875rem;font-weight:500}
.ft__doms a .r{font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark);margin-left:auto}
.ft__doms a:hover,.ft__doms a:hover .r{color:var(--cyan-green)}
.ft__col h5{font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.ft__col li{padding:6px 0}
.ft__col a{font-size:.875rem;color:var(--muted-dark)}
.ft__col a:hover{color:#fff}
.ft__col .addr{font-size:.875rem;color:var(--muted-dark);line-height:1.6}
.ft__bot{padding-top:28px;border-top:1px solid var(--rule-dark);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.ft__bot .c,.ft__legal a{font-size:.8125rem;color:var(--muted-dark)}
.ft__legal{display:flex;gap:24px}
.ft__legal a:hover{color:#fff}

/* ============================================================
   MOTION — semantic, one-shot. Never ambient.
   ============================================================ */
.rv{transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.js .rv{opacity:0;transform:translateY(14px)}
.js .rv.is-in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.07s}
.rv[data-d="2"]{transition-delay:.14s}
.rv[data-d="3"]{transition-delay:.21s}
/* stages resolve in sequence: the signal propagates through the system */
.js .gram--full .stg__panel,.js .gram--row .stg__body{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.js .is-in .gram--full .stg__panel,.js .gram--full.is-in .stg__panel,
.js .is-in .gram--row .stg__body,.js .gram--row.is-in .stg__body{opacity:1;transform:none}
.js .gram.is-in .stg:nth-child(1) .stg__panel,.js .gram.is-in .stg:nth-child(1) .stg__body{transition-delay:.15s}
.js .gram.is-in .stg:nth-child(2) .stg__panel,.js .gram.is-in .stg:nth-child(2) .stg__body{transition-delay:.42s}
.js .gram.is-in .stg:nth-child(3) .stg__panel,.js .gram.is-in .stg:nth-child(3) .stg__body{transition-delay:.69s}
.js .gram.is-in .stg:nth-child(4) .stg__panel,.js .gram.is-in .stg:nth-child(4) .stg__body{transition-delay:.96s}
.js .gram.is-in .stg:nth-child(5) .stg__panel,.js .gram.is-in .stg:nth-child(5) .stg__body{transition-delay:1.23s}
.arch__link path{stroke-dasharray:1;stroke-dashoffset:0}
.js .arch__link path{stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.22,.61,.36,1) .3s}
.js .is-in .arch__link path{stroke-dashoffset:0}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
  .js .rv,.js .gram__fill,.js .meter i,.js .gram--full .stg__panel,.js .gram--row .stg__body,.js .arch__link path{transition:none!important}
  .js .gram__fill{width:100%}
  .js .gram--spine .gram__fill{height:100%}
  .js .meter i{width:var(--w,60%)}
  .js .gram--full .stg__panel,.js .gram--row .stg__body{opacity:1;transform:none}
  .js .arch__link path{stroke-dashoffset:0}
}

/* ============================================================
   RESPONSIVE — the grammar must survive, not just stack
   ============================================================ */
@media(max-width:1040px){
  .nav,.hdr__side .btn,.hdr__side .lang{display:none}
  .burger{display:flex}
  .hero__head,.mhead,.final__in{grid-template-columns:1fr;gap:28px;align-items:start}
  .final__cta{justify-content:flex-start}
  .hero h1{max-width:22ch}
  /* full grammar → 2 columns, rail off (it no longer reads as one line) */
  .gram--full .gram__stages{grid-template-columns:1fr 1fr;gap:26px}
  .gram--full .gram__rail,.gram--full .gram__fill{display:none}
  .gram--full .stg{border-top:1px solid var(--rule-dark);padding-top:18px}
  .gram--full .stg__panel{min-height:0}
  .gram--row .gram__stages{grid-template-columns:1fr 1fr;gap:20px}
  .gram--row .gram__rail,.gram--row .gram__fill{display:none}
  .gram--row .stg{border-top:1px solid var(--rule-dark);padding-top:14px}
  .gram--row .stg__body{border-top:0;padding-top:6px}
  .gram--spine .stg{grid-template-columns:27px minmax(0,1fr);gap:18px}
  .gram--spine .stg__out{grid-column:2;border-top:1px solid var(--rule-dark);padding-top:14px;margin-top:4px}
  .split2,.ins,.ownrule{grid-template-columns:1fr}
  .sol__row{grid-template-columns:44px minmax(0,1fr);gap:18px}
  .sol__env{grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:18px;margin-top:18px}
  .arch{grid-template-columns:1fr}
  .arch__link{padding:0;justify-content:flex-start}
  .arch__link svg{width:12px;height:44px;transform:rotate(90deg);transform-origin:6px 22px}
  .lane{grid-template-columns:1fr 1fr;gap:22px}
  .lane__desc,.lane__gives{grid-column:1/-1}
  .lane__gives{border-left:0;border-top:1px solid var(--rule-dark);padding-left:0;padding-top:18px}
  .ft__top{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  /* one stage at a time — the sequence is the meaning, so keep it linear */
  .gram--full .gram__stages,.gram--row .gram__stages{grid-template-columns:1fr}
  .gram--row .stg__body{padding-top:8px}
  .split2__c{padding:24px 20px}
  .sol__env ul{grid-template-columns:1fr}
  .lane{grid-template-columns:1fr}
  .ft__top{grid-template-columns:1fr}
  .ft__bot{flex-direction:column;align-items:flex-start}
  .gramhead{flex-direction:column;align-items:flex-start;gap:12px}
}