/* GridNMS public web app — shared design system (landing + signup).
   Light, restrained, technical. One accent (brand blue) on controls/data only. */

:root{
  /* Dark theme (mockup) — surfaces layer up from --bg; --card sits above --surface */
  --bg:#0a0e17; --surface:#0f1626; --card:#131c2e; --panel:#0c1322;
  --nav-bg:rgba(10,14,23,.82); --border:#202a3d; --edge:#33415a;
  --ink:#f4f7fb; --body:#bcc7d9; --muted:#8694a9;
  --brand:#3b82f6; --brand-strong:#60a5fa;
  --green:#34d399; --orange:#fb923c; --orange-ink:#fdba74; --red:#f87171;
  /* semantic tints (tokenized — no one-off hex in markup) */
  --brand-tint:#13233c; --brand-tint-border:#284a78;
  --danger-tint:#2a1618; --danger-tint-border:#5b2b30; --danger-ink:#fca5a5;
  --maxw:100%;
  --z-skip:200; --z-nav:100;
  --sans:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Sora',ui-sans-serif,system-ui,sans-serif;
  --lead:'Source Serif 4',Georgia,'Times New Roman',serif;
}
::selection{ background:rgba(59,130,246,.32); }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--bg); }
body{ margin:0; position:relative; background:transparent; color:var(--body); font-family:var(--sans);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* fixed atmospheric background — content scrolls over it */
body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(44% 40% at 82% 4%,  rgba(59,130,246,.20), transparent 60%),
    radial-gradient(42% 38% at 6% 34%,   rgba(59,130,246,.12), transparent 62%),
    radial-gradient(40% 34% at 96% 66%,  rgba(59,130,246,.11), transparent 62%),
    radial-gradient(60% 46% at 50% 104%, rgba(37,99,235,.18),  transparent 60%); }
/* repeating huge Grid sphere — scrolls with the page, faint at the top, more visible toward the bottom */
body::after{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:url("/hero-grid.svg") repeat-y center top;
  background-size:auto 150vh; opacity:.15;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.26) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.95) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.26) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.95) 100%); }
h1,h2,h3{ color:var(--ink); margin:0; line-height:1.12; letter-spacing:-0.03em; text-wrap:balance; font-weight:700; }
h1,h2,.pillar h3{ font-family:var(--display); }
h1{ font-weight:800; letter-spacing:-0.035em; }
/* lead / intro paragraphs use a distinct serif for editorial contrast */
.hero .sub, .pillar .lede, .group .lede, .section-head .prose,
.tour-intro .sub, .tour-step p, .case .prose, .price-hero .lead{
  font-family:var(--lead); letter-spacing:0; }
h1{ font-size:clamp(2.1rem, 1.4rem + 3vw, 3.6rem); }
h2{ font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3{ font-size:1.125rem; letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:var(--mono); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(24px,4vw,64px); }
.prose{ max-width:80ch; color:var(--body); text-wrap:pretty; }
.muted{ color:var(--muted); }

/* accessibility helpers */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:12px; top:-48px; z-index:var(--z-skip); background:var(--brand);
  color:#fff; padding:.6rem 1rem; border-radius:8px; font-weight:600; transition:top .15s ease; }
.skip:focus{ top:12px; }

/* buttons — 44px min target */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px;
  font-family:var(--sans); font-weight:600; font-size:.95rem; border-radius:8px; padding:.6rem 1.15rem;
  border:1px solid transparent; cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-strong); }
.btn-secondary{ border-color:var(--border); color:var(--ink); background:var(--card); }
.btn-secondary:hover{ border-color:var(--edge); }
a:focus-visible, .btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; border-radius:8px; }

