/* ═══════════════════════════════════════════════════════════════════
   GalaxyWarden THEME V2 → V4 DESIGN SYSTEM OVERHAUL
   Source of truth: gw-style-reference-v4.html

   Key changes from old theme:
   - Background: polished slate → void/deep layered (#050609 base)
   - Primary accent: purple (#7c3aed) → red threat (#ef4444 / #dc2626)
   - CTAs: purple rounded → red angular with shadow
   - Cards: gradient purple → flat surface with subtle borders
   - Typography: system font stack, no gaming fonts
   - Angular clip-paths on ALL interactive elements
   - CSS starfield background
   - Landing-mode crosshatch overlay
   - Zero border-radius on everything

   Applied: 2026-04-12
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ V4 DESIGN TOKENS ═══ */
:root {
  /* Backgrounds — layered depth */
  --bg-void: #050609;
  --bg-deep: #08090f;
  --bg-base: #0d0f17;
  --bg-surface: #12141e;
  --bg-elevated: #181b27;
  --bg-raised: #1e2133;

  /* Borders — layered opacity */
  --border-faint: rgba(255,255,255,.04);
  --border-default: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --border-bright: rgba(255,255,255,.22);

  /* Text */
  --text-primary: #e2e4ea;
  --text-bright: #f2f3f7;
  --text-secondary: #9ba1b0;
  --text-muted: #636979;
  --text-dim: #3d4250;

  /* Red — threat / primary action */
  --red: #ef4444;
  --red-dark: #dc2626;
  --red-deep: #b91c1c;
  --red-glow: rgba(239,68,68,.2);
  --red-surface: rgba(239,68,68,.07);
  --red-border: rgba(239,68,68,.25);

  /* Gold — rank / prestige (Elite) */
  --gold: #c89b3c;
  --gold-dim: #a07c28;
  --gold-bright: #d4af5a;
  --gold-border: rgba(200,155,60,.28);
  --gold-surface: rgba(200,155,60,.06);
  --gold-glow: rgba(200,155,60,.12);

  /* Blue — info / Warden tier */
  --blue: #60a5fa;
  --blue-surface: rgba(96,165,250,.06);
  --blue-border: rgba(96,165,250,.2);

  /* PII type colors — intentionally distinct per data type */
  --type-email: #22c55e;
  --type-email-bg: rgba(34,197,94,.08);
  --type-email-border: rgba(34,197,94,.25);
  --type-pass: #ef4444;
  --type-pass-bg: rgba(239,68,68,.08);
  --type-pass-border: rgba(239,68,68,.25);
  --type-user: #2dd4bf;
  --type-user-bg: rgba(45,212,191,.08);
  --type-user-border: rgba(45,212,191,.25);
  --type-phone: #a78bfa;
  --type-phone-bg: rgba(167,139,250,.08);
  --type-phone-border: rgba(167,139,250,.25);
  --type-name: #fbbf24;
  --type-name-bg: rgba(251,191,36,.08);
  --type-name-border: rgba(251,191,36,.25);

  /* Greens & Ambers */
  --green: #22c55e;
  --green-surface: rgba(34,197,94,.07);
  --green-border: rgba(34,197,94,.22);
  --amber: #f59e0b;
  --amber-surface: rgba(245,158,11,.07);
  --amber-border: rgba(245,158,11,.22);

  /* Font stack — system, no gaming fonts */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
  --font-display: var(--font) !important;
}

/* ═══ GLOBAL FONT OVERRIDE ═══ */
html, body, h1, h2, h3, h4, h5, h6, p, span, a, div, button, input, textarea, select, li, td, th, label {
  font-family: var(--font) !important;
}
body {
  -webkit-font-smoothing: antialiased !important;
  font-size: 15px !important;
  font-weight: 450;
  line-height: 1.55;
}

/* ═══ KILL GAMING RELICS ═══ */
.cyber-bg, .cyber-grid, .particles, .scanlines, .nebula-layer,
[class*="cyber-bg"], [class*="cyber-grid"], [class*="particle"],
[class*="scanline"], [class*="nebula"] {
  display: none !important;
}
@keyframes gw-shimmer { 0%, 100% { opacity: 1; } }

/* Force scroll-reveal content visible globally */
.gw-reveal, .gw-reveal-left, .gw-reveal-right, .gw-reveal-scale {
  opacity: 1 !important;
  transform: none !important;
}

/* ═══ VOID BACKGROUND ═══ */
body {
  background: var(--bg-void) !important;
  color: var(--text-primary) !important;
  overflow-x: hidden !important;
}

