/* ============================================================================
   VULNIX — Penetration Testing as a Service
   Marketing site design system. Dark canvas, single blue accent, Gilroy.
   Tokens mirror the live platform (vulnix-frontend/src/styles/tokens.scss),
   adapted for a dark canvas.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family:'Gilroy'; src:url('../fonts/Gilroy-Regular.woff2') format('woff2');   font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('../fonts/Gilroy-Medium.woff2') format('woff2');    font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('../fonts/Gilroy-SemiBold.woff2') format('woff2');  font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('../fonts/Gilroy-Bold.woff2') format('woff2');      font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('../fonts/Gilroy-ExtraBold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

/* ---------- Tokens ----------
   LIGHT is the default theme. DARK is opt-in via <html data-theme="dark">.

   Low-alpha tints ride --ink-rgb / --accent-rgb / --shell-rgb so they invert
   with the theme automatically. Text and border colours are set explicitly per
   theme instead: an alpha that reads well as light-on-dark turns muddy when
   flipped to dark-on-light.

   Light values come from the live platform (vulnix-frontend/src/styles/tokens.scss),
   so light mode is the brand-accurate theme — #0722C5 is fully legible as text here.
   -------------------------------------------------------------------------- */
:root{
  /* brand — identical in both themes */
  --blue:#0722C5;
  --blue-ink:#061B9E;
  --navy:#070C35;
  --off-white:#EDEFF4;
  --logo-fill:#070C21;   /* wordmark ink — flips with the theme */
  --chip-on-bg:#0722C5;

  /* ---------------- LIGHT (default) ---------------- */
  --canvas:#F7F8FA;
  --surface-1:#FFFFFF;
  --surface-2:#FFFFFF;
  --surface-3:#F2F6FA;

  --ink-rgb:20,21,25;
  --accent-rgb:7,34,197;
  --shell-rgb:255,255,255;

  --line:#E3E5EB;
  --line-soft:#EDEFF3;
  --line-lit:rgba(7,34,197,.30);

  --tx:#141519;
  --tx-2:#5F6472;   /* 5.56:1 on canvas — platform #6b6f80 darkened one step   */
  --tx-3:#6B6F80;   /* 4.69:1 — platform #9ca3af fails AA as body text on white */

  /* the true brand blue is readable as text on a light canvas */
  --blue-lit:#0722C5;
  --blue-glow:#0722C5;

  /* severity — platform hues, darkened where needed to pass as text on tints */
  --sev-critical:#8B0000;
  --sev-high:#D92D20;
  --sev-medium:#B26A00;
  --sev-low:#1B8A4E;
  --sev-info:#0722C5;

  /* surfaces & depth */
  --card-bg:#FFFFFF;
  --card-shadow:0 1px 3px rgba(20,21,25,.05), 0 10px 26px -18px rgba(20,21,25,.16);
  --card-shadow-hover:0 2px 6px rgba(20,21,25,.07), 0 22px 46px -22px rgba(20,21,25,.22);
  --ui-bg:#FFFFFF;
  --ui-bar-bg:#F7F8FA;
  --ui-shadow:0 2px 8px rgba(20,21,25,.06), 0 24px 54px -28px rgba(20,21,25,.22);
  --term-shadow:0 22px 60px -26px rgba(20,21,25,.45);
  --nav-bg:rgba(255,255,255,.88);
  --strip-bg:#FFFFFF;

  --cta-bg:linear-gradient(140deg,#E9EDFD 0%,#F4F6FD 55%,#FFFFFF 100%);
  --portal-bg:linear-gradient(150deg,#EEF1FE,#F9FAFD);
  --soft-panel-bg:linear-gradient(140deg,#EEF1FE,#F9FAFD);
  --tier-rec-bg:linear-gradient(165deg,#EEF1FE,#FFFFFF);

  /* ambience */
  --grain-opacity:0;
  --aur-1:radial-gradient(circle,rgba(7,34,197,.11),transparent 68%);
  --aur-2:radial-gradient(circle,rgba(7,34,197,.07),transparent 68%);
  --aur-3:radial-gradient(circle,rgba(7,34,197,.05),transparent 70%);

  /* headline / numeral gradient fills */
  --accent-a:#0722C5; --accent-b:#4560FF;
  --num-a:#141519;    --num-b:#0722C5;

  /* data-visualisation (SVG) */
  --viz-label:rgba(20,21,25,.55);
  --viz-label-strong:rgba(20,21,25,.80);
  --viz-line:rgba(7,34,197,.22);
  --viz-grid:rgba(20,21,25,.10);
  --viz-axis:rgba(20,21,25,.18);
  --viz-cont-a:#0722C5; --viz-cont-b:#4560FF;
  --viz-node-stroke:#FFFFFF;

  /* shape */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:18px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-24:96px;

  --maxw:1200px;
  --mono:'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease:cubic-bezier(.22,1,.36,1);

  /* terminal — pinned dark in BOTH themes (a light terminal reads as a bug) */
  --term-line:rgba(237,239,244,.10);
  --term-line-soft:rgba(237,239,244,.06);
  --term-tx:#EDEFF4;
  --term-tx-3:rgba(237,239,244,.42);
}

/* ---------------- DARK ---------------- */
:root[data-theme="dark"]{
  --canvas:#070C21;
  --surface-1:#0A1029;
  --surface-2:#0D1430;
  --surface-3:#111939;

  --ink-rgb:237,239,244;
  --accent-rgb:90,115,255;
  --shell-rgb:7,12,33;

  --line:rgba(237,239,244,.10);
  --line-soft:rgba(237,239,244,.06);
  --line-lit:rgba(90,115,255,.35);

  --tx:#EDEFF4;
  --tx-2:rgba(237,239,244,.66);
  --tx-3:rgba(237,239,244,.55);  /* .42 measured 3.69:1 — below AA */

  --blue-lit:#5A73FF;
  --blue-glow:#9FB2FF;
  --logo-fill:#EDEFF4;
  --chip-on-bg:rgba(7,34,197,.34);

  --sev-critical:#FF3355;
  --sev-high:#FF7847;
  --sev-medium:#F5A623;
  --sev-low:#2FD07A;
  --sev-info:#5A73FF;

  --card-bg:linear-gradient(165deg,#0D1430,#0A1029);
  --card-shadow:none;
  --card-shadow-hover:0 26px 56px -26px rgba(0,0,0,.85);
  --ui-bg:linear-gradient(168deg,#0C1330,#080E24);
  --ui-bar-bg:rgba(7,12,33,.72);
  --ui-shadow:0 32px 70px -30px rgba(0,0,0,.9);
  --term-shadow:0 44px 96px -36px rgba(0,0,0,.92);
  --nav-bg:rgba(7,12,33,.82);
  --strip-bg:rgba(10,16,41,.4);

  --cta-bg:linear-gradient(140deg,rgba(7,34,197,.32) 0%,rgba(7,12,53,.75) 55%,rgba(10,16,41,.9) 100%);
  --portal-bg:linear-gradient(150deg,rgba(7,34,197,.15),rgba(10,16,41,.6));
  --soft-panel-bg:linear-gradient(140deg,rgba(7,34,197,.16),rgba(10,16,41,.5));
  --tier-rec-bg:linear-gradient(165deg,rgba(7,34,197,.19),#0A1029);

  --grain-opacity:.35;
  --aur-1:radial-gradient(circle,rgba(7,34,197,.55),transparent 68%);
  --aur-2:radial-gradient(circle,rgba(90,115,255,.26),transparent 68%);
  --aur-3:radial-gradient(circle,rgba(7,12,53,.9),transparent 70%);

  --accent-a:#4560FF; --accent-b:#8EA3FF;
  --num-a:#FFFFFF;    --num-b:#8EA3FF;

  --viz-label:rgba(237,239,244,.52);
  --viz-label-strong:rgba(237,239,244,.82);
  --viz-line:rgba(90,115,255,.16);
  --viz-grid:rgba(237,239,244,.07);
  --viz-axis:rgba(237,239,244,.12);
  --viz-cont-a:#0722C5; --viz-cont-b:#8EA3FF;
  --viz-node-stroke:#070C21;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--tx);
  font-family:'Gilroy',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400; font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* ---------- Page ambience: grain + aurora ---------- */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.aurora{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.aurora i{
  position:absolute; display:block; border-radius:50%; filter:blur(120px); opacity:.5;
  animation:drift 26s var(--ease) infinite alternate;
}
.aurora i:nth-child(1){width:760px;height:760px;top:-280px;left:-180px;background:var(--aur-1)}
.aurora i:nth-child(2){width:620px;height:620px;top:34%;right:-260px;background:var(--aur-2);animation-delay:-9s}
.aurora i:nth-child(3){width:700px;height:700px;bottom:-320px;left:28%;background:var(--aur-3);animation-delay:-16s}
@keyframes drift{to{transform:translate3d(60px,-50px,0) scale(1.14)}}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; position:relative; z-index:1}
section{position:relative; z-index:1}
.sec{padding:var(--sp-24) 0}
.sec-tight{padding:var(--sp-16) 0}
@media(max-width:720px){ .sec{padding:64px 0} .wrap{padding-inline:16px} }

.rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* ---------- Type ---------- */
h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.025em; line-height:1.08}
h1{font-size:clamp(2.6rem,6.4vw,4.55rem)}
h2{font-size:clamp(2rem,4.1vw,3.05rem); line-height:1.12}
h3{font-size:1.16rem; font-weight:700; letter-spacing:-.01em; line-height:1.3}
p{margin:0}
.lede{font-size:clamp(1.02rem,1.55vw,1.2rem); color:var(--tx-2); line-height:1.66; max-width:62ch}
.muted{color:var(--tx-2)} .dim{color:var(--tx-3)}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:20px;
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-glow);
}
.eyebrow::before{content:''; width:22px; height:1px; background:linear-gradient(90deg,var(--blue-lit),transparent)}

.accent{
  background:linear-gradient(100deg,var(--accent-a) 0%,var(--accent-b) 52%,var(--accent-a) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sheen 9s linear infinite;
}
@keyframes sheen{to{background-position:220% 0}}

.sec-head{max-width:66ch; margin-bottom:var(--sp-16)}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head.center .eyebrow::before{display:none}
.sec-head p{margin-top:20px}
@media(max-width:720px){ .sec-head{margin-bottom:var(--sp-10)} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border:1px solid transparent; border-radius:2px;
  font-family:inherit; font-size:14.5px; font-weight:700; letter-spacing:.005em;
  cursor:pointer; white-space:nowrap; position:relative; overflow:hidden;
  transition:transform .18s var(--ease), box-shadow .3s var(--ease), background .2s, border-color .2s;
}
.btn-primary{
  background:linear-gradient(120deg,var(--blue) 0%,#2A45E8 55%,var(--blue) 100%);
  background-size:200% 100%; color:#fff;
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35), 0 10px 34px -12px rgba(7,34,197,.95);
}
.btn-primary:hover{background-position:100% 0; transform:translateY(-2px); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.6), 0 18px 42px -12px rgba(7,34,197,1)}
.btn-ghost{background:rgba(var(--ink-rgb),.03); border-color:var(--line); color:var(--tx)}
.btn-ghost:hover{border-color:var(--line-lit); background:rgba(var(--accent-rgb),.09); transform:translateY(-2px)}
.btn-sm{padding:10px 18px; font-size:13.5px}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:72px;
  display:flex; align-items:center;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.stuck{background:var(--nav-bg); backdrop-filter:blur(18px) saturate(160%); border-bottom-color:var(--line)}
.nav .wrap{display:flex; align-items:center; gap:var(--sp-8)}
.brand{display:flex; align-items:center; flex-shrink:0}
.brand svg{width:132px; height:auto; fill:var(--logo-fill); transition:fill .25s ease}
.nav-links{display:flex; align-items:center; gap:30px; margin-left:auto; font-size:14.5px; font-weight:500}
.nav-links a{color:var(--tx-2); position:relative; padding:4px 0; transition:color .2s}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--blue-lit); transform:scaleX(0); transform-origin:right;
  transition:transform .32s var(--ease);
}
.nav-links a:hover{color:var(--tx)}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:left}
.nav-cta{display:flex; align-items:center; gap:14px; margin-left:var(--sp-8)}
.nav-cta .signin{font-size:14.5px; font-weight:500; color:var(--tx-2); transition:color .2s}
.nav-cta .signin:hover{color:var(--tx)}
.burger{display:none; margin-left:auto; width:42px; height:42px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer}
.burger span{display:block; width:17px; height:1.5px; background:var(--tx); position:relative}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:17px; height:1.5px; background:var(--tx); transition:transform .28s var(--ease)}
.burger span::before{top:-5.5px} .burger span::after{top:5.5px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{transform:translateY(5.5px) rotate(45deg)}
.nav.open .burger span::after{transform:translateY(-5.5px) rotate(-45deg)}
@media(max-width:940px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  .nav.open{background:var(--nav-bg); backdrop-filter:blur(18px); border-bottom-color:var(--line)}
  .nav.open .nav-links{
    display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    position:absolute; top:72px; left:0; right:0; padding:18px 16px 26px;
    background:var(--nav-bg); backdrop-filter:blur(18px); border-bottom:1px solid var(--line); margin:0;
  }
  .nav.open .nav-links a{padding:13px 0; width:100%; font-size:17px; color:var(--tx)}
  .nav.open .nav-cta{display:flex; position:absolute; top:calc(72px + 290px); left:16px; right:16px; margin:0; flex-direction:column; align-items:stretch}
  .nav.open .nav-cta .btn{width:100%}
  .nav.open .nav-cta .signin{padding:10px 0; text-align:center}
}

/* ---------- Hero ---------- */
.hero{padding:170px 0 92px; position:relative; overflow:hidden}
.hero-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(var(--accent-rgb),.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),.075) 1px, transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(ellipse 85% 62% at 50% 34%, #000 12%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 85% 62% at 50% 34%, #000 12%, transparent 72%);
}
.hero-inner{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-16); align-items:center}
@media(max-width:1060px){ .hero{padding:132px 0 68px} .hero-inner{grid-template-columns:1fr; gap:52px} }

