/* ─────────────────────────────────────────────────────────────
   styles-start.css — page styles for /start (EN).

   These rules were ~1,900 lines of page-local <style> inline in
   start.html, duplicated by hand between EN and DE. Extracted per
   issue #663: both pages sat right at (EN) or over (DE) the CRO
   evaluator's 200 KB raw-byte cliff, and every edit had to be made
   twice. See go.css (#672) for the same pattern proved on /go.

   This file's content is NOT byte-identical to styles-start-de.css —
   de/start.html is missing the not-yet-live "Auto-Repair" ladder step
   (verified: 4 vs 5 .scan-stat-item elements) and a small handful of
   other rules unique to each locale's current markup, so the two
   locales keep separate files rather than risk changing DE's
   rendering by sharing one.

   url() paths are root-absolute on purpose, matching go.css: this
   file is served from / and consumed only from /, but absolute keeps
   the convention consistent if that ever changes.
   ───────────────────────────────────────────────────────────── */

/* Override absolute path in fonts/material-symbols.css — relative URL works from file:// too */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/material-symbols-outlined.woff2") format("woff2");
}

/* ── Accessibility ── */
.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;
}

/* ── Page globals (ensures Inter even before styles-site.css resolves) ── */
body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  background:
    radial-gradient(
      ellipse 60% 50% at 50% 0%,
      rgba(43, 205, 238, 0.06),
      transparent 60%
    ),
    var(--color-bg-deep, var(--color-bg-deep));
  color: var(--color-fg-secondary);
  overflow-x: clip;
}
::selection {
  background: rgba(43, 205, 238, 0.3);
  color: var(--color-fg);
}

/* ── Section divider ── */
.scan-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(43, 205, 238, 0.2) 30%,
    rgba(78, 214, 214, 0.15) 70%,
    transparent
  );
  margin: 0 32px;
}

