/* ==========================================================================
   SEO Emperor — design system
   Graphite base · fog type · one cool "ice" metal + cobalt signal.
   Geist (display/body) · Instrument Serif italic (accent) · Geist Mono (data).
   Motif: hairline column rulers — the page reads like an instrument panel.
   ========================================================================== */

:root {
  /* palette sampled from the crest: pale gold #f0f050 → #f0b000 → amber #a06000, on warm black */
  --ink: #080706;
  --ink-2: #0c0b09;
  --panel: #110f0c;
  --raise: #1a1712;
  --line: rgba(245, 228, 190, .08);
  --line-2: rgba(245, 228, 190, .15);
  --fog: #f6f2ea;
  --text: #cdc6b8;
  --mute: #9a9282;
  --dim: #645d50;
  --ice: #f3d88c;
  --signal: #f0b429;
  --signal-2: #c98a12;
  --mint: #7fd8b2;
  --gold: #d98a4a;
  --rose: #ff8f7a;
  --glass: rgba(22, 19, 14, .62);
  --metal: linear-gradient(180deg, #fff4c2 0%, #f7d35a 34%, #e2a21f 66%, #a8680c 100%);

  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --wrap: 1360px;
  --gut: clamp(16px, 4vw, 48px);
  --r: 14px;
  --r-lg: 22px;
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io: cubic-bezier(.65, 0, .35, 1);
  --nav-h: 76px;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; overflow-x: clip; } /* no CSS smooth scroll: it breaks ScrollTrigger measuring; anchors are smoothed in JS */
body {
  margin: 0; background: var(--ink); color: var(--text);
  font: 400 1.0625rem/1.62 var(--f-sans); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--fog); font-weight: 560; }
em { font-style: italic; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; color: var(--fog); font-weight: 500; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.band-title, .final-h, .why-out, .foot-tag, .hero-h1-b { text-wrap: balance; }
::selection { background: rgba(240, 180, 41, .32); color: #fff; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; color: var(--mute); }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); position: relative; }
main { position: relative; z-index: 1; }

.skip { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--fog); color: var(--ink); font-weight: 600; transition: top .2s; }
.skip:focus { top: 12px; }

/* texture + rulers */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .035; contain: strict;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.rulers { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: flex; justify-content: space-between;
  max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.rulers i { width: 1px; height: 100%; background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent); }

/* ---------- type ---------- */
.eyebrow { font: 500 .74rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 26px; display: flex; align-items: center; gap: 10px; }
.sec-idx { font: 500 .72rem/1 var(--f-mono); letter-spacing: .12em; color: var(--signal); margin-bottom: 22px; }
.h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: .96; letter-spacing: -.045em; font-weight: 500; }
.h2 { font-size: clamp(2rem, 4.1vw, 3.75rem); line-height: 1; letter-spacing: -.038em; }
.h2s { font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.12; letter-spacing: -.028em; margin-bottom: 20px; }
.h3 { font-size: 1.25rem; letter-spacing: -.02em; margin: 1.6em 0 .6em; }
.h1 em, .h2 em, .final-h em, .foot-tag em { font-family: var(--f-serif); font-weight: 400; letter-spacing: -.01em; color: var(--ice); }
.lede { font-size: clamp(1.08rem, 1.35vw, 1.28rem); line-height: 1.55; color: var(--text); max-width: 40rem; margin-top: 28px; }
.lede-wide { max-width: 56rem; }

