/* ═══════════════════════════════════════════════
   UNIFIED v6 — GalaxyWarden Design System v4
   ═══════════════════════════════════════════════ */

/* ============================================================================
   GALAXYWARDEN HOMEPAGE — CANONICAL PRIMITIVES (WS12.81)
   ============================================================================
   The homepage IS the law. Every other page in the codebase migrates TO match
   what this file establishes. Polishing here propagates everywhere downstream.

   Pre-WS12.79 the homepage had its own parallel :root duplicating tokens.css
   under different names. WS12.79 reconciled the inline :root in unified_home.py
   and WS12.80 reconciled the :root in this file — both are now alias bridges
   to tokens.css, the single source of truth. WS12.81 (this) standardizes the
   homepage's own internal component primitives.

   ──────────────── COLORS ────────────────
   Surfaces:    var(--gw-c-bg-deepest)  body / void
                var(--gw-c-bg-mid)      mid-depth surface (between deepest & base)
                var(--gw-c-bg-soft)     soft surface (above base, below card)
                var(--gw-c-bg-card)     transparent card surface (use w/ backdrop-filter)
                var(--gw-c-bg-card-solid)  solid card variant when transparency unavailable
   Text:        var(--gw-c-text-strong)    H1/emphasized
                var(--gw-c-text-primary)   body default
                var(--gw-c-text-secondary) between strong and muted
                var(--gw-c-text-muted)     captions, secondary meta
                var(--gw-c-text-dim)       tertiary, deprecated
                var(--gw-c-text-ghost)     near-disabled
   Brand:       var(--gw-c-red-500)   primary action / threat
                var(--gw-c-red-600)   primary hover
                var(--gw-c-success-400)  positive state
                var(--gw-c-warning-400)  warning state
   Borders:     var(--gw-c-border-subtle) subtle (alpha 0.10)
                var(--gw-c-border)        default (alpha 0.20)
                var(--gw-c-border-strong) strong (#334155)

   Legacy local aliases (kept for back-compat; resolve through tokens.css):
     --bg, --bg-deep, --bg-surface, --red, --red-dark, --red-deep,
     --text-primary, --text-bright, --text-secondary, --text-muted

   ──────────────── TYPOGRAPHY ────────────────
   Family:      var(--gw-ff-sans)   body & headings
                var(--gw-ff-mono)   credentials, code, technical labels
   Fixed scale: --gw-fs-xs (12px) → --gw-fs-4xl (48px); use these for body
                copy where line-counts must be predictable.
   Fluid scale: var(--gw-fs-fluid-hero)  hero H1 (32→56px via clamp)
                var(--gw-fs-fluid-h1)    page H1 (28→48px)
                var(--gw-fs-fluid-h2)    section H2 (24→36px)
                var(--gw-fs-fluid-h3)    H3 (20→24px)
                var(--gw-fs-fluid-lead)  lead paragraph
                var(--gw-fs-fluid-body)  body copy
   Weight:      var(--gw-fw-bold) for headings, var(--gw-fw-semibold) for emphasis,
                var(--gw-fw-normal) for body.
   Letter-spacing: heading rules use -0.02em via WS10.135 polish layer.

   ──────────────── PRIMARY CYBER-CARD ────────────────
   Used for: .stat-card, .testimonial-card, .step-card, .compare-new
   The signature GalaxyWarden card — clip-path corner-cuts, red-tinted border,
   subtle white-tint surface. Internally consistent across all primary cards.

       background: rgba(255, 255, 255, 0.03);          /* subtle white tint */
       border:     1px solid rgba(239, 68, 68, 0.12);  /* red-tinted edge */
       padding:    var(--gw-sp-7) var(--gw-sp-6);      /* 28px 24px */
       border-radius: 22px;

   ──────────────── NEUTRAL CARD ────────────────
   Used for: .price-card (default), .trust-item, .compare-old
   The lower-emphasis card variant — neutral white-alpha border, subtler tint.

       background: rgba(255, 255, 255, 0.02);
       border:     1px solid rgba(255, 255, 255, 0.07);
       padding:    var(--gw-sp-7) var(--gw-sp-6);

   ──────────────── EMPHASIS / POPULAR CARD ────────────────
   Used for: .price-card.popular, .compare-new
       background: linear-gradient(180deg, rgba(239,68,68,0.08), rgba(239,68,68,0.02));
       border:     1px solid rgba(239, 68, 68, 0.25);
       box-shadow: 0 0 60px rgba(239, 68, 68, 0.08), var(--gw-shadow-md);

   ──────────────── BUTTONS ────────────────
   Primary:   background: var(--red-dark); color: #fff;
              padding: 14px 20px; border-radius: var(--gw-r-md);
              hover: background: var(--red-deep); transform: translateY(-1px);
   Mobile:    min-height: 44px (enforced by tokens.css @media ≤600px).
   Focus:     outline: 2px solid #818cf8; outline-offset: 3px (WS10.135).

   ──────────────── SECTION ────────────────
   .section          padding: 80px 20px; background: transparent;
   .section-inner    max-width: var(--gw-content-max); margin: 0 auto;
   Section labels:   uppercase, 0.78rem, padding 8px 24px, transparent border.

   ──────────────── BREAKPOINTS (mobile-first) ────────────────
   Use tokens.css canonical breakpoints in @media rules:
     --gw-bp-sm:  480px   small phone landscape
     --gw-bp-md:  768px   tablet portrait
     --gw-bp-lg:  1024px  tablet landscape / small desktop
     --gw-bp-xl:  1280px  standard desktop
     --gw-bp-2xl: 1536px  large desktop

   Default styles target 320px+ phone portrait. Layer up via @media (min-width).

   ──────────────── ANIMATION ────────────────
   Standard easing: cubic-bezier(0.4, 0, 0.2, 1) for most transitions.
                    cubic-bezier(0.2, 0.7, 0.2, 1) for hover lifts.
   Standard duration: 200ms (var(--gw-dur-base)) for hover/focus.
                      400ms (var(--gw-dur-slow)) for scroll reveals.
   Reduced motion: tokens.css collapses all durations to 0.01ms automatically
                   when prefers-reduced-motion: reduce is set.

   ──────────────── A/B EXPERIMENTS ────────────────
   gw-hero-a / gw-hero-b classes scope hero variants. Do NOT global-find-replace
   color values inside .gw-hero-a or .gw-hero-b — they're variant overrides.

============================================================================ */

/* ============================================================================
   SITE-WIDE UNIFICATION POLICY (WS12.110)
   ============================================================================
   THIS FILE + tokens.css ARE THE SINGLE SOURCE OF TRUTH FOR ALL PAGE STYLING.

   No new code may:
     - Add page-specific .css files (no pricing.css, no enterprise.css, etc.)
     - Use inline `style="..."` attributes for color/spacing/radius/typography
     - Hardcode hex / rgba / px values that have a tokens.css equivalent
     - Add a parallel local :root with --custom-* variables that diverge
       from the canonical --gw-* tokens
     - Maintain a separate mobile-specific stylesheet or template

   If you need a value that isn't in tokens.css:
     1. ADD it to tokens.css first.
     2. Use it via var(--gw-...).
     3. Document it in this file's CANONICAL PRIMITIVES block above.

   Page-specific styles must be expressed as utility classes added to this
   file or to tokens.css, never as page-scoped overrides.

   This policy was established after WS12.79-107 reconciled four parallel
   :root systems (homepage inline, unified-home.css local, pricing.css
   local, marketing.py inline) that had been drifting apart and producing
   visible inconsistency across pages. The "everything looks slightly
   different on each page" sensation was root-caused to those parallel
   token systems disagreeing on body bg, card surface, and text colors.

   Enforced from this date: 2026-05-05.
============================================================================ */

/* WS12.80 — Was a parallel local design system with values disagreeing
   from tokens.css. Pre-migration examples: text-primary was hex e2e4ea vs
   canonical e2e8f0; text-muted was hex 636979 vs canonical 94a3b8; bg was
   hex 050609 vs canonical 050714. That made the homepage's text and
   surfaces a different palette than every other page. Now every legacy
   local name resolves to tokens.css values
   so the homepage uses ONE source of truth.

   Alpha-specific values (red-glow, red-surface, border-default with the
   white-alpha pattern used by overlay edges) stay as direct rgba() since
   they're not single-color tokens.

   Per migration policy, we keep the legacy names as aliases instead of
   global-find-replace — that would risk breaking A/B color experiments. */