/* ── Gradient text ── */
.scan-gradient-text {
  background: linear-gradient(135deg, var(--color-fg) 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Eyebrow label (Mono — intentional, label context) ── */
.scan-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.scan-eyebrow-rule {
  display: inline-block;
  width: 22px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   SCAN INPUT — shared across 3 positions
   ═══════════════════════════════════════ */
.scan-input-wrap {
  display: flex;
  align-items: stretch;
  background: rgba(22, 42, 46, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(43, 205, 238, 0.3);
  box-shadow:
    0 0 0 4px rgba(43, 205, 238, 0.1),
    0 10px 40px rgba(0, 0, 0, 0.4);
  border-radius: 14px;
  overflow: hidden;
  max-width: 620px;
  width: 100%;
}
.scan-input-prefix {
  display: flex;
  align-items: center;
  padding-left: 18px;
  color: var(--color-primary);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.scan-input-field {
  flex: 1;
  padding: 18px 12px;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  color: var(--color-fg);
  letter-spacing: 0.01em;
  min-width: 0;
}
.scan-input-field::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.scan-input-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(to right, var(--color-primary), #22d3ee);
  color: var(--color-bg-deep);
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  box-shadow:
    0 4px 25px rgba(43, 205, 238, 0.4),
    0 0 60px rgba(43, 205, 238, 0.18);
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter 0.2s;
}
.scan-input-btn:hover {
  filter: brightness(1.06);
}

/* ═══════════════════════════════════════
   1. HERO
   ═══════════════════════════════════════ */
.scan-hero-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* ── Demoted free-scan block ──────────────────────────────────
   This was <section class="scan-hero"> and owned the fold until the
   app-signup hero took it. It deliberately keeps .scan-hero-inner,
   .scan-h1 and .scan-hero-sub so the A–E headline variants parked in
   the markup can still be swapped straight back in; only the scale
   and the section chrome change here. */
.scan-alt {
  position: relative;
  padding: 64px 32px 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.scan-alt .scan-h1 {
  font-size: clamp(30px, 3.6vw, 46px);
  /* Narrower than .scan-hero-inner so the headline breaks between
     phrases instead of mid-word ("60-/second scan"). text-wrap:balance
     evens the lines where supported and is ignored where it isn't. */
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
.scan-alt .scan-hero-sub {
  margin-top: 18px;
  font-size: 17px;
}
.scan-alt .scan-input-center {
  margin-top: 26px;
}
@media (max-width: 767px) {
  .scan-alt {
    padding: 44px 20px 40px;
  }
  .scan-alt .scan-h1 {
    font-size: clamp(26px, 7vw, 36px);
  }
}

/* ── Conversion-path grid ─────────────────────────────────────
   Reuses .hp-grid-3 / .hp-feature-card wholesale. The cards are real
   <a> and <button> elements rather than divs, which is the only thing
   .hp-feature-card never had to account for — hence the resets. */
.start-paths {
  position: relative;
  padding: 8px 32px 72px;
}
.start-path-card {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    transform 200ms ease,
    border-color 200ms ease;
}
.start-path-card:hover,
.start-path-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(43, 205, 238, 0.45);
}
.start-path-more {
  display: inline-block;
  margin-top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--color-primary);
  transition: transform 200ms ease;
}
.start-path-card:hover .start-path-more {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .start-path-card,
  .start-path-more {
    transition: none;
  }
  .start-path-card:hover,
  .start-path-card:focus-visible {
    transform: none;
  }
}
@media (max-width: 767px) {
  .start-paths {
    padding: 4px 20px 48px;
  }
  /* Mobile: the path cards become a compact link list — icon, label,
     chevron. Six full cards would be ~2,400px of scrolling for what is
     meant to be a glanceable menu. */
  .start-paths .hp-grid-3 {
    gap: 10px;
  }
  .start-path-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
  }
  .start-path-card .hp-feature-icon {
    margin: 0;
  }
  .start-path-card .hp-feature-title {
    margin: 0;
    font-size: 16px;
  }
  .start-path-card .hp-feature-desc {
    display: none;
  }
  .start-path-card .start-path-more {
    margin-top: 0;
  }
}
.scan-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(236, 85, 103, 0.1);
  border: 1px solid rgba(236, 85, 103, 0.32);
  text-decoration: none;
  margin-bottom: 26px;
}
.scan-hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-rose);
  box-shadow: 0 0 10px var(--color-rose);
  flex-shrink: 0;
}
.scan-hero-eyebrow-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-rose);
}
.scan-h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--color-fg);
}
.scan-h1-line {
  display: block;
}
.scan-h1-strike-wrap {
  position: relative;
  display: inline-block;
}
.scan-h1-strike {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 55%;
  height: 6px;
  background: var(--color-rose);
  transform: rotate(-1.5deg);
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(236, 85, 103, 0.55);
  pointer-events: none;
}
.scan-h1-logo {
  height: 0.72em;
  width: auto;
  vertical-align: middle;
  margin-left: 0.18em;
  margin-bottom: 0.06em;
  display: inline-block;
}
/* ICP entry hook — stays hidden until ?icp= resolves against
   window.SQUR_ICP_MAP (_applyIcpEntry). .scan-eyebrow sets an author-level
   `display`, which beats the UA sheet's [hidden] rule, so the hidden
   state has to be declared here or the empty label flashes on load. */
.scan-hero-icp[hidden] {
  display: none;
}

/* ICP entry block, above the fold in the app-signup hero (squr-ai/biz#720).
   Same hook _applyIcpEntry() paints into .scan-hero-icp above; #659 hoisted
   the app-signup hero above the free-scan block and took the only visible
   entry hook down with it, so this repeats it where the visitor actually
   lands. Two accents only, matching go.css's .go-icp: cyan for the free
   surface view, rose for the paid proof. */
.start-icp {
  --start-icp-accent: var(--color-primary);
  --start-icp-accent-rgb: 43, 205, 238;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 28px;
  padding: 16px 20px 16px 22px;
  text-align: left;
  border-radius: 16px;
  border: 1px solid rgba(var(--start-icp-accent-rgb), 0.42);
  background:
    linear-gradient(
      135deg,
      rgba(var(--start-icp-accent-rgb), 0.17),
      rgba(var(--start-icp-accent-rgb), 0.04)
    ),
    rgba(10, 18, 21, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* .start-icp sets an author-level `display`, which beats the UA sheet's
   [hidden] rule -- same gotcha as .go-icp and .scan-hero-icp above. */
.start-icp[hidden] {
  display: none;
}
.start-icp[data-approach="pentest"],
.start-icp[data-approach="autorepair"] {
  --start-icp-accent: var(--color-rose);
  --start-icp-accent-rgb: 236, 85, 103;
}
.start-icp-body {
  flex: 1 1 280px;
  min-width: 0;
}
.start-icp-tag {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--start-icp-accent);
}
.start-icp-hook {
  margin: 6px 0 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--color-fg);
}
.start-icp-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 13px 20px;
  border-radius: 12px;
  border: none;
  background: var(--start-icp-accent);
  color: var(--color-bg-deep);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.2s;
}
.start-icp-cta:hover {
  filter: brightness(1.08);
}
.start-icp-cta-arrow {
  transition: transform 0.2s;
}
.start-icp-cta:hover .start-icp-cta-arrow {
  transform: translateX(3px);
}
.start-icp-cta:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 3px;
}
@media (max-width: 767px) {
  .start-icp {
    padding: 14px 16px;
    gap: 14px;
    margin-bottom: 22px;
  }
  .start-icp-cta {
    width: 100%;
    justify-content: center;
  }
}