.text-link, .arrow-link, .ctx-link, .prose a:not(.btn):not(.cite), .lede a:not(.cite) {
  color: var(--fog); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  background-image: linear-gradient(90deg, var(--signal), var(--ice)); padding-bottom: 1px; transition: background-size .5s var(--e-out), color .2s;
}
.text-link:hover, .arrow-link:hover, .ctx-link:hover, .prose a:not(.btn):not(.cite):hover { background-size: 0 1px; background-position: 100% 100%; color: #fff; }
.arrow-link { white-space: nowrap; }
.link-row { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.link-row > span { color: var(--dim); }
.cite {
  display: inline-block; vertical-align: .18em; margin: 0 2px; padding: 2px 6px 1px; border: 1px solid var(--line-2); border-radius: 999px;
  font: 500 .58rem/1.3 var(--f-mono); letter-spacing: .04em; color: var(--mute); transition: color .2s, border-color .2s, background .2s;
}
.cite:hover { color: var(--ink); background: var(--ice); border-color: var(--ice); }

/* ---------- split / reveal system (enhanced only when JS runs) ---------- */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .9s var(--e-out), transform 1.1s var(--e-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .02em .12em; margin: -.06em -.02em -.12em; }
.wi { display: inline-block; will-change: transform; }
.js [data-split]:not(.is-in) .wi { transform: translate3d(0, 108%, 0); }
.js [data-split] .wi { transition: transform 1.05s var(--e-out); transition-delay: calc(var(--i, 0) * 38ms); }
.js [data-split="chars"] .wi { transition-delay: calc(var(--i, 0) * 22ms); }
.rm [data-reveal], .rm [data-split] .wi { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- buttons ---------- */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.btn {
  --bg: transparent; position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px 0 24px;
  border-radius: 999px; font-weight: 520; font-size: .98rem; letter-spacing: -.01em; isolation: isolate; overflow: hidden; white-space: nowrap;
  transition: color .35s var(--e-out), border-color .35s, box-shadow .5s var(--e-out);
}
.btn-label { position: relative; z-index: 2; }
.btn-ico { position: relative; z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; transition: background .35s; }
.btn-ico .ico { width: 16px; height: 16px; transition: transform .55s var(--e-out); }
.btn:hover .btn-ico .ico { animation: nudge .7s var(--e-out); }
@keyframes nudge { 0% { transform: none; } 45% { transform: translateX(140%); } 46% { transform: translateX(-140%); } 100% { transform: none; } }
.btn::before { /* sheen sweep: transform only */
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-120%);
}
.btn:hover::before { transform: translateX(120%); transition: transform .9s var(--e-out); }
.btn-primary { color: #140e02; background: var(--metal); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 30px -12px rgba(240, 180, 41, .55); }
.btn-primary .btn-ico { background: #140e02; color: var(--fog); }
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 44px -14px rgba(240, 180, 41, .8); }
.btn-ghost { color: var(--fog); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); backdrop-filter: blur(8px); }
.btn-ghost::before { background: linear-gradient(105deg, transparent 30%, rgba(243, 216, 140, .16) 50%, transparent 70%); }
.btn-ghost .btn-ico { background: rgba(255, 255, 255, .06); }
.btn-ghost:hover { border-color: rgba(243, 216, 140, .45); }
.btn-sm { min-height: 42px; font-size: .9rem; padding-left: 18px; padding-right: 6px; gap: 10px; }
.btn-sm .btn-ico { width: 30px; height: 30px; }
.btn[data-magnetic] { will-change: transform; }
.linkish { color: var(--mute); text-align: left; transition: color .2s; }
.linkish:hover { color: var(--fog); }

/* ---------- status pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2);
  font: 500 .66rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text); white-space: nowrap; background: rgba(255, 255, 255, .02); }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--mute)); box-shadow: 0 0 10px var(--c, transparent); }
.st-regulated { --c: var(--signal); } .st-opening { --c: var(--mint); } .st-restricted { --c: #c9a6ff; }
.st-monopoly { --c: var(--gold); } .st-watchlist { --c: #9aa3b2; } .st-prohibited { --c: var(--rose); } .st-state { --c: var(--signal); }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; padding: 18px var(--gut) 0; transition: padding .5s var(--e-out); }
.nav-in {
  max-width: var(--wrap); margin: 0 auto; height: var(--nav-h); display: flex; align-items: center; gap: 28px;
  padding: 0 10px 0 22px; border-radius: 999px; border: 1px solid transparent; position: relative;
  transition: height .5s var(--e-out), background .5s, border-color .5s, box-shadow .5s, max-width .6s var(--e-out);
}
.nav.is-scrolled { padding-top: 12px; }
.nav.is-scrolled .nav-in { height: 60px; max-width: 1180px; background: rgba(14, 12, 9, .66); border-color: var(--line-2);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .8); }
.nav.is-hidden:not(:focus-within) { transform: translateY(-120%); }
.nav { transition: transform .6s var(--e-out), padding .5s var(--e-out); }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--fog); flex-shrink: 0; }
.logo-img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(240, 180, 41, .28)); transition: width .5s var(--e-out), height .5s var(--e-out); }
.nav.is-scrolled .logo-img { width: 38px; height: 38px; }
.logo-foot .logo-img-lg { width: 150px; height: 150px; filter: drop-shadow(0 18px 40px rgba(240, 180, 41, .25)); }
.logo-word em { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-word { font-weight: 560; font-size: 1.04rem; letter-spacing: -.02em; }
.logo-word em { font-family: var(--f-serif); font-weight: 400; font-size: 1.2em; letter-spacing: 0; color: var(--ice); }
.nav-main { margin-left: auto; }
.nav-links { display: flex; gap: 2px; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; color: var(--text); font-size: .92rem; transition: color .2s, background .2s; }
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--fog); background: rgba(255, 255, 255, .05); }
.nav-link[aria-current="page"] { color: var(--fog); }
.nav-link[aria-current="page"]::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--signal); margin-left: 2px; }
.chev { width: 14px; height: 14px; transition: transform .4s var(--e-out); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-cta { margin-left: 8px; }
.has-dd { position: static; }
.dd { position: absolute; left: 0; right: 0; top: calc(100% + 10px); pointer-events: none; opacity: 0; transform: translateY(-8px) scale(.985); transform-origin: top center;
  transition: opacity .3s var(--e-out), transform .45s var(--e-out), visibility 0s .45s; visibility: hidden; }
.has-dd.is-open .dd { pointer-events: auto; opacity: 1; transform: none; visibility: visible; transition: opacity .3s var(--e-out), transform .45s var(--e-out); }
.dd-in { border-radius: var(--r-lg); background: rgba(15, 13, 10, .92); border: 1px solid var(--line-2); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); padding: 12px; }
.dd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.dd-mk { grid-template-columns: repeat(4, 1fr); }
.dd-cs { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dd-grid a { display: flex; gap: 14px; padding: 16px; border-radius: 14px; height: 100%; transition: background .25s; }
.dd-grid a:hover, .dd-grid a:focus-visible { background: rgba(255, 255, 255, .045); }
.dd-mk a, .dd-cs a { flex-direction: column; gap: 6px; }
.dd-mk .dd-name, .dd-cs .dd-name { margin: 0; }
.dd-glyph { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-2); padding: 4px; color: var(--ice); }
.dd-glyph .glyph { width: 100%; height: 100%; }
.dd-name { display: block; color: var(--fog); font-weight: 520; font-size: .95rem; margin-bottom: 4px; }
.dd-blurb { display: block; color: var(--mute); font-size: .82rem; line-height: 1.45; }
.has-dd.is-open .dd-grid li { animation: ddIn .5s var(--e-out) both; }
.has-dd.is-open .dd-grid li:nth-child(n) { animation-delay: calc(var(--n, 0) * 30ms); }
@keyframes ddIn { from { opacity: 0; transform: translateY(6px); } }
.dd-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--mute); font-size: .86rem; border-radius: 0 0 12px 12px; transition: color .2s; }
.dd-foot:hover { color: var(--fog); }
.dd-foot .ico { width: 16px; height: 16px; }
.nav-burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; margin-left: auto; }
.nav-burger i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--fog); transition: transform .45s var(--e-out); }
.nav-burger i:first-child { top: 17px; } .nav-burger i:last-child { top: 25px; }
.nav-burger[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }
.mnav { position: fixed; inset: 0; z-index: 99; background: rgba(7, 8, 11, .96); backdrop-filter: blur(20px); overflow-y: auto; padding: 110px var(--gut) 40px; }
.mnav[hidden] { display: none; }
.mnav-in { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.mnav-h { font: 500 .7rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--signal); margin: 18px 0 6px; }
.mnav ul a { display: flex; align-items: center; min-height: 44px; color: var(--fog); font-size: 1.1rem; border-bottom: 1px solid var(--line); }
.mnav-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.mnav-2 a { font-size: 1rem !important; }
.mnav-big { margin: 18px 0 22px; }
.mnav-big a { font-size: 1.9rem !important; letter-spacing: -.03em; min-height: 58px !important; }
.mnav.is-open .mnav-in > * { animation: ddIn .6s var(--e-out) both; }
.mnav.is-open .mnav-in > *:nth-child(2) { animation-delay: .04s; } .mnav.is-open .mnav-in > *:nth-child(3) { animation-delay: .08s; }
.mnav.is-open .mnav-in > *:nth-child(4) { animation-delay: .12s; } .mnav.is-open .mnav-in > *:nth-child(5) { animation-delay: .16s; }
.mnav.is-open .mnav-in > *:nth-child(6) { animation-delay: .2s; }

/* ==========================================================================
   Home · hero + instrument (signature)
   ========================================================================== */
.hero { position: relative; min-height: 100svh; padding: calc(var(--nav-h) + 70px) 0 90px; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-grid { position: absolute; inset: -2px; background:
  linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 88px,
  linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 88px 100%;
  mask-image: radial-gradient(ellipse 80% 70% at 65% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 65% 40%, #000 20%, transparent 75%); overflow: hidden; }
.hero-grid::before { content: ""; position: absolute; inset: -88px 0 0 -88px; background: inherit; animation: gridDrift 14s linear infinite; will-change: transform; }
.hero-grid { background: none; }
.hero-grid::before { background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 88px 100%; }
@keyframes gridDrift { to { transform: translate3d(88px, 88px, 0); } }
.hero-flow { position: absolute; inset: 0; width: 100%; height: 100%; mask-image: linear-gradient(90deg, transparent 30%, #000 62%); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 62%); }
.flow { fill: none; stroke: url(#none); stroke: rgba(243, 216, 140, .12); stroke-width: 1; }
.flow { stroke-dasharray: .04 .96; stroke-dashoffset: 1; animation: flow 9s linear infinite; }
.flow.f0 { stroke: rgba(240, 180, 41, .55); stroke-width: 1.4; animation-duration: 7s; }
.flow.f1 { animation-delay: -2s; animation-duration: 11s; } .flow.f2 { animation-delay: -5s; stroke: rgba(240, 180, 41, .3); }
.flow.f3 { animation-delay: -1s; animation-duration: 13s; } .flow.f4 { animation-delay: -7s; } .flow.f5 { animation-delay: -3s; animation-duration: 10s; }
@keyframes flow { to { stroke-dashoffset: 0; } }
.hero-glow { position: absolute; width: 900px; height: 900px; right: -200px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 138, 18, .22), rgba(240, 180, 41, .06) 45%, transparent 70%); filter: blur(10px); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(130, 227, 196, .6); animation: live 2.4s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(130, 227, 196, 0); } 100% { box-shadow: 0 0 0 0 rgba(130, 227, 196, 0); } }
.hero-h1 { font-size: clamp(3rem, 7.2vw, 7.4rem); line-height: .9; letter-spacing: -.055em; font-weight: 520; }
.hero-h1-a { display: block; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }
.hero-h1-a .wi { background: inherit; -webkit-background-clip: text; background-clip: text; }
.js .hero-h1-a .wi { background: var(--metal); background-size: 100% 1em; -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-h1-dash { display: none; }
.hero-h1-b { display: block; margin-top: .22em; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: .56em; line-height: 1.02; letter-spacing: -.02em; color: var(--ice); max-width: 12em; }
.hero-lede { margin-top: 34px; max-width: 34rem; font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.6; }
.js [data-hero-fade] { opacity: 0; transform: translateY(16px); }
.rm [data-hero-fade] { opacity: 1; transform: none; }
.hero-scroll { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; border: 1px solid var(--line-2); border-radius: 20px; transform: translateX(-50%); }
.hero-scroll span { position: absolute; left: 50%; top: 8px; width: 2px; height: 8px; margin-left: -1px; border-radius: 2px; background: var(--ice); animation: wheel 2s var(--e-io) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

.instrument { position: relative; margin: 0; perspective: 1400px; }
.inst-window {
  position: relative; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(28, 24, 18, .82), rgba(14, 12, 9, .9));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  transform: rotateY(-9deg) rotateX(5deg); transform-style: preserve-3d; transition: transform 1.2s var(--e-out); overflow: hidden;
}
.inst-window::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, .06), transparent 40%); pointer-events: none; }
.inst-bar { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.inst-dots { display: flex; gap: 6px; }
.inst-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.inst-search { flex: 1; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); font: 400 .86rem var(--f-mono); color: var(--fog); min-width: 0; }
.inst-search .ico { width: 15px; height: 15px; color: var(--mute); flex-shrink: 0; }
.inst-q { white-space: nowrap; overflow: hidden; }
.caret { width: 1.5px; height: 16px; background: var(--signal); animation: blink 1s steps(1) infinite; margin-left: -6px; }
@keyframes blink { 50% { opacity: 0; } }
.inst-tag { font: 500 .62rem var(--f-mono); letter-spacing: .08em; color: var(--dim); text-transform: uppercase; white-space: nowrap; }
.serp { position: relative; padding: 10px 12px; height: calc(7 * 58px + 20px); }
.serp-row { position: absolute; left: 12px; right: 12px; top: calc(10px + (var(--p, 1) - 1) * 58px); height: 50px; display: flex; align-items: center; gap: 14px; padding: 0 14px;
  border-radius: 12px; border: 1px solid transparent; transition: top 1s var(--e-out), background .6s, border-color .6s; }
.serp-row[data-pos="1"] { --p: 1; } .serp-row[data-pos="2"] { --p: 2; } .serp-row[data-pos="3"] { --p: 3; } .serp-row[data-pos="4"] { --p: 4; }
.serp-row[data-pos="5"] { --p: 5; } .serp-row[data-pos="6"] { --p: 6; } .serp-row[data-pos="7"] { --p: 7; }
.serp-pos { width: 26px; font: 500 .8rem var(--f-mono); color: var(--dim); text-align: right; }
.serp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.serp-title i { display: block; height: 7px; width: var(--w); border-radius: 4px; background: rgba(243, 216, 140, .18); }
.serp-url { font: 400 .7rem var(--f-mono); color: var(--mute); }
.serp-delta { font: 500 .7rem var(--f-mono); color: var(--mint); opacity: 0; transition: opacity .4s; }
.serp-row.is-you { background: linear-gradient(90deg, rgba(240, 180, 41, .16), rgba(240, 180, 41, .03)); border-color: rgba(240, 180, 41, .35); z-index: 2; }
.serp-row.is-you .serp-pos, .serp-row.is-you .serp-url { color: var(--signal); }
.serp-row.is-you .serp-title i { background: linear-gradient(90deg, var(--ice), rgba(243, 216, 140, .35)); }
.serp-row.is-you.is-top { box-shadow: 0 0 0 1px rgba(240, 180, 41, .45), 0 18px 40px -18px rgba(201, 138, 18, .8); }
.serp-row.is-you.is-top .serp-delta { opacity: 1; }
.inst-foot { display: flex; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--line); font: 500 .66rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.inst-pos b { color: var(--fog); font-weight: 500; }
.funnel { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 16px; transform: rotateY(-9deg) rotateX(5deg); }
.funnel li { position: relative; padding: 12px 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(14, 12, 9, .7); backdrop-filter: blur(10px); overflow: hidden; }
.fn-i { display: block; font: 500 .6rem var(--f-mono); color: var(--dim); letter-spacing: .08em; margin-bottom: 8px; }
.fn-t { display: block; font: 500 .66rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.fn-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--signal-2), var(--ice)); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--e-out); }
.funnel li.is-on { border-color: rgba(240, 180, 41, .3); }
.funnel li.is-on .fn-t { color: var(--fog); }
.funnel li.is-on .fn-bar i { transform: scaleX(1); }
.chip { position: absolute; z-index: 3; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(20, 17, 12, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9); display: flex; flex-direction: column; gap: 4px; will-change: transform; }
.chip-k { font: 500 .58rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.chip-v { font-size: 1.3rem; font-weight: 520; color: var(--fog); letter-spacing: -.03em; line-height: 1; }
.chip-a { left: -44px; top: 34%; } .chip-b { right: -26px; top: 12%; } .chip-c { right: -30px; top: 60%; }
.chip-b .chip-v { color: var(--mint); }
.js .chip { opacity: 0; }
.rm .chip { opacity: 1; }

/* ==========================================================================
   Home · stats instrument
   ========================================================================== */
.stats { position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(17, 15, 11, .6), transparent); }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; }
.stat { position: relative; padding: 52px 28px 40px; border-left: 1px solid var(--line); min-height: 280px; display: flex; flex-direction: column; overflow: hidden; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-v { font-size: clamp(3.2rem, 6vw, 5.8rem); font-weight: 480; letter-spacing: -.06em; line-height: .9; color: var(--fog); font-variant-numeric: tabular-nums; }
.stat-v small { font-size: .36em; letter-spacing: -.02em; color: var(--ice); margin-left: .12em; font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.stat-l { margin-top: 14px; color: var(--mute); font-size: .95rem; max-width: 24rem; }
.stat:hover .stat-v { color: #fff; }
.viz-dots { margin-top: auto; display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.viz-dots i { aspect-ratio: 1; border-radius: 3px; background: var(--line-2); transition: background .5s, box-shadow .5s; transition-delay: calc(var(--i) * 70ms); }
.stat.is-in .viz-dots i { background: var(--signal); box-shadow: 0 0 12px rgba(240, 180, 41, .45); }
.viz-ticker { margin-top: auto; height: 28px; overflow: hidden; mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.viz-ticker ul { animation: tick 30s steps(15) infinite; }
.viz-ticker li { height: 28px; line-height: 28px; font: 500 .82rem var(--f-mono); color: var(--ice); }
@keyframes tick { to { transform: translateY(-420px); } }
.viz-ring { margin-top: auto; width: 64px; height: 64px; transform: rotate(-90deg); }
.viz-ring circle { fill: none; stroke: var(--line-2); stroke-width: 3; }
.viz-ring .ring-fill { stroke: var(--signal); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ring 6s var(--e-io) infinite; }
@keyframes ring { 0% { stroke-dashoffset: 1; } 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: .3; } }
.viz-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 96px; }
.stat-wide { padding-bottom: 120px; }
.sp-area { fill: url(#spg); fill: rgba(240, 180, 41, .08); opacity: 0; transition: opacity 1.2s .6s; }
.sp-line { fill: none; stroke: var(--signal); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--e-out) .2s; }
.stat.is-in .sp-line { stroke-dashoffset: 0; } .stat.is-in .sp-area { opacity: 1; }
.stat-wide .stat-l, .stat-wide .stat-v { position: relative; z-index: 1; }

/* ==========================================================================
   Home · why organic (horizontal dossier track)
   ========================================================================== */
.why { position: relative; padding: 140px 0 120px; }
.why-pin { position: relative; }
.why-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 var(--gut); max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; }
.why-intro, .why-outro { grid-column: 1 / -1; }
.why-intro { padding-bottom: 40px; }
.why-h { max-width: 12ch; font-size: clamp(2.4rem, 5.4vw, 5rem); }
.why-kicker { margin-top: 30px; max-width: 30rem; font-size: 1.25rem; color: var(--fog); line-height: 1.45; }
.why-hint { display: none; }
.dossier { position: relative; display: flex; flex-direction: column; min-height: 520px; padding: 34px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(170deg, var(--raise), var(--panel) 60%); overflow: hidden; }
.dossier::after { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -140px; border-radius: 50%; background: radial-gradient(circle, var(--dg, rgba(240, 180, 41, .14)), transparent 65%); pointer-events: none; }
.d-nl { --dg: rgba(130, 227, 196, .12); } .d-uk { --dg: rgba(201, 138, 18, .2); } .d-ps { --dg: rgba(243, 216, 140, .12); }
.dossier header { display: flex; align-items: center; gap: 12px; }
.d-code { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line-2); font: 500 .74rem var(--f-mono); color: var(--ice); }
.d-name { font-size: 1.1rem; letter-spacing: -.01em; }
.d-big { margin: 44px 0 6px; font-size: clamp(4rem, 8vw, 7.8rem); font-weight: 460; letter-spacing: -.065em; line-height: .86; color: var(--fog); display: flex; align-items: baseline; gap: .1em; font-variant-numeric: tabular-nums; }
.d-big small { font-size: .38em; color: var(--ice); letter-spacing: -.02em; }
.d-big .was { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 2px; margin-right: .1em; }
.d-big .ico { width: .32em; height: .32em; color: var(--dim); align-self: center; }
.d-big-word { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.03em; }
.d-cap { font: 500 .72rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.d-text { margin-top: auto; padding-top: 30px; max-width: 30rem; color: var(--text); }
.d-channels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.d-channels li { position: relative; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 .7rem var(--f-mono); color: var(--mute); }
.d-channels li:not(.keep)::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1px; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--e-out); transition-delay: calc(var(--i) * 120ms + .2s); }
.dossier.is-in .d-channels li:not(.keep)::after { transform: scaleX(1); }
.dossier.is-in .d-channels li:not(.keep) { color: var(--dim); }
.d-channels .keep { color: var(--ink); background: var(--ice); border-color: var(--ice); transition: box-shadow .6s 1s; }
.dossier.is-in .d-channels .keep { box-shadow: 0 0 24px rgba(243, 216, 140, .45); }
.d-meter { position: relative; margin-top: 30px; height: 44px; border-radius: 10px; border: 1px solid var(--line-2); overflow: hidden; }
.d-meter i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(130, 227, 196, .75) 0 2px, transparent 2px 6px); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--e-out) .2s; }
.dossier.is-in .d-meter i { transform: scaleX(var(--v)); }
.d-meter span { position: absolute; bottom: -22px; font: 500 .6rem var(--f-mono); color: var(--dim); }
.d-meter span:last-child { right: 0; }
.d-bars { display: grid; gap: 10px; margin-top: 30px; }
.d-bars div { position: relative; height: 34px; border-radius: 8px; background: rgba(255, 255, 255, .03); overflow: hidden; }
.d-bars i { position: absolute; inset: 0; background: rgba(243, 216, 140, .22); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--e-out); }
.d-bars .now i { background: linear-gradient(90deg, var(--signal-2), var(--signal)); transition-delay: .5s; }
.dossier.is-in .d-bars i { transform: scaleX(calc(var(--v) * 2.2)); }
.d-bars span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font: 500 .66rem var(--f-mono); color: var(--fog); letter-spacing: .06em; }
.d-gates { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; margin-top: 30px; }
.d-gates i { aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--line-2); position: relative; transition: background .4s, border-color .4s; transition-delay: calc(var(--i) * 40ms); }
.d-gates i:not(.open)::after { content: ""; position: absolute; inset: 30%; background: linear-gradient(45deg, transparent 45%, var(--dim) 45% 55%, transparent 55%); opacity: 0; transition: opacity .3s; transition-delay: calc(var(--i) * 40ms); }
.dossier.is-in .d-gates i:not(.open)::after { opacity: 1; }
.dossier.is-in .d-gates i.open { background: var(--signal); border-color: var(--signal); }
.why-outro { display: flex; align-items: center; padding-top: 60px; }
.why-out { font-size: clamp(2rem, 4.4vw, 4rem); letter-spacing: -.04em; line-height: 1.02; color: var(--fog); max-width: 16ch; }
.why-progress { display: none; }