/* nav */
header.nav{ position:sticky; top:0; z-index:var(--z-nav); background:var(--nav-bg);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand{ display:inline-flex; align-items:center; gap:.55rem; font-weight:700; color:var(--ink); }
.nav-links{ display:flex; gap:2rem; }
.nav-links a{ color:var(--muted); font-size:.93rem; font-weight:500; padding:.4rem 0; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:1rem; }
.nav-cta .signin{ color:var(--muted); font-size:.93rem; font-weight:500; padding:.5rem .25rem; }
.nav-cta .signin:hover{ color:var(--ink); }
@media(max-width:780px){ .nav-links{ display:none; } }

/* sections + rows */
section{ padding:clamp(4.5rem,8vw,7.5rem) 0; }
.alt{ background:rgba(255,255,255,.022); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
@media(max-width:880px){ .row{ grid-template-columns:1fr; } .row .visual{ order:2; } }
.feature h2{ margin-bottom:1rem; }
ul.checks{ list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.85rem; }
ul.checks li{ position:relative; padding-left:1.8rem; color:var(--body); font-size:.97rem; line-height:1.55; }
ul.checks svg{ position:absolute; left:0; top:.3rem; flex:none; }

/* product panels + diagrams */
.panel{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px;
  box-shadow:0 1px 2px rgba(11,18,32,.04), 0 12px 28px -18px rgba(11,18,32,.18); }
.panel .bar{ display:flex; align-items:center; gap:.5rem; padding:2px 4px 12px; }
.panel .bar .label{ font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.panel svg.diagram{ width:100%; display:block; background:var(--panel); border:1px solid var(--border); border-radius:8px; }
.nlabel{ font-family:var(--mono); font-size:10px; }
.tint-danger{ background:var(--danger-tint); border:1px solid var(--danger-tint-border); }
.tint-brand{ background:var(--brand-tint); border:1px solid var(--brand-tint-border); }
.row-item{ display:flex; justify-content:space-between; align-items:center; padding:.65rem .8rem; border-radius:8px; }
.row-item.plain{ background:var(--surface); border:1px solid var(--border); }

/* product app-frame showcase (Metrics) */
.appframe{ border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--card);
  box-shadow:0 1px 2px rgba(11,18,32,.04), 0 30px 60px -34px rgba(11,18,32,.28); }
.appbar{ display:flex; align-items:center; gap:.45rem; padding:.6rem .9rem; border-bottom:1px solid var(--border); background:var(--surface); }
.appbar .dot{ width:10px; height:10px; border-radius:50%; background:var(--edge); }
.appbar .crumb{ margin-left:.6rem; font-size:.74rem; color:var(--muted); }
.appbody{ padding:clamp(.9rem,2vw,1.4rem); display:grid; gap:1.1rem; }
.mgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media(max-width:760px){ .mgrid{ grid-template-columns:1fr; } }
.mcard{ border:1px solid var(--border); border-radius:10px; padding:.7rem .8rem; background:var(--card); }
.mc-h{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; }
.mc-t{ font-weight:600; font-size:.9rem; color:var(--ink); }
.mc-u{ font-size:.68rem; color:var(--muted); }
.mcard svg{ width:100%; height:auto; display:block; }
.mc-leg{ display:flex; gap:1.1rem; font-size:.7rem; color:var(--muted); margin-top:.4rem; }
.mc-leg b{ font-weight:700; }
.mtiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(116px,1fr)); gap:.7rem; }
.mtile{ border:1px solid var(--border); border-radius:10px; padding:.6rem .75rem; background:var(--surface); }
.mtile .k{ font-size:.62rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.mtile .v{ font-size:1.15rem; font-weight:700; color:var(--ink); margin-top:.2rem; }
.mtile .v small{ font-size:.7rem; font-weight:500; color:var(--muted); }

/* graph entrance — visible by default, animate as enhancement only */
@keyframes nodeIn{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
@keyframes edgeIn{ from{ stroke-dashoffset:200; } to{ stroke-dashoffset:0; } }
.g-node{ transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion: no-preference){
  .g-edge{ stroke-dasharray:200; stroke-dashoffset:200; animation:edgeIn .9s cubic-bezier(.22,1,.36,1) forwards; }
  .g-node{ opacity:0; animation:nodeIn .5s cubic-bezier(.22,1,.36,1) forwards; }
}

/* secondary capabilities */
.caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.caps > div{ padding:0 2rem; border-left:1px solid var(--border); }
.caps > div:first-child{ padding-left:0; border-left:0; }
@media(max-width:780px){ .caps{ grid-template-columns:1fr; gap:2rem; } .caps > div{ padding:0; border-left:0; } }

/* how it works — real sequence */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-top:2.5rem;
  max-width:1000px; margin-left:auto; margin-right:auto; }
.flow > div{ background:var(--card); padding:1.5rem; }
.flow h3{ margin:0 0 .4rem; }
.flow p{ font-size:.9rem; color:var(--muted); }
@media(max-width:780px){ .flow{ grid-template-columns:1fr; } }

/* deployment checklist mock (#171) */
.checklist{ background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden;
  box-shadow:0 10px 34px rgba(11,18,32,.07); }
.checklist .ck-head{ padding:1rem 1.15rem .95rem; border-bottom:1px solid var(--border); background:var(--surface); }
.checklist .ck-title{ display:flex; align-items:center; justify-content:space-between; font-weight:700; color:var(--ink); font-size:.98rem; }
.checklist .ck-count{ font-family:var(--mono); font-size:.82rem; color:var(--brand); font-weight:700; }
.checklist .ck-prog{ margin-top:.7rem; height:6px; border-radius:999px; background:var(--border); overflow:hidden; }
.checklist .ck-prog > span{ display:block; height:100%; width:70%; background:var(--brand); border-radius:999px; }
.checklist .ck-sub{ margin-top:.55rem; font-size:.76rem; color:var(--muted); }
.ck-item{ display:flex; align-items:center; gap:.7rem; padding:.6rem 1.15rem; border-top:1px solid var(--border); font-size:.9rem; }
.ck-item .ck-ic{ flex:none; display:block; }
.ck-item .ck-t{ flex:1; color:var(--ink); }
.ck-item.done .ck-t{ color:var(--muted); }
.ck-item.current{ background:var(--brand-tint); }
.ck-item.current .ck-t{ font-weight:600; }
.ck-tag{ font-size:.66rem; font-weight:600; font-family:var(--mono); color:var(--muted); white-space:nowrap; }
.ck-item.done .ck-tag{ color:#16a34a; }
.ck-item.current .ck-tag{ color:var(--brand); }
.onb-list{ margin-top:1.4rem; display:grid; gap:.7rem; }
.onb-list li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.94rem; color:var(--body); }
.onb-list svg{ flex:none; margin-top:.15rem; }

/* pricing */
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin:2.5rem auto 0; max-width:1180px; }
@media(max-width:720px){ .plans{ grid-template-columns:1fr; } }
.plan{ border:1px solid var(--border); border-radius:12px; padding:2rem; background:var(--card); }
.plan.primary{ border-color:var(--brand-tint-border); }
.plan .price{ display:flex; align-items:baseline; gap:.25rem; margin-top:.4rem; }
.plan .price .amt{ font-size:2rem; font-weight:700; color:var(--ink); letter-spacing:-0.02em; }
.plan ul{ list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.7rem; font-size:.93rem; color:var(--body); }
.plan ul li{ display:grid; grid-template-columns:1.1rem 1fr; gap:.6rem; }