/* Hero body text — Inter, matching testimonial style */
.scan-hero-sub {
  font-family: "Inter", system-ui, sans-serif;
  margin: 26px auto 0;
  max-width: 720px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--color-fg-secondary);
}
.scan-input-center {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
/* Trust row: Mono label context (intentional) */
.scan-trust-row {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  flex-wrap: wrap;
  justify-content: center;
}
.scan-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.scan-trust-check {
  color: var(--color-success);
}
.scan-trust-sep {
  color: rgba(255, 255, 255, 0.25);
}
.scan-stat-strip {
  margin-top: 56px;
  display: inline-flex;
  align-items: stretch;
  padding: 18px 28px;
  background: rgba(22, 42, 46, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.scan-stat-item {
  padding: 0 24px;
  text-align: left;
}
/* A genuine red *box*, not just red text — a rose wash behind the one
   step that isn't live yet. align-items:stretch makes it full-height. */
.scan-stat-item--next {
  background: rgba(236, 85, 103, 0.09);
  border: 1px solid rgba(236, 85, 103, 0.28);
  border-radius: 10px;
  /* Negative margin cancels the padding so "Fix" keeps the same baseline
     as Scan/Check/Validate — the box grows, the text does not move. */
  padding: 8px 20px;
  margin: -8px 0;
}
.scan-stat-value {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-fg);
}
.scan-stat-value--primary {
  color: var(--color-primary);
}
/* Alert Rose, the brand's "use sparingly" accent — spent here on the one
   step in the ladder that is not live yet. One box in five is the whole
   budget. */
.scan-stat-value--next {
  color: var(--color-rose);
}
/* Stat labels: Mono, intentional — unit labels */
.scan-stat-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-top: 4px;
}
.scan-stat-note {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}
.scan-stat-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.1);
}

/* ═══════════════════════════════════════
   2. TRUSTED-BY
   ═══════════════════════════════════════ */
.scan-trusted {
  padding: 0 32px 24px;
}
.scan-trusted-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
.scan-trusted-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.scan-trusted-logo {
  height: 24px;
  opacity: 0.6;
  filter: grayscale(1) brightness(2);
}
.scan-trusted-logo--gameforge {
  height: 22px;
  opacity: 0.45;
  filter: grayscale(1) brightness(2.4);
}

/* ═══════════════════════════════════════
   3. X-RAY LAYERS
   ═══════════════════════════════════════ */
.scan-xray {
  position: relative;
  padding: 64px 32px;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(43, 205, 238, 0.03) 50%,
    transparent 100%
  );
}
.scan-xray-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.scan-xray-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.scan-xray-h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-fg);
}
/* Body text in section — Inter */
.scan-xray-sub {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-fg-secondary);
  margin-top: 18px;
}
.scan-xray-stack {
  position: relative;
  padding: 20px 0 0;
}
.scan-xray-depth {
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 30px;
  pointer-events: none;
}
.scan-xray-depth-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.scan-xray-layers {
  margin-left: 70px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.scan-layer {
  padding: 20px 24px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.scan-layer--free {
  background: rgba(43, 205, 238, 0.06);
  border: 1px solid rgba(43, 205, 238, 0.35);
}
.scan-layer--signup {
  background: rgba(43, 205, 238, 0.1);
  border: 1px solid rgba(43, 205, 238, 0.55);
}
.scan-layer--pentest {
  background: rgba(236, 85, 103, 0.08);
  border: 1px solid rgba(236, 85, 103, 0.45);
}
.scan-layer-left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
}
/* Layer badge: Mono (L1–L5 label) */
.scan-layer-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.scan-layer-badge--free {
  background: rgba(43, 205, 238, 0.1);
  border: 1px solid rgba(43, 205, 238, 0.35);
  color: var(--color-primary);
}
.scan-layer-badge--signup {
  background: rgba(43, 205, 238, 0.18);
  border: 1px solid rgba(43, 205, 238, 0.55);
  color: var(--color-primary);
}
.scan-layer-badge--pentest {
  background: rgba(236, 85, 103, 0.14);
  border: 1px solid rgba(236, 85, 103, 0.45);
  color: var(--color-rose-bright);
}
/* Layer heading: Montserrat */
.scan-layer-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--color-fg);
  letter-spacing: -0.01em;
}
/* Layer body text: Inter — matches testimonial/paragraph style */
.scan-layer-sub {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #b6c0c4;
  margin-top: 4px;
}
.scan-layer-ex {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-style: italic;
  color: #7e8a91;
  margin-top: 5px;
  line-height: 1.5;
}
/* Tier pills: Mono (functional label) */
.scan-layer-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.scan-layer-pill--free {
  background: rgba(43, 205, 238, 0.1);
  border: 1px solid rgba(43, 205, 238, 0.35);
  color: var(--color-primary);
}
.scan-layer-pill--signup {
  background: rgba(43, 205, 238, 0.18);
  border: 1px solid rgba(43, 205, 238, 0.55);
  color: var(--color-primary);
}
.scan-layer-pill--pentest {
  background: rgba(236, 85, 103, 0.14);
  border: 1px solid rgba(236, 85, 103, 0.45);
  color: var(--color-rose-bright);
}
.scan-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.scan-pill-dot--cyan {
  background: var(--color-primary);
}
.scan-pill-dot--rose {
  background: var(--color-rose);
}