/* pinned horizontal mode (desktop, motion allowed) */
.pin-ok .why { padding: 0; }
.pin-ok .why-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.pin-ok .why-track { display: flex; gap: 20px; max-width: none; margin: 0; padding: 0 calc((100vw - min(var(--wrap), 100vw - var(--gut) * 2)) / 2); will-change: transform; align-items: stretch; }
.pin-ok .why-intro { flex: 0 0 min(40vw, 560px); display: flex; flex-direction: column; justify-content: center; padding: 0 40px 0 0; }
.pin-ok .why-hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; font: 500 .7rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.pin-ok .why-hint .ico { width: 16px; height: 16px; animation: hint 1.8s var(--e-io) infinite; }
@keyframes hint { 50% { transform: translateX(6px); } }
.pin-ok .dossier { flex: 0 0 min(34vw, 480px); height: min(72vh, 640px); min-height: 0; }
.pin-ok .why-outro { flex: 0 0 min(52vw, 760px); padding: 0 6vw 0 60px; }
.pin-ok .why-progress { display: block; position: absolute; left: var(--gut); right: var(--gut); bottom: 6vh; height: 1px; background: var(--line); max-width: var(--wrap); margin: 0 auto; }
.pin-ok .why-progress i { position: absolute; inset: 0; background: var(--ice); transform: scaleX(0); transform-origin: left; }

/* ==========================================================================
   Home · services (pinned index)
   ========================================================================== */
.svcs { position: relative; padding: 120px 0; border-top: 1px solid var(--line); }
.svcs-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.svcs-head { margin-bottom: 40px; }
.svc-list { counter-reset: s; }
.svc { border-top: 1px solid var(--line); }
.svc:last-child { border-bottom: 1px solid var(--line); }
.svc-link { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; padding: 22px 0; align-items: baseline; }
.svc-n { font: 500 .74rem var(--f-mono); color: var(--dim); transition: color .4s; }
.svc-name { font-size: clamp(1.7rem, 3.3vw, 3rem); letter-spacing: -.042em; line-height: 1; color: var(--fog); transition: color .5s var(--e-out), transform .7s var(--e-out); transform-origin: left; }
.svc-more { grid-column: 2; display: grid; gap: 14px; max-width: 34rem; padding-top: 14px; }
.svc-text { color: var(--text); }
.svc-go { display: inline-flex; align-items: center; gap: 8px; font: 500 .74rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.svc-go .ico { width: 15px; height: 15px; transition: transform .4s var(--e-out); }
.svc-link:hover .svc-go .ico { transform: translateX(4px); }
.svc-mglyph { display: none; }
.svcs-stage { position: relative; aspect-ratio: 1; }
.stage-frame { position: absolute; inset: 0; border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 45%, rgba(240, 180, 41, calc(.08 + var(--hue, 0) * .02)), transparent 65%), var(--panel); overflow: hidden; }
.stage-corner { position: absolute; width: 16px; height: 16px; border-color: var(--line-2); border-style: solid; border-width: 0; }
.stage-corner.tl { left: 14px; top: 14px; border-left-width: 1px; border-top-width: 1px; } .stage-corner.tr { right: 14px; top: 14px; border-right-width: 1px; border-top-width: 1px; }
.stage-corner.bl { left: 14px; bottom: 14px; border-left-width: 1px; border-bottom-width: 1px; } .stage-corner.br { right: 14px; bottom: 14px; border-right-width: 1px; border-bottom-width: 1px; }
.stage-glyphs { position: absolute; inset: 11%; }
.svc-stage-g { position: absolute; inset: 0; opacity: 0; transform: scale(.94); transition: opacity .6s var(--e-out), transform .9s var(--e-out); color: var(--ice); }
.svc-stage-g .glyph { width: 100%; height: 100%; }
.svc-stage-g.is-active { opacity: 1; transform: none; }
.stage-meta { position: absolute; left: 24px; bottom: 22px; font: 500 .7rem var(--f-mono); color: var(--mute); letter-spacing: .1em; }
.stage-meta span { color: var(--fog); }
.stage-bar { position: absolute; right: 24px; bottom: 28px; width: 120px; height: 1px; background: var(--line-2); }
.stage-bar i { position: absolute; inset: 0; background: var(--ice); transform: scaleX(var(--p, .166)); transform-origin: left; transition: transform .5s var(--e-out); }
/* static (no-pin) fallback: first service visual shows, all copy visible */
html:not(.pin-ok) .svc-stage-g:first-child { opacity: 1; transform: none; }

