/* the product microsite, web layer on Design System v3.
   Light, product-first. One dark stage (services) and a dark close.
   Tokens first, then base, chrome, sections, components, motion. */

:root{
  /* ink and slate (DS v3) */
  --ink-900:#001f4a; --ink-800:#0d2a55; --ink-700:#1f3a61;
  --slate-600:#4f5d78; --slate-500:#56627b; --slate-400:#8790a6;
  /* surfaces and lines */
  --surface:#ffffff; --surface-2:#f7f7fb; --surface-3:#f1f3f9;
  --line-soft:#eef1f4; --line:#e3e9ef; --line-strong:#cfd7e2;
  /* action (DS v3 blue) and brand accents */
  --blue-600:var(--brand-action,#055efb); --blue-700:var(--brand-action-dark,#044fd6); --blue-100:#eaf1ff; --blue-50:#f3f7ff;
  --accent:var(--brand-accent,#1DB8F2); --accent-2:var(--brand-accent-2,#00D5D0);
  /* pillars, used as points only */
  --p-sensing:#D1247A; --p-creation:#10A284; --p-activation:var(--brand-primary); --p-data:#896BED;
  /* pastel field, from the product loops */
  --wash-lilac:#cfc8ff; --wash-pink:#ffd0de; --wash-peri:#bcd2ff;
  /* night stage */
  --night:var(--brand-canvas,#0B1028); --night-2:#121836; --night-3:#1a2246;
  --on-night:#eef2ff; --on-night-2:rgba(238,242,255,.78); --on-night-3:rgba(238,242,255,.6);
  --night-line:rgba(238,242,255,.1); --night-line-2:rgba(238,242,255,.18);

  --f-sans:'Ubuntu', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:'Ubuntu Mono', ui-monospace, Menlo, monospace;

  --r-1:4px; --r-2:6px; --r-3:8px; --r-4:12px; --r-5:16px; --r-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-fast:160ms; --t-mid:300ms; --t-slow:640ms;

  --wrap:1240px;
  --gutter:clamp(20px, 4vw, 40px);
  --sec:clamp(88px, 11vw, 152px);
  --nav-h:68px;

  --shadow-frame:0 0 0 1px rgba(0,31,74,.06), 0 2px 4px rgba(0,31,74,.04), 0 12px 28px -6px rgba(0,31,74,.12), 0 48px 96px -24px rgba(0,31,74,.18);
  --shadow-pop:0 0 0 1px rgba(0,31,74,.06), 0 8px 24px -4px rgba(0,31,74,.16);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0; background:var(--surface-2); color:var(--slate-600);
  font:400 17px/1.6 var(--f-sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--blue-600); outline-offset:3px; border-radius:6px; }
.skip{ position:absolute; left:16px; top:-60px; z-index:100; background:var(--ink-900); color:#fff; padding:10px 16px; border-radius:8px; text-decoration:none; }
.skip:focus{ top:12px; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- type ---------- */
h1,h2,h3,h4{ color:var(--ink-900); margin:0; font-weight:500; }
.display{ font-size:clamp(46px, 7.4vw, 104px); line-height:.96; letter-spacing:-.04em; text-wrap:balance; }
.h2{ font-size:clamp(34px, 4.4vw, 60px); line-height:1.02; letter-spacing:-.032em; text-wrap:balance; max-width:18ch; }
.h3{ font-size:clamp(22px, 2vw, 28px); line-height:1.15; letter-spacing:-.018em; }
.h4{ font-size:19px; line-height:1.3; letter-spacing:-.01em; }
.lede{ font-size:clamp(18px, 1.5vw, 21px); line-height:1.5; color:var(--slate-600); max-width:38em; text-wrap:pretty; }
.measure{ max-width:36em; text-wrap:pretty; }
p{ margin:0; }
.accent{ color:var(--blue-600); }
.eyebrow{ font:400 13px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); display:inline-flex; align-items:center; gap:10px; }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.mono{ font-family:var(--f-mono); }
.muted{ color:var(--slate-500); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:calc(var(--wrap) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter); }
.sec{ padding-block:var(--sec); position:relative; }
.sec-head{ display:grid; gap:20px; margin-bottom:56px; }
.sec-head.split{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; gap:40px; }
.sec-head.split .lede{ justify-self:end; }
@media (max-width:860px){ .sec-head.split{ grid-template-columns:1fr; gap:20px; } .sec-head.split .lede{ justify-self:start; } }

/* ---------- buttons and chips ---------- */
.btn{
  --bg:var(--blue-600); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 22px; border-radius:var(--r-pill);
  background:var(--bg); color:var(--fg); border:1px solid var(--bd); text-decoration:none; cursor:pointer;
  font:500 15px/1 var(--f-sans); letter-spacing:.005em; white-space:nowrap;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn:hover{ --bg:var(--blue-700); }
.btn:active{ transform:scale(.97); }
.btn .arr{ width:16px; height:16px; transition:transform var(--t-mid) var(--ease); }
@media (hover:hover) and (pointer:fine){ .btn:hover .arr{ transform:translateX(3px); } }
.btn.ghost{ --bg:rgba(255,255,255,.7); --fg:var(--ink-900); --bd:var(--line-strong); }
.btn.ghost:hover{ --bg:#fff; --bd:var(--ink-900); }
.btn.sm{ height:40px; padding:0 18px; font-size:14px; }
.btn.light{ --bg:#fff; --fg:var(--ink-900); }
.btn.light:hover{ --bg:#e9efff; }
.btn.line-light{ --bg:transparent; --fg:var(--on-night); --bd:var(--night-line-2); }
.btn.line-light:hover{ --bd:var(--on-night); --bg:rgba(255,255,255,.04); }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.textlink{ display:inline-flex; align-items:center; gap:8px; color:var(--blue-600); text-decoration:none; font-weight:500; }
.textlink .arr{ width:15px; height:15px; transition:transform var(--t-mid) var(--ease); }
@media (hover:hover) and (pointer:fine){ .textlink:hover .arr{ transform:translateX(3px); } }
.textlink:hover{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }

.chip{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:var(--r-pill);
  background:transparent; border:1px solid var(--line-strong); color:var(--ink-700); cursor:pointer; font-size:14px; white-space:nowrap;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.chip:hover{ border-color:var(--ink-900); }
.chip[aria-pressed="true"], .chip[aria-checked="true"]{ background:var(--ink-900); border-color:var(--ink-900); color:#fff; }
.tag{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:var(--r-3); background:var(--surface-3); color:var(--ink-700); font-size:13.5px; line-height:1.2; }
.pdot{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--c, var(--slate-400)); }

/* ---------- nav ---------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:50; height:var(--nav-h); display:flex; align-items:center;
  transition:background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.nav.scrolled{ background:rgba(255,255,255,.82); -webkit-backdrop-filter:saturate(1.6) blur(18px); backdrop-filter:saturate(1.6) blur(18px); box-shadow:0 1px 0 rgba(0,31,74,.07); }
.nav.on-night:not(.scrolled){ color:var(--on-night); }
.nav .wrap{ display:flex; align-items:center; gap:28px; }
.lockup{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink-900); flex:none; }
.lockup .word{ font:700 23px/1 var(--f-sans); letter-spacing:-.025em; }
.lockup .by{ display:flex; align-items:center; gap:10px; padding-left:12px; border-left:1px solid var(--line-strong); height:20px; }
.lockup .by img{ height:18px; width:auto; }
.nav .links{ margin-left:auto; }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:4px; }
.nav ul a{ display:block; padding:9px 13px; border-radius:var(--r-pill); text-decoration:none; color:var(--ink-700); font-size:15px; transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.nav ul a:hover{ background:rgba(0,31,74,.05); color:var(--ink-900); }
.nav ul a[aria-current="page"]{ color:var(--ink-900); background:rgba(0,31,74,.06); }
.nav .btn{ height:40px; padding:0 18px; font-size:14px; }
.menu-btn{ display:none; margin-left:auto; width:44px; height:44px; border:0; background:transparent; border-radius:50%; cursor:pointer; }
.menu-btn span{ display:block; width:20px; height:1.5px; background:var(--ink-900); margin:5px auto; transition:transform var(--t-mid) var(--ease), opacity var(--t-fast); }
.nav.open .menu-btn span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav.open .menu-btn span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }
@media (max-width:980px){
  .nav ul, .nav .nav-cta{ display:none; }
  .menu-btn{ display:block; }
  .nav.open{ background:#fff; box-shadow:0 1px 0 var(--line); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .nav.open ul{ display:flex; flex-direction:column; position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; background:#fff; padding:16px var(--gutter) 40px; gap:2px; margin:0; overflow:auto; }
  .nav.open ul a{ font-size:24px; letter-spacing:-.02em; color:var(--ink-900); padding:14px 0; border-radius:0; border-bottom:1px solid var(--line-soft); }
  .nav.open ul li.cta-li{ display:block; margin-top:24px; }
  .nav.open ul li.cta-li a{ display:inline-flex; font-size:16px; border:0; color:#fff; padding:0 22px; border-radius:var(--r-pill); }
}
.nav ul li.cta-li{ display:none; }

/* ---------- pastel field ---------- */
.field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.field i{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.62; will-change:transform; }
.field i:nth-child(1){ width:52vw; height:52vw; left:-14vw; top:-18vw; background:var(--wash-peri); animation:drift1 34s var(--ease-io) infinite alternate; }
.field i:nth-child(2){ width:44vw; height:44vw; right:-12vw; top:-6vw; background:var(--wash-pink); opacity:.55; animation:drift2 40s var(--ease-io) infinite alternate; }
.field i:nth-child(3){ width:40vw; height:40vw; left:30vw; top:22vw; background:var(--wash-lilac); opacity:.5; animation:drift3 46s var(--ease-io) infinite alternate; }
.field::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(247,247,251,0) 55%, var(--surface-2) 100%); }
@keyframes drift1{ to{ transform:translate3d(8vw, 6vw, 0) scale(1.08); } }
@keyframes drift2{ to{ transform:translate3d(-10vw, 8vw, 0) scale(.92); } }
@keyframes drift3{ to{ transform:translate3d(-6vw, -8vw, 0) scale(1.12); } }
.grain{ position:absolute; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .6 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- hero ---------- */
.hero{ position:relative; padding-top:calc(var(--nav-h) + clamp(56px, 9vw, 120px)); padding-bottom:clamp(64px, 8vw, 112px); }
.hero .wrap{ position:relative; z-index:1; }
.hero-copy{ display:grid; gap:28px; max-width:980px; }
.hero-copy .lede{ max-width:31em; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.hero-show{ margin-top:clamp(56px, 7vw, 88px); display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; align-items:start; }
@media (max-width:1100px){ .hero-show{ grid-template-columns:1fr; } }

/* product frame: no fake browser, a quiet stage */
.frame{ position:relative; border-radius:var(--r-5); background:#fff; box-shadow:var(--shadow-frame); overflow:hidden; isolation:isolate; }
.frame video, .frame img.poster{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; background:#eef0fb; }
.frame .play{ position:absolute; right:14px; bottom:14px; z-index:2; width:36px; height:36px; border-radius:50%; border:0; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--shadow-pop); cursor:pointer; display:grid; place-items:center; opacity:0; transition:opacity var(--t-mid) var(--ease); }
.frame:hover .play, .frame .play:focus-visible{ opacity:1; }
.frame .play svg{ width:14px; height:14px; color:var(--ink-900); }
.frame .demo{ position:absolute; left:14px; bottom:14px; z-index:2; font:400 12px/1 var(--f-mono); letter-spacing:.04em; color:var(--slate-500); background:rgba(255,255,255,.82); padding:6px 9px; border-radius:var(--r-pill); }

/* synced callout rail */
.rail{ list-style:none; margin:0; padding:0; display:grid; gap:4px; counter-reset:c; }
.rail li{ position:relative; padding:16px 18px 18px 50px; border-radius:var(--r-4); cursor:pointer; transition:background var(--t-mid) var(--ease); }
.rail li::before{ counter-increment:c; content:counter(c); position:absolute; left:16px; top:15px; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-strong); font:400 12px/20px var(--f-mono); text-align:center; color:var(--slate-500); transition:background-color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease); }
.rail li > .rl{ all:unset; display:block; cursor:pointer; }
.rail li > .rl:focus-visible{ outline:2px solid var(--blue-600); outline-offset:4px; border-radius:4px; }
.rail li b{ display:block; font-weight:500; color:var(--ink-900); font-size:16px; line-height:1.35; }
.rail li span{ display:block; font-size:14.5px; line-height:1.5; color:var(--slate-500); margin-top:4px; }
.rail li .bar{ position:absolute; left:50px; right:18px; bottom:8px; height:2px; background:var(--line); border-radius:2px; overflow:hidden; opacity:0; transition:opacity var(--t-mid); }
.rail li .bar i{ display:block; height:100%; width:100%; background:var(--blue-600); transform-origin:left; transform:scaleX(0); }
.rail li.on{ background:rgba(255,255,255,.72); box-shadow:0 0 0 1px rgba(0,31,74,.05); }
.rail li.on::before{ background:var(--blue-600); border-color:var(--blue-600); color:#fff; }
.rail li.on .bar{ opacity:1; }
.rail li:not(.on) b{ color:var(--ink-700); }
@media (max-width:1100px){ .rail{ grid-template-columns:repeat(3, minmax(0,1fr)); } .rail li span{ display:none; } }
@media (max-width:640px){ .rail{ grid-template-columns:1fr; } .rail li:not(.on){ display:none; } .rail li span{ display:block; } }

.proof{ display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center; margin-top:40px; font:400 13px/1.4 var(--f-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--slate-500); }
.proof b{ font-weight:400; color:var(--ink-700); }

/* ---------- platform model ---------- */
.model{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px, 6vw, 88px); align-items:start; }
@media (max-width:960px){ .model{ grid-template-columns:1fr; } }
.stack{ position:sticky; top:calc(var(--nav-h) + 40px); aspect-ratio:1/1; max-width:520px; width:100%; }
@media (max-width:960px){ .stack{ position:relative; top:0; max-width:420px; margin:0 auto; } }
.stack svg{ width:100%; height:100%; overflow:visible; }
.stack .pl{ transition:transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease); transform-box:fill-box; }
.stack .pl .face{ fill:#fff; stroke:var(--line-strong); stroke-width:1; transition:fill var(--t-slow) var(--ease), stroke var(--t-slow) var(--ease); }
.stack .pl .edge{ fill:#e6eaf3; }
.stack .pl text{ font:400 13px var(--f-mono); letter-spacing:.06em; fill:var(--slate-500); text-transform:uppercase; }
.stack .pl.on .face{ fill:#fff; stroke:var(--blue-600); stroke-width:1.5; }
.stack .pl.on text{ fill:var(--blue-600); }
.stack .pl.dim{ opacity:.45; }

.layers{ display:grid; gap:12px; }
.layer{ border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px var(--line); transition:box-shadow var(--t-mid) var(--ease); }
.layer.open{ box-shadow:0 0 0 1px var(--line-strong), 0 18px 40px -18px rgba(0,31,74,.18); }
.layer > button{ width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; text-align:left; padding:24px 24px; border:0; background:transparent; cursor:pointer; border-radius:var(--r-4); }
.layer .num{ font:400 13px/1 var(--f-mono); color:var(--slate-500); letter-spacing:.04em; }
.layer .t{ display:block; font-size:22px; font-weight:500; color:var(--ink-900); letter-spacing:-.018em; line-height:1.2; }
.layer .s{ display:block; font-size:15.5px; color:var(--slate-500); margin-top:4px; line-height:1.45; }
.layer .pm{ width:32px; height:32px; border-radius:50%; box-shadow:0 0 0 1px var(--line-strong); position:relative; transition:transform var(--t-mid) var(--ease), background var(--t-mid); }
.layer .pm::before,.layer .pm::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background:var(--ink-900); transform:translate(-50%,-50%); transition:transform var(--t-mid) var(--ease); }
.layer .pm::after{ transform:translate(-50%,-50%) rotate(90deg); }
.layer.open .pm{ background:var(--ink-900); }
.layer.open .pm::before,.layer.open .pm::after{ background:#fff; }
.layer.open .pm::after{ transform:translate(-50%,-50%) rotate(0deg); }
.layer .panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 380ms var(--ease); }
.layer .panel > div > .inner{ opacity:0; transition:opacity 240ms var(--ease); }
.layer.open .panel > div > .inner{ opacity:1; transition-delay:80ms; }
.layer.open .panel{ grid-template-rows:1fr; }
.layer .panel > div{ overflow:hidden; }
.layer .inner{ padding:0 24px 26px 24px; display:grid; gap:20px; }
@media (min-width:600px){ .layer .inner{ padding-left:64px; } }
.layer .inner p{ max-width:34em; }
.agents{ display:grid; gap:10px; }
.agents .row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.agents .lvl{ font:400 12px/1 var(--f-mono); color:var(--slate-500); letter-spacing:.05em; text-transform:uppercase; width:100%; margin-top:6px; }
.agent{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--r-3); background:var(--surface-2); box-shadow:0 0 0 1px var(--line); font-size:14px; color:var(--ink-700); }
.agent.orch{ background:var(--ink-900); color:#fff; box-shadow:none; }
.agent i{ width:7px; height:7px; border-radius:50%; background:var(--c, var(--accent)); }
.stacklist{ display:flex; flex-wrap:wrap; gap:8px; }
.mini-frame{ border-radius:var(--r-4); overflow:hidden; box-shadow:0 0 0 1px var(--line); }
.mini-frame img{ aspect-ratio:16/9; object-fit:cover; width:100%; height:auto; }

/* ---------- services stage (night) ---------- */
.night{ background:var(--night); color:var(--on-night-2); position:relative; overflow:hidden; isolation:isolate; }
.night h2,.night h3,.night h4{ color:var(--on-night); }
.night .eyebrow{ color:var(--on-night-3); }
.night .lede{ color:var(--on-night-2); }
.night .rose{ position:absolute; z-index:-1; right:-8vw; top:-4vw; width:min(58vw, 760px); aspect-ratio:457/387; opacity:.9; pointer-events:none; }
.night .rose canvas{ width:100%; height:100%; }
.night .rose::after{ content:""; position:absolute; inset:-2px; background:radial-gradient(closest-side, rgba(11,16,40,0) 40%, var(--night) 100%); }
.night .glow{ position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(to bottom, rgba(11,16,40,0), var(--night)); z-index:-1; }

.ind{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ind .lbl{ font:400 13px/1 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--on-night-3); margin-right:6px; }
.night .chip{ border-color:var(--night-line-2); color:var(--on-night-2); }
.night .chip:hover{ border-color:var(--on-night); color:var(--on-night); }
.night .chip[aria-pressed="true"]{ background:var(--on-night); border-color:var(--on-night); color:var(--night); }

.explorer{ display:grid; grid-template-columns:330px minmax(0,1fr); gap:28px; margin-top:36px; align-items:start; }
@media (max-width:1060px){ .explorer{ grid-template-columns:1fr; } }
.menu{ display:grid; gap:24px; position:sticky; top:calc(var(--nav-h) + 24px); }
@media (max-width:1060px){ .menu{ position:relative; top:0; } }
.pgroup h4{ font:400 13px/1 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--on-night-3); display:flex; align-items:center; gap:10px; margin:0 0 8px 14px; }
.pgroup ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.svc{ display:grid; grid-template-columns:1fr auto; align-items:center; border-radius:var(--r-3); transition:background var(--t-fast) var(--ease); }
.svc:hover{ background:rgba(255,255,255,.04); }
.svc.focus{ background:rgba(255,255,255,.07); }
.svc .name{ text-align:left; border:0; background:transparent; color:var(--on-night-2); padding:11px 8px 11px 14px; cursor:pointer; font-size:15.5px; line-height:1.3; border-radius:var(--r-3); }
.svc.focus .name{ color:var(--on-night); }
.svc .add{ width:30px; height:30px; margin-right:8px; border-radius:var(--r-2); border:1px solid var(--night-line-2); background:transparent; cursor:pointer; display:grid; place-items:center; transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform 120ms ease-out; }
.svc .add svg{ width:14px; height:14px; color:var(--on-night-2); }
.svc .add:hover{ border-color:var(--on-night); }
.svc .add[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); }
.svc .add[aria-pressed="true"] svg{ color:var(--night); }
.svc .add .ic-check{ display:none; } .svc .add[aria-pressed="true"] .ic-check{ display:block; } .svc .add[aria-pressed="true"] .ic-plus{ display:none; }

.presets{ display:flex; flex-wrap:wrap; gap:8px; }
.presets .lbl{ width:100%; font:400 13px/1 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--on-night-3); margin:0 0 6px 2px; }
.presets .chip{ height:32px; font-size:13.5px; padding:0 12px; }

.panel-card{ background:var(--night-2); border-radius:var(--r-5); box-shadow:0 0 0 1px var(--night-line), 0 40px 80px -30px rgba(0,0,0,.5); overflow:hidden; }
.tabs{ display:flex; gap:4px; padding:8px; border-bottom:1px solid var(--night-line); }
.tabs button{ border:0; background:transparent; color:var(--on-night-3); padding:9px 14px; border-radius:var(--r-pill); cursor:pointer; font-size:14px; display:inline-flex; gap:8px; align-items:center; transition:color var(--t-fast), background var(--t-fast); }
.tabs button[aria-selected="true"]{ color:var(--on-night); background:rgba(255,255,255,.08); }
.tabs button .count{ font:400 12px/1 var(--f-mono); background:var(--accent); color:var(--night); border-radius:var(--r-pill); padding:3px 7px; }
.tabs button .count:empty{ display:none; }
.tabs .spacer{ flex:1; }

.detail{ display:grid; }
.detail .media{ position:relative; background:#eef0fb; }
.detail .media .frame{ border-radius:0; box-shadow:none; }
.detail .body{ padding:clamp(22px, 3vw, 36px); display:grid; gap:26px; }
.detail .top{ display:grid; gap:12px; }
.detail .pill-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font:400 13px/1 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--on-night-3); }
.detail h3{ font-size:clamp(26px, 2.6vw, 34px); letter-spacing:-.025em; line-height:1.08; }
.detail .sum{ font-size:18px; line-height:1.5; color:var(--on-night-2); max-width:36em; }
.detail .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:720px){ .detail .grid2{ grid-template-columns:1fr; } }
.detail h5{ margin:0 0 12px; font:400 12.5px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--on-night-3); font-weight:400; }
.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ticks li{ position:relative; padding-left:26px; font-size:15.5px; line-height:1.45; color:var(--on-night-2); }
.ticks li::before{ content:""; position:absolute; left:2px; top:5px; width:12px; height:7px; border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(-45deg); }
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:s; }
.steps li{ display:grid; grid-template-columns:28px 1fr; gap:8px; font-size:15px; line-height:1.45; }
.steps li::before{ counter-increment:s; content:"0" counter(s); font:400 13px/1.6 var(--f-mono); color:var(--on-night-3); }
.steps li b{ font-weight:500; color:var(--on-night); }
.night .tag{ background:rgba(255,255,255,.06); color:var(--on-night-2); box-shadow:inset 0 0 0 1px var(--night-line); }
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.indbox{ border-radius:var(--r-4); padding:18px 20px; background:linear-gradient(135deg, rgba(29,184,242,.10), rgba(137,107,237,.10)); box-shadow:inset 0 0 0 1px rgba(29,184,242,.22); }
.indbox h5{ color:var(--accent); }
.indbox p{ color:var(--on-night); font-size:16px; line-height:1.5; }
.detail .foot{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding-top:4px; }
.night .textlink{ color:var(--accent); }
.swap{ animation:swapIn var(--t-slow) var(--ease) both; }
.panel-card .swap, .indbox.swap, .hubtext.swap{ animation:swapInUI 280ms var(--ease) both; }
@keyframes swapInUI{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes swapIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* composer */
.composer{ padding:clamp(22px, 3vw, 36px); display:grid; gap:28px; }
.composer .empty{ display:grid; gap:14px; place-items:start; padding:40px 0 16px; }
.composer .empty p{ max-width:32em; font-size:17px; color:var(--on-night-2); }
.flow{ position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:clamp(28px, 4vw, 56px); align-items:center; min-height:220px; padding:8px 0; }
.flow svg.edges{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.flow svg.edges path{ fill:none; stroke:rgba(29,184,242,.55); stroke-width:1.5; }
.flow svg.edges path.back{ stroke-dasharray:4 5; stroke:rgba(238,242,255,.3); }
.flow svg.edges circle{ fill:var(--accent); }
.col{ display:grid; gap:12px; position:relative; z-index:1; }
.node{ border-radius:var(--r-4); background:var(--night-3); box-shadow:0 0 0 1px var(--night-line-2); padding:14px 16px; display:grid; gap:6px; }
.node .p{ display:flex; align-items:center; gap:8px; font:400 12px/1 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--on-night-3); }
.node b{ font-weight:500; color:var(--on-night); font-size:15.5px; line-height:1.3; }
.node.pop{ animation:nodeIn 420ms var(--ease) both; }
.node.fresh{ animation:nodeIn 260ms var(--ease) both; }
@keyframes nodeIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.handoffs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:8px; }
.handoffs li{ display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; font-size:14.5px; padding:12px 14px; border-radius:var(--r-3); background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px var(--night-line); }
.handoffs li .from, .handoffs li .to{ color:var(--on-night); }
.handoffs li .what{ width:100%; color:var(--on-night-3); font-size:13.5px; }
.handoffs li svg{ width:18px; height:18px; color:var(--accent); }
@media (max-width:720px){ .flow{ grid-auto-flow:row; grid-auto-columns:auto; } .flow svg.edges{ display:none; } }
.composer .sum3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
@media (max-width:860px){ .composer .sum3{ grid-template-columns:1fr; } }
.composer .cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding-top:22px; border-top:1px solid var(--night-line); }
.composer .cta .note{ font-size:14px; color:var(--on-night-3); margin-left:auto; }
.toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px); opacity:0; z-index:60; background:var(--ink-900); color:#fff; padding:12px 18px; border-radius:var(--r-pill); font-size:14.5px; box-shadow:var(--shadow-pop); transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); pointer-events:none; }
.toast.on{ opacity:1; transform:translate(-50%, 0); }