/* ═══════════════════════════════════════
   5. EDGE SECTION
   ═══════════════════════════════════════ */
.scan-edge {
  position: relative;
  padding: 44px 32px 64px;
}
.scan-edge-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}
/* Iceberg */
.scan-iceberg {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    rgba(43, 205, 238, 0.06) 0%,
    rgba(43, 205, 238, 0.1) 36%,
    rgba(10, 18, 21, 0.55) 36%,
    rgba(10, 18, 21, 0.95) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.scan-iceberg-waterline {
  position: absolute;
  left: 0;
  right: 0;
  top: 36%;
  border-top: 1.5px dashed rgba(43, 205, 238, 0.55);
}
.scan-iceberg-wall {
  position: absolute;
  right: 16px;
  top: calc(36% - 22px);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(10, 18, 21, 0.55);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(43, 205, 238, 0.3);
}
.scan-iceberg-above {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 22px;
}
.scan-iceberg-below {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 44%;
}
.scan-iceberg-pill {
  padding: 5px 12px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.scan-iceberg-pill--cyan {
  background: rgba(43, 205, 238, 0.14);
  border: 1px solid rgba(43, 205, 238, 0.4);
  color: var(--color-primary);
}
.scan-iceberg-pill--rose {
  background: rgba(236, 85, 103, 0.16);
  border: 1px solid rgba(236, 85, 103, 0.45);
  color: var(--color-rose-bright);
}
.scan-iceberg-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.scan-iceberg-pill-dot--cyan {
  background: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
}
.scan-iceberg-pill-dot--rose {
  background: var(--color-rose);
  box-shadow: 0 0 8px var(--color-rose);
}
.scan-iceberg-h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--color-fg);
  margin: 12px 0 6px;
}
/* Iceberg body text: Inter */
.scan-iceberg-desc {
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-fg-muted);
}
.scan-iceberg-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  line-height: 1.75;
  color: #b6c0c4;
}
.scan-iceberg-list li.scan-iceberg-cta-line {
  color: var(--color-primary);
  margin-top: 8px;
}
/* Comparison table */
.scan-compare-wrap {
  background: rgba(22, 42, 46, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.scan-compare-header {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}
.scan-compare-header-squr {
  color: var(--color-primary);
}
.scan-compare-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  align-items: center;
}
.scan-compare-row:last-child {
  border-bottom: none;
}
.scan-compare-row--highlight {
  background: rgba(43, 205, 238, 0.04);
}
/* Table label: Inter */
.scan-compare-cell-label {
  font-family: "Inter", sans-serif;
  color: var(--color-fg-secondary);
  font-size: 14.5px;
  line-height: 1.5;
}
.scan-compare-cell {
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
}
.scan-compare-cell--no {
  color: var(--color-muted);
}
.scan-compare-cell--yes {
  color: var(--color-primary);
  font-weight: 600;
}

/* Mobile responsive comparison table — fit within viewport (no h-scroll) */
@media (max-width: 767px) {
  .scan-compare-wrap {
    overflow-x: visible;
  }

  .scan-compare-header,
  .scan-compare-row {
    min-width: 0;
    grid-template-columns: 1.4fr 0.8fr 0.9fr;
    column-gap: 8px;
    padding: 12px 14px;
  }

  .scan-compare-header {
    font-size: 9.5px;
    letter-spacing: 0.08em;
  }

  .scan-compare-cell-label {
    font-size: 12.5px;
  }

  .scan-compare-cell {
    font-size: 12.5px;
  }
}

/* Right-column copy */
.scan-edge-h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--color-fg);
}
/* Lede: Inter — paragraph, matches testimonials */
.scan-edge-lede {
  font-family: "Inter", sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--color-fg-secondary);
  margin-bottom: 28px;
}