.pin-ok .svcs { padding: 0; height: 520vh; }
.pin-ok .svcs-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 40px; }
.pin-ok .svc-link { padding: 14px 0; }
.pin-ok .svc-name { color: var(--dim); transform: scale(.78); }
.pin-ok .svc-more { display: grid; grid-template-rows: 0fr; padding-top: 0; transition: grid-template-rows .7s var(--e-out), padding .7s var(--e-out); }
.pin-ok .svc-more > * { overflow: hidden; min-height: 0; opacity: 0; transition: opacity .4s; }
.pin-ok .svc-more .svc-go { display: none; }
.pin-ok .svc.is-active .svc-name { color: var(--fog); transform: none; }
.pin-ok .svc.is-active .svc-n { color: var(--signal); }
.pin-ok .svc.is-active .svc-more { grid-template-rows: 1fr; padding-top: 12px; }
.pin-ok .svc.is-active .svc-more > * { opacity: 1; transition-delay: .15s; }
.pin-ok .svc:hover .svc-name { color: var(--text); }
.pin-ok .svc.is-active:hover .svc-name { color: #fff; }

/* glyph drawing */
.glyph { overflow: visible; }
.glyph * { vector-effect: non-scaling-stroke; }
.dd-glyph .g-label, .dd-glyph .g-code, .svc-mglyph .g-label, .svc-mglyph .g-code, .idx-g .g-code { display: none; }
.glyph [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--e-out); transition-delay: calc(var(--i, 0) * 60ms); }
.is-active .glyph [pathLength], .is-in .glyph [pathLength], .glyph-stage .glyph [pathLength], .dd-glyph .glyph [pathLength], .no-js .glyph [pathLength], .rm .glyph [pathLength],
html:not(.js) .glyph [pathLength], html:not(.pin-ok) .svc-stage-g:first-child .glyph [pathLength], .idx-row:hover .glyph [pathLength], .svc-mglyph .glyph [pathLength] { stroke-dashoffset: 0; }
.g-line, .g-tile, .g-ring, .g-row rect, .g-row path { stroke: currentColor; stroke-width: 1.4; fill: none; opacity: .75; }
.g-tile { opacity: .35; }
.g-hot { stroke: var(--signal); opacity: 1; fill: rgba(240, 180, 41, .12); }
.g-accent { stroke: var(--signal); opacity: 1; }
.g-dash { stroke-dasharray: .02 .015 !important; stroke-dashoffset: 0 !important; }
.g-grid { stroke: var(--line-2); stroke-width: 1; }
.g-node { fill: var(--ink); stroke: currentColor; stroke-width: 1.4; }
.g-node.g-accent { fill: var(--signal); }
.g-core { filter: drop-shadow(0 0 14px rgba(240, 180, 41, .8)); }
.g-label, .g-code { font: 500 16px var(--f-mono); fill: var(--fog); stroke: none; letter-spacing: .04em; }
.g-code { fill: var(--mute); font-size: 14px; }
.g-tick { fill: var(--line-2); }
.g-own rect { stroke: var(--signal); fill: rgba(240, 180, 41, .08); opacity: 1; }
.g-own path { stroke: var(--ice); stroke-width: 3; opacity: 1; }
.g-row:not(.g-own) { opacity: .45; }
.g-ring { opacity: .25; stroke-dasharray: .01 .012 !important; stroke-dashoffset: 0 !important; }
.g-scan { stroke: var(--signal); stroke-width: 1; opacity: .6; }
.is-active .g-flow, .glyph-stage .g-flow { stroke: var(--signal); animation: gflow 2.6s linear infinite; stroke-dasharray: .1 .9; }
@keyframes gflow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.is-active .g-scan, .glyph-stage .g-scan { animation: gscan 3.4s var(--e-io) infinite; }
@keyframes gscan { 0% { transform: translateY(60px); opacity: 0; } 20%, 80% { opacity: .7; } 100% { transform: translateY(340px); opacity: 0; } }
.is-active .g-orbit, .glyph-stage .g-orbit { animation: orbit 40s linear infinite; transform-origin: 200px 200px; }
@keyframes orbit { to { transform: rotate(360deg); } }
.is-active .g-hot, .glyph-stage .g-hot { animation: hot 2.4s var(--e-io) infinite; }
@keyframes hot { 50% { fill: rgba(240, 180, 41, .3); } }
.is-active .g-core, .glyph-stage .g-core { animation: core 2.4s var(--e-io) infinite; transform-origin: 200px 200px; }
@keyframes core { 50% { transform: scale(1.25); } }

/* ==========================================================================
   Home · markets (map + tabs)
   ========================================================================== */
.markets { padding: 140px 0 120px; border-top: 1px solid var(--line); }
.markets-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; margin-bottom: 54px; }
.markets-head .sec-idx { grid-column: 1 / -1; margin: 0; }
.markets-intro { color: var(--text); font-size: 1.15rem; max-width: 28rem; justify-self: end; }
.markets-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; }
.mtabs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mtabs button { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 12px; border-bottom: 1px solid var(--line); text-align: left; color: var(--mute); position: relative; transition: color .3s, background .3s; }
.mtabs button::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--signal); transform: scaleY(0); transition: transform .4s var(--e-out); }
.mtabs button:hover { color: var(--fog); background: rgba(255, 255, 255, .02); }
.mtabs button[aria-selected="true"] { color: var(--fog); background: linear-gradient(90deg, rgba(240, 180, 41, .08), transparent); }
.mtabs button[aria-selected="true"]::before { transform: none; }
.mt-n { font: 500 .68rem var(--f-mono); color: var(--dim); }
.mtabs button[aria-selected="true"] .mt-n { color: var(--signal); }
.mt-name { font-size: 1.05rem; letter-spacing: -.01em; }
.mstage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--ink-2); overflow: hidden; min-height: 540px; }
.map { position: relative; width: 100%; }
.map canvas { width: 100%; height: 100%; }
.map-world { position: relative; min-height: 540px; }
.map-world canvas { position: absolute; inset: 0; }
.mpanels { position: relative; z-index: 2; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; }
.mpanel { padding: 30px 28px; }
.mpanel::before { content: attr(data-label); display: block; margin-bottom: 18px; font: 500 .62rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
html:not(.js) .mpanels { position: static; width: auto; display: grid; gap: 12px; padding: 18px; }
.mpanel[hidden] { display: none; }
.mpanel.is-entering { animation: panelIn .6s var(--e-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } }
.mp-name { font-size: 1.6rem; letter-spacing: -.03em; }
.mp-line { margin-top: 10px; color: var(--text); font-size: .98rem; }
.mp-k { margin: 18px 0 10px; font: 500 .64rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.mp-countries { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-countries a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line); font-size: .84rem; color: var(--fog); transition: border-color .2s, background .2s; }
.mp-countries a:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .04); }
.mp-countries .pill { height: 20px; padding: 0 8px; font-size: .58rem; }
.mp-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font: 500 .74rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.mp-go .ico { width: 15px; height: 15px; transition: transform .4s var(--e-out); }
.mp-go:hover .ico { transform: translateX(4px); }
.markets-foot { margin-top: 26px; }

/* ==========================================================================
   Home · process (pinned timeline)
   ========================================================================== */
.process { position: relative; padding: 140px 0 120px; border-top: 1px solid var(--line); }
.process-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 100px); }
.process-big { margin-top: 40px; font-size: clamp(8rem, 18vw, 16rem); line-height: .8; letter-spacing: -.08em; font-weight: 440; color: transparent; -webkit-text-stroke: 1px var(--line-2); font-variant-numeric: tabular-nums; }
.process-big span { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; opacity: .9; }
.psteps { position: relative; padding-left: 44px; }
.p-line { position: absolute; left: 9px; top: 12px; bottom: 12px; width: 1px; background: var(--line-2); }
.p-line i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--signal), var(--ice)); transform: scaleY(var(--p, 0)); transform-origin: top; }
.pstep { position: relative; padding: 0 0 56px; }
.pstep:last-child { padding-bottom: 0; }
.ps-dot { position: absolute; left: -44px; top: 6px; width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--ink); transition: border-color .5s, box-shadow .5s; }
.ps-dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--dim); transition: background .5s, transform .5s var(--e-out); }
.pstep.is-active .ps-dot, .pstep.is-done .ps-dot { border-color: var(--signal); }
.pstep.is-active .ps-dot { box-shadow: 0 0 0 6px rgba(240, 180, 41, .1), 0 0 24px rgba(240, 180, 41, .45); }
.pstep.is-active .ps-dot::after, .pstep.is-done .ps-dot::after { background: var(--signal); }
.ps-n { font: 500 .72rem var(--f-mono); color: var(--signal); letter-spacing: .1em; }
.ps-name { margin-top: 8px; font-size: clamp(2rem, 3.6vw, 3.3rem); letter-spacing: -.045em; line-height: 1; text-transform: uppercase; font-weight: 480; }
.ps-when { margin-top: 10px; font: 500 .74rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.ps-in { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 28px; align-items: center; margin-top: 18px; max-width: 46rem; }
.ps-in p { margin: 0; }
.pv { position: relative; height: 110px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.pv-audit { display: grid; gap: 5px; padding: 12px; align-content: start; }
.pv-audit i { height: 6px; border-radius: 3px; background: var(--line-2); width: calc(40% + var(--i) * 7%); }
.pv-scan { position: absolute; left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(180deg, transparent, rgba(240, 180, 41, .25), transparent); animation: pscan 2.6s var(--e-io) infinite; }
@keyframes pscan { 50% { transform: translateY(84px); } }
.pv-blue { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 12px; }
.pv-blue i { border-radius: 4px; border: 1px dashed var(--line-2); transition: background .4s, border-color .4s; transition-delay: calc(var(--i) * 80ms); }
.pstep.is-active .pv-blue i, html:not(.pin-ok) .pv-blue i { background: rgba(240, 180, 41, .14); border-color: rgba(240, 180, 41, .4); border-style: solid; }
.pv-build { display: flex; align-items: flex-end; gap: 6px; padding: 12px; }
.pv-build i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--signal), rgba(201, 138, 18, .3)); transform: scaleY(.1); transform-origin: bottom; transition: transform .8s var(--e-out); transition-delay: calc(var(--i) * 70ms); }
.pstep.is-active .pv-build i, .pstep.is-done .pv-build i, html:not(.pin-ok) .pv-build i { transform: none; }
.pv-report { display: grid; place-items: center; }
.pv-report svg { position: absolute; width: 92px; height: 92px; transform: rotate(-90deg); }
.pv-report circle { fill: none; stroke: var(--line-2); stroke-width: 4; }
.pv-report .pv-ring { stroke: var(--mint); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--e-out); }
.pstep.is-active .pv-ring, html:not(.pin-ok) .pv-ring { stroke-dashoffset: 0; }
.pv-report span { font: 500 1.4rem var(--f-mono); color: var(--fog); }

.pin-ok .process { padding: 0; height: 420vh; }
.pin-ok .process-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.pin-ok .pstep { padding-bottom: 26px; }
.pin-ok .ps-name { color: var(--dim); transition: color .5s; }
.pin-ok .pstep.is-active .ps-name, .pin-ok .pstep.is-done .ps-name { color: var(--fog); }
.pin-ok .process-grid { align-items: center; }
.pin-ok .ps-name { font-size: clamp(1.7rem, 2.8vw, 2.6rem); }
.pin-ok .ps-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--e-out); }
.pin-ok .ps-in { overflow: hidden; min-height: 0; opacity: 0; transition: opacity .4s; }
.pin-ok .pstep.is-active .ps-detail { grid-template-rows: 1fr; }
.pin-ok .pstep.is-active .ps-in { opacity: 1; transition-delay: .2s; }

/* ==========================================================================
   Case study · KPIs + GSC chart
   ========================================================================== */
.case, .casefile { padding: 140px 0 120px; border-top: 1px solid var(--line); }
.case-head, .cf-head { display: grid; gap: 22px; margin-bottom: 50px; }
.case-head .sec-idx, .cf-head .sec-idx { margin: 0; }
.case-meta { max-width: 44rem; }
.case-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 20px; }
.kpis { align-self: start; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.kpi { background: var(--ink); padding: 28px 24px; display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; transition: background .4s; }
.kpi:hover { background: var(--panel); }
.kpi-v { font-size: clamp(2.6rem, 4.4vw, 4.2rem); font-weight: 470; letter-spacing: -.06em; line-height: .9; color: var(--fog); font-variant-numeric: tabular-nums; margin: 0; }
.kpi-v small { font-size: .42em; margin-left: .06em; color: var(--ice); letter-spacing: -.02em; }
.kpi-l { font: 500 .7rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-top: 18px; }
.gsc { position: relative; margin: 0; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); overflow: hidden; display: flex; flex-direction: column; }
.gsc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.gsc-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.gsc-tabs button { min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: .82rem; color: var(--mute); transition: color .2s, background .3s; }
.gsc-tabs button[aria-selected="true"] { color: var(--ink); background: var(--ice); }
.gsc-legend { display: flex; align-items: center; gap: 8px; font: 500 .66rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.gsc-legend i { width: 10px; height: 3px; border-radius: 2px; margin-left: 8px; }
.lg-c { background: var(--signal); } .lg-i { background: var(--mint); }
.gsc-panel { position: relative; padding: 22px 20px 10px; flex: 1; }
.gsc-panel[hidden] { display: none; }
.gsc-panel img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.gsc-svg { width: 100%; height: 340px; overflow: visible; }
.gsc-grid path { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gsc-area { fill: rgba(240, 180, 41, .09); opacity: 0; transition: opacity 1.4s 1s; }
.gsc-c, .gsc-i { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linejoin: round; }
.gsc-c { stroke: var(--signal); transition: stroke-dashoffset 2.6s var(--e-out); }
.gsc-i { stroke: var(--mint); opacity: .75; transition: stroke-dashoffset 2.6s var(--e-out) .3s; }
.gsc.is-in .gsc-c, .gsc.is-in .gsc-i { stroke-dashoffset: 0; } .gsc.is-in .gsc-area { opacity: 1; }
html:not(.js) .gsc-c, html:not(.js) .gsc-i, .rm .gsc-c, .rm .gsc-i { stroke-dashoffset: 0; }
.gsc-ticks text, .gsc-note { font: 500 11px var(--f-mono); fill: var(--dim); }
.gsc-gap { stroke: var(--line-2); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.gsc-x { stroke: var(--ice); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .2s; }
.gsc-panel:hover .gsc-x { opacity: .5; }
.gsc-tip { position: absolute; top: 18px; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: var(--fog); color: var(--ink); font: 500 .7rem var(--f-mono); opacity: 0; transform: translateX(-50%); transition: opacity .2s; white-space: nowrap; }
.gsc-panel:hover .gsc-tip { opacity: 1; }
.gsc-cap { padding: 14px 20px 18px; font-size: .84rem; color: var(--mute); border-top: 1px solid var(--line); }
.gsc-src { font: 500 .66rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.gsc-wait { margin: 0; padding: 40px 24px 46px; max-width: 34rem; color: var(--mute); font-size: .95rem; line-height: 1.6; }

/* ---------- case study subpage: evidence header under a prose hero ---------- */
.cf-page { padding: 10px 0 30px; border-top: 0; }
.cf-page .facts { margin-bottom: 20px; }
.kpi-pending .kpi-v { color: var(--line-2); }
.kpi-wait { display: block; margin-top: 6px; letter-spacing: .06em; text-transform: none; color: var(--dim); }
.case-go { margin-top: 34px; }

/* ==========================================================================
   Home · reporting dashboard
   ========================================================================== */
.inbox { padding: 140px 0 120px; border-top: 1px solid var(--line); position: relative; overflow: clip; }
.inbox::before { content: ""; position: absolute; left: 50%; top: 30%; width: 1100px; height: 600px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(201, 138, 18, .12), transparent 65%); pointer-events: none; }
.inbox-head { margin-bottom: 50px; max-width: 46rem; }
.dash { position: relative; border-radius: 26px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(26, 22, 16, .9), rgba(12, 11, 9, .95)); box-shadow: 0 80px 140px -60px rgba(0, 0, 0, .95); overflow: hidden; }
.dash-bar { display: flex; align-items: center; gap: 18px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dash-title { font-weight: 520; color: var(--fog); font-size: .95rem; }
.dash-tabs { display: flex; gap: 4px; }
.dash-tabs span { padding: 5px 12px; border-radius: 999px; font: 500 .66rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line); }
.dash-tabs .on { color: var(--ink); background: var(--ice); border-color: var(--ice); }
.dash-note { margin-left: auto; font: 500 .62rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; background: var(--line); }
.dp { background: var(--ink-2); padding: 22px; min-height: 230px; display: flex; flex-direction: column; gap: 16px; position: relative; transition: background .4s; }
.dp:hover { background: #14120d; }
.dp-t { font-size: .9rem; color: var(--fog); line-height: 1.4; max-width: 30rem; margin: 0; }
.dp-rank { grid-column: span 5; } .dp-split { grid-column: span 4; } .dp-cpa { grid-column: span 3; }
.dp-lp { grid-column: span 4; } .dp-links { grid-column: span 5; } .dp-own { grid-column: span 3; } .dp-sprint { grid-column: span 12; min-height: 0; }
.dp-lines { flex: 1; width: 100%; min-height: 120px; }
.dp-lines polyline { fill: none; stroke: var(--line-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--e-out); transition-delay: calc(var(--i) * .15s); }
.dp-lines polyline:nth-child(3) { stroke: var(--signal); stroke-width: 2; }
.dp-lines polyline:nth-child(1) { stroke: var(--ice); }
.dash.is-in .dp-lines polyline { stroke-dashoffset: 0; }
.dp-axis { position: absolute; right: 22px; top: 60px; bottom: 22px; display: flex; flex-direction: column; justify-content: space-between; font: 500 .6rem var(--f-mono); color: var(--dim); }
.dp-axis b { font-weight: 500; }
.dp-cols { flex: 1; display: flex; align-items: flex-end; gap: 8px; min-height: 120px; }
.dp-cols i { flex: 1; position: relative; height: calc((var(--b) + var(--n)) * 100%); display: flex; flex-direction: column; justify-content: flex-end; transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--e-out); transition-delay: calc(var(--i) * 70ms); border-radius: 4px 4px 0 0; overflow: hidden;
  background: linear-gradient(180deg, var(--signal) 0 calc(var(--n) / (var(--b) + var(--n)) * 100%), rgba(243, 216, 140, .3) 0); }
.dash.is-in .dp-cols i { transform: none; }
.dp-key { display: flex; align-items: center; gap: 6px; font: 500 .62rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.dp-key i { width: 8px; height: 8px; border-radius: 2px; margin-left: 8px; }
.dp-key i:first-child { margin-left: 0; }
.k-b { background: rgba(243, 216, 140, .5); } .k-n { background: var(--signal); }
.lp { display: grid; gap: 12px; flex: 1; align-content: center; }
.lp li { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: center; }
.lp-u i { display: block; height: 6px; border-radius: 3px; width: calc(var(--w) * 100%); background: var(--line-2); }
.lp-r, .lp-f { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .04); position: relative; overflow: hidden; }
.lp-r i, .lp-f i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--e-out); border-radius: inherit; }
.lp-r i { background: rgba(243, 216, 140, .5); } .lp-f i { background: var(--signal); transition-delay: .2s; }
.dash.is-in .lp-r i, .dash.is-in .lp-f i { transform: scaleX(var(--v)); }
.cpa { flex: 1; display: flex; align-items: flex-end; gap: 16px; min-height: 130px; }
.cpa-b { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.cpa-b i { display: block; height: calc(var(--v) * 100%); border-radius: 8px 8px 2px 2px; transform: scaleY(0); transform-origin: bottom; transition: transform 1.2s var(--e-out); }
.cpa-o i { background: linear-gradient(180deg, var(--mint), rgba(130, 227, 196, .2)); }
.cpa-p i { background: rgba(243, 216, 140, .18); border: 1px solid var(--line-2); transition-delay: .2s; }
.dash.is-in .cpa-b i { transform: none; }
.cpa-b span { font: 500 .62rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.lt { width: 100%; border-collapse: collapse; font: 500 .6rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.lt th { text-align: left; color: var(--dim); font-weight: 500; padding: 0 8px 10px 0; }
.lt td { padding: 9px 8px 9px 0; border-top: 1px solid var(--line); }
.lt td i { display: block; height: 6px; border-radius: 3px; width: calc(var(--w) * 100%); background: var(--line-2); }
.live { display: inline-flex; align-items: center; gap: 5px; color: var(--mint); }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.gauge { width: 100%; max-width: 200px; margin: auto auto 0; overflow: visible; }
.gauge path { fill: none; stroke: var(--line-2); stroke-width: 12; stroke-linecap: round; }
.gauge .g-fill { stroke: url(#none); stroke: var(--signal); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--e-out); }
.dash.is-in .gauge .g-fill { stroke-dashoffset: .33; }
.own-sq { display: flex; align-items: center; gap: 5px; font: 500 .6rem var(--f-mono); color: var(--mute); letter-spacing: .06em; text-transform: uppercase; justify-content: center; }
.own-sq i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line-2); }
.own-sq i.on { background: var(--signal); border-color: var(--signal); }
.own-sq span { margin-left: 6px; }
.sprint { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sprint li { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); }
.sp-box { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-2); flex-shrink: 0; }
.sp-box.done { background: var(--mint); border-color: var(--mint); }
.sprint li i { display: block; height: 6px; border-radius: 3px; width: calc(var(--w) * 100%); background: var(--line-2); }

/* ==========================================================================
   Sections (shared) · features, metrics, checks, steps, tables, FAQ
   ========================================================================== */
.sec { position: relative; padding: clamp(80px, 11vw, 140px) 0; border-top: 1px solid var(--line); }
.sec-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 110px); }
.sec-head { position: relative; }
.sec-head .h2 { position: sticky; top: 110px; }
.sec-wide .sec-grid { grid-template-columns: 1fr; }
.sec-body { min-width: 0; }
.sec-body > p { font-size: 1.1rem; max-width: 44rem; }
.sec-body > * + * { margin-top: 26px; }

