/* ==========================================================================
   Quwa Smart Services: design system
   Dark-first, large-type, motion-on-scroll. Built to feel engineered.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#f2f6fb;
  --ink-2:#aeb9c8;
  --ink-3:#7b8798;
  --ink-4:#4e5867;

  --bg:#05070b;
  --bg-1:#0a0e15;
  --bg-2:#10161f;
  --bg-3:#161e2a;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  --brand:#19c8e8;          /* QSS cyan */
  --brand-2:#0e8fb4;
  --brand-3:#67e8f9;
  --teal:#2dd4a7;
  --warm:#ff9f45;           /* thermal warm */
  --hot:#ff5f45;
  --violet:#8b7dff;

  --ok:#2dd4a7;
  --warn:#ffc247;
  --bad:#ff6b5b;

  --wrap:1180px;
  --wrap-narrow:760px;
  --r:16px;
  --r-lg:26px;
  --r-sm:10px;

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 40px -12px rgba(0,0,0,.6);
  --glow:0 0 0 1px rgba(25,200,232,.22),0 18px 60px -20px rgba(25,200,232,.35);
}

/* Light surfaces used for alternating sections */
.inverse{
  --ink:#0a0f16;
  --ink-2:#4a5666;
  --ink-3:#6b7787;
  --ink-4:#9aa5b3;
  --bg:#f7f9fb;
  --bg-1:#ffffff;
  --bg-2:#f1f4f8;
  --bg-3:#e7ecf2;
  --line:rgba(6,12,20,.10);
  --line-2:rgba(6,12,20,.18);
  --brand-3:#0e8fb4;
  --shadow:0 1px 2px rgba(10,20,35,.06),0 16px 44px -18px rgba(10,20,35,.20);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv02","cv03","cv04","ss01";
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

/* ---------- layout ---------- */
.wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 44px,var(--wrap-narrow));margin-inline:auto}
.section{position:relative;padding:clamp(72px,10vw,150px) 0;background:var(--bg);color:var(--ink)}
.section--tight{padding:clamp(52px,6vw,90px) 0}
.section--flush{padding-top:0}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* ---------- type ---------- */
.eyebrow{
  font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-3);display:flex;align-items:center;gap:10px;margin-bottom:20px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6;flex:none}
.eyebrow--plain::before{display:none}

.d1{font-size:clamp(2.9rem,7.4vw,5.6rem);line-height:1.02;letter-spacing:-.035em;font-weight:700}
.h1{font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.06;letter-spacing:-.03em;font-weight:700}
.h2{font-size:clamp(1.65rem,3.1vw,2.6rem);line-height:1.12;letter-spacing:-.024em;font-weight:660}
.h3{font-size:clamp(1.16rem,1.7vw,1.42rem);line-height:1.24;letter-spacing:-.014em;font-weight:640}
.h4{font-size:1.02rem;line-height:1.32;letter-spacing:-.008em;font-weight:640}