/* ═══════════════════════════════════════
   5b. AUTONOMOUS REMEDIATION (not live yet)
   Rose throughout, deliberately: this is the only band on the page
   describing something we cannot do TODAY, and the colour is what keeps
   it visibly separate from the shipped capabilities above it.
   ═══════════════════════════════════════ */
.scan-repair {
  position: relative;
  padding: 20px 32px 80px;
}
.scan-repair-card {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 40px;
  border-radius: 20px;
  border: 1px solid rgba(236, 85, 103, 0.32);
  background: linear-gradient(
    160deg,
    rgba(236, 85, 103, 0.1),
    rgba(236, 85, 103, 0.02) 60%
  );
}
.scan-repair-h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--color-fg);
}
.scan-repair-lede {
  font-family: "Inter", sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--color-fg-secondary);
  max-width: 720px;
  margin: 0 0 32px;
}
/* Three steps, the third one pending — same visual grammar as the hero
   ladder, so a visitor who read "Fix · coming very soon" up top meets the
   same promise here with the detail attached. */
.scan-repair-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.scan-repair-step {
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}
.scan-repair-step--next {
  border-color: rgba(236, 85, 103, 0.42);
  background: rgba(236, 85, 103, 0.08);
}
/* Step index: Mono, intentional — a numbered sequence, not prose */
.scan-repair-step-n {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-bottom: 8px;
}
.scan-repair-step--next .scan-repair-step-n {
  color: var(--color-rose);
}
.scan-repair-step-t {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
  color: var(--color-fg);
  margin-bottom: 6px;
}
.scan-repair-step-b {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-fg-secondary);
}
/* The honesty line. Small, but it is the reason this band is allowed to
   exist next to the free scan without blurring the two products. */
.scan-repair-note {
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-fg-muted);
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Early-access form. Rose, not cyan: the hero's cyan input starts a scan
   that runs right now, this one joins a list for something that does not
   exist yet. Same shape so it reads as a sibling, different colour so it
   never gets mistaken for the free scan. */
.scan-wait {
  margin: 26px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(236, 85, 103, 0.22);
}
.scan-wait-h {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  color: var(--color-fg);
  margin: 0 0 6px;
}
.scan-wait-sub {
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-fg-secondary);
  max-width: 560px;
  margin: 0 0 18px;
}
.scan-wait-form {
  display: flex;
  align-items: stretch;
  background: rgba(22, 42, 46, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(236, 85, 103, 0.34);
  border-radius: 14px;
  overflow: hidden;
  max-width: 560px;
  width: 100%;
}
.scan-wait-field {
  flex: 1;
  padding: 15px 18px;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  color: var(--color-fg);
  min-width: 0;
}
.scan-wait-field::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.scan-wait-btn {
  padding: 0 24px;
  border: 0;
  cursor: pointer;
  background: var(--color-rose);
  color: var(--color-fg);
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14.5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter 0.2s;
}
.scan-wait-btn:hover {
  filter: brightness(1.1);
}
.scan-wait-btn[disabled] {
  cursor: default;
  filter: grayscale(0.5) brightness(0.8);
}
/* The honeypot. Off-screen rather than display:none — some bots skip
   hidden fields but fill positioned ones, and a real user tabbing through
   never reaches it because it is aria-hidden and tabindex="-1". */
.scan-wait-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.scan-wait-msg {
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 12px 0 0;
  min-height: 1.6em;
}
.scan-wait-msg[data-state="ok"] {
  color: var(--color-primary);
}
.scan-wait-msg[data-state="err"] {
  color: var(--color-rose);
}
.scan-wait-fine {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-fg-muted);
  margin: 10px 0 0;
  max-width: 560px;
}

/* ═══════════════════════════════════════
   6. PRICING LADDER
   ═══════════════════════════════════════ */