:root {
  --bg:             var(--gw-c-bg-deepest);
  --bg-deep:        var(--gw-c-bg-mid);
  --bg-surface:     var(--gw-c-bg-soft);
  --red:            var(--gw-c-red-500);
  --red-dark:       var(--gw-c-red-600);
  --red-deep:       var(--gw-c-red-700);
  --red-glow:       rgba(239, 68, 68, 0.2);
  --red-surface:    var(--gw-c-threat-bg);
  --red-border:     var(--gw-c-threat-border);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.14);
  --text-primary:   var(--gw-c-text-primary);
  --text-bright:    var(--gw-c-text-strong);
  --text-secondary: var(--gw-c-text-secondary);
  --text-muted:     var(--gw-c-text-muted);
  --font:           var(--gw-ff-sans);
  --mono:           var(--gw-ff-mono);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text-bright);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ═══ HERO — FULL VIEWPORT ═══ */
.hero { position: relative; height: 100svh; min-height: 700px; width: 100%; overflow: hidden; background: var(--bg); transition: height 0.4s ease; }
.hero.has-results { height: auto; min-height: 100svh; overflow: visible; }
.hero.has-results .center-wrap { position: relative; justify-content: flex-start; padding-top: 100px; padding-bottom: 3rem; }
.hero.has-results .starfield, .hero.has-results .nebula { position: fixed; }

/* ═══ STARFIELD ═══ */
.starfield { position: absolute; inset: 0; z-index: 0; opacity: 0.7; }
.starfield canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ═══ NEBULA ═══ */
.nebula {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 20% 25%, rgba(239,68,68,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 80% 70%, rgba(239,68,68,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 50% 50%, rgba(56,189,248,0.03) 0%, transparent 50%);
  animation: nebulaBreath 20s ease-in-out infinite alternate;
}
@keyframes nebulaBreath {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0.75; transform: scale(1.04); }
}

/* ═══ SCROLLING ICON ROWS (APP WALL) ═══ */
.icon-rows-wrap {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
  perspective: 1200px;
}
.icon-rows-inner {
  display: flex; flex-direction: column;
  gap: 14px;
  transform: rotateX(8deg) rotateY(-2deg) scale(1.05);
  transform-style: preserve-3d;
}
.icon-row {
  display: flex;
  gap: 14px;
  will-change: transform;
}
.icon-row.scroll-right { animation: scrollRight var(--speed, 80s) linear infinite; }
.icon-row.scroll-left  { animation: scrollLeft var(--speed, 80s) linear infinite; }

@keyframes scrollRight { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 7px)); } }
@keyframes scrollLeft  { 0% { transform: translateX(calc(-50% - 7px)); } 100% { transform: translateX(0); } }

/* scroll-pause on hover removed — wall is non-interactive */

/* ═══ ICON TILE ═══ */
.icon-tile {
  position: relative; flex-shrink: 0;
  border-radius: 20%; overflow: visible;
  cursor: default;
}
/* Brand-colored ambient glow — always visible behind tile */
.icon-tile::before {
  content: ''; position: absolute; inset: -8px; border-radius: 30%;
  background: radial-gradient(circle at center, var(--glow) 0%, transparent 70%);
  filter: blur(10px); opacity: 0.55; z-index: 0;
  transition: opacity 0.4s ease, filter 0.4s ease;
  pointer-events: none;
}
/* hover effects removed — app wall is decorative only */
/* Card surface */
.tile-face {
  width: 100%; height: 100%; border-radius: 20%; overflow: hidden;
  position: relative; z-index: 1;
  background: #0b0e15;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 12px -3px rgba(0,0,0,0.5);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
/* tile hover removed — decorative only, no interaction */
/* Subtle top-light sheen */
.tile-face::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(168deg, rgba(255,255,255,0.05) 0%, transparent 35%);
  pointer-events: none; z-index: 2;
}
.tile-face img { width: 100%; height: 100%; object-fit: contain; padding: 22%; display: block; position: relative; z-index: 1; }

/* ═══ VIGNETTE ═══ */
.vignette {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 50% at 50% 47%, rgba(3,0,20,0.99) 0%, rgba(3,0,20,0.95) 35%, rgba(3,0,20,0.7) 55%, rgba(3,0,20,0.3) 75%, transparent 100%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(3,0,20,0.88) 100%),
    linear-gradient(to bottom, rgba(3,0,20,0.88) 0%, transparent 20%),
    linear-gradient(to top, rgba(3,0,20,0.9) 0%, transparent 24%);
}

/* ═══ NAV ═══ */
.gw-home-nav {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 24px); max-width: 1600px; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25rem; height: 52px;
  background: rgba(5,6,9,0.8);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--border-default);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.gw-corner { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.gw-corner img { width: 28px; height: 28px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
.gw-corner span { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; color: #ffffff; }
.gw-nav-right { display: flex; align-items: center; gap: 6px; }
.gw-nav-right a {
  font-size: 0.82rem; font-weight: 500; color: var(--text-secondary);
  text-decoration: none; padding: 6px 14px; transition: color 0.2s, background 0.2s;
}
.gw-nav-right a:hover { color: var(--text-bright); background: rgba(255,255,255,0.04); }
.gw-nav-right a.gw-nav-cta {
  color: #fff; background: var(--red-dark); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(220,38,38,0.25);
  transition: all 0.15s ease;
}
.gw-nav-right a.gw-nav-cta:hover { background: var(--red-deep); box-shadow: 0 4px 20px rgba(220,38,38,0.35); transform: translateY(-1px); }

/* Hamburger menu for mobile */
.gw-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 12px; margin-left: 4px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; flex-direction: column; }
.gw-hamburger span { display: block; width: 22px; height: 2px; background: var(--text-primary); margin: 3px 0; transition: all 0.3s; }
.gw-mobile-drawer { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; background: rgba(5,6,9,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; overscroll-behavior: contain; }
.gw-mobile-drawer.open { display: flex; }
.gw-mobile-drawer a { color: var(--text-primary); text-decoration: none; font-size: 1.2rem; font-weight: 500; padding: 0.5rem 1rem; transition: color 0.2s; }
.gw-mobile-drawer a:hover { color: var(--red); }
.gw-mobile-drawer a.gw-nav-cta { background: var(--red-dark); color: #fff; font-weight: 700; font-size: 0.9rem; padding: 12px 28px; margin-top: 1rem; text-transform: uppercase; letter-spacing: 0.5px; }
.gw-drawer-close { position: absolute; top: 16px; right: 16px; background: none; border: none; cursor: pointer; padding: 8px; }
.gw-drawer-close svg { width: 24px; height: 24px; stroke: var(--text-primary); stroke-width: 2; }

/* ═══ CENTER CONTENT ═══ */
.center-wrap {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  /* Reserve top clearance for the fixed .gw-home-nav (top:10px + 52px height + breathing room)
     and bottom clearance for .bottom-brand (abs-positioned at bottom:16px) */
  padding: 82px 20px 56px; pointer-events: none;
}
.center-wrap > * { pointer-events: auto; }
.text-zone { position: relative; max-width: 560px; width: 100%; text-align: center; }
/* Localized radial scrim that sits directly behind the hero copy so the
   animated app-wall doesn't compete with headline legibility. */
.text-zone::before {
  content: ''; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 130%; height: 150%;
  background: radial-gradient(ellipse at center,
    rgba(3,0,20,0.65) 0%,
    rgba(3,0,20,0.4) 40%,
    rgba(3,0,20,0.12) 65%,
    transparent 85%);
  z-index: -1; pointer-events: none;
}

/* ═══ BREACH BADGE ═══ */
.breach-counter {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(239,68,68,0.2);
  padding: 6px 16px; margin-bottom: 18px;
  font-size: 0.78rem; color: rgba(255,255,255,0.85); font-weight: 500;
  letter-spacing: 0.3px;
  border-radius: var(--gw-r-sm);
  text-shadow: 0 2px 6px rgba(0,0,0,0.95);
}
.bc-dot { position: relative; display: inline-flex; width: 8px; height: 8px; }
.bc-dot::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--gw-c-success-400); opacity: 0.6;
  /* WS12.141 — bcPing disabled. Only fired on Variant A which is now non-canonical. */
  animation: none;
}
.bc-dot::after {
  content: ''; position: relative; display: inline-flex; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gw-c-success-400);
}
@keyframes bcPing { 0% { transform: scale(1); opacity: 0.6; } 75%, 100% { transform: scale(2.2); opacity: 0; } }
.bc-num { font-weight: 700; color: #fff; font-family: var(--mono); }

/* ═══ HEADLINE — aggressive ad copy ═══ */
.headline {
  font-size: clamp(1.5rem, 5vw, 2.8rem);
  font-weight: 800; line-height: 1.12;
  margin-bottom: 16px; letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.95), 0 4px 14px rgba(0,0,0,0.7);
}
.headline em {
  font-style: normal; background: var(--red-dark);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; text-shadow: none; filter: none;
}

.subline {
  font-size: clamp(0.82rem, 1.55vw, 0.98rem);
  color: rgba(255,255,255,0.95);
  max-width: 460px; margin: 0 auto 12px;
  line-height: 1.6; font-weight: 500;
  text-shadow: 0 2px 6px rgba(0,0,0,0.95), 0 4px 12px rgba(0,0,0,0.7);
}
.subline strong { color: #fff; font-weight: 700; }

/* Platform bar */
.platform-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 14px; opacity: 0.65;
}
.platform-bar .pb-label { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-right: 2px; }
.platform-bar .pb-name { font-size: 0.75rem; color: rgba(255,255,255,0.8); font-weight: 600; }
.platform-bar .pb-sep { color: rgba(255,255,255,0.55); font-size: 0.5rem; padding: 0 2px; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }

/* Pricing context badge */
.pricing-ctx {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.15);
  padding: 8px 16px; margin-bottom: 16px; font-size: .78rem; color: var(--text-muted);
  border-radius: var(--gw-r-sm);
}
.pricing-ctx strong { color: #e0e7ff; }

/* ═══ SEARCH BAR ═══ */
.search-bar { width: 100%; max-width: 480px; margin: 0 auto; }
.search-wrap {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: rgba(8,9,15,0.9);
  border: 1px solid var(--border-default);
  backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: 0 4px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 6px;
  transition: border-color 0.3s, box-shadow 0.3s;
  /* WS12.142e — was 2-corner asymmetric chamfer; switched to symmetric 4-corner octagon. */
  border-radius: 999px;
}
.search-wrap:focus-within {
  border-color: rgba(125, 211, 252, 0.55);
  box-shadow: 0 4px 30px rgba(0,0,0,0.4), 0 0 40px rgba(34,211,238,0.12);
}
.search-input {
  flex: 1; min-width: 0;
  padding: 14px 16px;
  background: transparent; border: none;
  color: var(--text-bright);
  /* 16px prevents iOS Safari auto-zoom on focus; text-size-adjust locks it down across platforms */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  font-family: var(--font); font-weight: 400; outline: none;
}
.search-input::placeholder { color: rgba(203,213,225,0.55); font-weight: 400; }

.stakes-ticker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 1rem auto 0.3rem;
  max-width: 640px;
}
.stake-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.22);
  border-radius: var(--gw-r-full);
  font-size: 0.65rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.stake-chip strong {
  color: var(--red);
  font-family: var(--gw-ff-mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: -0.02em;
}
.stake-chip span {
  color: var(--text-muted);
  font-weight: 500;
}
@media (max-width: 600px) {
  .stake-chip { font-size: 0.58rem; padding: 0.28rem 0.5rem; }
  .stake-chip strong { font-size: 0.66rem; }
}
/* Skeleton loader rows for scan reveal */
.scan-skel-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.75rem; margin-bottom: 0.4rem;
  background: rgba(15,23,42,0.5); border-radius: var(--gw-r-sm);
}
.scan-skel-bar {
  height: 10px; border-radius: var(--gw-r-sm);
  background: linear-gradient(90deg,
    rgba(148,163,184,0.08) 0%,
    rgba(239,68,68,0.18) 50%,
    rgba(148,163,184,0.08) 100%);
  background-size: 200% 100%;
  /* WS12.141 — scanShimmer disabled. Animation noise on non-CTA element. */
  animation: none;
}
@keyframes scanShimmer { 0%{background-position:200% 0}100%{background-position:-200% 0} }