.lede{font-size:clamp(1.08rem,1.75vw,1.42rem);line-height:1.5;color:var(--ink-2);letter-spacing:-.012em}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.tiny{font-size:.8rem;line-height:1.5;color:var(--ink-3)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mw-60{max-width:60ch}.mw-52{max-width:52ch}.mw-44{max-width:44ch}
.center{text-align:center}
.center .eyebrow{justify-content:center}

.grad{
  background:linear-gradient(98deg,#67e8f9 0%,#22c9e8 46%,#2dd4a7 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;border-radius:999px;
  font-weight:580;font-size:.95rem;letter-spacing:-.005em;
  border:1px solid transparent;
  transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s,opacity .25s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--brand);color:#03151b;box-shadow:0 8px 30px -10px rgba(25,200,232,.7)}
.btn--primary:hover{background:var(--brand-3);box-shadow:0 14px 40px -10px rgba(25,200,232,.8)}
.btn--ghost{border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--brand);background:rgba(25,200,232,.09)}
.btn--text{padding:0;color:var(--brand-3);font-weight:580}
.btn--text:hover{transform:none;gap:13px}
.btn__arrow{transition:transform .3s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btnrow{display:flex;flex-wrap:wrap;gap:13px;align-items:center}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:80;
  background:rgba(5,7,11,.62);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s;
}
.nav.is-stuck{background:rgba(5,7,11,.9);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:26px;height:62px}
.brand{display:flex;align-items:center;gap:11px;font-weight:680;letter-spacing:-.022em;font-size:1.06rem;color:#fff;flex:none}
.brand__mark{width:27px;height:27px;flex:none}
.brand small{display:block;font:500 10px/1 var(--mono);letter-spacing:.13em;color:var(--ink-3);text-transform:uppercase;margin-top:3px}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__link{
  padding:8px 14px;border-radius:999px;font-size:.9rem;font-weight:520;color:var(--ink-2);
  transition:color .2s,background .2s;
}
.nav__link:hover,.nav__link[aria-current="page"]{color:#fff;background:rgba(255,255,255,.07)}
.nav__cta{margin-left:8px}
.nav__toggle{display:none;margin-left:auto;padding:8px;border-radius:9px}
.nav__toggle:hover{background:rgba(255,255,255,.07)}

/* dropdown */
.navdrop{position:relative}
.navdrop__panel{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-8px);
  width:min(92vw,660px);padding:14px;border-radius:var(--r-lg);
  background:rgba(13,18,26,.95);backdrop-filter:blur(24px);
  border:1px solid var(--line-2);box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
}
.navdrop:hover .navdrop__panel,.navdrop:focus-within .navdrop__panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.navdrop__item{display:block;padding:11px 13px;border-radius:12px;transition:background .18s}
.navdrop__item:hover{background:rgba(255,255,255,.07)}
.navdrop__item b{display:block;font-size:.92rem;font-weight:600;color:#fff;letter-spacing:-.01em}
.navdrop__item span{display:block;font-size:.79rem;color:var(--ink-3);margin-top:2px;line-height:1.4}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,860px);display:flex;align-items:center;overflow:hidden;background:var(--bg)}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.62}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 0%,transparent 24%,rgba(5,7,11,.72) 78%,var(--bg) 100%),
    linear-gradient(180deg,rgba(5,7,11,.55) 0%,transparent 26%,transparent 62%,var(--bg) 100%);
}
.hero__in{position:relative;z-index:2;padding:120px 0 90px;width:100%}
.hero__badge{
  display:inline-flex;align-items:center;gap:9px;padding:6px 15px 6px 7px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);
  font-size:.79rem;color:var(--ink-2);margin-bottom:30px;backdrop-filter:blur(10px);
}
.hero__badge b{
  padding:3px 9px;border-radius:999px;background:var(--brand);color:#03151b;
  font:700 10px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;flex:none;
}
.hero .lede{max-width:60ch;margin-top:26px}
.hero .btnrow{margin-top:40px}

/* The hero headline is a long one, and its manual <br>s are tuned for the
   display size. Once the column is narrow enough that the text wraps on its
   own, those breaks compound with the natural wrapping and the headline grows
   to eight ragged lines, so drop them and let it wrap, then ease the floor of
   the clamp so six words do not fill a phone screen. Scoped to .hero: the other
   pages' d1 headings are short and already wrap cleanly. */
@media (max-width:820px){ .hero .d1 br{display:none} }
@media (max-width:560px){ .hero .d1{font-size:clamp(2.05rem,8.4vw,2.75rem)} }

/* scroll cue */
.scrollcue{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);
}
.scrollcue i{display:block;width:1px;height:38px;background:linear-gradient(var(--ink-4),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}

/* ---------- stat rows ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--bg-1);padding:26px 22px}
.stat__v{font:700 clamp(1.7rem,3.4vw,2.5rem)/1 var(--sans);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat__v .u{font-size:.5em;font-weight:600;color:var(--ink-3);margin-left:5px;letter-spacing:0}
.stat__l{margin-top:9px;font-size:.83rem;color:var(--ink-3);line-height:1.4}
.stat--brand .stat__v{color:var(--brand-3)}
.stat--warn .stat__v{color:var(--warn)}
.stat--bad .stat__v{color:var(--bad)}

/* ---------- cards ---------- */
/* Explicit column counts. auto-fit packed six-card sections as 4+2, which reads
   as a mistake rather than a layout. */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:660px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
}

.card{
  position:relative;background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px;overflow:hidden;
  transition:border-color .3s,transform .4s var(--ease),background .3s;
}
.card--link:hover{border-color:var(--line-2);transform:translateY(-3px)}
.card__ic{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(140deg,rgba(25,200,232,.20),rgba(45,212,167,.10));
  border:1px solid rgba(25,200,232,.24);color:var(--brand-3);
}
.card__ic svg{width:19px;height:19px}
.card .h3{margin-bottom:9px}
.card p{color:var(--ink-2);font-size:.95rem}
.card__tag{font:600 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--brand-3);margin-bottom:13px;display:block}
.card__foot{margin-top:20px;padding-top:17px;border-top:1px solid var(--line)}

.ticks{margin-top:18px;display:grid;gap:9px}
.ticks li{position:relative;padding-left:23px;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.ticks li::before{
  content:"";position:absolute;left:0;top:.58em;width:11px;height:6px;
  border-left:1.6px solid var(--brand);border-bottom:1.6px solid var(--brand);
  transform:rotate(-45deg);
}

/* severity pills */
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font:650 10px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid currentColor;
}
.pill--crit{color:var(--bad);background:rgba(255,107,91,.10)}
.pill--high{color:var(--warn);background:rgba(255,194,71,.10)}
.pill--med{color:var(--brand-3);background:rgba(25,200,232,.10)}
.pill--strat{color:var(--violet);background:rgba(139,125,255,.12)}
.pill--ok{color:var(--ok);background:rgba(45,212,167,.10)}

/* ---------- figure / media ---------- */
.fig{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--bg-1)}
.fig img{width:100%;display:block}
.fig figcaption{padding:15px 20px;font-size:.83rem;color:var(--ink-3);border-top:1px solid var(--line);line-height:1.5}
.fig--ir img{filter:saturate(1.06) contrast(1.03)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,64px);align-items:center}
.split--wide{grid-template-columns:1.1fr .9fr}
.split--rev>*:first-child{order:2}

/* ---------- video (click-to-load facade) ----------
   Nothing loads from Vimeo until the visitor asks for it: the poster is
   self-hosted and the iframe is only injected on play. The play control is the
   brand mark itself: the aperture is already a triangle in a ring. */
.video{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:#000;isolation:isolate;
}
.video__ratio{position:relative;width:100%;padding-top:56.25%}
.video__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-out),filter .6s var(--ease);
}
.video:hover .video__poster{transform:scale(1.03);filter:brightness(.82)}
.video__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,11,.34) 0%,rgba(5,7,11,.05) 34%,rgba(5,7,11,.72) 100%);
}
.video__btn{
  position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;
  border:0;background:none;cursor:pointer;z-index:2;
}
.video__mark{width:88px;height:88px;filter:drop-shadow(0 10px 34px rgba(0,0,0,.6));
  transition:transform .45s var(--ease-out)}
.video__btn:hover .video__mark{transform:scale(1.09)}
.video__btn:active .video__mark{transform:scale(1.02)}
.video__ring{transform-origin:50% 50%;transition:stroke .35s}
.video__btn:hover .video__ring{stroke:#fff}
.video__meta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:26px 28px;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
}
.video__t{font-size:1.06rem;font-weight:620;letter-spacing:-.014em;color:#fff;line-height:1.3}
.video__s{font-size:.8rem;color:rgba(255,255,255,.68);margin-top:5px}
.video__dur{
  font:600 .74rem/1 var(--mono);letter-spacing:.08em;color:#fff;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.24);
  padding:6px 11px;border-radius:999px;backdrop-filter:blur(8px);flex:none;
}
.video.is-live .video__poster,.video.is-live .video__scrim,
.video.is-live .video__btn,.video.is-live .video__meta{display:none}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.video__cap{
  padding:15px 20px;font-size:.83rem;color:var(--ink-3);line-height:1.5;
  border-top:1px solid var(--line);background:var(--bg-1);
}
@media (max-width:640px){ .video__mark{width:62px;height:62px} .video__meta{padding:18px} }

/* ---------- news ---------- */
.news{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.newsitem{
  background:var(--bg-1);padding:26px 28px;display:grid;
  grid-template-columns:132px 1fr auto;gap:26px;align-items:start;
  transition:background .22s;
}
a.newsitem:hover{background:var(--bg-2)}
.newsitem__d{font:600 .78rem/1.5 var(--mono);letter-spacing:.06em;color:var(--brand-3);padding-top:3px}
.newsitem__k{font:600 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:9px}
.newsitem__t{font-size:1.06rem;font-weight:620;letter-spacing:-.014em;line-height:1.32}
.newsitem__b{font-size:.92rem;color:var(--ink-2);margin-top:8px;line-height:1.55;max-width:70ch}
.newsitem__go{color:var(--brand-3);font-size:1.1rem;padding-top:2px;transition:transform .3s var(--ease)}
a.newsitem:hover .newsitem__go{transform:translateX(4px)}
@media (max-width:720px){
  .newsitem{grid-template-columns:1fr;gap:10px}
  .newsitem__go{display:none}
}


/* ---------- presence map ---------- */
/* The map is drawn dark-first (a pale landmass on a dark field) so on a light
   .inverse section it was white-on-white and effectively invisible. Rather than
   maintain a second palette for it, the map carries its own dark surface and
   re-declares the dark tokens locally, so it reads correctly in any section. */
.map{
  --ink:#f2f6fb; --ink-2:#aeb9c8; --ink-3:#7b8798; --ink-4:#4e5867;
  --bg:#05070b; --bg-1:#0a0e15;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --brand-3:#67e8f9;
  position:relative;display:grid;grid-template-columns:1fr 260px;gap:28px;align-items:center;
  background:#080c12;border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);padding:clamp(20px,3vw,34px);color:var(--ink);
}
.map__svg{width:100%;height:auto;overflow:visible}
.map__land{fill:rgba(255,255,255,.075);stroke:rgba(255,255,255,.24);stroke-width:1.4;stroke-linejoin:round}
.map__lake{fill:var(--bg);stroke:rgba(255,255,255,.10);stroke-width:1}
.map__halo{fill:var(--brand);opacity:.16;transition:opacity .25s,r .25s var(--ease)}
.map__dot{fill:var(--brand);transition:fill .25s,r .25s var(--ease)}
.map__lbl{fill:var(--ink-2);font-family:var(--sans);font-size:15px;font-weight:600;
  paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round;transition:fill .25s}
.map__pin{cursor:pointer;outline:none}
.map__pin:hover .map__halo,.map__pin.is-on .map__halo{opacity:.34}
.map__pin:hover .map__dot,.map__pin.is-on .map__dot{fill:var(--brand-3)}
.map__pin:hover .map__lbl,.map__pin.is-on .map__lbl{fill:#fff}
.map__pin:focus-visible .map__halo{opacity:.4}
.map__read{border-left:1px solid var(--line);padding-left:22px}
.map__city{font-size:1.24rem;font-weight:680;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.map__city span{display:block;font:600 10px/1 var(--mono);letter-spacing:.14em;
  color:var(--brand-3);margin-top:8px}
.map__city--idle{color:var(--ink)}
.map__note{font-size:.9rem;line-height:1.55;color:var(--ink-2);margin-top:14px}
@media (max-width:760px){
  .map{grid-template-columns:1fr;gap:20px}
  .map__read{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:18px}
}
@media (max-width:900px){
  .map{grid-template-columns:1fr;gap:18px}
  .map__read{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}
  .map__lbl{font-size:19px}
}

/* ---------- client trust strip ----------
   Several supplied marks carry a baked-in white background that shows as a grey
   box on a dark section, and the darker wordmarks disappear entirely. The strip
   therefore brings its own white surface rather than relying on the section it
   happens to sit in. */
/* A centred flex wrap rather than a fixed grid, because the count is no longer a
   multiple of the row length: 14 marks lay out 5 / 5 / 4 and the short last row
   centres itself instead of sitting hard against the left with an empty cell.
   The 195px basis reproduces what repeat(5,1fr) gave at 1180px, which is about
   the width the widest mark (Gateway, 4.46:1) needs at the full 44px cap. It is
   195 and not 200 because 5*200 + 4*30 is exactly the 1120px available, and
   sub-pixel rounding then wrapped a row early -- leaving 25px of slack keeps five
   per row deterministic.
   flex-grow stays 0 deliberately: if the last row stretched to fill, its four
   logos would render larger than the ten above them. */
.logos{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:34px 30px;
  background:#fff;border:1px solid rgba(6,12,20,.10);
  border-radius:var(--r-lg);padding:clamp(22px,3vw,34px) clamp(20px,3vw,30px);
}
.logo{display:flex;align-items:center;justify-content:center;height:52px;flex:0 1 195px}
.logo img{
  max-height:44px;width:auto;max-width:100%;object-fit:contain;
  filter:saturate(.88);opacity:.9;
  transition:filter .3s var(--ease),opacity .3s var(--ease),transform .4s var(--ease);
}
.logo:hover img{filter:none;opacity:1;transform:scale(1.05)}
@media (max-width:900px){ .logos{gap:28px 22px} .logo{flex-basis:170px} }
@media (max-width:560px){ .logo{flex-basis:150px} .logo img{max-height:36px} }

/* ---------- news posts (picture-led archive) ---------- */
.postgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.post{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .3s,transform .4s var(--ease);
}
.post:hover{border-color:var(--line-2);transform:translateY(-3px)}
.post__fig{background:var(--bg-2);overflow:hidden}
.post__fig img{width:100%;height:200px;object-fit:cover;display:block;
  transition:transform .8s var(--ease-out)}
.post:hover .post__fig img{transform:scale(1.04)}
.post__b{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.post__meta{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.post__kind{
  font:640 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand-3);border:1px solid rgba(25,200,232,.3);
  background:rgba(25,200,232,.08);padding:5px 9px;border-radius:999px;
}
.post__date{font:500 .78rem/1 var(--mono);color:var(--ink-4)}
.post__t{font-size:1.08rem;font-weight:640;letter-spacing:-.016em;line-height:1.3;color:var(--ink)}
.post--slim{justify-content:flex-start}
.post--slim .post__b{padding:22px 24px}
.post--slim .post__t{font-size:1rem}
.post__ex{margin-top:11px;font-size:.9rem;line-height:1.6;color:var(--ink-2)}
.post__go{
  margin-top:16px;display:inline-flex;align-items:center;gap:7px;
  font:580 .85rem/1 var(--sans);color:var(--brand-3);
}
.post__go i{font-style:normal;transition:transform .3s var(--ease)}
.post:hover .post__go i{transform:translateX(4px)}
.post__src{
  margin-top:12px;align-self:flex-start;font:500 .8rem/1 var(--sans);
  color:var(--ink-3);border-bottom:1px solid var(--line-2);padding-bottom:2px;
  transition:color .2s,border-color .2s;
}
.post__src:hover{color:var(--brand-3);border-color:var(--brand-3)}
.chip.is-on{border-color:var(--brand);color:var(--brand-3);background:rgba(25,200,232,.08)}
button.chip{cursor:pointer}
@media (max-width:1000px){ .postgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:660px){ .postgrid{grid-template-columns:minmax(0,1fr)} }

/* ---------- sticky pinned scroll ---------- */
.pin{position:relative}
.pin__stage{position:sticky;top:62px;height:calc(100svh - 62px);display:flex;align-items:center;overflow:hidden}
.pin__steps{position:relative;z-index:2}
.pin__step{min-height:88svh;display:flex;align-items:center;padding:20px 0}
.pin__step .card{background:rgba(10,14,21,.82);backdrop-filter:blur(16px);max-width:430px}

/* ---------- scroll reveal ---------- */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
[data-rv].in{opacity:1;transform:none}
[data-rv-d="1"]{transition-delay:.08s}
[data-rv-d="2"]{transition-delay:.16s}
[data-rv-d="3"]{transition-delay:.24s}
[data-rv-d="4"]{transition-delay:.32s}
[data-rv-d="5"]{transition-delay:.40s}
[data-rv-d="6"]{transition-delay:.48s}

/* ---------- simulator ---------- */
.sim{
  background:linear-gradient(168deg,var(--bg-1),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.sim__head{padding:24px 28px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between}
.sim__head .h3{margin:0}
.sim__body{display:grid;grid-template-columns:300px 1fr;gap:0}
.sim__controls{padding:26px 28px;border-right:1px solid var(--line);display:grid;gap:22px;align-content:start}
.sim__view{padding:26px 28px;min-width:0}

.ctl{display:grid;gap:9px}
.ctl__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ctl__lab{font-size:.85rem;font-weight:560;color:var(--ink-2)}
.ctl__val{font:600 .92rem/1 var(--mono);color:var(--brand-3);font-variant-numeric:tabular-nums}
.ctl__hint{font-size:.74rem;color:var(--ink-4);line-height:1.45}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:var(--bg-3);border:1px solid var(--line)}
input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:var(--bg-3);border:1px solid var(--line)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:17px;height:17px;border-radius:50%;margin-top:-7.5px;
  background:var(--brand);border:2px solid var(--bg-1);
  box-shadow:0 0 0 1px var(--brand),0 3px 10px rgba(0,0,0,.5);
  transition:transform .18s var(--ease);
}
input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--brand);border:2px solid var(--bg-1);
  box-shadow:0 0 0 1px var(--brand);
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.18)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.05)}

/* toggle list */
.tog{display:flex;align-items:flex-start;gap:12px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);cursor:pointer;transition:border-color .2s,background .2s;text-align:left;width:100%}
.tog:hover{border-color:var(--line-2)}
.tog.on{border-color:rgba(25,200,232,.42);background:rgba(25,200,232,.07)}
.tog__box{
  flex:none;width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line-2);
  display:grid;place-items:center;margin-top:1px;transition:background .2s,border-color .2s;
}
.tog.on .tog__box{background:var(--brand);border-color:var(--brand)}
.tog__box svg{width:11px;height:11px;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s var(--ease);color:#03151b}
.tog.on .tog__box svg{opacity:1;transform:none}
.tog__t{font-size:.87rem;font-weight:550;line-height:1.35;color:var(--ink)}
.tog__s{font:500 .74rem/1.4 var(--mono);color:var(--ink-3);margin-top:3px;display:block}

/* readouts */
.reads{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:22px}
.read{background:var(--bg-2);padding:16px 17px}
.read__l{font:600 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:9px}
.read__v{font:700 clamp(1.28rem,2.5vw,1.75rem)/1 var(--sans);letter-spacing:-.028em;font-variant-numeric:tabular-nums;transition:color .3s}
.read__v .u{font-size:.52em;font-weight:600;color:var(--ink-3);margin-left:4px;letter-spacing:0}
.read__s{font-size:.75rem;color:var(--ink-3);margin-top:6px;line-height:1.4}
.read--brand .read__v{color:var(--brand-3)}
.read--ok .read__v{color:var(--ok)}
.read--warn .read__v{color:var(--warn)}
.read--bad .read__v{color:var(--bad)}

.verdict{
  display:flex;align-items:center;gap:11px;padding:13px 17px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg-2);font-size:.88rem;line-height:1.45;margin-top:20px;
}
.verdict b{font-weight:640}
.verdict.ok{border-color:rgba(45,212,167,.35);background:rgba(45,212,167,.08)}
.verdict.bad{border-color:rgba(255,107,91,.35);background:rgba(255,107,91,.08)}
.verdict.warn{border-color:rgba(255,194,71,.35);background:rgba(255,194,71,.08)}
.verdict__dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}

.formula{
  font-family:var(--mono);font-size:.85rem;line-height:1.85;color:var(--ink-2);
  padding:15px 18px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);
  overflow-x:auto;white-space:nowrap;
}
.formula b{color:var(--brand-3);font-weight:600}
.formula em{color:var(--warm);font-style:normal}

/* ---------- charts ---------- */
.chart{width:100%;overflow:visible}
.chart text{font-family:var(--mono);font-size:9.5px;fill:var(--ink-4)}
.chart .ax{stroke:var(--line);stroke-width:1}
.chart .gl{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.chart .lbl{fill:var(--ink-3);font-size:10px}
.chart__legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.chart__legend span{display:flex;align-items:center;gap:7px;font-size:.79rem;color:var(--ink-3)}
.chart__legend i{width:11px;height:11px;border-radius:3px;flex:none}
.chart-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tbl{min-width:560px;font-size:.9rem}
.tbl th,.tbl td{padding:13px 17px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{
  font:640 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);
  background:var(--bg-2);white-space:nowrap;
}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .18s}
.tbl tbody tr:hover{background:rgba(255,255,255,.03)}
.inverse .tbl tbody tr:hover{background:rgba(6,12,20,.03)}
.tbl .num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr.is-off td{color:var(--ink-4)}

/* ---------- prose (insights) ---------- */
.prose{font-size:1.08rem;line-height:1.72;color:var(--ink-2)}
.prose>*+*{margin-top:1.25em}
.prose h2{font-size:clamp(1.42rem,2.5vw,1.95rem);line-height:1.18;letter-spacing:-.022em;font-weight:660;color:var(--ink);margin-top:2.1em}
.prose h3{font-size:1.16rem;line-height:1.32;font-weight:640;color:var(--ink);margin-top:1.7em}
.prose strong{color:var(--ink);font-weight:620}
.prose a{color:var(--brand-3);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(103,232,249,.4)}
.prose a:hover{text-decoration-color:currentColor}
.prose ul{display:grid;gap:.6em;padding-left:0}
.prose ul li{position:relative;padding-left:24px}
.prose ul li::before{content:"";position:absolute;left:5px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--brand);opacity:.75}
.prose ol{counter-reset:n;display:grid;gap:.6em}
.prose ol li{position:relative;padding-left:32px;counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:.1em;font:640 .78rem/1.6 var(--mono);color:var(--brand-3)}
.prose blockquote{
  border-left:2px solid var(--brand);padding:4px 0 4px 24px;margin-left:0;
  font-size:1.14rem;line-height:1.55;color:var(--ink);letter-spacing:-.012em;
}
.prose figure{margin:2.2em 0}
.prose .pull{
  font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.36;letter-spacing:-.02em;color:var(--ink);
  font-weight:600;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:2em 0;
}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--bg-2);padding:2px 6px;border-radius:5px;border:1px solid var(--line);color:var(--brand-3)}

.postmeta{display:flex;flex-wrap:wrap;gap:9px 18px;align-items:center;font-size:.83rem;color:var(--ink-3)}
.postmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-4)}

.callout{
  border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;background:var(--bg-1);
  display:grid;gap:9px;
}
.callout--brand{border-color:rgba(25,200,232,.3);background:rgba(25,200,232,.06)}
.callout__t{font:640 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--brand-3)}

/* ---------- timeline ---------- */
.tl{display:grid;gap:0;position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl__i{position:relative;padding:16px 0}
.tl__i::before{content:"";position:absolute;left:-24px;top:23px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--brand)}
.tl__d{font:640 .78rem/1 var(--mono);color:var(--brand-3);letter-spacing:.04em}
.tl__l{margin-top:6px;font-size:.95rem;color:var(--ink)}

/* ---------- footer ---------- */
.foot{background:var(--bg-1);border-top:1px solid var(--line);padding:64px 0 34px}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px}
.foot__t{font:640 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:17px}
.foot__l{display:grid;gap:11px}
.foot__l a{font-size:.9rem;color:var(--ink-2);transition:color .2s}
.foot__l a:hover{color:var(--brand-3)}
.foot__bot{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:.81rem;color:var(--ink-4)}

/* ---------- q-peak cross-link band ---------- */
.qpeak{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid rgba(45,212,167,.26);
  background:linear-gradient(126deg,rgba(45,212,167,.11),rgba(25,200,232,.07) 48%,transparent 78%),var(--bg-1);
  padding:clamp(30px,4.4vw,54px);
}
.qpeak::before{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(45,212,167,.20),transparent 68%);pointer-events:none;
}
.qpeak__mark{width:44px;height:44px;margin-bottom:22px}

/* ---------- misc ---------- */
.note{font-size:.79rem;color:var(--ink-4);line-height:1.55;margin-top:14px;padding-left:15px;border-left:1px solid var(--line)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;font-size:.9rem}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:5px 12px;border-radius:999px;border:1px solid var(--line);font-size:.78rem;color:var(--ink-2);background:var(--bg-2)}
.skip{position:absolute;left:-9999px;top:0;padding:11px 18px;background:var(--brand);color:#03151b;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .sim__body{grid-template-columns:1fr}
  .sim__controls{border-right:0;border-bottom:1px solid var(--line)}
  .foot__grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:860px){
  body{font-size:16px}
  .nav__links{
    position:fixed;inset:62px 0 auto;flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(8,11,17,.97);backdrop-filter:blur(24px);
    padding:16px 22px 26px;border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:.28s var(--ease);
    max-height:calc(100svh - 62px);overflow-y:auto;
  }
  .nav__links.open{transform:none;opacity:1;visibility:visible}
  .nav__link{padding:13px 14px;border-radius:11px;font-size:1rem}
  .nav__toggle{display:grid;place-items:center}
  .nav__cta{margin:10px 0 0}
  .navdrop__panel{
    position:static;transform:none;width:auto;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;border:0;box-shadow:none;padding:2px 0 2px 12px;
    grid-template-columns:1fr;display:none;
  }
  .navdrop.open .navdrop__panel{display:grid}
  .split,.split--wide{grid-template-columns:1fr}
  .split--rev>*:first-child{order:0}
  .pin__stage{position:relative;top:0;height:auto;margin-bottom:24px}
  .pin__step{min-height:auto;padding:14px 0}
  .pin__step .card{max-width:none}
  .foot__grid{grid-template-columns:1fr}
  .section{padding:64px 0}
}
@media (max-width:520px){
  .wrap,.wrap-narrow{width:min(100% - 32px,var(--wrap))}
  .card{padding:22px}
  .sim__controls,.sim__view,.sim__head{padding:20px}
}

/* ---------- motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1;transform:none}
  .hero__canvas{display:none}
}
@media print{
  .nav,.foot,.scrollcue,.hero__canvas,.sim__controls{display:none}
  body{background:#fff;color:#000}
}

@media (max-width:960px) and (min-width:861px){
  .nav__links{
    position:fixed;inset:62px 0 auto;flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(8,11,17,.97);backdrop-filter:blur(24px);
    padding:16px 22px 26px;border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:.28s var(--ease);
    max-height:calc(100svh - 62px);overflow-y:auto;
  }
  .nav__links.open{transform:none;opacity:1;visibility:visible}
  .nav__link{padding:13px 14px;border-radius:11px;font-size:1rem}
  .nav__toggle{display:grid;place-items:center}
  .nav__cta{margin:10px 0 0}
  .navdrop__panel{
    position:static;transform:none;width:auto;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;border:0;box-shadow:none;padding:2px 0 2px 12px;
    display:none;
  }
  .navdrop.open .navdrop__panel{display:grid}
}