.scan-pricing {
  position: relative;
  padding: 100px 32px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(43, 205, 238, 0.04)
  );
}
.scan-pricing-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.scan-pricing-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.scan-pricing-h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-fg);
}
/* Body text: Inter */
.scan-pricing-sub {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-fg-secondary);
  margin-top: 14px;
}
.scan-pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.scan-tier {
  padding: 28px 26px;
  border-radius: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.scan-tier--ghost {
  background: rgba(22, 42, 46, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.scan-tier--hot {
  background: linear-gradient(
    135deg,
    rgba(236, 85, 103, 0.08),
    rgba(43, 205, 238, 0.06)
  );
  border: 1px solid rgba(236, 85, 103, 0.4);
  box-shadow:
    0 0 0 4px rgba(236, 85, 103, 0.06),
    0 20px 60px rgba(0, 0, 0, 0.4);
}
.scan-tier-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
/* Tag: Mono (label) */
.scan-tier-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-bottom: 8px;
}
.scan-tier-tag--hot {
  color: var(--color-rose-bright);
}
.scan-tier-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--color-fg);
  margin: 0;
}
.scan-tier-edge-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(236, 85, 103, 0.16);
  border: 1px solid rgba(236, 85, 103, 0.4);
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-rose-bright);
  white-space: nowrap;
}
.scan-tier-price-row {
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.scan-tier-price {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 44px;
  color: var(--color-fg);
  letter-spacing: -0.02em;
}
.scan-tier-unit {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--color-fg-muted);
}
.scan-tier-bullets {
  list-style: none;
  padding: 0;
  margin: 20px 0 24px;
  flex: 1;
}
/* Bullet text: Inter — matches testimonial paragraph weight */
.scan-tier-bullets li {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-fg-secondary);
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.scan-tier-check {
  flex-shrink: 0;
  margin-top: 1px;
}
.scan-tier-check--cyan {
  color: var(--color-primary);
}
.scan-tier-check--rose {
  color: var(--color-rose-bright);
}
.scan-tier-cta {
  padding: 12px 18px;
  border-radius: 12px;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  transition: filter 0.2s;
  text-align: center;
  text-decoration: none;
  display: block;
  border: 0;
}
.scan-tier-cta:hover {
  filter: brightness(1.06);
}
.scan-tier-cta--outline {
  background: rgba(43, 205, 238, 0.1);
  color: var(--color-primary);
  border: 1px solid rgba(43, 205, 238, 0.3) !important;
}
.scan-tier-cta--rose {
  background: linear-gradient(135deg, var(--color-rose), var(--color-rose-bright));
  color: var(--color-fg);
  box-shadow: 0 4px 25px rgba(236, 85, 103, 0.4);
}

/* ═══════════════════════════════════════
   7. FOOTER CTA
   ═══════════════════════════════════════ */