/* WS10.155: refined hero scan CTA — 5-stop gradient with hue shift, layered shadow,
   inset highlight + bottom shade, hover lift with brightness/saturation, active press. */
.search-go {
  /* WS12.142e — galaxy gradient (cyan->indigo->violet) + cyan glow halo, matches
     'warden' brand keyword brightness. Symmetric octagon clip-path (all 4 corners). */
  flex-shrink: 0; white-space: nowrap;
  padding: 14px 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.14) 100%),
    linear-gradient(135deg, #0891b2 0%, #2563eb 100%);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-size: 0.86rem; font-weight: 800;
  letter-spacing: -0.005em; cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.7,.2,1),
              filter .22s ease,
              box-shadow .25s cubic-bezier(.2,.7,.2,1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 2px 4px rgba(0,0,0,.30),
    0 6px 18px rgba(8,145,178,.32),
    0 12px 36px rgba(37,99,235,.18);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  border-radius: 999px;
}
.search-go:hover {
  transform: translateY(-1px);
  filter: brightness(1.08) saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 4px 8px rgba(0,0,0,.28),
    0 10px 28px rgba(8,145,178,.45),
    0 18px 52px rgba(37,99,235,.28);
}
.search-go:active {
  transform: translateY(0) scale(.985);
  filter: brightness(.95);
  transition-duration: .06s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 1px 2px rgba(0,0,0,.28),
    0 3px 10px rgba(34,211,238,.32);
}
.search-go:focus-visible {
  outline: 2px solid rgba(165,180,252,.9);
  outline-offset: 3px;
}

/* WS10.155: refined search-wrap (form container) with soft glow on focus-within */
.search-wrap {
  transition: border-color .35s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s cubic-bezier(.2,.7,.2,1) !important;
}
.search-wrap:focus-within {
  border-color: rgba(99,102,241,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 3px rgba(99,102,241,.18),
    0 16px 50px rgba(99,102,241,.18) !important;
}
.search-input {
  transition: color .2s ease;
}

/* Consent */
.consent-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 0 0;
  font-size: 0.72rem; color: rgba(255,255,255,0.55);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.consent-row input { width: 14px; height: 14px; accent-color: var(--red); cursor: pointer; }
.consent-row a { color: rgba(239,68,68,0.5); text-decoration: none; }

/* Trust dots */
.trust-dots {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 16px; margin-top: 14px;
  font-size: 0.72rem; color: rgba(255,255,255,0.55);
  text-shadow: 0 2px 4px rgba(0,0,0,1);
}
.trust-dots span { display: flex; align-items: center; gap: 4px; }
.trust-dots .dot { color: var(--gw-c-success-400); }

/* ═══ BOTTOM BRAND ═══ */
.bottom-brand {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 20; display: flex; align-items: center; gap: 8px;
  background: rgba(5,6,9,0.85); padding: 6px 14px; border-radius: var(--gw-r-full);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.04);
}
.bottom-brand img { width: 18px; height: 18px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
.bottom-brand span { font-size: 0.6rem; color: rgba(255,255,255,0.7); text-shadow: 0 1px 4px rgba(0,0,0,0.95); letter-spacing: 0.5px; }

/* ═══ PAGE-LEVEL COSMOS (behind below-fold sections) ═══ */
.gw-page-cosmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0.7; }
.gw-page-cosmos canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gw-page-cosmos-nebula {
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 500px at 15% 25%, rgba(127,29,29,0.10) 0%, transparent 70%),
    radial-gradient(700px 600px at 80% 65%, rgba(30,58,138,0.07) 0%, transparent 60%),
    radial-gradient(600px 400px at 45% 85%, rgba(88,28,135,0.06) 0%, transparent 65%),
    radial-gradient(500px 500px at 60% 10%, rgba(239,68,68,0.04) 0%, transparent 55%);
  animation: gw-page-nebula-shift 180s ease-in-out infinite alternate;
}
@keyframes gw-page-nebula-shift {
  0% { opacity: 1; transform: scale(1) translate(0%, 0%); }
  50% { opacity: 0.7; transform: scale(1.03) translate(0.5%, -0.5%); }
  100% { opacity: 1; transform: scale(1) translate(-0.5%, 0.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .gw-page-cosmos-nebula { animation: none !important; }
}

/* ═══════════════════════════════════════════════
   BELOW-FOLD SECTIONS
   ═══════════════════════════════════════════════ */

.section {
  position: relative;
  z-index: 2;
  padding: 80px 20px;
  background: transparent;
  display: flex; flex-direction: column;
  align-items: center;
}

/* Subtle grid texture */
.section::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(239,68,68,0.06) 1px, transparent 1px);
  background-size: 32px 32px; pointer-events: none;
}

.section-inner {
  position: relative; z-index: 2;
  max-width: 960px; width: 100%;
}

