/* Homepage v20.html styles, fix pass E. Every stylesheet and head style block of the page in its original order, in one render-blocking file (same cascade). Rebuild from the page sources when a shared file changes. */
/* ==== site-shell-v7.css ==== */
/* Site shell v7 (forked from v6): adds the For Agencies panel and the Agencies sheet segment. Site shell v6 (forked from v5): Services and Industries mega panels (desktop), full-screen menu sheet (mobile). Injected by site-shell-v6.js.
v6-only rules use .mx6 / .mx6-sheet so they win if a page also loads the v5 sheet. */
.nav-inner{position:relative}
.nav-links>.nav-dd.mx-on{position:static}
.mx-panel{position:absolute;left:0;right:0;top:100%;z-index:120;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;pointer-events:none}
.nav-dd.mx-on:hover:not(.is-closed) .mx-panel,.nav-dd.mx-on:focus-within:not(.is-closed) .mx-panel,.nav-dd.mx-on.is-open .mx-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .18s ease,transform .18s ease,visibility 0s}
.nav-dd.mx-on:hover:not(.is-closed)>a .nav-dd-caret,.nav-dd.mx-on:focus-within:not(.is-closed)>a .nav-dd-caret{transform:rotate(180deg)}
.mx-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(220px,264px);gap:4px;padding:12px;border:1px solid var(--border-strong,#323944);border-radius:14px;background:rgba(9,13,24,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 28px 70px rgba(0,0,0,.5)}
.mx-col{min-width:0;padding:8px 4px}
.mx-h{margin:0 8px 6px;padding:2px 0 10px;border-bottom:1px solid var(--border-2,#232935);font:500 11px/1.2 var(--font-mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3,#8C98AB)}
.mx-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.nav .mx-panel a.mx-it{display:flex;align-items:flex-start;gap:11px;min-height:44px;padding:8px;border-radius:8px;color:var(--fg-1);text-decoration:none;box-shadow:none!important;white-space:normal;font-size:inherit}
.nav .mx-panel a.mx-it:hover,.nav .mx-panel a.mx-it:focus-visible{background:rgba(127,140,160,.12);padding-bottom:8px}
.nav .mx-panel a.mx-it:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.mx-ico{width:32px;height:32px;flex:none;display:grid;place-items:center;border:1px solid var(--border-2,#232935);border-radius:8px;background:rgba(58,160,210,.08);color:var(--signal);transition:border-color .18s ease,background .18s ease}
.mx-ico svg{width:17px;height:17px}
.mx-it:hover .mx-ico{border-color:var(--signal);background:rgba(58,160,210,.16)}
.mx-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.mx-tx b{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:600 13.5px/1.25 var(--font-sans);color:var(--fg-1);letter-spacing:-.005em}
.mx-tx small{font:400 12px/1.35 var(--font-sans);color:var(--fg-3)}
.mx-it[aria-current="page"] b{color:var(--signal)}
.mx-new{font:600 9.5px/1 var(--font-mono,monospace);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#05131D;background:var(--brand-sun,#F5B83D);padding:3px 5px;border-radius:4px}
.mx-feat{display:flex;flex-direction:column;gap:12px;margin:4px;padding:18px;border:1px solid var(--border-2,#232935);border-radius:10px;background:linear-gradient(180deg,rgba(58,160,210,.12),rgba(58,160,210,.02) 70%)}
.mx-feat .mx-h{margin:0;border:0;padding:0}
.mx-feat h3{margin:0;font:800 19px/1.08 var(--font-display);letter-spacing:-.025em;text-transform:uppercase;color:var(--fg-1)}
.mx-feat p{margin:0;font-size:13px;line-height:1.5;color:var(--fg-2)}
.mx-cap{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:6px 10px;border:1px solid var(--border-strong);border-radius:999px;font:500 11.5px/1.3 var(--font-mono,monospace);color:var(--fg-1)}
.mx-cap i{width:7px;height:7px;flex:none;border-radius:50%;background:#3DDC97;box-shadow:0 0 0 3px rgba(61,220,151,.18)}
.mx-cap.is-last i{background:var(--brand-sun,#F5B83D);box-shadow:0 0 0 3px rgba(245,184,61,.2)}
.mx-cap.is-full i{background:#8C98AB;box-shadow:none}
.nav .mx-panel a.mx-book{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:auto;padding:12px 14px;border-radius:var(--radius-sm,8px);background:var(--signal);color:#05131D;font-weight:600;font-size:13.5px;box-shadow:none!important;text-decoration:none}
.nav .mx-panel a.mx-book:hover{background:var(--blue-300,#7FC4EA);padding-bottom:12px}
.nav .mx-panel a.mx-book svg,.mx-sheet .mx-book svg{width:14px;height:14px}
.nav .mx-panel a.mx-all{display:inline-flex;align-items:center;min-height:36px;font-size:13px;color:var(--fg-2);box-shadow:none!important;padding:0}
.nav .mx-panel a.mx-all:hover{color:var(--fg-1);padding-bottom:0}
@media (max-width:1280px){.mx-in{grid-template-columns:repeat(4,minmax(0,1fr)) 210px}.mx-tx small{font-size:11.5px}.mx-feat{padding:14px}}
[data-theme="light"] .mx-in{background:rgba(250,252,254,.98);box-shadow:0 28px 70px rgba(12,20,36,.16)}
/* mobile sheet */
.mx-sheet{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;background:rgba(7,9,13,.985);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--fg-1);font-family:var(--font-sans)}
.mx-sheet[hidden]{display:none}
.mx-sh-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px clamp(16px,5vw,28px);border-bottom:1px solid var(--border-2)}
.mx-sh-top img{height:52px;width:auto;display:block}
.mx-x{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:var(--radius-sm,8px);background:transparent;color:var(--fg-1);cursor:pointer}
.mx-x svg{width:18px;height:18px}
.mx-sh-body{flex:1;overflow-y:auto;overscroll-behavior:contain;width:100%;max-width:640px;margin:0 auto;padding:16px clamp(16px,5vw,28px) 20px;display:flex;flex-direction:column;gap:16px}
.mx-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--border-strong);border-radius:12px;background:rgba(255,255,255,.02)}
.mx-seg button{min-height:44px;padding:0 4px;border:0;border-radius:8px;background:transparent;color:var(--fg-2);font:600 13px/1 var(--font-sans);cursor:pointer;transition:background .18s ease,color .18s ease}
.mx-seg button[aria-selected="true"]{background:var(--signal);color:#05131D}
.mx-seg button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.mx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mx-tile{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:84px;padding:12px;border:1px solid var(--border-2);border-radius:10px;background:rgba(255,255,255,.025);color:var(--fg-1);text-decoration:none;font:600 13.5px/1.25 var(--font-sans);animation:mxIn .32s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 35ms)}
.mx-tile .mx-ico{width:30px;height:30px}
.mx-tile span.mx-nm{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mx-tile[aria-current="page"]{border-color:var(--signal)}
.mx-tile:active{background:rgba(58,160,210,.12)}
@keyframes mxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mx-sheet a.mx-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;align-self:flex-start;color:var(--fg-2);font-size:14px;text-decoration:none}
.mx-sheet a.mx-all svg{width:14px;height:14px}
.mx-lbl{margin:0 0 -6px;font:500 11px/1 var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.mx-chips{display:flex;flex-wrap:wrap;gap:8px}
.mx-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--border-strong);border-radius:999px;color:var(--fg-1);text-decoration:none;font:500 14px/1 var(--font-sans)}
.mx-chips a[aria-current="page"]{border-color:var(--signal);color:var(--signal)}
.mx-util{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px}
.mx-langs{display:flex;border:1px solid var(--border-strong);border-radius:var(--radius-sm,8px);overflow:hidden}
.mx-langs button{min-width:52px;min-height:44px;border:0;border-right:1px solid var(--border-strong);background:transparent;color:var(--fg-3);font:500 12px/1 var(--font-mono,monospace);letter-spacing:.1em;cursor:pointer}
.mx-langs button:last-child{border-right:0}
.mx-langs button.is-on{background:rgba(58,160,210,.14);color:var(--signal)}
.mx-theme{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm,8px);background:transparent;color:var(--fg-1);font:500 14px/1 var(--font-sans);cursor:pointer}
.mx-theme svg{width:16px;height:16px}
.mx-sh-foot{display:flex;gap:8px;width:100%;max-width:640px;margin:0 auto;padding:12px clamp(16px,5vw,28px) calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border-2)}
.mx-sheet a.mx-book{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:10px;background:var(--signal);color:#05131D;font:600 15px/1 var(--font-sans);text-decoration:none}
.mx-sheet a.mx-wa{width:52px;min-height:52px;flex:none;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:10px;color:var(--fg-1)}
.mx-sheet a.mx-wa svg{width:20px;height:20px}
[data-theme="light"] .mx-sheet{background:rgba(250,252,254,.99)}
[data-theme="light"] .mx-tile,[data-theme="light"] .mx-seg{background:#fff}
@media (prefers-reduced-motion:reduce){.mx-panel,.mx-tile,.mx-seg button{transition:none!important;animation:none!important}}
/* ===== v6 ===== */
.nav-links .nav-ind{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--fg-2);font:500 14px/inherit var(--font-sans);cursor:pointer;transition:color var(--dur-base,.2s) var(--ease-out,ease)}
.nav-links .nav-ind:hover,.nav-links .nav-ind.is-active{color:var(--fg-1);box-shadow:inset 0 -2px 0 var(--brand-sun);padding-bottom:2px}
.nav-links .nav-ind.is-active{color:var(--signal)}
.nav-links .nav-ind:focus-visible{outline:2px solid var(--signal);outline-offset:4px;border-radius:4px}
.nav-ind .nav-dd-caret{width:10px;height:10px;transition:transform .18s ease}
.nav-dd.mx6:hover:not(.is-closed)>.nav-ind .nav-dd-caret,.nav-dd.mx6:focus-within:not(.is-closed)>.nav-ind .nav-dd-caret{transform:rotate(180deg)}
.nav-dd.mx6 .mx-in.mx-in--svc{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(240px,280px)}
.nav-dd.mx6 .mx-in.mx-in--ind{grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);max-width:860px}
.nav-dd.mx6 .mx-in--ind .mx-col ul{gap:4px}
.nav-dd.mx6 .mx-in--ind a.mx-it{padding:12px 10px}
.nav-dd.mx6 .mx-in--ind .mx-tx b{font-size:14.5px}
.nav-dd.mx6 .mx-in--ind .mx-tx small{font-size:12.5px}
.nav-dd.mx6 .mx-feat--ind{background:linear-gradient(180deg,rgba(245,184,61,.12),rgba(245,184,61,.02) 70%)}
@media (max-width:1280px){.nav-dd.mx6 .mx-in.mx-in--svc{grid-template-columns:repeat(3,minmax(0,1fr)) 220px}}
.mx6-sheet .mx6-lbls{display:grid;grid-template-columns:3fr 1fr;gap:12px;margin:0 0 -8px;padding:0 6px;font:500 11px/1 var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.mx6-sheet .mx6-lbls span+span{text-align:center}
.mx6-sheet .mx-seg.mx6-seg{grid-template-columns:repeat(3,minmax(0,1fr)) 1px minmax(0,1.15fr)}
.mx6-sheet .mx6-seg button.is-ind{grid-column:5;position:relative}
.mx6-sheet .mx6-seg::after{content:"";grid-column:4;grid-row:1;align-self:stretch;margin:6px 0;background:var(--border-strong)}
.mx6-sheet .mx-grid.is-ind{grid-template-columns:1fr}
.mx6-sheet .mx-tile--wide{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;min-height:72px}
.mx6-sheet .mx-tile--wide .mx-nm{flex-direction:column;align-items:flex-start;gap:4px}
.mx6-sheet .mx-tile--wide small{font:400 12.5px/1.35 var(--font-sans);color:var(--fg-3)}
/* ===== v7 ===== */
.nav-dd.mx6 .mx-in.mx-in--agn{grid-template-columns:minmax(0,1fr) minmax(260px,300px);max-width:980px;margin-left:auto}
.mx-agn-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px!important}
.nav-dd.mx6 .mx-in--agn a.mx-it{padding:11px 10px}
.nav-dd.mx6 .mx-feat--agn{background:linear-gradient(180deg,rgba(255,92,122,.13),rgba(255,92,122,.02) 70%)}
.nav .mx-panel a.mx-all.mx-tel{min-height:30px;margin-top:-6px;font-family:var(--font-mono,monospace);font-size:12px;color:var(--fg-3)}
/* 9 header items since the For Agencies tab: the phone collapses to its icon (number stays in the For Agencies panel and the aria-label) below 1460 */
@media (min-width:1081px) and (max-width:1460px){.nav-tools .ck-phone .num{display:none!important}.nav-tools .ck-phone{width:auto!important;padding-left:4px!important;padding-right:4px!important}}
@media (min-width:1361px) and (max-width:1460px){.nav-inner{gap:20px!important}.nav-links{gap:18px!important}.nav-links a,.nav-links .nav-ind{font-size:13.5px!important}.nav-auth span{display:none!important}.nav-logo .logo-img{height:76px!important}}
@media (min-width:1081px) and (max-width:1360px){.nav-inner{gap:16px!important}.nav-links{gap:15px!important}.nav-links a,.nav-links .nav-ind{font-size:13px!important}.nav .nav-cta{display:none!important}.nav-auth span{display:none!important}.nav-tools .lang-switch{display:none!important}.nav-logo .logo-img{height:64px!important}.nav-links>li:first-child{display:none!important}}
@media (min-width:1081px) and (max-width:1220px){.nav-links{gap:12px!important}.nav-links a,.nav-links .nav-ind{font-size:12.5px!important}.nav-logo .logo-img{height:56px!important}.nav-tools .nav-auth{display:none!important}}
.mx7-sheet,.mx6-sheet .mx-seg.mx7-seg{grid-template-columns:repeat(3,minmax(0,1fr)) 1px minmax(0,1.15fr) minmax(0,1.05fr)}
.mx6-sheet .mx7-seg button{font-size:12.5px;padding:0 2px}
.mx6-sheet .mx7-seg button.is-agn{grid-column:6}
.mx6-sheet .mx6-lbls.mx7-lbls{grid-template-columns:repeat(3,minmax(0,1fr)) 1px minmax(0,1.15fr) minmax(0,1.05fr);gap:4px;padding:0 4px}
.mx6-sheet .mx7-lbls span:first-child{grid-column:1/4}
.mx6-sheet .mx7-lbls span:nth-child(2){grid-column:5;text-align:center}
.mx6-sheet .mx7-lbls span:nth-child(3){grid-column:6;text-align:center}
.mx6-sheet .mx7-seg button.is-agn[aria-selected="true"]{background:#FF5C7A;color:#1A0610}
/* ==== inline style #fixD-shell ==== */
/* fix pass D: header rules the shell adds, present from first paint so the header never jumps */a[href*="Sign In"],a[href*="Sign%20In"],a[aria-label="Sign in"]{display:none !important}.lang-switch{overflow:visible}.lang-switch button{position:relative}.lang-switch button:first-child{border-radius:var(--radius-sm,8px) 0 0 var(--radius-sm,8px)}.lang-switch button:last-child{border-radius:0 var(--radius-sm,8px) var(--radius-sm,8px) 0}.theme-toggle,.nav-auth,.nav-burger,.nav-tools .ck-phone{position:relative}.lang-switch button::after,.theme-toggle::after,.nav-auth::after,.nav-burger::after,.nav-tools .ck-phone::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}.mx-panel{opacity:0;visibility:hidden}.mx-sheet[hidden]{display:none}.nav-links a.nav-hot{position:relative}.sh-hot{position:relative;display:inline-block;width:8px;height:11px;margin-left:3px;vertical-align:super;line-height:0;pointer-events:none}.nav-hot > .sh-hot{position:absolute;top:-6px;left:calc(100% + 1px);margin:0;vertical-align:baseline}.sh-hot svg{position:absolute;display:block;overflow:visible}.sh-flame{left:0;top:0;width:8px;height:11px;filter:drop-shadow(0 0 4px rgba(252,185,19,.55));transform-origin:50% 100%;animation:shFlick 1.6s ease-in-out infinite}.sh-spark{left:7px;top:-3px;width:5px;height:5px;opacity:0;transform-origin:50% 50%;animation:shTwink 2.8s ease-in-out infinite .4s}.mx-tile .sh-hot,.mx-it .sh-hot{width:7px;height:10px;margin-left:5px;vertical-align:2px}.mx-tile .sh-flame,.mx-it .sh-flame{width:7px;height:10px}.nav-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@keyframes shFlick{0%,100%{transform:scale(.95)}50%{transform:scale(1.05)}}@keyframes shTwink{0%,55%,100%{opacity:0;transform:scale(.4) rotate(0)}70%{opacity:1;transform:scale(1) rotate(45deg)}85%{opacity:0;transform:scale(.5) rotate(90deg)}}@media (prefers-reduced-motion:reduce){.sh-flame{animation:none}.sh-spark{display:none}}
/* ==== tokens-v2.css ==== */
/* ============================================================
OUNTERNET — Colors & Type
Design system tokens for ounternet.agency and ounternet.io
Brand heritage: Lochmara blue, Green Haze, Sun (from 2015 brand book)
2026 refresh: engineered, data-dense, AI-native, dark-first
============================================================ */
:root {
/* ---------- BRAND HERITAGE (from 2015 brand book) ---------- */
--brand-lochmara: #0080C3; /* primary blue */
--brand-lochmara-dark: #016095;
--brand-green-haze: #00A551; /* secondary — use sparingly */
--brand-green-dark: #007E3B;
--brand-sun: #FCB913; /* accent — use sparingly */
--brand-sun-dark: #B8890D;
/* ---------- CORE PALETTE (2026 refresh) ---------- */
/* Desaturated, technical extensions of Lochmara */
--blue-50: #EBF6FC;
--blue-100: #D2EAF6;
--blue-200: #A6D5ED;
--blue-300: #6FBBE0;
--blue-400: #3AA0D2;
--blue-500: #0080C3; /* = Lochmara */
--blue-600: #016095;
--blue-700: #064A74;
--blue-800: #0A3955;
--blue-900: #0B2838;
--blue-950: #071A27;
/* Near-neutral ink — slightly blue-biased so it reads engineered */
--ink-0: #FFFFFF;
--ink-50: #F7F8FA;
--ink-100: #EEF0F3;
--ink-200: #DDE1E7;
--ink-300: #C2C8D1;
--ink-400: #8E95A1;
--ink-500: #6B7280;
--ink-600: #4A5260;
--ink-700: #323944;
--ink-800: #1F242C;
--ink-900: #12151B;
--ink-950: #0A0C11;
/* Semantic color */
--success: #00A551; /* Green Haze */
--warning: #FCB913; /* Sun */
--danger: #D64545;
--info: #0080C3;
/* ---------- SEMANTIC TOKENS — LIGHT ---------- */
--bg: var(--ink-0);
--bg-subtle: var(--ink-50);
--bg-muted: var(--ink-100);
--bg-inverse: var(--ink-950);
--surface: var(--ink-0);
--surface-raised: var(--ink-0);
--surface-sunken: var(--ink-50);
--fg-1: var(--ink-950); /* primary text */
--fg-2: var(--ink-700); /* secondary text */
--fg-3: var(--ink-500); /* tertiary / meta */
--fg-4: var(--ink-400); /* disabled / placeholder */
--fg-inverse: var(--ink-0);
--dim: #74839D; /* AA-safe dim meta text, 5.04:1 on dark bg */
--border-1: var(--ink-200); /* default border */
--border-2: var(--ink-100); /* subtle dividers */
--border-strong: var(--ink-300);
--border-focus: var(--blue-500);
--accent: var(--blue-500);
--accent-hover: var(--blue-600);
--accent-press: var(--blue-700);
--accent-soft: var(--blue-50);
--accent-fg: var(--ink-0); /* text on accent bg */
/* ---------- TYPOGRAPHY ---------- */
/* Display: Satoshi (Fontshare). Body: Instrument Sans. Per build spec §02. */
--font-display: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
/* Yellow = structural third colour: highlights, underlines, tags, hover ticks.
Green = verified metrics ONLY (never status dots, never decoration). */
--structural: var(--brand-sun);
--verified: var(--brand-green-haze);
--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Scale — 1.2 minor-third, tightened at display end */
--fs-xs: 12px;
--fs-sm: 13px;
--fs-base: 15px;
--fs-md: 17px;
--fs-lg: 20px;
--fs-xl: 24px;
--fs-2xl: 32px;
--fs-3xl: 44px;
--fs-4xl: 60px;
--fs-5xl: 80px;
--fs-6xl: 112px;
/* Line heights */
--lh-tight: 1.05;
--lh-snug: 1.2;
--lh-normal: 1.45;
--lh-relaxed:1.6;
/* Weights */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold:600;
--fw-bold: 700;
/* Letter-spacing — tight for display, open for eyebrow/caps */
--tracking-tight: -0.02em;
--tracking-tighter:-0.035em;
--tracking-normal: 0;
--tracking-wide: 0.06em;
--tracking-caps: 0.12em;
/* ---------- SPACING (4px base) ---------- */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-32:128px;
/* ---------- RADII ---------- */
/* Kept small/tight — engineered, not friendly-blob */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 14px;
--radius-2xl: 20px;
--radius-full: 9999px;
/* ---------- ELEVATION ---------- */
/* Restrained; prefer borders over shadows on light surfaces */
--shadow-xs: 0 1px 2px rgba(10, 12, 17, 0.04);
--shadow-sm: 0 1px 2px rgba(10, 12, 17, 0.06), 0 1px 3px rgba(10, 12, 17, 0.04);
--shadow-md: 0 4px 8px -2px rgba(10, 12, 17, 0.06), 0 2px 4px -2px rgba(10, 12, 17, 0.04);
--shadow-lg: 0 12px 24px -8px rgba(10, 12, 17, 0.10), 0 4px 8px -4px rgba(10, 12, 17, 0.06);
--shadow-xl: 0 24px 48px -12px rgba(10, 12, 17, 0.18);
/* Inner/focus */
--ring-focus: 0 0 0 3px rgba(0, 128, 195, 0.28);
--inset-line: inset 0 0 0 1px rgba(10, 12, 17, 0.06);
/* ---------- MOTION ---------- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 360ms;
/* ---------- LAYOUT ---------- */
--container-max: 1280px;
--container-pad: clamp(20px, 4vw, 48px);
--grid-gutter: 24px;
}
/* ---------- DARK THEME ---------- */
/* This is the PRIMARY context for the 2026 refresh. Most surfaces
in the agency/io sites ship dark by default. */
[data-theme="dark"], .theme-dark {
--bg: var(--ink-950);
--bg-subtle: #0D1017;
--bg-muted: #141821;
--bg-inverse: var(--ink-0);
--surface: #0F131A;
--surface-raised: #161B24;
--surface-sunken: #0A0C11;
--fg-1: #F2F4F7;
--fg-2: #BCC3CF;
--fg-3: #8C94A2;
--fg-4: #5D6471;
--fg-inverse: var(--ink-950);
--border-1: #232935;
--border-2: #1A1F28;
--border-strong: #323944;
--border-focus: var(--blue-400);
--accent: var(--blue-400);
--accent-hover: var(--blue-300);
--accent-press: var(--blue-500);
--accent-soft: rgba(58, 160, 210, 0.12);
--accent-fg: var(--ink-950);
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
--shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
--ring-focus: 0 0 0 3px rgba(58, 160, 210, 0.32);
--inset-line: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
/* ============================================================
SEMANTIC TYPE ROLES
Use these on real elements, not the raw --fs-* vars.
============================================================ */
.t-display-xl,
.t-display-lg,
.t-display-md,
.t-display-sm,
.t-heading-xl,
.t-heading-lg,
.t-heading-md,
.t-heading-sm {
font-family: var(--font-display);
color: var(--fg-1);
}
.t-display-xl { font-size: var(--fs-6xl); line-height: 0.96; letter-spacing: var(--tracking-tighter); font-weight: 500; }
.t-display-lg { font-size: var(--fs-5xl); line-height: 1.00; letter-spacing: var(--tracking-tighter); font-weight: 500; }
.t-display-md { font-size: var(--fs-4xl); line-height: 1.02; letter-spacing: var(--tracking-tight); font-weight: 500; }
.t-display-sm { font-size: var(--fs-3xl); line-height: 1.06; letter-spacing: var(--tracking-tight); font-weight: 500; }
.t-heading-xl { font-size: var(--fs-2xl); line-height: 1.15; letter-spacing: var(--tracking-tight); font-weight: 600; }
.t-heading-lg { font-size: var(--fs-xl); line-height: 1.2; letter-spacing: var(--tracking-tight); font-weight: 600; }
.t-heading-md { font-size: var(--fs-lg); line-height: 1.25; letter-spacing: var(--tracking-normal); font-weight: 600; }
.t-heading-sm { font-size: var(--fs-md); line-height: 1.3; letter-spacing: var(--tracking-normal); font-weight: 600; }
.t-body-lg { font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--fg-2); }
.t-body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg-2); }
.t-body-sm { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.t-label { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500; color: var(--fg-1); letter-spacing: 0; }
.t-meta { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--fg-3); }
.t-eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--fg-3);
}
.t-mono { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-2); }
.t-code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-muted); padding: 2px 6px; border-radius: var(--radius-xs); color: var(--fg-1); }
/* ============================================================
ELEMENT DEFAULTS
============================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-normal);
color: var(--fg-1);
background: var(--bg);
}
h1 { font: 500 var(--fs-4xl)/1.02 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
h2 { font: 500 var(--fs-3xl)/1.06 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
h3 { font: 600 var(--fs-2xl)/1.15 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
h4 { font: 600 var(--fs-xl)/1.2 var(--font-display); color: var(--fg-1); }
h5 { font: 600 var(--fs-lg)/1.25 var(--font-sans); color: var(--fg-1); }
h6 { font: 600 var(--fs-md)/1.3 var(--font-sans); color: var(--fg-1); }
p { color: var(--fg-2); line-height: var(--lh-normal); }
a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--font-mono); }
pre { background: var(--bg-muted); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-1); overflow-x: auto; }
hr { border: 0; border-top: 1px solid var(--border-1); }
::selection { background: var(--blue-500); color: white; }
/* ==== inline style ==== */
/* ============================================================
OUNTERNET, Homepage
Dark-first editorial-tech. Lochmara as signal. Satoshi as display,
Instrument Sans as body (build spec §02).
============================================================ */
/* Display font override, condensed, distinctive, not default */
:root {
--font-display: "Roboto", system-ui, sans-serif;
--font-condensed: "Roboto", system-ui, sans-serif;
--font-sans: "Roboto", system-ui, sans-serif;
--font-mono: "Roboto Mono", ui-monospace, monospace;
--signal: var(--blue-400); /* #3AA0D2, the one colour that matters */
--signal-strong: var(--blue-500); /* #0080C3 Lochmara */
--grain-opacity: 0.06;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
body {
background: var(--bg);
color: var(--fg-1);
font-family: var(--font-sans);
cursor: none; /* custom cursor takes over */
}
/* Remove custom cursor on touch devices */
@media (hover: none) { body { cursor: auto; } .cursor, .cursor-ring { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
body { cursor: auto; }
.cursor, .cursor-ring { display: none !important; }
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
::selection { background: var(--signal); color: #000; }
/* ============================================================
GLOBAL TEXTURE, faint grain fixed overlay, the whole site
============================================================ */
.grain {
position: fixed; inset: 0;
pointer-events: none;
z-index: 2;
opacity: var(--grain-opacity);
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* ============================================================
CURSOR
============================================================ */
.cursor { position: fixed; width: 22px; height: 22px; border-radius: 50%; background: url("assets/favicon-ounternet.png") center / contain no-repeat; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: transform var(--dur-fast) var(--ease-out), width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.cursor-ring { display: none; position: fixed; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--fg-3); top: 0; left: 0; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: width var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); mix-blend-mode: difference; }
.cursor.is-hover { width: 30px; height: 30px; border-radius:50%;}
.cursor-ring.is-hover { width: 64px; height: 64px; border-color: var(--signal); background: rgba(58, 160, 210, 0.06); }
/* ============================================================
LAYOUT PRIMITIVES
============================================================ */
.container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 48px);
position: relative;
}
.section {
position: relative;
padding: clamp(80px, 10vw, 160px) 0;
border-top: 1px solid var(--border-2);
}
.section:first-of-type { border-top: 0; }
.eyebrow {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--fg-3);
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow::before {
content: "";
width: 24px;
height: 1px;
background: var(--fg-3);
display: inline-block;
}
.eyebrow--signal { color: var(--signal); }
.eyebrow--signal::before { background: var(--signal); }
/* ============================================================
NAV
============================================================ */
.nav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 100;
padding: 20px 0;
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
background: rgba(10, 12, 17, 0.55);
border-bottom: 1px solid rgba(35, 41, 53, 0);
transition: border-color var(--dur-slow) var(--ease-out), background var(--dur-slow) var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--border-1); background: rgba(10, 12, 17, 0.8); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--fg-1); text-decoration: none; }
.nav-logo .dot { width: 8px; height: 8px; background: var(--signal); border-radius: 999px; box-shadow: 0 0 12px var(--signal); }
.nav-logo .mark { width: 26px; height: 26px; object-fit: contain; display: block; filter: drop-shadow(0 0 10px rgba(58,160,210,0.3)); }
.nav-logo .logo-img { height: 84px; width: auto; display: block; filter: drop-shadow(0 1px 10px rgba(0,0,0,0.4)) brightness(1.2) saturate(1.05); }
[data-theme="light"] .nav-logo .logo-img { filter: none; }
@media (max-width: 640px) { .nav-logo .logo-img { height: 68px; } }
.loader { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: flex; align-items: center; justify-content: center; transition: opacity 500ms var(--ease-out), visibility 500ms var(--ease-out); }
.loader img { width: 56px; height: 56px; object-fit: contain; animation: loaderPulse 1.1s ease-in-out infinite; }
.loader.is-done { opacity: 0; visibility: hidden; }
@keyframes loaderPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.85); opacity: 0.5; } }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { color: var(--fg-2); text-decoration: none; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur-base) var(--ease-out); }
.nav-links a:hover { color: var(--fg-1); }
.nav-links a .idx { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--fg-1); text-decoration: none; background: transparent; transition: all var(--dur-base) var(--ease-out); }
.nav-cta:hover { border-color: var(--signal); color: var(--signal); }
.nav-cta .arrow { width: 14px; height: 14px; }
.nav-auth { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--fg-2); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
.nav-auth:hover { color: var(--signal); }
.nav-auth svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 560px) { .nav-auth span { display: none; } }
@media (max-width: 860px) { .nav-links { display: none; } }
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
min-height: 100vh;
padding-top: 120px;
padding-bottom: 80px;
overflow: hidden;
}
.hero-visual { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-layer { position: absolute; inset: 0; will-change: transform; }
.hero-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; animation: heroDrift 40s ease-in-out infinite alternate; }
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.06); } }
.hero-visual::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 220px; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,0.85), transparent); }
.hero-visual::after { content: ""; position: absolute; inset: auto 0 0 0; height: 180px; z-index: 2; background: linear-gradient(0deg, var(--bg), transparent); }
.hero-arcs { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; transform: translateZ(0); }
.hero-arcs .arc { fill: none; stroke: var(--signal); stroke-width: 2.5; opacity: 0.55; }
.hero-arcs .packet { fill: none; stroke: #CFF0FF; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 3 97; animation: packetRun 6s linear infinite; }
@keyframes packetRun { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.hero-arcs .ping-core { fill: var(--signal); }
.hero-arcs .ping-ring { fill: none; stroke: var(--signal); stroke-width: 3; transform-origin: center; transform-box: fill-box; animation: pingRing 3s ease-out infinite; }
@keyframes pingRing { 0% { transform: scale(0.4); opacity: 0.9; } 80% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }
.hero-arcs .siglabel { opacity: 0; transition: opacity 0.6s ease; }
.hero-arcs .siglabel.is-on { opacity: 1; }
.hero-arcs .siglabel rect { fill: rgba(0,0,0,0.65); stroke: var(--signal); stroke-width: 2; }
.hero-arcs .siglabel text { font-family: var(--font-mono); font-size: 19px; letter-spacing: 0.1em; text-transform: uppercase; }
.hero-arcs .siglabel .city { fill: var(--brand-sun); }
.hero-arcs .siglabel .ev { fill: var(--signal); }
@media (prefers-reduced-motion: reduce) {
.hero-layer img { animation: none; }
.hero-arcs .ping-ring { animation: none; }
.hero-arcs .packet { display: none; }
.hero-arcs .siglabel { opacity: 1; }
}
.hero-content { pointer-events: none; }
.hero-content a, .hero-content button, .hero-content [data-magnetic] { pointer-events: auto; }
.hero-content {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto 1fr;
min-height: calc(100vh - 200px);
gap: 40px;
}
.hero-meta { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.hero-meta .globe-hint { color: var(--signal); opacity: 0.9; display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 720px) { .hero-meta .globe-hint { display: none; } }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta .live-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
.hero-headline {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(64px, 13.5vw, 208px);
line-height: 0.86;
letter-spacing: -0.045em;
color: var(--fg-1);
text-transform: uppercase;
min-width: 0;
}
.hero-headline .word {
display: block;
}
.hero-headline .word span {
display: inline-block;
}
.hero-headline .comma { color: var(--signal); font-style: italic; font-family: var(--font-display); font-weight: 500; }
@keyframes riseUp {
0% { transform: translateY(110%); }
100% { transform: translateY(0); }
}
.hero-bottom {
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: end;
}
@media (max-width: 860px) {
.hero-bottom { grid-template-columns: 1fr; gap: 32px; }
}
.hero-lede {
max-width: 520px;
font-size: clamp(16px, 1.2vw, 19px);
line-height: 1.55;
color: var(--fg-2);
font-weight: 400;
}
.hero-lede strong { color: var(--fg-1); font-weight: 500; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 24px;
border-radius: var(--radius-sm);
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
text-decoration: none;
cursor: none;
border: 1px solid transparent;
transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
position: relative;
white-space: nowrap;
}
.btn--primary { background: var(--signal); color: #05131D; border-color: var(--signal); }
.btn--primary:hover { background: var(--blue-300); border-color: var(--blue-300); }
.btn--ghost { background: transparent; color: var(--fg-1); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--fg-1); color: var(--fg-1); }
.btn--onearth { background: rgba(10,12,17,0.92); }
.btn--onearth:hover { background: rgba(10,12,17,0.92); }
.hero-lede { position: relative; }
.hero-lede::before { content: ""; position: absolute; inset: -22px -34px; z-index: -1; background: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 40%, transparent 75%); filter: blur(6px); border-radius: 50%; }
.btn .arrow { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow { transform: translate(2px, -2px); }
/* ============================================================
CREDIBILITY STRIP
============================================================ */
.cred-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--border-1);
padding-top: 24px;
margin-top: 40px;
}
.cred-item {
display: flex; flex-direction: column; gap: 6px;
padding-right: 24px;
border-right: 1px solid var(--border-2);
}
.cred-item:last-child { border-right: 0; }
.cred-item .label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); }
.cred-item .value { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--fg-1); }
@media (max-width: 700px) {
.cred-strip { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cred-item { border-right: 0; padding-right: 0; }
}
/* ============================================================
MARQUEE, infinite-scroll service categories
============================================================ */
.marquee-section {
padding: 48px 0;
border-top: 1px solid var(--border-2);
border-bottom: 1px solid var(--border-2);
background: #0D1017;
overflow: hidden;
}
.marquee {
display: flex;
gap: 0;
white-space: nowrap;
}
.marquee-track {
display: flex;
gap: 0;
animation: scroll 40s linear infinite;
will-change: transform;
}
.marquee-item {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(48px, 7vw, 96px);
line-height: 1;
letter-spacing: -0.03em;
color: var(--fg-1);
padding: 0 48px;
display: inline-flex; align-items: center; gap: 48px;
text-transform: uppercase;
}
.marquee-item::after {
content: "";
display: inline-block;
width: 12px; height: 12px;
background: var(--signal);
border-radius: 999px;
transform: translateY(-8px);
}
.marquee-item:nth-child(3n)::after { background: var(--brand-green-haze); }
.marquee-item:nth-child(5n)::after { background: var(--brand-sun); }
.marquee-item.outline {
color: transparent;
-webkit-text-stroke: 1px var(--fg-3);
}
.marquee-item.outline::after { background: var(--fg-3); }
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ============================================================
METRICS STRIP (flagship client, verified)
============================================================ */
.metrics {
padding: clamp(80px, 10vw, 140px) 0;
border-top: 1px solid var(--border-2);
}
.metrics-head {
display: flex; justify-content: space-between; align-items: baseline;
gap: 32px; margin-bottom: 80px; flex-wrap: wrap;
}
.metrics-head h2 {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(32px, 4vw, 56px); line-height: 1;
letter-spacing: -0.035em; text-transform: uppercase;
max-width: 16ch;
}
.metrics-head .source {
font-family: var(--font-mono); font-size: 12px; color: var(--fg-3);
max-width: 280px; line-height: 1.5;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--border-1);
}
@media (max-width: 860px) { .metrics-grid { grid-template-columns: 1fr; } }
.metric {
padding: 40px 32px 32px;
border-right: 1px solid var(--border-1);
display: flex; flex-direction: column; gap: 16px;
position: relative;
overflow: hidden;
}
.metric:last-child { border-right: 0; }
@media (max-width: 860px) {
.metric { border-right: 0; border-bottom: 1px solid var(--border-1); }
.metric:last-child { border-bottom: 0; }
}
.metric .idx { font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); letter-spacing: var(--tracking-caps); }
.metric .figure { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 6.4vw, 96px); line-height: 0.9; letter-spacing: -0.05em; color: var(--fg-1); white-space: nowrap; }
.metric .figure .unit { color: var(--signal); }
.metric .caption { font-size: 15px; line-height: 1.5; color: var(--fg-2); max-width: 32ch; }
.metric .verify { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 6px; }
.metric .verify::before { content: ""; width: 6px; height: 6px; background: var(--brand-green-haze); border-radius: 999px; }
/* ============================================================
SERVICES, hover-expand rows
============================================================ */
.services-head { margin-bottom: 64px; display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; }
.services-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 6.5vw, 88px); line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; max-width: 10ch; }
.services-head .desc { max-width: 360px; color: var(--fg-2); font-size: 16px; line-height: 1.6; }
.services-list { border-top: 1px solid var(--border-1); }
.service-row {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 32px;
padding: 32px 8px;
border-bottom: 1px solid var(--border-1);
align-items: center;
cursor: none;
position: relative;
transition: padding var(--dur-slow) var(--ease-out), background var(--dur-slow) var(--ease-out);
}
.service-row::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(58,160,210,0.04), transparent 60%);
opacity: 0;
transition: opacity var(--dur-slow) var(--ease-out);
pointer-events: none;
}
.service-row:hover::before, .service-row.is-open::before { opacity: 1; }
.service-row:hover, .service-row.is-open { padding: 40px 8px; }
.service-row .idx { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); letter-spacing: var(--tracking-caps); align-self: start; padding-top: 8px; }
.service-row .name { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.5vw, 52px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; color: var(--fg-1); transition: color var(--dur-base) var(--ease-out); }
.service-row:hover .name, .service-row.is-open .name { color: var(--signal); }
.service-row .plus { width: 32px; height: 32px; position: relative; }
.service-row .plus::before, .service-row .plus::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--fg-3); transition: all var(--dur-slow) var(--ease-out); }
.service-row .plus::before { width: 16px; height: 1px; transform: translate(-50%, -50%); }
.service-row .plus::after { width: 1px; height: 16px; transform: translate(-50%, -50%); }
.service-row:hover .plus::before, .service-row:hover .plus::after,
.service-row.is-open .plus::before, .service-row.is-open .plus::after { background: var(--signal); }
.service-row.is-open .plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.service-detail {
grid-column: 2 / 3;
max-height: 0;
overflow: hidden;
transition: max-height 500ms var(--ease-out), margin-top 300ms var(--ease-out);
}
.service-row.is-open .service-detail { max-height: 400px; margin-top: 24px; }
.service-detail-inner {
display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
padding: 16px 0 8px;
}
@media (max-width: 860px) { .service-detail-inner { grid-template-columns: 1fr; gap: 24px; } }
.service-detail .blurb { color: var(--fg-2); font-size: 16px; line-height: 1.65; max-width: 42ch; }
.service-detail .svc-page-link { display: flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 10px; color: var(--signal); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.service-detail .deliverables { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.service-detail .deliverables li { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); padding-left: 20px; position: relative; }
.service-detail .deliverables li::before { content: "→"; position: absolute; left: 0; color: var(--signal); }
/* ============================================================
CASE STUDY, flagship client
============================================================ */
.casestudy { position: relative; padding: clamp(80px, 10vw, 160px) 0; background: #080A0F; border-top: 1px solid var(--border-1); }
.cs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
@media (max-width: 960px) { .cs-grid { grid-template-columns: 1fr; gap: 48px; } }
.cs-left { position: sticky; top: 120px; }
.cs-tag { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.cs-tag::before { content: ""; width: 24px; height: 1px; background: var(--signal); }
.cs-client { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 8vw, 112px); line-height: 0.9; letter-spacing: -0.045em; text-transform: uppercase; margin-bottom: 12px; }
.cs-subtitle { font-family: var(--font-condensed); font-weight: 500; font-size: 20px; color: var(--fg-2); margin-bottom: 32px; max-width: 28ch; line-height: 1.3; }
.cs-operator { border-top: 1px solid var(--border-1); padding-top: 20px; margin-top: 32px; }
.cs-operator .label { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin-bottom: 8px; }
.cs-operator .body { font-size: 14px; color: var(--fg-2); line-height: 1.5; }
.cs-operator .body strong { color: var(--fg-1); font-weight: 500; }
.cs-right { display: flex; flex-direction: column; gap: 32px; }
.cs-figure {
border: 1px solid var(--border-1);
padding: 32px 28px;
background: linear-gradient(180deg, #10141C 0%, #0A0C11 100%);
position: relative;
overflow: hidden;
}
.cs-figure .idx { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin-bottom: 16px; }
.cs-figure .number { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 7vw, 96px); line-height: 0.9; letter-spacing: -0.04em; color: var(--fg-1); margin-bottom: 12px; }
.cs-figure .number .signal { color: var(--signal); }
.cs-figure .label { font-family: var(--font-sans); font-size: 15px; color: var(--fg-2); line-height: 1.5; }
.cs-figure .context { font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border-1); }
.cs-chart {
height: 120px; margin-top: 20px;
position: relative;
}
.cs-chart svg { width: 100%; height: 100%; display: block; }
/* ============================================================
PROCESS, 4 steps
============================================================ */
.process-head { margin-bottom: 80px; display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; }
.process-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 6vw, 88px); line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; max-width: 9ch; }
.process-head .note { max-width: 320px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); line-height: 1.6; }
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--border-1);
}
@media (max-width: 960px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .process-grid { grid-template-columns: 1fr; } }
.process-step {
padding: 40px 32px;
border-right: 1px solid var(--border-1);
display: flex; flex-direction: column; gap: 20px;
min-height: 340px;
position: relative;
transition: background var(--dur-slow) var(--ease-out);
}
.process-step:last-child { border-right: 0; }
.process-step:hover { background: #0E1219; }
.process-step .idx { font-family: var(--font-mono); font-size: 12px; color: var(--signal); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.process-step .title { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.process-step .blurb { color: var(--fg-2); font-size: 14px; line-height: 1.6; flex-grow: 1; }
.process-step .dur { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding-top: 20px; border-top: 1px dashed var(--border-1); }
/* ============================================================
DUAL BRAND
============================================================ */
.dual {
display: grid; grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--border-1);
border-bottom: 1px solid var(--border-1);
}
@media (max-width: 860px) { .dual { grid-template-columns: 1fr; } }
.dual-half {
padding: clamp(60px, 8vw, 120px) clamp(32px, 5vw, 64px);
min-height: 520px;
display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
position: relative;
overflow: hidden;
transition: background var(--dur-slow) var(--ease-out);
}
.dual-half:first-child { border-right: 1px solid var(--border-1); }
@media (max-width: 860px) { .dual-half:first-child { border-right: 0; border-bottom: 1px solid var(--border-1); } }
.dual-half:hover { background: #0E1219; }
.dual-half .mark { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: -0.01em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.dual-half .mark .dot { width: 8px; height: 8px; border-radius: 999px; }
.dual-half[data-brand="agency"] .mark .dot { background: var(--signal); box-shadow: 0 0 12px var(--signal); }
.dual-half[data-brand="lab"] .mark .dot { background: var(--brand-green-haze); box-shadow: 0 0 12px var(--brand-green-haze); }
.dual-half h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5vw, 72px); line-height: 0.95; letter-spacing: -0.035em; text-transform: uppercase; }
.dual-half .tagline { color: var(--fg-2); font-size: 17px; line-height: 1.55; max-width: 38ch; }
.dual-half .list { list-style: none; display: flex; flex-direction: column; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
.dual-half .list li::before { content: "· "; color: var(--signal); }
.dual-half[data-brand="lab"] .list li::before { color: var(--brand-green-haze); }
.dual-half .cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); text-transform: uppercase; letter-spacing: var(--tracking-caps); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 6px; align-self: flex-start; transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.dual-half[data-brand="agency"] .cta:hover { color: var(--signal); }
.dual-half[data-brand="lab"] .cta:hover { color: var(--brand-green-haze); }
/* ============================================================
INTELLIGENCE SECTION, multi-agent pipeline
============================================================ */
.intel { padding: clamp(80px, 10vw, 160px) 0; background: #070A0F; position: relative; overflow: hidden; }
.intel::before {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 50% 50%, rgba(58, 160, 210, 0.08), transparent 50%),
linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
background-size: 100% 100%, 40px 40px, 40px 40px;
pointer-events: none;
}
.intel-head { margin-bottom: 64px; display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; position: relative; z-index: 2; }
.intel-head .title { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 6vw, 88px); line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; max-width: 14ch; }
.intel-head .stamp { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tracking-caps); display: inline-flex; align-items: center; gap: 10px; }
.intel-head .stamp .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: pulse 2s ease-in-out infinite; }
.intel-lede { max-width: 46ch; display: flex; flex-direction: column; gap: 20px; }
.intel-lede p { color: var(--fg-2); font-size: 16px; line-height: 1.65; }
.intel-flow { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--border-1); background: rgba(10, 12, 17, 0.6); margin-bottom: 32px; }
.intel-flow .stage { padding: 24px 20px; border-right: 1px solid var(--border-1); display: flex; flex-direction: column; gap: 12px; position: relative; transition: background var(--dur-base) var(--ease-out); }
.intel-flow .stage:last-child { border-right: 0; }
.intel-flow .stage:hover { background: #0E1219; }
.intel-flow .stage::after { content: "→"; position: absolute; top: 24px; right: -7px; z-index: 3; font-family: var(--font-mono); font-size: 12px; color: var(--signal); background: #070A0F; padding: 0 2px; }
.intel-flow .stage:last-child::after { content: none; }
.intel-flow .num { font-family: var(--font-mono); font-size: 10px; color: var(--brand-sun); letter-spacing: var(--tracking-caps); }
.intel-flow h4 { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; text-transform: uppercase; }
.intel-flow .stage p { font-size: 13px; line-height: 1.55; color: var(--fg-3); flex: 1; }
.intel-flow .who { font-family: var(--font-mono); font-size: 9px; color: var(--fg-4); letter-spacing: var(--tracking-caps); }
@media (max-width: 1020px) { .intel-flow { grid-template-columns: repeat(2, 1fr); } .intel-flow .stage { border-bottom: 1px solid var(--border-1); } .intel-flow .stage::after { content: none; } }
@media (max-width: 560px) { .intel-flow { grid-template-columns: 1fr; } .intel-flow .stage { border-right: 0; } }
.intel-body {
position: relative; z-index: 2;
display: grid;
grid-template-columns: 1fr 380px;
gap: 32px;
align-items: stretch;
}
@media (max-width: 1020px) {
.intel-body { grid-template-columns: 1fr; }
}
.intel-stage {
border: 1px solid var(--border-1);
background: rgba(10, 12, 17, 0.6);
aspect-ratio: 1.35;
position: relative;
overflow: hidden;
}
.intel-stage svg { width: 100%; height: 100%; display: block; }
.intel-stage .corner { position: absolute; font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); text-transform: uppercase; letter-spacing: var(--tracking-caps); padding: 12px 16px; }
.intel-stage .corner.tl { top: 0; left: 0; }
.intel-stage .corner.tr { top: 0; right: 0; display: flex; align-items: center; gap: 8px; }
.intel-stage .corner.tr .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--signal); box-shadow: 0 0 8px var(--signal); animation: pulse 2s ease-in-out infinite; }
.intel-stage .corner.bl { bottom: 0; left: 0; }
.intel-stage .corner.br { bottom: 0; right: 0; }
.intel-log {
border: 1px solid var(--border-1);
background: rgba(10, 12, 17, 0.6);
display: flex; flex-direction: column;
min-height: 420px;
}
.intel-log-head {
padding: 12px 16px;
border-bottom: 1px solid var(--border-1);
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.intel-log-head .dots { display: flex; gap: 6px; }
.intel-log-head .dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--border-strong); }
.intel-log-head .dots span.on { background: var(--brand-green-haze); }
.intel-log-stream { flex: 1; padding: 12px 16px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 11px; }
.log-entry {
display: grid;
grid-template-columns: 54px 72px 1fr;
gap: 10px;
line-height: 1.4;
opacity: 0;
transform: translateY(8px);
animation: logIn 400ms var(--ease-out) forwards;
}
.log-entry .ts { color: var(--fg-4); }
.log-entry .src { color: var(--signal); }
.log-entry .msg { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-entry.info .src { color: var(--signal); }
.log-entry.ok .src { color: var(--brand-green-haze); }
.log-entry.warn .src { color: var(--brand-sun); }
.log-entry.core .src { color: #F2F4F7; }
@keyframes logIn { to { opacity: 1; transform: translateY(0); } }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-top { grid-template-columns: 1fr; } }
/* ============================================================
REVEAL ANIMATIONS
============================================================ */
html.js-reveal .reveal:not(.is-visible) {
opacity: 0;
transform: translateY(16px);
transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Pointer affordance for interactive things so cursor works well */
a, button, .service-row, .dual-half a, [data-magnetic] { cursor: none; }
/* Structural yellow (build spec §02): tags, underlines, hover ticks. Green stays verified-only. */
.eyebrow--signal { color: var(--brand-sun); }
.eyebrow--signal::before { background: var(--brand-sun); }
.nav-links a.is-active { box-shadow: inset 0 -2px 0 var(--brand-sun); padding-bottom: 2px; }
.nav-links a:hover { box-shadow: inset 0 -2px 0 var(--brand-sun); padding-bottom: 2px; }
.metric .idx, .cs-tag, .tl-step .tl-tag, .process-step .idx, .office-flag, .channel .idx-row span:first-child { color: var(--brand-sun); }
.cs-tag::before, .tl-step .tl-tag::before, .office-flag::before { background: var(--brand-sun); box-shadow: 0 0 8px var(--brand-sun); }
.filter-chip.is-active { border-color: var(--brand-sun); color: var(--brand-sun); }
::selection { background: var(--brand-sun); color: #0A0C11; }
/* NAV TOOLS, language + theme */
.nav-tools { display: flex; align-items: center; gap: 10px; flex: none; }
@media (max-width: 1000px) { .nav-inner { gap: 20px; } .nav-cta { display: none; } }
.lang-switch { display: flex; flex: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.lang-switch button { background: transparent; border: 0; border-right: 1px solid var(--border-strong); color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-caps); padding: 9px 12px; cursor: pointer; transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.lang-switch button:last-child { border-right: 0; }
.lang-switch button:hover { color: var(--fg-1); }
.lang-switch button.is-on { background: rgba(58,160,210,0.12); color: var(--signal); }
.theme-toggle { width: 36px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: transparent; color: var(--fg-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); flex: none; }
.theme-toggle:hover { border-color: var(--signal); color: var(--signal); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .ico-moon { display: none; }
[data-theme="light"] .theme-toggle .ico-sun { display: none; }
[data-theme="light"] .theme-toggle .ico-moon { display: block; }
@media (max-width: 640px) { .lang-switch button { padding: 9px 9px; } }
/* LIGHT MODE, overrides for hard-coded dark surfaces */
html[data-theme="light"] { --signal: var(--blue-600); --signal-strong: var(--blue-700); --fg-4: #5F6672; }
[data-theme="light"] .grain { opacity: 0.05; mix-blend-mode: multiply; }
[data-theme="light"] .cursor-ring { mix-blend-mode: normal; }
[data-theme="light"] ::selection { background: var(--brand-sun); color: #0A0C11; }
[data-theme="light"] .marquee-section { background: var(--ink-50); }
[data-theme="light"] .process-step:hover, [data-theme="light"] .dual-half:hover { background: #EDF2F7; }
/* Intel + case study stay dark console modules in light mode, re-pin dark tokens inside */
[data-theme="light"] .intel, [data-theme="light"] .casestudy { --fg-1: #F2F4F7; --fg-2: #B9C1CD; --fg-3: #8C94A2; --fg-4: #5D6471; --border-1: #1B212B; --border-2: #161B23; --border-strong: #2A3240; --signal: #3AA0D2; }
/* ==== inline style #om-add ==== */
body{overflow-x:hidden}
.t-strip{padding:40px 0 36px;border-top:1px solid var(--border-2)}
.t-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.t-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--brand-sun);display:inline-flex;align-items:center;gap:10px}
.t-eyebrow::before{content:"";width:24px;height:1px;background:var(--brand-sun)}
.t-note{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-4)}
.t-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.t-slot{height:64px;border:1px solid var(--border-1);background:rgba(15,19,26,.4)}
.t-slot image-slot{display:block;width:100%;height:100%}
.founder-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:860px){.founder-grid{grid-template-columns:1fr}}
.f-photo{position:relative;aspect-ratio:4/5;max-width:440px;border:1px solid rgba(58,160,210,.45);background:rgba(15,19,26,.5);box-shadow:0 0 40px rgba(58,160,210,.08),inset 0 0 30px rgba(58,160,210,.04);padding:10px}
.f-photo image-slot{display:block;width:100%;height:100%}
.f-h2{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.8vw,54px);line-height:.95;letter-spacing:-.035em;text-transform:uppercase;margin:14px 0 18px}
.f-h2 .signal{color:var(--signal)}
.f-name{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal);margin-bottom:14px}
.f-bio{color:var(--fg-2);font-size:16px;line-height:1.6;max-width:56ch;margin-bottom:20px}
.f-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.f-chips span{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);border:1px solid var(--border-strong);border-radius:999px;padding:8px 14px}
.f-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.f-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--fg-3);line-height:1.6;border-top:1px dashed var(--border-1);padding-top:16px;max-width:60ch}
.testi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px}
/* Empty review slots never render. One review shows as a single wider card. */
.testi-slot:empty,.testi-slot{display:none}
.testi-grid:has(> .testi-card:only-child){grid-template-columns:minmax(0,760px)}
@media(max-width:960px){.testi-grid{grid-template-columns:1fr}}
.testi-card{margin:0;border:1px solid var(--border-1);background:linear-gradient(170deg,rgba(15,19,26,.7),rgba(7,10,15,.85));padding:26px;display:flex;flex-direction:column;gap:16px}
.testi-stars{font-size:13px;color:var(--brand-sun);letter-spacing:3px}
.testi-stars .score{font-family:var(--font-mono);font-size:11px;color:var(--fg-2);letter-spacing:.06em;margin-left:8px}
.testi-card blockquote{margin:0;font-size:16.5px;line-height:1.55;color:var(--fg-1)}
.testi-card figcaption{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--fg-3);margin-top:auto}
.testi-card figcaption strong{color:var(--fg-1);font-size:13.5px}
.testi-card figcaption .meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-4)}
.testi-slot{border:1px dashed var(--border-strong);display:grid;place-items:center;min-height:220px;padding:26px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-4);text-align:center;line-height:1.8}
.trust-row{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--border-1);padding-top:18px}
.trust-row span{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);border:1px solid var(--border-1);padding:8px 13px;border-radius:999px}
.clutch-badge{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-1);text-decoration:none;width:max-content}
.clutch-badge:hover{border-color:var(--signal);color:var(--signal)}
.clutch-badge b{color:var(--signal);font-weight:600}
.clutch-row{margin-top:28px}
@media(max-width:720px){
.hero{min-height:0;padding-bottom:24px}
html[lang] .hero-headline,.hero-headline{font-size:clamp(38px,11.5vw,56px);line-height:.92}
.hero-layer img{object-position:40% 30%}
.hero-visual::after{height:120px}
.hero-arcs .m-hide{display:none}
.hero-content{position:relative;z-index:3;background:transparent}
}
/* ==== inline style #om-ai ==== */
#studios{position:relative;overflow:hidden}
#studios::after{content:"";position:absolute;inset:0;background:url('assets/self/hf_20260909_102055_8c1ac92d-eb34-4ab1-82b1-3f79c04adc3b.webp') center/cover no-repeat;opacity:.16;pointer-events:none;z-index:0}@media (max-width:960px){#studios::after{background-image:url('assets/self/hf_20260909_102055_8c1ac92d-eb34-4ab1-82b1-3f79c04adc3b-960.webp')}}
#studios .container{position:relative;z-index:1}
.ai-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.ai-card{grid-column:span 2}
.ai-card:nth-child(4){grid-column:2/span 2}
.ai-card:nth-child(5){grid-column:4/span 2}
@media(max-width:1100px){.ai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-card,.ai-card:nth-child(4),.ai-card:nth-child(5){grid-column:auto}}
@media(max-width:640px){.ai-grid{grid-template-columns:1fr}}
.ai-card{border:1px solid var(--border-1);background:linear-gradient(170deg,rgba(15,19,26,.75),rgba(7,10,15,.9));display:flex;flex-direction:column}
.ai-card .img{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--border-1);background:#10141C}
.ai-card .img img{width:100%;height:100%;object-fit:cover;display:block}
.ai-card .img image-slot{display:block;width:100%;height:100%}
.ai-card .bd{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.ai-card h3{font-family:var(--font-display);font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:-.02em;line-height:1.08}
.ai-card .for{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-sun)}
.ai-card p{font-size:13.5px;line-height:1.55;color:var(--fg-2)}
.ai-card .why{border-top:1px dashed var(--border-1);padding-top:12px;font-size:13px;line-height:1.5;color:var(--fg-3)}
.ai-card .why b{color:var(--fg-1);font-weight:600}
.ai-card .cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;padding:13px 16px;border:1px solid var(--signal);border-radius:var(--radius-sm);color:var(--signal);font-size:13px;font-weight:600;text-decoration:none;min-height:44px}
.ai-card .cta:hover{background:var(--signal);color:#05131D}
.faq-list{max-width:820px;display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--border-1)}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 2px;cursor:none;font-family:var(--font-display);font-weight:700;font-size:clamp(16px,1.6vw,20px);text-transform:uppercase;letter-spacing:-.01em;color:var(--fg-1)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font-mono);color:var(--signal);font-size:20px;flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-item .a{padding:0 2px 22px;color:var(--fg-2);font-size:15px;line-height:1.6;max-width:64ch}
/* ==== site-footer.css ==== */
/* ============================================================
OUNTERNET — Shared final CTA + footer styles
SOURCE OF TRUTH. Copied verbatim from Homepage v3.html.
Every page links this file; do not restyle the footer per page.
============================================================ */
/* ---------------- FINAL CTA ---------------- */
.finalcta {
padding: clamp(100px, 14vw, 200px) 0;
text-align: center;
position: relative;
overflow: hidden;
border-top: 1px solid var(--border-1);
}
.finalcta h2 {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(56px, 10vw, 168px); line-height: 0.9; letter-spacing: -0.045em;
text-transform: uppercase;
max-width: 18ch; margin: 0 auto 32px;
}
.finalcta h2 .signal { color: var(--signal); }
.finalcta p { max-width: 52ch; margin: 0 auto 48px; color: var(--fg-2); font-size: 17px; line-height: 1.6; }
.finalcta .ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.finalcta .slots { margin-top: 28px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.finalcta .slots .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-sun); box-shadow: 0 0 10px var(--brand-sun); }
/* ---------------- FOOTER ---------------- */
.footer {
position: relative;
padding: 80px 0 40px;
background: #05070B;
border-top: 1px solid var(--border-1);
overflow: hidden;
}
.footer::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
background-size: 24px 24px;
opacity: 0.5;
pointer-events: none;
}
.footer-top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 80px;
position: relative;
z-index: 2;
}
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-top { grid-template-columns: 1fr; } }
.footer-col h4 { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-bottom: 20px; font-weight: 500; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.footer-col li { list-style: none; }
.footer-col a { color: var(--fg-1); text-decoration: none; font-size: 14px; transition: color var(--dur-base) var(--ease-out); display: inline-flex; align-items: center; gap: 8px; }
.footer-col a:hover { color: var(--signal); }
.footer-col li .meta { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.footer-col a .out { width: 11px; height: 11px; flex: none; opacity: 0.55; }
.footer-col a:hover .out { opacity: 1; }
.footer-main .live {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
text-transform: uppercase; letter-spacing: var(--tracking-caps);
padding: 8px 14px; border: 1px solid var(--border-1); border-radius: var(--radius-full);
margin-bottom: 24px;
}
.footer-main .live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: pulse 2s ease-in-out infinite; }
.footer-main h3 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; max-width: 18ch; margin-bottom: 16px; }
.footer-main p { color: var(--fg-2); font-size: 14px; line-height: 1.6; max-width: 34ch; margin-bottom: 24px; }
.subscribe {
display: flex;
gap: 8px;
max-width: 400px;
padding: 6px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: rgba(10,12,17,0.6);
transition: border-color var(--dur-base) var(--ease-out);
}
.subscribe:focus-within { border-color: var(--signal); box-shadow: var(--ring-focus); }
.subscribe input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
color: var(--fg-1);
font-family: var(--font-sans);
font-size: 14px;
padding: 10px 12px;
}
.subscribe input::placeholder { color: var(--fg-4); }
.subscribe button {
background: var(--signal);
color: #05131D;
border: 0;
padding: 10px 20px;
border-radius: var(--radius-sm);
font-family: var(--font-sans);
font-weight: 500;
font-size: 13px;
cursor: none;
transition: background var(--dur-base) var(--ease-out);
}
.subscribe button:hover { background: var(--blue-300); }
.footer-wordmark {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(48px, 10vw, 140px);
line-height: 0.85;
letter-spacing: -0.05em;
text-align: center;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--fg-3);
text-transform: uppercase;
user-select: none;
padding: 40px 0 0.14em;
position: relative;
z-index: 2;
overflow-x: clip;
overflow-y: visible;
}
.footer-wordmark .dot-accent { color: var(--signal); -webkit-text-stroke: 0; }
.footer-bottom {
display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
padding: 32px 0 0;
margin-top: 40px;
border-top: 1px solid var(--border-1);
font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); text-transform: uppercase; letter-spacing: var(--tracking-caps);
position: relative; z-index: 2;
}
.footer-bottom .legal { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-bottom a { color: var(--fg-4); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
.footer-bottom a:hover { color: var(--signal); }
[data-theme="light"] .footer { background: var(--ink-100); }
[data-theme="light"] .footer::before { background-image: radial-gradient(circle at 1px 1px, rgba(10,12,17,0.10) 1px, transparent 0); }
/* ---------------- HEADER NAV: seven items ---------------- */
/* One authoritative breakpoint for the whole site: the seven-item row
shows above 1080px, the burger menu owns everything below it. */
@media (max-width: 1080px) {
.nav-links { display: none !important; }
.nav .nav-cta { display: none !important; }
.nav-burger { display: inline-flex !important; }
}
.nav-links { gap: 22px; }
@media (max-width: 1320px) { .nav-links { gap: 18px; } .nav-links a { font-size: 13.5px; } }
@media (max-width: 1180px) { .nav-links { gap: 14px; } .nav-links a { font-size: 13px; } .nav-cta { padding: 10px 13px; font-size: 12.5px; } }
.nav-links a { white-space: nowrap; }
.nav-links a .out { width: 10px; height: 10px; opacity: 0.5; flex: none; }
.nav-links a:hover .out { opacity: 1; }
.om-footer .place{color:var(--fg-2)}
.om-footer .legal span{color:var(--fg-3)}
/* v2 footer: service pages indented under Services */
.footer-col li.ft-sub a{padding-left:14px;font-size:.94em}
/* legal row (v2 footer) */
.footer-bottom .ft-co{margin:0;max-width:72ch;line-height:1.55}
.footer-bottom .legal a{color:inherit;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.footer-bottom .legal a:hover,.footer-bottom .legal a[aria-current="page"]{color:var(--fg-1);text-decoration:underline;text-underline-offset:3px}
.footer-bottom .legal a:focus-visible{outline:2px solid var(--ck-sig,#3AA0D2);outline-offset:2px}
.lg-miss{padding:1px 6px;border-radius:4px;background:color-mix(in srgb,#F5A524 22%,transparent);border:1px solid #F5A524;color:var(--fg-1);font:600 .82em var(--font-mono,monospace)}
/* ==== conversion-kit.css ==== */
/* OUNTERNET conversion kit. One stylesheet, drop into any page after tokens-v2.css.
Uses tokens-v2 only. Signal blue for action, never green (green is reserved for verified metrics). */
:root{--ck-sig:var(--signal,#3AA0D2);--ck-sig-hover:var(--blue-300,#6FBBE0);--ck-on:#05131D;--ck-err:#FF9A8F;--ck-panel:color-mix(in srgb,var(--surface) 72%,transparent);--ck-panel-solid:var(--surface-raised)}
[data-theme="light"]{--ck-sig:#016095;--ck-sig-hover:#064A74;--ck-on:#FFFFFF;--ck-err:#B42318;--ck-panel:color-mix(in srgb,var(--surface) 88%,transparent)}
[data-ck] [hidden],.ck-overlay [hidden],.ck-demo [hidden]{display:none!important}
.ck-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ck-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ck-eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--fg-3);display:inline-flex;align-items:center;gap:10px;margin:0}
.ck-eyebrow::before{content:"";width:24px;height:1px;background:currentColor}
.ck-eyebrow--sig{color:var(--ck-sig)}
.ck-h2{font-family:var(--font-display);font-weight:800;font-size:clamp(32px,4.6vw,64px);line-height:.98;letter-spacing:-.035em;text-transform:uppercase;color:var(--fg-1);margin:0;text-wrap:balance}
.ck-lede{color:var(--fg-2);font-size:clamp(15px,1.2vw,17px);line-height:1.6;max-width:56ch;margin:0;text-wrap:pretty}
.ck :focus-visible,.ck-btn:focus-visible,.ck-phone:focus-visible,.ck-mbar a:focus-visible,.ck-chip:has(input:focus-visible),.ck-demo button:focus-visible{outline:2px solid var(--ck-sig);outline-offset:3px}
/* Buttons */
.ck-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 22px;border-radius:var(--radius-sm);border:1px solid transparent;font-family:var(--font-sans);font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);text-align:center}
body[style*="cursor: none"] .ck-btn,body.ck-nocursor .ck-btn{cursor:none}
.ck-btn:hover{text-decoration:none}
.ck-btn--primary{background:var(--ck-sig);border-color:var(--ck-sig);color:var(--ck-on)}
.ck-btn--primary:hover{background:var(--ck-sig-hover);border-color:var(--ck-sig-hover);color:var(--ck-on)}
.ck-btn--ghost{background:transparent;border-color:var(--border-strong);color:var(--fg-1)}
.ck-btn--ghost:hover{border-color:var(--fg-1);color:var(--fg-1)}
.ck-btn--link{background:none;border:0;padding:12px 2px;color:var(--ck-sig);text-decoration:underline;text-underline-offset:4px;min-height:44px;font-weight:500}
.ck-btn--link:hover{color:var(--fg-1)}
.ck-btn[disabled]{opacity:.7;cursor:progress}
.ck-btn svg{width:16px;height:16px;flex:none}
.ck-wa-ico{width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:url("/assets/si/whatsapp.svg") center/contain no-repeat;mask:url("/assets/si/whatsapp.svg") center/contain no-repeat}
.ck-spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:ckspin .8s linear infinite;flex:none}
@keyframes ckspin{to{transform:rotate(360deg)}}
.ck-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* C3 + C4: capacity pill, one-line note, trust row. No box; sits under the CTA row and never wider than it. */
.ck-under{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:18px;min-width:0}
.ck-capacity{display:inline-flex;align-items:center;gap:9px;height:36px;margin:0;padding:0 16px 0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(10,14,26,.55);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);font-family:var(--font-sans);font-size:13.5px;font-weight:500;line-height:1;color:#EEF2F8;white-space:nowrap}
.ck-cap-dot{position:relative;width:7px;height:7px;border-radius:50%;background:#2DD4BF;flex:none}
.ck-cap-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2DD4BF;opacity:.55;animation:ckpulse 2.4s ease-out infinite}
@keyframes ckpulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}
.ck-cap-note{margin:0;font-family:var(--font-sans);font-size:14px;line-height:1.45;color:rgba(255,255,255,.72);text-wrap:pretty;text-shadow:0 1px 2px rgba(5,7,11,.55)}
.ck-trust-wrap{overflow:hidden;max-width:100%}
.ck-trust{list-style:none;margin:0 0 0 -11px;padding:0;display:flex;flex-wrap:wrap;row-gap:6px;font-family:var(--font-sans);font-size:13px;line-height:1.3;color:rgba(255,255,255,.78);text-shadow:0 1px 2px rgba(5,7,11,.55)}
.ck-trust li{display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-left:1px solid rgba(255,255,255,.22);white-space:nowrap}
.ck-tick{width:13px;height:13px;flex:none;color:#2DD4BF}
[data-theme="light"] .ck-capacity{background:rgba(255,255,255,.78);border-color:rgba(10,14,26,.1);color:var(--fg-1)}
[data-theme="light"] .ck-cap-note{color:var(--fg-2);text-shadow:none}
[data-theme="light"] .ck-trust{color:var(--fg-2);text-shadow:none}
[data-theme="light"] .ck-trust li{border-left-color:var(--border-strong)}
[data-theme="light"] .ck-tick{color:#0F8F80}
/* Off-photo placements (final CTA band, Apply aside, Contact): same shape, token colours */
.ck-final .ck-cap-note,.ck-aside .ck-cap-note{color:var(--fg-2);text-shadow:none}
.ck-final .ck-trust,.ck-aside .ck-trust{color:var(--fg-2);text-shadow:none}
.ck-final .ck-capacity,.ck-aside .ck-capacity{background:color-mix(in srgb,var(--surface) 70%,transparent);border-color:var(--border-1);color:var(--fg-1)}
/* Over photography (page heroes): a feathered, borderless dark halo keeps every glyph at 4.5:1 or better,
even over the brightest pixel of the image. It reads as shade, not a box. */
.hero .ck-under,.ck-on-photo .ck-under{position:relative;isolation:isolate}
.hero .ck-under::before,.ck-on-photo .ck-under::before{content:"";position:absolute;inset:-44px -56px -44px -52px;z-index:-1;background:rgba(5,7,11,.8);filter:blur(22px);border-radius:48px;pointer-events:none}
[data-theme="light"] .hero .ck-under::before,[data-theme="light"] .ck-on-photo .ck-under::before{background:rgba(255,255,255,.84)}
@media (prefers-reduced-motion:reduce){.ck-cap-dot::after{animation:none;opacity:0}}
/* Panels (C2, forms, dialogs) */
.ck-panel{border:1px solid var(--border-1);background:var(--ck-panel);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-radius:var(--radius-md);padding:clamp(20px,2.6vw,32px)}
/* C2 call deliverable card */
.ck-deliver h2,.ck-deliver h3{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em;line-height:1.15;color:var(--fg-1);margin:0 0 18px}
.ck-deliver ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:ckd}
.ck-deliver li{counter-increment:ckd;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;color:var(--fg-2);font-size:15px;line-height:1.55}
.ck-deliver li::before{content:counter(ckd,decimal-leading-zero);font-family:var(--font-mono);font-size:11px;color:var(--ck-sig);padding-top:4px}
.ck-deliver li b{color:var(--fg-1);font-weight:600}
.ck-deliver-foot{margin:20px 0 0;padding-top:16px;border-top:1px dashed var(--border-1);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
/* Form fields */
.ck-form{display:flex;flex-direction:column;gap:18px}
.ck-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;align-items:start}
.ck-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.ck-field>label,.ck-label{font-size:14px;font-weight:600;color:var(--fg-1)}
.ck-label .opt,.ck-field>label .opt{font-weight:400;color:var(--fg-3)}
.ck-input{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--fg-1);font-family:var(--font-sans);font-size:16px;line-height:1.4}
textarea.ck-input{min-height:96px;resize:vertical}
.ck-input:focus{outline:none;border-color:var(--ck-sig);box-shadow:var(--ring-focus)}
.ck-input[aria-invalid="true"]{border-color:var(--ck-err)}
.ck-input:disabled{opacity:.5}
.ck-help{margin:0;font-size:13px;line-height:1.5;color:var(--fg-3)}
.ck-err{margin:0;font-size:13px;line-height:1.45;color:var(--ck-err);font-weight:500;display:flex;gap:6px}
.ck-err::before{content:"!";font-family:var(--font-mono);font-weight:700}
.ck-err[hidden]{display:none}
.ck-count{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);align-self:flex-end}
.ck-check{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:14px;color:var(--fg-2);cursor:pointer}
.ck-check input{width:20px;height:20px;accent-color:var(--ck-sig);margin:0;flex:none}
.ck-consent{margin:0;font-size:12.5px;line-height:1.5;color:var(--fg-3)}
.ck-consent a{color:var(--fg-2);text-decoration:underline}
.ck-submit-row{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ck-alert{border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:16px 18px;display:flex;flex-direction:column;gap:12px;font-size:14.5px;line-height:1.5;color:var(--fg-1);background:var(--surface-sunken)}
.ck-alert[hidden]{display:none}
.ck-alert--err{border-color:var(--ck-err)}
.ck-alert--ok{border-color:var(--ck-sig)}
.ck-alert p{margin:0;color:var(--fg-1)}
/* Chips: multi = buttons with aria-pressed, single = radio inputs */
.ck-chips{display:flex;flex-wrap:wrap;gap:10px}
.ck-chip{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 16px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:transparent;color:var(--fg-1);font-family:var(--font-sans);font-size:15px;font-weight:500;cursor:pointer;text-align:left;transition:border-color var(--dur-fast),background var(--dur-fast)}
.ck-chip:hover{border-color:var(--fg-2)}
.ck-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ck-chip .box{width:18px;height:18px;border:1.5px solid var(--fg-3);border-radius:var(--radius-xs);flex:none;display:grid;place-items:center}
.ck-chip--radio .box{border-radius:50%}
.ck-chip[aria-pressed="true"],.ck-chip:has(input:checked){border-color:var(--ck-sig);background:color-mix(in srgb,var(--ck-sig) 12%,transparent)}
.ck-chip[aria-pressed="true"] .box,.ck-chip:has(input:checked) .box{border-color:var(--ck-sig);background:var(--ck-sig)}
.ck-chip[aria-pressed="true"] .box::after{content:"";width:9px;height:5px;border-left:2px solid var(--ck-on);border-bottom:2px solid var(--ck-on);transform:translateY(-1px) rotate(-45deg)}
.ck-chip:has(input:checked) .box::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ck-on)}
.ck-chips--col{flex-direction:column;align-items:stretch}
@media(min-width:640px){.ck-chips--col{flex-direction:row;align-items:center}}
/* C1 application */
.ck-apply{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:960px){.ck-apply{grid-template-columns:minmax(0,1fr)}}
.ck-app{padding:clamp(20px,3vw,40px);min-height:460px;display:flex;flex-direction:column;gap:24px}
.ck-prog{display:flex;flex-direction:column;gap:10px}
.ck-prog-t{margin:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.ck-prog-bar{height:3px;background:var(--border-1);border-radius:3px;overflow:hidden}
.ck-prog-bar i{display:block;height:100%;background:var(--ck-sig);transition:width var(--dur-slow) var(--ease-out)}
.ck-step{display:flex;flex-direction:column;gap:18px}
.ck-step[hidden]{display:none}
.ck-step-h{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-.025em;color:var(--fg-1);margin:0;text-wrap:balance}
.ck-step-h:focus{outline:none}
.ck-step-h:focus-visible{outline:2px solid var(--ck-sig);outline-offset:6px}
.ck-step-h .opt{font-weight:500;color:var(--fg-3);font-size:.7em;letter-spacing:0}
.ck-app-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:auto;padding-top:8px}
.ck-app-nav .ck-btn--primary{min-width:160px}
.ck-screen{display:flex;flex-direction:column;gap:18px}
.ck-screen[hidden]{display:none}
.ck-proc{display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);font-weight:700;color:var(--fg-1)}
.ck-proc .ck-spin{width:24px;height:24px}
.ck-cal{border:1px solid var(--border-1);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-sunken)}
.ck-cal iframe{display:block;width:100%;height:680px;border:0}
.ck-cal-empty{padding:28px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;border:1px dashed var(--border-strong);border-radius:var(--radius-sm)}
.ck-cal-empty .t{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--fg-1);margin:0}
.ck-cal-empty p{margin:0;color:var(--fg-2);font-size:14.5px;line-height:1.55;max-width:52ch}
.ck-aside{display:flex;flex-direction:column;gap:20px;position:sticky;top:120px}
@media(max-width:960px){.ck-aside{position:static}}
.ck-aside .ck-under{margin-top:0;padding:0 4px}
/* C5 risk reversal */
.ck-risk{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.ck-risk-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border-1)}
@media(max-width:1100px){.ck-risk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ck-risk-grid{grid-template-columns:minmax(0,1fr)}}
.ck-risk-grid li{padding:24px 24px 24px 0;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--border-2)}
@media(min-width:621px){.ck-risk-grid li+li{padding-left:24px;border-left:1px solid var(--border-2)}.ck-risk-grid li:nth-child(3){border-left:0;padding-left:0}}
@media(min-width:1101px){.ck-risk-grid li:nth-child(3){border-left:1px solid var(--border-2);padding-left:24px}}
.ck-risk-grid .n{font-family:var(--font-mono);font-size:11px;color:var(--ck-sig);letter-spacing:.08em}
.ck-risk-grid b{font-family:var(--font-display);font-size:18px;line-height:1.25;font-weight:700;color:var(--fg-1);letter-spacing:-.01em}
.ck-risk-grid p{margin:0;font-size:14.5px;line-height:1.55;color:var(--fg-2)}
/* C6 visibility check */
.ck-vis{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:900px){.ck-vis{grid-template-columns:minmax(0,1fr)}}
.ck-vis-copy{display:flex;flex-direction:column;gap:16px}
.ck-vis-t{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,40px);line-height:1.02;letter-spacing:-.03em;text-transform:uppercase;color:var(--fg-1);margin:0;text-wrap:balance}
.ck-vis--compact{grid-template-columns:minmax(0,1fr);gap:16px}
.ck-vis--compact .ck-vis-t{font-size:clamp(20px,2vw,24px);text-transform:none;letter-spacing:-.02em;font-weight:700}
/* C7 exit intent dialog */
.ck-overlay{position:fixed;inset:0;z-index:10001;background:rgba(5,7,11,.72);display:grid;place-items:center;padding:20px}
.ck-overlay[hidden]{display:none}
.ck-dialog{width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--ck-panel-solid);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;gap:16px}
.ck-dialog h2{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.6vw,32px);text-transform:uppercase;letter-spacing:-.03em;line-height:1;margin:0;color:var(--fg-1)}
.ck-dialog h2:focus{outline:none}
.ck-dialog-close{align-self:flex-start}
/* C8 header phone */
.ck-phone{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;justify-content:center;padding:0 8px;color:var(--fg-2);font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;text-decoration:none;white-space:nowrap;border-radius:var(--radius-sm)}
.ck-phone:hover{color:var(--ck-sig);text-decoration:none}
.ck-phone svg{width:16px;height:16px;flex:none}
@media(max-width:1279px){.ck-phone .num{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* C9 sticky mobile bar */
.ck-mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:97;padding-bottom:env(safe-area-inset-bottom);grid-template-columns:1fr 1fr;border-top:1px solid var(--border-strong);background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ck-mbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px;font-size:14px;font-weight:600;text-decoration:none;color:var(--fg-1)}
.ck-mbar .apply{background:var(--ck-sig);color:var(--ck-on)}
.ck-mbar--solo{grid-template-columns:1fr}
@media(max-width:767px){.ck-mbar{display:grid}body.ck-has-mbar{padding-bottom:calc(56px + env(safe-area-inset-bottom))}body.ck-app-open .ck-mbar{display:none}body.ck-app-open.ck-has-mbar{padding-bottom:0}}
/* C11 FAQ */
.ck-faq{max-width:860px;border-top:1px solid var(--border-1)}
.ck-faq-item{border-bottom:1px solid var(--border-1)}
.ck-faq-q{margin:0;font:inherit}
.ck-faq-q button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:18px 2px;background:none;border:0;color:var(--fg-1);font-family:var(--font-display);font-weight:700;font-size:clamp(16px,1.5vw,20px);letter-spacing:-.01em;text-align:left;cursor:pointer}
.ck-faq-q button:hover{color:var(--ck-sig)}
.ck-faq-q .ico{font-family:var(--font-mono);color:var(--ck-sig);font-size:20px;flex:none;width:20px;text-align:center}
.ck-faq-a{padding:0 2px 22px;color:var(--fg-2);font-size:15px;line-height:1.6;max-width:64ch}
.ck-faq-a p{margin:0}
.ck-faq-a[hidden]{display:none}
/* C12 testimonials */
.ck-testi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.ck-testi figure{margin:0;display:flex;flex-direction:column;gap:14px}
.ck-testi blockquote{margin:0;font-size:16.5px;line-height:1.55;color:var(--fg-1)}
.ck-testi figcaption{font-size:13px;color:var(--fg-3);display:flex;flex-direction:column;gap:3px}
.ck-testi figcaption strong{color:var(--fg-1)}
.ck-testi .res{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
/* C13 article inline CTA */
.ck-inline{margin:40px 0;padding:clamp(20px,2.6vw,28px)}
.ck-inline-t{margin:0 0 14px;font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.25;color:var(--fg-1)}
.ck-inline .ck-ctas{margin-top:14px}
/* Final CTA band */
.ck-final{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:960px){.ck-final{grid-template-columns:minmax(0,1fr)}}
.ck-final-copy{display:flex;flex-direction:column;gap:20px}
.ck-final .ck-h2 .sig{color:var(--ck-sig)}
/* Demo switch (review only) */
.ck-demo{position:fixed;right:16px;bottom:16px;z-index:10002;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:8px}
@media(max-width:767px){.ck-demo{bottom:calc(16px + env(safe-area-inset-bottom))}body.ck-has-mbar:not(.ck-app-open) .ck-demo{bottom:72px}}
.ck-demo>button{min-height:44px;padding:10px 14px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);background:var(--ck-panel-solid);color:var(--fg-2);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.ck-demo-menu{display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--ck-panel-solid);border:1px solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg)}
.ck-demo-menu[hidden]{display:none}
.ck-demo-menu button{min-height:44px;padding:8px 14px;text-align:left;background:none;border:0;border-radius:var(--radius-xs);color:var(--fg-1);font-family:var(--font-sans);font-size:14px;cursor:pointer}
.ck-demo-menu button:hover{background:var(--bg-muted)}
@media (prefers-reduced-motion:reduce){.ck-spin{animation-duration:2.4s}.ck-prog-bar i,.ck-btn,.ck-chip{transition:none}}
/* Text link: "Apply for [service]" and "Want a plan like this?" lines */
.ck-textlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:20px;color:var(--ck-sig);font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.ck-textlink:hover{color:var(--fg-1)}
.ck-textlink svg{width:14px;height:14px}
.ck-caseline{margin:14px 0 0;font-size:14.5px;color:var(--fg-2)}
.ck-caseline a{color:var(--ck-sig);font-weight:600;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.ck-caseline a:hover{color:var(--fg-1)}
.ck-band{padding:clamp(64px,8vw,128px) 0;border-top:1px solid var(--border-2)}
/* Article rail */
.ck-rail{display:none}
@media(min-width:1280px){.ck-rail{display:block;position:sticky;top:104px;align-self:start}}
.ck-rail-card{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base);padding:20px}
.ck-rail-card.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.ck-rail-card .ck-inline-t{font-size:17px;margin-bottom:14px}
.ck-ctas--col{flex-direction:column;align-items:stretch}
.ck-ctas--col .ck-btn{width:100%}
@media (prefers-reduced-motion:reduce){.ck-rail-card{transition:none;transform:none}}
/* Inline CTAs inside article prose: neutralise prose heading and paragraph spacing */
.prose .ck-inline h2.ck-vis-t,.prose .ck-inline .ck-inline-t{margin:0 0 6px;font-size:clamp(20px,2vw,24px);line-height:1.2}
.prose .ck-inline p{margin:0 0 12px}
.prose .ck-inline .ck-vis{gap:12px}
.prose .ck-inline .ck-form{gap:14px}
.ck-vis-band{padding:clamp(20px,3vw,36px)}.ck-vis-band .ck-panel{border:0;background:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Auto mobile menu (pages without their own) */
.ck-mburger{display:none;width:44px;height:44px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.ck-mburger span{display:block;width:18px;height:1.5px;background:var(--fg-1)}
.ck-mburger:focus-visible{outline:2px solid var(--ck-sig);outline-offset:3px}
@media(max-width:1080px){.ck-mburger{display:inline-flex}}
.ck-mmenu{position:fixed;left:0;right:0;top:84px;z-index:99;padding:16px clamp(20px,4vw,48px) 24px;background:var(--ck-panel-solid);border-bottom:1px solid var(--border-strong);display:flex;flex-direction:column;gap:16px}
.ck-mmenu[hidden]{display:none}
.ck-mmenu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ck-mmenu li a{display:flex;align-items:center;min-height:48px;color:var(--fg-1);font-size:17px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--border-2)}
.ck-mmenu li a[aria-current]{color:var(--ck-sig)}
.nav-links a[aria-current="page"],.m-menu a[aria-current="page"]{color:var(--ck-sig)}
/* ==== hv14-journey-v2.css ==== */
/* hv14 journey v2 css (forked from hv14-journey.css): planet stills use the WebP -v2 textures. */
/* hv14 journey (forked from hv12-journey.css for Homepage v14). Only change: font family set to Roboto (brand book). Sizes, layout, scroll and animation unchanged. */
.jr{--font-display:"Roboto",system-ui,sans-serif;--font-sans:"Roboto",system-ui,sans-serif;--font-mono:"Roboto Mono",ui-monospace,monospace;font-family:"Roboto",system-ui,sans-serif}
/* Roboto sets narrower than Satoshi: tracking opened so every hero line wraps as in v13 */
.jr .jr-title{letter-spacing:.008em}.jr .jr-title--xl{letter-spacing:-.005em}.jr .jr-body{letter-spacing:.009em}.jr .jr-ch[data-ch="5"] .jr-body{letter-spacing:.006em}
/* Homepage v12 journey styles (forked from hv11-journey.css): adds the phone pinned mode (.jr--m) at the end. */
/* Homepage v11: "The OUNTERNET System" hero, forked from hv10-journey.css. Adds nine chapters, the service moon tags, the flagship keycap, the card service lists, the crew link, the system labels and the new CSS planet stills. The stage is always space-dark, in both themes. */
.jr{--nav-h:76px;--fg-1:#F2F5FA;--fg-2:#B9C3D3;--fg-3:#8C98AB;--fg-4:#5E6B80;--bg:#0A0E1A;--border-1:rgba(255,255,255,.1);--border-2:rgba(255,255,255,.1);--border-strong:rgba(255,255,255,.22);position:relative;background:#0A0E1A;color:var(--fg-1)}
.jr-scroll{position:relative}
.jr-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.jr-stage{position:absolute;inset:0;background:#0A0E1A;isolation:isolate}
/* journey length: 9 chapters of 80vh; matches TOTAL and unit in hv11-journey.js */
.jr-steps{height:calc(9 * 80vh);pointer-events:none}
.jr-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:0;transition:opacity .9s var(--ease-out);touch-action:pan-y}
.jr--gl .jr-canvas{opacity:1}
/* chapters: one visible at a time, cross-fading; only real controls take pointer events */
.jr-ch{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility 0s linear .45s}
.jr-ch.is-on{opacity:1;visibility:visible;transition:opacity .45s var(--ease-out),visibility 0s linear 0s}
.jr-ch a,.jr-ch button,.jr-card{pointer-events:auto}
.jr:not(.jr--flat) .jr-ch0{position:absolute;min-height:0;padding-top:calc(var(--nav-h) + 64px);padding-bottom:64px;overflow:hidden}
.jr:not(.jr--flat) .jr-ch0 .hero-headline{font-size:clamp(44px,min(11.5vw,18vh),220px)}
.jr:not(.jr--flat) .jr-ch0 .hero-content{min-height:calc(100svh - var(--nav-h) - 128px);opacity:calc(1 - var(--intro,0));transform:translateY(calc(var(--intro,0) * -48px));will-change:opacity,transform}
.jr--gl .jr-ch0 .hero-visual{opacity:0;transition:opacity .9s var(--ease-out)}
.jr--gl .jr-ch0 .hero-content .hero-lede::before{opacity:.8}
/* glass copy cards, opposite the planet */
.jr-card{position:absolute;top:calc(50% + var(--nav-h) / 2);max-height:calc(100% - var(--nav-h) - 96px);overflow:auto;overscroll-behavior:contain;width:min(440px,calc(100% - 48px));display:flex;flex-direction:column;gap:14px;padding:26px 28px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015)),rgba(10,14,26,.62);border:1px solid rgba(74,158,255,.24);box-shadow:0 30px 70px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);transform:translateY(calc(-50% + 14px));transition:transform .6s var(--ease-out)}
.jr-ch.is-on .jr-card{transform:translateY(-50%)}
.jr-ch[data-side="left"] .jr-card{left:clamp(24px,6vw,104px)}
.jr-ch[data-side="right"] .jr-card{right:clamp(72px,7.5vw,128px)}
.jr-eyebrow{margin:0;font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#7FB8FF}
.jr-ch[data-ch="3"] .jr-eyebrow,.jr-ch[data-ch="4"] .jr-eyebrow,.jr-ch[data-ch="7"] .jr-eyebrow{color:#F5B54A}.jr-ch[data-ch="5"] .jr-eyebrow{color:#6FEAFF}.jr-ch[data-ch="6"] .jr-eyebrow{color:#FF9BC9}
.jr-title{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.1vw,46px);line-height:1.02;letter-spacing:-.03em;color:#fff;text-wrap:balance}
.jr-title--xl{font-size:clamp(34px,4vw,60px)}
.jr-body{margin:0;font-size:16px;line-height:1.55;color:var(--fg-2);text-wrap:pretty}
.jr-links{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:4px}
.jr-links .ck-textlink{margin-top:0}
.jr-more{display:inline-flex;align-items:center;min-height:44px;color:var(--fg-2);font-size:14.5px;text-decoration:underline;text-underline-offset:4px}
.jr-more:hover{color:#fff}
.jr-card--system{gap:18px}
.jr-card--system .btn{align-self:flex-start}
.jr-card--system .ck-capacity,.jr-card--system .ck-trust-wrap{margin:0}
.jr-caption{position:absolute;left:50%;bottom:15vh;transform:translateX(-50%);width:max-content;max-width:calc(100% - 48px);margin:0;padding:10px 18px;border-radius:999px;background:rgba(10,14,26,.55);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--font-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#CFE0F5;text-align:center;text-wrap:balance}
/* chapter rail, skip link, hint */
.jr-rail{position:absolute;right:clamp(12px,1.6vw,24px);top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;padding:0;list-style:none;pointer-events:none}
.jr-rail::before{content:"";position:absolute;top:14px;bottom:14px;left:50%;width:1px;background:rgba(255,255,255,.14);pointer-events:none}
.jr-dot{pointer-events:auto;position:relative;width:28px;height:28px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
.jr-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:#34405A;box-shadow:0 0 0 3px #0A0E1A;transition:transform .2s,background .2s,box-shadow .2s}
.jr-dot:hover::before{background:#8CBFFF}
.jr-dot[aria-current="step"]::before{background:#4A9EFF;transform:scale(1.5);box-shadow:0 0 0 3px #0A0E1A,0 0 12px #4A9EFF}
.jr-dot::after{content:attr(data-name);position:absolute;right:calc(100% + 6px);top:50%;transform:translate(4px,-50%);white-space:nowrap;padding:5px 9px;border-radius:6px;background:rgba(10,14,26,.92);border:1px solid rgba(74,158,255,.3);font:500 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#CFE0F5;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s,visibility 0s linear .15s}
.jr-dot:hover::after,.jr-dot:focus-visible::after{opacity:1;visibility:visible;transform:translate(0,-50%);transition:opacity .15s,transform .15s}
.jr-dot:focus-visible{outline:2px solid #4A9EFF;outline-offset:1px;border-radius:50%}
.jr-skip{position:absolute;top:calc(var(--nav-h) + 14px);right:clamp(16px,3vw,44px);z-index:5;display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:#C3CCDB;font-size:14px;text-decoration:underline;text-underline-offset:4px}
.jr-skip:hover{color:#fff}
.jr-skip:focus-visible{outline:2px solid #4A9EFF;outline-offset:2px;border-radius:4px}
.jr-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;margin:0;display:flex;align-items:center;gap:10px;font:500 10.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:#8C98AB;pointer-events:none;opacity:calc(1 - var(--intro,0) * 3)}
.jr-hint::before{content:"";width:1px;height:18px;background:linear-gradient(#4A9EFF,transparent);transform-origin:top;animation:jrdrip 1.8s ease-in-out infinite}
@keyframes jrdrip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
#after-journey:focus{outline:none}
/* the header keeps "Apply for a call" in view on tablets and up */
@media (min-width:768px){html body .nav .nav-cta{display:inline-flex !important}}
.loader.is-done{pointer-events:none}
/* v4 sets body{overflow-x:hidden}, which makes body a scroll container and breaks position:sticky; clip keeps the same look */
html body{overflow-x:clip}
/* CSS planet stills: the view before the 3D is ready, and the whole view on mobile, reduced motion and no WebGL */
.jr-still{display:none;position:relative;aspect-ratio:1;width:min(52vh,40vw);border-radius:50%;pointer-events:none}
.jr--loading .jr-still,.jr--still .jr-still,.jr--flat .jr-still{display:block}
.jr:not(.jr--flat) .jr-still{position:absolute;top:50%;margin-top:calc(min(52vh,40vw) / -2)}
.jr:not(.jr--flat) .jr-ch[data-side="left"] .jr-still{right:10vw}
.jr:not(.jr--flat) .jr-ch[data-side="right"] .jr-still{left:10vw}
.jr:not(.jr--flat) .jr-still--launch{left:50%;top:22%;margin:0 0 0 calc(min(40vh,34vw) / -2);width:min(40vh,34vw)}
.jr-still--launch{border-radius:0;background:url("assets/agent-ship/sm/eye-ship-exterior.jpg") center/cover no-repeat;-webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent)}
.jr-still--moon{background:radial-gradient(circle at 32% 30%,#F1F4F8 0,#C9CED6 22%,#8C929D 48%,#454A57 70%,#161A26 86%);box-shadow:0 0 80px rgba(180,200,255,.12)}
.jr-still--moon::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 60%,rgba(60,64,76,.55) 0 6%,transparent 7%),radial-gradient(circle at 58% 34%,rgba(70,74,86,.5) 0 4%,transparent 5%),radial-gradient(circle at 46% 72%,rgba(70,74,86,.45) 0 9%,transparent 10%),radial-gradient(circle at 68% 58%,rgba(60,64,76,.4) 0 3%,transparent 4%),radial-gradient(circle at 22% 40%,rgba(70,74,86,.35) 0 3%,transparent 4%)}
.jr-still--mars{background:radial-gradient(circle at 66% 32%,#F4A36A 0,#D9672F 26%,#9C3A17 52%,#4A160A 74%,#140807 88%);box-shadow:0 0 90px 10px rgba(245,120,50,.26)}
.jr-still--mars::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse 30% 12% at 50% 44%,rgba(60,18,8,.5),transparent 70%),radial-gradient(ellipse 18% 9% at 68% 62%,rgba(60,18,8,.45),transparent 70%),radial-gradient(ellipse 22% 6% at 50% 8%,rgba(255,236,226,.7),transparent 70%)}
.jr-still--giant{background:radial-gradient(circle at 34% 30%,rgba(255,240,210,.28),transparent 38%),radial-gradient(circle at 72% 76%,transparent 28%,rgba(10,14,26,.9) 72%),repeating-linear-gradient(8deg,#F5A524 0 6%,#B8621E 6% 10%,#F3D9A4 10% 14%,#8A4A1C 14% 19%,#E08A2A 19% 24%);box-shadow:0 0 90px rgba(245,165,36,.18)}
.jr-still--giant::after{content:"";position:absolute;left:-36%;right:-36%;top:43%;height:16%;border-radius:50%;border:clamp(4px,1.1vw,10px) solid rgba(243,217,164,.5);box-shadow:0 0 0 clamp(3px,.6vw,6px) rgba(184,98,30,.35);transform:rotate(-12deg)}
.jr-still--system{border-radius:50%;background:radial-gradient(circle,rgba(255,214,150,.9) 0,rgba(245,165,36,.35) 7%,transparent 20%),conic-gradient(from 20deg,transparent,rgba(74,158,255,.4),transparent 22%,rgba(45,212,191,.25),transparent 45%,rgba(74,158,255,.4),transparent 70%,rgba(156,200,255,.3),transparent 90%);-webkit-mask:radial-gradient(circle,#000 25%,transparent 70%);mask:radial-gradient(circle,#000 25%,transparent 70%)}
.jr-still--system::after{content:"";position:absolute;inset:22% 8%;border-radius:50%;border:2px dotted rgba(125,185,255,.7);transform:rotate(-14deg)}
/* stacked chapters: mobile, reduced motion, no WebGL */
.jr--flat .jr-pin{position:static;height:auto;overflow:visible}
.jr--flat .jr-stage{position:relative;inset:auto}
.jr--flat .jr-canvas,.jr--flat .jr-rail,.jr--flat .jr-skip,.jr--flat .jr-hint,.jr--flat .jr-steps{display:none}
.jr--flat .jr-ch{position:relative;inset:auto;opacity:1;visibility:visible;pointer-events:auto}
.jr--flat .jr-ch:not(.jr-ch0){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;padding:96px 20px;overflow:hidden;border-top:1px solid rgba(255,255,255,.06);background-color:#0A0E1A;background-image:radial-gradient(1.2px 1.2px at 14% 22%,rgba(255,255,255,.75),transparent 70%),radial-gradient(1px 1px at 72% 12%,rgba(200,220,255,.6),transparent 70%),radial-gradient(1px 1px at 38% 68%,rgba(255,255,255,.5),transparent 70%),radial-gradient(1.4px 1.4px at 86% 78%,rgba(255,236,200,.6),transparent 70%),radial-gradient(1px 1px at 56% 42%,rgba(200,220,255,.45),transparent 70%);background-size:260px 260px}
.jr--flat .jr-card{position:relative;top:auto;left:auto!important;right:auto!important;transform:none!important;width:100%;max-width:520px}
.jr--flat .jr-still{flex:none;width:min(66vw,320px);will-change:transform}
.jr--flat .jr-still--launch{width:min(82vw,420px);aspect-ratio:16/9}
.jr--flat .jr-still--giant{margin-inline:clamp(40px,12vw,110px)}
.jr--flat .jr-caption{position:static;transform:none;width:auto;white-space:normal}
.jr--flat .jr-card{opacity:1;transition:opacity .7s var(--ease-out)}
.jr--flat .jr-ch.is-pending .jr-card,.jr--flat .jr-ch.is-pending .jr-still{opacity:0}
.jr--flat .jr-ch .jr-still{transition:opacity .7s var(--ease-out)}
.jr--reduce .jr-ch:not(.jr-ch0){min-height:100vh;min-height:100svh}
@media (min-width:768px){.jr--flat .jr-ch:not(.jr-ch0){flex-direction:row;gap:clamp(40px,6vw,96px)}.jr--flat .jr-ch[data-side="right"]:not(.jr-ch0){flex-direction:row-reverse}.jr--flat .jr-ch[data-ch="1"]{flex-direction:column}}
@media (max-height:820px){.jr:not(.jr--flat) .jr-ch0{padding-top:calc(var(--nav-h) + 40px);padding-bottom:44px}.jr:not(.jr--flat) .jr-ch0 .hero-content{gap:18px;min-height:calc(100svh - var(--nav-h) - 84px)}.jr:not(.jr--flat) .jr-ch0 .hero-meta{display:none}.jr:not(.jr--flat) .jr-ch0 .hero-headline{font-size:clamp(40px,min(10vw,14vh),160px)}.jr:not(.jr--flat) .jr-ch0 .cred-strip{padding-top:10px!important}}
@media (max-height:700px){.jr-hint{display:none}.jr:not(.jr--flat) .jr-ch0{padding-top:calc(var(--nav-h) + 20px);padding-bottom:16px}.jr:not(.jr--flat) .jr-ch0 .hero-content{gap:12px;min-height:calc(100svh - var(--nav-h) - 36px)}.jr:not(.jr--flat) .jr-ch0 .hero-headline{font-size:clamp(36px,min(9vw,11vh),120px)}.jr:not(.jr--flat) .jr-ch0 .hero-lede{font-size:14px;line-height:1.45}.jr:not(.jr--flat) .jr-ch0 .hero-bottom{gap:16px}.jr:not(.jr--flat) .jr-ch0 .cred-strip{padding:8px 20px 4px!important}.jr:not(.jr--flat) .jr-ch0 .cred-item .value{font-size:14px}.jr:not(.jr--flat) .jr-ch0 .ck-cap-note{display:none}}
@media (max-width:1100px){.jr:not(.jr--flat) .jr-card{width:min(400px,calc(100% - 120px))}}
@media (prefers-reduced-motion:reduce){.jr-hint::before{animation:none}.jr-card,.jr-ch.is-on .jr-card{transition:none}}
/* v10: the hero keeps "Apply for a call" in the header (rule above); between 1221 and 1280 that needs a little more room next to the Industries tab */
@media (min-width:1221px) and (max-width:1280px){.nav-links{gap:14px!important}.nav-logo .logo-img{height:60px!important}}
/* ===== v11 ===== */
.jr-svc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.jr-svc a{display:flex;align-items:center;gap:10px;min-height:42px;padding:6px 10px;margin:0 -10px;border-radius:10px;color:#DDE5F0;text-decoration:none;font-size:15px;line-height:1.3;transition:background .15s,color .15s}
.jr-svc a:hover{background:rgba(255,255,255,.06);color:#fff}
.jr-svc a:focus-visible{outline:2px solid #4A9EFF;outline-offset:0}
.jr-svc a svg{width:14px;height:14px;margin-left:auto;flex:none;opacity:.55}
.jr-svc .is-flag a{font-weight:700;color:#fff}
.jr-flag{display:inline-flex;align-items:center;margin-left:8px;padding:3px 6px 2px;border-radius:5px;background:linear-gradient(#2A3346,#161C29);border:1px solid rgba(255,255,255,.22);box-shadow:0 2px 0 #05070C,inset 0 1px 0 rgba(255,255,255,.14);font:600 9.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#FFD9B0;font-style:normal;white-space:nowrap}
.jr-crew{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:44px;padding:5px 16px 5px 5px;border-radius:999px;border:1px solid rgba(64,232,255,.35);background:rgba(64,232,255,.08);color:#CFF8FF;font-size:14px;font-weight:600;text-decoration:none}
.jr-crew:hover{background:rgba(64,232,255,.16);color:#fff}
.jr-crew img{width:60px;height:32px;object-fit:cover;object-position:62% 40%;border-radius:999px}
.jr-ctas{display:flex;flex-wrap:wrap;gap:10px}
.jr-ctas .btn{align-self:auto}
/* moon tags: placed over their moons by hv11-scene.js */
.jr-moons,.jr-sys-tags{position:absolute;inset:0;pointer-events:none;z-index:3}.jr-sys-tags{z-index:1}.jr-ch .jr-card{z-index:2}
.jr-moon{position:absolute;left:0;top:0;width:0;height:0;--mr:14px;pointer-events:none;text-decoration:none;color:#fff;transition:opacity .25s}
.jr-moon::before{content:"";position:absolute;left:0;top:0;width:max(44px,calc(var(--mr) * 2 + 10px));height:max(44px,calc(var(--mr) * 2 + 10px));transform:translate(-50%,-50%);border-radius:50%;pointer-events:auto;cursor:pointer}
.jr-moon-c{position:absolute;left:calc(var(--mr) + 10px);top:var(--dy,0px);transform:translateY(-50%);display:flex;flex-direction:column;gap:0;padding:7px 12px;border-radius:999px;background:rgba(10,14,26,.74);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:auto;white-space:nowrap;transition:border-color .2s,border-radius .2s,padding .2s,background .2s}
.jr-moon.is-left .jr-moon-c{left:auto;right:calc(var(--mr) + 10px)}
.jr-moon-n{display:flex;align-items:center;font-size:13px;font-weight:600;color:#fff}
.jr-moon-x{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .25s,opacity .2s}
.jr-moon-x>span{overflow:hidden;display:flex;flex-direction:column;gap:6px;min-height:0}
.jr-moon-x i{font-style:normal;font-size:12.5px;color:#B9C3D3;white-space:normal;width:220px;padding-top:6px}
.jr-moon-x b{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#FF8A73;font-weight:600}
.jr-moon:hover .jr-moon-c,.jr-moon:focus-visible .jr-moon-c{border-color:rgba(255,106,85,.6);border-radius:14px;background:rgba(10,14,26,.9)}
.jr-moon:hover .jr-moon-x,.jr-moon:focus-visible .jr-moon-x{grid-template-rows:1fr;opacity:1}
.jr-moon:focus-visible{outline:none}
.jr-moon:focus-visible .jr-moon-c{box-shadow:0 0 0 2px #4A9EFF}
.jr-moon:hover,.jr-moon:focus-visible{z-index:2}
.jr-moon.is-behind{opacity:.38}
.jr-moon.is-under{opacity:0;visibility:hidden}
.jr-sys-tag{position:absolute;left:0;top:0;width:0;height:0}
.jr-sys-tag span{position:absolute;left:0;top:0;transform:translateX(-50%);white-space:nowrap;padding:4px 8px;border-radius:6px;background:rgba(10,14,26,.6);border:1px solid rgba(255,255,255,.12);font:500 10.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#CFE0F5}
.jr--flat .jr-moons,.jr--flat .jr-sys-tags,.jr--loading .jr-moons,.jr--still .jr-moons,.jr--loading .jr-sys-tags,.jr--still .jr-sys-tags{display:none}
/* new CSS stills */
.jr-still--automate{background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.2),transparent 40%),radial-gradient(circle at 70% 75%,transparent 30%,rgba(4,10,20,.88) 72%),url("assets/planets/planet-automate-tex-v2.webp") 35% center/220% 100%;box-shadow:0 0 90px rgba(64,232,255,.32)}
.jr-still--automate::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(0deg,transparent 0 11%,rgba(111,234,255,.45) 11% 11.6%),repeating-linear-gradient(90deg,transparent 0 9%,rgba(111,234,255,.35) 9% 9.5%);-webkit-mask:radial-gradient(circle at 40% 40%,#000 30%,transparent 72%);mask:radial-gradient(circle at 40% 40%,#000 30%,transparent 72%)}
.jr-still--create{background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.22),transparent 40%),radial-gradient(circle at 70% 75%,transparent 30%,rgba(12,6,20,.86) 72%),url("assets/planets/planet-create-tex-v2.webp") 40% center/220% 100%;box-shadow:0 0 90px rgba(255,111,181,.3)}
.jr-still--star{background:radial-gradient(circle,#FFF6E4 0,#FFD08A 18%,#F5A524 30%,rgba(245,165,36,.25) 46%,transparent 66%)}
.jr-still--star::before,.jr-still--star::after{content:"";position:absolute;border-radius:50%;border:1px dashed rgba(207,224,245,.45)}
.jr-still--star::before{inset:14%}
.jr-still--star::after{inset:2%;border-style:dotted}
/* ===== v12: phones get the pinned, scroll-driven journey (.jr--m). Planet on top, card below, dots on the side. ===== */
.loader{pointer-events:none}
.jr--m .jr-pin{height:100vh;height:100svh}
.jr--m .jr-card{overflow:visible;max-height:none;overscroll-behavior:auto}
.jr--m .jr-ch:not(.jr-ch0) .jr-still{position:absolute;left:50%!important;right:auto!important;top:calc(var(--nav-h) + 56px);margin:0;--sz:clamp(110px,min(58vw,calc(100svh - var(--nav-h) - var(--cardh,300px) - 92px)),300px);width:var(--sz);transform:translateX(-50%) scale(calc(.82 + var(--cp,0) * .24)) rotate(calc(var(--cp,0) * 10deg));transition:none;will-change:transform}
.jr--m .jr-ch[data-ch="1"] .jr-still--launch{top:calc(var(--nav-h) + 60px);--sz:min(88vw,calc((100svh - var(--nav-h) - 200px) * 1.6));aspect-ratio:16/10;transform:translateX(-50%) translateY(calc(var(--cp,0) * -40px)) scale(calc(.9 + var(--cp,0) * .2))}
.jr--m .jr-ch[data-ch="1"] .jr-caption{left:16px;right:16px;bottom:calc(36px + env(safe-area-inset-bottom));transform:none;width:auto;white-space:normal;font-size:11.5px}
.jr--m .jr-still--giant::after{border-width:5px}
.jr--m .jr-card{left:12px!important;right:46px!important;width:auto;top:auto;bottom:calc(12px + env(safe-area-inset-bottom));padding:16px 16px 14px;gap:9px;border-radius:16px;transform:translateY(18px)}
.jr--m .jr-ch.is-on .jr-card{transform:none}
.jr--m .jr-title{font-size:clamp(23px,6.6vw,28px)}
.jr--m .jr-title--xl{font-size:clamp(26px,7.6vw,32px)}
.jr--m .jr-eyebrow{font-size:10.5px;letter-spacing:.14em}
.jr--m .jr-body{font-size:14.5px;line-height:1.5}
.jr--m .jr-svc a{min-height:44px;font-size:14.5px;padding:4px 10px}
.jr--m .jr-card .ck-textlink,.jr--m .jr-crew{min-height:44px}
.jr--m .jr-card--system .btn{flex:1 1 100%;justify-content:center}
.jr--m .jr-card--system [data-ck="trust"]{display:none}
.jr--m .jr-rail{right:4px;gap:0}
.jr--m .jr-dot{width:30px;height:30px}
.jr--m .jr-dot::after{display:none}
.jr--m .jr-skip{top:calc(var(--nav-h) + 6px);right:10px;min-height:44px;padding:0 10px;border-radius:999px;background:rgba(10,14,26,.6);border:1px solid rgba(255,255,255,.14);text-decoration:none;font-size:13px}
.jr--m .jr-ch0{padding-top:calc(var(--nav-h) + 12px)!important;padding-bottom:12px!important}
.jr--m .jr-ch0 .hero-content{min-height:calc(100svh - var(--nav-h) - 24px)!important;gap:14px!important;padding-right:30px}
.jr--m .jr-ch0 .hero-meta{display:none}
.jr--m .jr-ch0 .hero-lede{font-size:14.5px;line-height:1.5}
.jr--m .jr-ch0 .cred-strip{padding:8px 14px 4px!important;margin:0 -14px!important}
.jr--m .jr-ch0 .hero-visual img{object-position:46% 60%}
.jr--m .jr-hint{bottom:calc(8px + env(safe-area-inset-bottom))}
@media (max-height:700px){.jr--m .jr-ch0 .cred-strip{display:none}.jr--m .jr-body{font-size:13.5px}.jr--m .jr-card{gap:7px;padding:13px 14px 10px}}
/* ==== consent-v1.css ==== */
/* OUNTERNET consent v1: banner, preferences dialog, embed gate. Tokens from tokens-v2.css with safe fallbacks. */
.cc-banner,.cc-dlg,.cc-gate{--cc-fg:var(--fg-1,#F2F5F9);--cc-fg2:var(--fg-2,#C4CCD6);--cc-bd:var(--border-strong,#3A4250);--cc-sig:var(--ck-sig,#3AA0D2);font-family:var(--font-sans,system-ui,sans-serif);color:var(--cc-fg)}
.cc-banner{position:fixed;left:16px;bottom:16px;z-index:9990;width:min(440px,calc(100vw - 32px));padding:22px 22px 20px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--cc-bd);border-radius:var(--radius-md,14px);background:color-mix(in srgb,var(--surface,#11151C) 90%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.cc-banner[hidden],.cc-dlg-wrap[hidden]{display:none!important}
.cc-title{margin:0;font-family:var(--font-display,inherit);font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1.25;color:var(--cc-fg)}
.cc-body{margin:0;font-size:15px;line-height:1.55;color:var(--cc-fg2)}
.cc-body a,.cc-links a{color:var(--cc-fg);text-decoration:underline;text-underline-offset:3px}
.cc-body a:hover,.cc-links a:hover{color:var(--cc-sig)}
.cc-links{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.cc-gpc{margin:0;padding:8px 12px;border-radius:8px;border:1px solid color-mix(in srgb,var(--cc-sig) 50%,transparent);font-size:14px;line-height:1.45;color:var(--cc-fg)}
.cc-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.cc-btn{min-height:46px;padding:10px 12px;border:1px solid var(--cc-fg2);border-radius:var(--radius-sm,10px);background:var(--surface-sunken,rgba(255,255,255,.04));color:var(--cc-fg);font:600 14.5px/1.2 var(--font-sans,system-ui,sans-serif);cursor:pointer;transition:border-color .15s,background .15s}
.cc-btn:hover{border-color:var(--cc-fg);background:color-mix(in srgb,var(--cc-fg) 8%,transparent)}
.cc-btn:focus-visible,.cc-sw:focus-visible,.cc-see:focus-visible,.cc-x:focus-visible,.cc-links a:focus-visible,.cc-body a:focus-visible,.cc-gate-link:focus-visible{outline:2px solid var(--cc-sig);outline-offset:3px}
.cc-btn--sig{background:var(--cc-sig);border-color:var(--cc-sig);color:var(--ck-on,#05131D)}
.cc-btn--sig:hover{background:var(--ck-sig-hover,var(--cc-sig));border-color:var(--ck-sig-hover,var(--cc-sig))}
@media (max-width:767px){
.cc-banner{left:0;right:0;bottom:0;width:100%;border-radius:16px 16px 0 0;border-left:0;border-right:0;border-bottom:0;padding:18px 18px calc(16px + env(safe-area-inset-bottom))}
body.cc-open .ck-mbar{bottom:var(--cc-h,0px)}
.cc-btns{grid-template-columns:1fr 1fr 1fr}
.cc-btn{font-size:14px;padding:10px 6px}
}
/* dialog */
.cc-dlg-wrap{position:fixed;inset:0;z-index:10010;display:flex;align-items:center;justify-content:center;padding:16px}
.cc-scrim{position:absolute;inset:0;background:rgba(5,8,14,.55)}
.cc-dlg{position:relative;width:min(620px,100%);max-height:min(88vh,860px);overflow:auto;padding:24px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--cc-bd);border-radius:var(--radius-md,14px);background:var(--surface,#11151C);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.cc-dlg:focus{outline:none}
.cc-dlg-h{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cc-dlg-h h2{margin:0;font-family:var(--font-display,inherit);font-weight:700;font-size:22px;color:var(--cc-fg)}
.cc-x{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--cc-bd);border-radius:var(--radius-sm,10px);background:transparent;color:var(--cc-fg);cursor:pointer}
.cc-x svg{width:16px;height:16px}
.cc-rows{display:flex;flex-direction:column}
.cc-row{padding:14px 0;border-top:1px solid var(--border-1,#262C36);display:flex;flex-direction:column;gap:6px}
.cc-row-t{display:flex;align-items:center;gap:12px}
.cc-row-t h3{margin:0;flex:1;font-size:16px;font-weight:600;color:var(--cc-fg)}
.cc-row p{margin:0;font-size:14.5px;line-height:1.5;color:var(--cc-fg2)}
.cc-always{font:500 12.5px var(--font-mono,ui-monospace,monospace);color:var(--cc-fg2)}
.cc-sw{position:relative;flex:none;width:52px;height:30px;margin:7px 0;border:1px solid var(--cc-fg2);border-radius:99px;background:var(--surface-sunken,rgba(255,255,255,.04));cursor:pointer;padding:0}
.cc-sw::before{content:"";position:absolute;inset:-8px -4px}
.cc-sw .k{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--cc-fg2);transition:transform .18s,background .18s}
.cc-sw[aria-checked="true"]{background:var(--cc-sig);border-color:var(--cc-sig)}
.cc-sw[aria-checked="true"] .k{transform:translateX(22px);background:var(--ck-on,#05131D)}
.cc-sw:disabled{cursor:not-allowed;opacity:.75}
.cc-see{align-self:flex-start;min-height:44px;padding:0;border:0;background:none;color:var(--cc-fg);font:600 14px var(--font-sans,system-ui,sans-serif);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cc-list ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.cc-list li{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:8px;background:var(--surface-sunken,rgba(255,255,255,.04));font-size:14px;line-height:1.45;color:var(--cc-fg2)}
.cc-list b{font:500 13.5px var(--font-mono,ui-monospace,monospace);color:var(--cc-fg);word-break:break-word}
.cc-none{font-size:14px;color:var(--cc-fg2)}
body.cc-dlg-open{overflow:hidden}
@media (max-width:520px){.cc-dlg{padding:18px}.cc-dlg .cc-btns{grid-template-columns:1fr}}
/* embed gate */
.cc-gate{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--cc-bd);border-radius:var(--radius-md,14px);background:var(--ck-panel,color-mix(in srgb,var(--surface,#11151C) 72%,transparent));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cc-gate p{margin:0;font-size:15.5px;line-height:1.5;color:var(--cc-fg)}
.cc-gate-a{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.cc-gate-a .cc-btn{min-width:150px}
.cc-gate-link{color:var(--cc-fg);font-size:14.5px;text-decoration:underline;text-underline-offset:3px}
.cc-gate--ask{margin-bottom:12px}
/* form consent (form-consent-v1.js) */
.fc-opt{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:6px 0;font-size:14.5px;line-height:1.5;color:var(--fg-2,#C4CCD6);cursor:pointer}
.fc-opt input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--ck-sig,#3AA0D2);cursor:pointer}
.fc-opt input:focus-visible{outline:2px solid var(--ck-sig,#3AA0D2);outline-offset:3px}
.ck-consent a{color:var(--fg-1,#F2F5F9)}
@media print{.cc-banner,.cc-dlg-wrap{display:none!important}}
@media (prefers-reduced-motion:reduce){.cc-sw .k,.cc-btn{transition:none}}
/* ==== inline style #ck-home ==== */
.hero-cta-group{display:flex;flex-direction:column;align-items:stretch;width:max-content;max-width:100%}.hero-cta-group .ck-under{contain:inline-size}@media(max-width:1023px){.hero-arcs .siglabel{display:none}}#faq .services-head h2{max-width:none}
/* ==== inline style #om-navlight ==== */
[data-theme="light"] .nav{background:color-mix(in srgb, var(--surface) 92%, transparent);border-bottom:1px solid var(--border-1)}
[data-theme="light"] .nav.is-scrolled{background:color-mix(in srgb, var(--surface) 92%, transparent);border-bottom-color:var(--border-1)}
/* ==== inline style #om-signal-contrast ==== */
[data-theme="light"] .clutch-badge b,[data-theme="light"] .trust a b,[data-theme="light"] .testi-stars .score{color:var(--blue-600)}
/* ==== nav-dd.css ==== */
/* Main nav: Services dropdown (All services and each service page). Loaded by the latest version of each page. */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd>a .nav-dd-caret{width:9px;height:9px;flex:none;opacity:.7;transition:transform .18s ease}
.nav-dd:hover:not(.is-closed)>a .nav-dd-caret,.nav-dd:focus-within:not(.is-closed)>a .nav-dd-caret{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:100%;left:-16px;z-index:60;min-width:210px;margin:0;padding:12px 0 0;list-style:none;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.nav-dd-menu::before{content:"";position:absolute;inset:12px 0 0;z-index:-1;border:1px solid var(--border-strong,#323944);border-radius:var(--radius-sm,10px);background:rgba(10,14,26,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
[data-theme="light"] .nav-dd-menu::before{background:rgba(250,252,254,.96);box-shadow:0 18px 40px rgba(12,20,36,.12)}
.nav-dd:hover:not(.is-closed) .nav-dd-menu,.nav-dd:focus-within:not(.is-closed) .nav-dd-menu{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease,visibility 0s}
.nav-dd-menu li{display:block;padding:0 6px}
.nav-dd-menu li:first-child{padding-top:6px}
.nav-dd-menu li:last-child{padding-bottom:6px}
.nav-links .nav-dd-menu a{display:flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:6px;white-space:nowrap;box-shadow:none!important;color:var(--fg-2)}
.nav-links .nav-dd-menu a:hover,.nav-links .nav-dd-menu a:focus-visible{background:rgba(127,140,160,.12);color:var(--fg-1);padding-bottom:10px}
.nav-links .nav-dd-menu a[aria-current="page"]{color:var(--signal,#4A9EFF)}
.nav-dd-menu li.nav-dd-grp{padding:8px 6px 0}
.nav-dd-grp span{display:block;padding:10px 12px 4px;border-top:1px solid var(--border-1,#262C36);font:500 12px/1.4 var(--font-mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3,#8C98AB);white-space:nowrap}
/* mobile menus: Services becomes a label with indented service links */
.m-menu a.m-dd-label,.ck-mmenu a.m-dd-label{cursor:default;opacity:.62}
.m-menu a.m-dd-sub,.ck-mmenu a.m-dd-sub{padding-left:22px!important;font-size:clamp(18px,5vw,24px);letter-spacing:-.01em}
.ck-mmenu a.m-dd-sub{font-size:inherit}
@media (prefers-reduced-motion:reduce){.nav-dd-menu,.nav-dd>a .nav-dd-caret{transition:none!important}}
/* ==== footer-fix-v1.css ==== */
/* Footer fix v1. Pins the shared footer to the Homepage v4 measurements on pages whose own CSS changed them
(case studies use a 1200px container, the visibility monitor uses a system font). Same container, font and rhythm as
Homepage v4; also stops long service names in the Navigate column from overlapping at tablet widths. */
footer.footer{font-family:var(--font-sans,"Instrument Sans",system-ui,sans-serif)}
footer.footer>.container{width:100%;max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,48px);position:relative}
footer.footer .footer-col h4{line-height:1.2}
footer.footer .footer-col li{height:auto;line-height:22px}
footer.footer .footer-col a{font-size:14px;line-height:1.45}
footer.footer .footer-col li.ft-sub a{font-size:.94em}
/* ==== hp16.css ==== */
/* Homepage v16 (forked from hp15.css): unchanged styles, team grid layout comes from team-card-v3.
Homepage v15 (forked from hp14.css): team section uses the shared team-card-v1 portrait cards; table, pods and tint removed.
Homepage v14 (forked from hp13.css): Roboto brand type scale, brand colours, Zegaz search-result rows, portrait set, section CTAs, mobile action bar.
Homepage v13 notes: sections below the hero. Always deep-space navy (both themes). Prefix h13-. */
.h13{--n0:#040714;--n1:#070C1D;--n2:#0B1430;--ln:rgba(160,190,240,.13);--ln2:rgba(160,190,240,.24);--t1:#EEF2F8;--t2:#B9C3D3;--t3:#A3A5A6;--cy:#5EC8FF;--cy2:#A6E3FF;--am:#FCB913;--am2:#FDD36A;--sun:#FCB913;--loch:#0080C3;--loch2:#016095;--ink:#1F1F1F;--haze:#00A551;--serif:"Roboto",system-ui,sans-serif;
position:relative;isolation:isolate;background:var(--n1);color:var(--t1);font-family:"Roboto",system-ui,sans-serif;border-top:1px solid var(--ln)}
.h13 *,.h13 *::before,.h13 *::after{box-sizing:border-box}
.h13 a{color:var(--cy2);text-decoration:none}.h13 a:hover{color:#fff}
.h13 :focus-visible{outline:2px solid var(--cy2);outline-offset:3px;border-radius:6px}
.h13-sec{padding:clamp(88px,11vw,168px) 0}
.h13-h2{margin:0;font-family:var(--font-display,"Satoshi",sans-serif);font-weight:900;font-size:clamp(38px,5.4vw,80px);line-height:.94;letter-spacing:-.04em;color:#fff;text-wrap:balance}
.h13-h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--am2)}
.h13-lede{margin:22px 0 0;max-width:56ch;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--t2);text-wrap:pretty}
.h13-aside{font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.6vw,24px);line-height:1.3;color:var(--t2)}
.h13-src{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--t3)}
.h13-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.h13 .h13-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:12px;font-weight:600;font-size:15px;line-height:1.15;transition:transform .18s,background .2s,border-color .2s,color .2s}
.h13 .h13-btn svg{width:14px;height:14px;flex:none;transition:transform .2s}
.h13 .h13-btn:hover svg{transform:translate(2px,-2px)}
.h13 .h13-btn--p{background:var(--sun);color:var(--ink);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 14px 34px -14px rgba(252,185,19,.7)}
.h13 .h13-btn--p:hover{background:#FDCB4A;color:var(--ink);transform:translateY(-1px)}
.h13 .h13-btn--g{border:1px solid var(--ln2);color:var(--t1);background:rgba(255,255,255,.03)}
.h13 .h13-btn--g:hover{border-color:var(--am);color:#fff}
.h13 .h13-tl-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:14.5px;color:var(--cy2)}
.h13 .h13-tl-link svg{width:12px;height:12px}
.h13-glass{border:1px solid var(--ln2);border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.015) 60%),rgba(10,18,42,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px -60px rgba(0,0,0,.95)}
.h13-eye{display:block;aspect-ratio:410/362;background:url("assets/logo-ounternet.png") no-repeat;background-size:605.1% auto;background-position:26.1% 27.2%;filter:drop-shadow(0 0 14px rgba(94,200,255,.5)) brightness(1.2)}
.h13-stars{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff 50%,transparent),radial-gradient(1px 1px at 33% 64%,#cfe3ff 50%,transparent),radial-gradient(1.3px 1.3px at 58% 22%,#fff 50%,transparent),radial-gradient(1px 1px at 79% 71%,#fff 50%,transparent),radial-gradient(1px 1px at 91% 31%,#cfe3ff 50%,transparent);background-size:560px 460px;opacity:.4}
/* animation settled: jump to the final state even where transitions are paused */
.h13-settled,.h13-settled *{transition:none!important}
/* 2. TRUSTED BY */
.h13-trust{padding:clamp(64px,7vw,104px) 0 clamp(56px,6vw,88px);background:radial-gradient(80% 120% at 50% 0,#0D1838 0,var(--n1) 70%)}
.h13-trust-h{margin:0 0 clamp(28px,3vw,40px);text-align:center;font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(24px,2.6vw,36px);letter-spacing:-.01em;color:var(--t2)}
.h13-rail{position:relative;margin:0 clamp(12px,3vw,40px);padding:6px 0;border-radius:20px;border:1px solid var(--ln);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.h13-mq{overflow:hidden}
.h13-mq+.h13-mq{border-top:1px solid var(--ln)}
.h13-mq-t{display:flex;width:max-content;margin:0;padding:0;list-style:none;animation:h13Mq var(--dur,60s) linear infinite}
.h13-mq.is-rev .h13-mq-t{animation-direction:reverse}
.h13-rail:hover .h13-mq-t,.h13-rail:focus-within .h13-mq-t{animation-play-state:paused}
@keyframes h13Mq{to{transform:translateX(-50%)}}
.h13-mq-t li{flex:none;display:flex;align-items:center;justify-content:center;height:96px;padding:0 clamp(32px,4vw,60px);border-right:1px solid var(--ln)}
.h13-wm{display:inline-flex;align-items:center;height:30px;color:#D6DEEA;white-space:nowrap;transition:color .25s}
.h13-mq-t li:hover .h13-wm{color:#fff}
.h13-wm img{display:block;height:30px;width:auto;filter:grayscale(1) brightness(0) invert(1);opacity:.85}
.h13-wm--a{font-family:var(--font-display,"Satoshi");font-weight:900;font-size:21px;letter-spacing:.06em;text-transform:uppercase}
.h13-wm--a i{font-style:normal;font-weight:500;letter-spacing:.2em;font-size:12px;margin-left:10px;color:var(--t3)}
.h13-wm--b{font-family:var(--serif);font-style:italic;font-size:34px;letter-spacing:-.01em}
.h13-wm--c{font-family:var(--font-sans);font-weight:500;font-size:13.5px;letter-spacing:.34em;text-transform:uppercase}
.h13-wm--d{font-family:var(--serif);font-size:28px;letter-spacing:.01em}
.h13-wm--d i{font-style:italic;margin:0 .22em}
.h13-wm--e{font-family:var(--font-mono,"JetBrains Mono");font-weight:500;font-size:17px;letter-spacing:.12em;text-transform:uppercase}
.h13-wm--f{font-family:var(--font-sans);font-weight:400;font-style:italic;font-size:20px;letter-spacing:-.01em}
.h13 a.h13-wm:hover{color:#fff}
/* 3. THE STACK */
.h13-stack{background:radial-gradient(70% 60% at 78% 40%,rgba(94,200,255,.09),transparent 70%),var(--n1)}
.h13-stack-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,88px);align-items:start}
.h13-layers{position:relative;margin-top:44px;padding-left:44px}
.h13-layers::before{content:"";position:absolute;left:15px;top:6px;bottom:20px;width:2px;border-radius:2px;background:var(--ln2)}
.h13-layers::after{content:"";position:absolute;left:15px;top:6px;width:2px;height:var(--lit,0px);border-radius:2px;background:linear-gradient(180deg,var(--cy),var(--am));box-shadow:0 0 12px rgba(94,200,255,.8);transition:height .5s cubic-bezier(.2,.8,.2,1)}
.h13-core{position:absolute;left:-2px;top:-40px;width:36px;z-index:2}
.h13-grp{position:relative;padding:14px 0 10px}
.h13-grp-h{display:flex;align-items:baseline;gap:12px;margin:0 0 6px;font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:-.02em;color:#fff}
.h13-grp-h em{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--t3)}
.h13-grp ul{list-style:none;margin:0;padding:0}
.h13-svc{position:relative;border-bottom:1px solid var(--ln)}
.h13-svc::before{content:"";position:absolute;left:-34px;top:22px;width:10px;height:10px;border-radius:50%;border:2px solid var(--ln2);background:var(--n1);transition:all .3s}
.h13-svc.is-on::before{border-color:var(--cy);background:var(--cy);box-shadow:0 0 0 5px rgba(94,200,255,.16),0 0 16px var(--cy)}
.h13-svc>button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:54px;padding:8px 0;cursor:pointer;font-size:17px;font-weight:500;color:var(--t1)}
.h13-svc>button:focus-visible{outline:2px solid var(--cy2);outline-offset:2px}
.h13-svc>button i{position:relative;flex:none;width:14px;height:14px}
.h13-svc>button i::before,.h13-svc>button i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:currentColor;transition:transform .3s}
.h13-svc>button i::after{transform:rotate(90deg)}
.h13-svc.is-on>button{color:#fff}
.h13-svc.is-on>button i::after{transform:rotate(0)}
.h13-svc-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.h13-svc.is-on .h13-svc-d{grid-template-rows:1fr}
.h13-svc-d>div{overflow:hidden}
.h13-pg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;padding:2px 0 16px;font-size:15px;line-height:1.5}
.h13-pg dt{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--t3)}
.h13-pg dd{margin:0;color:var(--t2)}
.h13-pg dd.g{color:#fff}
.h13-svc-d .h13-tl-link{margin:-6px 0 10px}
.h13-iso{position:sticky;top:110px;height:min(640px,78vh);display:grid;place-items:center;perspective:1600px}
.h13-iso-scene{position:relative;width:min(360px,72%);aspect-ratio:1;transform:translateY(8%) rotateX(58deg) rotateZ(-42deg);transform-style:preserve-3d}
.h13-slab{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--z) * var(--ex,.4) * 120px + var(--lift,0px)));transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s;border-radius:18px}
.h13-slab-f{position:absolute;inset:0;border-radius:18px;border:1px solid rgba(166,227,255,.4);background:linear-gradient(135deg,rgba(94,200,255,.16),rgba(20,40,90,.28) 55%,rgba(255,181,71,.08));box-shadow:inset 0 0 40px rgba(94,200,255,.1),0 0 0 1px rgba(255,255,255,.04);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr;gap:8%;padding:9%}
.h13-slab-n{grid-column:1/-1;margin:0;font-family:var(--font-display);font-weight:900;font-size:20px;letter-spacing:-.01em;color:#fff;opacity:.92}
.h13-tile{all:unset;cursor:pointer;display:flex;align-items:flex-end;padding:9px 10px;border-radius:10px;border:1px solid rgba(166,227,255,.28);background:rgba(4,8,22,.45);font-family:var(--font-mono);font-size:10.5px;line-height:1.2;letter-spacing:.02em;color:var(--t2);transition:all .3s}
.h13-tile:hover{border-color:var(--cy2);color:#fff}
.h13-tile.is-on{border-color:var(--am);background:linear-gradient(160deg,rgba(255,181,71,.35),rgba(255,181,71,.08));color:#fff;box-shadow:0 0 24px rgba(255,181,71,.55)}
.h13-iso.has-on .h13-slab:not(.is-on){opacity:.42}
.h13-slab.is-on{--lift:22px}
.h13-slab.is-on .h13-slab-f{border-color:var(--cy2);box-shadow:inset 0 0 50px rgba(94,200,255,.22),0 0 40px rgba(94,200,255,.25)}
.h13-iso-core{position:absolute;left:50%;bottom:4%;width:96px;transform:translateX(-50%);pointer-events:none}
.h13-iso-core::before{content:"";position:absolute;left:50%;top:50%;width:220%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(94,200,255,.35),transparent 65%);animation:h13Breath 3.6s ease-in-out infinite}
@keyframes h13Breath{50%{opacity:.5;transform:translate(-50%,-50%) scale(.85)}}
.h13-beam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.h13-beam path{fill:none;stroke:url(#h13BeamG);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(94,200,255,.9))}
.h13-beam circle{fill:#fff;filter:drop-shadow(0 0 8px #fff)}
/* 4. EIGHT AGENTS */
.h13-agents{background:radial-gradient(60% 50% at 50% 10%,rgba(94,200,255,.08),transparent 70%),var(--n0)}
.h13-ag-scroll{position:relative}
.h13-ag-pin{padding:clamp(88px,9vw,130px) 0 clamp(60px,6vw,96px)}
.h13-ag-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(32px,4vw,52px)}
.h13-ag-head .h13-lede{margin:0}
.h13-ag-head .h13-btns{grid-column:1/-1}
.h13-board{position:relative;padding:22px;border-radius:24px;border:1px solid var(--ln);background:linear-gradient(var(--ln) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--ln) 1px,transparent 1px) 0 0/48px 48px,rgba(6,12,30,.7)}
.h13-atlas{display:flex;align-items:center;gap:16px;margin:0 auto 34px;width:max-content;max-width:100%;padding:10px 20px 10px 10px;border-radius:999px;border:1px solid rgba(94,200,255,.4);background:rgba(8,18,44,.85);box-shadow:0 0 40px -10px rgba(94,200,255,.6)}
.h13-atlas p{margin:0;font-size:14px;line-height:1.35;color:var(--t2)}
.h13-atlas b{color:#fff;font-family:var(--font-display);letter-spacing:.04em;margin-right:6px}
.h13-av{position:relative;flex:none;display:block;width:52px;height:52px;border-radius:50%;overflow:hidden;border:1.5px solid var(--hue,#5EC8FF);box-shadow:0 0 16px -2px var(--hue,#5EC8FF);background:#0b1430}
.h13-av img{position:absolute;max-width:none;height:auto}
.h13-pipe{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.h13-track{position:absolute;left:4%;right:4%;top:26px;height:2px;background:var(--ln2);border-radius:2px}
.h13-track i{position:absolute;left:0;top:0;height:2px;width:calc(var(--sp,0) * 100%);background:linear-gradient(90deg,var(--cy),var(--am));box-shadow:0 0 10px var(--cy)}
.h13-sig{position:absolute;top:50%;left:calc(var(--sp,0) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,181,71,.25),0 0 22px var(--am)}
.h13-ag{position:relative;display:flex;flex-direction:column;gap:10px;padding:0 0 4px;transition:opacity .4s}
.js-reveal .h13-ag:not(.is-on):not(.is-done){opacity:.55}
.h13-ag.is-on,.h13-ag.is-done{opacity:1}
.h13-ag-top{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.h13-ag-top b{display:block;font-family:var(--font-display);font-weight:900;font-size:15px;letter-spacing:.06em;color:#fff}
.h13-ag-top small{display:block;font-size:12.5px;color:var(--t3)}
.h13-ag.is-on .h13-av{transform:scale(1.08);box-shadow:0 0 0 4px rgba(255,255,255,.08),0 0 26px var(--hue)}
.h13-av{transition:transform .35s,box-shadow .35s}
.h13-ag-card{flex:1;display:flex;flex-direction:column;gap:10px;padding:14px 14px 12px;border-radius:14px;border:1px solid var(--ln);background:rgba(10,18,42,.75);transition:border-color .35s,box-shadow .35s}
.h13-ag.is-on .h13-ag-card{border-color:color-mix(in srgb,var(--hue) 70%,transparent);box-shadow:0 18px 40px -24px var(--hue)}
.h13-ag-verb{margin:0;font-family:var(--serif);font-style:italic;font-size:20px;line-height:1;color:var(--hue)}
.h13-ag-does{margin:0;font-size:13px;line-height:1.45;color:var(--t2)}
.h13-ag-say{margin:0;font-size:12.5px;line-height:1.4;color:#fff;min-height:2.8em;transition:opacity .35s,transform .35s}
.js-reveal .h13-ag:not(.is-on):not(.is-done) .h13-ag-say{opacity:.45}
.h13-ag-say::before{content:"\201C"}.h13-ag-say::after{content:"\201D"}
.h13 .h13-ag-link{margin-top:auto;font-size:13px;min-height:44px}
.h13-note{margin:16px 0 0;font-size:12.5px;color:var(--t3);text-align:right}
/* micro animations */
.h13-mi{position:relative;height:40px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--ln);overflow:hidden}
.h13-mi i{position:absolute;display:block;border-radius:3px;background:var(--hue)}
.h13-ag:not(.is-on) .h13-mi *{animation-play-state:paused!important}
.h13-mi--intake i{left:8px;height:6px;width:40%;opacity:.8;animation:h13In 2.4s ease-in-out infinite}
.h13-mi--intake i:nth-child(1){top:8px}.h13-mi--intake i:nth-child(2){top:17px;width:55%;animation-delay:.3s}.h13-mi--intake i:nth-child(3){top:26px;width:30%;animation-delay:.6s}
@keyframes h13In{0%{transform:translateX(160%);opacity:0}30%,80%{transform:none;opacity:.85}100%{opacity:0}}
.h13-mi--research i{top:8px;left:8px;height:5px;opacity:.35}
.h13-mi--research i:nth-child(1){width:70%}.h13-mi--research i:nth-child(2){top:17px;width:50%}.h13-mi--research i:nth-child(3){top:26px;width:62%}
.h13-mi--research b{position:absolute;top:0;bottom:0;width:22px;background:linear-gradient(90deg,transparent,var(--hue),transparent);opacity:.7;animation:h13Scan 2.2s ease-in-out infinite}
@keyframes h13Scan{0%{left:-22px}100%{left:100%}}
.h13-mi--qualifier i{left:8px;top:16px;height:8px;width:0;animation:h13Fill 2.6s cubic-bezier(.2,.8,.2,1) infinite}
.h13-mi--qualifier b{position:absolute;left:8px;right:8px;top:16px;height:8px;border-radius:3px;border:1px solid var(--ln2)}
@keyframes h13Fill{0%{width:0}60%,100%{width:calc(80% - 8px)}}
.h13-mi--sales i{left:8px;height:5px;opacity:.75;width:0;animation:h13Type 3s steps(18) infinite}
.h13-mi--sales i:nth-child(1){top:9px;--w:72%}.h13-mi--sales i:nth-child(2){top:19px;--w:54%;animation-delay:.6s}
.h13-mi--sales em{position:absolute;right:6px;bottom:4px;font-style:normal;font-size:9.5px;padding:1px 6px;border-radius:4px;border:1px solid var(--hue);color:var(--hue);font-family:var(--font-mono)}
@keyframes h13Type{0%{width:0}50%,100%{width:var(--w)}}
.h13-mi--scheduler{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:6px}
.h13-mi--scheduler span{border-radius:2px;background:rgba(255,255,255,.07)}
.h13-mi--scheduler span.k{animation:h13Book 2.6s ease-in-out infinite}
@keyframes h13Book{0%,30%{background:rgba(255,255,255,.07)}50%,100%{background:var(--hue);box-shadow:0 0 10px var(--hue)}}
.h13-mi--crm{display:flex;align-items:center;justify-content:space-between;padding:0 10px}
.h13-mi--crm span{position:relative;z-index:1;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ln2);background:#0b1430}
.h13-mi--crm::before{content:"";position:absolute;left:14px;right:14px;top:50%;height:1px;background:var(--ln2)}
.h13-mi--crm b{position:absolute;top:50%;left:10px;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--hue);box-shadow:0 0 10px var(--hue);z-index:2;animation:h13Stage 3s ease-in-out infinite}
@keyframes h13Stage{0%,15%{left:10px}45%,55%{left:calc(50% - 4.5px)}85%,100%{left:calc(100% - 19px)}}
.h13-mi--reporter i{left:50%;width:46%;margin-left:-23%;height:4px;opacity:0;animation:h13Rep 2.8s ease-out infinite}
.h13-mi--reporter i:nth-child(1){top:8px}.h13-mi--reporter i:nth-child(2){top:16px;animation-delay:.25s;width:36%}.h13-mi--reporter i:nth-child(3){top:24px;animation-delay:.5s;width:40%}.h13-mi--reporter i:nth-child(4){top:32px;animation-delay:.75s;width:24%}
@keyframes h13Rep{0%{opacity:0;transform:translateY(6px)}25%,85%{opacity:.85;transform:none}100%{opacity:0}}
@media (min-width:1100px) and (min-height:720px){
.js-reveal .h13-ag-scroll{height:250vh}
.js-reveal .h13-ag-pin{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:96px 0 32px}
}
@media (max-width:1099px){
.h13-board{padding:18px 14px 18px 12px}
.h13-atlas{margin:0 0 22px;width:auto;border-radius:16px}
.h13-pipe{grid-template-columns:1fr;gap:14px;padding-left:44px}
.h13-track{left:25px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
.h13-track i{width:2px;height:calc(var(--sp,0) * 100%)}
.h13-sig{left:50%;top:calc(var(--sp,0) * 100%);margin:-7px 0 0 -7px}
.h13-ag{flex-direction:row;align-items:stretch;gap:12px}
.h13-ag-top{position:absolute;left:-45px;top:4px;width:auto}
.h13-ag-top .h13-av{width:40px;height:40px}
.h13-ag-top div{display:none}
.h13-ag-card{padding:14px 16px}
.h13-ag-card .h13-ag-id{display:flex!important}
.h13-ag-say{min-height:0}
.h13-note{text-align:left}
}
.h13-ag-id{display:none;align-items:baseline;gap:10px;font-size:13px;color:var(--t3)}
.h13-ag-id b{font-family:var(--font-display);font-weight:900;font-size:15px;letter-spacing:.06em;color:#fff}
/* 5. CASE */
.h13-case{background:radial-gradient(60% 60% at 15% 20%,rgba(255,181,71,.07),transparent 70%),var(--n1)}
.h13-case-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.h13-client{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;font-size:14px;color:var(--am2)}
.h13-client::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--am);box-shadow:0 0 10px var(--am)}
.h13-case-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:clamp(40px,5vw,64px)}
.h13-panel{padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column}
.h13-panel h3{margin:0 0 4px;font-size:15px;font-weight:600;color:#fff}
.h13-panel .h13-src{margin-top:auto;padding-top:16px}
.h13-p-rings{grid-column:span 7}
.h13-p-rank{grid-column:span 5}
.h13-p-q{grid-column:span 7}
.h13-p-art{grid-column:span 5}
.h13-rings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 4px}
.h13-ring{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.h13-ring svg{width:100%;max-width:170px;transform:rotate(-90deg)}
.h13-ring circle{fill:none;stroke-width:9}
.h13-ring .bg{stroke:rgba(255,255,255,.07)}
.h13-ring .fg{stroke-linecap:round;transition:stroke-dasharray 1.8s cubic-bezier(.2,.8,.2,1)}.js-reveal .h13-rings:not(.is-in) .fg{stroke-dasharray:0 100}
.h13-ring-w::before{content:"";position:absolute;inset:14%;border-radius:50%;box-shadow:0 0 40px -6px var(--glow,rgba(94,200,255,.5));pointer-events:none}
.h13-ring-w{position:relative;width:100%;max-width:170px}
.h13-ring-v{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:900;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em;color:#fff}
.h13-ring-n{font-size:14.5px;color:var(--t2)}
.h13-ladder{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;margin:18px 0 0;flex:1;min-height:230px}
.h13-lad-ax{position:relative;width:34px;border-right:1px solid var(--ln2);font-family:var(--font-mono);font-size:11px;color:var(--t3)}
.h13-lad-ax span{position:absolute;right:8px;transform:translateY(-50%)}
.h13-lad-f{position:relative}
.h13-lad-m{position:absolute;left:0;right:0;display:flex;align-items:center;gap:10px;transform:translateY(-50%);transition:top 1.8s cubic-bezier(.2,.8,.2,1)}
.h13-lad-m::before{content:"";flex:none;width:12px;height:12px;margin-left:-21px;border-radius:50%;background:var(--mc);box-shadow:0 0 12px var(--mc)}
.h13-lad-m[data-to]{top:var(--to);transition:top 1.8s cubic-bezier(.2,.8,.2,1),opacity .4s}.h13-lad-m:not([data-to]){top:var(--from);opacity:.55}.js-reveal .h13-ladder:not(.is-in) .h13-lad-m[data-to]{top:var(--from);opacity:0}.h13-lad-m b{font-family:var(--font-display);font-weight:900;font-size:28px;letter-spacing:-.02em;color:#fff}
.h13-lad-m small{font-size:13px;color:var(--t3)}
.h13-ctr{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:14px;border-top:1px solid var(--ln);font-size:14px;color:var(--t2)}
.h13-ctr b{font-family:var(--font-display);font-weight:900;font-size:22px;color:#fff}
.h13-q{list-style:none;margin:16px 0 0;padding:0}
.h13-q li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--ln)}
.h13-q li:last-child{border-bottom:0}
.h13-q q{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.2vw,30px);line-height:1.1;color:#fff;quotes:"\201C" "\201D"}
.h13-q span{display:block;font-size:12.5px;color:var(--t3);text-align:right}
.h13-q b{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(28px,2.8vw,40px);letter-spacing:-.03em;color:var(--am2);text-align:right}
.h13-art{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;margin:20px 0 14px}
.h13-art i{aspect-ratio:1;border-radius:3px;border:1px solid var(--ln2);background:rgba(255,255,255,.03);transition:background .4s,box-shadow .4s,border-color .4s;transition-delay:calc(var(--k) * 28ms)}
.h13-art i.r{background:var(--am);border-color:var(--am);box-shadow:0 0 8px rgba(255,181,71,.5)}.js-reveal .h13-art:not(.is-in) i.r{background:rgba(255,255,255,.03);border-color:var(--ln2);box-shadow:none}
.h13-art-k{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--t2)}
.h13-art-k b{font-family:var(--font-display);font-weight:900;font-size:22px;color:#fff;margin-right:6px}
.h13-tl{--tp:1;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(48px,6vw,80px);padding-top:38px}
.h13-tl::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:repeating-linear-gradient(90deg,var(--ln2) 0 8px,transparent 8px 14px)}
.h13-tl::after{content:"";position:absolute;left:0;top:8px;height:2px;width:calc(var(--tp,0) * 35%);background:linear-gradient(90deg,var(--cy),var(--am));box-shadow:0 0 10px var(--cy)}
.h13-tl-s{position:relative}
.h13-tl-s::before{content:"";position:absolute;left:0;top:-36px;width:14px;height:14px;border-radius:50%;border:2px solid var(--ln2);background:var(--n1);z-index:1}
.h13-tl-s.is-on::before{border-color:var(--am);background:var(--am);box-shadow:0 0 14px var(--am)}
.h13-tl-s.is-plan::before{border-style:dashed;border-color:var(--am2);background:var(--n1)}
.h13-tl-k{margin:0 0 8px;font-size:13px;color:var(--t3)}
.h13-tl-k em{font-style:normal;margin-left:8px;padding:2px 8px;border-radius:6px;border:1px dashed var(--am2);color:var(--am2);font-size:12px}
.h13-tl-s h3{margin:0 0 8px;font-family:var(--font-display);font-weight:900;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;color:#fff}
.h13-tl-s p{margin:0;font-size:15px;line-height:1.5;color:var(--t2);max-width:38ch}
.h13-case-cta{margin-top:clamp(40px,5vw,64px)}
/* 6. INDUSTRIAL */
.h13-ind{background:radial-gradient(60% 50% at 80% 30%,rgba(94,200,255,.08),transparent 70%),var(--n0)}
.h13-ind-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);margin-top:clamp(40px,5vw,64px)}
.h13-ind-cards{display:flex;flex-direction:column;gap:clamp(18px,3vh,28px);padding-bottom:12vh}
.h13-ind-c{padding:24px 26px;transition:opacity .4s,border-color .4s,transform .4s}.js-reveal .h13-ind-c:not(.is-on){opacity:.6}
.h13-ind-c.is-on{opacity:1;border-color:rgba(255,181,71,.55)}
.h13-ind-c h3{margin:0 0 14px;font-family:var(--font-display);font-weight:900;font-size:clamp(20px,1.8vw,25px);letter-spacing:-.02em;color:#fff}
.h13-ind-c dl{margin:0}
.h13-ind-c .h13-pg{padding:0}
.h13-plant{position:sticky;top:110px;height:min(560px,72vh);display:flex;align-items:center}
.h13-plant svg{width:100%;height:auto;overflow:visible}
.h13-u .f{stroke:rgba(166,227,255,.35);stroke-width:1;transition:fill .6s,stroke .6s}
.h13-u .ft{fill:rgba(255,255,255,.04)}.h13-u .fl{fill:rgba(255,255,255,.02)}.h13-u .fr{fill:rgba(0,0,0,.15)}
.h13-u.is-on .f{stroke:var(--cy2)}
.h13-u.is-on .ft{fill:rgba(94,200,255,.38)}.h13-u.is-on .fl{fill:rgba(94,200,255,.16)}.h13-u.is-on .fr{fill:rgba(255,181,71,.24)}
.h13-u.is-on .win{fill:var(--am);filter:drop-shadow(0 0 4px var(--am))}
.h13-u .win{fill:rgba(255,255,255,.08);transition:fill .5s}
.h13-u text{font-family:var(--font-sans);font-size:13px;fill:var(--t3);transition:fill .4s}
.h13-u.is-on text{fill:#fff}
.h13-pipe2{fill:none;stroke:rgba(166,227,255,.22);stroke-width:3}
.h13-flow{fill:none;stroke:var(--am);stroke-width:3;stroke-dasharray:6 12;opacity:0;transition:opacity .5s;animation:h13Flow 1.2s linear infinite;filter:drop-shadow(0 0 4px var(--am))}
.h13-flow.is-on{opacity:1}
@keyframes h13Flow{to{stroke-dashoffset:-36}}
.h13-ind-cta{margin-top:8px}
/* 7. FIRST MEETING */
.h13-meet{background:radial-gradient(50% 50% at 50% 55%,rgba(94,200,255,.1),transparent 70%),var(--n1)}
.h13-meet-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,5vw,80px);align-items:center}
.h13-agenda{list-style:none;margin:34px 0 30px;padding:0;display:flex;flex-direction:column;gap:2px}
.h13-agenda li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--ln)}
.h13-agenda li:last-child{border-bottom:1px solid var(--ln)}
.h13-agenda .d{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--am2)}
.h13-agenda b{display:block;font-weight:600;font-size:16px;color:#fff}
.h13-agenda p{margin:4px 0 0;font-size:14.5px;line-height:1.45;color:var(--t2)}
.h13-bar{display:flex;gap:3px;height:6px;margin:0 0 8px;border-radius:4px;overflow:hidden}
.h13-bar i{flex:var(--f);background:linear-gradient(90deg,var(--cy),var(--am));opacity:.85;transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k) * 180ms)}
.js-reveal .h13-meet:not(.is-in) .h13-bar i{transform:scaleX(0)}
.h13-table{position:relative;aspect-ratio:1.25;width:100%}
.h13-table-top{position:absolute;left:14%;right:14%;top:24%;bottom:24%;border-radius:50%;border:1px solid rgba(166,227,255,.35);background:radial-gradient(closest-side,rgba(94,200,255,.16),rgba(12,24,60,.55) 70%,rgba(12,24,60,.2));box-shadow:inset 0 0 60px rgba(94,200,255,.12),0 30px 80px -30px rgba(0,0,0,.9)}
.h13-table-top::after{content:"";position:absolute;inset:12%;border-radius:50%;border:1px dashed rgba(166,227,255,.18)}
.h13-table .h13-eye{position:absolute;left:50%;top:50%;width:13%;transform:translate(-50%,-50%)}
.h13-table svg.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.h13-table svg.lines line{stroke:rgba(166,227,255,.25);stroke-width:1;stroke-dasharray:4 6}
.h13-table svg.lines line.is-on{stroke:var(--am);stroke-dasharray:none;filter:drop-shadow(0 0 4px var(--am))}
.h13-pod{all:unset;box-sizing:border-box;position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:clamp(120px,13vw,170px);text-align:center;cursor:pointer;transition:opacity .5s,transform .5s;transition-delay:calc(var(--k) * 120ms)}
.js-reveal .h13-meet:not(.is-in) .h13-pod{opacity:0;transform:translate(-50%,-50%) scale(.9)}
.h13-pod:focus-visible{outline:2px solid var(--cy2);outline-offset:4px;border-radius:12px}
.h13-pod-av{position:relative;width:clamp(58px,5.4vw,76px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:1.5px solid var(--ln2);background:#0E1A3C;transition:border-color .3s,box-shadow .3s}
.h13-pod-av img{width:100%;height:100%;object-fit:cover;display:block}
.h13-pod-av image-slot{display:block;width:100%;height:100%}
.h13-pod-av svg{position:absolute;inset:0;width:100%;height:100%}
.h13-pod b{font-size:15px;font-weight:600;color:#fff;line-height:1.2}
.h13-pod small{font-size:12.5px;line-height:1.3;color:var(--t3)}
.h13-pod.is-on .h13-pod-av,.h13-pod:hover .h13-pod-av{border-color:var(--am);box-shadow:0 0 0 5px rgba(255,181,71,.14),0 0 24px rgba(255,181,71,.5)}
.h13-meet-cap{min-height:3em;margin:10px auto 0;max-width:46ch;text-align:center;font-size:15.5px;line-height:1.5;color:var(--t2)}
.h13-meet-cap b{color:#fff;font-weight:600}
.h13-roster{display:none}
/* 8. HOW WE RUN */
.h13-run{background:radial-gradient(70% 60% at 50% 60%,rgba(255,181,71,.06),transparent 70%),var(--n0)}
.h13-run-scroll{position:relative}
.h13-run-pin{padding:clamp(88px,9vw,130px) 0}
.h13-run-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.h13-run-head .h13-lede{margin:0}
.h13-flight{display:none;position:relative;margin-top:clamp(28px,4vh,48px)}
.h13-flight svg{display:block;width:100%;height:auto;overflow:visible}
.h13-fp-bg{fill:none;stroke:var(--ln2);stroke-width:2;stroke-dasharray:3 9}
.h13-fp{fill:none;stroke:url(#h13FpG);stroke-width:2.5;filter:drop-shadow(0 0 6px rgba(94,200,255,.8))}
.h13-st circle{fill:var(--n0);stroke:var(--ln2);stroke-width:2;transition:all .4s}
.h13-st.is-on circle{fill:var(--am);stroke:var(--am);filter:drop-shadow(0 0 8px var(--am))}
.h13-st text{font-family:var(--font-sans);font-size:15px;font-weight:600;fill:var(--t3);transition:fill .3s}
.h13-st.is-on text{fill:#fff}
.h13-ship{position:absolute;left:0;top:0;width:clamp(54px,5vw,76px);transform:translate(-50%,-50%);pointer-events:none;will-change:transform}
.h13-ship::after{content:"";position:absolute;right:70%;top:50%;width:120%;height:3px;margin-top:-1.5px;background:linear-gradient(270deg,rgba(94,200,255,.7),transparent);border-radius:3px;filter:blur(1px)}
.h13-run-card{position:relative;min-height:170px;margin-top:clamp(12px,2vh,28px);display:none}
.h13-run-c{grid-area:1/1;max-width:62ch;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;pointer-events:none}
.h13-run-c.is-on{opacity:1;transform:none;pointer-events:auto}
.h13-run-c h3{margin:0 0 10px;font-family:var(--font-display);font-weight:900;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em;color:#fff}
.h13-run-c p{margin:0;font-size:clamp(16px,1.25vw,18.5px);line-height:1.55;color:var(--t2)}
.h13-run-c.is-key p{color:#fff}
.h13-run-c.is-key h3 em{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--am2)}
@media (min-width:900px) and (min-height:700px){
.js-reveal .h13-run-scroll{height:300vh}
.js-reveal .h13-run-pin{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:96px 0 40px}
.js-reveal .h13-flight{display:block}.js-reveal .h13-run-card{display:grid}.js-reveal .h13-run-list{display:none!important}
}
/* 10. FAQ */
.h13-faq{background:var(--n1)}
.h13-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,5vw,80px)}
.h13-faq-g+.h13-faq-g{margin-top:36px}
.h13-faq-g>h3{margin:0 0 6px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;color:var(--am2)}
.h13-qa{border-bottom:1px solid var(--ln)}
.h13-qa h4{margin:0}
.h13-qa button{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;min-height:60px;padding:14px 0;cursor:pointer;font-size:17px;font-weight:600;line-height:1.35;color:var(--t1)}
.h13-qa button:focus-visible{outline:2px solid var(--cy2);outline-offset:2px}
.h13-qa button:hover{color:#fff}
.h13-qa button i{position:relative;flex:none;width:14px;height:14px}
.h13-qa button i::before,.h13-qa button i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:currentColor;transition:transform .3s}
.h13-qa button i::after{transform:rotate(90deg)}
.h13-qa button[aria-expanded="true"] i::after{transform:rotate(0)}
.h13-qa button[aria-expanded="true"]{color:#fff}
.h13-qa .a{padding:0 0 22px;max-width:64ch;font-size:15.5px;line-height:1.6;color:var(--t2)}
.h13-qa .a[hidden]{display:none}
/* 11. FINAL CTA */
.h13-end{background:radial-gradient(60% 70% at 50% 50%,rgba(94,200,255,.12),transparent 70%),var(--n0);text-align:center}
.h13-end .h13-h2{max-width:16ch;margin:0 auto}
.h13-end .h13-lede{margin-left:auto;margin-right:auto}
.h13-end .h13-btns{justify-content:center;margin-top:32px}
.h13-orbit{position:relative;width:min(980px,100%);aspect-ratio:2.3;margin:clamp(40px,5vw,72px) auto 0}
.h13-orbit-r{position:absolute;inset:0;border-radius:50%;border:1px solid var(--ln2)}
.h13-orbit-r::before{content:"";position:absolute;inset:16%;border-radius:50%;border:1px dashed var(--ln)}
.h13-orbit-dot{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--am);box-shadow:0 0 14px var(--am);offset-path:var(--op);animation:h13Orb 18s linear infinite}
@keyframes h13Orb{from{offset-distance:0%}to{offset-distance:100%}}
.h13-orbit-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px}
.h13-orbit-c .h13-eye{width:64px}
.h13 .h13-orbit-c a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--ln2);background:rgba(8,16,40,.8);color:#fff;font-size:14px;font-weight:600}
.h13 .h13-orbit-c a:hover{border-color:var(--am)}
.h13-orbit-c a svg{width:12px;height:12px}
.h13-orbit ul{list-style:none;margin:0;padding:0}
.h13-orbit li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
.h13 .h13-orbit li a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;background:rgba(7,12,29,.85);font-size:14.5px;color:var(--t1);white-space:nowrap;transition:color .2s,background .2s}
.h13 .h13-orbit li a::before{content:"";width:6px;height:6px;margin-right:10px;border-radius:50%;background:var(--cy);box-shadow:0 0 8px var(--cy)}
.h13 .h13-orbit li a:hover{color:#fff;background:rgba(20,34,70,.95)}
/* Studios list tidy (kept section) */
#studios .list li:empty{display:none}
/* RESPONSIVE */
@media (max-width:1020px){
.h13-stack-grid,.h13-ind-grid,.h13-meet-grid,.h13-faq-grid,.h13-case-head,.h13-ag-head,.h13-run-head{grid-template-columns:1fr}
.h13-iso{display:none}
.h13-p-rings,.h13-p-rank,.h13-p-q,.h13-p-art{grid-column:1/-1}
.h13-plant{top:72px;height:auto;z-index:2;margin:0 calc(clamp(20px,4vw,48px) * -1);padding:10px clamp(20px,4vw,48px);background:linear-gradient(180deg,var(--n0) 82%,rgba(4,7,20,0))}
.h13-plant svg{max-height:34vh}
.h13-u text{display:none}
.h13-ind-grid{display:flex;flex-direction:column-reverse;gap:8px}
.h13-ind-cards{padding-bottom:0}
}
.h13-run-list{--rh:100%}
@media all{
.h13-run-list{display:block;position:relative;list-style:none;margin:36px 0 0;padding:0 0 0 52px}
.h13-run-list::before{content:"";position:absolute;left:21px;top:6px;bottom:6px;width:2px;background:repeating-linear-gradient(180deg,var(--ln2) 0 6px,transparent 6px 12px)}
.h13-run-list::after{content:"";position:absolute;left:21px;top:6px;width:2px;height:var(--rh,0px);background:linear-gradient(180deg,var(--cy),var(--am));box-shadow:0 0 10px var(--cy)}
.h13-run-list .h13-ship{left:22px;top:var(--rh,0px);width:44px;z-index:2;transform:translate(-50%,-50%) rotate(90deg)}
.h13-run-list li{position:relative;padding:0 0 32px}
.h13-run-list li::before{content:"";position:absolute;left:-37px;top:8px;width:12px;height:12px;border-radius:50%;border:2px solid var(--ln2);background:var(--n0)}
.h13-run-list li.is-on::before{border-color:var(--am);background:var(--am);box-shadow:0 0 12px var(--am)}
.h13-run-list h3{margin:0 0 8px;font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:-.02em;color:#fff}
.h13-run-list p{margin:0;font-size:15.5px;line-height:1.55;color:var(--t2)}
.h13-run-list li.is-key p{color:#fff}
html:not(.js-reveal) .h13-run-list li::before{border-color:var(--am);background:var(--am)}
}
@media (max-width:760px){
.h13-sec{padding:72px 0}
.h13-mq-t li{height:78px;padding:0 28px}
.h13-wm{transform:scale(.86)}
.h13-rings{gap:8px}
.h13-ring-v{font-size:22px}
.h13-ring-n{font-size:13px}
.h13-tl{grid-template-columns:1fr;gap:30px;padding:0 0 0 34px}
.h13-tl::before{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--ln2) 0 8px,transparent 8px 14px)}
.h13-tl::after{left:6px;top:0;width:2px;height:calc(var(--tp,0) * 50%)}
.h13-tl-s::before{left:-34px;top:2px}
.h13-q li{grid-template-columns:1fr;gap:6px}
.h13-q span,.h13-q b{text-align:left}
.h13-q span{font-size:13.5px}
.h13-table{aspect-ratio:1.15;max-width:420px;margin:0 auto}
.h13-pod{width:auto;gap:0}
.h13-pod b,.h13-pod small{display:none}
.h13-pod-av{width:54px}
.h13-meet-cap{display:none}
.h13-roster{display:block;list-style:none;margin:20px 0 0;padding:0}
.h13-roster li button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);width:100%;min-height:56px;padding:12px 0;border-top:1px solid var(--ln);cursor:pointer}
.h13-roster li:last-child button{border-bottom:1px solid var(--ln)}
.h13-roster b{font-size:16px;font-weight:600;color:#fff}
.h13-roster small{font-size:13px;color:var(--t3)}
.h13-roster span{display:block;max-height:0;overflow:hidden;font-size:14.5px;line-height:1.45;color:var(--t2);transition:max-height .35s,margin .35s}
.h13-roster button[aria-expanded="true"] span{max-height:6em;margin-top:6px}
.h13-roster button[aria-expanded="true"] b{color:var(--am2)}
.h13-agenda li{grid-template-columns:60px minmax(0,1fr)}
.h13-orbit{aspect-ratio:auto;margin-top:40px}
.h13-orbit-r,.h13-orbit-dot{display:none}
.h13-orbit-c{position:static;transform:none;margin-bottom:20px}
.h13-orbit ul{display:grid;grid-template-columns:1fr 1fr;gap:6px;text-align:left}
.h13-orbit li{position:static;transform:none}
.h13 .h13-orbit li a{width:100%;white-space:normal;line-height:1.25;padding:8px 10px;border:1px solid var(--ln)}
.h13-btns .h13-btn{flex:1 1 100%}
.h13-pg{grid-template-columns:1fr;gap:2px}
.h13-pg dd+dt{margin-top:8px}
.h13-lede{font-size:16px}
.h13-ag-does,.h13-ag-say,.h13-agenda p,.h13-roster span,.h13-tl-s p,.h13-run-list p,.h13-qa .a,.h13-pg{font-size:15.5px}
.h13-ag-say{min-height:0}
.h13-src,.h13-note,.h13-ring-n,.h13-roster small,.h13-tl-k{font-size:13.5px}
.h13-svc>button,.h13-qa button{font-size:16.5px}
.h13-board{padding:16px 12px 16px 8px}
.h13-atlas p{font-size:15px}
.h13 .h13-ag-link,.h13 .h13-tl-link,.h13-ctr,.h13-client,.h13-art-k,.h13-ag-id{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
.h13-mq-t{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
.h13-mq-t li[aria-hidden]{display:none}
.h13 *{animation:none!important;transition-duration:.01ms!important}
}
/* ===== v14: brand book type scale (Roboto only) ===== */
.h13,.h13 *{font-family:"Roboto",system-ui,sans-serif}
.h13-tile,.h13-lad-ax,.h13-wm--e,.h13-mi--sales em{font-family:"Roboto Mono",ui-monospace,monospace}
.h13-h2{font-weight:700;letter-spacing:-.035em}
.h13-h2 em,.h13-trust-h,.h13-grp-h em,.h13-ag-verb,.h13-agenda .d,.h13-pg dt,.h13-tl-k em{font-style:italic;font-weight:300;letter-spacing:-.01em}
.h13-trust-h{font-size:clamp(22px,2.2vw,32px)}
.h13-ring-v,.h13-lad-m b,.h13-q b,.h14-serp-p b,.h13-art-k b{font-weight:900}
.h13-grp-h,.h13-ind-c h3,.h13-tl-s h3,.h13-run-c h3,.h13-run-list h3,.h13-panel h3,.h13-faq-g>h3,.h13-slab-n,.h13-agenda b,.h13-qa button,.h13-svc>button,.h13-pod b,.h13-roster b,.h13-ag-top b,.h13-ag-id b,.h13-atlas b{font-weight:500;font-style:normal}
.h13-faq-g>h3{font-size:20px;color:var(--am2)}
.h13-lede{font-size:clamp(16px,1.3vw,18px);font-weight:400;line-height:1.55}
.h13-pg,.h13-pg dd,.h13-ag-does,.h13-tl-s p,.h13-run-c p,.h13-run-list p,.h13-agenda p,.h13-qa .a,.h13-meet-cap,.h13-atlas p,.dual-half .tagline{font-size:16px;line-height:1.55;font-weight:400}
.h13-pg dt{font-size:14px;color:var(--t3)}
.h13-src,.h13-note,.h13-ring-n,.h13-tl-k,.h13-roster small,.h13-ag-top small,.h13-ag-id,.h13-pod small,.h13-lad-m small,.h14-serp-k,.h14-serp-p,.h13-art-k span,.h13-ag-say,.h14-next-q{font-size:14px;font-weight:400}
.h13-src,.h13-note,.h13-ring-n,.h13-tl-k,.h13-roster small,.h13-ag-top small,.h13-pod small,.h13-lad-m small,.h14-serp-k,.h14-serp-p{color:var(--t3)}
.h13 .h13-btn,.h13 .h13-tl-link,.h13 .h13-orbit li a,.h13 .h13-orbit-c a,.h13 .h13-ag-link{font-weight:500}
.h13-client{font-size:14px}
/* client wordmarks: one family, six treatments */
.h13-wm--a{font-weight:900}.h13-wm--b{font-style:italic;font-weight:300;font-size:30px}.h13-wm--c{font-weight:500}.h13-wm--d{font-weight:300;font-size:26px}.h13-wm--d i{font-style:italic}.h13-wm--e{font-weight:500}.h13-wm--f{font-style:italic;font-weight:400}
/* ===== v14: Zegaz keywords as ranked search results ===== */
.h14-serp{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.h14-serp li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"q p" "k p";align-items:center;gap:6px 16px;padding:14px 16px;border-radius:14px;border:1px solid var(--ln2);background:rgba(4,8,22,.55)}
.h14-serp-q{grid-area:q;display:flex;align-items:center;gap:10px;min-width:0;padding:10px 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:16px;font-weight:400}
.h14-serp-q svg{flex:none;width:16px;height:16px;color:var(--loch)}
.h14-serp-q span{min-width:0;overflow-wrap:anywhere}
.h14-serp-k{grid-area:k;padding-left:16px}
.h14-serp-p{grid-area:p;display:flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1.2}
.h14-serp-p b{font-size:clamp(30px,3vw,42px);letter-spacing:-.03em;color:var(--sun)}
.h14-serp li::before{content:"";grid-area:q;justify-self:start;align-self:start;margin:-8px 0 0 -6px;width:0;height:0}
@media (max-width:760px){.h14-serp li{grid-template-columns:1fr;grid-template-areas:"q" "k" "p";gap:8px}.h14-serp-k{padding-left:4px}.h14-serp-p{flex-direction:row;align-items:baseline;gap:8px;text-align:left}}
/* ===== v14: portrait set (one crop, one frame, one grade) ===== */
.h13-pod-av{background:radial-gradient(120% 95% at 50% 18%,var(--loch) 0%,var(--loch2) 52%,var(--ink) 100%);border:1.5px solid rgba(0,128,195,.65)}
.h13 .h13-pod-av img{position:absolute;display:block;max-width:none;width:var(--w,100%);height:auto;left:var(--l,0);top:var(--t,0);object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(1.06);mix-blend-mode:luminosity;opacity:.96;transition:filter .45s,opacity .45s}
.h13-pod.is-on .h13-pod-av img,.h13-pod:hover .h13-pod-av img,.h13-pod:focus-visible .h13-pod-av img{filter:none;mix-blend-mode:normal;opacity:1}
.h13-pod-av .mono{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(18px,1.8vw,24px);font-weight:300;letter-spacing:.04em;color:#fff}
.h13-pod.is-on .h13-pod-av,.h13-pod:hover .h13-pod-av{border-color:var(--sun);box-shadow:0 0 0 5px rgba(252,185,19,.16),0 0 24px rgba(252,185,19,.45)}
/* ===== v14: every section ends with a next step ===== */
.h14-next{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:clamp(28px,3vw,44px)}
.h13-trust .h14-next{justify-content:center;margin-top:24px}
.h13-stack .h14-next{margin-top:clamp(36px,4vw,56px)}
.h14-next--studios{padding-bottom:clamp(48px,6vw,80px)}
.h14-next-q{margin:0;color:var(--t2)}
.h14-routes{display:grid!important;grid-template-columns:repeat(3,minmax(0,260px));justify-content:center}
.h14-routes .h13-btn,.h13 .h13-orbit-c a{white-space:nowrap}
.h14-routes .h13-btn{width:100%}
@media (max-width:760px){.h14-routes{grid-template-columns:1fr}}
/* ===== v14: mobile action bar ===== */
.h14-bar{display:none}
@media (max-width:760px){
.ck-mbar,.om-sticky{display:none!important}
.h14-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(4,7,20,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(160,190,240,.18);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.h14-bar[hidden]{display:grid;visibility:hidden}
.h14-bar.is-on{transform:none;visibility:visible}
.h14-bar a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;border:1px solid rgba(160,190,240,.3);color:#fff;font:500 16px "Roboto",system-ui,sans-serif;text-decoration:none}
.h14-bar a.is-p{background:#FCB913;border-color:#FCB913;color:#1F1F1F}
}
@media (prefers-reduced-motion:reduce){.h14-bar{transition:none}}
/* ===== v15: team section ===== */
.h15-meet-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);align-items:start}
.h15-ag-h{margin:34px 0 12px;font-size:16px;font-weight:500;color:#fff}
.h15-meet-grid .h13-agenda{margin-top:16px}
.h15-team{align-self:center}
@media (max-width:1020px){.h15-meet-grid{grid-template-columns:1fr}.h15-team{order:2}}
/* ==== team-card-v3.css ==== */
/* Team card v3 (forked from v2): for the v2 studio portraits. No edge vignette, light gradient behind the name only, 3x2 desktop, 2x3 tablet, 2 columns mobile.
Team card v2 (forked from v1): adds .tc1-row5 (five-across team row on service pages) and the small .tc1--mini card. v1 notes follow.
Team card v1. One portrait card for every team component (Homepage v15 team section, About v9 founder and team grid).
4:5 portrait, natural colour, one gentle grade, one dark edge vignette, one ink bottom gradient, Lochmara eye badge top right.
Faces align through per-person --w (image width), --l (left) and --t (top), set from config.team[].crop. Roboto only. */
.tc1-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin:0;padding:0;list-style:none}
.tc1{position:relative;margin:0;font-family:"Roboto",system-ui,sans-serif;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tc1:hover,.tc1:focus-within,.tc1.is-tap{transform:translateY(-4px)}
.tc1-ph{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:14px;background:radial-gradient(85% 70% at 50% 34%,#2C5A82 0%,#173A5C 48%,#0B1A2C 100%);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 50px -30px rgba(0,0,0,.9);isolation:isolate}
.tc1-ph img{position:absolute;display:block;max-width:none;height:auto;width:var(--w,100%);left:var(--l,0);top:var(--t,0);z-index:0}
.tc1-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(31,31,31,0) 0%,rgba(31,31,31,.55) 70%,rgba(31,31,31,.7) 100%)}
.tc1-mono{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:18%;font-size:clamp(34px,4vw,56px);font-weight:300;letter-spacing:.06em;color:rgba(255,255,255,.92);z-index:0}
.tc1-badge{position:absolute;top:10px;right:10px;z-index:2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.tc1-badge i{display:block;width:22px;aspect-ratio:96/85;background:url("assets/team/badge-eye.png") no-repeat center/contain}
.tc1-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:3px;padding:12px 14px 13px}
.tc1-name{align-self:flex-start;font-size:16px;font-weight:500;line-height:1.25;color:#fff;background:linear-gradient(#FCB913,#FCB913) no-repeat 0 100%/0 1.5px;padding-bottom:2px;transition:background-size .35s cubic-bezier(.2,.8,.2,1)}
.tc1:hover .tc1-name,.tc1:focus-within .tc1-name,.tc1.is-tap .tc1-name{background-size:100% 1.5px}
.tc1-role{font-size:14px;font-weight:400;line-height:1.3;color:#C9CCCD}
.tc1-tag{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-family:"Roboto Mono",ui-monospace,monospace;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#FCB913}
.tc1-tag::before{content:"";width:24px;height:1px;background:#FCB913}
.tc1--lead .tc1-name{font-size:20px}.tc1--lead .tc1-role{font-size:15px}.tc1--lead .tc1-badge{top:14px;right:14px}
@media (max-width:1100px){.tc1-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.tc1-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tc1-name{font-size:15px}.tc1-role{font-size:13.5px}.tc1-cap{padding:10px 11px 11px}.tc1-badge{top:8px;right:8px;width:28px;height:28px}.tc1-badge i{width:20px}}
@media (prefers-reduced-motion:reduce){.tc1,.tc1-name{transition:none}}
.tc1-row5{grid-template-columns:repeat(var(--n,5),minmax(0,1fr));border-top:1px solid var(--border-1,rgba(255,255,255,.08));padding-top:clamp(28px,3vw,40px)}
@media (max-width:1100px){.tc1-row5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.tc1-row5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tc1--mini .tc1-cap{display:none}.tc1--mini .tc1-ph::after{display:none}.tc1--mini .tc1-badge{top:6px;right:6px;width:24px;height:24px}.tc1--mini .tc1-badge i{width:17px}
/* ==== inline style #fixB ==== */
.jr-dot{width:44px;height:44px;margin:-8px}.jr--m .jr-dot{width:44px;height:44px;margin:-7px}
/* ==== inline style #fixD-reserve-ck ==== */
/* fix pass D: space for the trust line under the hero buttons */.hero-cta-group [data-ck="under"]:empty{min-height:134px}
/* ---- fix pass E: rendering cost ---- */
/* 1. sections below the first screen skip style, layout and paint until near the viewport. Sections holding a pinned scroll engine are left alone. html.cv-off turns it off (anchor jumps). */
/* 2. phones: the first screen keeps its look but stops running effects (no backdrop blur, no CSS loops) */
@media (max-width:767px){
.nav,.nav *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.nav.is-scrolled{background-color:color-mix(in srgb,var(--bg,#05070b) 94%,transparent)}
.grain{animation:none!important}
main > section:first-of-type,main > section:first-of-type *,main > section:first-of-type *::before,main > section:first-of-type *::after,
.hero,.hero *,.hero *::before,.hero *::after,#hero,#hero *,.jr-ch0,.jr-ch0 *,.jr-ch0 *::before,.jr-ch0 *::after{animation:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
/* ---- fix pass F ---- */
/* content-visibility now uses a data attribute set in the HTML (no :has() selector, cheaper style recalc) */
@supports (content-visibility:auto){html:not(.cv-off) [data-cv]{content-visibility:auto;contain-intrinsic-size:auto 900px}}
/* quick contact bar: its space is reserved from first paint, it moves with transform only */
@media (max-width:767px){body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}body.ck-app-open{padding-bottom:0}.ck-mbar{transition:transform .3s cubic-bezier(.2,.8,.2,1);will-change:transform}body.cc-open .ck-mbar{bottom:0!important;transform:translateY(calc(-1 * var(--cc-h,0px)))}}
/* ---- fix pass F: phones skip the heaviest paint effects on this page (look kept with static colour) ---- */
@media (max-width:767px){.sh-flame,.hero .ck-under::before,.ck-on-photo .ck-under::before,.h13-eye,.h13-beam path,.h13-beam circle,.h13-u.is-on .win,.h13-flow,.h13-table svg.lines line.is-on,.h13-fp,.h13-st.is-on circle{filter:none!important}
.mx-in,.mx-sheet,.nav,.ck-capacity,.ck-panel,.ck-mbar,.jr-card,.jr-caption,.jr-moon-c,.cc-banner,.cc-gate,.nav-dd-menu::before,.h13-glass,.h13-rail,.h14-bar,.tc1-badge{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.grain,.cursor-ring,[data-theme="light"] .grain,.h13 .h13-pod-av img{mix-blend-mode:normal!important}
.sh-flame,.sh-spark,.loader img,.hero-layer img,.hero-arcs .packet,.hero-arcs .ping-ring,.hero-meta .live-dot,.marquee-track,.intel-head .stamp .dot,.intel-stage .corner.tr .dot,.footer-main .live .dot,.ck-spin,.ck-cap-dot::after,.jr-hint::before,.h13-mq-t,.h13-iso-core::before,.h13-mi--intake i,.h13-mi--research b,.h13-mi--qualifier i,.h13-mi--sales i,.h13-mi--scheduler span.k,.h13-mi--crm b,.h13-mi--reporter i,.h13-flow,.h13-orbit-dot{animation:none!important}}
.h13-chan{margin:22px 0 0;max-width:none}.h13-chan a{color:var(--signal,#3AA0D2);text-decoration:underline;text-underline-offset:3px}
/* ==== pass M: accessibility (grey text lightened slightly to 4.5:1 on the dark theme) ==== */
html:not([data-theme="light"]){--fg-4:#8B93A0}
/* ==== pass N ==== */
/* pass N: the film grain is a CSS layer on html::after, not an element, so it can never be the largest paint */
html::after{content:"";animation:none!important}
@media (max-width:767px){html::after{animation:none!important}}
/* ==== pass P: shared client logos ==== */
/* client logos v1 (pass P): shared tiles for client and partner logos */
.cl-logo{display:inline-flex;align-items:center;justify-content:center;line-height:0;border-radius:12px}
.cl-logo img{display:block;width:auto;height:100%;max-height:100%;max-width:100%}
.cl-tile--own,.cl-tile--dark{background:transparent}
.cl-tile--white{background:#fff;padding:8px 12px}
.cl-tile--text{line-height:1.2;font-weight:700;letter-spacing:.02em;color:var(--fg-1)}
.cl-strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.cl-strip li{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cl-strip a{color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:6px}
.cl-strip .cl-logo{height:56px}
.cl-strip .cl-tile--text{height:56px;padding:0 4px;font-size:18px}
.cl-kind{font-size:12px;color:var(--fg-3);letter-spacing:.04em;text-transform:uppercase}
.cs-hero-name .cl-logo{height:56px}
.cs-hero-name .cl-tile--white{height:64px}
.b3-name .cl-logo{height:40px}
.cs-hero-logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 14px}
.cs-hero-logos .cl-logo{height:56px}
.cs-hero-logos .cl-x{font-size:20px;color:var(--fg-3)}
.hp-more-cases{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.hp-more-cases a{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--border-1);border-radius:16px;color:var(--fg-1);text-decoration:none}.hp-more-cases a:hover{border-color:#0080C3}.hp-more-cases .cl-logo{height:44px;align-self:flex-start}.hmc-t{font-weight:700}.hmc-s{font-size:14px;color:var(--fg-2)}
/* ==== pass R: client logos v3 ==== */
/* client logos v3 (pass R: own-product wordmark) based on v2 (pass Q): shared tiles, strips and card badges for client and partner logos (v1 rules plus compact strip and badges) */
.cl-logo{display:inline-flex;align-items:center;justify-content:center;line-height:0;border-radius:12px}
.cl-logo img{display:block;width:auto;height:100%;max-height:100%;max-width:100%}
.cl-tile--own,.cl-tile--dark{background:transparent}
.cl-tile--white{background:#fff;padding:8px 12px}
.cl-tile--text{line-height:1.2;font-weight:700;letter-spacing:.02em;color:var(--fg-1)}
.cl-strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.cl-strip li{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cl-strip a{color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:6px}
.cl-strip .cl-logo{height:56px}
.cl-strip .cl-tile--text{height:56px;padding:0 4px;font-size:18px}
.cl-kind{font-size:12px;color:var(--fg-3);letter-spacing:.04em;text-transform:uppercase}
.cs-hero-name .cl-logo{height:56px}
.cs-hero-name .cl-tile--white{height:64px}
.b3-name .cl-logo{height:40px}
.cs-hero-logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 14px}
.cs-hero-logos .cl-logo{height:56px}
.cs-hero-logos .cl-x{font-size:20px;color:var(--fg-3)}
[data-client-logos]:not([data-cl-done]){min-height:72px}
[data-client-logos][data-variant="compact"]:not([data-cl-done]){min-height:58px}
.cl-strip--compact{flex-wrap:wrap;gap:10px 22px}
.cl-strip--compact .cl-logo{height:40px}
.cl-strip--compact .cl-tile--text{height:40px;font-size:15px}
.cl-strip--compact li{position:relative;flex-direction:row;align-items:center;gap:6px}
.cl-strip--compact a{flex-direction:row;align-items:center;gap:6px}
.cl-strip--compact img{filter:grayscale(1);opacity:.85;transition:filter .25s,opacity .25s}
.cl-strip--compact a:hover img,.cl-strip--compact a:focus-visible img{filter:none;opacity:1}
.cl-strip--compact .cl-kind{font-size:10.5px;padding:2px 6px;border:1px solid var(--border-1);border-radius:999px;color:var(--fg-2)}
.cl-badge{position:absolute;left:14px;bottom:14px;z-index:2}
.cl-badge .cl-logo{height:40px;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.cl-badge .cl-tile--text{background:rgba(10,12,17,.75);color:#fff;padding:0 12px;border-radius:10px;font-size:15px}
.cl-band{padding:clamp(28px,4vw,44px) 0}
.cl-band h2{margin:0 0 14px;font-size:clamp(20px,2.2vw,28px)}
.ft-trust{padding:20px 0;border-top:1px solid var(--border-1)}
.ft-trust p{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.cl-badge{display:flex;gap:8px;align-items:center}
.cl-badge .cl-tile--dark{background:rgba(10,12,17,.72);padding:6px 10px}
.card-cover{position:relative}
.cl-logo .cl-wm{margin-left:10px;font:700 18px/1 "Roboto","Roboto Fallback",system-ui,sans-serif;color:#1F1F1F;white-space:nowrap}
.cl-logo:has(.cl-wm){gap:0}
/* ==== pass U: Trusted by rail renders logos like the shared client-logos component (no wordmark-era white filter, grey at rest, colour on hover, Partner tag) ==== */
.h13-wm img{filter:none!important}
.h13-wm--logo{display:inline-flex;align-items:center;gap:8px}
.h13-wm--logo .cl-logo{height:44px}
.h13-wm--logo .cl-logo img{height:100%;width:auto;max-width:180px;filter:grayscale(1)!important;opacity:.85;transition:filter .25s,opacity .25s}
.h13-wm--logo:hover .cl-logo img,.h13-wm--logo:focus-visible .cl-logo img{filter:none!important;opacity:1}
.h13-wm--logo .cl-kind{font-size:10.5px;padding:2px 6px;border:1px solid var(--border-1);border-radius:999px;color:var(--fg-2);letter-spacing:.04em;text-transform:uppercase}
#h13Rail:empty{min-height:110px}@media (max-width:760px){#h13Rail:empty{min-height:171px}}