/* Global Dark Theme Enforced (No light mode override) */
:root {
  --primary: #06b6d4; /* Neon Cyan */
  --primary-hover: #0891b2;
  --primary-rgb: 6, 182, 212;
  --secondary: #ef4444; /* Cyber Red */
  --secondary-hover: #dc2626;
  --secondary-rgb: 239, 68, 68;
  --background: #050505; /* Deep Charcoal Black */
  --surface: #0a0a0a; /* True Black surface */
  --surface-hover: #111111;
  --text: #ffffff;
   --text-muted: #cbd5e1; /* Lighter slate for better contrast (WCAG AA) */
  --border: #1a1a1a;
  --bg-rgb: 5, 5, 5;
  --success: #22c55e;
  --error: #ef4444;
  --gradient: linear-gradient(135deg, var(--primary), #3b82f6);
  --gradient-hacker: linear-gradient(135deg, var(--primary), var(--secondary));
  --font-sans: 'Outfit', sans-serif;
  --font-heading: 'Sora', sans-serif;
  --radius: 12px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { 
  scroll-behavior: smooth; 
  scroll-padding-top: 80px; 
}

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.3s, color 0.3s;
}

/* Custom Premium Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--surface);
  border-left: 1px solid var(--border);
}
::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Accessibility Focus States */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Standardized Form Inputs (Min 44px Height API) */
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2);
}


/* Premium 2026 Animated Background: Cyber Pulse */
#cyber-pulse-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(var(--primary-rgb), 0.05) 0%, transparent 70%);
}

.pulse-line {
  position: absolute;
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--primary), transparent);
  opacity: 0;
  animation: pulse-fall linear infinite;
  filter: blur(1px);
}

.pulse-line.blue {
  background: linear-gradient(to bottom, transparent, var(--secondary), transparent);
}

/* Scroll Reveal Animations */
/* Reveal-on-Scroll Core (Safe by Default) */
.reveal, [data-animate="fade-up"] {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: opacity, transform;
}

@keyframes pulse-fall {
  0% { transform: translateY(-100px); opacity: 0; }
  10% { opacity: 0.3; }
  90% { opacity: 0.3; }
  100% { transform: translateY(110vh); opacity: 0; }
}

/* 3D Perspective Grid Floor - Animated for depth */
.grid-floor {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 500px;
  background-image: 
    linear-gradient(to right, rgba(var(--primary-rgb), 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--primary-rgb), 0.15) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(600px) rotateX(65deg);
  transform-origin: center bottom;
  mask-image: linear-gradient(to top, rgba(0,0,0,1), transparent 80%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), transparent 80%);
  animation: grid-scroll 30s linear infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes grid-scroll {
  from { background-position: 0 0; }
  to { background-position: 0 60px; }
}

/* Mouse-Tracking 'Hacker Glow' */
.hacker-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), 
              rgba(var(--primary-rgb), 0.04), 
              transparent 80%);
  opacity: 0;
  transition: opacity 1s ease;
}
.js-active .hacker-glow { opacity: 1; }

/* 
   CRT Scanline Overlay 2.0 
   Subtle flicker adds the "Premium" feel without eye strain.
*/
.scanlines {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%), 
              linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
  background-size: 100% 3px, 3px 100%;
  opacity: 0.12;
  animation: crt-flicker 0.15s infinite;
}

@keyframes crt-flicker {
  0% { opacity: 0.12; }
  50% { opacity: 0.13; }
  100% { opacity: 0.12; }
}

/* Base Reveal - Safe by Default (Opacity 1) */
/* 
   JS Resilience: Only hide if JS is confirmed active.
   Prevents content from being hidden if the script fails or loads slowly.
*/
.js-active .reveal:not(.active), 
.js-active [data-animate="fade-up"]:not(.is-visible) {
  opacity: 0;
  transform: translateY(20px);
}

.reveal.active, 
[data-animate="fade-up"].is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

img, svg { max-width: 100%; height: auto; }

/* Typography */
h1, h2, h3, h4, h5, h6 { 
  font-family: var(--font-heading);
  line-height: 1.1; 
  font-weight: 800; 
  margin-bottom: 1.25rem; 
  letter-spacing: -0.02em;
}
h1 { 
  font-size: clamp(3rem, 7vw, 5rem); 
  background: linear-gradient(to right, #fff 20%, var(--primary) 40%, var(--secondary) 80%);
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 15px rgba(var(--primary-rgb), 0.5));
  margin-bottom: 2rem;
}
h2 { 
  font-size: clamp(1.8rem, 4vw, 3rem); 
  margin-top: 3rem; 
  color: #fff; 
  border-left: 4px solid var(--primary);
  padding-left: 1.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
h3 { font-size: 1.5rem; margin-top: 2rem; color: var(--primary); }
p { margin-bottom: 1.5rem; font-size: 1.1rem; color: var(--text-muted); font-weight: 300; line-height: 1.8; }
ul, ol { margin-bottom: 1.5rem; padding-left: 2rem; color: var(--text-muted); font-size: 1.1rem; }
li { margin-bottom: 0.5rem; }
a { color: var(--primary); text-decoration: none; transition: 0.3s; }
a:hover { color: var(--secondary); text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.4); }

/* Glass 3.0 & Bento Grid SEO Components */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  margin: 4rem 0;
}

.answer-box, .takeaways-box, .toc-container {
  background: rgba(15, 15, 15, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.answer-box:hover, .takeaways-box:hover, .toc-container:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  transform: translateY(-5px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.answer-box {
  grid-column: span 12;
  padding: 2.5rem;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.6;
  border-left: 6px solid var(--primary);
  color: var(--text);
}

.takeaways-box {
  grid-column: span 7;
  padding: 2.5rem;
}
@media (max-width: 992px) { .takeaways-box { grid-column: span 12; } }

.toc-container {
  grid-column: span 5;
  padding: 2.5rem;
}
@media (max-width: 992px) { .toc-container { grid-column: span 12; } }

.takeaways-box h3, .toc-container h3 { 
  margin-top: 0; 
  color: var(--primary); 
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}

.takeaways-box ul { margin-bottom: 0; list-style: none; padding-left: 0; }
.takeaways-box li { 
  position: relative; 
  padding-left: 2rem; 
  color: var(--text);
  font-size: 1.05rem;
}
.takeaways-box li::before {
  content: "»";
  position: absolute;
  left: 0;
  color: var(--secondary);
  font-weight: 900;
}

.toc-container ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc-container a {
  display: block;
  padding: 0.6rem 0;
  color: #a5f3fc; /* Cyan-tinted light text for visibility */
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.toc-container a:hover {
  padding-left: 0.75rem;
  color: #fff;
  background: rgba(var(--primary-rgb), 0.1);
}

.toc-container ol { margin-bottom: 0; column-count: 2; column-gap: 2rem; }
@media (max-width: 768px) { .toc-container ol { column-count: 1; } }

.img-placeholder {
  background: #0f172a;
  border: 2px dashed #334155;
  padding: 4rem 2rem;
  text-align: center;
  margin: 3rem 0;
  border-radius: var(--radius);
}
.img-placeholder .file-name { font-family: monospace; color: var(--primary); display: block; margin-bottom: 1rem; }
.img-placeholder .caption { font-size: 0.9rem; color: var(--text-muted); font-style: italic; margin-top: 1rem; }

.faq-section {
  margin-top: 5rem;
  border-top: 1px solid var(--border);
  padding-top: 4rem;
}
.faq-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
@media (max-width: 600px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-card {
  background: var(--surface);
  padding: 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.faq-card h3 { margin-top: 0; font-size: 1.25rem; color: var(--text); }

.author-bio-box {
  background: var(--surface);
  padding: 3rem;
  margin-top: 6rem;
  border-radius: var(--radius);
  border: 1px solid var(--primary);
  display: flex;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 768px) { .author-bio-box { flex-direction: column; text-align: center; } }
.author-avatar {
  width: 120px;
  height: 120px;
  background: var(--gradient);
  border-radius: 50%;
  flex-shrink: 0;
}
.author-socials {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.author-socials a {
  font-size: 1.5rem;
  color: var(--text-muted);
}
.author-socials a:hover { color: var(--primary); }

/* Premium 2026 Buttons: Neon Glitch System */
.btn-primary, .btn-secondary, .btn-primary-sm, .btn-error {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  border-radius: var(--radius);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 1rem;
  gap: 0.75rem;
  cursor: pointer;
  border: none;
  background: #000;
  color: white;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  z-index: 1;
}

/* Common Neon Glow (Default) */
.btn-primary::before, .btn-secondary::before, .btn-error::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: var(--gradient);
  z-index: -1;
  border-radius: calc(var(--radius) + 2px);
  filter: blur(2px);
  opacity: 0.6;
  animation: neon-breath 3s ease-in-out infinite;
}

.btn-secondary::before { background: linear-gradient(135deg, var(--secondary), #0ea5e9); }
.btn-error::before { background: linear-gradient(135deg, #ef4444, #f43f5e); }

/* Rotating Conic Hover Effect */
.btn-primary::after, .btn-secondary::after, .btn-error::after {
  content: '';
  position: absolute;
  top: -150%; left: -50%;
  width: 200%; height: 400%;
  background: conic-gradient(transparent, var(--primary), transparent 30%);
  z-index: -2;
  opacity: 0;
  transition: opacity 0.3s;
  animation: conic-rotate 2s linear infinite;
  pointer-events: none;
}

.btn-secondary::after { background: conic-gradient(transparent, var(--secondary), transparent 30%); }
.btn-error::after { background: conic-gradient(transparent, #ef4444, transparent 30%); }

.btn-primary:hover, .btn-secondary:hover, .btn-error:hover {
  transform: translateY(-3px) scale(1.02);
  color: #fff;
  box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.4);
}

.btn-primary:hover::after, .btn-secondary:hover::after, .btn-error:hover::after {
  opacity: 1;
}

/* Active State */
.btn-primary:active, .btn-secondary:active {
  transform: translateY(-1px) scale(0.98);
}

/* Size Variants */
.btn-large { padding: 1.25rem 3rem; font-size: 1.2rem; }
.btn-primary-sm { padding: 0.6rem 1.2rem; font-size: 0.85rem; }

@keyframes neon-breath {
  0%, 100% { opacity: 0.4; filter: blur(2px); }
  50% { opacity: 1; filter: blur(4px); }
}

@keyframes conic-rotate {
  100% { transform: rotate(360deg); }
}

.btn-error:hover {
  background: #dc2626;
  transform: translateY(-2px);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--bg-rgb), 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}
.header-flex { display: flex; align-items: center; justify-content: space-between; }
.logo a { display: flex; align-items: center; gap: 0.75rem; font-size: 1.5rem; font-weight: 800; color: var(--text); }
.logo svg { width: 32px; height: 32px; }
.main-nav ul { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.main-nav a { color: var(--text-muted); font-weight: 500; font-size: 1rem; padding: 0.5rem 0; }
.main-nav a:hover { color: var(--primary); }

.hamburger { display: none; background: transparent; border: none; cursor: pointer; flex-direction: column; gap: 5px; }
.hamburger .bar { width: 25px; height: 3px; background: var(--text); transition: 0.3s; }

/* Hero Section 2.0 (Tightened) */
.hero {
  padding: 4rem 0 2rem;
  background: radial-gradient(circle at 15% 15%, rgba(var(--primary-rgb), 0.05), transparent 30%),
              radial-gradient(circle at 85% 85%, rgba(var(--secondary-rgb), 0.05), transparent 30%);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
}
@media (max-width: 992px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } }

.hero-content { z-index: 2; }
.stats-mini {
  display: flex;
  gap: 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--primary);
  margin-bottom: 2rem;
  opacity: 0.8;
}
.stat-item {
  background: rgba(var(--primary-rgb), 0.1);
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: 4px;
}
.hero-ctas { margin-top: 3rem; display: flex; gap: 1.5rem; }
@media (max-width: 992px) { .hero-ctas { justify-content: center; } .stats-mini { justify-content: center; } }

/* Live Terminal Dashboard with Glitch Effect */
.hero-dashboard {
  position: relative;
  z-index: 2;
}
.terminal-window {
  background: #000;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.8);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 2rem;
  position: relative;
}
.terminal-window:hover {
  animation: glitch-vibrate 0.3s infinite;
}
.terminal-window::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--primary-rgb), 0.02);
  z-index: 5;
  pointer-events: none;
}

@keyframes glitch-vibrate {
  0% { transform: translate(0); }
  25% { transform: translate(-1px, 1px); color: var(--secondary); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
  100% { transform: translate(0); }
}
.terminal-header {
  background: #1a1a1a;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }
.terminal-title { margin-left: 1rem; font-size: 0.75rem; color: #666; font-weight: 600; }

.terminal-body {
  padding: 1.5rem;
  height: 250px;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.line { font-size: 0.85rem; color: #94a3b8; }
.line.active { color: var(--primary); font-weight: 600; }

.hero-image-mini {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 300px;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
  z-index: 5;
  transform: rotate(-5deg);
}
@media (max-width: 992px) { .hero-image-mini { position: static; margin: 2rem auto; transform: none; width: 100%; max-width: 400px; } }

/* Premium Authority Image System */
main img, section img:not(.hero-image img) {
  display: block;
  max-width: 850px;
  width: 90%;
  height: auto;
  margin: 4rem auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
  background: var(--surface);
  transition: transform 0.4s ease;
}

main img:hover {
  transform: translateY(-5px);
}

/* Captions & Figure Styles */
main img + p, main img + span, .img-caption {
  display: block;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: -3rem; /* Lift towards image */
  margin-bottom: 4rem;
  padding: 0 1rem;
}

.author-avatar {
  width: 120px;
  height: 120px;
  background: var(--gradient);
  border-radius: 50%;
  flex-shrink: 0;
  border: 4px solid var(--surface);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Social Proof */
.social-proof {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 3rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 4rem 0;
}
.stat { text-align: center; }
.stat .number { display: block; font-size: 2.5rem; font-weight: 800; color: var(--primary); margin-bottom: 0.5rem; }
.stat .label { font-size: 1.125rem; color: var(--text-muted); }

/* Grids */
.features-grid, .stats-grid, .testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-animate="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.feature-card, .stat-card, .testimonial-card {
  background: var(--surface);
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover, .stat-card:hover, .testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: var(--primary);
}
.feature-icon, .stat-icon { width: 48px; height: 48px; color: var(--primary); margin-bottom: 1.5rem; }
.feature-icon svg, .stat-icon svg { width: 100%; height: 100%; }

/* Steps */
.steps-container { margin: 4rem 0; }
.step {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin-bottom: 4rem;
}
.step:nth-child(even) { flex-direction: row-reverse; }
.step-number {
  font-size: 6rem;
  font-weight: 900;
  color: rgba(107, 70, 193, 0.1);
  line-height: 1;
  margin-right: -2rem;
  z-index: -1;
}
.step-content { flex: 1; position: relative; }
.step-image { flex: 1; }
.step-image svg { width: 100%; max-width: 400px; height: auto; }

/* Download Section */
.download-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  background: var(--surface);
  padding: 3rem;
  border-radius: var(--radius);
  margin: 4rem 0;
}
.download-info ul { list-style: none; padding: 0; }
.download-info li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.download-mockup img { border-radius: 20px; box-shadow: var(--shadow); }

/* Table */
.comparison-table { width: 100%; border-collapse: collapse; margin: 3rem 0; }
.comparison-table th, .comparison-table td { padding: 1.25rem; text-align: left; border-bottom: 1px solid var(--border); }
.comparison-table th { background: var(--surface); font-weight: 700; }
.comparison-table tr:hover td { background: var(--surface-hover); }

/* Testimonials */
.testimonial-card { display: flex; flex-direction: column; }
.stars { color: #fbbf24; font-size: 1.25rem; margin-bottom: 1rem; }
.testimonial-author { display: flex; align-items: center; gap: 1rem; margin-top: auto; padding-top: 1.5rem; }
.testimonial-author img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.testimonial-author strong { display: block; color: var(--text); }
.testimonial-author span { font-size: 0.875rem; color: var(--text-muted); }

/* FAQ */
.faq-container { margin: 3rem 0; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
}
.faq-item h3 { margin: 0; padding: 1.5rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.125rem; }
.faq-item h3::after { content: '+'; font-size: 1.5rem; color: var(--primary); transition: transform 0.3s; }
.faq-item.active h3::after { transform: rotate(45deg); }
.faq-item .faq-answer { display: none; padding: 0 1.5rem 1.5rem; border-top: 1px solid var(--border); color: var(--text-muted); }

/* Form Utility Classes */
.form-card {
  max-width: 600px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  text-align: center;
}
.form-card-desc {
  margin-bottom: 2rem;
  color: var(--text-muted);
}
.form-group-flex {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.form-input-group {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.form-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.form-input-large {
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--text);
  font-size: 1.1rem;
  width: 100%;
}
.form-btn-full {
  width: 100%;
  border: none;
  cursor: pointer;
}

/* Premium Glass Footer */
.site-footer {
  background: linear-gradient(to top, #000, #0a0a0a);
  border-top: 1px solid var(--border);
  padding: 8rem 0 4rem;
  margin-top: 8rem;
  position: relative;
  z-index: 10;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 4rem;
}
@media (max-width: 992px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } }

.footer-brand .logo { margin-bottom: 2rem; }
.footer-brand p { font-size: 0.95rem; line-height: 1.8; color: var(--text-muted); }
.footer-links h4 { color: #fff; font-size: 0.9rem; margin-bottom: 2rem; text-transform: uppercase; letter-spacing: 0.1em; }
.footer-links ul { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 1rem; }
.footer-links a { color: var(--text-muted); font-size: 0.9rem; transition: 0.3s; }
.footer-links a:hover { color: var(--primary); padding-left: 5px; }

/* Social Links Fix */
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 50%;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.social-links a:hover {
  background: rgba(var(--primary-rgb), 0.1);
  border-color: var(--primary);
  transform: translateY(-3px);
}
.social-links a svg {
  width: 20px;
  height: 20px;
  fill: var(--text-muted);
  transition: fill 0.3s ease;
}
.social-links a:hover svg {
  fill: var(--primary);
}

.footer-bottom {
  margin-top: 6rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}
.footer-bottom p { font-size: 0.85rem; color: #525252; }

/* Base App Form (for phase 2/future) */
.bomber-form-wrapper { max-width: 600px; margin: 0 auto; background: var(--surface); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.form-group { margin-bottom: 1.5rem; }
.glitch-red {
  color: var(--secondary);
  text-shadow: 0 0 8px rgba(var(--secondary-rgb), 0.6);
  font-weight: 900;
  display: inline-block;
  animation: glitch-shake 0.1s infinite;
}

@keyframes glitch-shake {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

/* Premium Matrix Background */
#cyber-matrix {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.15;
}

/* Hacker Terminal & Viral Hook Overlays */
.hacker-terminal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100dvh;
  background: #000;
  z-index: 9999;
  display: none;
  flex-direction: column;
  padding: 1rem;
  font-family: 'JetBrains Mono', monospace;
  color: #fff; /* High visibility pure white */
  overflow: hidden;
  box-sizing: border-box;
  text-shadow: 0 0 5px var(--primary);
}

.hacker-terminal-overlay::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0;
  bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}



.terminal-header-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 2px solid var(--primary);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  z-index: 3;
}

.terminal-progress-container {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.1);
    position: relative;
    margin-bottom: 1rem;
}

.terminal-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    transition: width 0.3s;
}


.terminal-logs {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: #fff; /* Pure visibility Build 3.0 */
  mask-image: linear-gradient(to top, rgba(0,0,0,1), transparent 98%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), transparent 98%);
  padding: 0.5rem;
  z-index: 3;
}



.terminal-logs .line {
    opacity: 0;
    transform: translateY(10px);
    animation: terminal-line-fade 0.3s forwards;
}

@keyframes terminal-line-fade {
    to { opacity: 1; transform: translateY(0); }
}

.terminal-footer-stats {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  display: flex;
  justify-content: space-around;
  background: rgba(var(--primary-rgb), 0.05);
}

.stat-box { text-align: center; }
.stat-box .val { font-size: 3rem; font-weight: 800; display: block; filter: drop-shadow(0 0 10px var(--primary)); }
.stat-box .lbl { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; }

/* Viral Modal */
.viral-modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100dvh;
  background: rgba(0,0,0,0.98);
  z-index: 10000;
  display: none;
  backdrop-filter: blur(15px);
  box-sizing: border-box;
}

.viral-modal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 2px solid var(--secondary);
  border-radius: var(--radius);
  padding: 2.5rem;
  max-width: 500px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 50px rgba(var(--secondary-rgb), 0.5);
  overflow: hidden;
  box-sizing: border-box;
}



.viral-modal::before {
  content: "CRITICAL FIREWALL DETECTED";
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  font-size: 0.6rem;
  color: var(--secondary);
  opacity: 0.5;
  letter-spacing: 5px;
}

.viral-modal h2 { color: var(--secondary); margin-bottom: 1.5rem; font-size: 2rem; }
.viral-modal p { color: var(--text-muted); margin-bottom: 2rem; }

.whatsapp-btn {
  background: #25D366;
  color: white;
  padding: 1.25rem 2rem;
  border-radius: var(--radius);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  transition: transform 0.3s;
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}

.whatsapp-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 30px rgba(37, 211, 102, 0.5);
}

/* Glitch Animation for Transition */
.glitch-active {
  animation: glitch-vibrate 0.1s infinite !important;
  filter: hue-rotate(90deg) grayscale(0.5);
  opacity: 0.8;
}

@keyframes glitch-vibrate {
  0% { transform: translate(0); }
  25% { transform: translate(-5px, 5px); }
  50% { transform: translate(5px, -5px); }
  75% { transform: translate(-5px, -5px); }
  100% { transform: translate(0); }
}

/* Hacker Level 2.0: Map, Ticker, and Themes */
.terminal-map-bg {
  position: absolute;
  top: 50%; left: 50%;
  width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' viewBox='0 0 1200 600'%3E%3Cpath fill='%2306b6d4' d='M250,150 L350,150 L400,200 L450,180 L500,220 L550,180 L600,200 L650,150 L750,150 L800,200 L850,220 L900,200 L950,250 L1000,220 L1100,250 L1150,300 L1100,350 L1000,400 L900,450 L800,420 L750,450 L700,420 L650,450 L600,420 L550,450 L500,420 L450,450 L400,420 L350,450 L300,420 L250,450 L200,420 L150,450 L100,400 L50,350 L100,300 L150,250 L200,200 L250,150' /%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  transition: filter 0.5s;
}

.terminal-ping {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--secondary);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--secondary);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.terminal-ping.animate {
    animation: ping-pulse 0.8s ease-out;
}

@keyframes ping-pulse {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(4); opacity: 0; }
}

.terminal-ticker {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  background: rgba(0,0,0,0.8);
  border-top: 1px solid var(--border);
  padding: 0.5rem 0;
  z-index: 10;
  overflow: hidden;
}

.ticker-content {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
  font-size: 0.75rem;
  color: var(--text-muted);
}

@keyframes ticker-scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Phase Transitions */
.hacker-terminal-overlay.theme-stealth { 
    --primary: #06b6d4; 
    --primary-rgb: 6, 182, 212;
}
.hacker-terminal-overlay.theme-exploit { 
    --primary: #fbbf24; 
    --primary-rgb: 251, 191, 36;
}
.hacker-terminal-overlay.theme-critical { 
    --primary: #ef4444; 
    --primary-rgb: 239, 68, 68;
}

.hacker-terminal-overlay {
    transition: background 1s, color 0.5s, border-color 0.5s;
    border: 5px solid var(--primary);
}


/* Hacker Terminal & Viral Modal Mobile Overhaul 3.0 */
@media (max-width: 768px) {
  .hacker-terminal-overlay {
    padding: 10px;
    border-width: 2px !important;
  }
  
  .terminal-header-main {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    text-align: left;
    font-size: 0.65rem;
  }
  
  .terminal-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  
  .terminal-info span {
      margin-left: 0 !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .stat-box .val {
    font-size: 1.25rem;
  }

  .viral-modal {
    padding: 1.5rem;
    width: 92%;
    max-width: 320px;
    height: auto;
    max-height: 90dvh;
    overflow-y: auto;
    transform: translate(-50%, -50%); /* Re-enforce centering */
  }


  .viral-modal h2 {
    font-size: 1.4rem;
    word-break: break-all;
  }

  .viral-modal p {
    font-size: 0.8rem;
  }

  .whatsapp-btn {
      padding: 1rem;
      font-size: 0.9rem;
      width: 100%;
      box-sizing: border-box;
  }
}


.terminal-logs .line {
    opacity: 0;
    transform: translateY(5px);
    animation: terminal-line-fade 0.2s forwards;
    letter-spacing: 0.5px;
}

.terminal-logs .line::after {
    content: "█";
    opacity: 0;
    animation: cursor-blink 1s infinite;
}

@keyframes cursor-blink {
    0%, 49% { opacity: 0; }
    50%, 100% { opacity: 1; }
}



/* Optimization for tiny screens (360px and below) */
@media (max-width: 360px) {
    .hacker-terminal-overlay {
        padding: 0.5rem;
    }
    .terminal-logs {
        font-size: 0.8rem;
    }
    .stat-box .val {
        font-size: 1.25rem;
    }
}