.feature { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; padding: 26px 0; border-top: 1px solid var(--line); position: relative; }
.feature::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, var(--signal), transparent); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--e-out); }
.feature:hover::before { transform: scaleX(1); }
.feature:last-child { border-bottom: 1px solid var(--line); }
.sec-body > .feature + .feature { margin-top: 0; }
.f-idx { font: 500 .72rem var(--f-mono); color: var(--signal); padding-top: 7px; }
.f-title { font-size: clamp(1.25rem, 1.8vw, 1.55rem); letter-spacing: -.025em; color: var(--fog); line-height: 1.15; margin: 0 0 10px; font-weight: 500; }
.f-title strong { font-weight: inherit; }
.f-text { grid-column: 2; color: var(--text); max-width: 42rem; margin: 0; }
.models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sec-models .sec-grid { grid-template-columns: 1fr; }
.sec-models .sec-head .h2 { position: static; }
.feature-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; background: linear-gradient(170deg, var(--raise), var(--panel)); min-height: 280px; margin: 0 !important; transition: border-color .4s, transform .6s var(--e-out); }
.feature-card:last-child { border-bottom: 1px solid var(--line); }
.feature-card:hover { border-color: var(--line-2); transform: translateY(-4px); }
.feature-card .f-title { font-size: 1.7rem; margin: 26px 0 14px; }
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.metrics li { background: var(--ink); padding: 22px; display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; min-height: 120px; transition: background .4s; }
.metrics li:hover { background: var(--panel); }
.metrics li:last-child:nth-child(odd) { grid-column: span 2; }
.m-idx { font: 500 .66rem var(--f-mono); color: var(--signal); }
.m-bar { height: 2px; background: var(--line); position: relative; overflow: hidden; border-radius: 2px; }
.m-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--signal), var(--ice)); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--e-out) .3s; }
.metrics li.is-in .m-bar i, html:not(.js) .m-bar i { transform: scaleX(calc(.35 + var(--i, 0) * .12)); }
.m-text { grid-column: 1 / -1; color: var(--fog); font-size: 1rem; line-height: 1.45; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks .ico { width: 18px; height: 18px; color: var(--signal); margin-top: 4px; }
.steps { counter-reset: st; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 58px 1fr; gap: 14px; padding: 22px 0; border-top: 1px solid var(--line); position: relative; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.s-idx { font: 500 1.6rem/1 var(--f-mono); color: transparent; -webkit-text-stroke: 1px var(--dim); letter-spacing: -.04em; transition: color .5s, -webkit-text-stroke-color .5s; }
.steps li:hover .s-idx, .steps li.is-in .s-idx { color: var(--fog); -webkit-text-stroke-color: transparent; }
.steps p { margin: 0; color: var(--text); font-size: 1.04rem; }
.steps-tight li { padding: 16px 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); -webkit-overflow-scrolling: touch; }
.data { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 720px; }
.data th, .data td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data thead th { font: 500 .64rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); background: var(--panel); position: sticky; top: 0; }
.data tbody th { color: var(--fog); font-weight: 520; white-space: nowrap; }
.data tbody tr { transition: background .25s; }
.data tbody tr:hover { background: rgba(255, 255, 255, .025); }
.data tbody tr:last-child > * { border-bottom: 0; }
.tbl-note { margin-top: 16px; color: var(--mute); font-size: .88rem; }
.shot { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.shot img { width: 100%; height: auto; }

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); position: relative; }
.faq-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--signal); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--e-out); }
.faq-item.is-open::before { transform: none; }
.faq-q { font-size: inherit; }
.faq-q button { width: 100%; display: grid; grid-template-columns: 44px 1fr 36px; gap: 12px; align-items: center; min-height: 76px; padding: 18px 0 18px 16px; text-align: left; }
.faq-n { font: 500 .7rem var(--f-mono); color: var(--dim); transition: color .3s; }
.faq-t { font-size: clamp(1.05rem, 1.5vw, 1.28rem); letter-spacing: -.02em; color: var(--text); transition: color .3s; line-height: 1.3; }
.faq-q button:hover .faq-t, .faq-item.is-open .faq-t { color: var(--fog); }
.faq-item.is-open .faq-n { color: var(--signal); }
.faq-ico { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); transition: background .4s, border-color .4s, transform .5s var(--e-out); }
.faq-ico i { position: absolute; left: 10px; right: 10px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--fog); transition: transform .5s var(--e-out); }
.faq-ico i:last-child { transform: rotate(90deg); }
.faq-item.is-open .faq-ico { background: var(--ice); border-color: var(--ice); transform: rotate(180deg); }
.faq-item.is-open .faq-ico i { background: var(--ink); }
.faq-item.is-open .faq-ico i:last-child { transform: rotate(0); }
.faq-a { display: grid; grid-template-rows: 1fr; }
.js .faq-a { grid-template-rows: 0fr; transition: grid-template-rows .6s var(--e-out); }
.js .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-in { overflow: hidden; min-height: 0; }
.faq-a-in p { padding: 0 60px 28px 72px; color: var(--text); max-width: 52rem; opacity: 1; transition: opacity .5s; }
.js .faq-item:not(.is-open) .faq-a-in p { opacity: 0; }

/* ==========================================================================
   Final CTA · bands · related
   ========================================================================== */
.final { position: relative; padding: clamp(120px, 16vw, 220px) 0 0; overflow: hidden; border-top: 1px solid var(--line); text-align: center; }
.final-bg { position: absolute; inset: 0; pointer-events: none; }
.final-grid { position: absolute; inset: 0; background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 64px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 64px 100%;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 65%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 65%); transform: perspective(700px) rotateX(58deg) translateY(28%) scale(1.8); transform-origin: 50% 100%; }
.final-radar { position: absolute; left: 50%; top: 44%; width: min(1100px, 160vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 300deg, rgba(240, 180, 41, .22) 350deg, transparent 360deg), repeating-radial-gradient(circle, transparent 0 79px, var(--line) 79px 80px);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); animation: radar 9s linear infinite; }
@keyframes radar { to { transform: translate(-50%, -50%) rotate(360deg); } }
.final-in { position: relative; display: flex; flex-direction: column; align-items: center; }
.final-h { font-size: clamp(3.2rem, 10vw, 10rem); line-height: .88; letter-spacing: -.06em; font-weight: 500; max-width: 11ch; }
.final-h em { display: block; }
.final-text { margin-top: 36px; max-width: 36rem; font-size: 1.15rem; }
.final .cta-row { justify-content: center; }
.marquee { margin-top: clamp(90px, 12vw, 160px); border-top: 1px solid var(--line); padding: 26px 0; overflow: hidden; position: relative; }
.marquee-in { display: flex; gap: 60px; width: max-content; animation: marq 36s linear infinite; }
.marquee span { font: 500 .8rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); display: inline-flex; align-items: center; gap: 60px; }
.marquee span::after { content: "✦"; color: var(--signal); font-size: .7rem; }
@keyframes marq { to { transform: translateX(-50%); } }
.band { position: relative; padding: clamp(90px, 12vw, 150px) 0; border-top: 1px solid var(--line); overflow: hidden; text-align: center; }
.band-in { display: flex; flex-direction: column; align-items: center; }
.band-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.band-rings i { grid-area: 1 / 1; width: 420px; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; animation: ringOut 7s linear infinite; }
.band-rings i:nth-child(2) { animation-delay: -2.3s; } .band-rings i:nth-child(3) { animation-delay: -4.6s; }
@keyframes ringOut { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.band-title { position: relative; font-size: clamp(2.2rem, 5.4vw, 5rem); letter-spacing: -.05em; line-height: .96; color: var(--fog); max-width: 14ch; margin: 0; font-weight: 500; }
.band-text { position: relative; margin-top: 24px; max-width: 34rem; }
.band .cta-row { justify-content: center; position: relative; }
.related { padding: 70px 0; border-top: 1px solid var(--line); }
.related-h { font: 500 .72rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 22px; }
.related-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.related-list a { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r); border: 1px solid var(--line); min-height: 118px; transition: border-color .3s, background .3s, transform .5s var(--e-out); }
.related-list a:hover { border-color: var(--line-2); background: var(--panel); transform: translateY(-3px); }
.r-kind { font: 500 .62rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.r-name { color: var(--fog); font-size: 1.12rem; letter-spacing: -.02em; }
.related-list .ico { position: absolute; right: 18px; top: 18px; width: 18px; height: 18px; color: var(--mute); transition: transform .5s var(--e-out), color .3s; }
.related-list a:hover .ico { transform: translate(3px, -3px); color: var(--fog); }

/* ==========================================================================
   Inner page hero
   ========================================================================== */
.phero { position: relative; padding: calc(var(--nav-h) + 80px) 0 clamp(70px, 9vw, 120px); overflow: hidden; }
.phero-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 60% at 80% 10%, rgba(201, 138, 18, .15), transparent 70%); }
.phero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 72px;
  mask-image: linear-gradient(180deg, #000, transparent 80%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); opacity: .6; }
.crumbs { margin-bottom: 44px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 500 .7rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.crumbs li { display: flex; align-items: center; gap: 10px; color: var(--dim); }
.crumbs li + li::before { content: "/"; color: var(--dim); }
.crumbs a { color: var(--mute); transition: color .2s; padding: 4px 0; }
.crumbs a:hover { color: var(--fog); }
.crumbs a[aria-current] { color: var(--fog); }
.phero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.phero.has-visual .phero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; }
.phero-copy { max-width: 60rem; }
.phero-visual { position: relative; }
.glyph-stage { position: relative; aspect-ratio: 1; max-width: 460px; margin-left: auto; border-radius: 30px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 45%, rgba(240, 180, 41, .12), transparent 65%), var(--panel); padding: 12%; color: var(--ice); }
.glyph-stage::before, .glyph-stage::after { content: ""; position: absolute; width: 16px; height: 16px; border: 0 solid var(--line-2); }
.glyph-stage::before { left: 14px; top: 14px; border-left-width: 1px; border-top-width: 1px; }
.glyph-stage::after { right: 14px; bottom: 14px; border-right-width: 1px; border-bottom-width: 1px; }
.glyph-stage .glyph { width: 100%; height: 100%; }
.map-region { aspect-ratio: 1.1; border-radius: 26px; border: 1px solid var(--line); background: var(--ink-2); overflow: hidden; }
.map-region canvas, .map-index canvas { position: absolute; inset: 0; }
.map-index { aspect-ratio: 2.55; margin-top: 50px; border-radius: 26px; border: 1px solid var(--line); background: var(--ink-2); overflow: hidden; }
.phero-map { padding-bottom: 60px; }
.scards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; margin-top: 40px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; max-width: 50rem; }
.scard { background: var(--ink); padding: 20px 20px 22px; }
.scard-v { font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 480; letter-spacing: -.05em; color: var(--fog); line-height: 1; margin: 0 0 10px; }
.scard-l { font-size: .84rem; color: var(--mute); line-height: 1.4; margin: 0; }
.phero-prose { padding-bottom: 50px; }
.h1-prose { font-size: clamp(2.3rem, 5vw, 4.6rem); max-width: 22ch; }
.dateline { margin-top: 26px; }
.nf { min-height: 80vh; display: flex; align-items: center; }