.scan-footer-cta {
  position: relative;
  padding: 80px 32px 100px;
  overflow: hidden;
}
.scan-footer-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 720px;
  height: 380px;
  border-radius: 50%;
  background: rgba(43, 205, 238, 0.18);
  filter: blur(180px);
  pointer-events: none;
}
.scan-footer-inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.scan-footer-live {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 255, 157, 0.1);
  border: 1px solid rgba(0, 255, 157, 0.3);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.scan-footer-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 8px var(--color-success);
  animation: scan-pulse 2s ease-in-out infinite;
}
@keyframes scan-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(0, 255, 157, 0.5);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 6px rgba(0, 255, 157, 0);
  }
}
.scan-footer-h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 20px 0 18px;
  color: var(--color-fg);
}
/* Body text: Inter */
.scan-footer-sub {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-fg-secondary);
  margin-top: 8px;
  margin-bottom: 32px;
}
/* Footer pills: Mono (label/tag context) */
.scan-footer-pills {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  flex-wrap: wrap;
  justify-content: center;
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 1023px) {
  .scan-xray-layers .scan-layer {
    margin-left: 0 !important;
  }
  .scan-edge-inner {
    grid-template-columns: 1fr;
  }
  .scan-edge-inner > div {
    min-width: 0;
  }
  .scan-pricing-grid {
    grid-template-columns: 1fr;
  }
  /* Three steps stack rather than squeeze — the third one carries the
     whole point of the band and must not end up as a sliver. */
  .scan-repair-steps {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .scan-h1 {
    font-size: clamp(36px, 9vw, 56px);
  }
  .scan-hero-sub {
    font-size: 17px;
  }
  .scan-input-wrap {
    flex-direction: column;
    border-radius: 14px;
  }
  .scan-input-prefix {
    padding: 14px 18px 0;
  }
  .scan-input-field {
    padding: 10px 18px;
  }
  .scan-input-btn {
    min-height: 48px;
    justify-content: center;
    border-radius: 0;
  }
  .scan-stat-strip {
    flex-wrap: wrap;
  }
  .scan-stat-item {
    width: 50%;
    padding: 12px 16px;
  }
  /* Five items wrap to 2 + 2 + 1. The odd one out is the last, so give it
     the whole row — it reads as the destination instead of an orphan. */
  .scan-stat-item:last-child {
    width: 100%;
  }
  .scan-stat-divider {
    display: none;
  }
  .scan-xray {
    padding: 40px 20px;
  }
  .scan-xray-depth {
    display: none;
  }
  .scan-xray-layers {
    margin-left: 0;
  }
  .scan-layer {
    flex-wrap: wrap;
  }
  .scan-edge {
    padding: 28px 20px 40px;
  }
  .scan-repair {
    padding: 12px 20px 56px;
  }
  .scan-repair-card {
    padding: 32px 22px;
  }
  .scan-pricing {
    padding: 60px 20px;
  }
  .scan-pricing-grid {
    padding: 0 4px;
  }
  .scan-footer-cta {
    padding: 60px 20px 80px;
  }
  .scan-divider {
    margin: 0 20px;
  }
}

/* ── Homepage-specific inline styles (not Tailwind-dependent) ── */
.glow-cyan {
  box-shadow: 0 0 30px rgba(43, 205, 238, 0.4);
}
.glass {
  background: rgba(22, 42, 46, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.glass:hover {
  border-color: rgba(43, 205, 238, 0.25);
  box-shadow: 0 0 20px rgba(43, 205, 238, 0.08);
}
.gradient-text {
  background: linear-gradient(135deg, var(--color-fg) 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-link {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}
.nav-link:hover {
  color: var(--color-primary-hover);
}
.nav-link:active {
  color: var(--color-rose);
}
button.hp-dropdown-trigger {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.progress-bar {
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-top: 10px;
}
.progress-fill {
  height: 100%;
  border-radius: 9999px;
  box-shadow: 0 0 8px currentColor;
}

/* Section headings */
section h2 {
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.08);
}

/* CTA button glow */
.hp-btn-primary-gradient,
.hp-btn-primary-gradient-sm,
.hp-btn-primary-gradient-lg {
  box-shadow:
    0 4px 25px rgba(43, 205, 238, 0.35),
    0 0 60px rgba(43, 205, 238, 0.1);
}
.hp-btn-primary-gradient:hover,
.hp-btn-primary-gradient-sm:hover,
.hp-btn-primary-gradient-lg:hover {
  box-shadow:
    0 4px 35px rgba(43, 205, 238, 0.5),
    0 0 80px rgba(43, 205, 238, 0.15);
}

/* Kobalt Rose active states */
a:active,
button:active {
  transition: none;
}
.glass:active {
  border-color: rgba(236, 85, 103, 0.4) !important;
  box-shadow: 0 0 25px rgba(236, 85, 103, 0.15);
}
.hp-btn-primary-gradient:active,
.hp-btn-primary-gradient-sm:active,
.hp-btn-primary-gradient-lg:active {
  background: var(--color-rose) !important;
  background-image: none !important;
  box-shadow: 0 0 20px rgba(236, 85, 103, 0.3);
}
.hp-btn-secondary:active,
.hp-btn-secondary-lg:active {
  border-color: rgba(236, 85, 103, 0.4) !important;
  box-shadow: 0 0 15px rgba(236, 85, 103, 0.12);
}
.faq-question:active {
  color: var(--color-rose) !important;
}
.faq-icon {
  transition:
    transform 0.3s,
    color 0.1s;
}
.faq-question:active .faq-icon {
  color: var(--color-rose) !important;
}

/* Testimonial stars */
.star-rating {
  color: #facc15;
  letter-spacing: 2px;
}

/* FAQ Accordion */
.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.faq-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.faq-question {
  width: 100%;
  text-align: left;
  padding: 26px 24px;
  background: none;
  border: none;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  transition: color 0.2s;
}
.faq-question:hover {
  color: var(--color-primary-hover);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    padding 0.3s ease;
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.8;
}
.faq-item.open .faq-answer {
  max-height: 500px;
  padding: 16px 24px 28px;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
}
.faq-icon {
  transition: transform 0.3s;
  font-size: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* Newsletter */
.newsletter-input {
  background: rgba(22, 42, 46, 0.8);
  border: 1px solid rgba(43, 205, 238, 0.3);
  border-radius: 0.75rem;
  padding: 12px 16px;
  color: white;
  outline: none;
  transition: all 0.3s;
  font-size: 0.9rem;
  flex: 1;
}
.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.newsletter-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 8px var(--border-accent-bright);
}

/* Cookie banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
  background: rgba(16, 31, 34, 0.98);
  border-top: 1px solid rgba(43, 205, 238, 0.2);
  backdrop-filter: blur(12px);
}
.cookie-banner.visible {
  transform: translateY(0);
  opacity: 1;
}

/* Dropdown menu */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding-top: 8px;
  z-index: 200;
}
.nav-dropdown-inner {
  background: rgba(22, 42, 46, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  padding: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.nav-dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 0.5rem;
  transition: all 0.2s;
  text-decoration: none;
}
.nav-dropdown a:hover {
  background: rgba(43, 205, 238, 0.1);
}
.has-dropdown:hover .nav-dropdown {
  display: block;
}

/* Benefits carousel */
.benefit-slide {
  display: none;
}
.benefit-slide.active {
  display: grid;
}

/* Mobile menu */
.mobile-menu {
  display: none;
}
.mobile-menu.open {
  display: flex;
}

/* Orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(150px);
  animation: float-orb 20s ease-in-out infinite;
  will-change: transform;
}
.orb-cyan {
  background: rgba(43, 205, 238, 0.25);
}
.orb-teal {
  background: rgba(78, 214, 214, 0.15);
}
.orb-rose {
  background: rgba(236, 85, 103, 0.1);
}

/* Grid pattern */
.grid-pattern {
  position: relative;
}
.grid-pattern::before {
  display: none;
}

/* Enhanced card hover */
.glass {
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}

/* Asset showcase */
.asset-showcase {
  position: relative;
}
.asset-glow {
  position: absolute;
  inset: -4px;
  background: linear-gradient(
    to right,
    rgba(43, 205, 238, 0.5),
    rgba(34, 211, 238, 0.5)
  );
  border-radius: 1rem;
  filter: blur(16px);
  opacity: 0.3;
  transition: opacity 1s ease;
  pointer-events: none;
}
.asset-showcase:hover .asset-glow {
  opacity: 1;
}
.asset-card {
  position: relative;
  background: var(--color-bg-card-solid);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(43, 205, 238, 0.3);
}

/* Section divider */
.section-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(43, 205, 238, 0.15) 30%,
    rgba(78, 214, 214, 0.15) 70%,
    transparent
  );
}

/* Counter animation */
.stat-value {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-value:hover {
  transform: scale(1.12);
}

/* Benefit tabs - pill-shaped subtle buttons */
.benefit-tab {
  padding: 0.625rem 1.375rem;
  border-radius: var(--radius-xl);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.25s;
  -webkit-appearance: none;
  appearance: none;
}
.benefit-tab--active {
  background: rgba(43, 205, 238, 0.12);
  border: 1px solid rgba(43, 205, 238, 0.35);
  color: var(--color-primary);
  box-shadow: 0 0 12px rgba(43, 205, 238, 0.15);
}
.benefit-tab--inactive {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.5);
}
.benefit-tab--inactive:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
}
/* Homepage blog card images */
.hp-blog-card-image {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}
.hp-blog-card-image-gradient {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease;
}
.hp-blog-card:hover .hp-blog-card-image-gradient {
  transform: scale(1.04);
}
.hp-blog-cat-benchmarks .hp-blog-card-image-gradient {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.25) 0%,
    rgba(16, 31, 34, 0.9) 100%
  );
}
.hp-blog-cat-ai-security .hp-blog-card-image-gradient {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.25) 0%,
    rgba(16, 31, 34, 0.9) 100%
  );
}
.hp-blog-cat-pentesting .hp-blog-card-image-gradient {
  background: linear-gradient(
    135deg,
    rgba(78, 214, 214, 0.25) 0%,
    rgba(16, 31, 34, 0.9) 100%
  );
}
.hp-blog-card-image-icon {
  font-size: 2.5rem;
  opacity: 0.35;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .orb,
  .grid-pattern {
    animation: none !important;
  }
  .fade-up,
  .fade-in-left,
  .fade-in-right,
  .scale-in {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  [data-parallax] {
    transform: none !important;
    transition: none !important;
  }
  .hero-reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .glass:hover {
    transform: none !important;
  }
}