.section-label {
  text-align: center; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 3px; color: var(--red); margin-bottom: 12px; font-weight: 600;
  display: inline-block; position: relative;
  padding: 8px 24px;
  border: 1px solid transparent;
  transition: border-color 0.6s ease, box-shadow 0.6s ease, background 0.6s ease;
}
/* Center the inline-block label */
.section-inner > .section-label {
  display: block; width: fit-content; margin-left: auto; margin-right: auto; margin-bottom: 12px;
}
/* Circuit box — draws border on scroll activation via SVG stroke animation */
.gw-chain-ready .section[data-chain] .section-label {
  border-color: transparent;
  box-shadow: none;
}
/* The border is drawn by an SVG rect inside .label-border (see JS) */
.label-border {
  position: absolute; inset: -1px; pointer-events: none; z-index: 1;
}
.label-border rect {
  fill: none;
  stroke: rgba(239,68,68,0.6);
  stroke-width: 1.5;
  stroke-dasharray: var(--perim);
  stroke-dashoffset: var(--perim);
  transition: none;
}
.gw-chain-ready .section[data-chain].gw-active .label-border rect {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s cubic-bezier(.22,1,.36,1);
}
.gw-chain-ready .section[data-chain].gw-settled .label-border rect {
  stroke: rgba(239,68,68,0.25);
  transition: stroke 1s ease 0.2s;
}
/* Glow behind the label on activation */
.gw-chain-ready .section[data-chain].gw-active .section-label {
  box-shadow: 0 0 12px rgba(239,68,68,0.12), 0 0 30px rgba(239,68,68,0.05);
}
.gw-chain-ready .section[data-chain].gw-settled .section-label {
  box-shadow: 0 0 6px rgba(239,68,68,0.05);
  transition: box-shadow 1.2s ease 0.3s;
}
/* Corner notch decoration on the label box */
.section-label::before, .section-label::after {
  content: ''; position: absolute; width: 6px; height: 6px;
  border-color: var(--red); transition: opacity 0.5s ease 0.6s;
  opacity: 0;
}
.section-label::before {
  top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid;
}
.section-label::after {
  bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid;
}
.gw-chain-ready .section[data-chain].gw-active .section-label::before,
.gw-chain-ready .section[data-chain].gw-active .section-label::after {
  opacity: 1;
}
.section-title {
  font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 800; color: #fff;
  margin-bottom: 12px; text-align: center; line-height: 1.2;
  /* WS12.135 — readability shadow over starfield */
  text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.95);
}
.section-title em { font-style: normal; color: var(--red); }
.section-sub {
  /* WS12.135 — was rgba(255,255,255,0.45) — too dim on starfield. Bumped to 0.78
     and added text-shadow so paragraphs stay readable over star/grid layers. */
  text-align: center; color: rgba(255,255,255,0.78); font-size: 0.9rem;
  margin-bottom: 48px; max-width: 520px; margin-left: auto; margin-right: auto;
  line-height: 1.6;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85);
}

/* ═══ STATS ROW ═══ */
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  max-width: 800px; width: 100%;
}
.stat-card {
  /* WS12.135 — was 0.03 white + 4px blur. Bumped to 0.07 white + 12px blur +
     subtle inset highlight so stat numbers stay legible over the starfield. */
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(239, 68, 68, 0.20);
  padding: var(--gw-sp-7) var(--gw-sp-6); text-align: center;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  border-radius: 999px;
}
.stat-num {
  font-size: 1.8rem; font-weight: 800; line-height: 1;
  margin-bottom: 6px; color: #fff;
  /* WS12.135 — text-shadow keeps the big stat numbers crisp over starfield */
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}
.stat-num.red { color: var(--red); }
.stat-num.green { color: var(--gw-c-success-400); }
.stat-label {
  color: var(--gw-c-text-dim); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.5px; line-height: 1.3;
}

/* ═══ TESTIMONIALS ═══ */
.testimonials {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.testimonial-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(239, 68, 68, 0.12);
  padding: var(--gw-sp-7) var(--gw-sp-6);
  border-radius: 22px;
}
.testimonial-card .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.75rem; font-weight: 700;
  margin-bottom: 12px;
}
.testimonial-card .quote {
  color: #e0e7ff; font-size: 0.82rem; line-height: 1.6;
  font-style: italic; margin-bottom: 12px;
}
.testimonial-card .author {
  color: var(--gw-c-text-dim); font-size: 0.68rem; font-weight: 500;
}

/* ═══ HOW IT WORKS — STEPS ═══ */
.steps-grid { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.step-card {
  flex: 1; min-width: 260px; max-width: 340px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(239, 68, 68, 0.12);
  padding: var(--gw-sp-7) var(--gw-sp-6); text-align: center;
  position: relative; overflow: hidden;
  border-radius: 22px;
}
.step-card .top-line {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}
.step-num {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.05));
  border: 1px solid rgba(239,68,68,0.25);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; font-size: 1.3rem; color: var(--red); font-weight: 800;
  border-radius: 999px;
}
.step-card h3 { color: var(--text-bright); font-size: 1.05rem; margin-bottom: 8px; font-weight: 700; }
.step-card p { color: rgba(255,255,255,0.5); font-size: 0.82rem; line-height: 1.6; }

/* ═══ COMPARISON TABLE ═══ */
.compare-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  max-width: 800px; width: 100%;
}
.compare-col {
  padding: 28px 24px;
  border-radius: 22px;
}
.compare-old {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  opacity: 0.7;
}
.compare-new {
  background: rgba(239,68,68,0.04);
  border: 1px solid rgba(239,68,68,0.2);
  box-shadow: 0 0 40px rgba(239,68,68,0.06);
}
.compare-label {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.compare-old .compare-label { color: var(--gw-c-text-dim); }
.compare-new .compare-label { color: var(--red); }
.compare-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; font-size: 0.82rem; color: rgba(255,255,255,0.7);
}
.compare-item .icon-x { color: var(--gw-c-text-ghost); font-size: 1.1rem; font-weight: 700; width: 20px; text-align: center; }
.compare-item .icon-check { color: var(--red); font-size: 0.9rem; font-weight: 700; width: 20px; text-align: center; }