/* ═══ CSS STARFIELD — three-layer particle dots ═══ */
body::before {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Dense tiny dots */
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 8%, rgba(255,255,255,.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 52%, rgba(255,255,255,.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 65%, rgba(255,255,255,.14) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 78%, rgba(255,255,255,.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 35%, rgba(255,255,255,.16) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 88%, rgba(255,255,255,.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 62%, rgba(255,255,255,.22) 0%, transparent 100%),
    /* Mid-size dots */
    radial-gradient(1.5px 1.5px at 12% 30%, rgba(255,255,255,.18) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 70%, rgba(255,255,255,.12) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 65% 15%, rgba(255,255,255,.15) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 82% 55%, rgba(255,255,255,.1) 0%, transparent 100%),
    /* Rare brighter dots */
    radial-gradient(2px 2px at 22% 25%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 72% 60%, rgba(255,255,255,.2) 0%, transparent 100%),
    radial-gradient(2px 2px at 45% 80%, rgba(255,255,255,.25) 0%, transparent 100%);
  animation: gw-drift 180s linear infinite;
}

/* Landing-mode crosshatch + ambient glow */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Crosshatch pattern */
    linear-gradient(30deg, rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(-30deg, rgba(255,255,255,.012) 1px, transparent 1px),
    /* Red ambient glow from top */
    radial-gradient(ellipse 70% 30% at 50% -5%, rgba(239,68,68,.04) 0%, transparent 65%),
    /* Gold hint bottom-right */
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(200,155,60,.015) 0%, transparent 50%),
    /* Vignette */
    radial-gradient(ellipse at center, transparent 40%, var(--bg-void) 100%);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%, 100% 100%;
}

@keyframes gw-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(-50px, -30px); }
}

/* ═══ SUBTLE GRID TEXTURE — fills empty black spaces ═══ */
main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(239,68,68,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,68,68,.015) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 70%);
}

/* ═══ SECTION BREATHING — ambient glow between sections ═══ */
main section:nth-child(even)::before,
.ab-panel:nth-child(even)::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 120px;
  background: radial-gradient(ellipse, rgba(239,68,68,.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ═══ PAGE DEPTH — bottom vignette fade ═══ */
.gw-footer::before {
  content: "";
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(5,6,9,.6));
  pointer-events: none;
  z-index: 0;
}

/* Ensure main content sits above pseudo-element backgrounds */
body > *,
.gw-footer,
main,
header,
footer,
nav,
section,
.page-content,
[class*="container"],
[class*="wrapper"],
[class*="content"],
[id*="pricing"],
[id*="features"],
[id*="faq"] {
  position: relative;
  z-index: 1;
}

/* ═══ NUCLEAR BORDER-RADIUS KILL ═══
   v4 demands angular everything — zero radius site-wide.
   Exempts elements that MUST remain circular (status dots, avatar
   rings, radar/scan indicators, pie charts, etc.) — a rotating arc
   around a square looks like a single flat bar swinging in space. */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* ═══ CIRCULAR-ELEMENT WHITELIST ═══
   Restore border-radius:50% for elements that are semantically round.
   Includes explicit class names plus attribute-substring selectors so
   future dots/avatars/circles stay round without another CSS patch. */

/* Attribute-substring catches: -dot, -avatar, -circle, -round, -pie,
   -ring (in class names), plus data-shape="circle". */
[class*="-dot"],
[class*="-avatar"],
[class*="avatar-"],
[class*="-circle"],
[class*="-round"],
[class*="-pie"],
[class*="-ring"],
[data-shape="circle"] {
  border-radius: 50% !important;
}

/* Explicit circular elements (where attr-substring doesn't match). */
.particle,
.threat-indicator,
.threat-indicator-ring,
.threat-indicator-ring::before,
.threat-indicator-inner,
.ops-status-dot,
.journey-step-circle,
.wizard-step-num,
.section-title .dot,
.status-light,
.expand-arrow,
.cc-btn,
.cc-close,
.cc-send,
.cc-msg-avatar,
.cc-activity-dot,
.cc-livechat-dot,
.gw-avatar,
.gw-avatar-ring,
.cc-avatar,
.step-dot,
.dot-indicator,
.radial-progress,
.radial-score,
.score-ring,
.scan-ring,
.user-avatar,
.sv-avatar,
.sidebar-avatar {
  border-radius: 50% !important;
}
.threat-indicator-ring::before {
  /* ::before pseudo needs its own selector to match the whitelist above */
  border-radius: 50% !important;
}

/* ═══ ANGULAR CLIP-PATH — v4 signature cut corners ═══ */
.btn-angular,
.cta-primary,
.gw-btn-primary,
.btn-cta{
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)) !important;
}

