/* ═══════════════════════════════════════════════════
   AEOGEO.pro — Dark Edgy Theme + Glitch FX
   Shared across all pages
   ═══════════════════════════════════════════════════ */

/* ─── DARKER OVERRIDES ─── */
:root {
  --bg-deep: #010409 !important;
  --bg-card: #06091a !important;
  --bg-card-hover: #0a0f28 !important;
  --bg-surface: #030612 !important;
  --text-primary: #d4dae8 !important;
  --text-secondary: #6b7a94 !important;
  --text-muted: #3a4560 !important;
  --border: rgba(0, 229, 255, 0.05) !important;
  --border-hover: rgba(0, 229, 255, 0.15) !important;
}

body {
  background: #010409 !important;
}

/* ─── NOISE GRAIN OVERLAY ─── */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ─── SCANLINES ─── */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  opacity: 0.4;
}

/* ─── GLITCH CONTAINER ─── */
.glitch-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Horizontal glitch bars that sweep */
.glitch-bar {
  position: absolute;
  left: -5%;
  width: 110%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 229, 255, 0.03) 20%,
    rgba(0, 229, 255, 0.06) 50%,
    rgba(0, 229, 255, 0.03) 80%,
    transparent 100%
  );
  opacity: 0;
  will-change: transform, opacity;
}

.glitch-bar-1 {
  height: 2px;
  top: 15%;
  animation: glitchSweep1 8s ease-in-out infinite;
}
.glitch-bar-2 {
  height: 1px;
  top: 40%;
  animation: glitchSweep2 12s ease-in-out infinite 3s;
}
.glitch-bar-3 {
  height: 3px;
  top: 65%;
  animation: glitchSweep3 10s ease-in-out infinite 6s;
}
.glitch-bar-4 {
  height: 1px;
  top: 85%;
  animation: glitchSweep1 14s ease-in-out infinite 2s;
}

@keyframes glitchSweep1 {
  0%, 85%, 100% { opacity: 0; transform: translateX(0) scaleX(1); }
  88% { opacity: 1; transform: translateX(5%) scaleX(0.8); }
  90% { opacity: 0.8; transform: translateX(-3%) scaleX(1.2); }
  93% { opacity: 1; transform: translateX(2%) scaleX(0.6); }
  96% { opacity: 0; transform: translateX(0) scaleX(1); }
}

@keyframes glitchSweep2 {
  0%, 78%, 100% { opacity: 0; transform: translateX(0); }
  80% { opacity: 0.7; transform: translateX(-8%); }
  82% { opacity: 1; transform: translateX(4%); }
  84% { opacity: 0.5; transform: translateX(-2%); }
  87% { opacity: 0; transform: translateX(0); }
}

@keyframes glitchSweep3 {
  0%, 70%, 100% { opacity: 0; transform: translateX(0) scaleX(1); }
  72% { opacity: 0.6; transform: translateX(6%) scaleX(1.5); }
  74% { opacity: 1; transform: translateX(-4%) scaleX(0.5); }
  76% { opacity: 0.4; transform: translateX(3%) scaleX(1.1); }
  79% { opacity: 0; transform: translateX(0) scaleX(1); }
}

/* Glitch block artifacts */
.glitch-block {
  position: absolute;
  background: rgba(0, 229, 255, 0.02);
  border-left: 1px solid rgba(0, 229, 255, 0.06);
  opacity: 0;
  will-change: opacity, transform;
}

.glitch-block-1 {
  width: 30%;
  height: 4px;
  top: 25%;
  left: 10%;
  animation: blockGlitch1 6s steps(1) infinite;
}
.glitch-block-2 {
  width: 45%;
  height: 2px;
  top: 55%;
  right: 5%;
  animation: blockGlitch2 9s steps(1) infinite 2s;
}
.glitch-block-3 {
  width: 20%;
  height: 6px;
  top: 78%;
  left: 30%;
  animation: blockGlitch3 7s steps(1) infinite 4s;
}
.glitch-block-4 {
  width: 15%;
  height: 3px;
  top: 35%;
  right: 15%;
  animation: blockGlitch1 11s steps(1) infinite 1s;
}
.glitch-block-5 {
  width: 50%;
  height: 1px;
  top: 48%;
  left: 0;
  animation: blockGlitch2 8s steps(1) infinite 5s;
}

@keyframes blockGlitch1 {
  0%, 89%, 95%, 100% { opacity: 0; }
  90% { opacity: 1; transform: translateX(4px); }
  92% { opacity: 0.6; transform: translateX(-8px); }
  94% { opacity: 0.8; transform: translateX(2px); }
}

@keyframes blockGlitch2 {
  0%, 82%, 90%, 100% { opacity: 0; }
  83% { opacity: 0.7; transform: translateX(-6px); }
  85% { opacity: 1; transform: translateX(10px); }
  87% { opacity: 0.4; transform: translateX(-3px); }
  89% { opacity: 0; }
}

@keyframes blockGlitch3 {
  0%, 75%, 82%, 100% { opacity: 0; }
  76% { opacity: 1; transform: translateX(12px) scaleX(1.5); }
  78% { opacity: 0.5; transform: translateX(-6px) scaleX(0.8); }
  80% { opacity: 0.8; transform: translateX(3px) scaleX(1.2); }
}

/* RGB split flicker on glitch bars */
.glitch-rgb {
  position: absolute;
  width: 100%;
  height: 1px;
  opacity: 0;
  will-change: opacity;
}
.glitch-rgb-r {
  top: 30%;
  background: rgba(255, 0, 50, 0.04);
  box-shadow: 0 0 20px rgba(255, 0, 50, 0.02);
  animation: rgbFlick 5s steps(1) infinite;
}
.glitch-rgb-g {
  top: 30.15%;
  background: rgba(0, 255, 100, 0.03);
  animation: rgbFlick 5s steps(1) infinite 0.1s;
}
.glitch-rgb-b {
  top: 60%;
  background: rgba(0, 100, 255, 0.04);
  box-shadow: 0 0 20px rgba(0, 100, 255, 0.02);
  animation: rgbFlick 7s steps(1) infinite 3s;
}

@keyframes rgbFlick {
  0%, 92%, 97%, 100% { opacity: 0; }
  93% { opacity: 1; transform: translateX(3px); }
  95% { opacity: 0.6; transform: translateX(-5px); }
  96% { opacity: 1; transform: translateX(1px); }
}

/* ─── GLITCH TEXT EFFECT (apply to hero titles) ─── */
.glitch-text {
  position: relative;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.glitch-text::before {
  color: rgba(255, 0, 80, 0.04);
  animation: glitchText1 4s steps(2) infinite;
  clip-path: inset(0 0 65% 0);
}
.glitch-text::after {
  color: rgba(0, 229, 255, 0.04);
  animation: glitchText2 4s steps(2) infinite 0.5s;
  clip-path: inset(60% 0 0 0);
}

@keyframes glitchText1 {
  0%, 87%, 100% { transform: translate(0); }
  88% { transform: translate(-3px, -1px); }
  90% { transform: translate(2px, 1px); }
  92% { transform: translate(-1px, 0); }
}
@keyframes glitchText2 {
  0%, 90%, 100% { transform: translate(0); }
  91% { transform: translate(3px, 1px); }
  93% { transform: translate(-2px, -1px); }
  95% { transform: translate(1px, 0); }
}

/* ─── VIGNETTE ─── */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    transparent 40%,
    rgba(1, 4, 9, 0.6) 100%
  );
}

/* ─── EDGIER CARD BORDERS ─── */
.service-card,
.problem-card,
.method-card,
.result-card,
.proof-card,
.why-card,
.faq-item,
.pain-item,
.shift-item,
.benefit-item {
  border-color: rgba(255, 255, 255, 0.03) !important;
}

.service-card:hover,
.problem-card:hover,
.method-card:hover,
.result-card:hover,
.proof-card:hover,
.why-card:hover,
.faq-item.active {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Sharper card backgrounds */
.service-card,
.method-card,
.result-card,
.proof-card,
.why-card {
  background: rgba(4, 8, 24, 0.8) !important;
  backdrop-filter: blur(4px);
}

/* ─── EDGIER NAV ─── */
nav.scrolled {
  background: rgba(1, 4, 9, 0.92) !important;
  border-bottom-color: rgba(255, 255, 255, 0.03) !important;
}

/* ─── EDGIER SECTION BORDERS ─── */
section {
  border-color: rgba(255, 255, 255, 0.02) !important;
}

/* ─── DARKER HERO GRADIENT (override per page via inline) ─── */
#hero {
  background: linear-gradient(135deg, #010409 0%, #060e20 50%, #030815 100%) !important;
}

/* ─── FOOTER DARKER ─── */
footer {
  border-top-color: rgba(255, 255, 255, 0.03) !important;
  background: #010409;
}

/* ─── DEEPER FAQ ─── */
.faq-item {
  background: rgba(4, 8, 24, 0.6) !important;
}

/* ─── SIDEBAR CARDS ─── */
.sidebar-cta,
.sidebar-stats {
  background: rgba(4, 8, 24, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.03) !important;
}

/* ─── PROOF / RESULTS SECTION BG ─── */
#proof, #results, #faq, #pain, #shift, #services, #why-us, #how-it-works, #problem {
  background: #020610 !important;
}

/* ─── SLIGHTLY HARSHER GLOW ─── */
.btn-primary {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* ─── HERO BG GRID DIMMER ─── */
.hero-bg-grid {
  opacity: 0.7;
}

/* ─── PAIN / PROBLEM VISUAL CARDS ─── */
.pain-visual-card,
.problem-visual,
.shift-visual-card {
  background: rgba(4, 8, 24, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.03) !important;
}

/* ─── AI CHAT / GEN CARD DARKER ─── */
.ai-chat-card,
.gen-card,
.hero-card,
.future-card {
  background: rgba(4, 8, 24, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
}

/* ─── VS TABLE / TRI COMPARE ─── */
.vs-table,
.tri-compare {
  background: rgba(4, 8, 24, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.03) !important;
}

/* ─── FLOATING CARDS ─── */
.hero-float-card {
  background: rgba(4, 8, 24, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(10px);
}

/* ─── STEP CIRCLES ─── */
.step-number,
.step-circle,
.step-v-circle {
  background: rgba(4, 8, 24, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
}

/* ─── CTA SECTION DEEPER ─── */
.cta-bg {
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(0, 229, 255, 0.04) 0%, transparent 100%),
    #010409 !important;
}

/* ─── BENEFIT VISUAL CARDS ─── */
.benefit-visual-card {
  background: rgba(4, 8, 24, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.03) !important;
}

/* ─── EDGIER HOVER STATES ─── */
a.btn-primary:hover,
button.btn-primary:hover {
  filter: brightness(1.1);
}

/* ─── MOBILE NAV ─── */
.nav-links.open {
  background: rgba(1, 4, 9, 0.97) !important;
  border-bottom-color: rgba(255, 255, 255, 0.03) !important;
}