/* ═══ REVEALS GRID ═══ */
.reveals-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: 700px; width: 100%;
}
.reveal-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
}
.reveal-item svg { flex-shrink: 0; margin-top: 2px; }
.reveal-item h4 { color: #e0e7ff; font-size: 0.82rem; font-weight: 600; margin-bottom: 4px; }
.reveal-item p { color: var(--gw-c-text-dim); font-size: 0.78rem; line-height: 1.4; }

/* ═══ TRUST SECTION ═══ */
.trust-cards { display: flex; flex-direction: column; gap: 16px; max-width: 700px; width: 100%; }
.trust-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 24px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
}
.trust-icon {
  width: 36px; height: 36px; min-width: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
}
.trust-item h4 { color: #e0e7ff; font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; }
.trust-item p { color: var(--gw-c-text-dim); font-size: 0.75rem; line-height: 1.5; }

/* ═══ PRICING CARDS ═══ */
.pricing-grid {
  display: flex; gap: 16px; flex-wrap: wrap;
  justify-content: center; align-items: stretch;
}
.price-card {
  /* WS12.190 — definitive card shape: rectangular with rounded 20px corners,
     no clip-path, no oval-creating glow. */
  flex: 1; min-width: 250px; max-width: 340px;
  background: rgba(15,23,41,0.55);
  border: 1px solid rgba(148,163,184,0.16);
  padding: 28px 22px; text-align: center;
  display: flex; flex-direction: column;
  border-radius: 20px;
  clip-path: none;
  box-shadow: 0 4px 18px rgba(0,0,0,0.3);
}
.price-card.popular {
  /* WS12.99 — added position: relative so the absolute .popular-badge
     anchors to this card, not a distant ancestor.
     WS12.190 — tightened glow that read as an oval halo around the card. */
  position: relative;
  background: linear-gradient(180deg, rgba(239,68,68,0.08), rgba(239,68,68,0.02));
  border-color: rgba(239,68,68,0.4);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  padding-top: 42px; /* room for the in-card "Most Popular" badge */
}
.price-tier {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 2.5px;
  margin-bottom: 10px; font-weight: 600;
}
.price-amount {
  font-size: 2.2rem; font-weight: 800; color: #fff; margin-bottom: 4px;
}
.price-amount .per { font-size: 0.9rem; color: rgba(255,255,255,0.65); font-weight: 400; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.price-desc { color: rgba(255,255,255,0.72); font-size: 0.78rem; margin-bottom: 20px; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.price-features { flex: 1; list-style: none; }
.price-features li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.82rem; color: rgba(255,255,255,0.55);
}
.price-features li .check { font-size: 0.85rem; }
.price-cta {
  display: block; padding: 13px; text-decoration: none;
  font-weight: 600; font-size: 0.88rem; margin-top: 20px;
  text-align: center; transition: all 0.2s;
  border-radius: 999px;
}

/* Popular badge */
.popular-badge {
  /* WS12.99 — clip-path was 6-vertex asymmetric (only 2 corners cut),
     creating a "broken/cut off" look. Now full 8-vertex octagon to match
     the rest of the cyber-card system. */
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.4);
  color: #fff; padding: 4px 18px; font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; white-space: nowrap;
  border-radius: 999px;
}

/* ═══ FAQ ═══ */
.faq-list { max-width: 700px; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  padding: 20px 24px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
}
.faq-item summary {
  color: #e0e7ff; font-size: 0.88rem; font-weight: 600;
  cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-answer {
  /* WS12.98 — was text-dim (#64748b) which is design system's "tertiary/
     deprecated" token; too low contrast for body answers. Bumped to
     text-secondary (#cbd5e1) and slightly larger size for readability. */
  color: var(--gw-c-text-secondary); font-size: 0.86rem; line-height: 1.65;
  margin-top: 12px;
}

/* ═══ BOTTOM CTA ═══ */
.bottom-cta-section {
  position: relative; z-index: 2; padding: 80px 20px;
  background: transparent;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.bottom-cta-section::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(239,68,68,0.06), transparent 70%);
  pointer-events: none;
}

/* ═══ FOOTER ═══ */
.site-footer {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: transparent; padding: 48px 20px 32px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.site-footer img { width: 36px; height: 36px; margin-bottom: 14px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6)); }
.site-footer .copy { color: rgba(255,255,255,0.7); font-size: 0.78rem; margin-bottom: 14px; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.site-footer .links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.site-footer .links a { color: rgba(203,213,225,0.75); font-size: 0.72rem; text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.site-footer .legal { color: rgba(255,255,255,0.55); font-size: 0.65rem; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

/* ═══════════════════════════════════════════════
   SCROLL CHAIN ACTIVATION SYSTEM
   ═══════════════════════════════════════════════ */

/* --- Section background glow (subtle radial pulse on activation) --- */
.section[data-chain] {
  position: relative;
}
.section[data-chain]::before {
  content: ''; position: absolute;
  top: 50%; left: 50%; width: 80%; height: 80%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(239,68,68,0.04) 0%, transparent 70%);
  opacity: 0; transition: opacity 0.8s ease;
  pointer-events: none; z-index: 0;
}
.gw-chain-ready .section[data-chain].gw-active::before {
  opacity: 1;
}
.gw-chain-ready .section[data-chain].gw-settled::before {
  opacity: 0.4;
  transition: opacity 1.5s ease 0.4s;
}

/* --- Dimmed state (JS adds .gw-chain-ready to <body> first) ---
   Content is VISIBLE by default. Only hidden once JS confirms it can animate. */
.gw-chain-ready .section[data-chain] .section-inner {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1);
}
.gw-chain-ready .section[data-chain].gw-active .section-inner {
  opacity: 1;
  transform: translateY(0);
}

/* --- Card-level stagger (children inside grids) --- */
.gw-chain-ready .section[data-chain] .stat-card,
.gw-chain-ready .section[data-chain] .testimonial-card,
.gw-chain-ready .section[data-chain] .step-card,
.gw-chain-ready .section[data-chain] .compare-col,
.gw-chain-ready .section[data-chain] .reveal-item,
.gw-chain-ready .section[data-chain] .trust-item,
.gw-chain-ready .section[data-chain] .price-card,
.gw-chain-ready .section[data-chain] .faq-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s cubic-bezier(.22,1,.36,1), transform 0.5s cubic-bezier(.22,1,.36,1),
              border-color 0.6s ease, box-shadow 0.6s ease;
}
.gw-chain-ready .section[data-chain].gw-active .stat-card,
.gw-chain-ready .section[data-chain].gw-active .testimonial-card,
.gw-chain-ready .section[data-chain].gw-active .step-card,
.gw-chain-ready .section[data-chain].gw-active .compare-col,
.gw-chain-ready .section[data-chain].gw-active .reveal-item,
.gw-chain-ready .section[data-chain].gw-active .trust-item,
.gw-chain-ready .section[data-chain].gw-active .price-card,
.gw-chain-ready .section[data-chain].gw-active .faq-item {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays — set via JS inline style for flexibility */

/* --- Activation border pulse (brief glow on entry) --- */
.gw-chain-ready .section[data-chain].gw-active .stat-card,
.gw-chain-ready .section[data-chain].gw-active .step-card,
.gw-chain-ready .section[data-chain].gw-active .reveal-item,
.gw-chain-ready .section[data-chain].gw-active .testimonial-card {
  border-color: rgba(239,68,68,0.3);
  box-shadow: 0 0 20px rgba(239,68,68,0.06), inset 0 0 12px rgba(239,68,68,0.03);
}
/* Settle border back to resting state after pulse */
.gw-chain-ready .section[data-chain].gw-settled .stat-card,
.gw-chain-ready .section[data-chain].gw-settled .step-card,
.gw-chain-ready .section[data-chain].gw-settled .reveal-item,
.gw-chain-ready .section[data-chain].gw-settled .testimonial-card {
  border-color: rgba(239,68,68,0.12);
  box-shadow: none;
  transition: border-color 1.2s ease 0.3s, box-shadow 1.2s ease 0.3s, opacity 0.5s, transform 0.5s;
}

/* --- Energy conduit (vertical line between sections) --- */
.gw-chain-line {
  position: fixed;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.gw-chain-line.visible { opacity: 1; }
.gw-chain-line-inner {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(239,68,68,0.06) 15%,
    rgba(239,68,68,0.12) 45%,
    rgba(239,68,68,0.12) 55%,
    rgba(239,68,68,0.06) 85%,
    transparent 100%
  );
  box-shadow: 0 0 6px rgba(239,68,68,0.1);
}
/* Scroll-tracking glow dot on the line */
.gw-chain-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  background: rgba(239,68,68,0.7);
  box-shadow: 0 0 10px rgba(239,68,68,0.4), 0 0 24px rgba(239,68,68,0.15);
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Circuit node dots — positioned at each section-label by JS */
.gw-circuit-node {
  position: absolute;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(239,68,68,0.0);
  border: 1px solid rgba(239,68,68,0.0);
  pointer-events: none;
  z-index: 2;
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.gw-circuit-node {
  position: relative;
}
.gw-circuit-node::after {
  content: ''; position: absolute; inset: -18px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(239,68,68,0.45) 0%, rgba(239,68,68,0.15) 40%, transparent 70%);
  opacity: 0; transform: scale(0.85);
  transition: opacity 1s ease 0.3s, transform 1s ease 0.3s;
  will-change: opacity, transform;
}
.gw-circuit-node.gw-node-active {
  background: rgba(239,68,68,0.8);
  border-color: rgba(239,68,68,0.6);
}
.gw-circuit-node.gw-node-active::after {
  opacity: 1; transform: scale(1);
  animation: gw-node-pulse 1.2s ease-in-out 1;
}
.gw-circuit-node.gw-node-settled {
  background: transparent;
  border-color: transparent;
  transition: background 1s ease 0.3s, border-color 1s ease 0.3s;
}
@keyframes gw-node-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.8; transform: scale(1.18); }
}

/* Bottom CTA also participates */
.gw-chain-ready .bottom-cta-section[data-chain] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(.22,1,.36,1), transform 0.6s cubic-bezier(.22,1,.36,1);
}
.gw-chain-ready .bottom-cta-section[data-chain].gw-active > * {
  opacity: 1;
  transform: translateY(0);
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .icon-row.scroll-right, .icon-row.scroll-left { animation: none; }
  .nebula { animation: none; }
  .gw-chain-ready .section[data-chain] .section-inner,
  .gw-chain-ready .section[data-chain] .stat-card,
  .gw-chain-ready .section[data-chain] .testimonial-card,
  .gw-chain-ready .section[data-chain] .step-card,
  .gw-chain-ready .section[data-chain] .compare-col,
  .gw-chain-ready .section[data-chain] .reveal-item,
  .gw-chain-ready .section[data-chain] .trust-item,
  .gw-chain-ready .section[data-chain] .price-card,
  .gw-chain-ready .section[data-chain] .faq-item,
  .gw-chain-ready .bottom-cta-section[data-chain] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .gw-chain-line, .gw-circuit-node { display: none; }
}