/* ═══ CARD STYLE — flat surface with subtle borders ═══ */
.gw-card,
.feature-card,
.stat-card,
.info-card,
.plan-card,
.benefit-card,
.guide-card,
.blog-card,
.breach-card,
.tool-card,
.demo-card,
.pricing-card,
.tier-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}
.gw-card:hover,
.feature-card:hover,
.stat-card:hover,
.info-card:hover,
.plan-card:hover,
.benefit-card:hover,
.guide-card:hover,
.blog-card:hover,
.breach-card:hover,
.tool-card:hover,
.demo-card:hover,
.pricing-card:hover,
.tier-card:hover {
  border-color: var(--border-strong) !important;
  box-shadow: 0 6px 32px rgba(0,0,0,0.4) !important;
  transform: translateY(-1px) !important;
}

/* ═══ SEVERITY BADGES ═══ */
.badge-critical, .severity-critical { background: var(--red) !important; color: white !important; }
.badge-high, .severity-high { background: var(--amber) !important; color: var(--bg-void) !important; }
.badge-medium, .severity-medium { background: var(--type-user) !important; color: var(--bg-void) !important; }
.badge-low, .severity-low { background: var(--green) !important; color: white !important; }

/* ═══ TABLE HEADERS ═══ */
table th,
.data-table th {
  color: var(--red) !important;
  border-bottom-color: var(--red-border) !important;
  font-family: var(--mono) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

/* ═══ PRIMARY CTA BUTTONS — RED THREAT STYLE ═══ */
.cta-primary,
.gw-btn-primary,
.btn-cta {
  background: var(--red-dark) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 24px rgba(220,38,38,0.25), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  transition: all 0.15s ease !important;
}
.cta-primary:hover,
.gw-btn-primary:hover,
.btn-cta:hover {
  background: var(--red-deep) !important;
  box-shadow: 0 6px 30px rgba(220,38,38,0.35), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  transform: translateY(-1px) !important;
}

/* ═══ INLINE-STYLE BUTTON OVERRIDE ═══
   Many marketing pages use inline styles with border-radius and rounded corners.
   This forces angular styling on all button-like elements. */
a[style*="border-radius"],
button[style*="border-radius"],
div[style*="border-radius"],
span[style*="border-radius"] {
  border-radius: 0 !important;
}

/* Force angular clip-path on CTA-like links in marketing sections */
a[href="/pricing"][style*="background"],
a[href="/register"][style*="background"],
a[href="/doxxmon/signup"][style*="background"],
a[href="/login"][style*="background"],
a[style*="background:#dc2626"],
a[style*="background:#ef4444"],
a[style*="background: #dc2626"],
a[style*="background: #ef4444"],
button[style*="background:#dc2626"],
button[style*="background:#ef4444"],
button[style*="background: #dc2626"],
button[style*="background: #ef4444"] {
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)) !important;
  border-radius: 0 !important;
}

/* ═══ TAG / LABEL — v4 pattern with line prefix ═══ */
.tag, .section-tag, .gw-tag {
  font-size: .56rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2.5px !important;
  color: var(--red) !important;
}

/* ═══ NAV BAR — VOID GLASS ═══ */

.gw-nav,
.gw-sticky-nav,
nav[class*="nav"] {
  background: rgba(5,6,9,0.95) !important;
  border-bottom: 1px solid var(--border-default) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
}

/* Nav logo — clean white, no gaming font */
.gw-nav-logo-text{
  font-family: var(--font) !important;
  text-transform: none !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  letter-spacing: -0.01em !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  background-clip: unset !important;
  color: #ffffff !important;
}

/* Nav links */



/* Nav login link */



/* Nav CTA — red angular action */



/* ═══ FOOTER ═══ */
.gw-footer,
footer {
  background: rgba(5,6,9,0.95) !important;
  border-top: 1px solid var(--border-faint) !important;
}

/* ═══ DROPDOWN MENUS ═══ */
.gw-nav-dropdown,
[class*="dropdown-menu"],
[class*="dropdown-content"] {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}
.gw-nav-dropdown a:hover{
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-bright) !important;
}