/* selection tray (mobile) */
.tray{ display:none; }
@media (max-width:1060px){
  .tray{ display:flex; position:sticky; bottom:16px; z-index:5; margin-top:16px; align-items:center; gap:12px; padding:10px 10px 10px 18px; border-radius:var(--r-pill); background:var(--on-night); color:var(--night); box-shadow:0 18px 40px -10px rgba(0,0,0,.5); }
  .tray[hidden]{ display:none; }
  .tray span{ font-size:14.5px; }
  .tray .btn{ margin-left:auto; height:38px; font-size:14px; }
  .pgroup ul{ grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ---------- atomic ---------- */
.toggle{ display:inline-flex; padding:4px; border-radius:var(--r-pill); background:#fff; box-shadow:0 0 0 1px var(--line); position:relative; }
.toggle button{ position:relative; z-index:1; border:0; background:transparent; padding:10px 20px; border-radius:var(--r-pill); cursor:pointer; color:var(--slate-600); font-size:15px; transition:color var(--t-mid) var(--ease); }
.toggle button[aria-pressed="true"]{ color:#fff; }
.toggle .knob{ position:absolute; z-index:0; top:4px; bottom:4px; left:4px; border-radius:var(--r-pill); background:var(--ink-900); transition:transform 360ms var(--ease-io), width 360ms var(--ease-io); }
.org{ margin-top:40px; position:relative; min-height:540px; }
.org .view{ transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.org .view[hidden]{ display:block; opacity:0; transform:translateY(12px); pointer-events:none; position:absolute; inset:0; visibility:hidden; }
.silos{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; }
@media (max-width:980px){ .silos{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.silo{ background:#fff; border-radius:var(--r-4); box-shadow:0 0 0 1px var(--line); padding:18px; display:grid; gap:10px; align-content:start; }
.silo h4{ font-size:16px; }
.silo ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px; color:var(--slate-500); }
.silo li{ padding:7px 10px; border-radius:var(--r-2); background:var(--surface-2); }
.pains{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.pains .tag{ background:#fff; box-shadow:0 0 0 1px var(--line); color:var(--slate-600); }
.pains .tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--slate-400); }
.hubs{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px, 4vw, 56px); align-items:center; }
@media (max-width:980px){ .hubs{ grid-template-columns:1fr; } }
.hubmap{ position:relative; aspect-ratio:1/1; max-width:520px; width:100%; margin:0 auto; }
.hubmap svg{ width:100%; height:100%; overflow:visible; }
.hubmap .ring{ fill:none; stroke:var(--line-strong); stroke-dasharray:2 6; }
.hubmap .spoke{ stroke:var(--line-strong); stroke-width:1; }
.hubmap .spoke.on{ stroke:var(--blue-600); stroke-width:1.5; }
.hubmap .orbit{ fill:var(--blue-600); }
.hubbtn{ position:absolute; transform:translate(-50%,-50%); border:0; cursor:pointer; background:#fff; box-shadow:0 0 0 1px var(--line), 0 10px 24px -12px rgba(0,31,74,.25); border-radius:var(--r-pill); padding:12px 18px; font-size:15px; font-weight:500; color:var(--ink-900); white-space:nowrap; transition:background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), transform 120ms ease-out; }
.hubbtn:hover{ box-shadow:0 0 0 1px var(--ink-900), 0 10px 24px -12px rgba(0,31,74,.25); }
.hubbtn[aria-pressed="true"]{ background:var(--ink-900); color:#fff; box-shadow:0 0 0 1px var(--ink-900), 0 14px 30px -12px rgba(0,31,74,.45); }
.hubbtn.core{ padding:20px 26px; font-size:17px; }
.hubtext{ display:grid; gap:14px; min-height:220px; align-content:start; }
.hubtext h3{ font-size:clamp(26px, 2.6vw, 34px); letter-spacing:-.025em; }
.hubtext .lead{ font:400 13px/1 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--slate-500); }

/* ---------- get started ---------- */
.ways{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
@media (max-width:980px){ .ways{ grid-template-columns:1fr; } }
.way{ background:#fff; border-radius:var(--r-5); box-shadow:0 0 0 1px var(--line); padding:28px; display:grid; gap:14px; align-content:start; position:relative; transition:box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); text-decoration:none; }
@media (hover:hover) and (pointer:fine){ .way:hover{ box-shadow:0 0 0 1px var(--line-strong), 0 24px 48px -24px rgba(0,31,74,.25); transform:translateY(-2px); } }
.way .k{ display:flex; justify-content:space-between; align-items:center; font:400 13px/1 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--slate-500); }
.way h3{ font-size:28px; letter-spacing:-.025em; }
.way .sub{ font-weight:500; color:var(--ink-700); }
.way p{ font-size:15.5px; line-height:1.55; }
.assess{ margin-top:24px; border-radius:var(--r-5); overflow:hidden; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); background:var(--ink-900); color:rgba(255,255,255,.72); position:relative; isolation:isolate; }
@media (max-width:980px){ .assess{ grid-template-columns:1fr; } }
.assess .txt{ padding:clamp(28px, 4vw, 52px); display:grid; gap:18px; align-content:center; }
.assess h3{ color:#fff; font-size:clamp(28px, 3vw, 40px); letter-spacing:-.028em; line-height:1.06; max-width:16ch; }
.assess .eyebrow{ color:rgba(255,255,255,.55); }
.assess .chips-row{ display:flex; flex-wrap:wrap; gap:8px; }
.assess .chips-row .tag{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); }
.assess .vid{ position:relative; min-height:280px; }
.assess .vid video,.assess .vid img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.assess .vid::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--ink-900), rgba(0,31,74,0) 30%); }
@media (max-width:980px){ .assess .vid::after{ background:linear-gradient(0deg, var(--ink-900), rgba(0,31,74,0) 40%); } }

/* ---------- close + footer ---------- */
.close{ background:var(--night); color:var(--on-night-2); position:relative; overflow:hidden; isolation:isolate; }
.close canvas.loop{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
.close .inner{ padding-block:clamp(110px, 14vw, 200px) clamp(64px, 8vw, 100px); display:grid; gap:28px; justify-items:start; }
.close h2{ color:var(--on-night); font-size:clamp(40px, 5.6vw, 80px); line-height:1; letter-spacing:-.04em; max-width:14ch; }
.close .lede{ color:var(--on-night-2); }
.foot{ border-top:1px solid var(--night-line); padding-block:32px 40px; display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; font-size:14px; }
.foot nav{ display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:center; }
.foot a{ color:var(--on-night-2); text-decoration:none; }
.foot a:hover{ color:var(--on-night); }
.foot .lockup{ color:var(--on-night); }
.foot .lockup .by{ border-color:var(--night-line-2); }
@media (max-width:860px){ .foot{ grid-template-columns:1fr; justify-items:start; } .foot nav{ justify-content:flex-start; } }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(16px); transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay:var(--d, 0ms); }
.rv.in{ opacity:1; transform:none; }
.split-words .w{ display:inline-block; opacity:0; transform:translateY(.32em); filter:blur(6px); transition:opacity 700ms var(--ease), transform 700ms var(--ease), filter 700ms var(--ease); transition-delay:calc(var(--i) * 55ms + 80ms); }
.split-words.in .w{ opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion:reduce){
  .rv,.split-words .w{ opacity:1!important; transform:none!important; filter:none!important; transition:none!important; }
  .field i{ animation:none!important; }
  .swap,.node.pop{ animation:none!important; }
  *{ scroll-behavior:auto!important; }
}
.no-js .rv{ opacity:1; transform:none; }

/* ---------- product scenes (HTML-built UI, DS v3 look) ---------- */
.scene{ position:relative; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(120deg, #eef1ff 0%, #f7f2fb 45%, #fbeef3 100%); font-family:var(--f-sans); color:var(--ink-900); container-type:inline-size; }
.scene::before{ content:""; position:absolute; width:60%; height:90%; right:-10%; top:-20%; border-radius:50%; background:#d7d3ff; filter:blur(50px); opacity:.6; }
.scene .card{ position:absolute; background:rgba(255,255,255,.92); border-radius:2.1cqw; box-shadow:0 0 0 1px rgba(0,31,74,.06), 0 1.4cqw 3cqw -1cqw rgba(0,31,74,.18); padding:2.6cqw; }
.scene .k{ font:400 1.45cqw/1.2 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); }
.scene .ttl{ font-size:2.9cqw; font-weight:500; letter-spacing:-.02em; line-height:1.15; color:var(--ink-900); }
.scene .txt{ font-size:1.9cqw; line-height:1.4; color:var(--slate-600); }
.scene .row{ display:flex; align-items:center; gap:1.4cqw; }
.scene .pillx{ display:inline-flex; align-items:center; gap:.8cqw; font-size:1.5cqw; padding:.6cqw 1.2cqw; border-radius:99px; background:#eef2f8; color:var(--ink-700); white-space:nowrap; }
.scene .pillx.blue{ background:var(--blue-100); color:var(--blue-700); }
.scene .pillx.green{ background:#e3f6ee; color:#11734f; }
.scene .pillx.red{ background:#fde9ee; color:#b0204a; }
.scene .pillx.violet{ background:#efeaff; color:#5b3fc4; }
.scene .btnx{ display:inline-flex; align-items:center; gap:.8cqw; font-size:1.6cqw; padding:1cqw 1.8cqw; border-radius:99px; background:var(--blue-600); color:#fff; white-space:nowrap; }
.scene .bar{ height:1cqw; border-radius:99px; background:#e8ecf4; overflow:hidden; }
.scene .bar i{ display:block; height:100%; border-radius:99px; background:var(--c, var(--blue-600)); width:var(--w, 0%); transform-origin:left center; }
.scene .bar i[data-at]{ opacity:1; transform:scaleX(0); transition:transform 900ms var(--ease); }
.scene .bar i[data-at].on{ transform:scaleX(1); }
.scene .ai{ box-shadow:0 0 0 .2cqw rgba(0,213,208,.75), 0 1.4cqw 3cqw -1cqw rgba(0,31,74,.18); }
.scene .ai-l{ font:400 1.25cqw/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:#00838a; }
.scene [data-at]{ opacity:0; transform:translateY(1.2cqw); transition:opacity 520ms var(--ease), transform 520ms var(--ease); }
.scene [data-at].on{ opacity:1; transform:none; }
.scene .cursor{ position:absolute; width:2.4cqw; height:2.4cqw; z-index:5; transition:left 900ms var(--ease-io), top 900ms var(--ease-io); pointer-events:none; }
.scene .typing::after{ content:""; display:inline-block; width:.15cqw; height:2cqw; background:var(--blue-600); margin-left:.2cqw; vertical-align:-.3cqw; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.scene svg.spark{ width:14cqw; height:4cqw; overflow:visible; }
.scene svg.spark path{ fill:none; stroke:var(--c, var(--blue-600)); stroke-width:.35cqw; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1200ms var(--ease); }
.scene .on svg.spark path, .scene svg.spark.on path{ stroke-dashoffset:0; }
@media (prefers-reduced-motion:reduce){ .scene [data-at]{ opacity:1; transform:none; transition:none; } .scene .bar i[data-at]{ transform:scaleX(1); transition:none; } .scene svg.spark path{ stroke-dashoffset:0; transition:none; } }

/* ---------- service page ---------- */
.svc-hero{ position:relative; padding-top:calc(var(--nav-h) + clamp(48px, 7vw, 96px)); padding-bottom:clamp(48px, 6vw, 80px); }
.crumbs{ display:flex; gap:8px; align-items:center; font:400 13px/1 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--slate-500); }
.crumbs a{ text-decoration:none; } .crumbs a:hover{ color:var(--ink-900); }
.svc-hero h1{ font-size:clamp(40px, 5.6vw, 76px); line-height:1; letter-spacing:-.038em; max-width:15ch; margin-top:22px; }
.svc-hero .lede{ margin-top:22px; }
.svc-hero .hero-cta{ margin-top:30px; }
.svc-media{ margin-top:clamp(40px, 5vw, 64px); }
.facts{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; border-top:1px solid var(--line); }
.facts > div{ padding:22px 24px 0 0; display:grid; gap:10px; align-content:start; }
.facts h5{ margin:0; font:400 12.5px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); font-weight:400; }
@media (max-width:860px){ .facts{ grid-template-columns:1fr 1fr; gap:12px 0; } }
.two{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px, 6vw, 96px); }
@media (max-width:900px){ .two{ grid-template-columns:1fr; } }
.lightticks{ list-style:none; margin:0; padding:0; display:grid; }
.lightticks li{ padding:16px 0 16px 34px; border-top:1px solid var(--line); position:relative; color:var(--ink-700); font-size:17px; }
.lightticks li:last-child{ border-bottom:1px solid var(--line); }
.lightticks li::before{ content:""; position:absolute; left:4px; top:22px; width:13px; height:7px; border-left:1.5px solid var(--blue-600); border-bottom:1.5px solid var(--blue-600); transform:rotate(-45deg); }
.howto{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; counter-reset:h; }
@media (max-width:980px){ .howto{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .howto{ grid-template-columns:1fr; } }
.howto li{ padding:24px; background:#fff; border-radius:var(--r-4); box-shadow:0 0 0 1px var(--line); display:grid; gap:10px; align-content:start; }
.howto li::before{ counter-increment:h; content:"0" counter(h); font:400 13px/1 var(--f-mono); color:var(--blue-600); }
.howto li b{ font-weight:500; color:var(--ink-900); font-size:18px; letter-spacing:-.01em; }
.howto li p{ font-size:15.5px; line-height:1.55; }
.ind-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.ind-panel{ background:#fff; border-radius:var(--r-5); box-shadow:0 0 0 1px var(--line); padding:clamp(24px, 4vw, 44px); }
.ind-panel p{ font-size:clamp(20px, 2vw, 26px); line-height:1.4; letter-spacing:-.012em; color:var(--ink-900); max-width:30em; }
.related{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.rel{ display:grid; gap:8px; padding:20px; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px var(--line); text-decoration:none; transition:box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
@media (hover:hover) and (pointer:fine){ .rel:hover{ box-shadow:0 0 0 1px var(--ink-900); transform:translateY(-2px); } }
.rel .p{ display:flex; gap:8px; align-items:center; font:400 12px/1 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--slate-500); }
.rel b{ font-weight:500; color:var(--ink-900); font-size:17px; }
.rel span{ font-size:14.5px; color:var(--slate-500); }
.band{ background:#fff; border-block:1px solid var(--line); }

/* ---------- catalogue ---------- */
.cat{ display:grid; gap:56px; }
.cat-group{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:32px; }
@media (max-width:900px){ .cat-group{ grid-template-columns:1fr; gap:16px; } }
.cat-group .head{ display:grid; gap:10px; align-content:start; }
.cat-group .head h3{ display:flex; gap:10px; align-items:center; font-size:22px; }
.cat-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.cc{ display:grid; gap:10px; padding:24px; background:#fff; border-radius:var(--r-4); box-shadow:0 0 0 1px var(--line); text-decoration:none; align-content:start; transition:box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
@media (hover:hover) and (pointer:fine){ .cc:hover{ box-shadow:0 0 0 1px var(--ink-900), 0 18px 36px -24px rgba(0,31,74,.35); transform:translateY(-2px); } }
.cc b{ font-weight:500; color:var(--ink-900); font-size:19px; letter-spacing:-.012em; line-height:1.25; }
.cc p{ font-size:15px; line-height:1.5; }
.cc .go{ margin-top:4px; }
.live{ display:inline-flex; align-items:center; gap:7px; font:400 12px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:#11734f; }
.live::before{ content:""; width:7px; height:7px; border-radius:50%; background:#1fa971; box-shadow:0 0 0 3px rgba(31,169,113,.16); }

/* ---------- forms ---------- */
.form{ display:grid; gap:18px; }
.form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .form .row2{ grid-template-columns:1fr; } }
.field-l{ display:grid; gap:8px; }
.field-l label, .field-l .lab{ font-size:14.5px; font-weight:500; color:var(--ink-900); }
.field-l .hint{ font-size:13.5px; color:var(--slate-500); }
.input{ width:100%; height:50px; padding:0 16px; border-radius:var(--r-3); border:1px solid var(--line-strong); background:#fff; font:400 16px var(--f-sans); color:var(--ink-900); transition:border-color var(--t-fast), box-shadow var(--t-fast); }
textarea.input{ height:auto; min-height:130px; padding:14px 16px; resize:vertical; line-height:1.5; }
select.input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23001f4a' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.input:hover{ border-color:var(--slate-400); }
.input:focus{ outline:none; border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(5,94,251,.16); }
.input[aria-invalid="true"]{ border-color:#d0254f; box-shadow:0 0 0 3px rgba(208,37,79,.12); }
.err{ font-size:13.5px; color:#b0204a; min-height:0; }
.check{ display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; font-size:14.5px; line-height:1.5; color:var(--slate-600); cursor:pointer; }
.check input{ width:20px; height:20px; margin:1px 0 0; accent-color:var(--blue-600); }
.check a{ color:var(--blue-600); }
.svcpick{ display:flex; flex-wrap:wrap; gap:8px; }
.svcpick .chip{ height:34px; font-size:13.5px; }
.svcpick .chip .pdot{ width:7px; height:7px; }
.formnote{ font-size:14px; color:var(--slate-500); }
.status{ padding:16px 18px; border-radius:var(--r-3); font-size:15px; line-height:1.5; }
.status.ok{ background:#e9f7f0; color:#0f5e40; }
.status.bad{ background:#fdeef2; color:#8f1a3c; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- utility ---------- */
.mt-0{ margin-top:0; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-40{ margin-top:40px; } .mt-56{ margin-top:56px; }
.center{ text-align:center; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- additions ---------- */
.rail.dark{ grid-template-columns:repeat(3, minmax(0,1fr)); padding:10px; gap:6px; border-bottom:1px solid var(--night-line); }
.rail.dark li{ padding:14px 14px 16px 44px; }
.rail.dark li::before{ left:12px; top:13px; border-color:var(--night-line-2); color:var(--on-night-3); }
.rail.dark li b{ color:var(--on-night-2); font-size:14.5px; }
.rail.dark li span{ font-size:13.5px; color:var(--on-night-3); }
.rail.dark li.on{ background:rgba(255,255,255,.06); box-shadow:none; }
.rail.dark li.on b{ color:var(--on-night); }
.rail.dark li.on::before{ background:var(--accent); border-color:var(--accent); color:var(--night); }
.rail.dark li .bar{ left:44px; right:14px; background:var(--night-line); }
.rail.dark li .bar i{ background:var(--accent); }
@media (max-width:860px){ .rail.dark{ grid-template-columns:1fr; } .rail.dark li:not(.on){ display:none; } }
.h5n{ margin:0 0 12px; font:400 12.5px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--on-night-3); }
.composer .top{ display:grid; gap:4px; }
.filmbox{ border:0; padding:0; background:transparent; max-width:min(1100px, 94vw); width:100%; overflow:visible; }
.filmbox::backdrop{ background:rgba(5,9,30,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.filmwrap{ position:relative; border-radius:var(--r-5); overflow:hidden; box-shadow:0 40px 100px -20px rgba(0,0,0,.6); background:#000; }
.filmwrap video{ width:100%; aspect-ratio:16/9; display:block; }
.filmclose{ position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:var(--ink-900); cursor:pointer; display:grid; place-items:center; }
.filmbox[open]{ animation:swapInUI 320ms var(--ease) both; }
.radar-art{ display:grid; place-items:center; padding:24px; background:radial-gradient(closest-side, rgba(29,184,242,.16), rgba(0,31,74,0)); }
.radar-art::after{ display:none; }
.radar{ width:min(360px, 80%); height:auto; overflow:visible; }
.radar .rings polygon{ fill:none; stroke:rgba(255,255,255,.12); }
.radar .axes line{ stroke:rgba(255,255,255,.08); }
.radar .shape{ fill:rgba(29,184,242,.18); stroke:var(--accent); stroke-width:1.5; stroke-linejoin:round; }
.grid-gap{ display:grid; gap:0; }
.assess .btn.line-light{ --fg:#fff; --bd:rgba(255,255,255,.28); }
.assess .btn.line-light:hover{ --bd:#fff; }
.rail.row3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:860px){ .rail.row3{ grid-template-columns:1fr; } .rail.row3 li:not(.on){ display:none; } .rail.row3 li span{ display:block; } }
.svc-hero .crumbs .pdot{ width:8px; height:8px; }

/* ---------- platform page ---------- */
.day{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px, 5vw, 72px); align-items:start; }
@media (max-width:960px){ .day{ grid-template-columns:1fr; } }
.day-list{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.day-list button{ position:relative; width:100%; text-align:left; border:0; background:transparent; cursor:pointer; padding:18px 18px 20px; border-radius:var(--r-4); display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:baseline; color:var(--slate-600); font-size:17px; transition:background var(--t-mid) var(--ease), color var(--t-mid); }
.day-list button:hover{ background:rgba(255,255,255,.6); }
.day-list .tm{ font:400 14px/1 var(--f-mono); color:var(--slate-500); }
.day-list li.on button{ background:#fff; color:var(--ink-900); box-shadow:0 0 0 1px var(--line); }
.day-list li.on .tm{ color:var(--blue-600); }
.day-list .prog{ position:absolute; left:94px; right:18px; bottom:9px; height:2px; background:var(--line); border-radius:2px; overflow:hidden; opacity:0; }
.day-list li.on .prog{ opacity:1; }
.day-list .prog i{ display:block; height:100%; background:var(--blue-600); transform-origin:left; transform:scaleX(0); }
.day-panel .mini-frame{ box-shadow:var(--shadow-frame); border-radius:var(--r-5); }
.day-panel p{ max-width:36em; }
.askline{ display:flex; gap:12px; align-items:baseline; padding:14px 16px; border-radius:var(--r-3); background:#fff; box-shadow:0 0 0 1px var(--line); color:var(--ink-700); }
.askline .mono{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); flex:none; }
.asks{ margin-top:56px; display:grid; gap:16px; }
.ask-row{ display:flex; flex-wrap:wrap; gap:8px; }
.ask{ padding:12px 16px; border-radius:var(--r-pill); background:#fff; box-shadow:0 0 0 1px var(--line); color:var(--ink-700); font-size:15px; }
.tiers{ display:grid; gap:0; }
.tier{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:32px; padding:28px 0; border-top:1px solid var(--line); align-items:center; }
.tier:last-child{ border-bottom:1px solid var(--line); }
@media (max-width:860px){ .tier{ grid-template-columns:1fr; gap:16px; } }
.tier-l{ display:grid; gap:8px; }
.tier-l p{ font-size:15.5px; max-width:30em; }
.tier-r{ display:flex; flex-wrap:wrap; gap:8px; }
.tier-r a.agent{ text-decoration:none; transition:box-shadow var(--t-fast); }
.tier-r a.agent:hover{ box-shadow:0 0 0 1px var(--ink-900); }
.agent.big{ padding:12px 16px; font-size:16px; }
.tier.always .tier-l .eyebrow{ color:#11734f; }
.tiles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px; }
@media (max-width:860px){ .tiles{ grid-template-columns:1fr; gap:24px; } }
.tile{ padding-top:20px; border-top:1px solid var(--ink-900); display:grid; gap:10px; align-content:start; }
.tile p{ font-size:15.5px; }
.principles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--line); border-radius:var(--r-5); overflow:hidden; box-shadow:0 0 0 1px var(--line); }
@media (max-width:860px){ .principles{ grid-template-columns:1fr; } }
.pr{ background:#fff; padding:28px; display:grid; gap:10px; align-content:start; }
.pr p{ font-size:15.5px; }

/* ---------- atomic page ---------- */
.shifts{ display:grid; gap:0; }
.shift{ display:grid; grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr); align-items:center; padding:26px 0; border-top:1px solid var(--line); }
.shift:last-child{ border-bottom:1px solid var(--line); }
.shift .from{ text-align:right; color:var(--slate-500); font-size:clamp(20px, 2.2vw, 30px); letter-spacing:-.02em; line-height:1.2; }
.shift .to{ color:var(--ink-900); font-size:clamp(20px, 2.2vw, 30px); letter-spacing:-.02em; line-height:1.2; font-weight:500; }
.shift .conn{ position:relative; height:2px; margin:0 24px; background:var(--line-strong); }
.shift .conn i{ position:absolute; right:-1px; top:50%; width:9px; height:9px; border-top:2px solid var(--blue-600); border-right:2px solid var(--blue-600); transform:translateY(-50%) rotate(45deg); }
.shift.in .conn{ background:linear-gradient(90deg, var(--line-strong), var(--blue-600)); }
@media (max-width:700px){ .shift{ grid-template-columns:1fr; gap:10px; } .shift .from{ text-align:left; } .shift .conn{ width:48px; margin:0; } }
.roles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
@media (max-width:960px){ .roles{ grid-template-columns:1fr; } }
.rgroup{ display:grid; gap:12px; align-content:start; }
.role{ background:#fff; border-radius:var(--r-4); box-shadow:0 0 0 1px var(--line); padding:22px; display:grid; gap:8px; }
.role .was{ font:400 13px/1.4 var(--f-mono); color:var(--slate-500); }
.role b{ font-weight:500; color:var(--ink-900); font-size:19px; letter-spacing:-.012em; }
.role p{ font-size:15px; line-height:1.55; }
button.textlink{ border:0; background:none; padding:0; cursor:pointer; font:inherit; font-weight:500; justify-self:start; }
.lightticks.compact li{ font-size:15px; padding:10px 0 10px 28px; color:var(--slate-600); }
.lightticks.compact li::before{ top:15px; left:2px; width:11px; height:6px; }
.lightticks.compact li:last-child{ border-bottom:0; }
.svcpick .chip[aria-pressed="true"] .pdot{ box-shadow:0 0 0 2px rgba(255,255,255,.6); }
.status a{ color:inherit; font-weight:500; }
.prose{ max-width:720px; display:grid; gap:16px; }
.prose h2{ margin-top:24px; }
.prose a{ color:var(--blue-600); }

/* scenes on small screens: stack the cards and use readable sizes */
@media (max-width:640px){
  .scene{ aspect-ratio:auto; padding:14px 14px 40px; display:grid; gap:10px; container-type:normal; }
  .scene .card{ position:relative!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; padding:14px!important; border-radius:12px!important; }
  .scene .card .card{ padding:12px!important; }
  .scene .k{ font-size:10.5px; } .scene .ai-l{ font-size:10px; }
  .scene .ttl{ font-size:17px!important; } .scene .txt{ font-size:13.5px!important; }
  .scene .pillx{ font-size:11.5px; padding:3px 9px; } .scene .btnx{ font-size:12.5px; padding:7px 12px; }
  .scene .bar{ height:6px; }
  .scene .lb{ grid-template-columns:92px 1fr!important; gap:10px!important; }
  .scene .tr3{ grid-template-columns:1fr 64px auto!important; gap:8px!important; }
  .scene svg.spark{ width:64px; height:20px; }
  .scene .strip{ flex-wrap:wrap; gap:6px!important; } .scene .strip .sep{ display:none; }
  .scene .st{ flex:1 1 40%!important; font-size:12px!important; padding:8px!important; border-radius:8px!important; }
  .scene .fin{ position:relative!important; right:auto!important; bottom:auto!important; }
  .scene .row{ gap:8px; }
  .assess .vid{ min-height:200px; }
}

/* press feedback on small controls */
.chip, .toggle button, .day-list button, .layer > button .pm{ transition-property:background-color, color, border-color, box-shadow, transform; }
.chip:active, .svc .add:active, .toggle button:active{ transform:scale(.96); transition-duration:120ms; }
.hubbtn:active{ transform:translate(-50%,-50%) scale(.96); }
/* 007 combination count bump */
.tabs button .count{ display:inline-block; }
.tabs button .count.bump{ animation:bump 240ms var(--ease); }
@keyframes bump{ 50%{ transform:scale(1.18); } }
/* 008 mobile menu entrance */
@media (max-width:980px){
  .nav.open ul{ transition:opacity 220ms var(--ease), transform 220ms var(--ease); }
  @starting-style{ .nav.open ul{ opacity:0; transform:translateY(-8px); } }
}
/* 009 success */
.status.ok{ animation:swapIn 420ms var(--ease) both; }
@media (prefers-reduced-motion:reduce){
  .tabs button .count.bump, .status.ok{ animation:none; }
  .nav.open ul{ transition:opacity 160ms ease; }
  .chip:active, .svc .add:active, .toggle button:active{ transform:none; }
}
.night .live{ color:#6fe0b0; }

/* =================== v2 (7 Oct): simpler home, loop model, atomic imagery =================== */
.hero-solo{ margin-top:clamp(56px, 7vw, 88px); }
.hero-solo .frame{ max-width:1120px; }

/* ---------- loop model ---------- */
.lm{ display:grid; grid-template-columns:minmax(0,1.75fr) minmax(300px,.8fr); gap:clamp(24px, 4vw, 64px); align-items:center; }
@media (max-width:1060px){ .lm{ grid-template-columns:1fr; } }
.lm-art{ position:relative; }
.lm-svg{ width:100%; height:auto; overflow:visible; font-family:var(--f-sans); }
.lm-svg [data-dom]{ transition:opacity 420ms var(--ease), filter 420ms var(--ease); }
.lm.focus .lm-svg .lm-cluster[data-dom]:not(.on){ opacity:.5; filter:saturate(.55); }
.lm.focus .lm-svg .lm-cluster.on .lm-svc path{ transform:scale(1.06); filter:drop-shadow(0 8px 16px rgba(0,31,74,.2)); }
.lm-ring path{ fill:none; stroke-width:20; stroke-linejoin:round; }
.lm-pulse{ opacity:0; transition:opacity 300ms var(--ease); filter:drop-shadow(0 0 6px rgba(255,255,255,.9)); }
.lm-ring.on .lm-pulse{ opacity:1; }
.lm-body{ filter:url(#lm-sh); }
.lm-dom{ cursor:pointer; outline:none; }
.lm-dom .lm-body{ transition:transform 420ms var(--ease); transform-box:fill-box; transform-origin:center; }
.lm-dom.on .lm-body{ transform:scale(1.025); }
.lm-dom:focus-visible .lm-body{ stroke:var(--blue-600); stroke-width:4; }
.lm-name{ fill:#fff; font-weight:400; letter-spacing:-.01em; pointer-events:none; }
.lm-you circle{ fill:#f4f5fa; stroke:#fff; stroke-width:6; filter:url(#lm-sh); }
.lm-you text{ fill:var(--ink-900); font-weight:700; letter-spacing:-.02em; }
.lm-stage circle{ fill:#f4f5fa; stroke:#fff; stroke-width:5; filter:url(#lm-sh); }
.lm-stage text{ font-weight:500; pointer-events:none; }
.lm-halo{ opacity:.55; }
.lm-svc{ cursor:pointer; outline:none; }
.lm-svc path{ transition:transform 260ms var(--ease), filter 260ms var(--ease); transform-box:fill-box; transform-origin:center; filter:drop-shadow(0 3px 6px rgba(0,31,74,.14)); }
.lm-svc text{ font-weight:500; pointer-events:none; }
.lm-svc:hover path, .lm-svc.hi path, .lm-svc:focus-visible path{ transform:scale(1.08); filter:drop-shadow(0 8px 14px rgba(0,31,74,.22)); }
.lm-svc:focus-visible path{ stroke:var(--blue-600); stroke-width:3; }
@media (prefers-reduced-motion:reduce){ .lm-pulse{ display:none; } .lm-dom .lm-body, .lm-svc path{ transition:none; } }

.lm-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.lm-row{ border-bottom:1px solid var(--line); }
.lm-row > button{ width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:20px 4px; border:0; background:transparent; cursor:pointer; text-align:left; }
.lm-gly{ width:14px; height:14px; transform:rotate(45deg); border-radius:3px; background:var(--c); transition:transform var(--t-mid) var(--ease); }
.lm-row.open .lm-gly{ transform:rotate(45deg) scale(1.25); }
.lm-row .nm{ font-size:20px; font-weight:500; color:var(--ink-900); letter-spacing:-.015em; }
.lm-row .ct{ font:400 12px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); }
.lm-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 380ms var(--ease); }
.lm-panel > div{ overflow:hidden; }
.lm-row.open .lm-panel{ grid-template-rows:1fr; }
.lm-panel .in{ padding:0 4px 22px 32px; display:grid; gap:12px; opacity:0; transition:opacity 260ms var(--ease); }
.lm-row.open .lm-panel .in{ opacity:1; transition-delay:90ms; }
.lm-panel .st{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); }
.lm-panel p{ font-size:15.5px; line-height:1.55; }
.lm-svcs{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:2px; }
.lm-svcs a{ display:grid; gap:2px; padding:8px 12px; margin:0 -12px; border-radius:var(--r-3); text-decoration:none; transition:background var(--t-fast) var(--ease); }
.lm-svcs a b{ font-weight:500; color:var(--ink-900); font-size:15.5px; }
.lm-svcs a b::after{ content:" \2192"; color:var(--blue-600); opacity:0; transition:opacity var(--t-fast); }
.lm-svcs a span{ font-size:14px; line-height:1.45; color:var(--slate-500); }
.lm-svcs a:hover, .lm-svcs a.hi, .lm-svcs a:focus-visible{ background:#fff; box-shadow:0 0 0 1px var(--line); }
.lm-svcs a:hover b::after, .lm-svcs a.hi b::after{ opacity:1; }

/* ---------- layers: interface shot, agents at work, logo stack ---------- */
.mini-frame.shot{ box-shadow:var(--shadow-frame); border-radius:var(--r-4); }
.afeed{ border-radius:var(--r-5); background:linear-gradient(135deg, #f3f2ff 0%, #f8f3fb 55%, #fdf1f5 100%); padding:18px; display:grid; gap:12px; box-shadow:inset 0 0 0 1px rgba(0,31,74,.05); }
.afeed-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.afeed-live{ display:inline-flex; align-items:center; gap:9px; padding:7px 12px 7px 9px; border-radius:var(--r-pill); background:var(--ink-900); color:#fff; font-size:13.5px; font-weight:500; }
.afeed-live i{ width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 50% 50%, #fff 0 22%, transparent 24%), conic-gradient(var(--accent), #D1247A, #896BED, #10A284, var(--accent)); animation:spin 4s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.afeed-brief{ font:400 12.5px/1 var(--f-mono); color:var(--slate-500); letter-spacing:.03em; }
.afeed-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.afeed-list li{ display:grid; grid-template-columns:30px 1fr auto; gap:12px; align-items:center; padding:10px 12px; border-radius:var(--r-4); background:rgba(255,255,255,.86); box-shadow:0 0 0 1px rgba(0,31,74,.05), 0 6px 14px -10px rgba(0,31,74,.25); transition:opacity 420ms var(--ease), transform 420ms var(--ease); }
.afeed-list li.wait{ opacity:0; transform:translateY(8px); }
.afeed-list li.show{ opacity:1; transform:none; }
.afeed-list .av{ width:30px; height:30px; border-radius:50%; position:relative; background:radial-gradient(circle, #fff 0 5px, var(--c) 6px 9px, transparent 10px); }
.afeed-list .av::before, .afeed-list .av::after{ content:""; position:absolute; inset:2px; border-radius:50%; border:1.5px solid var(--c); opacity:.5; transform:rotateX(64deg) rotateZ(30deg); }
.afeed-list .av::after{ transform:rotateX(64deg) rotateZ(-30deg); }
.afeed-list .tx{ display:grid; gap:1px; min-width:0; }
.afeed-list .tx b{ font-size:14px; font-weight:500; color:var(--ink-900); }
.afeed-list .tx span{ font-size:13.5px; line-height:1.4; color:var(--slate-600); }
.afeed-list .st{ font:400 11.5px/1 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; padding:6px 9px; border-radius:var(--r-pill); white-space:nowrap; }
.afeed-list .st.done{ color:#11734f; background:#e3f6ee; }
.afeed-list .st.work{ color:var(--slate-500); background:var(--surface-3); }
.afeed-list .st.work::after{ content:""; display:inline-block; width:1.2em; text-align:left; animation:dots 1.2s steps(4) infinite; }
@keyframes dots{ 0%{ content:""; } 25%{ content:"."; } 50%{ content:".."; } 75%{ content:"..."; } }
.afeed-list .st.you{ color:#fff; background:var(--blue-600); }
.afeed-note{ font-size:11.5px; letter-spacing:.04em; color:var(--slate-400); text-transform:uppercase; }
@media (max-width:520px){ .afeed-list li{ grid-template-columns:26px 1fr; } .afeed-list .st{ grid-column:2; justify-self:start; } }
@media (prefers-reduced-motion:reduce){ .afeed-live i, .afeed-list .st.work::after{ animation:none; } }

.lstack{ display:grid; gap:14px; }
.coins{ list-style:none; margin:0; padding:0 0 0 12px; display:flex; flex-wrap:wrap; row-gap:10px; }
.coins li{ width:56px; height:56px; margin-left:-12px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 0 0 3px var(--surface-2), 0 0 0 4px var(--line), 0 10px 18px -12px rgba(0,31,74,.35); position:relative; transition:transform 260ms var(--ease); }
.coins li img{ width:28px; height:28px; object-fit:contain; }
@media (hover:hover) and (pointer:fine){ .coins li:hover{ transform:translateY(-6px); z-index:2; } }
.coins li.more{ background:var(--ink-900); }
.coins li.more span[aria-hidden]{ display:flex; gap:4px; }
.coins li.more i{ width:5px; height:5px; border-radius:50%; background:#fff; }
.layer .coins li{ box-shadow:0 0 0 3px #fff, 0 0 0 4px var(--line), 0 10px 18px -12px rgba(0,31,74,.35); }

/* ---------- atomic band (home) ---------- */
.atom-band{ position:relative; overflow:hidden; isolation:isolate; background:#060a22; color:var(--on-night-2); min-height:min(78vh, 760px); display:grid; align-items:center; }
.atom-band .amb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 50%; z-index:-2; }
.atom-band::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(6,10,34,.94) 0%, rgba(6,10,34,.78) 38%, rgba(6,10,34,.1) 72%); }
@media (max-width:860px){ .atom-band::before{ background:linear-gradient(0deg, rgba(6,10,34,.96) 30%, rgba(6,10,34,.35) 100%); } .atom-band{ align-items:end; } }
.atom-copy{ display:grid; gap:22px; max-width:560px; padding-block:clamp(88px, 10vw, 140px); }
.atom-copy .eyebrow{ color:var(--on-night-3); }
.atom-copy h2{ color:var(--on-night); }
.atom-copy .lede{ color:var(--on-night-2); }
@media (max-width:700px){ .lm-svc text, .lm-stage text{ display:none; } .lm-name{ font-size:40px; } }

/* ---------- services page: four domains, plain rows ---------- */
.svcs-hero{ overflow:hidden; padding-bottom:clamp(40px, 5vw, 72px); }
.svcs-hero .flower{ position:absolute; z-index:0; right:-6vw; top:calc(var(--nav-h) - 10px); width:min(62vw, 980px); aspect-ratio:16/9; object-fit:cover; mix-blend-mode:multiply; opacity:.95;
  -webkit-mask-image:radial-gradient(closest-side, #000 62%, transparent 100%); mask-image:radial-gradient(closest-side, #000 62%, transparent 100%); }
@media (max-width:900px){ .svcs-hero .flower{ position:relative; right:auto; top:auto; width:100%; margin:-24px 0 -40px; order:2; } }
.svcs-hero .hero-copy{ max-width:640px; }
.indbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 0 28px; position:sticky; top:var(--nav-h); z-index:5; background:linear-gradient(var(--surface-2) 80%, rgba(247,247,251,0)); }
.indbar .mono{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); margin-right:8px; }
.cat{ display:grid; gap:0; }
.dom{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px, 5vw, 80px); padding:48px 0; border-top:1px solid var(--line); }
@media (max-width:900px){ .dom{ grid-template-columns:1fr; gap:20px; } }
.dom-head{ display:grid; gap:12px; align-content:start; position:sticky; top:calc(var(--nav-h) + 90px); }
@media (max-width:900px){ .dom-head{ position:relative; top:0; } }
.dom-head .lm-gly{ width:18px; height:18px; border-radius:4px; }
.dom-head h3{ font-size:clamp(28px, 2.8vw, 38px); letter-spacing:-.028em; line-height:1.05; }
.dom-head .st{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); }
.dom-head p:last-child{ max-width:30em; }
.srows{ list-style:none; margin:0; padding:0; display:grid; }
.srow{ display:grid; grid-template-columns:1fr auto; gap:6px 24px; padding:22px 0; border-bottom:1px solid var(--line-soft); text-decoration:none; color:inherit; position:relative; }
.srows li:first-child .srow{ padding-top:4px; }
.srow b{ font-size:21px; font-weight:500; color:var(--ink-900); letter-spacing:-.015em; grid-column:1; }
.srow .d{ grid-column:1; font-size:16px; line-height:1.55; color:var(--slate-600); max-width:40em; }
.srow .d.swap{ animation:swapIn 360ms var(--ease) both; }
.srow .go{ grid-column:2; grid-row:1 / span 2; align-self:center; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; box-shadow:0 0 0 1px var(--line-strong); color:var(--ink-900); transition:background var(--t-mid) var(--ease), color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); }
.srow .go .arr{ width:16px; height:16px; transition:transform var(--t-mid) var(--ease); }
.srow::before{ content:""; position:absolute; left:-14px; top:26px; width:4px; height:20px; border-radius:2px; background:var(--c); transform:scaleY(0); transition:transform var(--t-mid) var(--ease); }
.srows li:first-child .srow::before{ top:8px; }
@media (hover:hover) and (pointer:fine){
  .srow:hover .go{ background:var(--ink-900); color:#fff; box-shadow:none; }
  .srow:hover .go .arr{ transform:translateX(2px); }
  .srow:hover::before{ transform:scaleY(1); }
}
.srow:focus-visible .go{ background:var(--ink-900); color:#fff; }

/* ---------- fewer boxes: steps, industry and related as open type ---------- */
.howto{ gap:clamp(20px, 3vw, 40px); }
.howto li{ background:none; box-shadow:none; border-radius:0; padding:20px 0 0; border-top:1px solid var(--ink-900); }
.ind-panel{ background:none; box-shadow:none; padding:0; border-radius:0; }
.ind-panel p{ font-size:clamp(22px, 2.3vw, 30px); line-height:1.35; }
.related{ grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:0 40px; }
.rel{ background:none; box-shadow:none; border-radius:0; padding:20px 0 22px; border-top:1px solid var(--line-strong); }
@media (hover:hover) and (pointer:fine){ .rel:hover{ box-shadow:none; transform:none; border-top-color:var(--ink-900); } .rel:hover b{ color:var(--blue-600); } }
.rel b{ font-size:20px; letter-spacing:-.015em; transition:color var(--t-fast); }

/* =================== atomic page: dark, deck imagery =================== */
body.dark{ background:#070b24; color:var(--on-night-2); }
body.dark h1, body.dark h2, body.dark h3{ color:var(--on-night); }
body.dark .eyebrow{ color:#7fe3ff; opacity:.85; }
body.dark .lede{ color:var(--on-night-2); }
body.dark .nav:not(.open) .lockup{ color:#fff; }
body.dark .nav:not(.open) .lockup .by{ border-color:rgba(255,255,255,.25); }
body.dark .nav:not(.open) .lockup .by img{ filter:brightness(0) invert(1); }
body.dark .nav:not(.open) ul a{ color:var(--on-night-2); }
body.dark .nav:not(.open) ul a:hover, body.dark .nav:not(.open) ul a[aria-current="page"]{ color:#fff; background:rgba(255,255,255,.08); }
body.dark .nav.scrolled:not(.open){ background:rgba(7,11,36,.78); box-shadow:0 1px 0 rgba(255,255,255,.06); }
body.dark .nav:not(.open) .menu-btn span{ background:#fff; }
body.dark :focus-visible{ outline-color:#7fe3ff; }

.amb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.bgimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.55; }
.at-sec{ position:relative; isolation:isolate; overflow:hidden; padding-block:var(--sec); }
.at-hero{ position:relative; isolation:isolate; overflow:hidden; min-height:min(100vh, 900px); display:grid; align-items:center; padding-top:var(--nav-h); }
.at-hero .amb{ object-position:72% 50%; }
.at-hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(7,11,36,.96) 0%, rgba(7,11,36,.75) 40%, rgba(7,11,36,.05) 75%), linear-gradient(0deg, #070b24 0%, rgba(7,11,36,0) 25%); }
@media (max-width:860px){ .at-hero::before{ background:linear-gradient(0deg, #070b24 35%, rgba(7,11,36,.35) 100%); } .at-hero{ align-items:end; } }
.at-copy{ display:grid; gap:26px; max-width:720px; padding-block:clamp(80px, 10vw, 120px); }
.at-copy .display{ font-size:clamp(44px, 6.6vw, 96px); }
.glow{ background:linear-gradient(90deg, #7fe3ff, #b9a4ff 55%, #ff8fc7); -webkit-background-clip:text; background-clip:text; color:transparent; }

.at-gap::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(7,11,36,.92) 0%, rgba(7,11,36,.86) 45%, rgba(7,11,36,.6) 100%); }
.gapchart{ margin:0; display:grid; gap:10px; }
.gapchart svg{ width:100%; height:auto; overflow:visible; }
.gapchart .ax{ fill:none; stroke:rgba(255,255,255,.22); stroke-width:1.2; }
.gapchart .c1, .gapchart .c2{ fill:none; stroke-width:3.5; stroke-linecap:round; stroke-dasharray:900; stroke-dashoffset:900; transition:stroke-dashoffset 2.2s var(--ease); }
.gapchart .c1{ stroke:#7fe3ff; filter:drop-shadow(0 0 8px rgba(127,227,255,.6)); }
.gapchart .c2{ stroke:#ff8fc7; transition-delay:.3s; }
.gapchart.in .c1, .gapchart.in .c2{ stroke-dashoffset:0; }
.gapchart text{ font:500 15px var(--f-sans); opacity:0; transition:opacity .6s var(--ease) 1.6s; }
.gapchart .l1{ fill:#7fe3ff; } .gapchart .l2{ fill:#ff8fc7; }
.gapchart.in text{ opacity:1; }
.gapchart .gapbar{ stroke:rgba(255,255,255,.5); stroke-width:1.2; stroke-dasharray:3 5; opacity:0; transition:opacity .6s var(--ease) 2s; }
.gapchart.in .gapbar{ opacity:1; }
.gapchart figcaption{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--on-night-3); }
@media (prefers-reduced-motion:reduce){ .gapchart .c1, .gapchart .c2{ stroke-dashoffset:0; transition:none; } .gapchart text, .gapchart .gapbar{ opacity:1; transition:none; } }

.at-shift::before, .at-roles::before, .at-grow::before, .at-hubs::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, #070b24 0%, rgba(7,11,36,.55) 30%, rgba(7,11,36,.55) 70%, #070b24 100%); }
.shifts.dk .shift{ border-color:rgba(255,255,255,.12); }
.shifts.dk .shift .from{ color:var(--on-night-3); }
.shifts.dk .shift .to{ color:#fff; }
.shifts.dk .shift .conn{ background:rgba(255,255,255,.18); }
.shifts.dk .shift .conn i{ border-color:#7fe3ff; }
.shifts.dk .shift.in .conn{ background:linear-gradient(90deg, rgba(255,255,255,.18), #7fe3ff); }

.leader{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px, 6vw, 96px); align-items:center; }
@media (max-width:900px){ .leader{ grid-template-columns:1fr; } }
.portrait{ margin:0; border-radius:var(--r-5); overflow:hidden; aspect-ratio:4/5; box-shadow:0 40px 80px -30px rgba(0,0,0,.7); }
.portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 25%; }
.beams{ list-style:none; margin:36px 0 0; padding:0; display:grid; gap:0; }
.beams li{ position:relative; padding:18px 0 18px 36px; border-top:1px solid rgba(255,255,255,.1); color:#fff; font-size:clamp(18px, 1.6vw, 21px); letter-spacing:-.01em; }
.beams li::before{ content:""; position:absolute; left:0; top:50%; width:18px; height:2px; background:linear-gradient(90deg, #22d6cf, #7fe3ff); box-shadow:0 0 10px #22d6cf; }

.regroup{ margin:0; justify-self:end; width:min(420px, 100%); aspect-ratio:16/9; border-radius:var(--r-5); overflow:hidden; }
.regroup video{ width:100%; height:100%; object-fit:cover; }
@media (max-width:860px){ .regroup{ justify-self:start; } }
.traits{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 clamp(24px, 4vw, 56px); }
@media (max-width:860px){ .traits{ grid-template-columns:1fr; } }
.trait{ display:grid; gap:12px; align-content:start; padding:32px 0 36px; border-top:1px solid rgba(255,255,255,.12); }
.trait svg{ width:40px; height:40px; color:#22d6cf; }
.trait h3{ font-size:21px; letter-spacing:-.015em; }
.trait p{ font-size:16px; color:var(--on-night-2); }

.at-hubs .bgimg{ opacity:.28; }
.hubart{ margin-top:48px; }
.hubart svg{ width:100%; height:auto; overflow:visible; font-family:var(--f-sans); }
.hubart .links path{ stroke:rgba(255,255,255,.45); stroke-width:1.2; stroke-dasharray:2 4; fill:none; }
.hubart .shell{ fill:rgba(40,60,140,.35); stroke:rgba(255,255,255,.85); stroke-width:1.4; }
.hubart [data-hub="brand"] .shell{ fill:rgba(160,40,110,.28); }
.hubart [data-hub="acq"] .shell, .hubart [data-hub="ret"] .shell{ fill:rgba(20,120,130,.32); }
.hubart [data-hub="frontier"] .shell{ fill:rgba(20,90,180,.32); }
.hubart .bond{ stroke:rgba(255,255,255,.55); stroke-width:1; stroke-dasharray:2 3; fill:none; }
.hubart .lead{ fill:#fff; font-size:14px; font-weight:700; }
.hubart .arc{ fill:rgba(255,255,255,.85); font-size:11px; font-style:italic; }
.hubart .hub{ cursor:default; outline:none; transition:opacity 360ms var(--ease); transform-box:fill-box; }
.hubart.focus .hub:not(.on){ opacity:.3; }
.hubart .hub:focus-visible .shell{ stroke:#7fe3ff; stroke-width:2.5; }
@media (prefers-reduced-motion:no-preference){
  .hubart .hub > circle:not(.shell){ animation:breathe 4.8s var(--ease-io) infinite alternate; transform-box:fill-box; transform-origin:center; }
  .hubart .hub > circle:nth-of-type(3){ animation-delay:-1.2s; } .hubart .hub > circle:nth-of-type(4){ animation-delay:-2.4s; }
}
@keyframes breathe{ to{ transform:scale(1.22); } }
.hubcols{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px, 4vw, 56px); margin-top:32px; }
@media (max-width:860px){ .hubcols{ grid-template-columns:1fr; } }
.hubcols > div{ display:grid; gap:10px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); transition:opacity 360ms var(--ease), border-color 360ms var(--ease); }
.hubcols > div.on{ border-color:#fff; } .hubcols > div.dim{ opacity:.4; }
.hubcols .k{ display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:500; font-size:17px; }
.hubcols .k::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); }
.hubcols p{ font-size:16px; }

.rolegrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2.4vw, 28px); margin-top:56px; align-items:start; }
@media (max-width:960px){ .rolegrid{ grid-template-columns:1fr; } }
.rcol{ display:grid; gap:14px; }
.rcol > .eyebrow{ color:var(--c); opacity:1; }
.rcard{ position:relative; display:grid; gap:6px; padding:30px 24px 24px; margin-top:14px; border-radius:var(--r-3); background:rgba(10,16,52,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.rcard .half{ position:absolute; left:24px; top:-14px; width:28px; height:14px; border-radius:0 0 28px 28px; background:linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 60%, #fff)); box-shadow:0 6px 18px -4px var(--c); }
.rcard .fr{ font:400 12px/1.3 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--on-night-3); }
.rcard .fr::after{ content:" \2193"; color:var(--c); }
.rcard b{ color:#fff; font-size:20px; font-weight:500; letter-spacing:-.015em; }
.rcard p{ font-size:15px; line-height:1.55; color:var(--on-night-2); }

.at-grow .bgimg{ opacity:.35; }
.stages{ list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 3vw, 40px); counter-reset:s; }
@media (max-width:900px){ .stages{ grid-template-columns:1fr; } }
.stages li{ display:grid; gap:12px; align-content:start; padding:22px; border-radius:var(--r-4); background:rgba(10,16,52,.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.stages .when{ justify-self:start; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:7px 12px; border-radius:var(--r-pill); background:#22d6cf; color:#05213a; }
.stages svg{ width:100%; height:auto; }
.stages svg .shell{ fill:rgba(40,70,150,.35); stroke:rgba(255,255,255,.8); stroke-width:1.2; }
.stages svg .shell.sm{ fill:#0b1238; }
.stages svg .bond{ stroke:rgba(255,255,255,.6); stroke-width:1; stroke-dasharray:2 3; fill:none; }
.stages svg .dash{ stroke:rgba(255,255,255,.7); stroke-width:1.2; stroke-dasharray:3 3; fill:none; }
.stages b{ color:#fff; font-size:21px; font-weight:500; letter-spacing:-.015em; }
.stages p{ font-size:15.5px; }

.at-scale{ min-height:min(80vh, 720px); display:grid; align-items:end; }
.at-scale::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(7,11,36,.95) 15%, rgba(7,11,36,.2) 70%, #070b24 100%); }
.at-scale h2{ font-size:clamp(40px, 6vw, 84px); max-width:16ch; }
.scale3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px, 4vw, 56px); margin-top:40px; }
@media (max-width:860px){ .scale3{ grid-template-columns:1fr; } }
.scale3 p{ padding-top:16px; border-top:1px solid rgba(255,255,255,.25); color:#fff; font-size:17px; }

.at-assess{ padding-top:0; }
.assess2{ position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-5); min-height:440px; display:grid; align-items:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.assess2 video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:80% 50%; z-index:-2; }
.assess2::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(7,11,36,.95) 0%, rgba(7,11,36,.7) 45%, rgba(7,11,36,0) 80%); }
.assess2 .txt{ padding:clamp(28px, 5vw, 64px); display:grid; gap:18px; max-width:560px; }
.assess2 h2{ font-size:clamp(28px, 3.2vw, 44px); letter-spacing:-.028em; line-height:1.06; }
@media (max-width:860px){ .assess2::before{ background:linear-gradient(0deg, rgba(7,11,36,.96) 45%, rgba(7,11,36,.3) 100%); } .assess2{ align-items:end; min-height:520px; } }
@media (min-width:861px){ .at-hero .amb, .atom-band .amb{ transform:translateX(22%) scale(1.08); } }

/* ---------- platform: technical section ---------- */
.tech{ background:var(--night); color:var(--on-night-2); padding-block:var(--sec); position:relative; overflow:hidden; isolation:isolate; }
.tech::before{ content:""; position:absolute; inset:-20% -10% auto auto; width:60vw; height:60vw; border-radius:50%; background:radial-gradient(closest-side, rgba(29,184,242,.14), transparent); z-index:-1; }
.tech h2, .tech h3{ color:var(--on-night); }
.tech .eyebrow{ color:#7fe3ff; }
.tech .lede{ color:var(--on-night-2); }
.arch{ margin:16px 0 0; display:grid; gap:10px; }
.arch-row{ display:grid; grid-template-columns:170px 1fr; gap:20px; align-items:center; }
@media (max-width:760px){ .arch-row{ grid-template-columns:1fr; gap:8px; } }
.arch-k{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--on-night-3); }
.arch-band{ display:flex; flex-wrap:wrap; gap:8px; padding:14px; border-radius:var(--r-4); background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.arch-band span{ padding:9px 14px; border-radius:var(--r-pill); background:rgba(255,255,255,.06); color:var(--on-night); font-size:14.5px; }
.arch-band.agents span{ background:transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.arch-band.agents span.o{ background:#fff; color:var(--ink-900); box-shadow:none; }
.arch-row.core .arch-band{ background:linear-gradient(90deg, rgba(209,36,122,.22), rgba(137,107,237,.22) 35%, rgba(16,162,132,.22) 70%, rgba(0,88,171,.3)); box-shadow:inset 0 0 0 1px rgba(127,227,255,.35), 0 0 40px -10px rgba(127,227,255,.35); padding:18px 14px; }
.arch-row.core .arch-k{ color:#7fe3ff; }
.arch-band.sem span{ background:rgba(7,11,36,.5); font-weight:500; }
.arch-band.api{ height:46px; padding:0 14px; justify-content:space-between; align-items:center; flex-wrap:nowrap; overflow:hidden; background:transparent; box-shadow:none; }
.arch-band.api i{ position:relative; width:1px; height:100%; background:linear-gradient(rgba(127,227,255,.1), rgba(127,227,255,.6), rgba(127,227,255,.1)); }
.arch-band.api i::after{ content:""; position:absolute; left:-2px; width:5px; height:5px; border-radius:50%; background:#7fe3ff; box-shadow:0 0 8px #7fe3ff; bottom:0; animation:rise 2.4s linear infinite; }
.arch-band.api i:nth-child(3n)::after{ animation-delay:-.8s; } .arch-band.api i:nth-child(3n+1)::after{ animation-delay:-1.6s; } .arch-band.api i:nth-child(2n)::after{ animation-duration:3.1s; }
@keyframes rise{ from{ transform:translateY(0); opacity:0; } 20%{ opacity:1; } to{ transform:translateY(-46px); opacity:0; } }
.arch-band.sys span{ background:transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); color:var(--on-night-2); }
.arch-band.sys .dots{ letter-spacing:.1em; }
@media (prefers-reduced-motion:reduce){ .arch-band.api i::after{ animation:none; opacity:0; } }
.techcols{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(20px, 3vw, 40px); margin-top:64px; }
@media (max-width:1000px){ .techcols{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .techcols{ grid-template-columns:1fr; } }
.techcols > div{ display:grid; gap:10px; align-content:start; padding-top:18px; border-top:1px solid rgba(255,255,255,.2); }
.techcols h3{ font-size:19px; letter-spacing:-.012em; }
.techcols p{ font-size:15.5px; }

/* principles without boxes */
.principles.open{ background:none; box-shadow:none; border-radius:0; gap:0 clamp(24px, 4vw, 56px); }
.principles.open .pr{ background:none; padding:28px 0 32px; border-top:1px solid var(--line-strong); }

/* =================== atomic page v3: light base, two dark sections =================== */
.at-hero{ min-height:auto; display:block; padding-top:calc(var(--nav-h) + clamp(56px, 9vw, 120px)); overflow:hidden; }
.at-hero::before{ display:none; }
.at-hero .at-copy{ padding-block:0; max-width:640px; position:relative; z-index:1; }
.at-hero .display{ font-size:clamp(44px, 6.4vw, 92px); }
.at-atom{ position:absolute; z-index:0; right:-8vw; top:calc(var(--nav-h) - 30px); width:min(70vw, 1100px); aspect-ratio:16/9; object-fit:cover; mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(closest-side, #000 60%, transparent 100%); mask-image:radial-gradient(closest-side, #000 60%, transparent 100%); }
@media (max-width:900px){ .at-atom{ position:relative; right:auto; top:auto; width:100%; margin:-20px 0 -40px; } }

.dk{ background:#070b24; color:var(--on-night-2); }
.dk h2, .dk h3{ color:var(--on-night); }
.dk .eyebrow{ color:#7fe3ff; }
.dk .lede{ color:var(--on-night-2); }

.gapchart .ax{ stroke:var(--line-strong); }
.gapchart .c1{ stroke:#1C2FE0; filter:none; }
.gapchart .c2{ stroke:#F01080; }
.gapchart .l1{ fill:#1C2FE0; } .gapchart .l2{ fill:#F01080; }
.gapchart .gapbar{ stroke:var(--slate-400); }
.gapchart figcaption{ color:var(--slate-500); }
.dk .gapchart .ax{ stroke:rgba(255,255,255,.22); }

.beams li{ color:var(--ink-900); border-top-color:var(--line); }
.beams li::before{ background:linear-gradient(90deg, var(--blue-600), var(--accent)); box-shadow:none; }
.portrait{ box-shadow:var(--shadow-frame); }

.trait{ border-top-color:var(--line-strong); }
.trait svg{ color:var(--blue-600); }
.trait h3{ color:var(--ink-900); }
.trait p{ color:var(--slate-600); }

.rolegrid{ gap:clamp(20px, 3vw, 48px); }
.rcol > .eyebrow{ color:var(--ink-900); display:flex; align-items:center; gap:10px; }
.rcol > .eyebrow::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--c); }
.rcard{ background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; border-radius:0; border-top:1px solid var(--line-strong); padding:30px 0 10px; margin-top:0; }
.rcard .half{ left:0; top:-1px; width:30px; height:15px; box-shadow:none; }
.rcard .fr{ color:var(--slate-500); }
.rcard b{ color:var(--ink-900); }
.rcard p{ color:var(--slate-600); }

.stages li{ background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; border-radius:0; padding:20px 0 0; border-top:1px solid var(--ink-900); }
.stages .when{ background:var(--ink-900); color:#fff; }
.stages svg .shell{ fill:#eef2ff; stroke:#8a97c4; }
.stages svg .shell.sm{ fill:#fff; }
.stages svg .bond, .stages svg .dash{ stroke:#8a97c4; }
.stages svg circle[fill="#fff"]{ fill:#cfd6ea; }
.stages b{ color:var(--ink-900); }
.stages p{ color:var(--slate-600); }

.at-hubs{ padding-block:var(--sec); }
.at-hubs .bgimg{ opacity:.3; }
.at-scale .scale3 p{ color:#fff; }
.assess2{ background:#070b24; color:var(--on-night-2); }
.assess2 h2{ color:#fff; }
.assess2 .eyebrow{ color:#7fe3ff; }
.assess2 p{ color:var(--on-night-2); }
.regroup{ box-shadow:var(--shadow-frame); }
.at-gap::before, .at-shift::before, .at-roles::before, .at-grow::before{ display:none; }
.at-gap, .at-shift, .at-roles, .at-grow, .at-leader, .at-traits{ background:transparent; }

/* ---------- services opener: two value plays ---------- */
.plays-hero{ padding-bottom:clamp(40px, 6vw, 80px); }
.c-ci{ color:#1C2FE0; } .c-cs{ color:#F01080; }
.plays{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 5vw, 80px); margin-top:clamp(48px, 6vw, 80px); }
@media (max-width:860px){ .plays{ grid-template-columns:1fr; } }
.play{ display:grid; gap:12px; align-content:start; }
.play svg{ width:100%; max-width:420px; height:auto; margin:0 auto 12px; overflow:visible; }
.play .k{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--c); }
.play h2{ font-size:clamp(28px, 2.8vw, 40px); letter-spacing:-.028em; line-height:1.05; }
.play p{ font-size:17px; max-width:34em; }
.ci-art .sp-base{ fill:none; stroke:rgba(28,47,224,.14); stroke-width:2; }
.ci-art .sp-glow{ fill:none; stroke:#1C2FE0; stroke-width:3; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 3.2s var(--ease-io); }
.play.in .sp-glow{ stroke-dashoffset:0; }
.ci-art .sp-dot{ fill:#fff; stroke:#1C2FE0; stroke-width:3; }
.ci-art .sp-core{ fill:#1C2FE0; }
.ci-art .sp-lab text{ font:500 13px var(--f-sans); fill:#1C2FE0; letter-spacing:.02em; }
.cs-art .rays path{ stroke:rgba(240,16,128,.14); stroke-width:1.2; stroke-dasharray:3 5; }
.cs-art .cd{ fill:#fff; stroke:#F01080; stroke-width:1.4; transform-box:fill-box; transform-origin:center; opacity:0; }
.play.in .cs-art .cd{ animation:cardIn 600ms var(--ease) both; animation-delay:calc(400ms + var(--i) * 70ms); }
.cs-art .cd:nth-child(3n){ fill:#ffe1f0; } .cs-art .cd:nth-child(5n){ fill:#F01080; }
@keyframes cardIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:none; } }
.cs-art .idea{ fill:#F01080; }
.cs-art .idea-ring{ fill:none; stroke:#F01080; stroke-width:1.4; opacity:.5; transform-box:fill-box; transform-origin:center; animation:ping 2.4s var(--ease) infinite; }
@keyframes ping{ from{ transform:scale(.6); opacity:.8; } to{ transform:scale(1.8); opacity:0; } }
.cs-art .cs-lab{ font:500 13px var(--f-sans); fill:#c00a68; }
.together{ display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:baseline; margin-top:clamp(40px, 5vw, 64px); padding-top:24px; border-top:3px solid var(--accent); }
.together .k{ font-size:12.5px; letter-spacing:.06em; color:var(--accent); }
.together p{ font-size:clamp(19px, 1.7vw, 23px); color:var(--ink-900); letter-spacing:-.01em; }
.together b{ font-weight:500; }
@media (max-width:600px){ .together{ grid-template-columns:1fr; gap:8px; } }
@media (prefers-reduced-motion:reduce){ .ci-art .sp-glow{ stroke-dashoffset:0; transition:none; } .ci-art .sp-dot{ display:none; } .cs-art .cd{ opacity:1; animation:none!important; } .cs-art .idea-ring{ animation:none; } }

/* ---------- layer stack in motion ---------- */
.stack .pl{ cursor:pointer; }
.stack .pl .bob{ transform-box:fill-box; }
.stack .fp{ fill:var(--blue-600); opacity:.7; }
.stack .fp.p2{ fill:#D1247A; } .stack .fp.p3{ fill:#10A284; } .stack .fp.p4{ fill:#896BED; }
.stack .tiles polygon{ fill:#eef1f7; stroke:#d9e0ea; }
.stack .halo{ opacity:0; transition:opacity var(--t-slow) var(--ease); }
.stack .pl.on .halo{ opacity:1; }
.stack .scan{ opacity:0; }
@media (prefers-reduced-motion:no-preference){
  .stack .pl[data-plate="interface"] .bob{ animation:bob 6s var(--ease-io) infinite alternate; }
  .stack .pl[data-plate="agents"] .bob{ animation:bob 6s var(--ease-io) -2s infinite alternate; }
  .stack .pl[data-plate="stack"] .bob{ animation:bob 6s var(--ease-io) -4s infinite alternate; }
  .stack .tiles polygon{ animation:tile 4.8s var(--ease-io) infinite; animation-delay:calc(var(--i) * .6s); }
  .stack .scan{ animation:scan 3.6s var(--ease-io) infinite; }
  .stack .orch{ animation:pulse 2.4s var(--ease-io) infinite; transform-box:fill-box; transform-origin:center; }
}
@keyframes bob{ from{ transform:translateY(-4px); } to{ transform:translateY(5px); } }
@keyframes tile{ 0%, 70%, 100%{ fill:#eef1f7; } 35%{ fill:#cfe0ff; } }
@keyframes scan{ 0%{ opacity:0; transform:translate(-40px, 20px); } 30%{ opacity:.9; } 70%{ opacity:.9; } 100%{ opacity:0; transform:translate(40px, -20px); } }
@keyframes pulse{ 50%{ transform:scale(1.35); } }
@media (prefers-reduced-motion:reduce){ .stack .flows circle{ display:none; } }
@media (hover:hover) and (pointer:fine){ .stack .pl:not(.on):hover .face{ stroke:var(--ink-900); } }

/* ---------- home: atomic hubs on light ---------- */
.hubart.light{ margin-top:8px; }
.hubart.light .links path{ stroke:#a9b4d0; }
.hubart.light .shell{ stroke:#8a97c4; stroke-width:1.4; }
.hubart.light [data-hub="brand"] .shell{ fill:#fbe3ef; }
.hubart.light [data-hub="acq"] .shell, .hubart.light [data-hub="ret"] .shell{ fill:#dcf6f3; }
.hubart.light [data-hub="frontier"] .shell{ fill:#e1eefc; }
.hubart.light [data-hub="cmo"] .shell{ fill:#fff; }
.hubart.light .bond{ stroke:#8a97c4; }
.hubart.light .lead{ fill:var(--ink-900); }
.hubart.light .arc{ fill:var(--slate-500); }
.hubart.light circle[fill="url(#hb-white)"]{ fill:#fff; stroke:#8a97c4; stroke-width:1.2; }
.hubart.light .hub:focus-visible .shell{ stroke:var(--blue-600); }
.hubcols.light > div{ border-top-color:var(--line-strong); }
.hubcols.light > div.on{ border-color:var(--ink-900); }
.hubcols.light .k{ color:var(--ink-900); }
.hubcols.light .k::before{ box-shadow:none; }
.hubcols.light p{ color:var(--slate-600); }

/* ---------- agents layer: Orchestrator and the swarm ---------- */
.swarm{ border-radius:var(--r-5); background:linear-gradient(160deg, #f3f2ff 0%, #f7f4fb 50%, #fdf1f5 100%); padding:18px; display:grid; gap:14px; box-shadow:inset 0 0 0 1px rgba(0,31,74,.05); }
.sw-you{ display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.sw-you .who{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); order:2; }
.sw-you .bubble{ background:var(--blue-600); color:#fff; padding:10px 14px; border-radius:16px 16px 4px 16px; font-size:14.5px; max-width:80%; }
.sw-orch{ justify-self:center; display:flex; align-items:center; gap:12px; padding:10px 18px 10px 10px; border-radius:var(--r-pill); background:var(--ink-900); color:#fff; box-shadow:0 12px 28px -12px rgba(0,31,74,.5); position:relative; z-index:2; }
.sw-orch .core{ width:30px; height:30px; border-radius:50%; background:radial-gradient(circle, #fff 0 18%, transparent 20%), conic-gradient(var(--accent), #D1247A, #896BED, #10A284, var(--accent)); animation:spin 5s linear infinite; }
.sw-orch b{ display:block; font-weight:500; font-size:15px; }
.sw-orch span span{ display:block; font-size:12.5px; color:rgba(255,255,255,.7); }
.sw-field{ position:relative; height:250px; margin-top:-6px; }
.sw-links{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sw-links line{ stroke:rgba(0,31,74,.12); stroke-width:1; stroke-dasharray:2 5; transition:stroke .3s; }
.sw-links line.on{ stroke:var(--blue-600); stroke-width:1.5; stroke-dasharray:4 6; animation:dashflow 1s linear infinite; }
@keyframes dashflow{ to{ stroke-dashoffset:-20; } }
.ag{ position:absolute; left:var(--x); top:var(--y); display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 9px; border-radius:var(--r-pill); background:#fff; font-size:13px; color:var(--ink-700); white-space:nowrap; box-shadow:0 0 0 1px rgba(0,31,74,.07), 0 6px 14px -8px rgba(0,31,74,.3); transition:box-shadow .3s, color .3s; }
.ag::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--c); }
.ag.on{ color:var(--ink-900); box-shadow:0 0 0 1.5px var(--c), 0 10px 22px -8px rgba(0,31,74,.4); }
.ag.on::after{ content:"working"; font:400 10.5px/1 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--c); margin-left:2px; }
@media (prefers-reduced-motion:no-preference){ .ag{ animation:drift 9s var(--ease-io) infinite alternate; animation-delay:var(--d); } }
@keyframes drift{ 0%{ transform:translate(0,0); } 33%{ transform:translate(10px,-8px); } 66%{ transform:translate(-8px,6px); } 100%{ transform:translate(6px,10px); } }
.sw-note{ font-size:11.5px; letter-spacing:.04em; color:var(--slate-400); text-transform:uppercase; text-align:center; }
@media (max-width:560px){ .sw-field{ height:330px; } .ag{ font-size:12px; } .ag:nth-child(odd){ left:calc(var(--x) * .4); } }

/* services opener with library imagery */
.plays{ align-items:start; }
.play-img{ position:relative; margin:0 0 20px; border-radius:var(--r-5); overflow:hidden; aspect-ratio:4/4.4; box-shadow:var(--shadow-frame); }
.play-img img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; transform:scale(1.04); transition:transform 1.6s var(--ease); }
.play.in .play-img img{ transform:scale(1); }
@media (hover:hover) and (pointer:fine){ .play:hover .play-img img{ transform:scale(1.03); } }
.play-tag{ position:absolute; left:16px; right:16px; bottom:16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; }
.play-tag .k{ background:#fff; padding:8px 12px; border-radius:var(--r-pill); color:var(--c); }
.loop-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.loop-chips i{ font-style:normal; font-size:12.5px; padding:6px 10px; border-radius:var(--r-pill); background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--ink-900); opacity:.55; transition:opacity .4s, background .4s, color .4s; }
.loop-chips i.on{ opacity:1; background:var(--c); color:#fff; }
.play:nth-child(2){ margin-top:clamp(0px, 6vw, 96px); }
@media (max-width:860px){ .play:nth-child(2){ margin-top:0; } }
.scale-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 6vw, 88px); align-items:center; }
@media (max-width:900px){ .scale-grid{ grid-template-columns:1fr; } }
.scale-film{ margin:0; border-radius:var(--r-5); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-frame); background:#070b24; }
.scale-film video{ width:100%; height:100%; object-fit:cover; }

/* =================== service pages v2 =================== */
.svc-hero2{ position:relative; padding-top:calc(var(--nav-h) + clamp(40px, 6vw, 88px)); padding-bottom:clamp(48px, 6vw, 88px); overflow:hidden; }
.svc-top{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 5vw, 72px); align-items:center; }
@media (max-width:960px){ .svc-top{ grid-template-columns:1fr; } }
.svc-copy{ display:grid; gap:22px; }
.svc-copy h1{ font-size:clamp(40px, 5.2vw, 72px); line-height:1; letter-spacing:-.038em; }
.svc-photo{ margin:0; border-radius:var(--r-5); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-frame); }
.svc-photo img{ width:100%; height:100%; object-fit:cover; }

.io{ display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,.8fr) minmax(0,1fr); gap:0; align-items:center; }
@media (max-width:900px){ .io{ grid-template-columns:1fr; gap:24px; } .io-flow{ display:none; } }
.io-col{ display:grid; gap:14px; align-content:center; }
.io-k{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); }
.io-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.io-col li{ position:relative; padding:12px 16px 12px 34px; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px var(--line); font-size:15px; color:var(--ink-700); line-height:1.4; }
.io-col li::before{ content:""; position:absolute; left:14px; top:18px; width:8px; height:8px; border-radius:50%; background:var(--slate-400); }
.io-col.out li{ color:var(--ink-900); }
.io-col.out li::before{ background:var(--c); }
.io-mid{ position:relative; height:100%; min-height:240px; display:grid; place-items:center; }
.io-flow{ position:absolute; inset:0; width:100%; height:100%; }
.io-flow path{ fill:none; stroke:var(--c); stroke-opacity:.35; stroke-width:1.5; stroke-dasharray:3 5; vector-effect:non-scaling-stroke; }
.io-flow circle{ fill:var(--c); }
.io-node{ position:relative; z-index:1; width:170px; aspect-ratio:1; display:grid; place-content:center; text-align:center; gap:6px; padding:18px; }
.io-node::before{ content:""; position:absolute; inset:14px; border-radius:22px; transform:rotate(45deg); background:linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)); box-shadow:0 18px 40px -16px var(--c); z-index:-1; }
.io-node b{ color:#fff; font-weight:500; font-size:17px; line-height:1.15; max-width:110px; }
.io-stage{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.8); }
.io-ag{ font-size:12px; color:rgba(255,255,255,.8); }
@media (prefers-reduced-motion:reduce){ .io-flow circle{ display:none; } }

.stepflow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(20px, 3vw, 40px); position:relative; }
.stepflow::before{ content:""; position:absolute; left:20px; right:20px; top:20px; height:2px; background:linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 30%, #fff)); }
@media (max-width:900px){ .stepflow{ grid-template-columns:1fr 1fr; } .stepflow::before{ display:none; } }
@media (max-width:560px){ .stepflow{ grid-template-columns:1fr; } }
.stepflow li{ position:relative; display:grid; gap:10px; align-content:start; }
.stepflow .n{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#fff; box-shadow:0 0 0 2px var(--c); color:var(--c); font-size:13px; position:relative; z-index:1; margin-bottom:6px; }
.stepflow b{ font-weight:500; color:var(--ink-900); font-size:19px; letter-spacing:-.01em; }
.stepflow p{ font-size:15.5px; line-height:1.55; }
.play:nth-child(2) .play-tag .k{ color:#b0085f; }
.play:nth-child(2) .loop-chips i.on{ background:#b0085f; }
.play:nth-child(2) .k.mono{ color:#b0085f; }
/* keep faces in frame: portrait-format library shots anchor to the top */
.svc-photo img{ object-position:50% 22%; }
.svc-photo img[src*="12-compounding"], .svc-photo img[src*="10-phone"]{ object-position:50% 12%; }

/* v8: service-domain photo set (16:9 sources). A 3:2 frame keeps more of the scene; x anchors keep each face in frame */
.svc-photo{ aspect-ratio:3/2; }
.svc-photo img[src*="svc-0"]{ object-position:50% 50%; }
.svc-photo img[src*="svc-01"]{ object-position:62% 50%; }
.svc-photo img[src*="svc-02"]{ object-position:72% 50%; }
.svc-photo img[src*="svc-04"]{ object-position:80% 50%; }
.svc-photo img[src*="svc-05"]{ object-position:38% 50%; }
.svc-photo img[src*="svc-06"]{ object-position:66% 50%; }
.gs-top .hero-copy h1{ font-size:clamp(40px,5vw,72px) !important; }

/* v9: services opener. Headline left, lede right, both plays side by side above the fold */
.plays-head{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); column-gap:clamp(32px,5vw,80px); align-items:end; }
.plays-head .eyebrow{ grid-column:1 / -1; margin-bottom:20px; }
.plays-head h1{ font-size:clamp(40px,4.6vw,68px); line-height:1.02; letter-spacing:-.035em; margin:0; }
.plays-head .lede{ margin:0 0 6px; max-width:30em; }
@media (max-width:900px){ .plays-head{ grid-template-columns:1fr; row-gap:20px; } }
.plays{ margin-top:clamp(36px,4.5vw,64px); gap:clamp(24px,3vw,40px); }
.play:nth-child(2){ margin-top:0; }
.play-img{ aspect-ratio:4/3; margin-bottom:16px; }
.play-img img{ object-position:50% 18%; }
.play h2{ font-size:clamp(24px,2.2vw,32px); }
.play p{ font-size:16.5px; }
.plays-hero{ padding-top:clamp(112px,11vw,150px); }

/* ===================== v10: platform page ===================== */
/* hero: the product on one screen, a day with the product underneath */
.plat-hero{ padding-bottom:clamp(56px,7vw,104px); overflow-x:clip; }
.plat-head{ text-align:center; display:grid; justify-items:center; gap:0; }
.plat-head h1{ font-size:clamp(44px,6vw,92px); line-height:1; letter-spacing:-.04em; margin-top:20px; }
.plat-head .lede{ margin:24px auto 0; max-width:34em; }
.plat-head .hero-cta{ justify-content:center; }
.pday{ margin-top:clamp(48px,6vw,80px); }
.screen{ position:relative; max-width:1120px; margin:0 auto; padding:10px; border-radius:22px; background:linear-gradient(180deg,#ffffff,#f3f5fb); box-shadow:0 0 0 1px rgba(0,31,74,.07), 0 30px 80px -30px rgba(28,47,224,.35), 0 60px 120px -40px rgba(240,16,128,.22); transform:perspective(1800px) rotateX(9deg) translateY(24px); transform-origin:50% 0; transition:transform 1.4s var(--ease), opacity .8s var(--ease); }
.screen.in{ transform:none; }
.screen::before{ content:""; position:absolute; inset:-12% -8% auto; height:90%; z-index:-1; background:radial-gradient(50% 60% at 30% 40%, rgba(28,47,224,.16), transparent 70%), radial-gradient(45% 55% at 72% 46%, rgba(240,16,128,.13), transparent 70%); filter:blur(20px); }
.screen-in{ position:relative; border-radius:14px; overflow:hidden; background:#eef0fb; isolation:isolate; }
.screen-in video{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#eef0fb; }
.screen-in .demo{ position:absolute; left:14px; bottom:14px; z-index:2; font:400 12px/1 var(--f-mono); letter-spacing:.04em; color:var(--slate-500); background:rgba(255,255,255,.86); padding:6px 9px; border-radius:var(--r-pill); }
.screen-in .play{ position:absolute; right:14px; bottom:14px; z-index:2; width:38px; height:38px; border-radius:50%; border:0; background:rgba(255,255,255,.9); box-shadow:var(--shadow-pop); cursor:pointer; display:grid; place-items:center; }
.screen-in .play svg{ width:14px; height:14px; color:var(--ink-900); }
.pday.swap .screen-in video{ opacity:.6; transition:opacity .16s; }
.day-k{ text-align:center; margin-top:clamp(36px,4vw,56px); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-500); }
.daytabs{ max-width:1120px; margin:18px auto 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,2vw,28px); }
.daytabs [role="tab"]{ all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:6px; padding:0 0 4px; text-align:left; color:var(--slate-500); transition:color var(--t-fast) var(--ease); }
.daytabs [role="tab"] .bar{ display:block; height:2px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:10px; }
.daytabs [role="tab"] .bar i{ display:block; height:100%; background:var(--ink-900); transform:scaleX(0); transform-origin:0 50%; }
.daytabs [role="tab"] .t{ font-size:12.5px; letter-spacing:.04em; }
.daytabs [role="tab"] b{ font-weight:500; font-size:clamp(15px,1.25vw,18px); letter-spacing:-.01em; line-height:1.25; color:inherit; }
.daytabs [role="tab"]:hover, .daytabs [role="tab"].on{ color:var(--ink-900); }
.daytabs [role="tab"]:focus-visible{ outline:2px solid var(--blue-600); outline-offset:6px; border-radius:4px; }
.daypanel{ max-width:40em; margin:28px auto 0; text-align:center; min-height:4.6em; }
.daypanel p{ margin:0; font-size:clamp(18px,1.5vw,21px); line-height:1.5; color:var(--ink-800); transition:opacity .16s; }
.pday.swap .daypanel p{ opacity:0; }
.pnight{ max-width:40em; margin:20px auto 0; text-align:center; font-size:15px; color:var(--slate-500); }
.pnight .mono{ font-size:12.5px; margin-right:8px; color:var(--slate-500); }
@media (max-width:760px){
  .daytabs{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(138px,46%); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none; }
  .daytabs [role="tab"]{ scroll-snap-align:start; }
  .screen{ padding:6px; border-radius:16px; transform:none; }
  .screen-in{ border-radius:11px; }
}
@media (prefers-reduced-motion: reduce){ .screen{ transform:none; transition:none; } }

/* architecture: layered system, layers explained on the right */
.arch2{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,80px); align-items:center; }
@media (max-width:960px){ .arch2{ grid-template-columns:1fr; } }
.arch-fig{ margin:0; }
.arch-fig svg{ width:100%; height:auto; display:block; overflow:visible; font-family:var(--f-sans); }
.arch-fig .ly{ transition:opacity .35s var(--ease); }
.arch-fig[data-on] .ly{ opacity:.22; }
.arch-fig[data-on="1"] .ly[data-l="1"], .arch-fig[data-on="2"] .ly[data-l="2"], .arch-fig[data-on="3"] .ly[data-l="3"], .arch-fig[data-on="4"] .ly[data-l="4"]{ opacity:1; }
.arch-fig .band{ fill:#ffffff; stroke:rgba(0,31,74,.06); }
.arch-fig .k{ font:400 11px var(--f-mono); fill:var(--slate-500); letter-spacing:.06em; }
.arch-fig .lab{ font-size:13px; fill:var(--ink-900); font-weight:500; }
.arch-fig .you{ font-size:13px; fill:#fff; font-weight:500; }
.arch-fig .wire{ stroke:#c9d2e3; stroke-width:1.5; fill:none; }
.arch-fig .wires path{ stroke:#d9e0ec; stroke-width:1.2; fill:none; }
.arch-fig .wires.thin path{ stroke-dasharray:2 4; }
.arch-fig .wires.dash path{ stroke:#cfd7e2; stroke-dasharray:3 5; }
.arch-fig .scr rect{ fill:#fff; stroke:#dfe5ef; }
.arch-fig .scr .side{ fill:#f1f3f9; stroke:none; }
.arch-fig .scr .ln{ fill:#001f4a; stroke:none; opacity:.85; }
.arch-fig .scr .ln.l2{ fill:#cfd7e2; opacity:1; }
.arch-fig .scr .card{ fill:#f7f8fc; stroke:#e9edf4; }
.arch-fig .scr .spark{ fill:none; stroke:#1C2FE0; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.arch-fig .scr .dot{ fill:#F01080; }
.arch-fig .scr .dot.d2{ fill:#10A284; }
.arch-fig .orch{ fill:#001f4a; }
.arch-fig .orch-mark{ fill:none; stroke:#fff; stroke-width:1.6; }
.arch-fig .orch-halo{ fill:none; stroke:var(--accent); stroke-width:1; opacity:.6; transform-origin:280px 222px; animation:orchHalo 3.2s var(--ease) infinite; }
@keyframes orchHalo{ 0%{ transform:scale(.7); opacity:.7; } 100%{ transform:scale(1.25); opacity:0; } }
.arch-fig .an circle{ fill:var(--c); stroke:#fff; stroke-width:3; }
.arch-fig .data{ fill:url(#dataG); stroke:#e3e2f6; }
.arch-fig .lab.c{ font-weight:400; fill:var(--ink-700); font-size:12.5px; }
.arch-fig .lg circle{ fill:#fff; stroke:#e3e9ef; }
.arch-fig .lg.more text{ font-size:16px; fill:var(--slate-500); letter-spacing:1px; }
.arch-fig .fp{ fill:#1C2FE0; }
.arch-fig .fp.up{ fill:#F01080; }
@media (prefers-reduced-motion: reduce){ .arch-fig .orch-halo{ animation:none; opacity:0; } .arch-fig .fp{ display:none; } }
.archlist{ list-style:none; margin:0; padding:0; counter-reset:none; }
.archlist > li{ border-top:1px solid var(--line); padding:20px 0 22px; transition:opacity .3s var(--ease); }
.archlist > li:last-child{ border-bottom:1px solid var(--line); }
.archlist .al-h{ all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:36px 1fr; gap:8px; width:100%; }
.archlist .al-h:focus-visible{ outline:2px solid var(--blue-600); outline-offset:4px; border-radius:4px; }
.archlist .n{ font-size:12.5px; color:var(--slate-500); padding-top:3px; }
.archlist .al-k{ display:block; font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--slate-500); }
.archlist .al-t{ display:block; margin-top:6px; font-size:clamp(19px,1.6vw,23px); letter-spacing:-.016em; line-height:1.25; color:var(--ink-900); font-weight:500; }
.archlist ul{ list-style:none; margin:12px 0 0 44px; padding:0; display:grid; gap:7px; }
.archlist ul li{ position:relative; padding-left:16px; font-size:15.5px; line-height:1.5; color:var(--slate-600); }
.archlist ul li::before{ content:""; position:absolute; left:0; top:.68em; width:6px; height:1.5px; background:var(--slate-400, #9aa6b8); }
.archlist > li{ box-shadow:inset 0 2px 0 transparent; transition:box-shadow .3s var(--ease); }
.archlist > li.on{ box-shadow:inset 0 2px 0 var(--ink-900); }
.archlist > li.on .n{ color:var(--ink-900); }

/* deployment: three ways to run the product */
.deploy-sec{ padding-top:0; }
.deps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,56px); }
@media (max-width:900px){ .deps{ grid-template-columns:1fr; } }
.dep{ display:grid; align-content:start; gap:10px; }
.dep-fig{ margin:0 0 18px; padding:22px 18px 14px; border-radius:20px; background:linear-gradient(180deg,#ffffff,#f8f9fd); box-shadow:0 0 0 1px rgba(0,31,74,.06), 0 18px 40px -24px rgba(0,31,74,.22); }
.dep-fig svg{ width:100%; height:auto; display:block; overflow:visible; font-family:var(--f-sans); }
.dep-fig .zone{ stroke-width:1; }
.dep-fig .zone.cap{ fill:#f2f4ff; stroke:#dfe3fb; }
.dep-fig .zone.cap.fade{ fill:none; stroke:#d9e0ec; stroke-dasharray:4 5; }
.dep-fig .zone.env{ fill:#fff; stroke:#dfe5ef; }
.dep-fig .zl{ font:400 10px var(--f-mono); fill:var(--slate-500); letter-spacing:.05em; text-transform:uppercase; }
.dep-fig .zs{ font:400 9.5px var(--f-mono); fill:var(--slate-500); letter-spacing:.03em; }
.dep-fig .hx-bg{ fill:#fff; filter:drop-shadow(0 6px 10px rgba(28,47,224,.18)); }
.dep-fig .hx-o{ fill:none; stroke-width:2.5; }
.dep-fig .hx-a{ fill:none; stroke:#1C2FE0; stroke-width:2; }
.dep-fig .hx-b{ fill:none; stroke:#F01080; stroke-width:2; }
.dep-fig .hx-l{ font-size:11px; font-weight:500; fill:var(--ink-900); }
.dep-fig .code rect{ fill:#001f4a; }
.dep-fig .code text{ font:500 9px var(--f-mono); fill:#fff; }
.dep-fig .chip-s rect{ fill:#f4f6fa; stroke:#e1e6ee; }
.dep-fig .chip-s text{ font:400 9.5px var(--f-mono); fill:var(--ink-700); letter-spacing:.06em; }
.dep-fig .lk{ stroke:#c3cde0; stroke-width:1.3; fill:none; }
.dep-fig .lk.dot{ stroke-dasharray:2.5 4; stroke:#9aa6c4; }
.dep-fig .arrowh{ fill:none; stroke:#9aa6c4; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.dep-fig .pp circle, .dep-fig .pp path{ fill:#001f4a; }
.dep-fig .pp.you circle, .dep-fig .pp.you path{ fill:#b9c4d6; }
.dep-fig .lock rect{ fill:#001f4a; }
.dep-fig .lock path{ fill:none; stroke:#001f4a; stroke-width:1.6; }
.dep-fig .fp{ fill:#1C2FE0; }
@media (prefers-reduced-motion: reduce){ .dep-fig .fp{ display:none; } }
.dep-k{ font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--slate-500); }
.dep h3{ font-size:clamp(24px,2.2vw,30px); letter-spacing:-.022em; line-height:1.1; }
.dep dl{ margin:8px 0 0; display:grid; gap:4px; }
.dep dt{ font:400 12px var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--slate-500); margin-top:12px; }
.dep dd{ margin:0; font-size:16px; line-height:1.5; color:var(--slate-600); }

/* v11: atomic grow stages redrawn from slide 12 of the atomic deck, same scale for all three */
.stages svg.st-art{ width:100%; height:auto; overflow:visible; margin:8px 0 4px; }
.st-art .hub{ fill:#eef0fb; stroke:#001f4a; stroke-width:5; }
.st-art .hub.pk{ fill:#f6e9f2; }
.st-art .hub.bl{ fill:#e6eefb; }
.st-art .ring{ fill:#fff; stroke:#001f4a; stroke-width:5; }
.st-art .ln{ fill:none; stroke:#5b678c; stroke-width:3.5; stroke-dasharray:10 9; }
.st-art .d.t{ fill:url(#st-t); } .st-art .d.b{ fill:url(#st-b); } .st-art .d.p{ fill:url(#st-p); }
.st-art .d.w{ fill:#fff; stroke:#c3cadb; stroke-width:3; }
.st-art .arc{ font:italic 400 40px var(--f-sans); fill:#001f4a; letter-spacing:.01em; }
/* v11: gap chart, cleaner: labels at the line ends, the gap as a soft area */
.gapchart .ax{ stroke:var(--line-strong); stroke-width:1; }
.gapchart .area{ fill:url(#gapfill); stroke:none; opacity:0; transition:opacity .8s var(--ease) 1.4s; }
.gapchart.in .area{ opacity:1; }
.gapchart .c1, .gapchart .c2{ stroke-width:3; }
.gapchart .e1{ fill:#1C2FE0; } .gapchart .e2{ fill:#F01080; }
.gapchart .e1, .gapchart .e2{ opacity:0; transition:opacity .4s var(--ease) 2s; }
.gapchart.in .e1, .gapchart.in .e2{ opacity:1; }
.gapchart text{ font:500 14px var(--f-sans); letter-spacing:-.005em; }
.gapchart .lg{ fill:var(--ink-900); font-size:15px; }
.gapchart .lt{ fill:var(--slate-500); font:400 12px var(--f-sans); }
.gapchart figcaption{ font:400 15px/1.5 var(--f-sans); letter-spacing:0; text-transform:none; color:var(--slate-500); }
@media (prefers-reduced-motion:reduce){ .gapchart .area, .gapchart .e1, .gapchart .e2{ opacity:1; transition:none; } }
/* v11: the Capgemini script sits optically high (its descenders hang below); drop it so its letter body centres on "the product" */
.lockup .by img{ position:relative; top:2px; }

/* ===================== v11: less template, more editorial =====================
   Labels were tiny monospaced capitals with wide tracking, often with a dot or a pill: the classic AI-site look.
   Labels now read as plain sentence case in Ubuntu. Monospace stays only for numbers and times (01, 08:30). */
.eyebrow, .proof, .agents .lvl, .ind .lbl, .pgroup h4, .presets .lbl, .detail .pill-row, .detail h5, .node .p, .hubtext .lead,
.way .k, .crumbs, .facts h5, .rel .p, .live, .h5n, .askline .mono, .lm-row .ct, .lm-panel .st, .afeed-note, .indbar .mono,
.dom-head .st, .gapchart figcaption, .rcard .fr, .stages .when, .arch-k, .play .k, .sw-you .who, .sw-note, .io-k, .day-k,
.archlist .al-k, .dep-k, .dep dt, .together .k{
  font-family:var(--f-sans); text-transform:none; letter-spacing:0; font-weight:400;
}
.eyebrow{ font-size:15px; line-height:1.3; font-weight:500; color:var(--ink-700); gap:0; }
.eyebrow .dot{ display:none; }
.dk .eyebrow, .night .eyebrow, .tech .eyebrow{ color:var(--on-night-2, rgba(255,255,255,.78)); }
.crumbs, .rel .p, .node .p, .live, .lm-row .ct, .dom-head .st, .io-k, .dep dt, .facts h5, .detail h5, .h5n{ font-size:14px; }
.archlist .al-k, .dep-k, .day-k, .indbar .mono, .askline .mono, .lm-panel .st, .way .k, .arch-k{ font-size:14px; }
.stages .when{ background:none !important; color:var(--slate-600) !important; padding:0; border-radius:0; font-size:15px; font-weight:500; }
.play .k{ font-size:14px; font-weight:500; }
.together .k{ font-size:15px; font-weight:500; }
.dep dt, .facts h5, .detail h5, .io-k{ color:var(--ink-700); font-weight:500; }
.dep-fig .zl{ font-family:var(--f-sans); text-transform:none; letter-spacing:0; font-size:11px; }
.stack .pl text{ font-family:var(--f-sans); text-transform:none; letter-spacing:0; font-size:14px; }

/* v11: home showcase, an endless loop through the product moments, with the full film next to it */
.seq-frame video{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#eef0fb; }
.seq-frame .play{ opacity:1; }
.seq-foot{ display:flex; align-items:center; gap:clamp(20px,3vw,40px); margin-top:22px; }
.seq-steps{ list-style:none; margin:0; padding:0; flex:1; min-width:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(8px,1.4vw,18px); }
.seq-steps button{ all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:9px; width:100%; color:var(--slate-500); font-size:14px; line-height:1.3; transition:color var(--t-fast) var(--ease); }
.seq-steps button:hover, .seq-steps button.on{ color:var(--ink-900); }
.seq-steps button:focus-visible{ outline:2px solid var(--blue-600); outline-offset:5px; border-radius:3px; }
.seq-steps .bar{ display:block; height:2px; border-radius:2px; background:var(--line); overflow:hidden; }
.seq-steps .bar i{ display:block; height:100%; background:var(--ink-900); transform:scaleX(0); transform-origin:0 50%; }
.filmpill{ all:unset; box-sizing:border-box; cursor:pointer; flex:none; display:flex; align-items:center; gap:14px; padding:6px 20px 6px 6px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.08), 0 10px 30px -14px rgba(28,47,224,.45); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.filmpill:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(0,31,74,.1), 0 18px 40px -16px rgba(240,16,128,.45); }
.filmpill:focus-visible{ outline:2px solid var(--blue-600); outline-offset:3px; }
.fp-thumb{ position:relative; width:88px; height:52px; border-radius:11px; overflow:hidden; flex:none; background:#eef0fb; }
.fp-thumb img{ width:100%; height:100%; object-fit:cover; transform:scale(1.18); animation:fpDrift 9s var(--ease-io, ease-in-out) infinite alternate; }
.fp-thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(28,47,224,.35), rgba(240,16,128,.35)); mix-blend-mode:multiply; }
.fp-play{ position:absolute; inset:0; z-index:1; display:grid; place-items:center; color:#fff; }
.fp-play svg{ width:22px; height:22px; padding:7px; box-sizing:content-box; border-radius:50%; background:rgba(255,255,255,.22); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 0 0 0 rgba(255,255,255,.6); animation:fpPulse 2.4s ease-out infinite; }
.filmpill:hover .fp-thumb img{ transform:scale(1.3); }
.fp-t{ display:grid; gap:3px; }
.fp-t b{ font-weight:500; font-size:15.5px; color:var(--ink-900); letter-spacing:-.01em; }
.fp-t span{ font-size:13.5px; color:var(--slate-500); }
@keyframes fpDrift{ from{ transform:scale(1.18) translate(-3%, 1%); } to{ transform:scale(1.18) translate(3%, -1%); } }
@keyframes fpPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55); } 80%,100%{ box-shadow:0 0 0 12px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce){ .fp-thumb img, .fp-play svg{ animation:none; } }
@media (max-width:900px){
  .seq-foot{ flex-direction:column; align-items:stretch; }
  .seq-steps{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(120px,40%); overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
  .filmpill{ align-self:flex-start; }
}
.hero-solo .seq{ max-width:1120px; } .hero-solo .seq .frame{ max-width:none; }

/* v12: the the product ribbon loop (the turning ribbon) behind the home and platform heroes */
.has-ribbons .field{ display:none; }
.ribbon-bg{ position:absolute; left:0; right:0; top:0; height:min(100vh, 980px); z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent); mask-image:linear-gradient(to bottom, #000 62%, transparent); }
.ribbon-bg video{ width:100%; height:100%; object-fit:cover; object-position:100% 0; display:block; }
@media (max-width:760px){ .ribbon-bg{ height:520px; opacity:.75; } .ribbon-bg video{ object-position:78% 0; } }

/* v12: home loop control sits in the step row, aligned with the progress bars */
.seq-foot{ align-items:flex-start; }
.seq-toggle{ all:unset; box-sizing:border-box; cursor:pointer; flex:none; width:32px; height:32px; margin-top:-15px; border-radius:50%; display:grid; place-items:center; color:var(--ink-900); background:#fff; box-shadow:0 0 0 1px var(--line-strong); transition:box-shadow var(--t-fast) var(--ease); }
.seq-toggle:hover{ box-shadow:0 0 0 1px var(--ink-900); }
.seq-toggle:focus-visible{ outline:2px solid var(--blue-600); outline-offset:3px; }
.seq-toggle svg{ width:12px; height:12px; }
.seq-steps{ padding-top:0; }
.filmpill{ margin-top:-22px; }
@media (max-width:900px){ .seq-toggle{ margin-top:0; align-self:flex-start; } .filmpill{ margin-top:0; } }
.play-img img.pos-left{ object-position:46% 40%; }
.plat-hero .ribbon-bg{ opacity:.72; }
@media (max-width:900px){ .seq-foot{ align-items:stretch; } .seq-steps{ width:100%; max-width:100%; } }

/* ===================== v13: product scenes on the design system =====================
   1600 x 900 artboard, scaled to the frame. Tokens from the DS review pages (Pulse, Workspace, Journeys). */
.hx-stage{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#fbf9fa; }
.hx-app{ position:absolute; left:0; top:0; width:1600px; height:900px; transform-origin:0 0; font-family:Ubuntu, var(--f-sans); color:#001f4a; -webkit-font-smoothing:antialiased; }
.hx-app *{ box-sizing:border-box; }
.hx-i{ flex:none; }
/* sidebar */
.hx-side{ position:absolute; left:14px; top:14px; width:236px; height:872px; background:#fff; border-radius:18px; box-shadow:0 8px 30px rgba(18,42,76,.07); padding:28px 18px 16px 24px; display:flex; flex-direction:column; }
.hx-user{ display:flex; align-items:center; gap:13px; }
.hx-av{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#2f6df6,#055efb); color:#fff; font-weight:500; font-size:18px; box-shadow:0 0 0 3px #fff, 0 0 0 4px #d0dffe; }
.hx-user b{ display:block; font-size:22px; font-weight:500; line-height:1.1; }
.hx-user small{ display:block; font-size:12.5px; color:#a0a7b8; margin-top:3px; }
.hx-brand{ margin:18px 0 18px -8px; height:38px; border-radius:10px; background:#fff; box-shadow:0 2px 10px rgba(18,42,76,.08); display:flex; align-items:center; justify-content:space-between; padding:0 14px 0 16px; font-size:15px; font-weight:500; }
.hx-brand span{ display:flex; align-items:center; gap:8px; }
.hx-nav{ display:flex; align-items:center; gap:13px; height:34px; padding:0 10px; margin:0 -8px 3px -10px; border-radius:9px; font-size:14.5px; font-weight:500; color:#001f4a; }
.hx-nav .hx-i{ color:#1f3a61; }
.hx-nav.on{ background:#d0dffe; color:var(--blue-600); }
.hx-nav.on .hx-i{ color:var(--blue-600); }
.hx-more{ margin-left:auto; color:#8a93a6; display:flex; }
.hx-sep{ height:1px; background:#e8ecf1; margin:10px 0 12px -10px; }
.hx-cap{ font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#66728a; margin:0 0 8px; }
.hx-foot{ margin-top:auto; border-top:1px solid #e8ecf1; padding-top:14px; display:flex; justify-content:space-between; color:#1f3a61; padding-right:6px; }
/* main */
.hx-main{ position:absolute; left:290px; top:0; right:0; bottom:0; padding:44px 54px 0 28px; }
.hx-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; }
.hx-crumb{ font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#66728a; margin-bottom:6px; }
.hx-head h3{ margin:0; font-size:36px; font-weight:500; letter-spacing:-.02em; line-height:1.1; color:#001f4a; }
.hx-head p{ margin:6px 0 0; font-size:14.5px; color:#4f5d78; }
.hx-upd{ text-align:right; font-size:13.5px; color:#001f4a; }
.hx-upd b{ display:block; font-weight:500; }
.hx-upd span{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#4f5d78; margin-top:4px; }
.hx-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--blue-600); flex:none; }
.hx-dot.g{ background:#15784c; } .hx-dot.r{ background:#b54708; } .hx-dot.a{ background:#e07b00; }
.hx-grid{ display:grid; gap:16px; align-items:start; }
.hx-row{ display:flex; align-items:center; }
.hx-card{ position:relative; background:#fff; border-radius:16px; box-shadow:0 1px 2px rgba(0,31,74,.04), 0 10px 30px rgba(0,31,74,.05); padding:22px 24px; }
.hx-meta{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:#66728a; margin-bottom:14px; }
.hx-meta em{ margin-left:auto; font-style:normal; color:#8a93a6; }
.hx-meta .hx-i{ color:#66728a; }
.hx-hero h4{ margin:0 0 12px; font-size:28px; font-weight:500; line-height:1.18; letter-spacing:-.015em; color:#001f4a; max-width:640px; }
.hx-body{ margin:0; font-size:14.5px; line-height:1.55; color:#4f5d78; }
.hx-chip{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:500; background:#eef1f6; color:#4f5d78; white-space:nowrap; }
.hx-chip.blue{ background:#e3ecfb; color:var(--blue-600); }
.hx-chip.risk{ background:#fdeee3; color:#b54708; }
.hx-chip.ok{ background:#e5f4ec; color:#15784c; }
.hx-chip.violet{ background:#e6e3fb; color:#3b2f8f; }
.hx-chip.dark{ background:#001f4a; color:#fff; height:32px; padding:0 14px; font-size:13px; }
.hx-chip.line{ background:#fff; color:#001f4a; box-shadow:inset 0 0 0 1px #e1e5ec; height:32px; padding:0 14px; font-size:13px; }
.hx-btn{ display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 20px; border-radius:999px; font-size:14.5px; font-weight:500; background:#eef1f4; color:#001f4a; }
.hx-btn.ghost{ background:#eef1f4; }
.hx-btn.primary{ background:var(--blue-600); color:#fff; box-shadow:0 6px 18px rgba(5,94,251,.25); }
.hx-btn.orch{ background:linear-gradient(90deg,#055efb,#2f6df6); color:#fff; padding-left:6px; box-shadow:0 6px 18px rgba(5,94,251,.25); }
.hx-btn.orch img{ width:34px; height:34px; border-radius:50%; }
/* bars */
.hx-bar{ display:block; height:8px; border-radius:4px; background:#eef1f6; overflow:hidden; }
.hx-bar i{ display:block; height:100%; width:0; border-radius:4px; background:var(--blue-600); transition:width 1s cubic-bezier(.2,.7,.2,1); }
.hx-bar i.on{ width:var(--w); }
.hx-bar.violet i{ background:#a597f2; } .hx-bar.grey i{ background:#c7d0dc; } .hx-bar.strong i{ background:var(--blue-600); } .hx-bar.weak i{ background:#8fb3fd; }
.hx-bars{ display:flex; align-items:flex-end; gap:4px; height:52px; }
.hx-bars i{ flex:1; min-width:9px; height:0; border-radius:2px 2px 0 0; background:#d0dffe; transition:height .7s cubic-bezier(.2,.7,.2,1); }
.hx-bars i.on{ height:var(--h); }
.hx-bars i.hi{ background:var(--blue-600); }
.hx-spark{ width:230px; display:grid; gap:4px; }
.hx-spark b{ font-size:26px; font-weight:500; color:var(--blue-600); }
.hx-spark b.pos{ color:var(--blue-600); }
.hx-spark small{ font-size:12px; color:#8a93a6; margin-bottom:6px; }
/* lists */
.hx-lh{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.hx-lh b{ font-size:17px; font-weight:500; }
.hx-lh span{ font-size:12.5px; color:#8a93a6; }
.hx-cap2{ font-size:11.5px !important; letter-spacing:.06em; text-transform:uppercase; color:#66728a; }
.hx-li{ display:grid; grid-template-columns:10px 1fr auto; gap:12px; align-items:start; padding:12px 10px; margin:0 -10px; border-radius:10px; font-size:14.5px; line-height:1.4; }
.hx-li .hx-dot{ margin-top:6px; }
.hx-li em{ font-style:normal; font-size:12px; color:#8a93a6; }
.hx-li.new{ background:#fff6ef; }
.hx-topics{ display:grid; gap:12px; }
.hx-tp{ display:grid; grid-template-columns:170px 1fr 52px 92px; gap:16px; align-items:center; font-size:14.5px; }
.hx-tp b{ font-weight:500; font-size:14px; text-align:right; }
.hx-card .hx-tp:has(+ .hx-sov), .hx-card > .hx-tp{ margin-bottom:12px; }
.hx-card > .hx-tp{ grid-template-columns:120px 1fr 52px; }
/* drawer (quotes) */
.hx-drawer{ position:absolute; top:24px; right:24px; bottom:24px; width:420px; background:#fff; border-radius:18px; box-shadow:0 1px 2px rgba(0,31,74,.04), 0 24px 60px rgba(0,31,74,.16); padding:26px 26px; display:flex; flex-direction:column; gap:14px; }
.hx-dsub{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:#66728a; margin-top:-6px; }
.hx-quote{ background:#f7f8fc; border-radius:12px; padding:16px 18px; font-size:15.5px; line-height:1.45; color:#001f4a; }
.hx-quote small{ display:block; margin-top:8px; font-size:12px; color:#8a93a6; }
/* filters and table */
.hx-filt{ display:flex; align-items:center; gap:8px; }
.hx-flab{ font-size:13px; color:#4f5d78; margin-right:6px; }
.hx-flink{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; font-size:13px; font-weight:500; color:var(--blue-600); }
.hx-tbl{ padding:6px 0 10px; overflow:hidden; }
.hx-th, .hx-tr{ display:grid; grid-template-columns:118px 1fr 110px 150px 50px; gap:14px; align-items:center; padding:0 22px; }
.hx-th{ height:42px; font-size:12.5px; color:#66728a; border-bottom:1px solid #eef1f4; }
.hx-tr{ min-height:62px; font-size:14px; color:#4f5d78; border-bottom:1px solid #f1f3f7; }
.hx-tr .w{ color:#001f4a; font-weight:500; font-size:14.5px; line-height:1.35; }
.hx-tr .m{ font-size:12.5px; color:#8a93a6; text-align:right; }
.hx-rel{ display:grid; grid-template-columns:1fr 38px; gap:10px; align-items:center; }
.hx-rel b{ font-weight:500; font-size:13px; color:#001f4a; }
.hx-note{ display:flex; align-items:center; gap:8px; padding:14px 22px 4px; font-size:12.5px; color:#3b2f8f; }
/* brief */
.hx-bsec{ border-radius:12px; padding:14px 16px; background:#f7f8fc; margin-bottom:10px; }
.hx-bsec small{ display:block; font-size:12px; color:#66728a; margin-bottom:6px; }
.hx-bsec p{ margin:0; font-size:14.5px; line-height:1.45; color:#001f4a; }
.hx-bsec.ai{ background:linear-gradient(135deg,#eef2ff,#f6efff); box-shadow:inset 0 0 0 1px #d9d3fb; }
.hx-bsec.ai small{ color:#3b2f8f; }
.hx-ev{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:12.5px; color:var(--blue-600); }
/* ask bar */
.hx-ask{ position:absolute; left:28px; right:116px; bottom:32px; height:56px; border-radius:999px; background:#fff; box-shadow:0 4px 18px rgba(18,42,76,.08), inset 0 0 0 1px #e6e9f2; display:flex; align-items:center; gap:14px; padding:0 8px 0 10px; font-size:15px; color:#001f4a; }
.hx-plus{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#eef1f6; color:#1f3a61; }
.hx-ask .hx-i:not(.hx-plus .hx-i){ color:#66728a; }
.hx-send{ margin-left:auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--blue-600); color:#fff; }
.hx-send .hx-i{ color:#fff !important; }
.hx-type{ display:inline-block; overflow:hidden; white-space:nowrap; width:0; border-right:2px solid var(--blue-600); }
.hx-ask.on .hx-type{ animation:hxType 1.1s steps(var(--n)) .25s forwards, hxCaret .7s step-end 6; }
@keyframes hxType{ to{ width:calc(var(--n) * 1ch); } }
@keyframes hxCaret{ 50%{ border-color:transparent; } }
.hx-ask .hx-type{ font-family:Ubuntu, var(--f-sans); }
/* toast */
.hx-toast{ position:absolute; left:50%; bottom:104px; transform:translate(-50%,12px); display:flex; align-items:center; gap:10px; height:48px; padding:0 22px 0 16px; border-radius:999px; background:#001f4a; color:#fff; font-size:14.5px; font-weight:500; box-shadow:0 14px 34px rgba(0,31,74,.25); white-space:nowrap; }
.hx-toast .hx-i{ color:#7ee2b0; }
/* trends */
.hx-trend{ display:grid; grid-template-columns:200px 1fr 92px 64px; gap:22px; align-items:center; padding:14px 12px; margin:0 -12px; border-radius:12px; border-bottom:1px solid #f1f3f7; }
.hx-trend .n{ font-size:16px; font-weight:500; }
.hx-trend .hx-bars{ height:46px; }
.hx-score{ text-align:right; } .hx-score b{ display:block; font-size:20px; font-weight:500; } .hx-score small{ font-size:11.5px; color:#8a93a6; }
.hx-why h4{ margin:0 0 10px; font-weight:500; }
.hx-src small{ display:block; font-size:12px; color:#66728a; margin-bottom:8px; }
.hx-src div{ display:flex; align-items:center; gap:9px; font-size:14px; color:#001f4a; padding:10px 12px; border-radius:10px; background:#f7f8fc; margin-bottom:6px; }
.hx-src .hx-i{ color:var(--blue-600); }
/* kpis */
.hx-kpi small{ display:block; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:#66728a; font-weight:500; }
.hx-kpi div{ display:flex; align-items:baseline; gap:10px; margin-top:10px; }
.hx-kpi b{ font-size:34px; font-weight:500; letter-spacing:-.02em; }
.hx-kpi em{ font-style:normal; font-size:13px; font-weight:500; color:var(--blue-600); }
.hx-kpi span{ display:block; font-size:12.5px; color:#66728a; margin:4px 0 14px; }
.hx-kpi .hx-bars{ height:40px; }
.hx-sov{ margin-top:18px; padding-top:16px; border-top:1px solid #eef1f4; border-radius:12px; }
.hx-stack{ display:flex; gap:3px; height:14px; border-radius:7px; overflow:hidden; }
.hx-stack i{ display:block; }
.hx-leg{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; font-size:13px; color:#4f5d78; }
.hx-leg span{ display:inline-flex; align-items:center; gap:7px; }
.hx-leg i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.hx-rec{ border-radius:14px; background:#f3f6ff; padding:16px 18px; margin-top:6px; }
.hx-rec small{ display:block; font-size:12.5px; font-weight:500; color:var(--blue-600); margin-bottom:6px; }
.hx-rec b{ font-size:18px; font-weight:500; line-height:1.35; }
/* journey + content briefs */
.hx-journey{ display:flex; align-items:center; padding:26px 26px; }
.hx-step{ position:relative; flex:1; min-width:0; background:#f7f8fc; border-radius:14px; padding:14px 16px; box-shadow:inset 0 0 0 1px #e8ecf1; }
.hx-step small{ display:block; font-size:12px; color:#66728a; }
.hx-step b{ display:block; margin-top:4px; font-size:15px; font-weight:500; }
.hx-step.need{ background:#fff; box-shadow:inset 0 0 0 1px #d0dffe, 0 6px 18px rgba(5,94,251,.08); }
.hx-link{ flex:0 0 28px; height:2px; background:#d0dffe; }
.hx-flag{ position:absolute; right:10px; top:-12px; font-style:normal; font-size:11px; font-weight:500; color:#fff; background:#b01b66; border-radius:999px; padding:4px 9px; box-shadow:0 0 0 3px #fff; }
.hx-cb h5{ margin:0 0 6px; font-size:18px; font-weight:500; }
.hx-cb .hx-body{ min-height:46px; }
.hx-kv{ display:grid; grid-template-columns:118px 1fr; gap:10px; font-size:13px; padding:9px 0; border-top:1px solid #f1f3f7; }
.hx-kv small{ color:#66728a; font-size:12.5px; }
.hx-route{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:12px; border-top:1px solid #eef1f4; }
.hx-route small{ color:#66728a; font-size:12.5px; }
.hx-endbar{ position:absolute; left:28px; right:54px; bottom:30px; justify-content:space-between; background:#fff; border-radius:16px; padding:12px 12px 12px 22px; box-shadow:0 10px 30px rgba(0,31,74,.08); font-size:14.5px; color:#4f5d78; }
.hx-orch{ position:absolute; right:30px; bottom:28px; width:56px; height:56px; border-radius:50%; box-shadow:0 8px 24px rgba(91,63,196,.22); }
/* motion: everything with data-at enters on its cue */
.hx-app [data-at]{ opacity:0; transform:translateY(10px); transition:opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1), width 1s cubic-bezier(.2,.7,.2,1), height .7s cubic-bezier(.2,.7,.2,1); }
.hx-app [data-at].on{ opacity:1; transform:none; }
.hx-app .hx-bar i[data-at], .hx-app .hx-bars i[data-at]{ opacity:1; transform:none; }
.hx-app .hx-drawer[data-at]{ transform:translateX(40px); }
.hx-app .hx-drawer[data-at].on{ transform:none; }
.hx-app .hx-toast[data-at]{ transform:translate(-50%,14px); }
.hx-app .hx-toast[data-at].on{ transform:translate(-50%,0); }
.hx-app .hx-flag[data-at]{ transform:scale(.6); }
.hx-app .hx-flag[data-at].on{ transform:none; }
.hx-focus.on{ animation:hxFocus 1.6s ease-out .2s 1; }
@keyframes hxFocus{ 0%{ box-shadow:0 0 0 0 rgba(5,94,251,.0); } 30%{ box-shadow:0 0 0 4px rgba(5,94,251,.22); } 100%{ box-shadow:0 0 0 0 rgba(5,94,251,0); } }
.on .hx-press, .hx-press.on{ animation:hxPress .9s ease 1s 1; }
@keyframes hxPress{ 0%,100%{ transform:none; } 40%{ transform:scale(.95); } }
.hx-app.still [data-at]{ transition:none; }
@media (prefers-reduced-motion: reduce){ .hx-app [data-at]{ transition:none; } .hx-focus.on, .hx-press.on, .hx-ask.on .hx-type{ animation:none; } .hx-type{ width:auto; border:0; } }
/* v13b: tighter 1440 x 810 artboard, fixes */
.hx-app{ width:1440px; height:810px; }
.hx-side{ height:782px; padding-top:24px; }
.hx-brand{ margin:14px 0 14px -8px; }
.hx-nav{ height:32px; margin-bottom:2px; }
.hx-sep{ margin:8px 0 10px -10px; }
.hx-main{ padding:34px 40px 0 26px; }
.hx-head{ margin-bottom:18px; }
.hx-kpi .hx-bars{ display:flex; margin:0; }
.hx-hero .hx-row{ align-items:center !important; }
.hx-drawer{ bottom:auto; top:20px; right:20px; }
.hx-endbar{ right:104px; }
.hx-ask{ right:104px; bottom:24px; }
.hx-ask.idle .hx-ph{ color:#8a93a6; font-size:14.5px; }
.hx-orch{ right:26px; bottom:22px; }
.hx-toast{ bottom:96px; }
.frame .hx-stage ~ .demo{ left:auto; right:12.5%; bottom:12px; }
.hx-th, .hx-tr{ grid-template-columns:104px 1fr 92px 128px 34px; gap:12px; padding:0 18px; }
.hx-tr{ min-height:58px; }
.hx-user small{ color:#66728a; }
.hx-nav.on, .hx-nav.on .hx-i{ color:#044fd6; }
.hx-ask.idle .hx-ph{ color:#66728a; }
/* v14: Sense opens to the radars; Voice of Customer after the product screen */
.hx-nav.open{ color:#001f4a; }
.hx-more.dn{ color:#66728a; }
.hx-sub{ height:28px; display:flex; align-items:center; padding-left:33px; margin:0 -8px 2px -10px; border-radius:8px; font-size:13.5px; color:#4f5d78; }
.hx-sub.on{ background:#d0dffe; color:#044fd6; font-weight:500; }
.hx-seg{ display:flex; gap:2px; padding:4px; border-radius:999px; background:#eef1f6; font-size:12.5px; font-weight:500; color:#4f5d78; }
.hx-seg span{ padding:7px 14px; border-radius:999px; }
.hx-seg span.on{ background:#001f4a; color:#fff; }
.hx-vhero{ display:grid; grid-template-columns:1fr 1.05fr; gap:10px 34px; padding:26px 28px 22px; }
.hx-vcopy h4{ margin:14px 0 10px; font-size:27px; font-weight:500; line-height:1.2; letter-spacing:-.015em; }
.hx-vchart{ position:relative; margin:0; padding-top:6px; }
.hx-vchart small{ position:absolute; right:0; top:0; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#66728a; font-weight:500; }
.hx-vchart svg{ width:100%; height:200px; margin-top:26px; overflow:visible; }
.hx-vchart .ln{ fill:none; stroke:#df7d6c; stroke-width:2.4; stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:100; vector-effect:non-scaling-stroke; transition:stroke-dashoffset 2.4s cubic-bezier(.4,.1,.2,1) .3s; }
.hx-vchart.on .ln{ stroke-dashoffset:0; }
.hx-vchart .area{ opacity:0; transition:opacity 1s ease 1.6s; }
.hx-vchart.on .area{ opacity:1; }
.hx-tag{ position:absolute; font-size:11px; font-weight:500; padding:3px 7px; border-radius:6px; background:#eef1f6; color:#66728a; }
.hx-tag.a{ left:2%; top:28px; } .hx-tag.b{ right:0; bottom:-6px; background:#fdeee3; color:#b54708; }
.hx-kpis{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:12px; }
.hx-k{ padding-bottom:12px; border-bottom:2px solid #e8ecf1; }
.hx-k.on1{ border-color:var(--blue-600); }
.hx-k small{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#66728a; font-weight:500; }
.hx-k b{ font-size:30px; font-weight:400; letter-spacing:-.02em; margin-right:8px; }
.hx-k b.risk{ color:#b54708; }
.hx-k em{ font-style:normal; font-size:13px; font-weight:500; }
.hx-k em.dn{ color:#b54708; } .hx-k em.up{ color:#15784c; } .hx-k em.mute{ color:#66728a; font-weight:400; }
.hx-fh{ display:flex; align-items:baseline; gap:14px; margin:22px 0 12px; }
.hx-fh b{ font-size:20px; font-weight:500; }
.hx-fh span{ font-size:13px; color:#66728a; }
.hx-focusrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.hx-fi{ background:rgba(255,255,255,.9); border-radius:16px; padding:16px 18px 18px; box-shadow:0 1px 2px rgba(0,31,74,.04), 0 10px 30px rgba(0,31,74,.05); }
.hx-fi p{ margin:12px 0 0; font-size:14px; line-height:1.5; color:#4f5d78; }
.hx-fi p b{ color:#001f4a; font-weight:500; }
.hx-chip.warn{ background:#fff4e0; color:#a4430f; }
.hx-orchp{ position:absolute; top:18px; right:18px; bottom:18px; width:380px; background:rgba(255,255,255,.97); border-radius:18px; box-shadow:0 1px 2px rgba(0,31,74,.04), 0 24px 60px rgba(0,31,74,.16); padding:20px 20px 16px; display:flex; flex-direction:column; gap:14px; }
.hx-oh{ display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid #eef1f4; }
.hx-oh b{ font-size:17px; font-weight:500; }
.hx-oh span{ color:#66728a; display:flex; }
.hx-msg{ font-size:14px; line-height:1.5; border-radius:14px; padding:12px 14px; }
.hx-msg.me{ align-self:flex-end; max-width:86%; background:#d0dffe; color:#001f4a; }
.hx-msg.ai{ display:grid; grid-template-columns:30px 1fr; gap:10px; background:#f7f8fc; color:#1f3a61; }
.hx-msg.ai img{ width:30px; height:30px; border-radius:50%; }
.hx-msg.ai b{ font-weight:500; color:#001f4a; }
.hx-msg blockquote{ margin:10px 0 0; padding:10px 12px; border-left:3px solid #df7d6c; background:#fff; border-radius:0 10px 10px 0; font-size:13.5px; color:#001f4a; }
.hx-sugg{ display:block; margin-top:12px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#66728a; font-weight:500; }
.hx-act{ display:flex; align-items:center; gap:8px; margin-top:6px; padding:10px 12px; border-radius:10px; background:#fff; box-shadow:inset 0 0 0 1px #d0dffe; color:#044fd6; font-weight:500; font-size:13.5px; }
.hx-oin{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; height:46px; padding:0 16px; border-radius:999px; box-shadow:inset 0 0 0 1px #e1e5ec; color:#66728a; font-size:14px; }
.hx-app .hx-orchp[data-at]{ transform:translateX(40px); }
.hx-app .hx-orchp[data-at].on{ transform:none; }

/* v15: platform opens on the architecture; real interface, Emma, orchestrator disc */
.arch-fig .ring{ fill:none; stroke:#fff; stroke-width:3; }
.arch-fig .scr .frame{ fill:none; stroke:#dfe5ef; }
.arch-fig .scr{ filter:drop-shadow(0 6px 14px rgba(0,31,74,.10)); }
.arch-fig .orch-img{ filter:drop-shadow(0 4px 10px rgba(0,31,74,.14)); }
.plat-hero.arch-sec .sec-head{ position:relative; z-index:1; }
/* v15: VoC orchestrator panel solid, demo label clear of it */
.hx-orchp{ background:#fff; box-shadow:-12px 0 40px rgba(0,31,74,.10), 0 24px 60px rgba(0,31,74,.16); z-index:3; }
.frame .hx-stage ~ .demo{ right:29%; }
.hx-av.ph{ background:#e8ebf2; }

/* v16b: no grain, no live dots, blobs only on the main heroes, numbering 1-2-3 where it helps */
.grain{ display:none !important; }
.live::before, .eyebrow .dot{ display:none; }
.layer > button{ grid-template-columns:1fr auto; }
.together .k{ color:#0b6f97; }

/* ===== v17: home hero, claims, dark showcase with the Meet the product intro ===== */
.home-hero{ padding-bottom:clamp(56px,7vw,96px); overflow-x:clip; }
.home-hero .field i{ animation:none; }
.home-hero .hero-copy{ max-width:760px; }
.claims{ list-style:none; margin:clamp(56px,7vw,96px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3.4vw,48px); }
.claims li{ border-top:1px solid var(--line-strong); padding-top:22px; }
.claims .cl-h{ font-size:clamp(19px,1.55vw,22px); line-height:1.3; letter-spacing:-.012em; font-weight:500; color:var(--ink-900); margin:0; }
.claims p{ margin-top:10px; font-size:15.5px; line-height:1.55; color:var(--slate-600,#4f5d78); max-width:36ch; }
@media (max-width:860px){ .claims{ grid-template-columns:1fr; gap:4px; } .claims li{ padding:18px 0 14px; } }

.showcase{ position:relative; background:#070b24; color:#fff; padding:clamp(56px,7vw,104px) 0 clamp(48px,6vw,88px); overflow:hidden; isolation:isolate; }
.showcase::before{ content:""; position:absolute; inset:-30% -10% auto; height:90%; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 40%, rgba(28,47,224,.38), rgba(7,11,36,0) 70%), radial-gradient(30% 40% at 80% 20%, rgba(240,16,128,.16), rgba(7,11,36,0) 70%); }
.showcase .seq{ max-width:1180px; margin:0 auto; }
.showcase .seq-frame{ position:relative; border-radius:20px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 40px 120px -30px rgba(28,47,224,.55); background:#eef0fb; }
.showcase .seq-steps button{ color:rgba(255,255,255,.6); }
.showcase .seq-steps button:hover, .showcase .seq-steps button.on{ color:#fff; }
.showcase .seq-steps .bar{ background:rgba(255,255,255,.16); }
.showcase .seq-steps .bar i{ background:#fff; }
.showcase .seq-toggle{ color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.28); background:transparent; }
.showcase .seq-toggle:hover{ box-shadow:0 0 0 1px #fff; }
.showcase .seq-steps button:focus-visible, .showcase .seq-toggle:focus-visible, .showcase .filmpill:focus-visible{ outline-color:#7fb2ff; }
.seq.is-intro video, .seq.is-intro .demo{ visibility:hidden; }
.seq:not(.is-intro) .si{ visibility:hidden; }

/* the intro board */
.si{ position:absolute; inset:0; z-index:2; overflow:hidden; background:#fbf9fa; --tdelay:0s; }
.si-art{ position:absolute; left:0; top:0; width:1440px; height:810px; transform-origin:0 0; }
.si-art *{ animation-duration:12s; animation-timing-function:linear; animation-fill-mode:both; animation-play-state:paused; animation-delay:var(--tdelay); }
.si-insight, .si-meet, .si-stack, .si-cap{ position:absolute; inset:0; }
.si-tool{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%) rotate(var(--r)); padding:12px 20px; border-radius:14px; background:#fff; color:#4f5d78; font-size:19px; white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,31,74,.06), 0 10px 30px rgba(0,31,74,.08); animation-name:siTool; animation-delay:calc(var(--tdelay) - var(--i) * 40ms); }
@keyframes siTool{
  0%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--r)) scale(.9); }
  6%{ opacity:1; transform:translate(-50%,-50%) rotate(var(--r)) scale(1); }
  27%{ opacity:1; transform:translate(-50%,-50%) translate(calc((720px - var(--x)) * .06), calc((405px - var(--y)) * .06)) rotate(var(--r)); }
  35%{ opacity:0; transform:translate(-50%,-50%) translate(calc(720px - var(--x)), calc(405px - var(--y))) rotate(0deg) scale(.3); }
  100%{ opacity:0; transform:translate(-50%,-50%) translate(calc(720px - var(--x)), calc(405px - var(--y))) scale(.3); } }
.si-stat{ position:absolute; left:50%; top:50%; width:820px; transform:translate(-50%,-50%); text-align:center; padding:44px 56px 40px; border-radius:28px; background:rgba(255,255,255,.86); backdrop-filter:blur(8px);
  box-shadow:0 1px 2px rgba(0,31,74,.05), 0 30px 80px rgba(0,31,74,.12); animation-name:siStat; }
.si-stat b{ display:block; font-size:150px; line-height:1; font-weight:500; letter-spacing:-.05em; color:#001f4a; font-variant-numeric:tabular-nums; }
.si-stat p{ margin:18px auto 0; max-width:640px; font-size:30px; line-height:1.3; letter-spacing:-.012em; color:#001f4a; }
.si-stat small{ display:block; margin-top:20px; font-size:16px; color:#66728a; }
@keyframes siStat{ 0%,3%{ opacity:0; transform:translate(-50%,-46%) scale(.97); } 9%{ opacity:1; transform:translate(-50%,-50%); } 27%{ opacity:1; transform:translate(-50%,-50%); } 33%,100%{ opacity:0; transform:translate(-50%,-52%) scale(.96); } }
.si-meet{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; animation-name:siMeet; }
.si-meet img{ width:132px; height:132px; filter:drop-shadow(0 18px 40px rgba(28,47,224,.25)); }
.si-meet b{ margin-top:26px; font-size:96px; line-height:1; letter-spacing:-.04em; font-weight:500; color:#001f4a; }
.si-meet span{ margin-top:16px; font-size:32px; color:#4f5d78; letter-spacing:-.01em; }
@keyframes siMeet{ 0%,31%{ opacity:0; transform:scale(.94); } 37%{ opacity:1; transform:none; } 45%{ opacity:1; transform:none; } 51%,100%{ opacity:0; transform:translateY(-60px) scale(.96); } }
.si-home, .si-card{ position:absolute; left:50%; top:50%; margin:0; border-radius:14px; overflow:hidden; background:#fff; }
.si-home{ width:900px; height:515px; z-index:3; transform:translate(-50%,-48%); box-shadow:0 0 0 1px rgba(0,31,74,.06), 0 40px 100px rgba(0,31,74,.22); animation-name:siHome; }
.si-home img, .si-card img{ display:block; width:100%; height:100%; object-fit:cover; object-position:0 0; }
@keyframes siHome{ 0%,46%{ opacity:0; transform:translate(-50%,-40%) scale(.9); } 55%{ opacity:1; transform:translate(-50%,-48%) scale(1); } 100%{ opacity:1; transform:translate(-50%,-48%) scale(1); } }
.si-card{ width:500px; height:281px; z-index:1; overflow:visible; background:none; animation-name:siCard; --dx:0px; --dy:0px; --rot:0deg; }
.si-card img{ border-radius:12px; box-shadow:0 0 0 1px rgba(0,31,74,.06), 0 24px 60px rgba(0,31,74,.2); }
.si-card figcaption{ position:absolute; left:50%; bottom:-46px; transform:translateX(-50%); white-space:nowrap; padding:9px 16px; border-radius:999px; background:#001f4a; color:#fff; font-size:17px; font-weight:500; animation:siCap 12s linear both paused; animation-delay:inherit; }
.si-card.l1{ --dx:-500px; --dy:-200px; --rot:-5deg; } .si-card.l2{ --dx:-560px; --dy:10px; --rot:-2deg; } .si-card.l3{ --dx:-500px; --dy:220px; --rot:3deg; }
.si-card.r1{ --dx:500px; --dy:-200px; --rot:5deg; } .si-card.r2{ --dx:560px; --dy:10px; --rot:2deg; } .si-card.r3{ --dx:500px; --dy:220px; --rot:-3deg; }
.si-card.l1, .si-card.r1{ animation-delay:var(--tdelay); } .si-card.l2, .si-card.r2{ animation-delay:calc(var(--tdelay) - 120ms); } .si-card.l3, .si-card.r3{ animation-delay:calc(var(--tdelay) - 240ms); }
@keyframes siCard{ 0%,58%{ opacity:0; transform:translate(-50%,-50%) scale(.82); } 60%{ opacity:1; transform:translate(-50%,-50%) scale(.82); }
  70%{ opacity:1; transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.92); }
  87%{ opacity:1; transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.92); }
  96%,100%{ opacity:0; transform:translate(-50%,-50%) scale(.82); } }
@keyframes siCap{ 0%,68%{ opacity:0; } 72%,86%{ opacity:1; } 89%,100%{ opacity:0; } }
.si-cap{ top:auto; bottom:30px; text-align:center; font-size:22px; color:#001f4a; font-weight:500; letter-spacing:-.01em; animation-name:siCapLine; }
@keyframes siCapLine{ 0%,62%{ opacity:0; transform:translateY(10px); } 68%,90%{ opacity:1; transform:none; } 96%,100%{ opacity:0; } }
.si-card.l1{ --dy:-185px; } .si-card.r1{ --dy:-185px; } .si-card.l3{ --dy:200px; } .si-card.r3{ --dy:200px; }
.si-card.l2{ --dx:-575px; } .si-card.r2{ --dx:575px; }
.si-cap{ bottom:auto; top:26px; }
.home-hero{ padding-top:calc(var(--nav-h) + clamp(40px,6vw,88px)); }
.home-hero .hero-copy{ max-width:1040px; }
.home-hero .hero-copy .lede{ max-width:620px; }
.home-hero .claims{ margin-top:clamp(48px,6vw,80px); }
@keyframes siStat{ 0%,3%{ opacity:0; transform:translate(-50%,-46%) scale(.97); } 9%{ opacity:1; transform:translate(-50%,-50%); } 26%{ opacity:1; transform:translate(-50%,-50%); } 31%,100%{ opacity:0; transform:translate(-50%,-53%) scale(.96); } }
@keyframes siMeet{ 0%,32%{ opacity:0; transform:scale(.94); } 38%{ opacity:1; transform:none; } 45%{ opacity:1; transform:none; } 51%,100%{ opacity:0; transform:translateY(-60px) scale(.96); } }
.si-card{ width:440px; height:248px; }
.si-card.l1{ --dx:-520px; --dy:-180px; } .si-card.l2{ --dx:-560px; --dy:15px; } .si-card.l3{ --dx:-520px; --dy:205px; }
.si-card.r1{ --dx:520px; --dy:-180px; } .si-card.r2{ --dx:560px; --dy:15px; } .si-card.r3{ --dx:520px; --dy:205px; }
.si-card figcaption{ left:14px; right:auto; bottom:auto; top:-16px; transform:none; font-size:16px; padding:8px 14px; box-shadow:0 8px 24px rgba(0,31,74,.25); }
.si-card.r1 figcaption, .si-card.r2 figcaption, .si-card.r3 figcaption{ left:auto; right:14px; }
.si-card.l2, .si-card.r2{ z-index:2; }
.si-home{ width:820px; height:469px; }
.si-card{ width:420px; height:236px; }
.si-card.l1{ --dx:-470px; --dy:-175px; } .si-card.l2{ --dx:-505px; --dy:20px; } .si-card.l3{ --dx:-470px; --dy:210px; }
.si-card.r1{ --dx:470px; --dy:-175px; } .si-card.r2{ --dx:505px; --dy:20px; } .si-card.r3{ --dx:470px; --dy:210px; }
.claims p{ max-width:40ch; }
.si-card.l3 figcaption, .si-card.r3 figcaption{ top:auto; bottom:-16px; }
.showcase .seq-foot{ margin-top:26px; align-items:center; }
.showcase .seq-toggle, .showcase .filmpill{ margin-top:0; }
@media (max-width:900px){ .showcase .seq-foot{ align-items:stretch; } }

/* ===== v17: service map with the full catalogue ===== */
.lm{ grid-template-columns:minmax(0,1.6fr) minmax(300px,.9fr); align-items:center; }
.lm-svg [data-dom]{ transition:opacity 360ms var(--ease), filter 360ms var(--ease); }
.lm.focus .lm-svg .lm-cluster[data-dom]:not(.on){ opacity:.55; filter:saturate(.6); }
.lm.focus .lm-svg .lm-cluster.on .lm-svc path.lm-tile{ transform:none; filter:none; }
.lm-svc path{ transition:transform 300ms var(--ease), opacity 300ms var(--ease), filter 300ms var(--ease); transform-box:fill-box; transform-origin:center; }
.lm-svc .lm-tile{ stroke-width:0; filter:drop-shadow(0 3px 6px rgba(0,31,74,.08)); }
.lm-svc .lm-halo{ opacity:.5; }
.lm-svc.soon .lm-tile{ fill:#fff; stroke-width:1.5; stroke-dasharray:5 5; stroke-opacity:.55; filter:none; }
.lm-svc.soon .lm-halo{ opacity:0; }
.lm-svc.soon text{ opacity:.78; }
.lm-svc:hover .lm-tile, .lm-svc.hi .lm-tile, .lm-svc:focus-visible .lm-tile{ transform:scale(1.05); filter:drop-shadow(0 8px 14px rgba(0,31,74,.18)); }
.lm-svc:focus-visible .lm-tile{ stroke:var(--blue-600); stroke-width:3; stroke-dasharray:none; stroke-opacity:1; }
.lm-svc.soon{ cursor:default; outline:none; }
.lm-svc, .lm-svc *{ transition:opacity 420ms var(--ease); }
.lm[data-mode="live"] .lm-svc.soon{ opacity:.12; }
.lm[data-mode="live"] .lm-svc.live .lm-halo{ opacity:.85; }
.lm-pulse{ display:none; }

.lm-side{ display:grid; gap:20px; align-content:center; }
.lm-mode{ display:inline-flex; justify-self:start; padding:4px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line); }
.lm-mode button{ all:unset; cursor:pointer; padding:9px 18px; border-radius:999px; font-size:14.5px; font-weight:500; color:var(--slate-600,#4f5d78); transition:background var(--t-fast), color var(--t-fast); }
.lm-mode button[aria-pressed="true"]{ background:var(--ink-900); color:#fff; }
.lm-mode button:focus-visible{ outline:2px solid var(--blue-600); outline-offset:2px; }
.lm-legend{ display:flex; gap:20px; font-size:13.5px; color:var(--slate-600,#4f5d78); margin-top:-6px; }
.lm-legend span{ display:inline-flex; align-items:center; gap:8px; }
.lm-legend span::before{ content:""; width:11px; height:11px; transform:rotate(45deg); border-radius:2px; }
.lm-legend .lg-live::before{ background:#e8d3f6; box-shadow:0 0 0 1px rgba(0,31,74,.08); }
.lm-legend .lg-soon::before{ background:#fff; box-shadow:inset 0 0 0 1.5px rgba(0,31,74,.35); }
.lm-info{ min-height:268px; border-top:1px solid var(--line-strong); padding-top:22px; }
.lm-dom-read h3{ font-size:clamp(22px,1.9vw,27px); line-height:1.2; letter-spacing:-.018em; font-weight:500; color:var(--ink-900); margin:0; }
.lm-count{ margin-top:8px; font-size:14.5px; font-weight:500; color:var(--dc, var(--blue-600)); }
.lm-dom-read p:last-child{ margin-top:10px; font-size:15.5px; line-height:1.55; color:var(--slate-600,#4f5d78); }
.lm-svc-read{ margin-top:18px; padding:16px 18px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 10px 30px -18px rgba(0,31,74,.25); }
.lm-svc-read b{ display:block; font-size:16.5px; font-weight:500; color:var(--ink-900); }
.lm-svc-read .st{ display:inline-block; margin-top:6px; font-size:13px; font-weight:500; }
.lm-svc-read .st.is-live{ color:#11734f; } .lm-svc-read .st.is-soon{ color:#66728a; }
.lm-svc-read p{ margin-top:6px; font-size:14.5px; line-height:1.5; color:var(--slate-600,#4f5d78); }
.lm-doms{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.lm-doms button{ all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:14px 4px; border-bottom:1px solid var(--line); }
.lm-doms button:focus-visible{ outline:2px solid var(--blue-600); outline-offset:2px; }
.lm-doms .nm{ font-size:16.5px; font-weight:500; color:var(--ink-900); transition:color var(--t-fast); }
.lm-doms .ct{ font-size:13.5px; color:var(--slate-500); }
.lm-doms button[aria-pressed="false"] .nm{ color:var(--slate-600,#4f5d78); }
.lm-doms button[aria-pressed="true"] .lm-gly{ transform:rotate(45deg) scale(1.25); }
@media (max-width:960px){ .lm{ grid-template-columns:1fr; } .lm-info{ min-height:0; } }
.lm{ grid-template-columns:minmax(0,1.85fr) minmax(290px,.85fr); }

/* ===== v17: Services page, one reading line from top to bottom ===== */
.plays-head{ display:grid !important; grid-template-columns:1fr !important; gap:22px; max-width:860px; align-items:start; }
.plays-head .lede{ justify-self:start !important; max-width:620px; margin:0; font-size:clamp(18px,1.4vw,20px); }
.plays{ margin-top:clamp(48px,6vw,72px); }
.play h2{ font-size:clamp(24px,2.1vw,30px); margin-top:22px; }
.play p{ font-size:16.5px; line-height:1.6; margin-top:10px; color:var(--slate-600,#4f5d78); }
.together{ margin-top:clamp(40px,5vw,56px); }
.together p{ font-size:clamp(19px,1.6vw,22px); }
.sec-head.stack{ grid-template-columns:1fr; gap:0; max-width:760px; }
.sec-head.stack .lede{ margin-top:18px; max-width:620px; }
.dom{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); padding:44px 0 40px; }
.dom-head{ gap:12px; }
.dom-head h3{ display:flex; align-items:center; gap:14px; font-size:clamp(24px,2.2vw,30px); line-height:1.15; letter-spacing:-.02em; margin:0; }
.dom-head h3 .lm-gly{ flex:none; width:14px; height:14px; border-radius:3px; }
.dom-head p{ font-size:16px; line-height:1.6; color:var(--slate-600,#4f5d78); max-width:30em; margin:0; }
.srow{ padding:20px 0; }
.srow b{ font-size:19px; }
.srow .d{ font-size:15.5px; margin-top:2px; }
.soonrow{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-items:baseline; padding:18px 0 4px; }
.soonrow .sk{ font-size:13.5px; font-weight:500; color:var(--slate-500); white-space:nowrap; }
.soonrow .sl{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14.5px; color:var(--slate-600,#4f5d78); }
@media (max-width:640px){ .soonrow{ grid-template-columns:1fr; } }
.sec-head.stack{ display:block; margin-bottom:40px; } .sec-head.stack h2{ margin-top:14px; }

/* ===== v17: service spec sheet ===== */
.spec{ margin:0; background:#fff; border-radius:18px; box-shadow:0 0 0 1px var(--line), 0 18px 50px -30px rgba(0,31,74,.3); padding:6px 26px; }
.spec > div{ display:grid; grid-template-columns:132px 1fr; gap:6px 24px; padding:17px 0; border-bottom:1px solid var(--line); }
.spec > div:last-child{ border-bottom:0; }
.spec dt{ font-size:14px; font-weight:500; color:var(--c, var(--ink-900)); padding-top:2px; }
.spec dd{ margin:0; font-size:16px; line-height:1.5; color:var(--ink-900); }
@media (max-width:560px){ .spec{ padding:4px 18px; } .spec > div{ grid-template-columns:1fr; } }
.views{ margin-top:22px; }
.views .vk{ display:block; font-size:13.5px; font-weight:500; color:var(--slate-500); margin-bottom:10px; }
.views .vt{ display:flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:14px; background:#eef1f6; width:fit-content; max-width:100%; }
.views .vt span{ padding:8px 14px; border-radius:10px; font-size:14px; color:#4f5d78; }
.views .vt span:first-child{ background:#fff; color:#001f4a; font-weight:500; box-shadow:0 1px 2px rgba(0,31,74,.08); }
.spec-two{ align-items:start; }
/* service pages: one heading size for every section */
main:has(.svc-hero2) .sec .h2{ font-size:clamp(30px,3vw,42px); line-height:1.1; letter-spacing:-.026em; }
main:has(.svc-hero2) .sec .sec-head{ margin-bottom:40px; }
.spec dt{ color:#001f4a; }
.lm-mlist{ display:none; }
@media (max-width:960px){
  .lm{ grid-template-columns:1fr; }
  .lm-doms, .lm-info{ display:none; }
  .lm-mlist{ display:grid; gap:22px; }
  .lm-mg b{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:500; color:var(--ink-900); }
  .lm-mg .lm-gly{ width:12px; height:12px; background:var(--c); }
  .lm-mg ul{ list-style:none; margin:8px 0 0; padding:0; border-top:1px solid var(--line); }
  .lm-mg li{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15.5px; }
  .lm-mg li a{ color:var(--ink-900); text-decoration:none; font-weight:500; }
  .lm-mg li a::after{ content:" \2192"; color:var(--blue-600); }
  .lm-mg li.soon{ color:var(--slate-500); }
  .lm-mg li.soon span{ font-size:13px; white-space:nowrap; }
  .lm[data-mode="live"] .lm-mg li.soon{ display:none; }
}

/* v18: service map in the original the product layout */
.lm-halos{ opacity:.6; }
.lm-svc .lm-tile{ filter:drop-shadow(0 4px 8px rgba(0,31,74,.10)); }
.lm-svc.soon .lm-tile{ fill:revert-layer; stroke:none; stroke-dasharray:none; filter:drop-shadow(0 4px 8px rgba(0,31,74,.10)); }
.lm-svc.soon text{ opacity:1; }
.lm[data-mode="live"] .lm-svc.soon{ opacity:.14; }
.lm[data-mode="live"] .lm-halos{ opacity:.35; }
.lm.focus .lm-svg .lm-cluster[data-dom]:not(.on){ opacity:.4; }
.lm-info{ border-top:0; padding-top:0; min-height:250px; }
.lm-side{ gap:28px; }

/* ===== v18: the home loop (insight, Meet the product, Home with the work around it) ===== */
.seq[data-loopintro] .si{ visibility:visible; }
.seq[data-loopintro] .seq-foot{ justify-content:space-between; align-items:center; }
.showcase .seq{ max-width:1240px; }
.si-art *{ animation-duration:17.4s; }
.si-tool{ animation-name:siTool2; }
@keyframes siTool2{
  0%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--r)) scale(.9); }
  4%{ opacity:1; transform:translate(-50%,-50%) rotate(var(--r)) scale(1); }
  17%{ opacity:1; transform:translate(-50%,-50%) translate(calc((720px - var(--x)) * .06), calc((405px - var(--y)) * .06)) rotate(var(--r)); }
  21%,100%{ opacity:0; transform:translate(-50%,-50%) translate(calc(720px - var(--x)), calc(405px - var(--y))) rotate(0deg) scale(.3); } }
.si-stat{ animation-name:siStat2; }
@keyframes siStat2{ 0%,2%{ opacity:0; transform:translate(-50%,-46%) scale(.97); } 7%{ opacity:1; transform:translate(-50%,-50%); } 17%{ opacity:1; transform:translate(-50%,-50%); } 20%,100%{ opacity:0; transform:translate(-50%,-53%) scale(.96); } }
.si-meet{ animation-name:siMeet2; }
.si-meet b{ margin-top:0; font-size:104px; }
@keyframes siMeet2{ 0%,21%{ opacity:0; transform:scale(.94); } 25%{ opacity:1; transform:none; } 30%{ opacity:1; transform:none; } 33%,100%{ opacity:0; transform:translateY(-50px) scale(.97); } }
.si-screen{ position:absolute; left:130px; top:104px; width:1180px; height:664px; border-radius:18px; overflow:hidden; background:#f4f3f8;
  box-shadow:0 0 0 1px rgba(0,31,74,.06), 0 40px 100px rgba(0,31,74,.22); animation-name:siScreen; }
.si-screen video{ display:block; width:100%; height:100%; object-fit:cover; }
@keyframes siScreen{ 0%,31%{ opacity:0; transform:translateY(40px) scale(.94); } 37%{ opacity:1; transform:none; } 95.4%{ opacity:1; transform:none; } 100%{ opacity:0; transform:scale(.985); } }
.si-claim{ position:absolute; left:0; right:0; top:30px; margin:0; text-align:center; font-size:32px; line-height:1.2; letter-spacing:-.02em; font-weight:500; color:#001f4a; animation-name:siClaim; }
@keyframes siClaim{ 0%,44%{ opacity:0; transform:translateY(10px); } 48%,93%{ opacity:1; transform:none; } 97%,100%{ opacity:0; } }
.si-els{ position:absolute; inset:0; pointer-events:none; }
.se{ position:absolute; background:#fff; border-radius:18px; padding:18px 20px; color:#001f4a; font-size:16px; line-height:1.35;
  box-shadow:0 0 0 1px rgba(0,31,74,.05), 0 24px 60px rgba(0,31,74,.20); animation-name:siEl; animation-delay:calc(var(--tdelay) + var(--n) * 420ms); }
@keyframes siEl{ 0%,49%{ opacity:0; transform:translateY(18px) scale(.86); } 52%{ opacity:1; transform:translateY(-3px) scale(1.02); } 54%{ transform:none; }
  66%{ transform:translateY(-6px); } 80%{ opacity:1; transform:none; } 84%,100%{ opacity:0; transform:translateY(-10px) scale(.96); } }
.se-k{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:#4f5d78; }
.se-k i{ width:9px; height:9px; border-radius:3px; transform:rotate(45deg); background:var(--c); }
.se-row{ display:flex; align-items:center; gap:14px; margin-top:8px; }
.se-row b{ font-size:34px; line-height:1; letter-spacing:-.03em; font-weight:500; }
.se-row svg{ width:120px; height:36px; }
.se-s{ display:block; margin-top:6px; font-size:13.5px; color:#66728a; }
.se-up{ font-size:14px; font-weight:500; color:#15784c; }
.se-radar{ left:36px; top:170px; width:300px; }
.se-geo{ left:64px; top:462px; width:290px; }
.se-bars{ display:grid; gap:7px; margin-top:12px; }
.se-bars span{ position:relative; font-size:13px; color:#4f5d78; padding-left:84px; height:16px; line-height:16px; }
.se-bars span::before{ content:""; position:absolute; left:84px; right:0; top:5px; height:6px; border-radius:6px; background:#eef1f6; }
.se-bars span::after{ content:""; position:absolute; left:84px; top:5px; height:6px; width:calc((100% - 84px) * var(--w) / 100%); max-width:calc(100% - 84px); border-radius:6px; background:var(--blue-600); }
.se-bars span{ text-indent:-84px; }
.se-persona{ left:1094px; top:118px; width:316px; }
.se-pp{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }
.se-av{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:500; font-size:15px; background:linear-gradient(135deg,#896bed,#d1247a); }
.se-pp b{ display:block; font-size:16px; font-weight:500; }
.se-pp .se-s{ margin-top:2px; }
.se-chip{ font-size:12.5px; font-weight:500; padding:5px 10px; border-radius:999px; }
.se-chip.ok{ background:#e5f4ec; color:#15784c; }
.se-persona p{ margin:12px 0 0; font-size:15px; color:#4f5d78; }
.se-assets{ left:1130px; top:408px; width:280px; }
.se-thumbs{ display:grid; grid-template-columns:1fr .62fr 1.25fr; gap:8px; margin-top:12px; align-items:end; }
.se-thumbs img{ width:100%; object-fit:cover; border-radius:8px; display:block; }
.se-thumbs .t1{ aspect-ratio:1; } .se-thumbs .t2{ aspect-ratio:9/16; } .se-thumbs .t3{ aspect-ratio:16/9; }
.se-journey{ left:400px; top:684px; width:400px; }
.se-flow{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.se-flow span{ padding:8px 12px; border-radius:10px; background:#eef3ff; color:#044fd6; font-size:14px; font-weight:500; white-space:nowrap; }
.se-flow em{ flex:1; height:2px; min-width:16px; background:linear-gradient(90deg,#9db8f5,#cfdcfb); }
.se-sign{ left:850px; top:706px; width:290px; display:flex; gap:14px; align-items:center; }
.se-ok{ width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; background:#15784c; color:#fff; font-size:18px; }
.se-sign b{ display:block; font-weight:500; }
.se-sign .se-s{ margin-top:2px; }
.seq[data-loopintro] .seq-frame{ aspect-ratio:16/9; }

/* ===== v18: the three statements as a visual band ===== */
.claims2{ list-style:none; margin:clamp(48px,6vw,80px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,1.6vw,24px); }
@media (max-width:960px){ .claims2{ grid-template-columns:1fr; } }
.cl{ position:relative; border-radius:24px; padding:0 28px 30px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.06), 0 30px 70px -40px rgba(0,31,74,.35); }
.cl .cl-h{ margin:0; font-size:clamp(22px,1.9vw,27px); line-height:1.2; letter-spacing:-.02em; font-weight:500; color:var(--ink-900); }
.cl p{ margin-top:10px; font-size:15.5px; line-height:1.55; color:var(--slate-600,#4f5d78); }
.cl-vis{ position:relative; height:240px; margin:0 -28px 22px; overflow:hidden; }
.cl-one .cl-vis{ background:radial-gradient(70% 90% at 50% 40%, #ece8ff 0%, #f6f4ff 60%, #fff 100%); }
.cl-two{ background:#0b1033; }
.cl-two .cl-h{ color:#fff; } .cl-two p{ color:rgba(255,255,255,.72); }
.cl-two .cl-vis{ background:radial-gradient(70% 90% at 40% 45%, rgba(28,47,224,.55), rgba(11,16,51,0) 70%); }
.cl-three .cl-vis{ background:radial-gradient(70% 90% at 50% 30%, #e3f0ff 0%, #f3f8ff 60%, #fff 100%); }

/* one: tools pull into one window, then drift out again */
.cl-tools span{ position:absolute; left:50%; top:50%; padding:7px 13px; border-radius:10px; background:#fff; font-size:13.5px; color:#4f5d78; white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,31,74,.06), 0 8px 20px rgba(0,31,74,.08); animation:clTool 6.4s var(--ease-io, ease-in-out) infinite; animation-delay:calc(var(--i) * -0.12s); }
@keyframes clTool{ 0%,12%{ opacity:1; transform:translate(-50%,-50%) translate(var(--x),var(--y)); } 42%,70%{ opacity:0; transform:translate(-50%,-50%) scale(.4); } 100%{ opacity:1; transform:translate(-50%,-50%) translate(var(--x),var(--y)); } }
.cl-win{ position:absolute; left:50%; top:50%; width:190px; height:118px; border-radius:14px; background:#fff; transform:translate(-50%,-50%) scale(.6); opacity:0;
  box-shadow:0 0 0 1px rgba(0,31,74,.06), 0 24px 50px rgba(28,47,224,.25); animation:clWin 6.4s var(--ease-io, ease-in-out) infinite; }
.cl-win i{ position:absolute; top:12px; width:7px; height:7px; border-radius:50%; background:#d9deea; } .cl-win i:nth-child(1){ left:12px; } .cl-win i:nth-child(2){ left:23px; } .cl-win i:nth-child(3){ left:34px; }
.cl-win b{ position:absolute; inset:0; display:grid; place-items:center; font-size:28px; font-weight:700; letter-spacing:-.03em; color:#001f4a; }
@keyframes clWin{ 0%,30%{ opacity:0; transform:translate(-50%,-50%) scale(.6); } 46%,74%{ opacity:1; transform:translate(-50%,-50%) scale(1); } 90%,100%{ opacity:0; transform:translate(-50%,-50%) scale(.7); } }

/* two: you, the Orchestrator and its agents */
.cl-two svg{ position:absolute; inset:0; width:100%; height:100%; }
.cl-two .lines use{ fill:none; stroke:rgba(255,255,255,.2); stroke-width:1.4; stroke-dasharray:3 5; }
.cl-two .pl{ fill:#7fe3ff; }
.cl-two .orb{ stroke:#0b1033; stroke-width:3; transform-box:fill-box; transform-origin:center; animation:clOrb 3.2s ease-in-out infinite; animation-delay:calc(var(--i) * -.6s); }
@keyframes clOrb{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.18); } }
.cl-orch{ position:absolute; left:calc(190 / 400 * 100%); top:50%; width:84px; height:84px; transform:translate(-50%,-50%); border-radius:50%; filter:drop-shadow(0 10px 30px rgba(127,178,255,.45)); }
.cl-emma{ position:absolute; left:26px; top:50%; width:58px; height:58px; transform:translateY(-50%); border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px #0b1033, 0 0 0 5px rgba(255,255,255,.5); }
.cl-say{ position:absolute; left:20px; top:28px; padding:8px 12px; border-radius:12px 12px 12px 4px; background:#fff; color:#001f4a; font-size:13px; font-weight:500; white-space:nowrap; animation:clSay 6s ease-in-out infinite; }
@keyframes clSay{ 0%,8%{ opacity:0; transform:translateY(6px); } 16%,80%{ opacity:1; transform:none; } 92%,100%{ opacity:0; } }

/* three: your stack plugs into the product */
.cl-bar{ position:absolute; left:50%; top:34px; transform:translateX(-50%); padding:12px 34px; border-radius:16px; background:#001f4a; color:#fff; box-shadow:0 18px 40px rgba(0,31,74,.3); }
.cl-bar b{ font-size:22px; font-weight:700; letter-spacing:-.02em; }
.cl-wires{ position:absolute; left:8%; right:8%; top:86px; height:84px; display:flex; justify-content:space-between; }
.cl-wires i{ position:relative; width:2px; background:linear-gradient(#001f4a33, #9db8f5); overflow:hidden; }
.cl-wires i::after{ content:""; position:absolute; left:-2px; width:6px; height:14px; border-radius:3px; background:var(--blue-600); animation:clWire 2.4s linear infinite; animation-delay:calc(var(--i) * -.35s); }
@keyframes clWire{ from{ top:100%; } to{ top:-16px; } }
.cl-coins{ position:absolute; left:4%; right:4%; bottom:22px; display:flex; justify-content:space-between; }
.coin{ width:46px; height:46px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 0 0 1px rgba(0,31,74,.08), 0 8px 18px rgba(0,31,74,.1); animation:clCoin 3.6s ease-in-out infinite; animation-delay:calc(var(--i) * -.5s); }
.coin img{ width:24px; height:24px; object-fit:contain; }
.coin.more{ color:#66728a; font-size:15px; letter-spacing:1px; }
@keyframes clCoin{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@media (prefers-reduced-motion: reduce){ .cl *, .cl *::after{ animation:none !important; } .cl-win{ opacity:1; transform:translate(-50%,-50%); } .cl-tools{ display:none; } }

/* v18: agents layer, the simplified visual */
.agviz{ position:relative; margin-top:18px; padding:16px 16px 18px; border-radius:16px; background:linear-gradient(180deg,#f6f7fd,#fff); box-shadow:0 0 0 1px var(--line); }
.agviz svg{ display:block; width:100%; height:auto; }
.agviz .agl use, .agviz .agl1{ fill:none; stroke:#cfd7e6; stroke-width:1.4; }
.agviz .agl1{ stroke-dasharray:3 4; }
.agviz .agp{ fill:var(--blue-600); }
.agviz circle[fill]{ stroke:#fff; stroke-width:3; }
.ag-you, .ag-orch{ position:absolute; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--ink-900); }
.ag-you{ left:calc(16px + (60 / 520) * (100% - 32px)); top:calc(16px + (60 / 200) * (100% - 0px) * 0); transform:translate(-50%, 0); top:28px; }
.ag-you img{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.ag-orch{ left:50%; top:16px; transform:translateX(-50%); flex-direction:row; }
.ag-orch img{ width:50px; height:50px; filter:drop-shadow(0 6px 16px rgba(28,47,224,.25)); }
.ag-list{ list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 12px; }
.ag-list li{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:#4f5d78; }
.ag-list i{ width:9px; height:9px; border-radius:50%; background:var(--c); flex:none; }
@media (max-width:560px){ .ag-list{ grid-template-columns:1fr 1fr; } }
.agviz .agt{ font-size:14px; font-weight:500; fill:var(--ink-900); font-family:var(--f-sans); }

/* ===== v18: home atomic, Today versus With the product ===== */
.orgflip{ display:grid; justify-items:center; gap:clamp(28px,3.4vw,44px); }
.of-toggle{ position:relative; display:inline-flex; padding:5px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 10px 30px -18px rgba(0,31,74,.3); }
.of-toggle button{ all:unset; position:relative; z-index:1; cursor:pointer; padding:11px 26px; border-radius:999px; font-size:15px; font-weight:500; color:var(--slate-600,#4f5d78); transition:color .3s var(--ease); }
.of-toggle button[aria-pressed="true"]{ color:#fff; }
.of-toggle button:focus-visible{ outline:2px solid var(--blue-600); outline-offset:2px; }
.of-toggle .knob{ position:absolute; left:0; top:5px; bottom:5px; border-radius:999px; background:linear-gradient(90deg,#1c2fe0,#055efb); transition:transform .5s var(--ease), width .5s var(--ease); }
.orgflip[data-state="after"] .of-toggle .knob{ background:linear-gradient(90deg,#055efb,#d1247a); }
.of-stage{ display:grid; width:100%; }
.of-view{ grid-area:1 / 1; transition:opacity .5s var(--ease), visibility .5s; }
.of-view[aria-hidden="true"]{ opacity:0; visibility:hidden; pointer-events:none; }
.of-today{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; max-width:1100px; width:100%; justify-self:center; }
.oc{ display:grid; justify-items:center; }
.oc-cmo{ padding:14px 34px; border-radius:14px; background:#fff; font-weight:500; font-size:17px; color:var(--ink-900); box-shadow:0 0 0 1px var(--line-strong), 0 10px 24px -14px rgba(0,31,74,.3); }
.oc-branch{ position:relative; width:82%; height:34px; }
.oc-branch::before{ content:""; position:absolute; left:50%; top:0; height:16px; width:1.5px; background:var(--line-strong); }
.oc-branch::after{ content:""; position:absolute; left:0; right:0; top:16px; height:18px; border:1.5px solid var(--line-strong); border-bottom:0; border-radius:10px 10px 0 0; }
.oc-cols{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; width:100%; }
.oc-col{ display:grid; gap:7px; justify-items:center; align-content:start; transition:transform .6s var(--ease), opacity .5s var(--ease); transition-delay:calc(var(--i) * 60ms); }
.oc-team{ width:100%; text-align:center; padding:12px 8px; border-radius:12px; background:#fff; font-weight:500; font-size:15.5px; color:var(--ink-900); box-shadow:0 0 0 1px var(--line-strong); }
.oc-col span{ width:100%; text-align:center; padding:7px 8px; border-radius:9px; background:#eef1f6; font-size:13.5px; color:#4f5d78; }
.oc-col span.more{ background:none; color:#8a93a6; font-size:12.5px; padding-top:2px; }
.oc-notes{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.oc-notes li{ display:flex; align-items:center; gap:10px; font-size:15px; color:#a4430f; }
.oc-notes li::before{ content:""; width:16px; height:2px; border-radius:2px; background:#e8a47c; }
.orgflip[data-state="after"] .oc-col{ transform:translateY(24px) scale(.96); opacity:0; }
.orgflip[data-state="after"] .oc-cmo{ transform:scale(.6); opacity:0; transition:transform .5s var(--ease), opacity .4s; }
.of-after .hub{ transition:transform .7s var(--ease), opacity .6s var(--ease); transform-box:fill-box; transform-origin:center; }
.orgflip[data-state="today"] .of-after .hub{ opacity:0; transform:scale(.6); }
.orgflip[data-state="after"] .of-after .hub{ transition-delay:.15s; }
.orgflip[data-state="after"] .of-after .hub.cmo{ transition-delay:0s; }
.of-after .hubcols{ transition:opacity .6s var(--ease) .35s; }
.orgflip[data-state="today"] .of-after .hubcols{ opacity:0; }
@media (max-width:900px){
  .of-today{ grid-template-columns:1fr; }
  .oc-cols{ grid-template-columns:repeat(5, minmax(120px,1fr)); overflow-x:auto; padding-bottom:6px; }
  .oc-notes{ grid-template-columns:1fr 1fr; }
}
.oc-col span.more{ color:#66728a; }

/* ===== v19: the loop, 24 s. Insight, the product, the home screen, zoom out to the work around it, fold, CTA ===== */
.si-art *{ animation-duration:24s; }
.si-tool{ animation-name:siTool3; }
@keyframes siTool3{
  0%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--r)) scale(.9); }
  2.9%{ opacity:1; transform:translate(-50%,-50%) rotate(var(--r)) scale(1); }
  12.5%{ opacity:1; transform:translate(-50%,-50%) translate(calc((720px - var(--x)) * .06), calc((405px - var(--y)) * .06)) rotate(var(--r)); }
  15%,100%{ opacity:0; transform:translate(-50%,-50%) translate(calc(720px - var(--x)), calc(405px - var(--y))) rotate(0deg) scale(.3); } }
.si-stat{ animation-name:siStat3; }
@keyframes siStat3{ 0%,1.5%{ opacity:0; transform:translate(-50%,-46%) scale(.97); } 5%{ opacity:1; transform:translate(-50%,-50%); } 12.5%{ opacity:1; transform:translate(-50%,-50%); } 14.6%,100%{ opacity:0; transform:translate(-50%,-53%) scale(.96); } }
.si-meet{ animation-name:siMeet3; }
@keyframes siMeet3{ 0%,15%{ opacity:0; transform:scale(.94); } 18%{ opacity:1; transform:none; } 21.7%{ opacity:1; transform:none; } 24.2%,100%{ opacity:0; transform:translateY(-50px) scale(.97); } }
.si-rib{ position:absolute; inset:0; animation-name:siRib; }
.si-rib video{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes siRib{ 0%,22.5%{ opacity:0; } 25.8%,73.3%{ opacity:1; } 76.7%,100%{ opacity:0; } }
.si-screen{ left:70px; top:40px; width:1300px; height:731px; z-index:3; animation-name:siScreen3; }
@keyframes siScreen3{ 0%,22.9%{ opacity:0; transform:translateY(30px) scale(.94); } 26.7%{ opacity:1; transform:none; } 45.8%{ opacity:1; transform:none; }
  50%{ opacity:1; transform:scale(.52); } 72.5%{ opacity:1; transform:scale(.52); } 75.8%,100%{ opacity:0; transform:scale(.44); } }
.si-els, .si-ghosts{ position:absolute; inset:0; z-index:2; pointer-events:none; transform-origin:720px 405px; animation-name:siFold; }
@keyframes siFold{ 0%,68.3%{ transform:none; opacity:1; } 70.4%{ transform:scale(.12); opacity:0; } 100%{ transform:scale(.12); opacity:0; } }
.se{ animation-name:siEl3; animation-delay:calc(var(--tdelay) - var(--n) * 150ms); }
@keyframes siEl3{ 0%,50%{ opacity:0; transform:translateY(18px) scale(.86); } 52%{ opacity:1; transform:translateY(-3px) scale(1.03); } 53.5%{ transform:none; } 62%{ transform:translateY(-5px); } 100%{ opacity:1; transform:none; } }
.si-art .se{ animation-delay:calc(var(--tdelay) - var(--n) * -150ms); }
.sg{ position:absolute; padding:9px 16px; border-radius:12px; border:1.5px dashed rgba(0,31,74,.22); color:#66728a; font-size:15px; background:rgba(255,255,255,.55); filter:blur(.4px); animation-name:siGhost; animation-delay:calc(var(--tdelay) - var(--n) * -180ms); }
@keyframes siGhost{ 0%,56%{ opacity:0; transform:scale(.9); } 59%,100%{ opacity:.8; transform:none; } }
.si-claim{ top:22px; z-index:4; animation-name:siClaim3; }
@keyframes siClaim3{ 0%,51.7%{ opacity:0; transform:translateY(10px); } 54.2%,67.5%{ opacity:1; transform:none; } 69.2%,100%{ opacity:0; } }
.si-cta{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; background:#fff; animation-name:siCta; }
.si-cta b{ font-size:72px; line-height:1.05; letter-spacing:-.035em; font-weight:500; color:#001f4a; text-align:center; max-width:900px; }
.si-cta .btn{ font-size:22px; padding:18px 34px; pointer-events:auto; }
@keyframes siCta{ 0%,75.8%{ opacity:0; visibility:hidden; } 77%{ visibility:visible; } 79.2%,96.7%{ opacity:1; visibility:visible; } 99.2%{ opacity:0; visibility:visible; } 100%{ opacity:0; visibility:hidden; } }
.se-p{ margin:10px 0 0; font-size:15px; color:#4f5d78; line-height:1.4; }
.se-iir .se-chip{ display:inline-block; margin-top:10px; }
.se-chip.warn{ background:#e5f4ec; color:#15784c; }
.se-steps{ display:flex; gap:8px; margin-top:12px; }
.se-steps span{ padding:7px 12px; border-radius:10px; background:#eef1f6; font-size:14px; color:#4f5d78; }
.se-steps span.done{ background:#eef3ff; color:#044fd6; font-weight:500; }
.se-steps span.done::before{ content:"✓ "; }
.se-langs{ display:flex; gap:6px; margin-top:12px; }
.se-langs span{ width:36px; height:30px; display:grid; place-items:center; border-radius:8px; background:#e6f6f3; color:#05514c; font-size:13.5px; font-weight:500; }
.se-signrow{ display:flex; gap:14px; align-items:center; }
.se-sign{ display:block; }

/* v19: service map with rounded blocks */
.lm-bed{ opacity:.7; transition:opacity .4s var(--ease); }
.lm-svc .lm-tile{ fill:#fff; stroke:rgba(0,31,74,.07); stroke-width:1; filter:drop-shadow(0 2px 5px rgba(0,31,74,.08)); transition:filter .3s var(--ease); transform:none !important; }
.lm-svc text{ font-weight:500; }
.lm-svc:hover .lm-tile, .lm-svc.hi .lm-tile, .lm-svc:focus-visible .lm-tile{ filter:drop-shadow(0 8px 16px rgba(0,31,74,.18)); }
.lm-svc:focus-visible .lm-tile{ stroke:var(--blue-600); stroke-width:2.5; }
.lm[data-mode="live"] .lm-svc.soon{ opacity:.18; }
.lm[data-mode="live"] .lm-bed{ opacity:.5; }
.lm-svc.soon .lm-tile{ fill:#fff; stroke:rgba(0,31,74,.07); stroke-dasharray:none; }
/* map gets the full width; the read-out sits above it */
.lm{ grid-template-columns:1fr !important; gap:28px; }
.lm-side{ order:-1; display:grid; grid-template-columns:auto 1fr; gap:16px 48px; align-items:start; }
.lm-mode{ align-self:start; }
.lm-info{ min-height:112px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.lm-dom-read h3{ font-size:22px; }
.lm-svc-read{ margin-top:0; }
.lm-art{ max-width:1180px; margin:0 auto; width:100%; }
@media (max-width:960px){ .lm-side{ grid-template-columns:1fr; } .lm-info{ display:none; } }
.lm-art{ max-width:1080px; }

/* v20: service map back to diamonds on a lattice */
.lm-dt, .lm-dl{ transition:opacity .45s var(--ease), filter .3s var(--ease); }
.lm-dt{ filter:drop-shadow(0 3px 6px rgba(0,31,74,.10)); }
.lm-dl{ opacity:0; }
.lm-svc .lm-svc-t{ transition:fill .45s var(--ease), opacity .45s var(--ease); }
.lm-svc:hover .lm-dt, .lm-svc.hi .lm-dt, .lm-svc:focus-visible .lm-dt{ filter:drop-shadow(0 10px 18px rgba(0,31,74,.22)); }
.lm-svc:focus-visible .lm-dt{ stroke:var(--blue-600); stroke-width:5; }
.lm[data-mode="live"] .lm-svc.live .lm-dt{ filter:drop-shadow(0 10px 18px rgba(0,31,74,.25)); }
.lm[data-mode="live"] .lm-svc.soon{ opacity:1; }
.lm[data-mode="live"] .lm-svc.soon .lm-dt{ fill:transparent; stroke:rgba(0,31,74,.22); stroke-width:3; stroke-dasharray:8 8; filter:none; }
.lm[data-mode="live"] .lm-svc.soon .lm-svc-t{ opacity:.35; }
.lm[data-mode="live"] .lm-bed{ opacity:.25; }

/* ===== v20: the loop, 28 s. The Home screen plays until the request is sent, then zooms out ===== */
.si-art *{ animation-duration:28s; }
.si-tool{ animation-name:siTool4; }
@keyframes siTool4{
  0%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--r)) scale(.9); }
  2.5%{ opacity:1; transform:translate(-50%,-50%) rotate(var(--r)) scale(1); }
  10.7%{ opacity:1; transform:translate(-50%,-50%) translate(calc((720px - var(--x)) * .06), calc((405px - var(--y)) * .06)) rotate(var(--r)); }
  12.9%,100%{ opacity:0; transform:translate(-50%,-50%) translate(calc(720px - var(--x)), calc(405px - var(--y))) rotate(0deg) scale(.3); } }
.si-stat{ animation-name:siStat4; }
@keyframes siStat4{ 0%,1.3%{ opacity:0; transform:translate(-50%,-46%) scale(.97); } 4.3%{ opacity:1; transform:translate(-50%,-50%); } 10.7%{ opacity:1; transform:translate(-50%,-50%); } 12.5%,100%{ opacity:0; transform:translate(-50%,-53%) scale(.96); } }
.si-meet{ animation-name:siMeet4; }
@keyframes siMeet4{ 0%,12.9%{ opacity:0; transform:scale(.94); } 15.4%{ opacity:1; transform:none; } 18.6%{ opacity:1; transform:none; } 20.7%,100%{ opacity:0; transform:translateY(-50px) scale(.97); } }
.si-rib{ animation-name:siRib4; }
@keyframes siRib4{ 0%,19.3%{ opacity:0; } 22.1%,77.9%{ opacity:1; } 80.7%,100%{ opacity:0; } }
.si-screen{ animation-name:siScreen4; }
@keyframes siScreen4{ 0%,19.6%{ opacity:0; transform:translateY(30px) scale(.94); } 22.9%{ opacity:1; transform:none; } 53.6%{ opacity:1; transform:none; }
  57.1%{ opacity:1; transform:scale(.52); } 77.1%{ opacity:1; transform:scale(.52); } 80%,100%{ opacity:0; transform:scale(.44); } }
.si-els, .si-ghosts{ animation-name:siFold4; }
@keyframes siFold4{ 0%,76.8%{ transform:none; opacity:1; } 78.6%,100%{ transform:scale(.12); opacity:0; } }
.si-art .se{ animation-name:siEl4; animation-delay:calc(var(--tdelay) - var(--n) * -130ms); }
@keyframes siEl4{ 0%,57.5%{ opacity:0; transform:translateY(18px) scale(.86); } 59.3%{ opacity:1; transform:translateY(-3px) scale(1.03); } 60.7%{ transform:none; } 68%{ transform:translateY(-5px); } 100%{ opacity:1; transform:none; } }
.sg{ animation-name:siGhost4; }
@keyframes siGhost4{ 0%,62.5%{ opacity:0; transform:scale(.9); } 65%,100%{ opacity:.8; transform:none; } }
.si-claim{ animation-name:siClaim4; }
@keyframes siClaim4{ 0%,58.9%{ opacity:0; transform:translateY(10px); } 61.4%,75.7%{ opacity:1; transform:none; } 77.1%,100%{ opacity:0; } }
.si-cta{ animation-name:siCta4; }
@keyframes siCta4{ 0%,80%{ opacity:0; visibility:hidden; } 81%{ visibility:visible; } 83%,97%{ opacity:1; visibility:visible; } 99.3%{ opacity:0; visibility:visible; } 100%{ opacity:0; visibility:hidden; } }

/* Creative on the cards */
.se-master{ padding:0 !important; background:none !important; box-shadow:none !important; border:0 !important; }
.se-master img{ display:block; width:100%; aspect-ratio:1; border-radius:16px; box-shadow:0 0 0 1px rgba(0,31,74,.05), 0 24px 60px rgba(0,31,74,.28); rotate:3deg; }
.se-master .se-ok{ position:absolute; right:-12px; top:-14px; width:40px; height:40px; font-size:19px; box-shadow:0 0 0 4px #fff; }
.se-master .se-cap{ position:absolute; left:50%; bottom:-18px; translate:-50% 0; white-space:nowrap; padding:7px 14px; border-radius:999px; background:#fff; font-size:13.5px; font-weight:500; color:#001f4a; box-shadow:0 8px 20px rgba(0,31,74,.14); }
.se-routes{ display:flex; gap:10px; margin:12px 0 12px; }
.se-routes figure{ margin:0; flex:1; }
.se-routes img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:9px; box-shadow:0 0 0 1px rgba(0,31,74,.06); }
.se-routes figcaption{ margin-top:6px; font-size:12.5px; line-height:1.25; color:#4f5d78; }
.se-loc{ display:grid; grid-template-columns:auto auto; justify-content:start; gap:10px; margin-top:12px; align-items:end; }
.se-loc img{ display:block; border-radius:9px; box-shadow:0 0 0 1px rgba(0,31,74,.06); }
.se-loc img.m{ width:116px; height:128px; object-fit:cover; }
.se-loc img.s{ width:72px; height:128px; object-fit:cover; }
.se-loc .se-langs{ grid-column:1 / -1; margin-top:2px; }
.se-loc img.m{ width:104px; height:116px; } .se-loc img.s{ width:64px; height:116px; }
.se-routes figcaption{ font-size:12px; }
.se-master img{ height:auto; max-height:none; object-fit:cover; }
.si-els.si-front{ z-index:4; }

/* v20: three claims share one light style */
.cl, .cl-two{ background:#fff; }
.cl-two .cl-h{ color:var(--ink-900); } .cl-two p{ color:var(--slate-500); }
.cl-one .cl-vis, .cl-two .cl-vis, .cl-three .cl-vis{ background:radial-gradient(75% 95% at 50% 40%, #ece8ff 0%, #f4f2ff 55%, #fff 100%); }
.cl-two .lines use{ stroke:rgba(0,31,74,.22); }
.cl-two .pl{ fill:var(--blue-600); }
.cl-two .orb{ stroke:#fff; }
.cl-emma{ box-shadow:0 0 0 3px #fff, 0 8px 20px rgba(0,31,74,.18); }
.cl-orch{ filter:drop-shadow(0 10px 24px rgba(5,94,251,.25)); }
.cl-say{ background:#001f4a; color:#fff; }
/* the stack: a wall of what the product connects to */
.cl-wall{ position:absolute; inset:18px 0; display:grid; align-content:center; gap:12px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.cl-wall .row{ overflow:hidden; }
.cl-wall .track{ display:flex; gap:10px; width:max-content; animation:clWall var(--d) linear infinite; animation-direction:var(--dir); }
@keyframes clWall{ to{ transform:translateX(-50%); } }
.cl-wall .lg{ flex:none; height:50px; min-width:50px; padding:0 12px; display:grid; place-items:center; border-radius:14px; background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.06), 0 6px 14px rgba(0,31,74,.07); }
.cl-wall .lg img{ width:26px; height:26px; object-fit:contain; }
.cl-wall .lg.t{ font-size:13.5px; font-weight:500; color:#001f4a; white-space:nowrap; padding:0 15px; }
.cl-wall .track > :nth-child(2n){ margin-top:0; }
.cl-hub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:14px 30px; border-radius:18px; background:#001f4a; color:#fff;
  box-shadow:0 0 0 8px rgba(255,255,255,.75), 0 22px 50px rgba(0,31,74,.35); }
.cl-hub b{ font-size:22px; font-weight:700; letter-spacing:-.02em; }
@media (prefers-reduced-motion: reduce){ .cl-wall .track{ animation:none !important; } }
.nav .lockup .by img{ height:22px; top:0; }

/* v20: the plates read as what they are */
.stack .ui-win{ fill:#fff; stroke:#d6def0; stroke-width:.5; }
.stack .ui-side{ fill:#f3f5fb; }
.stack .ui-nav{ fill:#dfe4ef; } .stack .ui-nav.on{ fill:#cfe0ff; }
.stack .ui-h{ fill:#001f4a; opacity:.75; }
.stack .ui-card{ fill:#fff; stroke:#e3e8f2; stroke-width:.4; }
.stack .ui-l{ fill:#c9d3e6; } .stack .ui-l2{ fill:#e3e8f2; }
.stack .ui-tile{ fill:#eef3ff; stroke:#dbe5fb; stroke-width:.4; }
.stack .ui-chat{ fill:#fff; stroke:#cfdcff; stroke-width:.5; }
.stack .ui-type{ fill:#9db8f5; }
.stack .stk rect{ fill:#fff; stroke:#dfe5ef; stroke-width:.5; }
@media (prefers-reduced-motion: no-preference){
  .stack .ui-type{ animation:uiType 4.8s var(--ease-io) infinite; }
  .stack .ui-tile{ animation:uiTile 4.8s var(--ease-io) infinite; animation-delay:calc(var(--i) * .25s); }
  .stack .st-t rect{ animation:stT 5.4s var(--ease-io) infinite; animation-delay:calc(var(--i) * .6s); }
}
@keyframes uiType{ 0%,10%{ width:0; } 55%,85%{ width:30px; } 100%{ width:0; } }
@keyframes uiTile{ 0%,40%{ fill:#eef3ff; } 55%,75%{ fill:#dbe7ff; } 100%{ fill:#eef3ff; } }
@keyframes stT{ 0%,70%,100%{ stroke:#dfe5ef; stroke-width:.5; } 80%,90%{ stroke:#7fb2ff; stroke-width:1.2; } }
.stack .ui-h{ opacity:.35; }
@media (min-width:600px){ .layers .layer .inner{ padding-left:24px; } }
.sec-head.stack{ position:static; aspect-ratio:auto; top:auto; }

/* v21: the atomic organisation, as connected hubs */
.cl-atom svg{ position:absolute; inset:0; width:100%; height:100%; }
.cl-atom .at-links use{ fill:none; stroke:rgba(0,31,74,.14); stroke-width:1.4; stroke-dasharray:3 5; }
.cl-atom .at-links use.core{ stroke:rgba(5,94,251,.28); }
.cl-atom .at-pulse{ fill:var(--blue-600); }
.cl-atom .at-hub .ring{ fill:none; stroke:var(--c); stroke-opacity:.28; stroke-width:1.2; stroke-dasharray:2 4; }
.cl-atom .at-hub .body{ fill:#fff; stroke:var(--c); stroke-opacity:.22; stroke-width:1.5; filter:drop-shadow(0 8px 16px rgba(0,31,74,.10)); }
.cl-atom .at-hub .lead{ fill:var(--c); }
.cl-atom .at-hub .mk{ fill:#fff; stroke:var(--c); stroke-width:2.4; }
.cl-atom .at-hub .ag{ fill:var(--c); opacity:.45; transform-box:fill-box; transform-origin:center; animation:atAg 2.8s ease-in-out infinite; animation-delay:calc(var(--k) * -.9s); }
.cl-atom .at-hub.core .body{ stroke:var(--blue-600); stroke-opacity:.25; }
.cl-atom .at-hub.core .ring{ stroke:var(--blue-600); }
@keyframes atAg{ 0%,100%{ opacity:.25; transform:scale(.8); } 50%{ opacity:.8; transform:scale(1.2); } }
.cl-atom .cl-orch{ left:50%; top:50%; width:76px; height:76px; transform:translate(-50%,-50%); }
@media (prefers-reduced-motion: reduce){ .cl-atom animateMotion{ display:none; } }
.cl-atom .cl-orch{ width:88px; height:88px; }

/* v21: the atomic hubs, flat and aligned */
.hubart svg{ max-width:980px; margin:0 auto; display:block; }
.hubart .links path{ stroke:#b7c0d8; stroke-width:1.4; stroke-dasharray:3 5; fill:none; }
.hubart .hub .shell{ fill:var(--l); stroke:var(--c); stroke-opacity:.35; stroke-width:1.5; }
.hubart .hub .orbit{ fill:none; stroke:var(--c); stroke-opacity:.35; stroke-width:1.2; stroke-dasharray:2 4; }
.hubart .hub .leader{ fill:var(--c); stroke:#fff; stroke-width:3; animation:none !important; }
.hubart .hub .member{ fill:var(--c); fill-opacity:.55; }
.hubart .hub .agent{ fill:#fff; stroke:var(--c); stroke-width:2; }
.hubart .hub .hn{ font-size:15px; font-weight:500; fill:var(--ink-900); }
.hubart .hub .ln{ font-size:13px; fill:var(--slate-500); }
.hubart .hub.cmo .shell{ fill:#fff; }
.hubart .hub{ cursor:default; }
.hubart:not(.light) .links path{ stroke:rgba(255,255,255,.35); }
.hubart:not(.light) .hub .shell{ fill:color-mix(in srgb, var(--c) 22%, transparent); stroke:rgba(255,255,255,.55); stroke-opacity:1; }
.hubart:not(.light) .hub .hn{ fill:#fff; } .hubart:not(.light) .hub .ln{ fill:rgba(255,255,255,.7); }
.hubart:not(.light) .hub .agent{ fill:#0b1033; stroke:#fff; }
.hubart:not(.light) .hub.cmo .shell{ fill:rgba(255,255,255,.12); }
@media (prefers-reduced-motion: no-preference){ .hubart .spin{ animation:hubSpin 48s linear infinite; } }
@keyframes hubSpin{ to{ transform:rotate(360deg); } }
.hubcols{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:980px){ .hubcols{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .hubcols{ grid-template-columns:1fr; } }
.hubart .hub .orbit{ animation:none !important; }
/* v21: today's org chart, centred, with a line from the CMO to every team */
.of-today{ grid-template-columns:1fr; max-width:980px; }
.oc-branch{ width:100%; height:38px; }
.oc-branch::after{ left:10%; right:10%; height:22px; border-radius:10px 10px 0 0; border-bottom:0; border-left:0; border-right:0; }
.oc-branch i{ position:absolute; top:16px; bottom:0; width:1.5px; background:var(--line-strong); }
.oc-branch i:nth-child(1){ left:10%; } .oc-branch i:nth-child(2){ left:30%; } .oc-branch i:nth-child(3){ left:50%; } .oc-branch i:nth-child(4){ left:70%; } .oc-branch i:nth-child(5){ left:90%; }

/* v21: service map sized to the screen, read-out on the right; Live today keeps the domain colours */
.lm[data-mode="live"] .lm-svc.live .lm-dl{ opacity:0; }
.lm[data-mode="live"] .lm-svc.live .lm-dt{ filter:drop-shadow(0 6px 12px rgba(0,31,74,.16)); }
@media (min-width:961px){
  .lm{ grid-template-columns:minmax(0,1fr) minmax(280px,340px) !important; gap:clamp(24px,4vw,64px); align-items:center; }
  .lm-side{ order:0; display:grid; grid-template-columns:1fr; gap:28px; align-self:center; }
  .lm-info{ display:grid; grid-template-columns:1fr; gap:18px; min-height:300px; align-content:start; }
  .lm-art{ width:min(100%, calc((100vh - 170px) * 1.17)); max-width:none; margin:0 auto; }
  .lm-mode{ justify-self:start; }
}

/* v21: a quiet hairline marks each new section */
.sec + .sec{ padding-top:clamp(56px,7vw,104px) !important; }
.sec + .sec::before{ content:""; position:absolute; top:0; left:50%; translate:-50% 0; width:min(1240px, calc(100% - 2 * clamp(16px,4vw,48px))); height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,31,74,.13) 12%, rgba(0,31,74,.13) 88%, transparent); }
.of-view{ align-self:start; }

/* v22: the atomic team, four people around the product */
.cl-people svg{ position:absolute; inset:0; width:100%; height:100%; }
.cl-people .lines use{ fill:none; stroke:rgba(0,31,74,.18); stroke-width:1.4; stroke-dasharray:3 5; vector-effect:non-scaling-stroke; }
.cl-people .cl-orch{ position:absolute; left:50%; top:50%; width:76px; height:76px; transform:translate(-50%,-50%); }
.cl-people .pp{ position:absolute; margin:0; display:grid; justify-items:center; gap:7px; transform:translate(-50%,-28px); }
.cl-people .pp img{ width:56px; height:56px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--c), 0 10px 22px rgba(0,31,74,.18); }
.cl-people .pp figcaption{ padding:4px 10px; border-radius:999px; background:#fff; font-size:12.5px; font-weight:500; color:#001f4a; white-space:nowrap; box-shadow:0 2px 8px rgba(0,31,74,.10); }
@media (prefers-reduced-motion: no-preference){
  .cl-people .pp img{ animation:ppBob 5s ease-in-out infinite; animation-delay:calc(var(--i) * -1.2s); }
}
@keyframes ppBob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -3px; } }

/* v23: the atomic organisation in miniature, one outcome hub in focus */
.cl-atomic svg{ position:absolute; inset:0; width:100%; height:100%; }
.cl-atomic .ah-links use{ fill:none; stroke:rgba(0,31,74,.2); stroke-width:1.3; stroke-dasharray:3 5; }
.cl-atomic .ah-pulse{ fill:var(--blue-600); }
.cl-atomic .ah-hub .shell{ fill:var(--l); stroke:var(--c); stroke-opacity:.3; stroke-width:1.4; }
.cl-atomic .ah-hub.main .shell{ stroke-opacity:.45; filter:drop-shadow(0 12px 22px rgba(15,157,150,.18)); }
.cl-atomic .ah-hub .orbit{ fill:none; stroke:var(--c); stroke-opacity:.35; stroke-dasharray:2 4; }
.cl-atomic .ah-hub .lead{ fill:var(--c); stroke:#fff; stroke-width:2.5; }
.cl-atomic .ah-hub .member{ fill:var(--c); fill-opacity:.6; }
.cl-atomic .ah-hub .agent{ fill:#fff; stroke:var(--c); stroke-width:2; }
.cl-atomic .ah-cmo .shell{ fill:#fff; stroke:#1c2fe0; stroke-opacity:.35; stroke-width:1.4; }
.cl-atomic .ah-cmo .lead{ fill:#1c2fe0; }
.cl-atomic .ah-face{ position:absolute; left:50%; top:calc(148 / 240 * 100%); width:52px; height:52px; transform:translate(-50%,-50%); border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 3px #fff, 0 0 0 5px #0F9D96, 0 10px 22px rgba(0,31,74,.2); }
@media (prefers-reduced-motion: reduce){ .cl-atomic animateMotion{ display:none; } }

/* v24: card 1 positions come inline; card 2 is one atomic hub; card 3 runs two slow lanes */
.cl-hub1{ display:grid; place-items:center; }
.cl-hub1 .h1-shell{ position:relative; width:188px; height:188px; border-radius:50%; background:radial-gradient(circle at 50% 50%, #fff 0%, #e2f6f4 70%); box-shadow:0 0 0 1.5px rgba(15,157,150,.35), 0 20px 44px rgba(15,157,150,.16); }
.cl-hub1 .h1-orbit{ position:absolute; inset:24px; border-radius:50%; border:1.5px dashed rgba(15,157,150,.4); }
.cl-hub1 .h1-spin{ position:absolute; inset:24px; animation:h1Spin 60s linear infinite; }
.cl-hub1 .h1-o{ position:absolute; left:50%; top:50%; width:38px; height:38px; margin:-19px 0 0 -19px; transform:rotate(var(--a)) translateY(-70px) rotate(calc(var(--a) * -1)); }
.cl-hub1 .h1-o img{ width:100%; height:100%; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2.5px #fff, 0 6px 14px rgba(0,31,74,.18); animation:h1Counter 60s linear infinite; }
.cl-hub1 .h1-o.orch img{ box-shadow:0 6px 14px rgba(5,94,251,.25); }
.cl-hub1 .h1-lead{ position:absolute; left:50%; top:50%; width:64px; height:64px; transform:translate(-50%,-50%); border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px #fff, 0 0 0 5px #0F9D96, 0 10px 24px rgba(0,31,74,.2); }
@keyframes h1Spin{ to{ transform:rotate(360deg); } }
@keyframes h1Counter{ to{ transform:rotate(-360deg); } }
@media (prefers-reduced-motion: reduce){ .cl-hub1 .h1-spin, .cl-hub1 .h1-o img{ animation:none; } }
.cl-wall.lanes2{ gap:18px; inset:30px 0; }
.cl-wall.lanes2 .lg{ height:58px; min-width:58px; border-radius:16px; }
.cl-wall.lanes2 .lg img{ width:30px; height:30px; }
.cl-hub{ background:linear-gradient(135deg, #2f6bff, #0a49d6); box-shadow:0 0 0 8px rgba(255,255,255,.8), 0 22px 50px rgba(5,94,251,.35); }

/* v25: the service map toggle matches the Today / With the product toggle */
.lm-mode.of-toggle{ padding:5px; box-shadow:0 0 0 1px var(--line), 0 10px 30px -18px rgba(0,31,74,.3); }
.lm-mode.of-toggle button{ padding:11px 24px; font-size:15px; background:none !important; position:relative; z-index:1; }
.lm-mode.of-toggle button[aria-pressed="true"]{ color:#fff; }
.lm[data-mode="live"] .lm-mode .knob{ background:linear-gradient(90deg,#055efb,#d1247a); }
.lm-count:empty{ display:none; }
/* v25: stacked logos on the platform architecture */
.arch-fig .lg.stk3 .b1 circle, .arch-fig .lg.stk3 .b2 circle{ fill:#fff; stroke:#e3e7f0; stroke-width:1.2; }
.arch-fig .lg.stk3 .b1{ opacity:.8; } .arch-fig .lg.stk3 .b2{ opacity:.55; }
.lm-count{ display:none !important; }

/* v28: service pages carry one capability summary */
.cap-sum{ font-size:clamp(18px,1.5vw,21px); line-height:1.6; color:var(--ink-700); max-width:34em; }
/* the Orchestrator panel moves in: the sidebar folds away and the page makes room */
.hx-side, .hx-main{ transition:transform .6s var(--ease), opacity .4s var(--ease), left .6s var(--ease), padding .6s var(--ease); }
.hx-app:has(.hx-orchp.on) .hx-side{ transform:translateX(-270px); opacity:0; }
.hx-app:has(.hx-orchp.on) .hx-main{ left:0; padding-left:40px; padding-right:430px; }
.hx-app:has(.hx-orchp.on) .hx-main > :not(.hx-orchp){ transition:none; }
.hx-app .hx-orchp{ box-shadow:0 1px 2px rgba(0,31,74,.04), 0 18px 40px rgba(0,31,74,.10); }