/* ═══ MOBILE ═══ */
@media (max-width: 768px) {
  /* WS10.56 (A0 Part 1) — kill the animated app-wall on mobile.
     Root cause of hero chaos: 3D-perspective scrolling logo rows + the
     existing .vignette ellipse only covers ~240×360px, so the H1 ends up
     superimposed on Epic Games / Steam / Discord tiles. Replace the whole
     decorative layer with a static dark gradient so the headline lands on
     a clean background. Re-enable above 768px where vignette geometry
     actually contains the wall. */
  .icon-rows-wrap { display: none !important; }
  .vignette { display: none !important; }
  .hero {
    background:
      radial-gradient(ellipse at top, #0d1018 0%, #050709 70%),
      var(--bg);
  }
  /* Drop the localized scrim too — without the wall behind it, it just
     darkens the area around the headline for no reason. */
  .text-zone::before { display: none; }

  /* WS10.56 (A0 Part 2) — strip the hero above the search input to
     ~5 essential elements: logo + tagline, H1, subline, search+CTA, trust dots.
     Everything else gets surfaced lower in the page where it has room to breathe.
     Targets the noise stack identified in the screenshot triage. */
  .breach-counter { display: none !important; }       /* 15B+ already in trust-dots + threat section */
  .hero-trust-pills { display: none !important; }      /* Fortune 500 + 4,400 users — re-shown in trust-dots; defeats inline display:flex */
  .stakes-ticker { display: none !important; }         /* 4 dollar chips reappear in threat-landscape section */
  .platform-bar { display: none !important; }          /* "Scanning 100+ platforms" — moves into trust-dots line */
  .hero-demo { display: none !important; }             /* sample report figure — defer until below-fold reveal */

  /* WS10.56 (A0 Part 3) — collapse the 6-chip trust-dots row into a single
     horizontal scroll strip so it reads as one tidy line under the CTA
     instead of a 6-row vertical wall. Touch-momentum scrolling, no
     scrollbar chrome. Edge-fade hint via mask-image on iOS-friendly
     property names. */
  .trust-dots {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 4px 4px;
    margin: 0.85rem -16px 0;        /* bleed to viewport edges */
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .trust-dots::-webkit-scrollbar { display: none; }
  .trust-dots > span {
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  /* Drop duplicate / verbose chips on mobile:
     - chip 4 ("HIBP + DeHashed + proprietary feeds") — too long for a pill, surfaces below-fold
     - chip 5 ("Cancel anytime") — redundant with chip 1 ("30-day money-back")
     Result: 4 chips on the horizontal strip — 30-day, no-card, 15B+, 8-years-F500. */
  .trust-dots > span:nth-child(4),
  .trust-dots > span:nth-child(5) { display: none !important; }

  /* Hide energy line on mobile — too narrow, cards do the work */
  .gw-chain-line, .gw-circuit-node { display: none; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
  .reveals-grid { grid-template-columns: 1fr; }
  .pricing-grid { flex-direction: column; align-items: center; }
  .price-card { max-width: 100%; }
}
@media (max-width: 640px) {
  .section-title { font-size: 1.5rem; }
  .section-sub { font-size: 0.78rem; }
  .stat-card { padding: 16px 12px; }
  .stat-num { font-size: 1.5rem; }
  .stat-label { font-size: 0.65rem; }
  .testimonial-card { padding: 18px; }
  .testimonial-card .quote { font-size: 0.78rem; }
  .step-card { min-width: 100%; padding: 22px 18px; }
  .step-card h3 { font-size: 0.95rem; }
  .step-card p { font-size: 0.78rem; }
  .compare-col { padding: 20px 16px; }
  .compare-item { font-size: 0.78rem; padding: 8px 0; }
  .reveal-item { padding: 16px; }
  .trust-item { padding: 16px; }
  .faq-item summary { font-size: 0.85rem; padding: 14px 16px; }
  .faq-item .faq-answer { font-size: 0.78rem; padding: 0 16px 14px; }
}
@media (max-width: 600px) {
  .icon-rows-wrap { gap: 10px; }
  .icon-rows-inner { gap: 10px; }
  .icon-row { gap: 10px; }
  .headline { font-size: 1.4rem; margin-bottom: 10px; }
  .subline { font-size: 0.76rem; margin-bottom: 16px; }
  .search-go { padding: 12px 16px; font-size: 0.72rem; }
  .gw-corner span { display: none; }
  .gw-nav-right > a { display: none !important; }
  .gw-hamburger { display: flex; }
  .vignette {
    background:
      radial-gradient(ellipse 65% 55% at 50% 47%, rgba(3,0,20,0.99) 0%, rgba(3,0,20,0.88) 38%, rgba(3,0,20,0.4) 65%, transparent 100%),
      radial-gradient(ellipse 100% 100% at 50% 50%, transparent 20%, rgba(3,0,20,0.96) 100%),
      linear-gradient(to bottom, rgba(3,0,20,0.92) 0%, transparent 22%),
      linear-gradient(to top, rgba(3,0,20,0.95) 0%, transparent 28%);
  }
  .section { padding: 60px 16px; }
  .stat-num { font-size: 1.4rem; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .steps-grid { gap: 12px; }
  .step-card { min-width: 100%; }
}
@media (max-width: 480px) {
  .headline { font-size: 1.2rem; }
  .subline { font-size: 0.7rem; padding: 0 8px; }
  .section { padding: 48px 12px; }
  .section-title { font-size: 1.3rem; }
  .section-sub { font-size: 0.72rem; padding: 0 4px; }
  .stat-card { padding: 14px 10px; }
  .stat-num { font-size: 1.2rem; }
  .stat-label { font-size: 0.6rem; }
  .testimonial-card { padding: 16px; }
  .testimonial-card .quote { font-size: 0.74rem; line-height: 1.5; }
  .step-num { width: 42px; height: 42px; font-size: 1.1rem; }
  .compare-col { padding: 16px 12px; }
  .faq-item summary { font-size: 0.8rem; padding: 12px 14px; }
  .search-go { padding: 10px 14px; font-size: 0.68rem; }
}

/* ═══════════════════════════════════════════════
   WS10.28 — Mobile hero + scan UX polish
   (task #89, 2026-04-17)
   ═══════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* 1. Stack search input + CTA vertically on narrow screens.
        Row layout truncates "Run My Free DoxxScan" on phones ≤ 380px wide. */
  .search-wrap {
    flex-direction: column;
    gap: 6px;
    padding: 6px;
  }
  .search-input {
    width: 100%;
    padding: 13px 14px;
    text-align: left;               /* left-align — easier to track cursor while typing */
  }
  .search-go {
    width: 100%;
    min-height: 48px;                /* WCAG 2.5.5 thumb-friendly tap target */
    padding: 14px 18px;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
  }

  /* 2. Tighten hero top padding — nav collapses to hamburger at this width
        so we don't need 82px of clearance. */
  .center-wrap { padding: 64px 16px 24px; }

  /* 3. Platform-bar: hide the lower-priority platforms to reclaim ~30px
        of vertical space above the scan CTA. */
  .platform-bar .pb-name:nth-of-type(n+6),
  .platform-bar .pb-sep:nth-of-type(n+5) { display: none; }

  /* 4. Hide the pricing-context badge on small phones — redundant with
        trust-dots "No card required" chip, and it eats CTA real estate. */
  .pricing-ctx { display: none; }

  /* 5. Consent microcopy — tighten on mobile (was 0.68rem). */
  .consent-note { font-size: 0.62rem; line-height: 1.45; margin-top: 0.4rem; }

  /* 6. Drawer CTA gets safe-area padding for iPhone home-indicator. */
  .gw-mobile-drawer { padding-bottom: env(safe-area-inset-bottom); }
  .gw-drawer-close { top: calc(16px + env(safe-area-inset-top)); }
}

@media (max-width: 480px) {
  /* Don't force a 700px floor on small phones — causes internal scroll/dead
     space on iPhone SE-class devices (568px tall in landscape). */
  .hero { min-height: auto; height: 100svh; }
  .search-go { font-size: 0.8rem; padding: 14px 18px; min-height: 48px; }
  .trust-dots { gap: 6px 8px; margin-top: 10px; }
  .trust-dots span { font-size: 0.68rem; padding: 0.26rem 0.55rem; }
  /* Hide the "Scanning 100+ platforms:" label on the tightest phones —
     the platform names themselves make the point. */
  .platform-bar .pb-label { display: none; }
}

/* Landscape phones (Pro Max width, short height): reclaim vertical space by
   suppressing the stakes ticker — the headline + scan CTA must fit. */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  .stakes-ticker, .platform-bar, .pricing-ctx, .hero-demo { display: none; }
  .center-wrap { padding: 58px 16px 18px; }
  .hero { min-height: auto; }
}

/* ═══ WS10.35: Mobile sticky-footer CTA — homepage parity with shared nav ═══
   The homepage uses .center-wrap layout, which the shared WS10.34 rules treat as
   an opt-out. Since the shared CSS isn't loaded on the homepage anyway, we
   redeclare the rules here scoped to the homepage only. */
.gw-mobile-cta { display: none; }
@media (max-width: 600px) {
  .gw-mobile-cta {
    display: flex;
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 95;
    align-items: center; justify-content: center; gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--red-dark), var(--red));
    color: #fff;
    font-weight: 800; font-size: 0.82rem; letter-spacing: 0.06em;
    text-transform: uppercase; text-decoration: none;
    border-radius: var(--gw-r-md);
    box-shadow: 0 8px 28px rgba(220,38,38,0.45), 0 2px 8px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.12);
    animation: gwMobileCtaIn 0.4s ease-out 0.3s both;
  }
  .gw-mobile-cta::after { content: ' →'; font-size: 1.05rem; margin-left: 2px; }
  @keyframes gwMobileCtaIn { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  /* Reserve bottom space so the sticky CTA doesn't cover footer content. */
  .site-footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 78px); }
}
      /* WS10.42 mobile collapse for dashboard preview */
      @media (max-width: 720px) {
        .gw-dashboard-preview-body { grid-template-columns: 1fr !important; gap: 1rem !important; }
        .gw-dashboard-preview-score { flex-direction: row !important; align-items: center !important; gap: 1rem !important; }
        .gw-dashboard-preview-score > div:last-child { text-align: left !important; }
      }
      .gw-pw-reveal { font-family: var(--gw-ff-mono); }
      .gw-pw-blur { filter: blur(4px); user-select: none; -webkit-user-select: none; pointer-events: none; }
      .gw-exposed-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; background: rgba(15,5,10,0.6); border: 1px solid rgba(239,68,68,0.15); border-radius: var(--gw-r-sm); }
      .gw-exposed-row + .gw-exposed-row { margin-top: 0.3rem; }
      .gw-exposed-label { font-size: 0.55rem; color: var(--gw-c-text-dim); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; min-width: 65px; flex-shrink: 0; }
      .gw-exposed-val { font-size: 0.78rem; font-family: var(--gw-ff-mono); color: var(--gw-c-red-100); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .gw-exposed-val.blurred { filter: blur(3.5px); user-select: none; -webkit-user-select: none; color: var(--red); }
      .gw-badge-pt { font-size: 0.48rem; padding: 1px 5px; border-radius: var(--gw-r-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

@keyframes gwRaSpin { to { transform: rotate(360deg); } }
#gw-ra-flow button.gw-ra-opt { cursor:pointer;width:100%;text-align:left;padding:0.75rem 1rem;background:rgba(5,4,15,0.8);border:1px solid rgba(99,102,241,0.12);border-radius: var(--gw-r-md);color:var(--text-secondary);font-size:0.78rem;font-weight:500;line-height:1.4;transition:all 0.2s;-webkit-appearance:none;appearance:none; }
#gw-ra-flow button.gw-ra-opt:hover { border-color:var(--gw-c-purple-500); background:rgba(99,102,241,0.08); color:#e0e7ff; }

/* ═══ A4: Hero A/B test variant visibility ═══
   Before JS runs, all elements are visible (variant A default).
   JS sets data-hero-variant on #gwHeroWrap and toggles display. */
[data-hero-variant="b"] [data-hero-only="a"] { display: none !important; }
[data-hero-variant="a"] [data-hero-only="b"] { display: none !important; }
/* Variant B gets tighter vertical rhythm */
[data-hero-variant="b"] .headline { margin-top: 0.25rem; }
[data-hero-variant="b"] .subline { margin-bottom: 0.5rem; }
[data-hero-variant="b"] .search-bar { margin-top: 0.5rem; }

/* ═══════════════════════════════════════════════
   WS10.155 — desktop polish layer for homepage
   ═══════════════════════════════════════════════ */

/* Crisp display typography on the hero h1 */
.headline {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.02em !important;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1, "case" 1;
}
.subline {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.005em;
}

/* Refined top-nav CTA button — matches the .search-go treatment
   so the page has a consistent CTA visual language. */
.gw-nav-cta,
a.gw-nav-cta {
    background:
        linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.12) 100%),
        linear-gradient(135deg, var(--red) 0%, var(--red-dark) 35%, var(--red-deep) 65%, #7c3aed 100%) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 -1px 0 rgba(0,0,0,.18),
        0 1px 2px rgba(0,0,0,.25),
        0 4px 14px rgba(239,68,68,.32) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
    letter-spacing: -0.005em !important;
    transition: transform .16s cubic-bezier(.2,.7,.2,1),
                filter .22s ease,
                box-shadow .25s cubic-bezier(.2,.7,.2,1) !important;
}
.gw-nav-cta:hover,
a.gw-nav-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.06) saturate(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(0,0,0,.18),
        0 2px 4px rgba(0,0,0,.22),
        0 8px 22px rgba(239,68,68,.45) !important;
}
.gw-nav-cta:active,
a.gw-nav-cta:active {
    transform: translateY(0) scale(.985);
    filter: brightness(.98);
    transition-duration: .06s;
}

/* Subtle gradient hairline between hero and the next section
   (Brightdata-style separator instead of a hard rule) */
body > section:not(.hero) + section::before,
body > div + section::before,
body > section + section::before {
    content: '';
    display: block;
    width: min(420px, 60%);
    height: 1px;
    margin: 0 auto 2.5rem;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(148,163,184,.18) 30%,
        rgba(148,163,184,.28) 50%,
        rgba(148,163,184,.18) 70%,
        transparent 100%);
    pointer-events: none;
}