/* ═══ CTA BANNERS ═══ */
.cta-banner,
.cta-box,
.cta-section {
  background: var(--red-surface) !important;
  border: 1px solid var(--red-border) !important;
}

/* ═══ SECTION DIVIDERS ═══ */
hr,
.divider {
  border-color: var(--border-faint) !important;
}

/* ═══ FAQ / ACCORDION ═══ */
details {
  border-bottom-color: var(--border-faint) !important;
}
details summary {
  color: var(--text-primary) !important;
}
details summary:hover {
  color: var(--red) !important;
}

/* ═══ INPUT FIELDS ═══ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  background: var(--bg-deep) !important;
  border: 1.5px solid var(--border-default) !important;
  color: var(--text-bright) !important;
  font-family: var(--font) !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px var(--red-glow), 0 0 20px rgba(239,68,68,0.08) !important;
}

/* ═══ ANGULAR FRAMES — gold + red corner accents ═══ */
.frame-gold, .frame-red { position: relative; }
.frame-gold::before, .frame-gold::after,
.frame-red::before, .frame-red::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 2;
}
.frame-gold::before { top: -1px; left: -1px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.frame-gold::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.frame-red::before { top: -1px; left: -1px; border-top: 2px solid var(--red); border-left: 2px solid var(--red); }
.frame-red::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--red); border-right: 2px solid var(--red); }

/* ═══ HERO BADGE — v4 pattern ═══ */
.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: var(--red-surface) !important;
  border: 1px solid var(--red-border) !important;
  border-left: 3px solid var(--red) !important;
  color: var(--red) !important;
  padding: 6px 16px 6px 11px !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

/* ═══ STAT CARDS ROW ═══ */
.stat-row {
  display: grid !important;
  gap: 1px !important;
  background: var(--border-faint) !important;
  border: 1px solid var(--border-default) !important;
  overflow: hidden !important;
}
.stat-card {
  background: var(--bg-surface) !important;
  padding: 1rem !important;
  position: relative !important;
}

/* ═══ THREAT PULSE ANIMATION ═══ */
@keyframes gw-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.pulse, .threat-pulse {
  animation: gw-pulse 2s ease-in-out infinite !important;
}

/* ═══ SECTION BACKGROUNDS — enforce void depth ═══ */
section,
.section,
[class*="section"] {
  background-color: transparent !important;
}
/* Override inline backgrounds that use old colors */
section[style*="background:#030014"],
section[style*="background: #030014"],
div[style*="background:#030014"],
div[style*="background: #030014"],
section[style*="background:#0a0a1a"],
section[style*="background: #0a0a1a"] {
  background: transparent !important;
}

/* ═══ LINK COLORS ═══ */
a {
  color: var(--red);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--text-bright);
}

/* ═══ HEADINGS ═══ */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-bright) !important;
  letter-spacing: -0.03em;
}

/* ═══ PRICING PAGE SPECIFIC ═══ */
.pricing-section-warden,
[id*="pricing-section"] {
  background: transparent !important;
}

/* ═══ MONOSPACE FOR DATA DISPLAY ═══ */
.mono, .data-value, code, pre, .scan-input,
[class*="mono"], [class*="code-"] {
  font-family: var(--mono) !important;
}

/* ═══ BADGES — angular ═══ */
.badge, .tag-badge, .tier-badge, .status-badge {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 3px 10px !important;
  clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 3px, 100% 100%, 3px 100%, 0 calc(100% - 3px)) !important;
}

/* ═══ SCROLL BEHAVIOR ═══ */
html {
  scroll-behavior: smooth;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  
  
  

  .gw-card, .feature-card, .stat-card, .info-card, .plan-card,
  .benefit-card, .guide-card, .blog-card, .breach-card, .tool-card, .demo-card {
    padding: 1rem !important;
  }

  .cta-primary, .gw-btn-primary, .btn-cta {
    font-size: 0.82rem !important;
    padding: 0.65rem 1.2rem !important;
    width: 100% !important;
    text-align: center !important;
  }

  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.1rem !important; }

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  img, video, iframe, table {
    max-width: 100% !important;
  }

  body::before { opacity: 0.4; }
  body::after { opacity: 0.3; }

  .stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  
  h1 { font-size: 1.4rem !important; }
  h2 { font-size: 1.15rem !important; }
  h3 { font-size: 1rem !important; }

  .gw-card, .feature-card, .stat-card, .plan-card {
    padding: 0.8rem !important;
  }

  .stat-row {
    grid-template-columns: 1fr !important;
  }
}