/* country rows / markets index */
.crows { border-top: 1px solid var(--line); }
.crow a { display: grid; grid-template-columns: minmax(140px, 1.1fr) 128px minmax(120px, 1fr) minmax(0, 1.6fr) 20px; gap: 18px; align-items: center; padding: 18px 6px; border-bottom: 1px solid var(--line); transition: background .3s, padding .5s var(--e-out); }
.crow a:hover { background: rgba(255, 255, 255, .025); padding-left: 14px; }
.crow-name { color: var(--fog); font-size: 1.1rem; letter-spacing: -.02em; }
.crow .pill { justify-self: start; }
.crow-reg { color: var(--mute); font-size: .88rem; }
.crow-stat { color: var(--mute); font-size: .88rem; line-height: 1.4; }
.crow-stat b { color: var(--fog); font-weight: 520; }
.crow .ico { width: 16px; height: 16px; color: var(--dim); transition: transform .4s var(--e-out), color .3s; }
.crow a:hover .ico { color: var(--fog); transform: translate(2px, -2px); }
.crow.is-hidden { display: none; }
.legend { display: flex; gap: 30px; align-items: flex-start; padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); margin-bottom: 30px; }
.legend-h { font: 500 .68rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); flex-shrink: 0; margin: 4px 0 0; }
.legend ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; }
.legend li { display: grid; gap: 8px; align-content: start; font-size: .88rem; color: var(--text); justify-items: start; }
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 30px; }
.fbar::before { content: "Filter"; font: 500 .66rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-right: 8px; }
.fchip { border-radius: 999px; transition: transform .3s var(--e-out); }
.fchip .pill { height: 36px; padding: 0 14px; transition: background .3s, border-color .3s, color .3s; }
.fchip:hover .pill { border-color: rgba(243, 216, 140, .4); }
.fchip[aria-pressed="true"] .pill { background: var(--fog); color: var(--ink); border-color: var(--fog); }
.mgroups { display: grid; gap: 70px; }
.mgroup-h { font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -.04em; }
.mgroup-h a { display: inline-flex; align-items: baseline; gap: 16px; }
.mgroup-h .ico { width: 22px; height: 22px; color: var(--dim); transition: transform .4s var(--e-out), color .3s; }
.mgroup-h a:hover .ico { transform: translate(3px, -3px); color: var(--fog); }
.mg-n { font: 500 .72rem var(--f-mono); color: var(--signal); letter-spacing: .1em; }
.mgroup-line { margin: 12px 0 22px; color: var(--mute); }
.mgroup.is-empty { display: none; }
.tail { margin-top: 60px; color: var(--mute); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.facts div { background: var(--ink); padding: 20px 22px; }
.facts dt { font: 500 .64rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.facts dd { margin: 0; color: var(--fog); }
.facts-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* services hub index */
.svc-index { padding: 0 0 100px; }
.idx { border-top: 1px solid var(--line); }
.idx-row a { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) 150px 40px; gap: 24px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.idx-row a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(240, 180, 41, .07), transparent 70%); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--e-out); }
.idx-row a:hover::before, .idx-row a:focus-visible::before { transform: none; }
.idx-n { font: 500 .74rem var(--f-mono); color: var(--signal); position: relative; }
.idx-name { font-size: clamp(1.8rem, 3.4vw, 3.2rem); letter-spacing: -.045em; line-height: 1; position: relative; transition: transform .6s var(--e-out); }
.idx-row a:hover .idx-name { transform: translateX(10px); }
.idx-text { color: var(--text); margin: 0; position: relative; }
.idx-g { width: 120px; height: 120px; justify-self: center; color: var(--ice); opacity: .5; transform: scale(.85) rotate(-6deg); transition: opacity .5s, transform .8s var(--e-out); position: relative; }
.idx-row a:hover .idx-g { opacity: 1; transform: none; }
.idx-g .glyph { width: 100%; height: 100%; }
.idx-go .ico { width: 22px; height: 22px; color: var(--mute); transition: transform .5s var(--e-out), color .3s; }
.idx-row a:hover .idx-go .ico { transform: translate(4px, -4px); color: var(--fog); }
.idx-also { margin-top: 26px; color: var(--mute); }

/* case file */
.cf-result { margin-bottom: 18px; }
.story { margin-top: 90px; max-width: 58rem; margin-left: auto; }
.story > * + * { margin-top: 0; }
.story-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 30px; padding: 30px 0; border-top: 1px solid var(--line); }
.story-k { font-size: 1.15rem; color: var(--fog); letter-spacing: -.02em; margin: 0; font-weight: 500; }
.story-v { margin: 0; color: var(--text); }
.story-solo { padding: 30px 0 10px; border-top: 1px solid var(--line); }
.story .steps { margin: 0 0 20px; }

/* insights */
.serieses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.series { padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); }
.series-name { color: var(--fog); font-size: 1.2rem; letter-spacing: -.02em; margin-bottom: 10px; }
.series p:last-child { color: var(--mute); font-size: .94rem; }
.posts { display: grid; gap: 12px; }
.post a { position: relative; display: block; padding: 30px 70px 30px 30px; border-radius: var(--r-lg); border: 1px solid var(--line); transition: border-color .3s, background .3s; }
.post a:hover { border-color: var(--line-2); background: var(--panel); }
.post-kind { font: 500 .64rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.post-t { font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -.03em; line-height: 1.15; margin: 12px 0; }
.post p { color: var(--mute); margin: 0; }
.post-go .ico { position: absolute; right: 26px; top: 30px; width: 22px; height: 22px; color: var(--mute); transition: transform .5s var(--e-out); }
.post a:hover .post-go .ico { transform: translate(4px, -4px); color: var(--fog); }

/* prose */
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 101; }
.read-progress i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--signal-2), var(--ice)); transform: scaleX(0); transform-origin: left; }
.prose-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); padding-bottom: 120px; }
.toc { position: sticky; top: 110px; align-self: start; padding-top: 6px; }
.toc-h { font: 500 .66rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 16px; }
.toc ol { border-left: 1px solid var(--line); }
.toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1px solid transparent; color: var(--mute); font-size: .88rem; line-height: 1.35; transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--fog); }
.toc a.is-current { color: var(--fog); border-left-color: var(--signal); }
.prose { max-width: 46rem; font-size: 1.08rem; }
.prose-lede { font-size: 1.22rem; line-height: 1.6; color: var(--fog); padding-bottom: 20px; }
.prose-lede > * + * { margin-top: 18px; }
.prose-sec { padding-top: 56px; }
.prose-sec > * + * { margin-top: 18px; }
.prose-sec .h2s { margin-bottom: 26px; }
.prose .feature { grid-template-columns: 38px minmax(0, 1fr); }
.prose .f-title { font-size: 1.2rem; }
.sec-tracker { padding-top: 20px; border-top: 0; }
.tracker { min-width: 1080px; }
.tracker td:nth-child(5) { max-width: 260px; }
.tracker tr.is-hidden { display: none; }
.changelog { margin-top: 60px; max-width: 46rem; }
.roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.role { display: block; padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(170deg, var(--raise), var(--panel)); }
.role .f-title { margin: 20px 0 8px; }
.role .f-text { color: var(--mute); }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.phero-contact .h2s { margin-top: 50px; }
.gets { display: grid; gap: 0; border-top: 1px solid var(--line); }
.gets li { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--fog); }
.c-line { display: flex; gap: 16px; margin-top: 22px; }
.c-k { font: 500 .66rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); width: 72px; flex-shrink: 0; padding-top: 4px; }
.c-line a { color: var(--fog); }
.form-card { padding: clamp(24px, 3.4vw, 40px); border-radius: 26px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(26, 22, 16, .85), rgba(12, 11, 9, .92)); backdrop-filter: blur(14px); box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .95); position: sticky; top: 100px; }
.form { display: grid; gap: 22px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font: 500 .66rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 0; margin-bottom: 8px; }
.field input:not([type=radio]):not([type=checkbox]), .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .35); color: var(--fog); font: inherit; font-size: 1rem; transition: border-color .25s, box-shadow .25s, background .25s; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--panel); }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--signal); box-shadow: 0 0 0 4px rgba(240, 180, 41, .15); background: rgba(0, 0, 0, .5); }
.field input[aria-invalid="true"] { border-color: var(--rose); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.field label.opt { font: inherit; letter-spacing: normal; text-transform: none; color: inherit; margin: 0; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text); font-size: .92rem; transition: background .25s, color .25s, border-color .25s; }
.opt input:checked + span { background: var(--ice); color: var(--ink); border-color: var(--ice); }
.opt input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.opt:hover span { border-color: rgba(243, 216, 140, .45); }
.form-foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.form-note { color: var(--mute); font-size: .88rem; max-width: 22rem; margin: 0; }
.form-status { margin: 0; color: var(--mint); min-height: 1.4em; }
.form-status.is-error { color: var(--rose); }
.hp { position: absolute; left: -9999px; }