/* Refined nav links: smooth hover transition + better focus ring */
.gw-home-nav a:not(.gw-nav-cta):not(.gw-corner) {
    transition: color .18s ease, opacity .18s ease;
    position: relative;
}
.gw-home-nav a:not(.gw-nav-cta):not(.gw-corner)::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -4px;
    transform: translateX(-50%) scaleX(0);
    width: 60%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
}
.gw-home-nav a:not(.gw-nav-cta):not(.gw-corner):hover::after {
    transform: translateX(-50%) scaleX(1);
}

/* ::selection brand red on homepage too */
::selection { background: rgba(239, 68, 68, .35); color: #fff; }
::-moz-selection { background: rgba(239, 68, 68, .35); color: #fff; }

/* Smooth scroll on internal links */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ============================================================================
   WS12.83-96 — MOBILE UI FIXES (audit 2026-05-05)
   Targeted fixes for issues found during live mobile review.
   See MOBILE_UI_AUDIT_2026-05-05.md for full diagnosis.
============================================================================ */

/* WS12.85 — "Built to Protect" cards stack vertically on mobile.
   Pre-fix: 3-column grid (number / label / description) wrapped to
   ~6-character widths at 390px. */
@media (max-width: 600px) {
  .reveal-item {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 12px !important;
  }
  .reveal-item > * {
    text-align: center !important;
  }
}

/* WS12.86 — Nav backdrop fix: increase opacity so scrolling content
   doesn't bleed visibly through the fixed nav. Pre-fix: rgba(5,6,9,0.8)
   was too transparent for tightly-packed scrolling pages. */
.gw-home-nav {
  background: rgba(5, 6, 9, 0.96) !important;
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
}

/* WS12.87 — Text-wrap balance for hero headline + section H2s.
   Prevents orphaned single-word lines like "In / plaintext." */
.headline,
.section h2,
.bottom-cta-section h2 {
  text-wrap: balance;
  -webkit-text-wrap: balance;
}

/* WS12.88 — Live-chat widget: hide on mobile to free up viewport edge.
   On phones the bottom sticky CTA + form are higher-leverage than chat. */
@media (max-width: 768px) {
  .gw-chat-launcher,
  #gw-chat-launcher,
  [class*="chat-launcher"],
  [class*="live-chat"] {
    display: none !important;
  }
}

/* WS12.89 — Risk-gauge clip fix at top of credentials demo.
   Add scroll margin so anchor scrolls don't park content under the nav. */
section, .section, .scoreboard, [data-section] {
  scroll-margin-top: 80px;
}

/* WS12.91 — FAQ expand/collapse affordance.
   Pre-fix: cards showed only the question with no chevron, no plus/minus,
   no "tap to expand" hint. Add a visible chevron that rotates on open. */
.faq-card,
[class*="faq-item"],
[class*="faq-question"] {
  cursor: pointer;
  position: relative;
}
.faq-card::after,
[class*="faq-item"]::after {
  content: '+';
  position: absolute;
  right: 18px;
  top: 18px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--gw-r-full);
  transition: transform var(--gw-dur-base) var(--gw-ease-out),
              color var(--gw-dur-base) var(--gw-ease-out);
  pointer-events: none;
}
.faq-card.is-open::after,
.faq-card[aria-expanded="true"]::after,
[class*="faq-item"].is-open::after {
  content: '\2212';  /* unicode minus */
  color: var(--red);
}

/* WS12.92 — Free-tier "START FREE" button: was reading as disabled.
   Restyle as clear secondary CTA — outlined, brand-tinted text, hover lift. */
.price-card:not(.popular) .price-cta {
  background: transparent !important;
  color: var(--gw-c-text-strong) !important;
  border: 1.5px solid var(--gw-c-border) !important;
  font-weight: 600;
}
.price-card:not(.popular) .price-cta:hover {
  border-color: var(--red) !important;
  color: var(--red) !important;
}

/* WS12.83 — Visual reinforcement: add subtle "Coming Soon" treatment to
   any feature item carrying the SOON badge so it reads as a roadmap item
   rather than a current feature. Pairs with the inline SOON tags. */
.price-card li:has(span:contains("SOON")) {
  opacity: 0.92;
}

/* ============================================================================
   WS12.103 — Homepage density reduction (Fanlock-style cohesion).
   Hides 5 secondary sections from the homepage to cut from ~15 sections to
   ~8-10 conversion-focused sections. Per the post-Phase-0 analysis: even
   with token unification done, the "everything at once" homepage still
   reads as cognitively overloaded vs Fanlock's tight 6-7 section path.

   Hidden sections:
     - "We show the passwords. In plaintext." (intro before credentials demo)
     - "Built to Protect, Not to Sell Fear" (positioning copy)
     - "How doxx-able are you?" (quiz — lives standalone at /risk-check)
     - "What You Actually Get" (feature stack — overlaps pricing)
     - "Built for Trust" (trust cards)

   Reversible: remove the gw-density-hidden class from any section in
   unified_home.py to bring it back. No content was deleted.

   Kept: hero, stats, exposure-map (3-step how-it-works),
   what-attackers-cost, comparison, pricing, FAQ, bottom CTA. */
.gw-density-hidden {
  display: none !important;
}


/* ============================================================================
   WS12.307 — TEXTURED-BG CARD LEGIBILITY + RED-PALETTE LEGACY CLEANUP
   ----------------------------------------------------------------------------
   The homepage cards above were tuned when the page had a flat starfield bg.
   WS12.276/282/297/298 added textured section backgrounds (aurora/topo/hex/
   beams/mesh/orbs) — those textures broadcast through cards that use 0.02
   white fill or red rgba(239,68,68,...) borders. This block:
     • Forces every card to a legible 0.85-opaque slate base + 8px backdrop
       blur so text reads cleanly over any texture.
     • Migrates remaining red borders/accents to brand cyan/violet (matching
       the WS12.142 galaxy palette pivot).
     • Drops the bogus 999px pill radius on .reveal-item and .faq-item (they
       are cards; only chips/pills/CTAs should use 999px).
     • Removes the unused .stat-card border-radius:999px (it was a holdover
       from the pill-pivot sweep — pills don't fit a 4-up stats grid).
   This is appended LAST so source order wins over the legacy rules above
   without needing to edit each one. Specificity matched so almost no
   !important is required — only on the cases where token-aliased :root
   vars set values we need to override.
   ========================================================================== */

/* --- 1) Card surfaces: legible over textures ------------------------------ */
.stat-card,
.testimonial-card,
.step-card,
.reveal-item,
.trust-item,
.compare-old,
.faq-item {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(99, 102, 241, 0.22);
  backdrop-filter: blur(8px) saturate(1.18);
  -webkit-backdrop-filter: blur(8px) saturate(1.18);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Stat-cards: keep them as cards, not pills. 4-up grid hates 999px radius. */
.stat-card {
  border-radius: 16px;
  padding: 18px 14px;
}

/* Reveal-item: was 999px (pill) but it's a 2-col text card. Reset to 16px. */
.reveal-item {
  border-radius: 16px;
}

/* FAQ items: same — 999px on a paragraph-tall accordion looks like a wad. */
.faq-item {
  border-radius: 14px;
}

/* --- 2) Step-card: drop red top-line + red num-bubble for cyan/violet ---- */
.step-card .top-line {
  background: linear-gradient(90deg,
    transparent,
    rgba(34, 211, 238, 0.85),
    rgba(168, 85, 247, 0.85),
    transparent);
}
.step-num {
  background: linear-gradient(135deg,
    rgba(34, 211, 238, 0.18),
    rgba(99, 102, 241, 0.10));
  border: 1px solid rgba(34, 211, 238, 0.35);
  color: #67e8f9;
}

/* --- 3) Comparison: old=neutral, new=brand cyan ---------------------------- */
.compare-old {
  opacity: 0.78;
}
.compare-old .compare-label { color: #94a3b8; }
.compare-new {
  background: linear-gradient(180deg,
    rgba(34, 211, 238, 0.10),
    rgba(99, 102, 241, 0.06));
  border: 1px solid rgba(34, 211, 238, 0.32);
  box-shadow: 0 0 38px rgba(34, 211, 238, 0.10);
  backdrop-filter: blur(8px) saturate(1.18);
  -webkit-backdrop-filter: blur(8px) saturate(1.18);
}
.compare-new .compare-label { color: #67e8f9; }
.compare-item .icon-check { color: #22d3ee; }

/* --- 4) Pricing card: keep red ONLY where Brandon explicitly set inline. ---
   The .price-card.popular base style still used red bg + red border from a
   pre-pivot era. Drop it for clean cyan/violet brand framing. The inline
   "Get Warden" button gradient on the page already uses cyan→indigo→violet
   so the card around it should match. */
.price-card {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.18);
  backdrop-filter: blur(8px) saturate(1.18);
  -webkit-backdrop-filter: blur(8px) saturate(1.18);
}
.price-card.popular {
  background: linear-gradient(180deg,
    rgba(34, 211, 238, 0.10),
    rgba(99, 102, 241, 0.05) 40%,
    rgba(15, 23, 42, 0.88) 100%);
  border-color: rgba(34, 211, 238, 0.42);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42),
              0 0 0 1px rgba(34, 211, 238, 0.12) inset,
              0 0 50px rgba(34, 211, 238, 0.08);
}
.popular-badge {
  background: linear-gradient(135deg, #22d3ee, #6366f1) !important;
  border: 1px solid rgba(34, 211, 238, 0.45) !important;
  color: #0a0e16 !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.32);
}

/* --- 5) Trust items: red→brand. These wrap text so legibility is critical. */
.trust-item .trust-icon {
  background: linear-gradient(135deg,
    rgba(34, 211, 238, 0.16),
    rgba(99, 102, 241, 0.10));
  border: 1px solid rgba(34, 211, 238, 0.28);
  color: #67e8f9;
}

/* --- 6) Testimonial avatar: drop red gradient; keep the avatar circular --- */
.testimonial-card .avatar {
  background: linear-gradient(135deg, #22d3ee, #6366f1);
  border: 1px solid rgba(34, 211, 238, 0.35);
}
.testimonial-card .quote { color: #e2e8f0; }
.testimonial-card .author { color: #94a3b8; }

/* --- 7) Card text contrast tune-up over textures -------------------------- */
.step-card p, .reveal-item p, .trust-item p, .stat-label {
  color: #cbd5e1;
}
.step-card h3, .reveal-item h4, .trust-item h4 {
  color: #f0f0f5;
}

/* --- 8) FAQ minus icon: red→cyan in open state ---------------------------- */
.faq-card.is-open::after,
.faq-card[aria-expanded="true"]::after,
[class*="faq-item"].is-open::after {
  color: #22d3ee;
}

/* --- 9) Mobile spacing tweak so cards don't feel cramped over textures ---- */
@media (max-width: 640px) {
  .stat-card, .step-card, .testimonial-card, .reveal-item,
  .trust-item, .compare-old, .compare-new, .price-card, .faq-item {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}

/* ============================================================================
   WS12.308 — SECTION-LABEL CONTAINMENT
   Fixes the bug where "HOW IT WORKS" / "THREAT LANDSCAPE" / "SCAN PREVIEW"
   labels rendered with red horizontal lines stretching to viewport edges.
   Root cause: WS12.298 added `width: 100vw; margin-left: calc(50% - 50vw)`
   to .gw-bg sections (full-bleed breakout). The .label-border SVG used
   `position: absolute; inset: -1px;` which now stretches to the full 100vw
   when the parent ancestor chain widens unexpectedly. Forcing the label to
   fit-content + clipping the SVG keeps the corner-bracket frame tight to
   the text on every layout.
   ========================================================================== */
.section-inner > .section-label {
  display: inline-block !important;
  width: fit-content !important;
  max-width: max-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible;       /* keep ::before/::after corner brackets */
  contain: layout;         /* prevent layout from leaking */
}
/* Re-center the inline-block label inside its block container */
.section-inner {
  text-align: center;
}
.section-inner > * { text-align: initial; }
.section-inner > .section-label,
.section-inner > .section-title,
.section-inner > .section-sub { text-align: center; }

/* Constrain the dynamically-injected .label-border SVG to the label rect.
   The SVG had inset:-1px which lets it inherit any cascaded width. Force it
   to match the label box only, never the section. */
.section-label .label-border {
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  right: -1px !important;
  bottom: -1px !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100% + 2px) !important;
  pointer-events: none !important;
}
.section-label .label-border rect {
  /* Belt-and-braces: even if the rect width attr is wrong, clamp it. */
  vector-effect: non-scaling-stroke;
}