.pill{
  display:inline-flex; align-items:center; gap:9px; padding:6px 15px 6px 9px;
  border:1px solid var(--line); border-radius:100px; background:rgba(var(--ink-rgb),.03);
  font-size:12.5px; font-weight:600; color:var(--tx-2); margin-bottom:28px;
}
.pill b{color:var(--tx); font-weight:700}
.pill .dot{width:6px; height:6px; border-radius:50%; background:var(--sev-low); box-shadow:0 0 0 3px rgba(47,208,122,.18); animation:blip 2.4s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}

.hero h1{margin-bottom:26px}
.hero .lede{margin-bottom:38px; max-width:54ch}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero-note{
  margin-top:38px; padding-top:26px; border-top:1px solid var(--line-soft);
  font-size:14.5px; color:var(--tx-2); max-width:52ch; line-height:1.62;
}
.hero-note b{color:var(--tx); font-weight:600}

/* ---------- Terminal (stays dark in BOTH themes) ---------- */
.term{
  background:linear-gradient(170deg,#0B1230 0%,#070C21 100%);
  border:1px solid var(--term-line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--term-shadow), 0 0 0 1px rgba(90,115,255,.09), inset 0 1px 0 rgba(237,239,244,.05);
  position:relative;
}
.term::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(90,115,255,.07),transparent 42%);
}
.term-bar{
  display:flex; align-items:center; gap:9px; padding:12px 16px;
  background:rgba(7,12,33,.7); border-bottom:1px solid var(--term-line-soft);
}
.term-bar .tl{display:flex; gap:6.5px}
.term-bar .tl i{width:10px; height:10px; border-radius:50%; background:rgba(237,239,244,.16)}
.term-bar .tl i:first-child{background:rgba(255,51,85,.6)}
.term-bar .tl i:nth-child(2){background:rgba(245,166,35,.6)}
.term-bar .tl i:last-child{background:rgba(47,208,122,.6)}
.term-bar .ttl{font-family:var(--mono); font-size:11.5px; color:var(--term-tx-3); margin-left:6px; letter-spacing:.02em}
.term-body{
  padding:20px 20px 24px; font-family:var(--mono); font-size:12.6px; line-height:1.92;
  min-height:432px; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--term-tx);
}
@media(max-width:1060px){ .term-body{min-height:400px} }
@media(max-width:480px){ .term-body{font-size:11px; padding:16px 14px 20px; min-height:392px} }
.term-body .pr{color:#9FB2FF}
.term-body .cmd{color:var(--term-tx); font-weight:500}
.term-body .ok{color:#2FD07A}
.term-body .arrow{color:var(--term-tx-3)}
.term-body .k{color:var(--term-tx-3); letter-spacing:.04em}
.term-body .v{color:var(--term-tx)}
.term-body .crit{color:#FF3355; font-weight:500}
.term-body .high{color:#FF7847; font-weight:500}
.term-body .warn{color:#F5A623}
.term-body .bar-f{color:#5A73FF}
.term-body .bar-e{color:rgba(237,239,244,.14)}
.term-body .hr{color:var(--term-line)}
.caret{display:inline-block; width:7.5px; height:14px; background:#5A73FF; vertical-align:-2px; animation:cb 1s steps(2) infinite}
@keyframes cb{0%,50%{opacity:1}51%,100%{opacity:0}}

/* ---------- Stat strip ---------- */
.strip{border-block:1px solid var(--line-soft); background:var(--strip-bg)}
.strip-grid{display:grid; grid-template-columns:repeat(4,1fr)}
.strip-grid > div{padding:34px 26px; border-left:1px solid var(--line-soft)}
.strip-grid > div:first-child{border-left:0; padding-left:0}
.strip .n{font-size:2.25rem; font-weight:800; letter-spacing:-.03em; line-height:1;
  background:linear-gradient(140deg,var(--num-a),var(--num-b)); -webkit-background-clip:text; background-clip:text; color:transparent}
.strip .l{margin-top:10px; font-size:13.5px; color:var(--tx-2); line-height:1.45}
@media(max-width:860px){
  .strip-grid{grid-template-columns:repeat(2,1fr)}
  .strip-grid > div{padding:26px 18px; border-top:1px solid var(--line-soft)}
  .strip-grid > div:nth-child(odd){border-left:0; padding-left:0}
  .strip-grid > div:nth-child(-n+2){border-top:0}
  .strip .n{font-size:1.85rem}
}

/* ---------- Cards ---------- */
.card{
  position:relative; background:var(--card-bg);
  border:1px solid var(--line); border-radius:var(--r-xl); padding:30px; box-shadow:var(--card-shadow);
  transition:transform .4s var(--ease), border-color .35s, box-shadow .4s var(--ease);
  overflow:hidden;
}
.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%), rgba(var(--accent-rgb),.13), transparent 62%);
  transition:opacity .4s;
}
.card:hover{transform:translateY(-4px); border-color:var(--line-lit); box-shadow:var(--card-shadow-hover)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:10px}
.card .hook{color:var(--blue-glow); font-size:14px; font-weight:600; margin-bottom:16px}
.card p{color:var(--tx-2); font-size:14.8px; line-height:1.62}

.tag{
  display:inline-block; padding:4.5px 11px; border-radius:100px; margin-bottom:18px;
  background:rgba(var(--accent-rgb),.11); border:1px solid rgba(var(--accent-rgb),.26); color:var(--blue-glow);
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}
.tag-soon{background:rgba(245,166,35,.1); border-color:rgba(245,166,35,.3); color:var(--sev-medium);
  letter-spacing:.09em; padding:2px 8px; font-size:9.5px; margin:0 0 0 7px; vertical-align:1.5px}

.flist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.flist li{position:relative; padding-left:24px; color:var(--tx-2); font-size:14.4px; line-height:1.55}
.flist li::before{
  content:''; position:absolute; left:2px; top:8.5px; width:7px; height:7px; border-radius:1.5px;
  background:linear-gradient(135deg,var(--blue-lit),var(--blue)); transform:rotate(45deg);
}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
@media(max-width:980px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:660px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

/* problem cards */
.pcard{padding:26px}
.pcard .ix{
  width:42px; height:42px; border-radius:var(--r-md); margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--accent-rgb),.09); border:1px solid rgba(var(--accent-rgb),.2);
}
.pcard .ix svg{width:21px; height:21px; stroke:var(--blue-glow); fill:none; stroke-width:1.6}

/* ---------- Product UI recreations ---------- */
.ui{
  background:var(--ui-bg); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--ui-shadow);
  transition:transform .45s var(--ease), border-color .35s, box-shadow .45s;
}
.ui:hover{transform:translateY(-5px); border-color:var(--line-lit); box-shadow:var(--card-shadow-hover)}
.ui-bar{display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--ui-bar-bg); border-bottom:1px solid var(--line-soft)}
.ui-bar .tl{display:flex; gap:5px}
.ui-bar .tl i{width:7.5px;height:7.5px;border-radius:50%;background:rgba(var(--ink-rgb),.15)}
.ui-bar .u{font-family:var(--mono); font-size:10px; color:var(--tx-3); margin-left:4px}
.ui-body{padding:16px}
.ui-h{font-size:12.5px; font-weight:700; margin-bottom:3px}
.ui-sub{font-size:10.5px; color:var(--tx-3); margin-bottom:14px}

.ui-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px}
.ui-stat{background:rgba(var(--ink-rgb),.026); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:10px 11px}
.ui-stat .l{font-size:8.6px; letter-spacing:.075em; text-transform:uppercase; color:var(--tx-3); margin-bottom:5px; line-height:1.3}
.ui-stat .v{font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1}
.ui-stat .v.crit{color:var(--sev-critical)}

.ui-panel{background:rgba(var(--ink-rgb),.022); border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden}
.ui-panel .ph{display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border-bottom:1px solid var(--line-soft); font-size:10.5px; font-weight:700}
.ui-panel .ph a{font-size:9.5px; color:var(--blue-glow); font-weight:600}
.ui-row{display:flex; align-items:center; gap:9px; padding:9px 12px; border-bottom:1px solid var(--line-soft); font-size:10px}
.ui-row:last-child{border-bottom:0}
.ui-row .nm{flex:1; min-width:0}
.ui-row .nm b{display:block; font-size:10.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ui-row .nm span{color:var(--tx-3); font-size:9px}
.ui-bar-track{width:46px; height:3.5px; border-radius:2px; background:rgba(var(--ink-rgb),.1); overflow:hidden; flex-shrink:0}
.ui-bar-track i{display:block; height:100%; border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--blue-lit))}

.badge{display:inline-block; padding:2.5px 8px; border-radius:100px; font-size:8.6px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap}
.b-prog{background:rgba(245,166,35,.13); color:var(--sev-medium); border:1px solid rgba(245,166,35,.3)}
.b-crit{background:rgba(255,51,85,.13); color:var(--sev-critical); border:1px solid rgba(255,51,85,.32)}
.b-high{background:rgba(255,120,71,.13); color:var(--sev-high); border:1px solid rgba(255,120,71,.32)}
.b-med{background:rgba(245,166,35,.13); color:var(--sev-medium); border:1px solid rgba(245,166,35,.3)}
.b-low{background:rgba(47,208,122,.13); color:var(--sev-low); border:1px solid rgba(47,208,122,.3)}
.b-ok{background:rgba(47,208,122,.13); color:var(--sev-low); border:1px solid rgba(47,208,122,.3)}
.b-info{background:rgba(var(--accent-rgb),.13); color:var(--blue-glow); border:1px solid rgba(var(--accent-rgb),.3)}

.sev-row{display:flex; align-items:center; gap:9px; padding:7px 0}
.sev-row .lb{width:52px; font-size:9.4px; font-weight:600; color:var(--tx-2); flex-shrink:0}
.sev-row .tk{flex:1; height:5px; border-radius:3px; background:rgba(var(--ink-rgb),.07); overflow:hidden}
.sev-row .tk i{display:block; height:100%; border-radius:3px}
.sev-row .ct{width:16px; text-align:right; font-size:10px; font-weight:700; flex-shrink:0}

/* wizard */
.wz-steps{display:flex; align-items:center; gap:0; margin-bottom:16px}
.wz-steps .st{display:flex; align-items:center; gap:5px; flex-shrink:0}
.wz-steps .st i{
  width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:8.5px; font-weight:700; font-style:normal;
  background:rgba(var(--ink-rgb),.06); color:var(--tx-3); border:1px solid var(--line);
}
.wz-steps .st.done i{background:var(--blue); color:#fff; border-color:var(--blue)}
.wz-steps .st.now i{background:rgba(var(--accent-rgb),.16); color:var(--blue-glow); border-color:var(--blue-lit); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12)}
.wz-steps .st span{font-size:8.8px; color:var(--tx-3); font-weight:600}
.wz-steps .st.now span{color:var(--tx)}
.wz-steps .cn{flex:1; height:1px; background:var(--line); margin:0 6px; min-width:6px}
.wz-steps .cn.done{background:var(--blue)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{padding:5px 10px; border-radius:100px; border:1px solid var(--line); background:rgba(var(--ink-rgb),.03); font-size:9.4px; font-weight:600; color:var(--tx-2)}
.chip.on{background:var(--chip-on-bg); border-color:var(--blue-lit); color:#fff}
.chip.on::before{content:'✓ '; color:rgba(255,255,255,.78)}
.fld{margin-top:11px}
.fld .fl{font-size:8.6px; letter-spacing:.075em; text-transform:uppercase; color:var(--tx-3); margin-bottom:5px}
.fld .fi{background:rgba(var(--ink-rgb),.035); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; font-family:var(--mono); font-size:9.6px; color:var(--tx-2)}
.fld .fi.act{border-color:var(--blue-lit); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1); color:var(--tx)}

/* findings */
.fr{padding:10px 12px; border-bottom:1px solid var(--line-soft)}
.fr:last-child{border-bottom:0}
.fr .t{display:flex; align-items:center; gap:7px; margin-bottom:4px}
.fr .t b{font-size:10.4px; font-weight:600; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fr .m{display:flex; gap:10px; font-size:8.8px; color:var(--tx-3); font-family:var(--mono)}
.fr.closed b{color:var(--tx-3); text-decoration:line-through}

/* ---------- Coverage gap chart ---------- */
.gap{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-16); align-items:center;
  background:var(--card-bg); box-shadow:var(--card-shadow);
  border:1px solid var(--line); border-radius:var(--r-xl); padding:44px;
}
@media(max-width:980px){ .gap{grid-template-columns:1fr; gap:36px; padding:28px} }
.legend{display:flex; flex-direction:column; gap:14px; margin-top:26px}
.legend .li{display:flex; align-items:flex-start; gap:11px; font-size:14px; color:var(--tx-2); line-height:1.5}
.legend .sw{width:22px; height:3px; border-radius:2px; margin-top:8px; flex-shrink:0}

/* ---------- Test matrix ---------- */
.mat{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
@media(max-width:1060px){ .mat{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .mat{grid-template-columns:1fr} }
.mcol{background:var(--card-bg); box-shadow:var(--card-shadow); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px 20px; transition:border-color .3s, transform .35s var(--ease), box-shadow .35s}
.mcol:hover{border-color:var(--line-lit); transform:translateY(-3px); box-shadow:var(--card-shadow-hover)}
.mcol .mh{display:flex; align-items:center; gap:10px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line-soft)}
.mcol .mh svg{width:19px; height:19px; stroke:var(--blue-glow); fill:none; stroke-width:1.6; flex-shrink:0}
.mcol .mh h4{font-size:12.5px; font-weight:700; letter-spacing:.055em; text-transform:uppercase; color:var(--tx); line-height:1.3}
.mcol ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.mcol li{font-size:13.6px; color:var(--tx-2); line-height:1.4; padding-left:15px; position:relative}
.mcol li::before{content:''; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--blue-lit); opacity:.75}
.mcol li span{display:block; font-size:11.4px; color:var(--tx-3); margin-top:2px}

/* ---------- Workflow ---------- */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative}
@media(max-width:900px){ .flow{grid-template-columns:1fr; gap:0} }
.fstep{position:relative; padding:0 26px}
.fstep:first-child{padding-left:0} .fstep:last-child{padding-right:0}
@media(max-width:900px){ .fstep{padding:0 0 0 46px; margin-bottom:34px} .fstep:last-child{margin-bottom:0} }
.fstep .num{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; margin-bottom:22px; position:relative; z-index:2;
  background:linear-gradient(140deg,var(--blue),var(--navy)); color:#fff;
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.4), 0 0 32px -6px rgba(7,34,197,.85);
}
@media(max-width:900px){ .fstep .num{position:absolute; left:0; top:0; width:34px; height:34px; font-size:13px; margin:0} }
.fstep h3{margin-bottom:10px}
.fstep p{color:var(--tx-2); font-size:14.4px; line-height:1.6}
.flow-line{position:absolute; top:23px; left:0; right:0; height:1px; z-index:1}
@media(max-width:900px){ .flow-line{display:none} }

/* ---------- Audience ---------- */
.aud{padding:30px}
.aud .ah{display:flex; align-items:center; gap:13px; margin-bottom:16px}
.aud .ah .ic{width:38px;height:38px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  background:rgba(var(--accent-rgb),.1); border:1px solid rgba(var(--accent-rgb),.22); flex-shrink:0}
.aud .ah .ic svg{width:19px;height:19px;stroke:var(--blue-glow);fill:none;stroke-width:1.6}

.portals{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px}
@media(max-width:660px){ .portals{grid-template-columns:1fr} }
.portal{padding:28px; background:var(--portal-bg);
  border:1px solid rgba(var(--accent-rgb),.2); border-radius:var(--r-xl)}
.portal .pt{font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-glow); margin-bottom:12px}
.portal h3{margin-bottom:12px}

/* ---------- Standards ---------- */
.std{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-16); align-items:center}
@media(max-width:980px){ .std{grid-template-columns:1fr; gap:40px} }
.stdlist{display:flex; flex-direction:column; gap:2px}
.stdrow{display:flex; align-items:flex-start; gap:16px; padding:18px 0; border-bottom:1px solid var(--line-soft)}
.stdrow:last-child{border-bottom:0}
.stdrow .sk{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.06em; color:var(--blue-glow);
  padding:4px 10px; border-radius:var(--r-sm); background:rgba(var(--accent-rgb),.09);
  border:1px solid rgba(var(--accent-rgb),.2); flex-shrink:0; min-width:84px; text-align:center; margin-top:1px;
}
.stdrow .sv{font-size:14.6px; color:var(--tx-2); line-height:1.55}
.stdrow .sv b{color:var(--tx); font-weight:600; display:block; margin-bottom:2px; font-size:15px}

/* ---------- Pricing ---------- */
.price{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:940px; margin-inline:auto}
@media(max-width:760px){ .price{grid-template-columns:1fr} }
.tier{padding:36px; position:relative}
.tier.rec{border-color:var(--line-lit); background:var(--tier-rec-bg)}
.tier .rl{position:absolute; top:22px; right:22px; padding:4px 11px; border-radius:100px;
  background:var(--blue); color:#fff; font-size:9.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase}
.tier .tn{font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--blue-glow); margin-bottom:12px}
.tier .td{color:var(--tx-2); font-size:14.8px; margin-bottom:26px; line-height:1.55; min-height:46px}
.tier .btn{width:100%; margin-top:28px}

/* ---------- CTA band ---------- */
.cta{
  position:relative; overflow:hidden; text-align:center; padding:84px 44px;
  border-radius:var(--r-xl); border:1px solid var(--line-lit);
  background:var(--cta-bg);
}
@media(max-width:660px){ .cta{padding:52px 22px} }
.cta::before{
  content:''; position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(rgba(var(--accent-rgb),.11) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent-rgb),.11) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 70% 100% at 50% 50%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 100% at 50% 50%,#000,transparent 72%);
}
.cta > *{position:relative; z-index:1}
.cta h2{margin-bottom:20px}
.cta .lede{margin:0 auto 34px; max-width:52ch}
.cta-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ---------- Footer ---------- */
.ft{border-top:1px solid var(--line); padding:var(--sp-16) 0 var(--sp-8); margin-top:var(--sp-24)}
.ft-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px; padding-bottom:var(--sp-12)}
@media(max-width:900px){ .ft-top{grid-template-columns:1fr 1fr; gap:34px} }
@media(max-width:520px){ .ft-top{grid-template-columns:1fr} }
.ft-brand svg{width:138px; fill:var(--logo-fill); margin-bottom:20px; transition:fill .25s ease}
.ft-brand p{font-size:14px; color:var(--tx-2); max-width:34ch; line-height:1.6; margin-bottom:26px}
.ft-by{font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--tx-3); margin-bottom:9px}
.ft-by-link{display:inline-flex; align-items:center; gap:7px; font-size:15px; font-weight:700; color:var(--tx); transition:color .2s}
.ft-by-link:hover{color:var(--blue-glow)}
.ft-col h4{font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3); margin-bottom:18px}
.ft-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.ft-col a{font-size:14.2px; color:var(--tx-2); transition:color .2s}
.ft-col a:hover{color:var(--tx)}
.ft-bot{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding-top:var(--sp-6); border-top:1px solid var(--line-soft); font-size:13px; color:var(--tx-3)}
.ft-legal{display:flex; gap:22px; flex-wrap:wrap}
.ft-legal a{transition:color .2s} .ft-legal a:hover{color:var(--tx-2)}

/* ---------- Scroll reveal ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease), transform .75s var(--ease)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none}
}
:focus-visible{outline:2px solid var(--blue-lit); outline-offset:3px; border-radius:2px}
::selection{background:rgba(7,34,197,.55); color:#fff}

/* ---------- Themeable data visualisation (SVG) ----------
   CSS wins over SVG presentation attributes, so these flip the charts
   without touching the generated geometry. */
.viz .vl{fill:var(--viz-label)}
.viz .vl-strong{fill:var(--viz-label-strong)}
.viz .vl-cont{fill:var(--blue-lit)}
.viz .vg{stroke:var(--viz-line)}
.viz .vgrid line{stroke:var(--viz-grid)}
.viz .vaxis line{stroke:var(--viz-axis)}
.viz .vn{fill:var(--blue-lit)}
.viz .vnc{fill:var(--blue); stroke:var(--blue-glow)}
.viz .vn-s circle{fill:var(--blue-lit); stroke:var(--viz-node-stroke)}
.viz .vn-crit{stroke:var(--viz-node-stroke)}
.viz .cs-a{stop-color:var(--viz-cont-a)}
.viz .cs-b{stop-color:var(--viz-cont-b)}

/* ---------- Theme toggle ---------- */
.theme-toggle{
  width:38px; height:38px; flex-shrink:0; margin-left:22px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--ink-rgb),.04); border:1px solid var(--line);
  border-radius:var(--r-sm); cursor:pointer; color:var(--tx-2);
  transition:color .2s, border-color .2s, background .2s;
}
.theme-toggle:hover{color:var(--tx); border-color:var(--line-lit); background:rgba(var(--accent-rgb),.08)}
.theme-toggle svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round}
.ico-sun{display:none}
.ico-moon{display:block}
:root[data-theme="dark"] .ico-sun{display:block}
:root[data-theme="dark"] .ico-moon{display:none}
@media(max-width:940px){ .theme-toggle{margin-left:auto; margin-right:10px} }

/* soften the swap between themes */
body{transition:background-color .25s ease, color .25s ease}