/* ============================================================
   AIVILO, Design System
   ============================================================ */
:root{
  --bg:#ffffff;
  --bg-soft:#f5f6f9;
  --panel:#ffffff;
  --text:#0a0e17;
  --text-2:#3a4256;
  --muted:#697086;
  --line:#e7e9f0;
  --line-2:#eff1f6;

  --dark:#070a12;
  --dark-2:#0c1120;
  --dark-panel:#111828;
  --dark-line:#1e2740;
  --dark-text:#eef0f6;
  --dark-muted:#98a1ba;

  --accent:#0a84ff;
  --accent-rgb:10,132,255;
  --accent-2:#0ea5e9;
  --accent2-rgb:0,191,255;
  --accent-ink:#0284c7;
  --logo:#00bfff;
  --g1:#0a84ff; --g2:#159dff; --g3:#1fc7f0;
  /* Button fill: the logo blue, chosen over purple. The ink is near-black
     rather than white because white on this blue measures 2.12:1, which
     fails WCAG at any size; near-black measures 8.91:1. */
  --btn:#00bfff; --btn-rgb:0,191,255; --btn-ink:#06121c;
  --grad:linear-gradient(120deg,var(--g1) 0%,var(--g2) 45%,var(--g3) 100%);
  --grad-h:linear-gradient(90deg,var(--g1) 0%,var(--g2) 45%,var(--g3) 100%);
  --grad-soft:linear-gradient(120deg,rgba(var(--accent-rgb),.14),rgba(var(--accent2-rgb),.14));

  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-xl:32px;
  --shadow:0 1px 2px rgba(10,14,23,.04),0 12px 32px rgba(10,14,23,.06);
  --shadow-lg:0 24px 60px rgba(10,14,23,.12);
  --container:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   DARK FOUNDATION (blueprint §9: black, not enterprise navy).
   The "light" surface tokens above are redefined to dark values here,
   which flips every section at once. The --dark-* tokens used by .hero,
   .dark-block and the footer already carry dark values, so those keep
   working untouched.

   Surface is jet black. The palette is one blue axis, the logo's own hue,
   with lightness doing the work.
   ============================================================ */
:root{
  /* Jet black is the chosen surface. These were the "layered" near-black
     values until the team picked jet; the elevation steps are gone and every
     surface is true black, with borders doing the separating instead. */
  --bg:#000000;
  --bg-soft:#000000;
  --panel:#050505;
  --text:#eef1f8;
  --text-2:#c4cbdd;
  --muted:#8e99b6;

  --dark:#000000;
  --dark-2:#000000;
  --dark-panel:#050505;
  --line:#242424;
  --line-2:#1a1a1a;
  --dark-line:#242424;

  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.34);
  --shadow-lg:0 24px 60px rgba(0,0,0,.5);

  /* stack layer colours, shared by the hero graphic and the layer sections */
  /* One blue ramp, darkest at the top of the stack and lightest at the
     bottom. The old ramp opened on purple and was not even monotonic:
     Data sat lighter than Compute. */
  /* Chosen by eye in the palette explorer. Hue steps of 8, 9 and 8 degrees,
     the evenest ramp we have had, with the lightest stop 6 degrees off the
     logo's own hue. */
  --lyr-intel:#0071c7; --lyr-intel-2:#022241;
  --lyr-data:#008cd6;  --lyr-data-2:#062c46;
  --lyr-comp:#00a8e6;  --lyr-comp-2:#08374c;
  --lyr-cloud:#00c3f7; --lyr-cloud-2:#0c4152;
  /* Matches the section eyebrows (--accent-ink). Was #a78bff, the last
     purple header on the site. */
  --eyebrow-ink:#5aa7ff;
}

/* Casualties of the token flip: these assumed --text was near-black. */
.btn-primary{background:var(--btn);color:var(--btn-ink)}
.btn-white{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)}
.btn-white:hover{background:rgba(255,255,255,.16)}
.ops-tab.active{background:var(--btn);color:var(--btn-ink);border-color:transparent}

/* Careers */
.job-list{display:grid;gap:14px;max-width:840px}
.job-row{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:22px 26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);transition:.3s var(--ease)}
.job-row:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.job-row h3{font-size:1.2rem;margin-bottom:5px}
.job-meta{font-size:.9rem;color:var(--muted)}
.job-row .textlink{flex:none}
.job-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.job-tag{font-size:.78rem;font-weight:600;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:.32rem .8rem;border-radius:999px}
.job-body h3{font-size:1.2rem;margin:32px 0 14px;color:var(--text)}
.job-body ul{list-style:none;display:grid;gap:11px;margin:0}
.job-body li{display:flex;gap:11px;font-size:1rem;color:var(--text-2);line-height:1.5}
.job-body li svg{width:19px;height:19px;color:var(--accent-2);flex:none;margin-top:2px}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Smooth cross-page fades where supported (progressive enhancement) */
@view-transition{navigation:auto}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{font-family:'Montserrat','Inter',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.08;color:var(--text)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* Type scale */
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.h-xl{font-size:clamp(2.6rem,6vw,4.4rem)}
.h-lg{font-size:clamp(2rem,4.4vw,3.2rem)}
.h-md{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--text-2);line-height:1.55}
.muted{color:var(--muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.98rem;padding:.85rem 1.5rem;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.25s var(--ease);white-space:nowrap;font-family:inherit}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--text);color:#fff}
.btn-primary:hover{background:#000;transform:translateY(-2px);box-shadow:0 12px 28px rgba(10,14,23,.22)}
.btn-accent{background:var(--btn);color:var(--btn-ink);box-shadow:0 8px 24px rgba(var(--btn-rgb),.28)}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(var(--accent-rgb),.4)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--text);background:var(--bg-soft)}
.btn-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)}
.btn-light:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--text)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.25)}

.textlink{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--accent-ink)}
.textlink svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.textlink:hover svg{transform:translateX(4px)}

/* ============================================================
   HEADER
   ============================================================ */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;border-bottom:1px solid transparent;transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
header.scrolled{background:var(--dark);border-bottom-color:var(--dark-line);box-shadow:0 4px 20px rgba(0,0,0,.35)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;cursor:pointer;flex:0 0 auto}
.brand-logo{height:30px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:.35rem;list-style:none}
.nav-links a{padding:.5rem .68rem;border-radius:8px;font-weight:500;font-size:.93rem;color:var(--dark-muted);transition:.2s;white-space:nowrap}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-links a.active{color:#fff;font-weight:600}
.nav-cta{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   VIEWS / ROUTING
   ============================================================ */
.view{display:none;animation:fade .5s var(--ease)}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Sections */
section.block{padding:clamp(64px,9vw,120px) 0}
.section-head{max-width:720px;margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .eyebrow{margin-bottom:16px;display:inline-block}
.section-head p{margin-top:18px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--dark);color:var(--dark-text);overflow:hidden;padding:clamp(112px,12vw,160px) 0 clamp(72px,9vw,120px)}
/* Each stack layer links to its section on /capabilities. Pointer cursor so
   the affordance is discoverable; the focus ring only shows for keyboard use,
   so the graphic is unchanged at rest. */
.hero-art a{cursor:pointer}
.hero-art a:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:3px;border-radius:6px}

/* One glow only, anchored top-right behind the stack graphic. The old
   bottom-left radial read as a grey smear on true black and ended in a hard
   line at the section boundary, with no elevation left for it to blend into. */
.hero::before{content:"";position:absolute;inset:0;background:
    radial-gradient(900px 500px at 78% -8%,rgba(var(--accent-rgb),.34),transparent 60%)}

.hero .container{position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .9rem .4rem .5rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:.83rem;color:var(--dark-muted);margin-bottom:28px}
a.hero-badge{cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease)}
a.hero-badge:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.hero-badge b{background:var(--grad);color:#fff;padding:.15rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.hero h1{color:#fff;max-width:15ch}
/* gradient phrase, usable in any heading (was scoped to the hero only) */
/* Headline accent is the solid logo blue. Was a clipped gradient; the
   gradient is still used elsewhere (bars, avatars, quote marks). */
.accent{color:var(--logo)}
.hero .lead{color:var(--dark-muted);max-width:52ch;margin-top:26px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.hero-stats{display:flex;gap:40px;flex-wrap:wrap;margin-top:56px;padding-top:36px;border-top:1px solid rgba(255,255,255,.1)}
.hero-stats .s .n{font-family:'Montserrat';font-size:2rem;font-weight:600;color:#fff}
.hero-stats .s .n span{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-stats .s .l{font-size:.85rem;color:var(--dark-muted);margin-top:2px}

/* Trust bar */
.trust{padding:34px 0;border-top:1px solid var(--line);background:var(--bg)}
.trust p{text-align:center;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;font-weight:600}
.trust-logos{display:flex;align-items:center;justify-content:center;gap:clamp(28px,5vw,64px);flex-wrap:wrap;opacity:.72}
.trust-logos .lg{font-family:'Montserrat';font-weight:700;font-size:1.15rem;color:var(--text-2);display:flex;align-items:center;gap:.5rem;filter:grayscale(1);opacity:.85}
.trust-logos .lg .dot{width:12px;height:12px;border-radius:3px;background:var(--text-2)}

/* Problem list */
.dark-block{background:var(--dark);color:var(--dark-text);position:relative;overflow:hidden;
  border-top:1px solid var(--line)}
.dark-block::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(820px 440px at 50% 118%,rgba(var(--accent-rgb),.18),transparent 64%)}
.dark-block .container{position:relative;z-index:1}
.dark-block .eyebrow{color:var(--logo)}
.dark-block h2,.dark-block h3{color:#fff}
.dark-block .lead{color:var(--dark-muted)}
.prob-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.prob{display:flex;gap:16px;padding:24px;border-radius:var(--r);background:var(--dark-panel);border:1px solid var(--dark-line)}
.prob .ic{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;background:rgba(255,90,90,.12);color:#ff7a7a}
.prob .ic svg{width:20px;height:20px}
.prob h4{font-size:1.05rem;color:#fff;margin-bottom:5px;font-family:'Inter';font-weight:600;letter-spacing:0}
.prob p{font-size:.92rem;color:var(--dark-muted);line-height:1.5}

/* Ops explorer (tabs) */
.ops-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.ops-tab{padding:.7rem 1.3rem;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-weight:600;font-size:.95rem;color:var(--text-2);cursor:pointer;transition:.22s var(--ease);font-family:inherit}
.ops-tab:hover{border-color:var(--accent);color:var(--text)}
.ops-tab.active{background:var(--text);color:#fff;border-color:var(--text)}
.ops-panel{display:none;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.ops-panel.active{display:grid;animation:fade .4s var(--ease)}
.ops-panel .tag{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px}
.ops-panel h3{font-size:1.9rem;margin-bottom:14px}
.ops-panel ul{list-style:none;margin-top:22px;display:grid;gap:12px}
.ops-panel li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;color:var(--text-2)}
.ops-panel li svg{width:20px;height:20px;flex:none;color:var(--accent-2);margin-top:1px}
.ops-visual{border-radius:var(--r-lg);padding:28px;background:var(--dark);border:1px solid var(--dark-line);color:var(--dark-text);min-height:340px;position:relative;overflow:hidden}
.ops-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 300px at 80% 0,rgba(var(--accent-rgb),.28),transparent 60%)}
.ops-visual .win-head{display:flex;gap:7px;margin-bottom:22px;position:relative}
.ops-visual .win-head i{width:11px;height:11px;border-radius:50%;background:var(--dark-line);display:block}
.metric-row{position:relative;display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--dark-line)}
.metric-row:last-child{border-bottom:0}
.metric-row .k{font-size:.9rem;color:var(--dark-muted)}
.metric-row .v{font-family:'Montserrat';font-weight:600;font-size:1.15rem;color:#fff}
.metric-row .v.good{color:var(--accent-2)}
.bar{height:7px;border-radius:99px;background:var(--dark-line);margin-top:8px;overflow:hidden;position:relative}
.bar span{position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--grad)}

/* Metrics band */
.metrics{background:var(--grad);color:#fff;position:relative;overflow:hidden}
.metrics::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 90% 120%,rgba(255,255,255,.18),transparent 60%)}
.metrics .container{position:relative}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.metric{padding:8px 0}
.metric .big{font-family:'Montserrat';font-weight:700;font-size:clamp(2.4rem,4.5vw,3.4rem);line-height:1;letter-spacing:-.03em}
.metric .lbl{margin-top:10px;font-size:.98rem;color:rgba(255,255,255,.86)}
.metrics-note{text-align:center;margin-top:40px;font-size:.82rem;color:rgba(255,255,255,.68)}

/* Product cards */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;transition:.3s var(--ease);position:relative;overflow:hidden;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.card .status{position:absolute;top:22px;right:22px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.28rem .6rem;border-radius:999px}
.status.live{background:rgba(var(--accent2-rgb),.14);color:var(--accent-ink)}
.status.early{background:rgba(var(--accent-rgb),.12);color:var(--accent-ink)}
.status.soon{background:var(--bg-soft);color:var(--muted)}
.card .cic{width:52px;height:52px;border-radius:14px;background:var(--grad-soft);display:grid;place-items:center;margin-bottom:20px;color:var(--accent-ink)}
.card .cic svg{width:26px;height:26px}
.card h3{font-size:1.3rem;margin-bottom:10px}
.card p{color:var(--text-2);font-size:.97rem;flex:1}
.card .flist{list-style:none;margin:18px 0 22px;display:grid;gap:9px}
.card .flist li{display:flex;gap:10px;font-size:.9rem;color:var(--text-2)}
.card .flist svg{width:18px;height:18px;color:var(--accent-2);flex:none}

/* How it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.step{position:relative;padding:32px;border-radius:var(--r-lg);background:var(--bg-soft);border:1px solid var(--line-2)}
.step::before{counter-increment:step;content:"0" counter(step);font-family:'Montserrat';font-weight:700;font-size:2.4rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block;margin-bottom:16px}
.step h3{font-size:1.2rem;margin-bottom:8px}
.step p{color:var(--text-2);font-size:.95rem}

/* Feature split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.reverse .split-media{order:-1}
.split-media{border-radius:var(--r-xl);overflow:hidden;background:var(--dark);border:1px solid var(--dark-line);padding:26px;color:#fff;position:relative}
.split-media::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 260px at 20% 0,rgba(var(--accent2-rgb),.25),transparent 60%)}
.feat-list{list-style:none;display:grid;gap:20px;margin-top:26px}
.feat-list li{display:flex;gap:16px}
.feat-list .fi{width:44px;height:44px;flex:none;border-radius:12px;background:var(--grad-soft);display:grid;place-items:center;color:var(--accent-ink)}
.feat-list .fi svg{width:22px;height:22px}
.feat-list h4{font-size:1.05rem;margin-bottom:3px;font-family:'Inter';font-weight:600;letter-spacing:0}
.feat-list p{font-size:.93rem;color:var(--text-2)}

/* dashboard mock */
.dash{position:relative;z-index:1}
.dash-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.dash-top .t{font-family:'Montserrat';font-weight:600}
.dash-top .pill{font-size:.72rem;padding:.25rem .7rem;border-radius:999px;background:rgba(var(--accent2-rgb),.16);color:var(--accent-2);font-weight:600}
.dash-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.dc{background:rgba(255,255,255,.04);border:1px solid var(--dark-line);border-radius:12px;padding:14px}
.dc .l{font-size:.75rem;color:var(--dark-muted)}
.dc .n{font-family:'Montserrat';font-weight:600;font-size:1.5rem;color:#fff;margin-top:4px}
.dc .n small{font-size:.8rem;color:var(--accent-2);font-family:'Inter';font-weight:600}
.spark{display:flex;align-items:flex-end;gap:4px;height:60px;margin-top:14px}
.spark i{flex:1;background:var(--grad);border-radius:3px 3px 0 0;opacity:.85;display:block}

/* Testimonial */
.quote{max-width:900px;margin:0 auto;text-align:center}
.quote .qmark{font-family:'Montserrat';font-size:4rem;line-height:.5;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.quote blockquote{font-family:'Montserrat';font-weight:500;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.35;letter-spacing:-.02em;margin:20px 0 28px}
.quote .who{display:flex;align-items:center;justify-content:center;gap:14px}
.quote .av{width:48px;height:48px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:700;font-family:'Montserrat'}
.quote .who .nm{font-weight:600;text-align:left}
.quote .who .rl{font-size:.88rem;color:var(--muted);text-align:left}

/* Security strip */
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sec{padding:24px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg);text-align:center}
.sec .si{width:44px;height:44px;margin:0 auto 12px;border-radius:12px;background:var(--bg-soft);display:grid;place-items:center;color:var(--accent-ink)}
.sec .si svg{width:22px;height:22px}
.sec h4{font-size:1rem;font-family:'Inter';font-weight:600;letter-spacing:0;margin-bottom:4px}
.sec p{font-size:.85rem;color:var(--muted)}

/* CTA band */
.cta{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 420px at 15% -20%,rgba(var(--accent-rgb),.4),transparent 60%),radial-gradient(600px 400px at 90% 120%,rgba(var(--accent2-rgb),.28),transparent 60%)}
.cta .container{position:relative;text-align:center;max-width:760px}
.cta h2{color:#fff;margin-bottom:18px}
.cta p{color:var(--dark-muted);font-size:1.1rem;margin-bottom:32px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Footer */
footer{background:var(--dark);color:var(--dark-muted);border-top:1px solid var(--dark-line);padding:64px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--dark-line)}
.foot-brand .brand{color:#fff;margin-bottom:16px}
.foot-brand .brand-logo{height:34px}
.foot-brand p{font-size:.92rem;max-width:32ch;color:var(--dark-muted)}
.foot-col h5{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;font-family:'Inter';font-weight:600}
.foot-col a{display:block;font-size:.94rem;color:var(--dark-muted);padding:5px 0;transition:.2s}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:14px;font-size:.86rem}
.foot-bottom .socials{display:flex;gap:12px}
.foot-bottom .socials a{width:34px;height:34px;border-radius:9px;border:1px solid var(--dark-line);display:grid;place-items:center;color:var(--dark-muted);transition:.2s}
.foot-bottom .socials a:hover{color:#fff;border-color:var(--dark-muted)}
.foot-bottom .socials svg{width:16px;height:16px}
/* Trademark notice. Its own line rather than appended to the copyright: the
   foot-bottom row is space-between with two items, and a third would unbalance
   it at every width. */
.foot-trademarks{margin:14px 0 0;font-size:.76rem;line-height:1.55;color:var(--dark-muted);
  max-width:78ch}

/* Programme badges on /partners. Sized for legibility, not for a logo row: these
   carry their own set text, so the tier wording has to be readable. Never
   recoloured or cropped, which both programmes prohibit. */
/* The badge sits to the right of the tier label and heading, which share the
   left of the same row. No reserved height is needed: the two columns are on a
   shared subgrid row, so a block whose badge has not arrived still starts its
   paragraph level with the one beside it. */
.partner-head{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(16px,2vw,28px)}
.partner-head-text{min-width:0}
/* Inset from the column's right edge rather than flush to it. Flush, the badge
   sits on the section's content boundary, and in the left column it would come
   within one column gap, 48px, of the heading in the right column: close enough
   on a mark this visually heavy to read as touching it. The inset scales with
   the gap so the separation holds at every width. */
.partner-badge-slot{flex:none;display:flex;align-items:flex-start;
  margin-right:clamp(10px,1.6vw,24px)}
.partner-badge{display:block;height:72px;width:auto;max-width:220px;object-fit:contain}
/* Microsoft issues colour and black-and-white, not a reverse variant, so a
   black-on-transparent badge needs a light plate rather than an inverted mark. */
.partner-badge.on-plate{background:#fff;border-radius:10px;padding:10px 14px;
  box-sizing:content-box}
@media(max-width:560px){
  .partner-badge{height:58px;max-width:180px}
}

/* Company mission: the model sits inside the system it depends on. Replaces
   four stacked fact boxes, which illustrated nothing the heading was saying. */
.mission-art{padding:18px;display:grid;place-items:center}
.mission-art::before{background:radial-gradient(300px 220px at 50% 50%,rgba(var(--accent2-rgb),.16),transparent 70%)}
.mission-art svg{width:100%;height:auto;position:relative;z-index:1;overflow:visible}

/* Home: four focus tiles, one per layer of the hero graphic. */
.focus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.focus{display:flex;flex-direction:column;gap:9px;text-decoration:none;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:22px 20px;transition:.3s var(--ease)}
.focus:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 60%,transparent);
  box-shadow:0 16px 38px rgba(0,0,0,.5)}
.focus .fnum{font-family:'Montserrat',sans-serif;font-weight:800;font-size:.86rem;letter-spacing:.04em;
  color:color-mix(in oklab, var(--c) 70%, white)}
.focus h3{font-size:1.02rem;line-height:1.25;color:var(--text)}
.focus p{font-size:.9rem;color:var(--muted);flex:1}
@media(max-width:1040px){.focus-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.focus-grid{grid-template-columns:1fr}}

/* Capabilities / Industries: jump links under an interior hero */
.cap-jump{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.cap-jump a{font-size:.86rem;font-weight:600;color:var(--dark-muted);border:1px solid var(--dark-line);
  border-radius:999px;padding:.44rem .9rem;transition:.2s;background:rgba(255,255,255,.02)}
.cap-jump a:hover{color:#fff;border-color:var(--c,var(--accent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,var(--accent)) 40%,transparent)}

/* Capabilities: numbered layer heading */
.lay-head{display:flex;gap:18px;align-items:flex-start}
.lay-head .lay-num{font-family:'Montserrat',sans-serif;font-weight:800;font-size:2.1rem;line-height:1;
  color:var(--c,var(--accent));opacity:.5;flex:0 0 auto;padding-top:2px;letter-spacing:-.03em}
/* Layer colours are fills. Used as text the darkest measures 2.3 on black,
   so lift toward white: every stop then clears 4.5. */
.lay-head .eyebrow{color:color-mix(in oklab, var(--c,var(--accent)) 70%, white)}
.lay-head h2{margin:0}
@media(max-width:620px){
  .lay-head{gap:13px}
  .lay-head .lay-num{font-size:1.6rem}
}

/* Cards tinted by the layer they belong to */
/* Four cards read better 2x2 than as 3 + an orphan. */
.prod-grid.two{grid-template-columns:repeat(2,1fr)}
.prod-grid .card[style*="--c"] .cic{color:var(--c);
  border-color:color-mix(in srgb,var(--c) 32%,transparent);
  background:color-mix(in srgb,var(--c) 11%,transparent)}

/* Industries: the right-hand detail panel. On jet the fill carries almost no
   contrast, so the border does the separating; --panel keeps the faint lift. */
.ind-work{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.ind-work h4{font-family:'Montserrat',sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 13px}
.ind-reg{font-size:.9rem;line-height:1.65;color:var(--muted)}
@media(max-width:860px){.ind-work{padding:20px 22px}}

/* Page hero (interior) */
.page-hero{background:var(--dark);color:#fff;padding:clamp(116px,10vw,140px) 0 clamp(40px,4.5vw,62px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(760px 440px at 82% -10%,rgba(var(--accent-rgb),.3),transparent 60%)}
.page-hero .container{position:relative;max-width:760px}
.page-hero h1{color:#fff;margin:16px 0 20px}
.page-hero .lead{color:var(--dark-muted)}
.page-hero .eyebrow{color:var(--logo)}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);font-family:inherit;font-size:.96rem;background:var(--bg);transition:.2s;color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12)}
.field textarea{resize:vertical;min-height:120px}
.form-note{font-size:.82rem;color:var(--muted);margin-top:6px}
.contact-info{display:grid;gap:22px}
.ci-item{display:flex;gap:16px}
.ci-item .cii{width:46px;height:46px;flex:none;border-radius:12px;background:var(--grad-soft);display:grid;place-items:center;color:var(--accent-ink)}
.ci-item .cii svg{width:22px;height:22px}
.ci-item h4{font-size:1rem;font-family:'Inter';font-weight:600;letter-spacing:0;margin-bottom:2px}
.ci-item p,.ci-item a{font-size:.94rem;color:var(--text-2)}
.form-success{display:none;padding:20px;border-radius:var(--r);background:rgba(var(--accent2-rgb),.1);border:1px solid rgba(var(--accent2-rgb),.3);color:#0c7a70;font-weight:500;margin-top:8px}
.form-success.show{display:block;animation:fade .4s}

/* Values / company */
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.val{padding:28px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg)}
.val .vi{width:48px;height:48px;border-radius:12px;background:var(--grad-soft);display:grid;place-items:center;color:var(--accent-ink);margin-bottom:16px}
.val .vi svg{width:24px;height:24px}
.val h3{font-size:1.15rem;margin-bottom:8px}
.val p{color:var(--text-2);font-size:.95rem}
.tl{display:grid;gap:0;max-width:760px}
.tl-item{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.tl-item .yr{font-family:'Montserrat';font-weight:700;font-size:1.3rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tl-item h4{font-size:1.1rem;margin-bottom:6px;font-family:'Inter';font-weight:600;letter-spacing:0}
.tl-item p{color:var(--text-2);font-size:.95rem}

/* Partners */
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.partner{padding:28px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg);transition:.3s var(--ease)}
.partner:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.partner .pl{font-family:'Montserrat';font-weight:700;font-size:1.2rem;margin-bottom:10px;display:flex;align-items:center;gap:.55rem}
.partner .pl .pd{width:30px;height:30px;border-radius:8px;background:var(--grad-soft);display:grid;place-items:center;color:var(--accent-ink);font-size:.9rem}
.partner p{font-size:.92rem;color:var(--text-2)}
.pcat-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pcat{padding:30px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg);transition:.3s var(--ease);display:flex;flex-direction:column}
.pcat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plogos{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 18px}
.plogo{display:flex;align-items:center;gap:.55rem;font-family:'Montserrat';font-weight:700;font-size:1.02rem;padding:.6rem 1.05rem;border-radius:12px;background:var(--bg-soft);border:1px solid var(--line-2);color:var(--text)}
.plogo .pd{width:26px;height:26px;border-radius:7px;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:.82rem;font-weight:700}
.pcat p{font-size:.94rem;color:var(--text-2);margin-top:auto}
.tier{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);background:rgba(var(--accent-rgb),.1);padding:.25rem .6rem;border-radius:999px;margin-bottom:14px}

/* FAQ */
.faq{max-width:800px;margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;background:none;border:none;cursor:pointer;font-family:'Montserrat';font-weight:600;font-size:1.1rem;text-align:left;color:var(--text)}
.qa button .pm{width:26px;height:26px;flex:none;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center;transition:.3s;font-size:1.2rem;color:var(--accent-ink)}
/* Open state was var(--text) behind #fff: near-white on near-white. */
.qa.open button .pm{background:var(--btn);color:var(--btn-ink);border-color:var(--btn);transform:rotate(45deg)}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.qa .ans p{padding:0 0 22px;color:var(--text-2)}

/* Responsive */
/* Seven nav items, the logo and the CTA stop fitting at about 1100px. */
@media(max-width:1100px){
  .nav-links{display:none}
  .burger{display:flex}
}
/* Between the single-column breakpoint and about 1200px, three columns leave
   each card too narrow and the copy runs to five lines. Step through two.
   Must stay above the 940 rule below: same specificity, so order decides. */
@media(max-width:1200px) and (min-width:941px){
  .prod-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:940px){
  .prob-grid,.metrics-grid,.prod-grid,.steps,.sec-grid,.val-grid,.partner-grid,.pcat-grid{grid-template-columns:1fr}
  .metrics-grid{grid-template-columns:1fr 1fr}
  .split,.ops-panel.active,.contact-grid{grid-template-columns:1fr;gap:36px}
  .split.reverse .split-media{order:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .tl-item{grid-template-columns:80px 1fr;gap:16px}
  .mobile-menu.open{display:flex}
}
@media(max-width:560px){
  .metrics-grid,.foot-grid{grid-template-columns:1fr}
  .hero-stats{gap:24px}
  .hero-actions,.cta-actions{width:100%}
  .hero-actions .btn,.cta-actions .btn{width:100%;justify-content:center;white-space:normal;text-align:center}
  .nav .nav-cta .btn-accent{display:none}
}

/* Mobile menu */
.mobile-menu{display:none;position:fixed;inset:74px 0 0;z-index:99;background:var(--dark);flex-direction:column;padding:24px;gap:6px;animation:fade .3s}
.mobile-menu a{padding:16px;font-size:1.15rem;font-weight:600;color:#fff;border-bottom:1px solid var(--dark-line)}
.mobile-menu .m-cta{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.mobile-menu .m-cta .btn{justify-content:center;width:100%}
.no-scroll{overflow:hidden}

/* ============================================================
   HOMEPAGE (Capabilities). Blueprint §8 running order.
   ============================================================ */
:root{ --accent-ink:#5aa7ff; }

/* The hero SVG was authored against the concept's variable names. Alias them
   onto the site tokens rather than editing 24KB of markup, so the graphic and
   the layer sections stay driven by one palette and both accent modes work. */
:root{
  /* Label inks: a lift of each plate’s own hue, to the exact degree, so a
     label belongs to the plate it names. They climb with the ramp rather
     than sitting at one lightness (9.1 to 14.0 contrast on black — the
     dimmest is still well past AAA). Holding them level instead costs all
     the blue: at a shared lightness the hues only reach near-grey. */
  --l1A:var(--lyr-intel); --l1B:var(--lyr-intel-2); --l1Ink:#64affe;
  --l2A:var(--lyr-data);  --l2B:var(--lyr-data-2);  --l2Ink:#6cc0ff;
  --l3A:var(--lyr-comp);  --l3B:var(--lyr-comp-2);  --l3Ink:#79d0ff;
  --l4A:var(--lyr-cloud); --l4B:var(--lyr-cloud-2); --l4Ink:#8ddeff;
  --dim:var(--muted);
}

/* hero: copy beside the four-layer stack */
.hero-grid{display:grid;grid-template-columns:1fr minmax(340px,540px);gap:16px;align-items:center}
.hero-art{width:100%;max-width:540px;height:auto;display:block;overflow:visible}
.hero-support{font-family:'Montserrat','Inter',sans-serif;font-weight:600;font-size:clamp(1.05rem,1.5vw,1.25rem);color:#fff;margin:14px 0 16px}
.hero .eyebrow{color:var(--eyebrow-ink)}
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-art{max-width:560px;margin:0 auto}
}

/* stack behaviour: still until first pointer contact, then it cycles */
.lay{transition:transform .65s var(--ease),opacity .5s ease}
.lay.dim{opacity:.68}
.lay .hiRim{opacity:0;transition:opacity .5s}
.lay.hi .hiRim{opacity:.8}
.lay .uglow{transition:opacity .5s;opacity:.22}
.lay.hi .uglow{opacity:.42}
.hero-art .layer{animation:bob 9s ease-in-out infinite;animation-play-state:paused}
.hero-art .l1{animation-delay:0s}.hero-art .l2{animation-delay:-2.2s}
.hero-art .l3{animation-delay:-4.4s}.hero-art .l4{animation-delay:-6.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.orbCore{transform-box:fill-box;transform-origin:center;animation:pulse 3.2s ease-in-out infinite;animation-play-state:paused}
@keyframes pulse{50%{transform:scale(1.22);opacity:.85}}
.hero-art.live .layer,.hero-art.live .orbCore{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.hero-art .layer,.orbCore{animation:none}.lay{transition:none}}

/* credentials strip */
.creds{display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;padding-top:34px;margin-top:38px;border-top:1px solid var(--dark-line)}
.creds .cl{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dark-muted)}
.creds .cred{font-size:.92rem;color:var(--dark-muted)}
.creds .cred b{color:#fff;font-weight:600}
.creds .sep{width:1px;height:20px;background:var(--dark-line)}

/* four-layer bands */
.lyr-bands{display:flex;flex-direction:column;gap:8px;margin-top:34px}
.lyr-band{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-left:4px solid var(--c);border-radius:var(--r);padding:20px 24px}
.lyr-band .nm{font-family:'Montserrat','Inter',sans-serif;font-weight:700;font-size:1.05rem;color:var(--text);min-width:210px}
.lyr-band .role{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c);white-space:nowrap}
.lyr-band .det{font-size:.92rem;color:var(--muted);margin-left:auto;text-align:right}
@media(max-width:760px){.lyr-band .det{margin-left:0;text-align:left;width:100%}.lyr-band .nm{min-width:0}}

/* specialization split */
.spec{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(26px,5vw,58px);align-items:start}
@media(max-width:860px){.spec{grid-template-columns:1fr;gap:26px}}
ul.caps{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:7px 24px;margin:18px 0 0;padding:0}
ul.caps li{list-style:none;font-size:.95rem;color:var(--text-2);padding-left:17px;position:relative;line-height:1.5}
ul.caps li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:2px;background:var(--c,var(--accent))}

/* end-to-end horizontal flow */
.flow{display:flex;gap:10px;flex-wrap:wrap;margin-top:38px}
.flow-step{flex:1 1 190px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--c);
  border-radius:var(--r);padding:20px 20px 22px}
.flow-step .r{font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.flow-step .t{font-family:'Montserrat','Inter',sans-serif;font-weight:700;font-size:1.02rem;margin:6px 0 8px;color:var(--text)}
.flow-step .d{font-size:.88rem;color:var(--muted);line-height:1.5}

/* ecosystem, grouped by role */
/* Six cards: a fixed 3x2 rather than auto-fill, which left a ragged last row. */
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
@media(max-width:980px){.eco-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.eco-grid{grid-template-columns:1fr}}
.eco-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.eco-card .role{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.eco-card .orgs{font-family:'Montserrat','Inter',sans-serif;font-weight:700;font-size:1.05rem;color:var(--text);line-height:1.4}
.eco-card .why{font-size:.9rem;color:var(--muted);margin-top:8px;line-height:1.55}

/* engagement model */
.eng-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-top:38px}
.eng-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.eng-card .n{font-family:'Montserrat','Inter',sans-serif;font-size:.8rem;font-weight:700;color:var(--accent-ink);letter-spacing:.06em}
.eng-card h3{font-size:1.1rem;margin:8px 0 9px}
.eng-card p{font-size:.9rem;color:var(--muted);line-height:1.55}

/* thesis / closing emphasis */
.kicker{font-family:'Montserrat','Inter',sans-serif;font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:transparent;margin-top:26px;display:inline-block}


/* --- homepage rhythm: sections that deliberately break the eyebrow+h2 pattern --- */
.thesis{text-align:center;max-width:56ch;margin:0 auto}
.thesis .stmt{font-family:'Montserrat','Inter',sans-serif;font-weight:800;letter-spacing:-.022em;
  line-height:1.14;font-size:clamp(1.6rem,3.4vw,2.5rem);color:var(--text)}
.thesis p{color:var(--text-2);margin-top:22px;line-height:1.7}

/* two-column core specialization: side by side says "both" better than two sections */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px)}
.duo > div{border-top:3px solid var(--c);padding-top:26px}
.duo h3{font-size:clamp(1.3rem,2.2vw,1.72rem);margin-bottom:12px}
.duo .sub{color:var(--text-2);line-height:1.65;font-size:.98rem}
@media(max-width:820px){.duo{grid-template-columns:1fr;gap:34px}}

/* Ecosystem as a spec-sheet row list. A grid with auto-fill left empty cells
   showing the container through at wide viewports; rows cannot do that. */
.eco-list{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin-top:30px;background:var(--panel)}
.eco-list .row{display:flex;align-items:baseline;justify-content:space-between;
  gap:6px 28px;flex-wrap:wrap;padding:17px 24px;border-top:1px solid var(--line);transition:background .25s var(--ease)}
.eco-list .row:first-child{border-top:0}
.eco-list .row:hover{background:var(--bg-soft)}
.eco-list .r{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:none}
.eco-list .o{font-family:'Montserrat','Inter',sans-serif;font-weight:700;font-size:1rem;color:var(--text);text-align:right}
@media(max-width:560px){.eco-list .o{text-align:left}}


/* Capability chips. Replaces a nested two-column bullet grid that sat inside
   the already two-column .duo, producing four narrow columns of wrapping text. */
.cap-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.cap-chips span{font-size:.85rem;line-height:1.35;color:var(--text-2);
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-radius:999px;padding:.42rem .85rem;transition:.25s var(--ease)}
.cap-chips span:hover{border-color:var(--c);color:var(--text)}
.duo .sub{max-width:46ch}


/* Full-width closing line under the two specialization columns. Was a separate
   floating band, which orphaned the statement and stacked two lots of section
   padding into a large gap. */
.duo-note{grid-column:1/-1;margin-top:0;padding-top:24px;border-top:1px solid var(--line);
  color:var(--text-2);font-size:1.02rem;line-height:1.65;max-width:92ch}
.duo-note b{color:var(--text);font-weight:600}


/* Two-column blocks whose columns must keep step: subgrid puts both columns on
   the parent's rows, so the heading block, paragraph and list of each side start
   at the same height even when the copy runs to a different line count.
   The row count is fixed, so every child counts: a block has exactly three of
   them, and the tier label, heading and badge are grouped into the first as
   .partner-head rather than being rows of their own. Add a child without
   bumping the span and the last one falls out of the grid and overlaps.
   Scoped above the breakpoint where .split collapses to one column. */
@media(min-width:941px){
  .split.aligned{grid-template-rows:auto auto auto;align-items:start}
  .split.aligned > div{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start}
}

/* ---- Accent mode: duo (default). Purple into blue into cyan, the original
   gradient. Drives every button, gradient heading and accent tint site-wide. ---- */
:root{
  --g1:#8b5cff; --g2:#4f7bff; --g3:#22cdf2;
  --grad:linear-gradient(120deg,var(--g1) 0%,var(--g2) 52%,var(--g3) 100%);
  --grad-h:linear-gradient(90deg,var(--g1) 0%,var(--g2) 52%,var(--g3) 100%);
  --accent:#5f6dff;
  --accent-rgb:95,109,255;
  --accent-2:#22cdf2;
  --accent2-rgb:34,205,242;

  /* Intelligence plate internals. Was a violet set; these are the blue
     values that already existed for the retired all-blue accent mode. */
  --l1e1:#102840; --l1e2:#132e49; --l1e3:#173351; --l1e4:#1a3959;
  --l1hi:#dbecfe; --l1node:#e4f0fe;
  --l1line:rgba(216,233,254,.55);
  --l1line2:rgba(220,236,255,.3);
  --l1orb:rgba(0,122,230,.04);
}
/* ---- Accent mode: all blue. Pure blue, dark into light. ---- */

/* Stack ramp. Five ordered stops, foundation to delivery, one per accent mode.
   Also drives the hero graphic through the --l1A..--l4A aliases. */
:root{
  --lyr-cloud:#00c3f7; --lyr-comp:#00a8e6; --lyr-data:#008cd6;
  --lyr-intel:#0071c7; --lyr-app:#0b4f96;
}

/* Closing CTA bands run tighter than content sections: they hold a heading,
   a line and a button, so full section padding left them cavernous. */
.block.dark-block{padding:clamp(52px,6vw,78px) 0}
.block.dark-block .hero-actions{margin-top:26px}

/* Strategic-platform columns: close the internal gaps so the pair reads as one
   block rather than two tall, sparse columns. */
/* Column gap only. A plain gap also spaced the subgrid ROWS, injecting ~48px
   between the badge, heading, paragraph and list of every column. */
.split.aligned{column-gap:clamp(30px,4vw,48px);row-gap:0}
/* Grid items stretch by default, which turned the inline tier pills into
   full-width bars once the columns became grids. */
.split.aligned .tier{justify-self:start}
.split.aligned h3{margin-top:16px}
.split.aligned .feat-list{margin-top:20px;gap:14px}
.split.aligned .lead{font-size:1rem;line-height:1.6}

/* Ecosystem cards: a touch tighter, and three across reads better than four
   narrow ones at desktop width. */
.eco-grid{gap:12px}
.eco-card{padding:22px}
/* Six cards: 3x2. Was repeat(4,1fr), from when there were eight, which
   left a ragged 4 + 2 once AMD/Intel and Corvic came out. */
@media(min-width:1100px){.eco-grid{grid-template-columns:repeat(3,1fr)}}

/* Pills are wide and short. A 120deg ramp puts their bottom-left corner ~15%
   along the gradient while the right edge never reaches 100%, which shows as a
   sliver of the wrong colour down the left side. Horizontal fixes both. */
.hero-badge b{background:var(--grad-h)}

/* .btn carries a 1px transparent border. background-clip defaults to border-box
   while background-origin defaults to padding-box, so the gradient is laid out
   inside the border and then painted out over it: the uncovered 1px strip is
   filled by background-repeat wrapping the ramp, showing its tail colour as a
   sliver down the left edge. Origin border-box makes the ramp span the painted
   area exactly, and no-repeat guarantees nothing can wrap. */
.btn{background-origin:border-box;background-repeat:no-repeat}

/* ===================== HOMEPAGE v2 ===================== */

/* Problems. Buyer-voice statements, so the reader recognises their own
   situation before we argue anything. */
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.prob{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px;display:flex;flex-direction:column;gap:14px;transition:.3s var(--ease)}
.prob:hover{border-color:rgba(var(--accent-rgb),.45);transform:translateY(-3px)}
.prob .q{font-family:'Montserrat','Inter',sans-serif;font-weight:700;font-size:1.05rem;
  line-height:1.35;color:var(--text);text-wrap:balance}
.prob .a{font-size:.9rem;line-height:1.6;color:var(--muted);padding-top:13px;
  border-top:1px solid var(--line);margin-top:auto}
@media(max-width:1000px){.prob-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.prob-grid{grid-template-columns:1fr}}

/* Specialization panels. Two objects with their own motif rather than two
   columns of running text. */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:38px}
.panel{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--c);
  border-radius:var(--r-lg);padding:30px 28px 28px}
.panel .motif{width:58px;height:58px;display:block;margin-bottom:20px}
.panel h3{font-family:'Montserrat','Inter',sans-serif;font-weight:700;
  font-size:clamp(1.2rem,1.9vw,1.45rem);letter-spacing:-.02em;margin-bottom:12px;color:var(--text)}
.panel .sub{color:var(--text-2);line-height:1.65;font-size:.97rem;max-width:46ch}
.panel .cap-chips{margin-top:22px}
@media(max-width:820px){.panels{grid-template-columns:1fr;gap:14px}}

.panels-note{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.97rem;line-height:1.7;max-width:92ch}
.panels-note b{color:var(--text);font-weight:600}
.panels-note .textlink{margin-left:6px;white-space:nowrap}

/* Ecosystem strip. Credibility by association without spending a section on it.
   The names get the full width, with the label and link on their own row, so a
   long roster wraps evenly instead of orphaning the last one. */
.eco-band{padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-soft)}
/* Centred. A flex row of eleven variable-width names will always have some
   width where the last one wraps alone; centred, that reads as deliberate
   rather than as an orphan, at every width. */
.eco-band-head{display:flex;align-items:baseline;justify-content:center;gap:16px;
  flex-wrap:wrap;margin-bottom:13px}
.eco-band-inner{text-align:center}
.eco-band .lbl{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
.eco-band .textlink{white-space:nowrap;font-size:.9rem}
.eco-band .eco-names{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 20px}
.eco-band .eco-names span{font-family:'Montserrat','Inter',sans-serif;font-weight:600;
  font-size:.94rem;color:var(--text-2);white-space:nowrap}

/* Offerings. Three things you can actually engage, each with its own way in. */
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.offer{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;display:flex;flex-direction:column;gap:12px;transition:.3s var(--ease)}
.offer:hover{border-color:rgba(var(--accent-rgb),.45);transform:translateY(-3px)}
.offer .k{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink)}
.offer h3{font-family:'Montserrat','Inter',sans-serif;font-weight:700;font-size:1.15rem;
  letter-spacing:-.01em;color:var(--text)}
.offer p{font-size:.92rem;line-height:1.6;color:var(--muted)}
.offer .textlink{margin-top:auto;padding-top:6px;font-size:.9rem}
@media(max-width:900px){.offer-grid{grid-template-columns:1fr}}

/* deep-link targets clear the sticky header */
section[id]{scroll-margin-top:92px}

/* Below the one-row threshold, tighten again so the roster splits evenly
   instead of dropping the last name onto a line by itself. */
@media(max-width:1080px){
  .eco-band .eco-names{gap:8px 15px}
  .eco-band .eco-names span{font-size:.88rem}
}

/* ============ Accessibility additions (2026-10-13) ============
   Skip link: off-screen until a keyboard user tabs to it, so the page looks
   exactly as before for everyone else. */
.skip-link{position:absolute;left:16px;top:-80px;z-index:1000;padding:10px 16px;border-radius:10px;background:var(--btn);color:var(--btn-ink);font-weight:600;text-decoration:none;transition:top .15s}
.skip-link:focus{top:16px;outline:2px solid #fff;outline-offset:2px}
main:focus{outline:none}

/* ============ Legal pages: /privacy, /terms (2026-10-13) ============ */
.legal{color:var(--text-2);font-size:1rem;line-height:1.65}
.legal h2{font-size:1.35rem;margin:40px 0 12px;color:var(--text)}
.legal h3{font-size:1.05rem;margin:24px 0 8px;color:var(--text)}
.legal p{margin:0 0 14px}
.legal ul{list-style:disc;padding-left:1.25rem;margin:0 0 14px}
.legal li{margin:6px 0}
.legal a{color:var(--accent-ink);font-weight:600}
.legal strong{color:var(--text)}

/* Contact form delivery (2026-10-13): error state beside the original success state, and the
   honeypot field, kept off-screen rather than display:none so naive bots still see it. */
.form-error{display:none;padding:20px;border-radius:var(--r);background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.3);color:#b42318;font-weight:500;margin-top:8px}
.form-error.show{display:block;animation:fade .4s}
.form-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}