/* ═══════════════════════════════════════════════════════════
   GAMENHOR EFFECTS — gamenhor-effects.css
   ═══════════════════════════════════════════════════════════ */

/* ── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #080808; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #00ff87, #00cc6a);
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(0,255,135,0.4);
}
::-webkit-scrollbar-thumb:hover {
  background: #00ff87;
  box-shadow: 0 0 10px rgba(0,255,135,0.7);
}

/* ── GRAIN TEXTURE ─────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' 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)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

/* ── HERO BREATHING ORBS — all hero variants ───────────────── */
.hero::after,
.about-hero::after,
.guide-hero::after,
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 420px 320px at 15% 40%, rgba(0,255,135,0.055) 0%, transparent 70%),
    radial-gradient(ellipse 280px 200px at 85% 65%, rgba(0,255,135,0.035) 0%, transparent 65%),
    radial-gradient(ellipse 200px 260px at 50% 90%, rgba(0,255,135,0.025) 0%, transparent 60%);
  animation: orb-breathe 7s ease-in-out infinite alternate;
  z-index: 0;
}
.hero, .about-hero, .guide-hero, .page-hero {
  position: relative;
  overflow: hidden;
}
.hero-content, .about-layout, .guide-hero-inner {
  position: relative;
  z-index: 1;
}
.page-hero > * { position: relative; z-index: 1; }

@keyframes orb-breathe {
  0%   { opacity: 0.6; transform: scale(1); }
  50%  { opacity: 1;   transform: scale(1.06); }
  100% { opacity: 0.7; transform: scale(0.97); }
}

/* ── LOGO GLOW ─────────────────────────────────────────────── */
.logo span {
  text-shadow:
    0 0 8px rgba(0,255,135,0.7),
    0 0 20px rgba(0,255,135,0.35),
    0 0 40px rgba(0,255,135,0.15) !important;
}

/* ── STAT NUMBERS GLOW ─────────────────────────────────────── */
.stat-num {
  text-shadow:
    0 0 12px rgba(0,255,135,0.6),
    0 0 28px rgba(0,255,135,0.3),
    0 0 52px rgba(0,255,135,0.12) !important;
}

/* ── CHECK MARKS GLOW ──────────────────────────────────────── */
.sol-check,
.solution-check,
.prog-feat-icon.g {
  text-shadow:
    0 0 8px rgba(0,255,135,0.8),
    0 0 18px rgba(0,255,135,0.4) !important;
}

/* ── HERO ACCENT SHIMMER — targets span.accent in hero titles  */
.hero-h1 span.accent,
.hero-h span.accent,
.about-h span.accent,
.guide-h span.accent,
.cta-h span[style*="color:var(--neon)"],
.hero-h1 [data-i18n="hero_accent"],
span.accent {
  background: linear-gradient(
    90deg,
    #00ff87 0%,
    #80ffcc 35%,
    #00ff87 55%,
    #00e676 75%,
    #00ff87 100%
  ) !important;
  background-size: 250% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: shimmer 3.5s ease-in-out infinite;
  color: transparent !important;
}
@keyframes shimmer {
  0%   { background-position: 100% 50%; }
  50%  { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ── BADGE DOT PING ────────────────────────────────────────── */
.hero-badge::before,
.guide-free-badge::before {
  animation: ping 2s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(0,255,135,0.7), 0 0 8px rgba(0,255,135,0.9); }
  60%  { box-shadow: 0 0 0 7px rgba(0,255,135,0), 0 0 8px rgba(0,255,135,0.4); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,135,0),   0 0 8px rgba(0,255,135,0.9); }
}

/* ── PRIMARY BUTTONS GLOW ──────────────────────────────────── */
a.btn-neon, button.btn-neon, .btn.btn-neon, .btn-neon {
  background: linear-gradient(135deg, #00ff87 0%, #00e676 60%, #00ff87 100%) !important;
  background-size: 200% 200% !important;
  box-shadow: 0 4px 16px rgba(0,255,135,0.25) !important;
  transition: all 0.25s ease, background-position 0.4s ease !important;
  color: #080808 !important;
}
a.btn-neon:hover, button.btn-neon:hover, .btn-neon:hover {
  background-position: 100% 100% !important;
  box-shadow:
    0 6px 28px rgba(0,255,135,0.45),
    0 0 40px rgba(0,255,135,0.2),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transform: translateY(-1px);
  opacity: 1 !important;
}
a.btn-neon:active, .btn-neon:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 10px rgba(0,255,135,0.3) !important;
}

/* ── GOLD BUTTON GLOW ──────────────────────────────────────── */
a.btn-gold, .btn-gold {
  box-shadow: 0 4px 16px rgba(201,168,76,0.2) !important;
  transition: all 0.25s ease !important;
}
a.btn-gold:hover, .btn-gold:hover {
  box-shadow: 0 6px 28px rgba(201,168,76,0.4), 0 0 40px rgba(201,168,76,0.15) !important;
  transform: translateY(-1px);
  opacity: 1 !important;
}

/* ── FEATURED PLAN CARD GLOW ───────────────────────────────── */
.plan-card.featured {
  box-shadow:
    0 0 0 1px rgba(0,255,135,0.25),
    0 0 24px rgba(0,255,135,0.08),
    0 0 60px rgba(0,255,135,0.04),
    inset 0 0 30px rgba(0,255,135,0.03) !important;
}
.plan-card.featured:hover {
  box-shadow:
    0 0 0 1px rgba(0,255,135,0.4),
    0 0 36px rgba(0,255,135,0.14),
    0 0 80px rgba(0,255,135,0.06),
    inset 0 0 40px rgba(0,255,135,0.05) !important;
}

/* ── DIVIDER GRADIENT + GLOW ───────────────────────────────── */
.divider {
  background: linear-gradient(90deg, #00ff87 0%, rgba(0,255,135,0.3) 70%, transparent 100%) !important;
  box-shadow: 0 0 8px rgba(0,255,135,0.35), 0 0 20px rgba(0,255,135,0.1) !important;
  border-radius: 2px !important;
}

/* ── NAV CTA GLOW ──────────────────────────────────────────── */
.nav-cta {
  box-shadow: 0 0 12px rgba(0,255,135,0.25) !important;
  transition: box-shadow 0.2s ease, opacity 0.2s ease !important;
}
.nav-cta:hover {
  box-shadow: 0 0 22px rgba(0,255,135,0.45), 0 0 40px rgba(0,255,135,0.15) !important;
}

/* ── NAV FREE GUIDE GLOW ───────────────────────────────────── */
.nav-link.neon {
  text-shadow: 0 0 8px rgba(0,255,135,0.5) !important;
}

/* ── FAQ OPEN STATE ────────────────────────────────────────── */
.faq-item.open {
  box-shadow: 0 0 0 1px rgba(0,255,135,0.2), 0 4px 24px rgba(0,255,135,0.06) !important;
}
.faq-item.open .faq-q {
  background: rgba(0,255,135,0.04) !important;
}
.faq-item.open .faq-q-text {
  color: #00ff87 !important;
  text-shadow: 0 0 12px rgba(0,255,135,0.35) !important;
}

/* ── EYEBROW GLOW ──────────────────────────────────────────── */
.eyebrow {
  text-shadow: 0 0 10px rgba(0,255,135,0.4) !important;
}

/* ── NEON PRICE GLOW ───────────────────────────────────────── */
.plan-price.green,
.prog-price.green,
.price-big {
  text-shadow:
    0 0 16px rgba(0,255,135,0.5),
    0 0 36px rgba(0,255,135,0.2) !important;
}

/* ── CARD HOVER LIFT — all pages ───────────────────────────── */
.plan-card, .result-card, .inside-card, .process-step,
.credential-item, .value-card, .for-card, .compare-card, .faq-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.plan-card:hover, .result-card:hover, .inside-card:hover,
.process-step:hover, .credential-item:hover, .value-card:hover, .compare-card:hover {
  transform: translateY(-2px) !important;
}

/* ── SPOTS PULSE ───────────────────────────────────────────── */
.spots-note {
  animation: pulse-red 3s ease-in-out infinite;
}
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,80,80,0); }
  50%       { box-shadow: 0 0 0 4px rgba(255,80,80,0.08); }
}

/* ── GUIDE/APPLY BOX GLOW ──────────────────────────────────── */
.guide-mockup, .guide-form-box, .apply-card {
  box-shadow: 0 0 30px rgba(0,255,135,0.06), 0 0 60px rgba(0,255,135,0.03) !important;
}

/* ── PAGE ENTRY ANIMATION ──────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-hero { animation: fade-up 0.5s ease both; }
.page-h, .about-h, .guide-h, .hero-h1, .hero-h { animation: fade-up 0.5s 0.05s ease both; }
.page-sub, .about-sub, .guide-sub, .hero-sub    { animation: fade-up 0.5s 0.12s ease both; }