/* ════════════════════════════════════════════════════════════════════
   GHS THEME — DEEP BLACK · NAVY · ELECTRIC BLUE · PURPLE
   Premium SaaS aesthetic · stronger glassmorphism · controlled motion
   Override layer — loaded AFTER ghs-premium.css
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* New premium palette */
  --bg:#0a0a12;        /* deep black with navy whisper */
  --bg2:#070710;       /* deeper */
  --bg3:#10101c;
  --surface:rgba(18, 20, 38, 0.55);
  --surface-2:rgba(22, 24, 44, 0.7);
  --card:rgba(18, 20, 38, 0.55);
  --card2:rgba(24, 27, 50, 0.7);

  /* Electric blue is the new primary */
  --neon:#3b82f6;
  --neon2:#60a5fa;
  --neon-dark:#1d4ed8;
  --neon-soft:rgba(59, 130, 246, 0.18);

  /* Purple secondary */
  --purple:#8b5cf6;
  --purple2:#a78bfa;
  --purple-soft:rgba(139, 92, 246, 0.18);

  /* Text */
  --text:#f1f5f9;
  --muted:#94a3b8;
  --border:rgba(255, 255, 255, 0.07);
  --border-strong:rgba(255, 255, 255, 0.12);
  --glow:0 8px 40px rgba(59, 130, 246, 0.28);
}

/* ── BASE ─────────────────────────────────────────── */
body{
  background:#0a0a12 !important;
  color:var(--text) !important;
  font-family:'Inter','Nexa-Regular',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  letter-spacing: -0.005em;
}
/* Replace the green dot grid with a cooler navy grid */
body::before{
  background-image: linear-gradient(rgba(96,165,250,0.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(96,165,250,0.025) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
}
body::after{
  background:
    radial-gradient(circle at 14% 20%, rgba(59,130,246,0.08), transparent 38%),
    radial-gradient(circle at 86% 78%, rgba(139,92,246,0.07), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(34,211,238,0.025), transparent 60%) !important;
  opacity:.55 !important;
}

/* ── SCROLLBAR ────────────────────────────────────── */
::-webkit-scrollbar-thumb{background:linear-gradient(180deg, #1d4ed8, #3b82f6) !important;border:2px solid #07070f !important;}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, #3b82f6, #60a5fa) !important;}
* { scrollbar-color: #3b82f6 #07070f !important; }
::-webkit-scrollbar-track{background:#07070f !important;}
::selection{background:rgba(59,130,246,0.45); color:#fff;}

/* ── SCROLL PROGRESS BAR ───────────────────────────── */
.scroll-progress{
  background:linear-gradient(90deg, #1d4ed8, #3b82f6, #8b5cf6, #60a5fa) !important;
  box-shadow:0 0 16px rgba(59,130,246,0.65), 0 0 4px rgba(139,92,246,0.9) !important;
}

/* ── NAV: deep glass ──────────────────────────────── */
nav{
  background: linear-gradient(180deg, rgba(10,10,18,0.78), rgba(10,10,18,0.50)) !important;
  border-bottom: 1px solid rgba(96,165,250,0.10) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
}
nav.scrolled{
  background: rgba(7,7,15,0.82) !important;
  border-bottom-color: rgba(96,165,250,0.18) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 1px 0 rgba(96,165,250,0.10) inset !important;
}
.nav-links a{color: rgba(241,245,249,0.62) !important;}
.nav-links a:hover{color: #fff !important;}
.nav-links a.active{color: #60a5fa !important;}
.nav-links a:not(.nav-cta):not(.nav-ai)::after{
  background: linear-gradient(90deg, transparent, #60a5fa, #a78bfa, transparent) !important;
}
.nav-ai{
  background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(59,130,246,0.12)) !important;
  border-color: rgba(139,92,246,0.35) !important;
  color: #a78bfa !important;
}
.nav-ai:hover, .nav-ai.active{ background: rgba(139,92,246,0.22) !important; color:#c4b5fd !important; }

/* ── BUTTONS: electric blue with glow ──────────────── */
.btn-primary, .nav-cta, .nav-signup, .fcourse-btn-enroll, .chat-send,
.btn-enroll, .btn-enroll-lg, .detail-btn-enroll{
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #6366f1 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(59,130,246,0.35), 0 0 0 1px rgba(96,165,250,0.35) inset !important;
  position: relative !important;
  overflow: hidden !important;
  transition: background .25s ease, color .25s ease, box-shadow .3s ease, transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s ease !important;
}
.btn-primary:hover, .nav-cta:hover, .nav-signup:hover, .fcourse-btn-enroll:hover,
.btn-enroll:hover, .btn-enroll-lg:hover, .detail-btn-enroll:hover{
  box-shadow: 0 14px 36px rgba(59,130,246,0.55), 0 0 0 1px rgba(167,139,250,0.55) inset, 0 0 30px rgba(139,92,246,0.35) !important;
  filter: brightness(1.08) saturate(1.1);
  transform: translateY(-2px) scale(1.025) !important;
}
.btn-primary:active, .nav-cta:active, .nav-signup:active, .fcourse-btn-enroll:active,
.btn-enroll:active, .btn-enroll-lg:active, .detail-btn-enroll:active{
  transform: translateY(0) scale(.98) !important;
  transition-duration: .05s !important;
}
/* Shine sweep on hover */
.btn-enroll::before, .btn-enroll-lg::before, .detail-btn-enroll::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,.35) 50%, transparent 75%);
  transform:translateX(-120%); transition:transform .7s ease; pointer-events:none;
}
.btn-enroll:hover::before, .btn-enroll-lg:hover::before, .detail-btn-enroll:hover::before{
  transform: translateX(120%);
}
.btn-primary.is-loading::after, .nav-cta.is-loading::after, .nav-signup.is-loading::after, .fcourse-btn-enroll.is-loading::after,
.btn-enroll.is-loading::after, .btn-enroll-lg.is-loading::after, .detail-btn-enroll.is-loading::after{
  border-color: rgba(255,255,255,0.25) !important; border-top-color:#fff !important;
}

.btn-ghost, .fcourse-btn-detail, .nav-signin{
  border-color: rgba(96,165,250,0.28) !important;
  color: #f1f5f9 !important;
  background: rgba(18,20,38,0.45) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-ghost:hover, .fcourse-btn-detail:hover, .nav-signin:hover{
  border-color: rgba(167,139,250,0.55) !important;
  background: rgba(59,130,246,0.10) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.4), 0 0 0 1px rgba(167,139,250,0.25) inset !important;
}

/* ── GLASSMORPHIC CARDS ────────────────────────────── */
.module-card, .review-card, .step, .fcourse-card, .feature-card, .role-card, .tier-card, .plan-card, .sstat, .skills-stats{
  background: linear-gradient(160deg, rgba(20,22,42,0.62), rgba(14,16,30,0.62)) !important;
  border: 1px solid rgba(96,165,250,0.10) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02) inset !important;
}
.module-card:hover, .review-card:hover, .fcourse-card:hover, .feature-card:hover, .role-card:hover, .tier-card:hover, .plan-card:hover{
  border-color: rgba(96,165,250,0.32) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.6),
    0 0 0 1px rgba(96,165,250,0.30) inset,
    0 0 50px rgba(59,130,246,0.20),
    0 0 80px rgba(139,92,246,0.10) !important;
}
.module-card::before{ background:linear-gradient(90deg,transparent, #60a5fa, #a78bfa, transparent) !important; }
.module-card::after, .fcourse-card::after{
  background: conic-gradient(from var(--ang,0deg), transparent 0deg, rgba(96,165,250,0.6) 35deg, rgba(167,139,250,0.6) 60deg, transparent 90deg, transparent 360deg) !important;
}

/* steps grid background */
.steps-grid{ background: rgba(96,165,250,0.05) !important; border-color: rgba(96,165,250,0.10) !important; }
.step{ background: linear-gradient(160deg, rgba(20,22,42,0.55), rgba(14,16,30,0.55)) !important; }
.step:hover{ background: linear-gradient(160deg, rgba(28,30,55,0.7), rgba(20,22,42,0.7)) !important; }

/* ── 3D ICONS — re-skinned to blue/purple/cyan ───── */
.i3-green{
  background:linear-gradient(145deg,#1e3a8a,#0c1a3e) !important;
  border:1px solid rgba(96,165,250,0.32) !important;
  color:#60a5fa !important;
  box-shadow:5px 6px 18px rgba(0,0,0,0.6),-1px -1px 5px rgba(96,165,250,0.12),inset 0 1px 0 rgba(96,165,250,0.25),inset 0 -3px 6px rgba(0,0,0,0.4) !important;
}
.i3-blue{
  background:linear-gradient(145deg,#2e1065,#1a0633) !important;
  border:1px solid rgba(167,139,250,0.32) !important;
  color:#a78bfa !important;
  box-shadow:5px 6px 18px rgba(0,0,0,0.6),-1px -1px 5px rgba(167,139,250,0.12),inset 0 1px 0 rgba(167,139,250,0.25),inset 0 -3px 6px rgba(0,0,0,0.4) !important;
}
.i3-purple{
  background:linear-gradient(145deg,#164e63,#0a2a36) !important;
  border:1px solid rgba(34,211,238,0.30) !important;
  color:#22d3ee !important;
  box-shadow:5px 6px 18px rgba(0,0,0,0.6),-1px -1px 5px rgba(34,211,238,0.10),inset 0 1px 0 rgba(34,211,238,0.22),inset 0 -3px 6px rgba(0,0,0,0.4) !important;
}
.i3-amber{
  background:linear-gradient(145deg,#2e1065,#1a0633) !important;
  border:1px solid rgba(167,139,250,0.28) !important;
  color:#a78bfa !important;
}
.i3-red{
  background:linear-gradient(145deg,#3a1a3a,#240e24) !important;
  border:1px solid rgba(244,114,182,0.30) !important;
  color:#f472b6 !important;
  box-shadow:5px 6px 18px rgba(0,0,0,0.6),inset 0 1px 0 rgba(244,114,182,0.22),inset 0 -3px 6px rgba(0,0,0,0.4) !important;
}

/* Avatar rings on reviews */
.review-avatar{
  background:linear-gradient(145deg,#1e3a8a,#0c1a3e) !important;
  border-color: rgba(96,165,250,0.32) !important;
  color:#60a5fa !important;
}

/* ── TITLE GRADIENTS ───────────────────────────────── */
.section-title span, .hero-text h1 span{
  background-image:linear-gradient(120deg, #60a5fa 0%, #a78bfa 40%, #22d3ee 70%, #60a5fa 100%) !important;
  background-size:220% 100% !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
.section-tag{ color:#a78bfa !important; }

/* ── HERO BADGE ────────────────────────────────────── */
.hero-badge{
  background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(139,92,246,0.08)) !important;
  border: 1px solid rgba(96,165,250,0.28) !important;
  color: #a78bfa !important;
  box-shadow: 0 0 0 0 rgba(96,165,250,0.20);
}
.hero-badge::before{ color:#60a5fa !important; }

/* ── HERO: replace heavy video with CSS aurora ────── */
.hero-video{ display:none !important; }
.hero-three{ opacity: 0.7 !important; }
.hero-overlay{
  background:
    radial-gradient(ellipse 80% 60% at 30% 30%, rgba(59,130,246,0.18), transparent 60%),
    radial-gradient(ellipse 70% 55% at 75% 70%, rgba(139,92,246,0.16), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(34,211,238,0.10), transparent 60%),
    linear-gradient(180deg, rgba(7,7,15,0.55) 0%, rgba(7,7,15,0.25) 45%, rgba(7,7,15,0.80) 100%) !important;
}

/* Animated aurora background — pure CSS, very light */
.hero::before{
  background:
    radial-gradient(ellipse 60% 50% at 18% 28%, rgba(59,130,246,0.20), transparent 60%),
    radial-gradient(ellipse 55% 45% at 82% 72%, rgba(139,92,246,0.18), transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 110%, rgba(34,211,238,0.12), transparent 60%) !important;
  filter: blur(36px) !important;
}

.hero{ background:#070710 !important; }

/* Aurora ribbons — soft animated mesh */
.hero::after{
  content:'';
  position:absolute; inset:-10%;
  z-index:1;
  background:
    conic-gradient(from 0deg at 30% 40%, transparent 0deg, rgba(59,130,246,0.18) 60deg, transparent 120deg, transparent 360deg),
    conic-gradient(from 180deg at 75% 70%, transparent 0deg, rgba(139,92,246,0.16) 60deg, transparent 120deg, transparent 360deg);
  filter: blur(50px) saturate(140%);
  animation: auroraDrift 28s ease-in-out infinite alternate;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:.85;
}
@keyframes auroraDrift{
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(40px,-20px,0) rotate(8deg) scale(1.06); }
  100% { transform: translate3d(-30px,30px,0) rotate(-6deg) scale(1.04); }
}

.hero-bg-orb.orb1{
  background:radial-gradient(circle, rgba(59,130,246,0.18), transparent 60%) !important;
  filter:blur(80px) !important;
}
.hero-bg-orb.orb2{
  background:radial-gradient(circle, rgba(139,92,246,0.16), transparent 60%) !important;
  filter:blur(80px) !important;
}

.hero-illustration img{
  width: 100% !important;
  max-width: 560px !important;
  aspect-ratio: 16 / 11 !important;
  object-fit: cover !important;
  border-radius: 20px !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,0.7),
    0 0 70px rgba(59,130,246,0.22),
    0 0 0 1px rgba(96,165,250,0.22) inset !important;
  filter: brightness(0.85) saturate(1.05) hue-rotate(-8deg) !important;
}

/* Tighten hero spacing — image should feel anchored, not floating in a void */
.hero{
  min-height: auto !important;
  padding: 110px 24px 70px !important;
}
.hero-layout{ gap: 60px !important; }
.hero-illustration{
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

@media (min-width: 901px){
  /* Desktop — image fills its grid column edge-to-edge */
  .hero-illustration img{
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }
  .hero-illustration{ max-width: none; }
  .hero{ padding: 130px 24px 90px !important; }
}

@media (max-width: 900px){
  /* Mobile / tablet — bigger, taller image, less empty space */
  .hero{ padding: 90px 20px 50px !important; }
  .hero-layout{ gap: 36px !important; }
  .hero-illustration img{
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }
}

@media (max-width: 600px){
  .hero{ padding: 80px 16px 40px !important; }
  .hero-layout{ gap: 28px !important; }
  .hero-illustration img{
    aspect-ratio: 5 / 4 !important;
    border-radius: 16px !important;
  }
}

/* ── STATS ─────────────────────────────────────────── */
.stat-num .neon{ color:#60a5fa !important; }
.sstat-num{ color:#60a5fa !important; }
.hero-stats{ border-top-color: rgba(96,165,250,0.10) !important; }

/* ── REVIEWS ───────────────────────────────────────── */
.review-stars{ color:#60a5fa !important; }
.review-text{ color:#cbd5e1 !important; }
.review-game{ color: var(--muted) !important; }

/* ── CTA BANNER ────────────────────────────────────── */
.cta-banner .cta-inner{
  background: linear-gradient(160deg, rgba(59,130,246,0.10), rgba(139,92,246,0.08)) !important;
  border: 1px solid rgba(96,165,250,0.22) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 60px rgba(59,130,246,0.10) inset !important;
}
.cta-inner::before{
  background: radial-gradient(ellipse at center, rgba(59,130,246,0.10), transparent 65%) !important;
}

/* ── SECTION DIVIDERS ──────────────────────────────── */
section + section::before{
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.30), rgba(167,139,250,0.30), transparent) !important;
}

/* ── LIVE CHAT ─────────────────────────────────────── */
.live-chat-bubble{
  background: radial-gradient(circle at 30% 30%, #60a5fa, #1d4ed8) !important;
  box-shadow: 0 8px 28px rgba(59,130,246,0.45), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -2px 6px rgba(0,0,0,0.3) !important;
}
.live-chat-bubble::before{
  background: radial-gradient(circle, rgba(59,130,246,0.35), transparent 70%) !important;
}
.chat-window{
  background: linear-gradient(160deg, rgba(20,22,42,0.92), rgba(14,16,30,0.92)) !important;
  border: 1px solid rgba(96,165,250,0.18) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.65), 0 0 30px rgba(59,130,246,0.10) !important;
}
.chat-header{
  background: linear-gradient(135deg, #1e3a8a, #312e81) !important;
}
.chat-avatar{
  background: linear-gradient(145deg, #1e3a8a, #0c1a3e) !important;
  color: #60a5fa !important;
}
.online-dot{ background:#60a5fa !important; box-shadow:0 0 6px #60a5fa !important; }
.chat-msg.user{ background:#3b82f6 !important; color:#fff !important; }
.chat-msg.bot{ background: rgba(28,30,55,0.85) !important; border-color: rgba(96,165,250,0.10) !important; color:#e2e8f0 !important; }
.chat-msg.bot b{ color:#fff !important; }
.chat-msg.bot a{ color:#a78bfa !important; }
.chat-send{ color:#fff !important; }
.qbtn{
  background: rgba(59,130,246,0.10) !important;
  border-color: rgba(96,165,250,0.28) !important;
  color: #a78bfa !important;
}
.qbtn:hover{ background: rgba(59,130,246,0.20) !important; border-color: rgba(167,139,250,0.55) !important; color:#c4b5fd !important; }

/* ── FOOTER ────────────────────────────────────────── */
footer{ background: linear-gradient(180deg, #070710, #050509) !important; }
footer::before{
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.35), rgba(167,139,250,0.35), transparent) !important;
}
.footer-col a:hover{ color: #60a5fa !important; }
/* ── FOOTER SOCIAL ICONS — fill with theme gradient on hover ── */
.fsoc-link{
  background: rgba(20,22,42,0.55) !important;
  border: 1px solid rgba(96,165,250,0.12) !important;
  color: #94a3b8 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .3s ease !important;
}
.fsoc-link::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #8b5cf6 100%);
  opacity:0; transition: opacity .3s ease; z-index:0;
  border-radius: inherit;
}
.fsoc-link > *{ position: relative; z-index: 1; }
.fsoc-link i{ position: relative; z-index: 1; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.fsoc-link:hover{
  background: transparent !important;
  border-color: rgba(167,139,250,0.65) !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow:
    0 10px 28px rgba(59,130,246,0.45),
    0 0 24px rgba(139,92,246,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.10) !important;
}
.fsoc-link:hover::before{ opacity:1; }
.fsoc-link:hover i{ transform: scale(1.15); }
.fsoc-link:active{ transform: translateY(-1px) scale(.98) !important; transition-duration: .08s !important; }
.f-badge{
  background: rgba(59,130,246,0.08) !important;
  border-color: rgba(96,165,250,0.18) !important;
  color: #a78bfa !important;
}
.f-badge i{ color: #60a5fa !important; }

/* ── SKILLS COURSES ────────────────────────────────── */
.fcourse-level-badge{ background: rgba(96,165,250,0.92) !important; color: #07070f !important; }
.fcourse-route{ background: rgba(167,139,250,0.12) !important; color: #a78bfa !important; }
.fcourse-chip i{ color: #60a5fa !important; }
.fcourse-image::after{ background: linear-gradient(180deg, transparent 50%, rgba(7,7,15,0.7)) !important; }

/* ── INPUT FOCUS ───────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):focus, textarea:focus, select:focus{
  border-color: rgba(96,165,250,0.55) !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.18), 0 8px 24px rgba(0,0,0,0.45) !important;
}
input, textarea, select{
  background: rgba(18,20,38,0.45) !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
}

/* ── BACK TO TOP ───────────────────────────────────── */
.to-top{
  background: rgba(18,20,38,0.85) !important;
  border-color: rgba(96,165,250,0.35) !important;
  color: #60a5fa !important;
}
.to-top:hover{
  background: rgba(59,130,246,0.18) !important;
  box-shadow: 0 8px 22px rgba(59,130,246,0.4) !important;
}

/* ── FOCUS RINGS ───────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline-color: #60a5fa !important;
}

/* ── REFINE TYPOGRAPHY ─────────────────────────────── */
.hero-text h1{ letter-spacing: -1.5px !important; font-weight: 900 !important; }
.section-title{ letter-spacing: -0.8px !important; }
.section-desc{ color: #94a3b8 !important; }

/* ── DARK BG REGIONS ───────────────────────────────── */
.modules{ background: #070710 !important; }
.skills-feature{ background: #070710 !important; }

/* ── LOADING SPINNER (page splash) ─────────────────── */
.ghs-splash{ background:#070710 !important; }
.ghs-splash-ring{
  border-color: rgba(59,130,246,0.18) !important;
  border-top-color: #3b82f6 !important;
  filter: drop-shadow(0 0 14px rgba(96,165,250,0.55)) !important;
}

/* ── CHATBOT (chatbot.js injects its own styles) ──── */
.ghs-chat-bubble{
  background: radial-gradient(circle at 30% 30%, #60a5fa, #1d4ed8) !important;
  color:#fff !important;
  box-shadow: 0 8px 28px rgba(59,130,246,0.45), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -2px 6px rgba(0,0,0,0.3) !important;
}
.ghs-chat-bubble:hover{ box-shadow: 0 12px 36px rgba(59,130,246,0.65) !important; }
.ghs-chat-window{
  background: linear-gradient(160deg, rgba(20,22,42,0.92), rgba(14,16,30,0.92)) !important;
  border-color: rgba(96,165,250,0.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.ghs-chat-header{
  background: linear-gradient(135deg, #1e3a8a, #312e81) !important;
}
.ghs-chat-avatar{
  background: linear-gradient(145deg, #1e3a8a, #0c1a3e) !important;
  color: #60a5fa !important;
}
.ghs-chat-online-dot{ background:#60a5fa !important; box-shadow:0 0 6px #60a5fa !important; }
.ghs-chat-msg.user{ background:#3b82f6 !important; color:#fff !important; }
.ghs-chat-msg.bot{ background: rgba(28,30,55,0.85) !important; color:#e2e8f0 !important; }
.ghs-chat-msg.bot a{ color:#a78bfa !important; }
.ghs-chat-send{ background:#3b82f6 !important; color:#fff !important; }
.ghs-chat-send:hover{ background:#60a5fa !important; }
.ghs-chat-qbtn{
  background: rgba(59,130,246,0.10) !important;
  border-color: rgba(96,165,250,0.28) !important;
  color: #a78bfa !important;
}
.ghs-chat-qbtn:hover{ background: rgba(59,130,246,0.20) !important; border-color: rgba(167,139,250,0.55) !important; color:#c4b5fd !important; }

/* ── LOGO: recolor neon green → electric blue ──────── */
/* The source PNG has white "GAME"/"Squad" text + neon-green gamepad + "Help".
   Hue-rotate shifts the green hue (~120°) to electric blue (~220°);
   whites are unaffected since hue-rotate doesn't touch grayscale. */
.nav-logo img,
.footer-brand .nav-logo img,
.footer-brand a img,
footer .footer-brand img,
.footer-brand img[src*="GHS"],
img[src*="GHS%20Logo"],
img[src*="GHS Logo"]{
  filter: hue-rotate(135deg) saturate(1.25) brightness(0.98) drop-shadow(0 0 14px rgba(59,130,246,0.28));
  transition: filter 0.3s ease;
}
.nav-logo:hover img,
.footer-brand a:hover img{
  filter: hue-rotate(135deg) saturate(1.35) brightness(1.06) drop-shadow(0 0 22px rgba(96,165,250,0.50));
}
.nav-logo-dot{ color: #60a5fa !important; }

/* ════════════════════════════════════════════════════
   SUBPAGE BANNERS — aurora effect on every page banner
   (mirrors the index.html hero treatment)
   ════════════════════════════════════════════════════ */
.page-hero,
.detail-hero-centered,
.doc-header,
.cta-banner{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  background: #070710 !important;
}

/* Layer 1: soft blurred radial blobs (the "orbs") */
.page-hero::before,
.detail-hero-centered::before,
.doc-header::before{
  content:'';
  position:absolute; inset:-15%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 55% 60% at 18% 30%, rgba(59,130,246,0.22), transparent 60%),
    radial-gradient(ellipse 50% 50% at 82% 70%, rgba(139,92,246,0.20), transparent 60%),
    radial-gradient(ellipse 70% 45% at 50% 110%, rgba(34,211,238,0.14), transparent 60%);
  filter: blur(36px) saturate(120%);
}

/* Layer 2: animated aurora conic ribbons */
.page-hero::after,
.detail-hero-centered::after,
.doc-header::after{
  content:'';
  position:absolute; inset:-10%;
  z-index:1;
  pointer-events:none;
  background:
    conic-gradient(from 0deg at 30% 40%, transparent 0deg, rgba(59,130,246,0.18) 60deg, transparent 120deg, transparent 360deg),
    conic-gradient(from 180deg at 75% 70%, transparent 0deg, rgba(139,92,246,0.16) 60deg, transparent 120deg, transparent 360deg);
  filter: blur(50px) saturate(140%);
  animation: auroraDrift 28s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  opacity: .85;
}

/* Ensure banner content sits above the aurora layers */
.page-hero > *,
.detail-hero-centered > *,
.doc-header > *,
.cta-banner > *{
  position: relative;
  z-index: 2;
}
/* …but keep the Three.js canvas behind content AND absolutely positioned
   (otherwise the universal "> *" rule above forces position:relative,
   the canvas takes flow space, and pushes content down by its height) */
.page-hero > .hero-three,
.detail-hero-centered > .hero-three,
.doc-header > .hero-three,
.cta-banner > .hero-three{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Cta banner gets a slightly tighter aurora pair */
.cta-banner::before{
  content:'';position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 50% 55% at 25% 40%, rgba(59,130,246,0.16), transparent 60%),
    radial-gradient(ellipse 50% 55% at 78% 65%, rgba(139,92,246,0.14), transparent 60%);
  filter: blur(40px);
}
.cta-banner::after{
  content:'';position:absolute; inset:-8%; z-index:1; pointer-events:none;
  background:
    conic-gradient(from 0deg at 35% 50%, transparent 0deg, rgba(96,165,250,0.12) 60deg, transparent 120deg, transparent 360deg),
    conic-gradient(from 180deg at 70% 50%, transparent 0deg, rgba(167,139,250,0.12) 60deg, transparent 120deg, transparent 360deg);
  filter: blur(45px) saturate(140%);
  animation: auroraDrift 32s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  opacity:.7;
}

/* Auth/AI pages — apply subtle aurora to their top section as well */
.page-hero, .detail-hero-centered, .doc-header, .cta-banner{
  border-bottom: 1px solid rgba(96,165,250,0.06);
}

/* Make sure auroraDrift is defined in scope (already in ghs-premium.css indirectly).
   Redeclare here to be self-contained: */
@keyframes auroraDrift{
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(40px,-20px,0) rotate(8deg) scale(1.06); }
  100% { transform: translate3d(-30px,30px,0) rotate(-6deg) scale(1.04); }
}

/* ── DOMAIN-SPECIFIC PAGE TINT FIXES ───────────────── */
.tier-card.featured, .plan-card.featured, .tier-card.recommended, .plan-card.recommended{
  border-color: rgba(167,139,250,0.45) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55), 0 0 60px rgba(139,92,246,0.20), 0 0 0 1px rgba(167,139,250,0.30) inset !important;
}