.smap { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; }
.smap li { padding: 6px 0; }
.smap a { color: var(--text); transition: color .2s; }
.smap a:hover { color: var(--fog); }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { position: relative; z-index: 1; padding: 110px 0 0; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(17, 15, 11, .7)); overflow: hidden; }
.foot-top { display: grid; grid-template-columns: auto 1fr auto; gap: 30px 60px; align-items: start; padding-bottom: 80px; border-bottom: 1px solid var(--line); }
.foot-tag { font-size: clamp(1.8rem, 3.6vw, 3.3rem); letter-spacing: -.045em; line-height: 1.02; color: var(--fog); max-width: 18ch; margin: 0; }
.foot-tag em { display: block; }
.foot-mail { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fog); font-size: .92rem; transition: background .3s, border-color .3s; }
.foot-mail:hover { background: rgba(255, 255, 255, .04); border-color: rgba(243, 216, 140, .4); }
.foot-mail .ico { width: 18px; height: 18px; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 60px 0; }
.f-h { font: 500 .68rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--signal); margin-bottom: 18px; }
.f-col li a, .f-col .linkish { display: inline-block; padding: 7px 0; color: var(--mute); font-size: .94rem; transition: color .2s, transform .4s var(--e-out); }
.f-col li a:hover { color: var(--fog); transform: translateX(4px); }
.foot-base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 0; border-top: 1px solid var(--line); font-size: .84rem; color: var(--dim); }
.foot-base p { margin: 0; }
.to-top { display: inline-flex; align-items: center; gap: 8px; color: var(--mute); }
.to-top:hover { color: var(--fog); }
.to-top .ico { width: 15px; height: 15px; transform: rotate(-90deg); }
.foot-word { position: relative; padding: 0 var(--gut); margin-bottom: -.2em; text-align: center; pointer-events: none; user-select: none; }
.foot-word span { display: block; font-size: 17.5vw; line-height: .8; letter-spacing: -.07em; font-weight: 600; white-space: nowrap;
  background: linear-gradient(180deg, rgba(243, 216, 140, .16), rgba(243, 216, 140, 0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 120; width: min(420px, calc(100% - 32px)); padding: 22px; border-radius: 18px; border: 1px solid var(--line-2); background: rgba(15, 13, 10, .95); backdrop-filter: blur(16px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); font-size: .9rem; }
.cookie[hidden] { display: none; }
.cookie-h { color: var(--fog); font-weight: 560; margin-bottom: 6px; }
.cookie a { color: var(--fog); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.cookie .btn-sm { padding-right: 18px; }


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .nav-links .nav-link { padding: 0 10px; }
  .dd-mk { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat { border-top: 1px solid var(--line); }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(-n+2) { border-top: 0; }
  .idx-row a { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) 40px; }
  .idx-g { display: none; }
  .dp-rank, .dp-split, .dp-lp, .dp-links { grid-column: span 6; } .dp-own, .dp-cpa { grid-column: span 6; }
}
@media (max-width: 1023px) {
  :root { --nav-h: 64px; }
  .nav { padding-top: 10px; }
  .nav-in { padding: 0 6px 0 16px; height: 60px; background: rgba(14, 12, 9, .7); border-color: var(--line-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .nav-main { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: block; }
  .hero { padding-top: 120px; min-height: auto; }
  .hero-in { grid-template-columns: 1fr; gap: 60px; }
  .inst-window, .funnel { transform: none; }
  .chip-a { left: -6px; } .chip-b { right: -6px; }
  .hero-scroll { display: none; }
  .why-track { grid-template-columns: 1fr; }
  .svcs-grid { grid-template-columns: 1fr; }
  .svcs-stage { display: none; }
  .svc-link { grid-template-columns: 44px 1fr 88px; }
  .svc-more { grid-column: 2 / -1; }
  .svc-mglyph { display: block; grid-row: 1; grid-column: 3; width: 88px; height: 88px; color: var(--ice); opacity: .8; }
  .svc-mglyph .glyph { width: 100%; height: 100%; }
  .markets-head { grid-template-columns: 1fr; }
  .markets-intro { justify-self: start; }
  .markets-grid { grid-template-columns: 1fr; }
  .mtabs { flex-direction: row; overflow-x: auto; border: 0; gap: 6px; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
  .mtabs::-webkit-scrollbar { display: none; }
  .mtabs button { flex-shrink: 0; border: 1px solid var(--line); border-radius: 999px; min-height: 44px; padding: 0 16px; scroll-snap-align: start; }
  .mtabs button::before { display: none; }
  .mtabs button[aria-selected="true"] { background: var(--ice); color: var(--ink); border-color: var(--ice); }
  .mtabs button[aria-selected="true"] .mt-n { color: var(--ink); }
  .mstage { min-height: 0; display: flex; flex-direction: column; }
  .map-world { position: relative; inset: auto; aspect-ratio: 1.7; }
  .mstage { grid-template-columns: 1fr; }
  .map-world { min-height: 0; }
  .mpanels { border-left: 0; border-top: 1px solid var(--line); }
  .process-grid { grid-template-columns: 1fr; }
  .process-big { display: none; }
  .ps-in { grid-template-columns: 1fr; }
  .pv { max-width: 260px; }
  .case-grid { grid-template-columns: 1fr; }
  .sec-grid { grid-template-columns: 1fr; }
  .sec-head .h2 { position: static; }
  .phero.has-visual .phero-grid { grid-template-columns: 1fr; }
  .glyph-stage { margin: 0; max-width: 300px; }
  .map-region { max-width: 520px; aspect-ratio: 1.5; }
  .models { grid-template-columns: 1fr; }
  .prose-grid { grid-template-columns: 1fr; }
  .toc { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-card { position: static; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .legend { flex-direction: column; gap: 16px; }
  .legend ul { grid-template-columns: 1fr 1fr; }
  .crow a { grid-template-columns: 1fr auto 20px; gap: 8px 14px; }
  .crow-reg { display: none; }
  .crow-stat { grid-column: 1 / -1; grid-row: 2; }
  .crow .ico { grid-row: 1; grid-column: 3; }
  .serieses { grid-template-columns: 1fr; }
  .roles { grid-template-columns: 1fr; }
  .story-row { grid-template-columns: 1fr; gap: 10px; }
  .dash-note { margin-left: 0; width: 100%; }
}
@media (max-width: 720px) {
  body { font-size: 1rem; }
  .hero-h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .hero-h1-b { font-size: .62em; }
  .hero .cta-row .btn, .band .cta-row .btn, .final .cta-row .btn { width: 100%; justify-content: space-between; }
  .serp { height: calc(7 * 50px + 16px); padding: 8px; }
  .serp-row { left: 8px; right: 8px; top: calc(8px + (var(--p, 1) - 1) * 50px); height: 44px; gap: 10px; padding: 0 10px; }
  .inst-tag { display: none; }
  .funnel { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .funnel li { padding: 10px 6px 12px; }
  .fn-t { font-size: .5rem; letter-spacing: .02em; }
  .chip { padding: 8px 10px; } .chip-v { font-size: 1.05rem; }
  .chip-a { top: auto; bottom: 34%; left: -4px; } .chip-c { right: 4px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat { padding: 34px 16px 28px; min-height: 220px; }
  .stat-wide { grid-column: span 2; padding-left: 0; border-left: 0; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(2), .stat:nth-child(4) { }
  .why { padding: 100px 0 80px; }
  .dossier { min-height: 440px; padding: 26px; }
  .d-big { font-size: clamp(3.6rem, 18vw, 5rem); }
  .svc-link { grid-template-columns: 34px 1fr 64px; }
  .svc-mglyph { width: 64px; height: 64px; }
  .svc-name { font-size: 1.6rem; }
  .ps-name { font-size: 2rem; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi { min-height: 130px; padding: 20px 16px; }
  .gsc-svg { height: 220px; }
  .dash-grid > .dp { grid-column: span 12; min-height: 0; }
  .dp-lines, .dp-cols { min-height: 110px; }
  .sprint { grid-template-columns: 1fr 1fr; }
  .dash-tabs { display: none; }
  .metrics { grid-template-columns: 1fr; }
  .metrics li:last-child:nth-child(odd) { grid-column: auto; }
  .faq-q button { grid-template-columns: 30px 1fr 34px; padding-left: 10px; }
  .faq-a-in p { padding: 0 10px 24px 52px; }
  .fgrid { grid-template-columns: 1fr; }
  .legend ul { grid-template-columns: 1fr; }
  .idx-row a { grid-template-columns: 40px 1fr 30px; gap: 10px 14px; padding: 26px 0; }
  .idx-text { grid-column: 2 / -1; grid-row: 2; }
  .idx-go { grid-column: 3; grid-row: 1; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .map-index { aspect-ratio: 1.6; margin-top: 30px; }
  .scards { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr; }
  .final-h { font-size: clamp(3rem, 15vw, 5rem); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .viz-ticker ul, .marquee-in, .final-radar, .final-grid, .hero-grid, .flow, .band-rings i { animation: none !important; }
  .flow { stroke-dasharray: none; opacity: .5; }
  .band-rings i { opacity: .5; transform: scale(1); }
}

/* ---------- JS hooks ---------- */
.is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }
.map-tip { top: 0; left: 0; transition: opacity .2s; z-index: 3; }
.js .hero-h1-a { background: none; color: var(--fog); }
.js .hero-h1-a .wi { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }