/*
 * Free WordPress Malware Scanner — landing page.
 * Built from landing-page/design/Landing Page v2.dc.html (Claude Design
 * handoff). Dark-only by client decision. Tokens mirror the handoff README.
 */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Noto Sans Tamil'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/noto-sans-tamil-tamil-600-normal.woff2) format('woff2'); unicode-range: U+0B80-0BFF; }

:root {
  --bg: #061316;
  --bg2: #091A1E;
  --card: #0C2024;
  --solid: #0E252A;
  --hero: #030D0F;
  --band: #0F3339;
  --ink: #E8EEEC;
  --muted: #A6BBB8;
  --bandink: #CFE0DC;
  --line: #17323A;
  --line2: #1F3E45;
  --bar: #1B3A41;
  --brand: #9ED9C6;
  --brand-hover: #B8E5D6;
  --on-brand: #0A3238;
  --teal: #0F4A52;
  --paper: #F5F2EC;
  --glass: rgba(6, 19, 22, 0.84);
  --shadow: rgba(0, 0, 0, 0.7);
  --clean: #2E7A57;
  --okbg: rgba(46, 122, 87, 0.22);
  --okink: #8FD3AE;
  --high: #B25E14;
  --hibg: rgba(178, 94, 20, 0.2);
  --hiink: #F0B47A;
  --critical: #A63A2B;
  --critical-bg: #F6E3E0;
  --sans: 'IBM Plex Sans', 'Noto Sans Tamil', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --gutter: clamp(20px, 4vw, 64px);
  --h2: clamp(30px, 3.8vw, 46px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, figure, ul, ol { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
code, pre, .mono { font-family: var(--mono); }
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(158, 217, 198, 0.35);
  border-radius: 6px;
}
.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: -60px; z-index: 50;
  background: var(--brand); color: var(--on-brand); padding: 10px 16px;
  border-radius: 8px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 28px; padding-block: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 40px; height: 40px; flex: none; }
.brand__name { display: flex; flex-direction: column; line-height: 1.15; font-size: 15px; }
.brand__name strong { font-weight: 600; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-size: 15px; }
.nav__link { color: var(--ink); text-decoration: none; }
.nav__link:hover { color: var(--brand); }

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-weight: 600; text-decoration: none; white-space: nowrap;
  border-radius: 12px; cursor: pointer;
  transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
}
.btn--mint {
  background: var(--brand); color: var(--on-brand);
  padding: 15px 26px; min-height: 52px; font-size: 17px;
  box-shadow: 0 10px 30px -10px rgba(158, 217, 198, 0.6);
}
.btn--mint:hover {
  background: var(--brand-hover); color: var(--on-brand);
  transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(158, 217, 198, 0.75);
}
.btn--outline {
  background: transparent; color: var(--paper);
  padding: 15px 24px; min-height: 52px; font-size: 17px;
  border: 1.5px solid rgba(158, 217, 198, 0.55);
}
.btn--outline:hover {
  background: rgba(158, 217, 198, 0.1); border-color: var(--brand);
  color: var(--paper); transform: translateY(-2px);
}
.btn--sm { padding: 10px 18px; min-height: 44px; font-size: 15px; font-weight: 500; border-radius: 10px; box-shadow: none; }
.btn--sm.btn--outline { border-width: 1px; border-color: var(--line2); color: var(--ink); padding-inline: 16px; }
.btn--sm.btn--outline:hover { border-color: var(--brand); background: transparent; transform: none; }
.btn--sm.btn--mint:hover { transform: translateY(-1px); box-shadow: none; }
/* Pre-launch: a button that names the store but goes nowhere yet. */
.btn[aria-disabled="true"] { cursor: default; opacity: 0.88; }
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

/* --------------------------------------------------------------- hero */

.hero { position: relative; background: var(--hero); color: var(--paper); overflow: hidden; }
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(158, 217, 198, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(158, 217, 198, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 72% 45%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 70% at 72% 45%, #000 25%, transparent 78%);
}
.glow { position: absolute; border-radius: 50%; pointer-events: none; }
.glow--a {
  width: 620px; height: 620px; right: -8%; top: -20%;
  background: radial-gradient(circle, rgba(158, 217, 198, 0.18), transparent 65%);
  animation: hcGlow 14s ease-in-out infinite;
}
.glow--b {
  width: 480px; height: 480px; left: -10%; bottom: -30%;
  background: radial-gradient(circle, rgba(15, 74, 82, 0.6), transparent 65%);
  animation: hcGlow 18s ease-in-out infinite reverse;
}
.hero__inner {
  position: relative;
  padding-block: 96px 112px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 72px; align-items: center;
}
.hero__copy { display: flex; flex-direction: column; gap: 26px; }
.pill {
  align-self: flex-start; max-width: 100%;
  font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--brand);
  border: 1px solid rgba(158, 217, 198, 0.35); border-radius: 999px;
  padding: 7px 13px; display: flex; align-items: center; gap: 10px;
}
.pill__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none;
  animation: hcPulse 2.4s ease-in-out infinite;
}
.hero h1 { font-size: clamp(38px, 5.6vw, 66px); line-height: 1.03; font-weight: 600; letter-spacing: -0.025em; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__lede { font-size: 19px; line-height: 1.55; color: #C9DAD7; max-width: 540px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 6px; }
.cta-row__link { color: var(--paper); font-size: 16px; font-weight: 500; }
.cta-row__link:hover { color: var(--brand); }

/* Side-panel scan mock. The HTML ships in its finished, clean state so the
   page reads correctly with no JavaScript; site.js animates it. */
.mock { position: relative; max-width: 500px; width: 100%; justify-self: center; }
.panel {
  position: relative; background: var(--solid); color: var(--ink);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(158, 217, 198, 0.15);
}
.panel__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.panel__title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.panel__title img { width: 22px; height: 22px; }
.panel__host { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.chips { padding: 16px 18px 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--mono); font-size: 12px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--bg); color: var(--muted);
  transition: all .25s;
}
.chip.is-active { border-color: var(--teal); background: var(--teal); color: var(--paper); }
.progress { padding: 6px 18px 0; }
.progress__track { height: 4px; border-radius: 2px; background: var(--bar); overflow: hidden; }
.progress__fill { height: 100%; width: 100%; background: var(--clean); border-radius: 2px; transition: width .15s linear; }
.progress__text { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 8px; }
.rows { list-style: none; padding: 8px 18px; display: flex; flex-direction: column; font-size: 14px; }
.rows li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.rows__path { font-family: var(--mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.status {
  font-family: var(--mono); font-size: 12px; padding: 3px 8px; border-radius: 5px; flex: none;
  border: 1px solid transparent; transition: all .3s;
}
.status--clean { background: var(--okbg); color: var(--okink); }
.status--reading { background: var(--bg); color: var(--muted); }
.status--queued { background: transparent; color: var(--muted); border: 1px dashed var(--line2); }
.verdict-wrap { padding: 14px 18px 18px; }
.verdict {
  background: var(--okbg); border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 6px; transition: background-color .4s;
}
.verdict__badge {
  align-self: flex-start; background: var(--clean); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; padding: 4px 9px; border-radius: 5px;
  transition: background-color .4s;
}
.verdict__text { font-size: 17px; font-weight: 600; color: var(--ink); }
.verdict.is-scanning { background: var(--bar); }
.verdict.is-scanning .verdict__badge { background: #4A5759; }

/* The scan beam: falls, locks on a line, holds, fades. */
.beam-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.beam {
  position: absolute; left: 0; right: 0; height: 2px; top: 0;
  background: var(--brand); box-shadow: 0 0 24px 5px rgba(158, 217, 198, 0.55);
  opacity: 0;
  animation: hcLock var(--dur, 8s) cubic-bezier(.45, 0, .25, 1) infinite;
}

/* -------------------------------------------------------------- trust */

.trust { border-bottom: 1px solid var(--line); }
.trust ul {
  list-style: none; padding-block: 20px; padding-inline: var(--gutter);
  max-width: 1440px; margin: 0 auto;
  font-family: var(--mono); font-size: 14px; color: var(--muted);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px;
}
.trust li + li::before { content: '·'; color: var(--brand); margin-right: 22px; }

/* ----------------------------------------------------------- sections */

.section { padding-block: 104px; }
.section--band { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; gap: 44px; }
.kicker { font-family: var(--mono); font-size: 14px; color: var(--brand); }
.h2 { font-size: var(--h2); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.intro { display: flex; flex-direction: column; gap: 16px; }
.muted { color: var(--muted); }
.two {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 56px; align-items: center;
}

/* ------------------------------------------------------------ problem */

.problem { padding-block: 112px 32px; }
.problem .h2 { max-width: 760px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.col { border-top: 2px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.col h3 { font-size: 19px; font-weight: 600; }
.col p { color: var(--muted); }

.illo { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.illo__stage {
  position: relative; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, var(--teal) 0%, #0A3238 55%, var(--hero) 100%);
  padding: clamp(16px, 4vw, 48px); box-shadow: 0 40px 80px -40px var(--shadow);
}
.illo__stage::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(158, 217, 198, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(158, 217, 198, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.browser {
  position: relative; background: #0B1D21; border: 1px solid rgba(158, 217, 198, 0.18);
  border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
}
.browser__bar {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-bottom: 1px solid rgba(158, 217, 198, 0.14);
}
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: #27474D; }
.browser__url {
  flex: 1; min-width: 0; background: var(--bg); border-radius: 8px; padding: 7px 12px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.browser__ext { width: 22px; height: 22px; flex: none; border-radius: 6px; box-shadow: 0 0 0 2px rgba(158, 217, 198, 0.5); }
.browser__body {
  position: relative; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 28px; padding: clamp(18px, 3vw, 32px);
}
.pay { display: flex; flex-direction: column; gap: 14px; }
.pay__title { font-size: 15px; font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 12px; color: var(--muted); }
.field i { display: block; height: 38px; border-radius: 8px; background: var(--solid); border: 1px solid var(--line2); }
.field--hit i {
  border: 1.5px solid var(--high); box-shadow: 0 0 0 4px rgba(178, 94, 20, 0.18);
  display: flex; align-items: center; padding: 0 12px;
  font-family: var(--mono); font-size: 13px; font-style: normal; color: var(--muted); letter-spacing: 0.12em;
}
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay__btn { height: 42px; border-radius: 8px; background: var(--bar); margin-top: 4px; }
.evidence { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.code-mini {
  background: var(--hero); border: 1px solid rgba(158, 217, 198, 0.18); border-radius: 10px;
  padding: 14px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.8; color: #7F9693; overflow: hidden;
}
.code-mini .in { padding-left: 14px; }
.code-mini .bad {
  margin: 2px -8px; padding: 2px 8px 2px 20px; border-radius: 5px;
  background: var(--hibg); color: var(--hiink); word-break: break-all;
}
.hit-card {
  background: var(--solid); border: 1px solid var(--line2); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.hit-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.hit-card__meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.badge {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 4px;
}
.badge--critical { background: var(--critical-bg); color: var(--critical); }
.illo figcaption { font-family: var(--mono); font-size: 13px; color: var(--muted); }

.views-lede { font-size: 21px; line-height: 1.5; font-weight: 500; color: var(--brand); max-width: 760px; }
.views { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.view {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  transition: all .5s cubic-bezier(.2, .7, .2, 1);
}
.view.is-active { border-color: var(--brand); transform: translateY(-4px); box-shadow: 0 18px 40px -24px var(--shadow); }
.view__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.view__head strong { font-size: 16px; }
.view__head span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.view__page {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.view__page i { display: block; height: 8px; border-radius: 3px; background: var(--bar); }
.view__page i:nth-child(1) { height: 10px; width: 55%; }
.view__page i:nth-child(2) { width: 90%; }
.view__page i:nth-child(3) { width: 75%; }
.view__page i:nth-child(4) { height: 28px; border-radius: 6px; margin-top: 4px; }
.view__spam {
  background: var(--hibg); border: 1px dashed var(--high); border-radius: 6px; padding: 8px 10px;
  font-family: var(--mono); font-size: 12px; color: var(--hiink);
}
.note {
  align-self: flex-start; font-family: var(--mono); font-size: 12px; padding: 4px 9px; border-radius: 5px;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
}
.note--warn { background: var(--hibg); color: var(--hiink); border-color: transparent; }

/* -------------------------------------------------------------- steps */

.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.step {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 30px;
  display: flex; flex-direction: column; gap: 14px;
  transition: opacity .8s, transform .3s, border-color .3s;
}
.step:hover { transform: translateY(-4px); border-color: var(--brand); }
.step__n { font-family: var(--mono); font-size: 44px; line-height: 1; color: var(--brand); font-weight: 500; }
.step h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.step p { font-size: 16px; color: var(--muted); }

/* ----------------------------------------------------------- findings */

.finding {
  position: relative; background: var(--solid); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 24px 50px -24px var(--shadow); overflow: hidden;
}
.finding__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.finding__head h3 { font-size: 19px; font-weight: 600; }
.finding .badge { font-size: 12px; padding: 4px 9px; border-radius: 5px; border: 1px solid #E7C3BD; }
.finding__meta { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.codebox { position: relative; border-radius: 8px; overflow: hidden; }
.codebox pre {
  margin: 0; background: var(--hero); color: var(--paper); font-size: 13px; line-height: 1.5;
  padding: 14px 16px; white-space: pre-wrap; word-break: break-all;
  border: 1px solid rgba(158, 217, 198, 0.18);
}
.codebox mark { background: rgba(158, 217, 198, 0.22); color: var(--brand); border-radius: 3px; padding: 0 2px; }
.sweep {
  position: absolute; top: 0; bottom: 0; width: 28%; left: -30%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(158, 217, 198, 0.22), transparent);
  animation: hcSlide 3.6s ease-in-out infinite;
}
.finding__fix { font-size: 15px; }
.types {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px;
}
.type {
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: opacity .7s, transform .3s, border-color .3s;
}
.type:hover { transform: translateY(-3px); border-color: var(--brand); }
.type__n { font-family: var(--mono); font-size: 12px; color: var(--brand); }
.type h3 { font-size: 16px; font-weight: 600; }
.type p { font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ------------------------------------------------------------- report */

.arrows { list-style: none; padding: 0; display: flex; flex-direction: column; font-size: 17px; line-height: 1.5; }
.arrows li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.arrows li:last-child { border-bottom: 1px solid var(--line); }
.arrows li::before { content: '→'; font-family: var(--mono); color: var(--brand); font-size: 14px; padding-top: 2px; }
.ta { font-family: 'Noto Sans Tamil', var(--sans); color: var(--ink); font-weight: 600; }
/* The cover is decoration and must never hide the summary's content: the
   summary is inset on the right and bottom by more than the cover's reach,
   so the two only meet at the summary's empty corner. Percentages keep that
   true at every width. */
.report-art { position: relative; padding: 0 22% 32% 0; }
.summary {
  background: var(--solid); border-radius: 10px; padding: 28px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 30px 60px -28px var(--shadow), 0 0 0 1px var(--line);
}
.summary__top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line); padding-bottom: 14px;
}
.summary__top strong { font-size: 15px; }
.summary__top span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.summary__verdict {
  background: var(--okbg); border-radius: 8px; padding: 14px;
  display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600;
}
.summary__verdict span { background: var(--clean); color: #fff; font-size: 11px; letter-spacing: 0.06em; padding: 4px 8px; border-radius: 4px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; font-family: var(--mono); }
.stats div { border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.stats b { display: block; font-size: 20px; font-weight: 500; }
.stats span { font-size: 11px; color: var(--muted); }
.summary__rows { font-family: var(--mono); font-size: 12px; }
.summary__rows div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.summary__rows div:last-child { border-bottom: 1px solid var(--line); }
.summary__not { display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.5; }
.summary__not strong { font-weight: 600; }
.summary__not span { color: var(--muted); }
.cover {
  position: absolute; right: 0; bottom: 0; width: 30%; min-width: 120px;
  background: var(--teal); color: var(--paper); border-radius: 10px; padding: 18px;
  display: flex; flex-direction: column; gap: 12px; aspect-ratio: 210 / 280;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5); overflow: hidden;
  animation: hcFloat 6s ease-in-out infinite;
}
.cover img { width: 30px; height: 30px; }
.cover strong { font-size: 14px; line-height: 1.25; }
.cover__host { font-family: var(--mono); font-size: 11px; color: #C9DAD7; }
.cover__fill { flex: 1; }
.cover__beam { height: 2px; background: var(--brand); box-shadow: 0 0 10px 1px rgba(158, 217, 198, 0.6); }
.cover__langs { display: flex; gap: 6px; font-family: var(--mono); font-size: 11px; }
.cover__langs span { border: 1px solid rgba(158, 217, 198, 0.5); border-radius: 4px; padding: 2px 6px; }

/* ------------------------------------------------------------ plugins */

.ptable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--solid); box-shadow: 0 24px 50px -28px var(--shadow); }
.ptable { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 14px; }
.ptable caption { text-align: left; }
.ptable th {
  text-align: left; font-weight: 400; font-size: 12px; letter-spacing: 0.04em; color: var(--muted);
  background: var(--bg); padding: 12px 20px; text-transform: uppercase;
}
.ptable td { padding: 16px 20px; border-top: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; }
.ptable tr.is-inactive td { color: var(--muted); }
.ptable small { font-size: 11px; }
.gap { font-weight: 500; font-size: 12px; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.gap--major { background: var(--hibg); color: var(--hiink); }
.gap--feature { background: #F5EED6; color: #6E570E; }
.gap--current { background: var(--okbg); color: var(--okink); }

/* --------------------------------------------------------------- wolf */

.wolf { padding-block: 112px 96px; align-items: start; }
.wolf p { color: var(--muted); line-height: 1.65; }
.layers { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.layer {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 12px;
  border: 1px solid var(--line); background: transparent; transition: all .4s;
}
.layer__n { font-family: var(--mono); color: var(--brand); font-size: 14px; width: 18px; }
.layer__name { flex: 1; }
.layer__ok {
  font-family: var(--mono); font-size: 12px; padding: 3px 8px; border-radius: 5px;
  background: var(--okbg); color: var(--okink); opacity: 0; transform: translateX(-6px); transition: all .4s;
}
.layer.is-on { border-color: var(--brand); background: var(--card); }
.layer.is-on .layer__ok { opacity: 1; transform: none; }

/* ------------------------------------------------------------ privacy */

.safe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.safe article {
  background: var(--band); color: var(--paper); border-radius: 18px; padding: 36px;
  display: flex; flex-direction: column; gap: 12px;
}
.safe h3 { font-size: 22px; font-weight: 600; }
.safe p { color: var(--bandink); }

.cant {
  border: 1.5px dashed var(--line2); border-radius: 18px; padding: 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px 48px;
}
.cant h2 { font-size: 28px; line-height: 1.2; font-weight: 600; }
.cant p { color: var(--muted); line-height: 1.65; }

/* ---------------------------------------------------------------- faq */

.faq-wrap { max-width: 880px; }
.faq { border-top: 1px solid var(--line2); }
.faq details { border-bottom: 1px solid var(--line2); }
.faq summary {
  list-style: none; cursor: pointer; min-height: 60px; padding: 20px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-size: 18px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq summary::after {
  content: '+'; font-family: var(--mono); font-size: 22px; color: var(--brand);
  flex: none; width: 22px; text-align: center; transition: transform .3s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { font-size: 16px; line-height: 1.65; color: var(--muted); padding: 0 40px 22px 0; }

/* ---------------------------------------------------------------- cta */

.cta { position: relative; overflow: hidden; background: var(--hero); color: var(--paper); }
.cta .beam { background: linear-gradient(90deg, transparent, var(--brand) 20%, var(--brand) 80%, transparent); box-shadow: 0 0 24px 4px rgba(158, 217, 198, 0.4); }
.glow--c {
  width: 700px; height: 700px; left: 50%; top: 50%; margin: -350px 0 0 -350px;
  background: radial-gradient(circle, rgba(158, 217, 198, 0.12), transparent 60%);
  animation: hcGlow 16s ease-in-out infinite;
}
.cta__inner {
  position: relative; padding-block: 120px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px;
}
.cta h2 { font-size: clamp(34px, 4.8vw, 56px); line-height: 1.06; font-weight: 600; letter-spacing: -0.025em; max-width: 760px; }
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cta__small { font-family: var(--mono); font-size: 14px; color: #B9CFCC; }

/* ------------------------------------------------------------- footer */

.site-footer .wrap { padding-block: 64px 40px; display: flex; flex-direction: column; gap: 36px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-style: normal; }
.footer-col__label { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.footer-col .muted { line-height: 1.5; }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  border-top: 1px solid var(--line); padding-top: 22px; font-size: 13px; line-height: 1.6; color: var(--muted);
}
.footer-base p:first-child { max-width: 720px; }

/* ------------------------------------------------------------- consent */

.consent {
  position: fixed; z-index: 40;
  left: var(--gutter); right: var(--gutter);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 600px; margin-inline: auto;
  background: var(--solid); border: 1px solid var(--line2); border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  font-size: 15px; line-height: 1.5;
}
.consent[hidden] { display: none; }
.consent p { flex: 1 1 280px; color: var(--bandink); }
.consent__btns { display: flex; gap: 10px; flex: none; }
.linklike {
  background: none; border: 0; padding: 0; font: inherit; color: var(--brand);
  text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.linklike:hover { color: var(--ink); }

/* --------------------------------------------------------------- prose */

.prose { max-width: 720px; margin: 0 auto; padding-block: 72px 96px; }
.prose h1 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 8px; }
.prose h2 { font-size: 22px; margin: 40px 0 10px; }
.prose p, .prose li { color: var(--muted); }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.prose .date { font-family: var(--mono); font-size: 13px; color: var(--brand); margin-bottom: 24px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; margin-top: 8px; }
.prose td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.prose td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.notfound { text-align: center; padding-block: 140px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.notfound h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.06; letter-spacing: -0.02em; }

/* ---------------------------------------------------------- motion */

[data-reveal] { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
html[data-anim] [data-reveal]:not([data-in]) { opacity: 0; transform: translateY(24px); }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; }

@keyframes hcLock { 0% { top: -4%; opacity: 0 } 8% { opacity: 1 } 45% { top: var(--rest); opacity: 1 } 88% { top: var(--rest); opacity: 1 } 100% { top: var(--rest); opacity: 0 } }
@keyframes hcGlow { 0%, 100% { transform: translate(-8%, -6%) scale(1); opacity: .5 } 50% { transform: translate(8%, 6%) scale(1.18); opacity: .85 } }
@keyframes hcPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(158, 217, 198, 0) } 50% { box-shadow: 0 0 0 7px rgba(158, 217, 198, 0.3) } }
@keyframes hcFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes hcSlide { 0% { left: -30% } 100% { left: 110% } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glow, .beam, .sweep { display: none; }
  .pill__dot, .cover { animation: none; }
  html[data-anim] [data-reveal]:not([data-in]) { opacity: 1; transform: none; }
  .step:hover, .type:hover, .btn:hover { transform: none; }
}

@media (max-width: 380px) {
  /* Too narrow for the cover to float beside the summary without hiding
     its text; it is decoration, so it steps aside. */
  .report-art { padding: 0; }
  .cover { display: none; }
}

@media (max-width: 640px) {
  .section { padding-block: 72px; }
  .hero__inner { padding-block: 64px 80px; gap: 48px; }
  .cant { padding: 28px; }
  .safe article { padding: 28px; }
  .trust li + li::before { margin-right: 12px; }
}

@media print {
  .site-header, .glow, .beam-layer, .sweep { display: none; }
}