.ctaband{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.5rem;
  max-width:800px; margin-inline:auto; }

/* the Grid sphere behind a callout / form section */
.grid-bg{ position:relative; overflow:hidden; isolation:isolate; }
.grid-bg::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(720px,128vw); aspect-ratio:1; z-index:-2; pointer-events:none; opacity:.6;
  background:url("/hero-grid.svg") center/contain no-repeat; }
.grid-bg::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side at 50% 50%, rgba(10,14,23,.6), rgba(10,14,23,.2) 60%, transparent 80%); }
.grid-bg > .wrap{ position:relative; z-index:1; }
/* HUGE sphere — for the signup / contact form pages */
.grid-huge::before{ width:min(1500px,185vw); opacity:.5; }
.grid-huge::after{ background:radial-gradient(closest-side at 50% 42%, rgba(10,14,23,.62), rgba(10,14,23,.22) 62%, transparent 82%); }

footer{ border-top:1px solid var(--border); }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:2.25rem; padding-bottom:2.25rem; color:var(--muted); font-size:.9rem; }
.foot a{ padding:.25rem 0; }
.foot a:hover{ color:var(--ink); }

/* ---- forms (signup) ---- */
.form-wrap{ max-width:560px; margin:0 auto; }
.notice{ display:flex; gap:.85rem; align-items:flex-start; background:var(--brand-tint);
  border:1px solid var(--brand-tint-border); border-radius:10px; padding:1rem 1.1rem; color:var(--body); }
.notice strong{ color:var(--ink); }
.field{ display:grid; gap:.4rem; margin-top:1.1rem; }
.field label{ font-size:.9rem; font-weight:600; color:var(--ink); }
.field .req{ color:var(--brand); }
.field .hint{ font-size:.82rem; color:var(--muted); }
.field input, .field select, .field textarea{ font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--card);
  border:1px solid var(--border); border-radius:8px; padding:.7rem .85rem; min-height:44px; width:100%; }
.field textarea{ resize:vertical; line-height:1.5; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--edge); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:var(--red); }
.err{ font-size:.82rem; color:var(--danger-ink); min-height:1em; }
.consent{ display:flex; gap:.7rem; align-items:flex-start; margin-top:1.2rem; }
.consent input[type=checkbox]{ width:18px; height:18px; margin-top:.2rem; accent-color:var(--brand); flex:none; }
.consent label{ font-size:.92rem; color:var(--body); line-height:1.5; }
.consent .sub{ display:block; font-size:.82rem; color:var(--muted); margin-top:.15rem; }
.success{ text-align:center; padding:2rem 0; }
.success .check{ width:48px; height:48px; border-radius:999px; background:var(--brand-tint);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:1rem; }

/* legal documents (privacy, terms, DPA, sub-processors, cookies, EULA) */
.legal-head{ padding:2.5rem 0 1.5rem; border-bottom:1px solid var(--border); }
.legal-updated{ font-family:var(--mono); font-size:.85rem; color:var(--muted); margin-top:.6rem; }
.legal-notice{ background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:.9rem 1.1rem; margin-top:1.25rem; font-size:.88rem; color:var(--body); line-height:1.55; }
.legal-crosslinks{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:1.1rem; font-size:.88rem; }
.legal-crosslinks a{ color:var(--brand); font-weight:600; }
.legal-body{ max-width:72ch; padding:2.5rem 0 3.5rem; color:var(--body); line-height:1.7; }
.legal-body h2{ font-size:1.35rem; margin-top:2.2rem; margin-bottom:.7rem; letter-spacing:-0.01em; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{ font-size:1.05rem; margin-top:1.5rem; margin-bottom:.5rem; }
.legal-body p{ margin:0 0 .9rem; }
.legal-body ul, .legal-body ol{ margin:0 0 .9rem; padding-left:1.3rem; display:grid; gap:.4rem; }
.legal-body li{ line-height:1.6; }
.legal-body strong{ color:var(--ink); font-weight:600; }
.legal-body a{ color:var(--brand); font-weight:600; }
.legal-body table{ width:100%; border-collapse:collapse; margin:1rem 0 1.3rem; font-size:.9rem; }
.legal-body th{ text-align:left; font-weight:600; color:var(--ink); border-bottom:1px solid var(--border);
  padding:.5rem .7rem; }
.legal-body td{ border-bottom:1px solid var(--border); padding:.6rem .7rem; vertical-align:top; color:var(--body); }
.legal-body .allcaps{ font-size:.82rem; letter-spacing:.01em; color:var(--muted); background:var(--surface);
  border:1px solid var(--border); border-radius:10px; padding:.9rem 1.1rem; margin:0 0 .9rem; line-height:1.6; }
.legal-body .contact-block{ background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:1rem 1.2rem; margin-top:.5rem; font-size:.92rem; line-height:1.7; }
.legal-body .contact-block strong{ display:block; }

/* ---- product screenshots (real app captures in a browser frame) ---- */
.shot{ border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--card);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 28px 64px -28px rgba(0,0,0,.75); }
.shot .shot-bar{ display:flex; align-items:center; gap:.45rem; padding:.55rem .9rem;
  border-bottom:1px solid var(--border); background:var(--surface); }
.shot .shot-bar .dot{ width:10px; height:10px; border-radius:50%; background:var(--edge); }
.shot .shot-bar .crumb{ margin-left:.6rem; font-size:.74rem; color:var(--muted); }
.shot img{ display:block; width:100%; height:auto; cursor:zoom-in; }
/* hover affordance: magnify badge + slight dim, signalling click-to-enlarge */
.shot{ position:relative; }
.shot::after{ content:""; position:absolute; top:50%; left:50%; width:54px; height:54px; z-index:2;
  transform:translate(-50%,-50%) scale(.85); opacity:0; pointer-events:none; border-radius:999px;
  border:1px solid rgba(255,255,255,.2); background:rgba(10,14,23,.72) center/22px 22px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3Cline x1='10.5' y1='7.5' x2='10.5' y2='13.5'/%3E%3Cline x1='7.5' y1='10.5' x2='13.5' y2='10.5'/%3E%3C/svg%3E");
  transition:opacity .2s ease, transform .2s ease; }
.shot:hover::after{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* click-to-enlarge lightbox */
.lb-overlay{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; cursor:zoom-out;
  padding:clamp(16px,4vw,60px); background:rgba(6,9,16,.88); opacity:0; transition:opacity .3s ease; }
.lb-overlay.lb-active{ opacity:1; }
.lb-overlay .lb-img{ max-width:100%; max-height:100%; border-radius:12px; border:1px solid var(--border);
  box-shadow:0 40px 100px -24px rgba(0,0,0,.9); transform:scale(.96);
  transition:transform .3s cubic-bezier(.22,1,.36,1); }
.lb-overlay.lb-active .lb-img{ transform:scale(1); }
@media (prefers-reduced-motion: reduce){
  .lb-overlay, .lb-overlay .lb-img{ transition:none; } }
/* framed image that crops to a consistent aspect for pillars/tour */
.shot.crop img{ aspect-ratio:16/10; object-fit:cover; object-position:top left; }

/* hero screenshot lead — larger drop shadow, tuned for the fold */
.hero-shot{ margin-top:2.5rem; }

/* topology graph visual (designed, not a screenshot) — hero + topology pillar + tour */
.graphcard{ border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--card);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 30px 66px -30px rgba(0,0,0,.8); }
.graphcard .g-head{ display:flex; align-items:center; gap:.45rem; padding:.6rem .9rem;
  border-bottom:1px solid var(--border); background:var(--surface); }
.graphcard .g-head .dot{ width:10px; height:10px; border-radius:50%; background:var(--edge); }
.graphcard .g-head .crumb{ margin-left:.55rem; font-size:.74rem; color:var(--muted); }
.graphcard svg{ display:block; width:100%; height:auto;
  background:radial-gradient(58% 78% at 50% 2%, rgba(59,130,246,.09), transparent 68%), var(--panel); }
.graphcard .g-foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.65rem .9rem; border-top:1px solid var(--border); font-size:.78rem; color:var(--muted); flex-wrap:wrap; }
.graphcard .g-foot .rc{ display:inline-flex; align-items:center; gap:.4rem; color:var(--danger-ink);
  font-family:var(--mono); font-size:.72rem; }
.graphcard .g-foot .rc .rcd{ width:7px; height:7px; border-radius:50%; background:var(--red); }
.gnl{ font-family:var(--mono); font-size:10px; fill:var(--muted); }
.gnl.down{ fill:var(--danger-ink); }
@keyframes gpulse{ 0%{ r:12; opacity:.5 } 75%{ r:30; opacity:0 } 100%{ opacity:0 } }
@media (prefers-reduced-motion: no-preference){ .g-pulse{ animation:gpulse 2.4s ease-out infinite; } }

/* ---- stats band ---- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:14px; overflow:hidden; max-width:1000px; margin-inline:auto; }
@media(max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stats > div{ background:var(--card); padding:1.75rem 1.5rem; }
.stats .n{ font-family:var(--mono); font-size:clamp(1.9rem, 1.2rem + 2vw, 2.6rem); font-weight:500;
  color:var(--ink); letter-spacing:-0.02em; line-height:1; }
.stats .n span{ font-size:.55em; color:var(--brand); }
.stats .k{ margin-top:.55rem; font-size:.9rem; color:var(--muted); line-height:1.45; }

/* ---- named platform pillars ---- */
.pillar{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,4vw,4.5rem); align-items:center;
  padding:clamp(3rem,6vw,5rem) 0; max-width:1180px; margin-inline:auto; }
.pillar + .pillar{ border-top:1px solid var(--border); }
.pillar:nth-child(odd) .pillar-copy{ order:2; }
@media(max-width:900px){ .pillar{ grid-template-columns:1fr; gap:1.75rem; }
  .pillar .pillar-shot{ order:2; } .pillar:nth-child(odd) .pillar-copy{ order:1; } }
.pillar .eyebrow{ font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand); font-weight:600; margin-bottom:.6rem; display:flex; align-items:center; gap:.5rem; }
.pillar h3{ font-size:1.5rem; letter-spacing:-0.02em; }
.pillar .lede{ margin-top:.75rem; font-size:1.02rem; color:var(--body); max-width:52ch; }
.pillar ul{ list-style:none; padding:0; margin:1.25rem 0 0; display:grid; gap:.7rem; }
.pillar ul li{ display:grid; grid-template-columns:1.1rem 1fr; gap:.55rem; align-items:start;
  font-size:.95rem; color:var(--body); line-height:1.5; }
.pillar ul li svg{ margin-top:.25rem; }
.pillar .more{ display:inline-flex; align-items:center; gap:.35rem; margin-top:1.4rem;
  font-size:.92rem; font-weight:600; color:var(--brand); }
.pillar .more:hover{ color:var(--brand-strong); }
.pillar .more svg{ transition:transform .15s ease; }
.pillar .more:hover svg{ transform:translateX(3px); }

/* ---- use-case cards ---- */
.ucards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin:2.5rem auto 0; max-width:1180px; }
@media(max-width:720px){ .ucards{ grid-template-columns:1fr; } }
.ucard{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:1.6rem 1.6rem 1.5rem; transition:border-color .15s ease, box-shadow .15s ease; }
a.ucard:hover{ border-color:var(--brand-tint-border); box-shadow:0 1px 2px rgba(11,18,32,.04), 0 18px 34px -26px rgba(11,18,32,.22); }
.ucard .uc-ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:var(--brand-tint); border:1px solid var(--brand-tint-border); color:var(--brand); margin-bottom:1rem; }
.ucard h3{ font-size:1.15rem; letter-spacing:-0.01em; }
.ucard p{ margin-top:.5rem; font-size:.95rem; color:var(--muted); line-height:1.55; }
.ucard .uc-go{ margin-top:auto; padding-top:1rem; font-size:.88rem; font-weight:600; color:var(--brand);
  display:inline-flex; align-items:center; gap:.35rem; }
a.ucard:hover .uc-go svg{ transform:translateX(3px); }
.ucard .uc-go svg{ transition:transform .15s ease; }

/* ---- works with your stack ---- */
.stack-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.6rem; margin:2rem auto 0; max-width:1180px; }
.stack-grid .chip{ display:flex; align-items:center; gap:.55rem; padding:.7rem .9rem; background:var(--card);
  border:1px solid var(--border); border-radius:10px; font-size:.9rem; color:var(--ink); font-weight:500; }
.stack-grid .chip .tick{ width:6px; height:6px; border-radius:50%; background:var(--green); flex:none; }
.badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.5rem auto 0; max-width:1180px; }
.badges .badge{ font-family:var(--mono); font-size:.78rem; color:var(--body); background:var(--surface);
  border:1px solid var(--border); border-radius:999px; padding:.35rem .8rem; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }