/* ══════════════════════════════════════════
   GENIEFX VISUAL ENHANCED — v2.0
   Premium Fintech Atmosphere System
══════════════════════════════════════════ */

/* ── SECTION A — CSS VARIABLES EXTENSION ── */
:root {
  /* Extended color tokens */
  --glow-blue-strong:   rgba(1, 129, 250, 0.18);
  --glow-blue-mid:      rgba(1, 129, 250, 0.10);
  --glow-blue-soft:     rgba(1, 129, 250, 0.05);
  --glow-lime-accent:   rgba(192, 240, 0, 0.08);
  --glow-lime-soft:     rgba(192, 240, 0, 0.04);
  --grid-line-color:    rgba(255, 255, 255, 0.032);
  --card-border-top:    rgba(255, 255, 255, 0.10);
  --card-border-side:   rgba(255, 255, 255, 0.04);
  --card-inner-top:     rgba(255, 255, 255, 0.025);
  --shadow-blue-card:   0 20px 60px rgba(1, 129, 250, 0.10), 0 4px 20px rgba(0,0,0,0.5);
}

/* ── SECTION B — GLOBAL BACKGROUND DEPTH SYSTEM ── */
body {
  background-color: #05070D;
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(1,129,250,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 90%, rgba(70,100,255,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 90% 20%, rgba(192,240,0,0.03) 0%, transparent 50%);
  background-attachment: fixed;
}

/* ── SECTION C — TRADING GRID PATTERN ── */
.trading-grid-bg {
  position: relative;
  /* isolation: isolate removed — was blocking particles canvas from showing through */
}

.trading-grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.trading-grid-bg > .container {
  position: relative;
  z-index: 1;
}

/* ── SECTION D — PREMIUM CARD SYSTEM ── */
.card,
.card-feature,
.stat-card,
.pricing-card,
.testimonial-card {
  background:
    linear-gradient(
      160deg,
      rgba(255,255,255,0.025) 0%,
      rgba(255,255,255,0.008) 40%,
      transparent 100%
    ),
    var(--bg-card, #141825);
  border: 1px solid;
  border-color: rgba(255,255,255,0.08) rgba(255,255,255,0.04) rgba(255,255,255,0.03) rgba(255,255,255,0.04);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.06) inset;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover,
.card-feature:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(1,129,250,0.25),
    0 20px 60px rgba(1,129,250,0.10),
    0 4px 20px rgba(0,0,0,0.5);
  border-color: rgba(1,129,250,0.25) rgba(1,129,250,0.10) rgba(1,129,250,0.08) rgba(1,129,250,0.10);
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-blue-card);
}

/* Pricing Pro card premium treatment */
.pricing-card.featured,
.pricing-card[data-featured="true"],
.pricing-card:nth-child(2) {
  background:
    linear-gradient(
      150deg,
      rgba(1,129,250,0.10) 0%,
      rgba(1,129,250,0.04) 40%,
      transparent 100%
    ),
    var(--bg-card, #141825);
  border: 1px solid rgba(1,129,250,0.35);
  box-shadow:
    0 0 0 1px rgba(1,129,250,0.15),
    0 0 80px rgba(1,129,250,0.12),
    0 40px 80px rgba(0,0,0,0.5);
}

/* ── SECTION E — MOCKUP GLOW ANIMATIONS ── */
@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes glowDrift {
  0%   { transform: translate(0px, 0px) scale(1); }
  33%  { transform: translate(12px, -8px) scale(1.04); }
  66%  { transform: translate(-8px, 10px) scale(0.97); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(1,129,250,0.15); }
  50%       { box-shadow: 0 0 40px rgba(1,129,250,0.30); }
}

@keyframes chartLineDraw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* Apply float to mockup images */
.ai-showcase-img,
.chart-showcase-img,
.gc-device-img,
.news-phone-wrap img,
.feature-phone-pair img {
  animation: floatY 5s ease-in-out infinite;
}

/* Hero phones float as one composed unit — wrapper animates, individuals stay still */
.hero-phones-wrap {
  animation: floatY 5s ease-in-out infinite;
}

.hero-phone-main,
.hero-phone-secondary {
  animation: none !important;
}

/* ── Self-contained hero grid overlay (no layout impact) ── */
.hero-trading-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Apply drift to all glow orbs */
.chart-showcase-glow,
.gc-device-glow,
.ai-showcase-glow,
.news-phone-glow,
.glow-orb,
.gc-atmosphere,
.story-bg-glow {
  animation: glowDrift 10s ease-in-out infinite;
}

/* Apply pulse to hero orbs */
.hero-glow-orb,
.orb-1,
.orb-2 {
  animation: glowDrift 12s ease-in-out infinite;
}

/* ── SECTION F — HERO CINEMATIC ATMOSPHERE ── */
.hero-section {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%,   rgba(1,129,250,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 60%,   rgba(70,100,255,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 30% 25% at 15% 80%,   rgba(192,240,0,0.04) 0%, transparent 50%),
    linear-gradient(180deg, #080D17 0%, #05070D 100%);
  position: relative;
  overflow: hidden;
}

/* Faint fade at hero bottom */
.hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, #05070D, transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── SECTION G — FEATURES PAGE SECTION MOODS ── */

/* Genie Chart — trading intelligence */
#chart {
  background:
    radial-gradient(ellipse 60% 70% at 70% 50%, rgba(1,129,250,0.07) 0%, transparent 65%),
    transparent;
  position: relative;
}

/* Education — soft learning warmth */
#education {
  background:
    radial-gradient(ellipse 50% 60% at 30% 50%, rgba(70,100,255,0.05) 0%, transparent 60%),
    rgba(255,255,255,0.008);
  position: relative;
}

/* Ask Genie — AI intelligence radial */
#ai {
  background:
    radial-gradient(ellipse 55% 65% at 65% 50%, rgba(1,129,250,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 30% 30% at 65% 50%, rgba(192,240,0,0.03) 0%, transparent 50%),
    transparent;
  position: relative;
}

/* News — data density feeling */
#news {
  background:
    radial-gradient(ellipse 60% 50% at 30% 50%, rgba(1,129,250,0.05) 0%, transparent 60%),
    rgba(255,255,255,0.008);
  position: relative;
}

/* Community — human social warmth */
#community {
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(70,100,255,0.06) 0%, transparent 60%),
    transparent;
  position: relative;
}

/* ── SECTION H — PRICING PAGE SPOTLIGHT ── */
.pricing-section,
.section.pricing-hero,
[id*="pricing"] {
  background:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(1,129,250,0.08) 0%, transparent 65%),
    transparent;
  position: relative;
}

/* Pro plan card animated border */
.pricing-card.featured,
.pricing-card:nth-child(2) {
  animation: borderGlow 4s ease-in-out infinite;
}

/* ── SECTION I — ABOUT PAGE ATMOSPHERE ── */
.about-page body,
body.about-page {
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 20%, rgba(1,129,250,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 20% 80%, rgba(192,240,0,0.03) 0%, transparent 50%);
  background-attachment: fixed;
}

/* Stars/noise texture for about */
.about-page .page-hero,
.page-hero.about-hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(1,129,250,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #080D17 0%, #05070D 100%);
}

/* ── SECTION J — CONTACT PAGE GLASS PANEL ── */
.contact-form-wrap,
.contact-card,
.contact-section .card {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.03) 0%,
      rgba(1,129,250,0.04) 50%,
      transparent 100%
    );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(1,129,250,0.15);
  box-shadow:
    0 0 60px rgba(1,129,250,0.06),
    0 20px 60px rgba(0,0,0,0.4);
}

.contact-page .page-hero,
.page-hero.contact-hero {
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(1,129,250,0.07) 0%, transparent 60%),
    linear-gradient(180deg, #080D17 0%, #05070D 100%);
}

/* ── SECTION K — BUTTON GLOW POLISH ── */
.btn-primary {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 30px rgba(1,129,250,0.35),
    0 8px 25px rgba(1,129,250,0.20),
    0 2px 8px rgba(0,0,0,0.4);
}

.btn-primary:active {
  transform: translateY(0px);
}

/* ── SECTION L — SECTION REVEAL ANIMATION ── */
@keyframes revealFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal,
.reveal-left,
.reveal-right {
  animation-fill-mode: both;
}

.revealed {
  animation: revealFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── SECTION M — NAV SCROLLED STATE ENHANCEMENT ── */
/* Deepens opacity on scroll; blur stays the same as rest state per approved spec */
.nav.scrolled {
  background: rgba(10, 10, 15, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 40px rgba(0,0,0,0.5) !important;
}

/* ── SECTION N — RESPONSIVE SAFETY ── */
@media (max-width: 768px) {
  .hero-phone-main,
  .hero-phone-secondary,
  .ai-showcase-img,
  .chart-showcase-img,
  .gc-device-img,
  .news-phone-wrap img {
    animation: none;
  }

  body {
    background-attachment: scroll;
  }
}

/* ── Respect reduced motion preference ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── SECTION O — CANVAS ANIMATION CONTAINERS ── */

/* Sections that host canvas layers need position + overflow */
.hero-section,
#story-section,
#ai,
#chart {
  position: relative;
  overflow: hidden;
}

/* All direct children except canvas elements sit above the canvas layer */
/* NOTE: hero-section is intentionally excluded — its glow-orb children must
   remain position:absolute (set in main.css). Only .container is lifted. */
#story-section > *:not(canvas),
#ai > *:not(canvas),
#chart > *:not(canvas) {
  position: relative;
  z-index: 1;
}

/* Hero: only lift the container — glow orbs must stay position:absolute */
.hero-section > .container {
  position: relative;
  z-index: 2;
}

/* ── Particles canvas — scoped to .hero-section, clipped by overflow:hidden ── */
#particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: block;
}

/* ── Ensure all page content sits above canvas layer ── */
main,
header,
footer,
.hero-section > .container,
.section > .container,
.gc-section > .container,
.story-section > .container,
.page-hero > .container {
  position: relative;
  z-index: 1;
}

.home-page .hero-section > .container {
  z-index: 2;
}

/* ══ INDEX2 SEAMLESS SECTION FLOW ══ */

/* ── Unified page background — index2 only ── */
.home-page main,
.home-page body {
  background: transparent;
}

/* Make all sections transparent so page bg shows through */
.home-page .section,
.home-page .gc-section,
.home-page .story-section,
.home-page .section-sm,
.home-page .news-section {
  background: transparent !important;
}

/* Stats strip — barely visible separation, no hard line */
.home-page .stats-strip,
.home-page section[style*="bg-surface"] {
  background: rgba(255,255,255,0.015) !important;
}

/* Subtle per-section atmospheric glow zones */
.home-page #features {
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(1,129,250,0.04) 0%, transparent 70%) !important;
}

.home-page #chart-section {
  background: radial-gradient(ellipse 60% 60% at 30% 50%, rgba(1,129,250,0.06) 0%, transparent 65%) !important;
}

.home-page #story-section {
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(1,129,250,0.05) 0%, transparent 65%) !important;
}

/* ── Section separator — hidden on ALL pages ──
   The .section-separator is a 1px blue gradient line that sits between
   </main> and <footer> in every page's HTML. On the home page it has
   always been hidden so the footer's own border-top is the single clean
   separator. On the four inner pages it was still visible, creating a
   double-border effect (blue gradient line + footer border-top white line)
   that made the upper footer area look visually different from the home page.
   Fix: extend the hide rule to every page class so all five pages behave
   identically — only the footer's border-top defines the section boundary. */
.home-page .section-separator,
.features-page .section-separator,
.pricing-page .section-separator,
.about-page .section-separator,
.contact-page .section-separator {
  display: none !important;
}

/* ════════════════════════════════════════════
   GENIEFX COHERENCE SYSTEM — Professional Pass
════════════════════════════════════════════ */

/* ── 1A — Unified Page Background ── */
.home-page,
.features-page,
.pricing-page,
.about-page,
.contact-page {
  background: #05070D !important;
}

.home-page .section,
.home-page .gc-section,
.home-page .story-section,
.home-page .section-sm,
.home-page .page-hero,
.features-page .page-hero,
.features-page .section,
.features-page .section-sm,
.features-page .tg-section,
.features-page .news-section,
.features-page .trading-grid-bg,
.pricing-page .section,
.pricing-page .page-hero,
.about-page .section,
.about-page .page-hero,
.contact-page .section,
.contact-page .page-hero {
  background: transparent !important;
}

/* Keep very subtle surface hint on pricing plans and about alternate rows */
.pricing-page .trading-grid-bg,
.about-page .section[style*="bg-surface"] {
  background: rgba(255,255,255,0.012) !important;
}

/* ── 1B — Content-Position Glow Migration (per section, per page) ── */

/* Pricing page glows */
.pricing-page .page-hero {
  position: relative;
  overflow: hidden;
}
.pricing-page .page-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse at 50% 40%, rgba(1,129,250,0.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}

.pricing-page #plans {
  position: relative;
}
.pricing-page #plans::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(1,129,250,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* About page glows */
.about-page .page-hero {
  position: relative;
  overflow: hidden;
}
.about-page .page-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 30%;
  width: 600px;
  height: 500px;
  background: radial-gradient(ellipse at 40% 40%, rgba(1,129,250,0.09) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(18px);
}

.about-page .section:nth-of-type(2) {
  position: relative;
}
.about-page .section:nth-of-type(2)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 70% 50% at 70% 50%, rgba(255,176,0,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Contact page glows */
.contact-page .page-hero {
  position: relative;
  overflow: hidden;
}
.contact-page .page-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: 20%;
  width: 550px;
  height: 450px;
  background: radial-gradient(ellipse at 60% 40%, rgba(1,129,250,0.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(16px);
}

.contact-page .section:first-of-type {
  position: relative;
}
.contact-page .section:first-of-type::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 60% 60% at 30% 60%, rgba(1,129,250,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Features page additional glows (safe — using ::before on sections not already claimed) */
.features-page .page-hero {
  position: relative;
  overflow: hidden;
}
.features-page .page-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 650px;
  height: 480px;
  background: radial-gradient(ellipse at 50% 40%, rgba(1,129,250,0.09) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(18px);
}

/* ── 1C — Gold Gradient Stat Numbers ── */
.stat-number,
[class*="stat-number"],
.stats-strip .stat-number {
  background: linear-gradient(135deg, #FFB800 0%, #FFDA6B 50%, #FFB800 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block;
}

/* ── 1D — Unified Card Language ── */
.card,
.feature-card,
.testimonial-card,
.team-card,
.benefit-card,
.stat-card,
.info-card,
.step-card {
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  background: rgba(255,255,255,0.03) !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.card:hover,
.feature-card:hover,
.testimonial-card:hover,
.team-card:hover,
.benefit-card:hover,
.stat-card:hover,
.info-card:hover,
.step-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(1,129,250,0.25) !important;
  box-shadow: 0 12px 40px rgba(1,129,250,0.12) !important;
}

/* Preserve pricing card's larger radius */
.pricing-card {
  border-radius: var(--r-2xl) !important;
}

/* ── 1E — Remove All Section Separators ── */
.features-page .section-separator,
.pricing-page .section-separator,
.about-page .section-separator,
.contact-page .section-separator {
  display: none !important;
}

/* Remove border-top separators injected via pseudo-elements on sections */
.features-page .section + .section::before,
.pricing-page .section + .section::before,
.about-page .section + .section::before,
.contact-page .section + .section::before {
  display: none !important;
}

/* ── 1F — Soft Bottom Fades on Sections ── */
.features-page .section,
.features-page .section-sm,
.pricing-page .section,
.about-page .section,
.contact-page .section {
  position: relative;
}

.pricing-page .section::after,
.about-page .section::after,
.contact-page .section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent 0%, #05070D 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── 1G — DEAD SELECTORS — DO NOT DELETE WITHOUT SEPARATE CLEANUP PASS ──
   .nav-wrapper is not used in any current HTML. All pages use <nav class="nav">.
   These rules have no effect. Nav glass baseline is now handled by .nav in
   components.css (rest) and .nav.scrolled in Section M above (scrolled).
.features-page .nav-wrapper,
.pricing-page .nav-wrapper,
.about-page .nav-wrapper,
.contact-page .nav-wrapper {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent !important;
  transition: background 0.4s ease,
              backdrop-filter 0.4s ease,
              border-color 0.4s ease !important;
}

.features-page .nav-wrapper.scrolled,
.pricing-page .nav-wrapper.scrolled,
.about-page .nav-wrapper.scrolled,
.contact-page .nav-wrapper.scrolled,
.home-page .nav-wrapper.scrolled {
  background: rgba(5,7,13,0.80) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
}
── END DEAD SELECTORS ── */

/* ── 1H — Contact Form Glass Panel ── */
.contact-page .contact-form-wrapper,
.contact-page .contact-form,
.contact-page form {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.40),
              inset 0 1px 0 rgba(255,255,255,0.08) !important;
  padding: 40px !important;
}

/* ── 1I — CTA Banner Celebration Styling ── */
.cta-banner {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg,
    rgba(1,129,250,0.12) 0%,
    rgba(0,80,180,0.08) 40%,
    rgba(255,176,0,0.06) 100%) !important;
  border: 1px solid rgba(1,129,250,0.20) !important;
  border-radius: 24px !important;
  box-shadow: 0 0 80px rgba(1,129,250,0.10),
              inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 200%;
  background: radial-gradient(ellipse at 50% 30%, rgba(1,129,250,0.14) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── 1J — Button System Coherence ── */
.btn-primary {
  transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}

.btn-primary:hover {
  box-shadow: 0 0 32px rgba(1,129,250,0.55),
              0 8px 24px rgba(1,129,250,0.25) !important;
  transform: translateY(-2px) !important;
}

.btn-secondary {
  transition: box-shadow 0.3s ease, transform 0.2s ease, border-color 0.3s ease !important;
}

.btn-secondary:hover {
  border-color: rgba(1,129,250,0.50) !important;
  box-shadow: 0 0 20px rgba(1,129,250,0.20) !important;
  transform: translateY(-2px) !important;
}

/* ── 1K — Page Hero Consistent Padding & Text Alignment ── */
.features-page .page-hero,
.pricing-page .page-hero,
.about-page .page-hero,
.contact-page .page-hero {
  padding-top: clamp(100px, 14vh, 160px) !important;
  padding-bottom: clamp(60px, 8vh, 100px) !important;
  text-align: center !important;
}

.features-page .page-hero .container,
.pricing-page .page-hero .container,
.about-page .page-hero .container,
.contact-page .page-hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ── PART 4 — Universal Z-Index Safety ── */
.home-page .section .container,
.features-page .section .container,
.features-page .page-hero .container,
.pricing-page .section .container,
.pricing-page .page-hero .container,
.about-page .section .container,
.about-page .page-hero .container,
.contact-page .section .container,
.contact-page .page-hero .container {
  position: relative;
  z-index: 1;
}

/* Nav always on top */
.nav-wrapper {
  z-index: 1000 !important;
}

/* Modals and overlays above everything */
.modal-overlay,
.modal,
[role="dialog"] {
  z-index: 2000 !important;
}

/* Glow orbs always below content */
.glow-orb {
  z-index: 0 !important;
}

/* ── Nav logo bulletproof rendering ── */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}

.nav-logo img {
  height: 36px !important;
  width: auto !important;
  max-width: 160px !important;
  display: block !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 10 !important;
}

/* ── End Coherence System ── */

/* ════════════════════════════════
   GENIE CHARACTER SYSTEM
════════════════════════════════ */

/* ── Bridge: between testimonials and CTA on homepage ── */
.genie-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--sp-4) 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.genie-bridge-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(1,129,250,0.18) 0%,
    transparent 65%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

.genie-bridge-img {
  height: 180px;
  width: auto;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 20px rgba(1,129,250,0.5))
    drop-shadow(0 20px 40px rgba(0,0,0,0.6));
  animation: floatY 4s ease-in-out infinite;
}

/* Arabic — mirror horizontally */
[dir="rtl"] .genie-bridge-img {
  transform: scaleX(-1);
}

@media (max-width: 768px) {
  .genie-bridge-img {
    height: 130px;
  }
}

/* ── Hero: centered above badge on features page ── */
.genie-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: var(--sp-5);
  pointer-events: none;
  overflow: visible;
}

.genie-hero-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(1,129,250,0.2) 0%,
    transparent 65%
  );
  filter: blur(35px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

.genie-hero-img {
  height: 150px;
  width: auto;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 20px rgba(1,129,250,0.5))
    drop-shadow(0 15px 30px rgba(0,0,0,0.5));
  animation: floatY 4s ease-in-out infinite;
  animation-delay: 0.3s;
}

/* Arabic — mirror horizontally */
[dir="rtl"] .genie-hero-img {
  transform: scaleX(-1);
}

@media (max-width: 768px) {
  .genie-hero-img {
    height: 110px;
  }
  .genie-hero {
    margin-bottom: var(--sp-4);
  }
}

/* ── Contact: small centered character in page hero ── */
.genie-contact-character {
  display: block;
  height: 120px;
  width: auto;
  margin: var(--sp-8) auto 0;
  object-fit: contain;
  filter:
    drop-shadow(0 0 16px rgba(1,129,250,0.45))
    drop-shadow(0 12px 24px rgba(0,0,0,0.5));
  animation: floatY 4s ease-in-out infinite;
  animation-delay: 0.2s;
  pointer-events: none;
}

[dir="rtl"] .genie-contact-character {
  transform: scaleX(-1);
}

@media (max-width: 768px) {
  .genie-contact-character {
    height: 90px;
  }
}

/* ── End Genie Character System ── */

/* ════════════════════════════════════════
   FEATURES PAGE — PARTICLES CANVAS FIX
   screens.css adds: .features-page main { background: var(--bg-base); }
   That opaque floor covers the position:fixed z-index:0 canvas, making
   all floating currency symbols invisible on features2.html only.
   All other pages have a transparent <main>, so their canvas shows fine.
   Fix: force <main> transparent so the canvas is visible through it and
   through the already-transparent sections (covered by 1A rules above).
   Scoped strictly to .features-page — no other page is touched.
════════════════════════════════════════ */

.features-page main {
  background: transparent !important;
}

/* ════════════════════════════════════════
   JOIN FREE — GHOST BUTTON VARIANT
   Used in nav across all pages and in
   the pricing CTA row.
════════════════════════════════════════ */

.btn-ghost-primary {
  background: transparent !important;
  color: #0181FA !important;
  border: 1px solid rgba(1,129,250,0.5) !important;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important;
}

.btn-ghost-primary:hover {
  background: rgba(1,129,250,0.10) !important;
  box-shadow: 0 0 18px rgba(1,129,250,0.30) !important;
  transform: translateY(-2px) !important;
}

/* Pricing CTA row */
.pricing-join-cta {
  text-align: center;
  margin-top: var(--sp-10);
  padding: var(--sp-10) var(--sp-4);
  position: relative;
}

.pricing-join-cta p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--sp-5);
}

/* ════════════════════════════════════════
   LOGO PERMANENT FIX — MUST BE LAST IN FILE
════════════════════════════════════════ */

.nav-logo {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  position: relative !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.nav-logo img {
  height: 36px !important;
  width: auto !important;
  min-width: 80px !important;
  max-width: 180px !important;
  display: block !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  -webkit-filter: none !important;
  position: relative !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

/* Nav inner — ensure logo container never clips */
.nav-inner {
  isolation: isolate;
}

/* ════════════════════════════════
   SECTION BADGE — GLOBAL LIME ACCENT STYLE
   Overrides the base .section-badge (blue, filled, from main.css) on
   every page that loads visual-enhanced.css. Applies to all hook/eyebrow
   labels: homepage sections, inner-page CTAs, blog hero, etc.
   Layout-only rules in components.css / screens.css are unaffected.
════════════════════════════════ */
.section-badge {
  color: #AFDA00;
  background: transparent;
  border: none;
}

/* ════════════════════════════════
   HERO BADGE — inherits lime treatment from .section-badge above.
   Restated explicitly so .hero-badge works consistently even when used
   without the .section-badge companion class.
════════════════════════════════ */
.hero-badge {
  color: #AFDA00;
  background: transparent;
  border: none;
}

/* ════════════════════════════════════════════
   HOMEPAGE — GLASS CARD MATERIAL SYSTEM  v2.0
   Premium neutral-glass surface. Reference: .reg-card (register.html).
   Scoped strictly to .home-page — zero impact on any other page.

   Design principles:
   · White-glass layers, not dark-opaque fills (rgba(255,255,255,…))
   · Blur only — no saturate boost (matches .reg-card: blur(20px))
   · Brand blue as border + accent, never as the card body fill
   · Deep dark shadow, no aggressive blue glow
   · Hierarchy: normal < feature (blue border) < flagship (deeper)
   · prefers-reduced-motion strips all transform / transition
════════════════════════════════════════════ */

/* ── Base glass surface — all card types, all browsers ──────── */
.home-page .stat-card,
.home-page .card,
.home-page .card-feature,
.home-page .testimonial-card,
.home-page .story-points {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 24px 70px rgba(0, 0, 0, 0.38) !important;
  border-radius: 16px !important;
  transition:
    transform       0.32s cubic-bezier(0.22, 1, 0.36, 1),
    border-color    0.28s ease,
    box-shadow      0.28s ease !important;
}

/* ── Progressive enhancement: pure blur, no saturation boost ── */
@supports (backdrop-filter: blur(1px)) {
  .home-page .stat-card,
  .home-page .card,
  .home-page .card-feature,
  .home-page .testimonial-card,
  .home-page .story-points {
    background: rgba(255, 255, 255, 0.030) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
}

/* ── Hover: refined lift, restrained blue accent, no large glow ── */
.home-page .stat-card:hover,
.home-page .card:hover,
.home-page .card-feature:hover,
.home-page .testimonial-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(1, 129, 250, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(1, 129, 250, 0.07),
    0 8px 28px rgba(0, 0, 0, 0.40),
    0 24px 70px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(1, 129, 250, 0.06) !important;
}

/* story-points: full-width panel — no lift, border accent only */
.home-page .story-points:hover {
  border-color: rgba(1, 129, 250, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 6px 24px rgba(0, 0, 0, 0.36),
    0 0 24px rgba(1, 129, 250, 0.05) !important;
}

/* ── Feature cards — elevated glass + restrained blue border ──
   All four homepage feature cards share .card-feature.
   .card-featured is an alias kept for historical compatibility.
   Background stays white-glass; blue lives only in the border
   and the soft ambient shadow beneath the card. ── */

.home-page .card-feature,
.home-page .card.card-feature,
.home-page .card-featured,
.home-page .card.card-featured {
  background: rgba(255, 255, 255, 0.042) !important;
  border-color: rgba(1, 129, 250, 0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 24px 70px rgba(0, 0, 0, 0.40),
    0 0 36px rgba(1, 129, 250, 0.07) !important;
}

@supports (backdrop-filter: blur(1px)) {
  .home-page .card-feature,
  .home-page .card.card-feature,
  .home-page .card-featured,
  .home-page .card.card-featured {
    background: rgba(255, 255, 255, 0.036) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
}

.home-page .card-feature:hover,
.home-page .card.card-feature:hover,
.home-page .card-featured:hover,
.home-page .card.card-featured:hover {
  transform: translateY(-4px) !important;
  background: rgba(255, 255, 255, 0.052) !important;
  border-color: rgba(1, 129, 250, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(1, 129, 250, 0.10),
    0 8px 28px rgba(0, 0, 0, 0.40),
    0 28px 80px rgba(0, 0, 0, 0.44),
    0 0 40px rgba(1, 129, 250, 0.10) !important;
}

/* ── Flagship — deepest glass, slightly stronger blue border ──
   Genie Chart flagship remains the most premium surface on the page,
   but stays in the same white-glass material family as all other cards.
   Difference is depth and border accent — not a blue body fill. ── */

.home-page .card-flagship {
  background: rgba(255, 255, 255, 0.050) !important;
  border-color: rgba(1, 129, 250, 0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 28px 90px rgba(0, 0, 0, 0.45),
    0 0 48px rgba(1, 129, 250, 0.09) !important;
}

@supports (backdrop-filter: blur(1px)) {
  .home-page .card-flagship {
    background: rgba(255, 255, 255, 0.044) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
  }
}

.home-page .card-flagship:hover {
  transform: translateY(-4px) !important;
  background: rgba(255, 255, 255, 0.062) !important;
  border-color: rgba(1, 129, 250, 0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(1, 129, 250, 0.13),
    0 8px 28px rgba(0, 0, 0, 0.42),
    0 32px 90px rgba(0, 0, 0, 0.48),
    0 0 52px rgba(1, 129, 250, 0.12) !important;
}

/* ── Reduced motion: strip all transform and transition ── */
@media (prefers-reduced-motion: reduce) {
  .home-page .stat-card,
  .home-page .card,
  .home-page .card-feature,
  .home-page .card.card-feature,
  .home-page .testimonial-card,
  .home-page .story-points,
  .home-page .card-featured,
  .home-page .card.card-featured,
  .home-page .card-flagship {
    transition: none !important;
  }

  .home-page .stat-card:hover,
  .home-page .card:hover,
  .home-page .card-feature:hover,
  .home-page .card.card-feature:hover,
  .home-page .testimonial-card:hover,
  .home-page .story-points:hover,
  .home-page .card-featured:hover,
  .home-page .card.card-featured:hover,
  .home-page .card-flagship:hover {
    transform: none !important;
  }
}

/* ── End Homepage Glass Card Material System ── */

/* ════════════════════════════════════════════
   NAV — ALWAYS-VISIBLE BAR
   The navbar stays pinned to the top at all times via
   `position: fixed` (components.css). No hide/show transform here —
   only the background / shadow transition for the .scrolled state,
   which is already defined in components.css. Nothing to add.
════════════════════════════════════════════ */
/* ============================================================
   INDEX2 CONTINUOUS BACKGROUND PASS
   Keeps the existing lights and animations, but makes the page
   read as one long premium canvas instead of stacked section crops.
   ============================================================ */

body.home-page {
  background-color: #05070D !important;
  background-image:
    radial-gradient(ellipse 90% 52% at 16% 0%, rgba(1,129,250,0.075) 0%, transparent 64%),
    radial-gradient(ellipse 70% 48% at 88% 34%, rgba(70,100,255,0.055) 0%, transparent 62%),
    radial-gradient(ellipse 58% 42% at 18% 68%, rgba(192,240,0,0.030) 0%, transparent 60%),
    linear-gradient(180deg, #080D17 0%, #05070D 28%, #05070D 100%) !important;
  background-attachment: fixed;
}

.home-page main {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(8,13,23,0.64) 0%, rgba(5,7,13,0.16) 16%, transparent 34%),
    radial-gradient(ellipse 88% 720px at 50% 6%, rgba(1,129,250,0.060) 0%, transparent 70%),
    radial-gradient(ellipse 72% 820px at 88% 42%, rgba(70,100,255,0.044) 0%, transparent 70%),
    radial-gradient(ellipse 68% 760px at 15% 72%, rgba(1,129,250,0.034) 0%, transparent 72%),
    transparent !important;
}

.home-page main::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.56), rgba(0,0,0,0.18) 520px, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.56), rgba(0,0,0,0.18) 520px, transparent 78%);
  opacity: 0.55;
}

.home-page .hero-section {
  background:
    radial-gradient(ellipse 96% 62% at 50% 0%, rgba(1,129,250,0.105) 0%, transparent 62%),
    radial-gradient(ellipse 48% 44% at 82% 56%, rgba(70,100,255,0.050) 0%, transparent 56%),
    linear-gradient(180deg, rgba(8,13,23,0.72) 0%, rgba(5,7,13,0.20) 78%, transparent 100%) !important;
}

.home-page .hero-section::after,
.home-page .hero-bottom-fade {
  height: 180px !important;
  background: linear-gradient(to bottom, transparent 0%, rgba(5,7,13,0.70) 78%, rgba(5,7,13,0) 100%) !important;
}

.home-page .section,
.home-page .section-sm,
.home-page .gc-section,
.home-page .story-section {
  position: relative;
  background: transparent !important;
}

.home-page #features,
.home-page #chart-section,
.home-page #story-section {
  background: transparent !important;
}

.home-page #features::before,
.home-page #chart-section::before,
.home-page #story-section::before {
  content: '';
  position: absolute;
  left: max(-6vw, -96px);
  right: max(-6vw, -96px);
  top: -120px;
  bottom: -120px;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}

.home-page #features::before {
  background:
    radial-gradient(ellipse 70% 42% at 50% 46%, rgba(1,129,250,0.045) 0%, transparent 72%),
    radial-gradient(ellipse 36% 26% at 72% 18%, rgba(192,240,0,0.018) 0%, transparent 62%);
}

.home-page #chart-section::before {
  background:
    radial-gradient(ellipse 64% 54% at 30% 50%, rgba(1,129,250,0.060) 0%, transparent 70%),
    radial-gradient(ellipse 42% 46% at 76% 58%, rgba(0,212,255,0.026) 0%, transparent 66%);
}

.home-page #story-section::before {
  background:
    radial-gradient(ellipse 66% 54% at 52% 48%, rgba(1,129,250,0.050) 0%, transparent 70%),
    radial-gradient(ellipse 38% 30% at 30% 70%, rgba(70,100,255,0.024) 0%, transparent 64%);
}

.home-page .gc-atmosphere,
.home-page .story-bg-glow {
  opacity: 0.72;
  mask-image: radial-gradient(ellipse 78% 70% at 50% 50%, black 0%, rgba(0,0,0,0.78) 48%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 78% 70% at 50% 50%, black 0%, rgba(0,0,0,0.78) 48%, transparent 78%);
}

.home-page .gc-device {
  overflow: visible !important;
}

.home-page .gc-device-glow {
  width: min(560px, 110%) !important;
  height: min(560px, 110%) !important;
  opacity: 0.82;
}

.home-page .story-section {
  overflow: hidden;
}

@media (max-width: 768px) {
  body.home-page {
    background-attachment: scroll;
  }

  .home-page main {
    background:
      linear-gradient(180deg, rgba(8,13,23,0.68) 0%, rgba(5,7,13,0.18) 20%, transparent 42%),
      radial-gradient(ellipse 120% 560px at 50% 4%, rgba(1,129,250,0.060) 0%, transparent 70%),
      radial-gradient(ellipse 120% 620px at 82% 48%, rgba(70,100,255,0.038) 0%, transparent 72%),
      transparent !important;
  }

  .home-page #features::before,
  .home-page #chart-section::before,
  .home-page #story-section::before {
    top: -72px;
    bottom: -72px;
  }
}

/* ============================================================
   FEATURES2 CONTINUOUS BACKGROUND PASS
   Final authority for features-page atmosphere. Preserves product
   glows/canvases while removing section-box background cuts.
   ============================================================ */

body.features-page {
  background-color: #05070D !important;
  background-image:
    radial-gradient(ellipse 84% 48% at 50% 0%, rgba(1,129,250,0.080) 0%, transparent 64%),
    radial-gradient(ellipse 70% 44% at 92% 30%, rgba(70,100,255,0.050) 0%, transparent 62%),
    radial-gradient(ellipse 62% 42% at 8% 62%, rgba(192,240,0,0.026) 0%, transparent 64%),
    linear-gradient(180deg, #080D17 0%, #05070D 24%, #05070D 100%) !important;
  background-attachment: fixed;
}

.features-page main {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(8,13,23,0.70) 0%, rgba(5,7,13,0.18) 14%, transparent 34%),
    radial-gradient(ellipse 88% 720px at 50% 3%, rgba(1,129,250,0.062) 0%, transparent 70%),
    radial-gradient(ellipse 76% 880px at 88% 32%, rgba(70,100,255,0.040) 0%, transparent 72%),
    radial-gradient(ellipse 72% 860px at 10% 64%, rgba(1,129,250,0.032) 0%, transparent 72%),
    radial-gradient(ellipse 72% 760px at 82% 84%, rgba(192,240,0,0.018) 0%, transparent 72%),
    transparent !important;
}

.features-page main::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 78px 78px;
  opacity: 0.45;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.58), rgba(0,0,0,0.16) 620px, transparent 86%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.58), rgba(0,0,0,0.16) 620px, transparent 86%);
}

.features-page main > section,
.features-page main > .features-nav-pills {
  position: relative;
  z-index: 1;
}

.features-page .page-hero,
.features-page .section,
.features-page .section-sm,
.features-page .news-section,
.features-page .tg-section,
.features-page .trading-grid-bg,
.features-page #chart,
.features-page #education,
.features-page #ai,
.features-page #news,
.features-page #growth,
.features-page #quiz,
.features-page #community {
  background: transparent !important;
}

.features-page #chart,
.features-page #education,
.features-page #ai,
.features-page #news,
.features-page #growth,
.features-page #quiz,
.features-page #community {
  overflow: visible;
}

.features-page .page-hero::before,
.features-page #chart::before,
.features-page #education::before,
.features-page #ai::before,
.features-page #news::before,
.features-page #growth::before,
.features-page #quiz::before,
.features-page #community::before {
  content: '';
  position: absolute;
  left: max(-6vw, -96px);
  right: max(-6vw, -96px);
  top: -120px;
  bottom: -120px;
  height: auto;
  display: block !important;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}

.features-page .page-hero::before {
  background:
    radial-gradient(ellipse 78% 54% at 50% 24%, rgba(1,129,250,0.090) 0%, transparent 70%),
    radial-gradient(ellipse 38% 28% at 50% 58%, rgba(192,240,0,0.020) 0%, transparent 62%);
}

.features-page #chart::before {
  background:
    radial-gradient(ellipse 66% 52% at 70% 48%, rgba(1,129,250,0.060) 0%, transparent 70%),
    radial-gradient(ellipse 42% 36% at 28% 64%, rgba(0,212,255,0.022) 0%, transparent 64%);
}

.features-page #education::before {
  background:
    radial-gradient(ellipse 62% 50% at 28% 50%, rgba(70,100,255,0.044) 0%, transparent 70%),
    radial-gradient(ellipse 72% 46% at 50% 50%, rgba(255,255,255,0.010) 0%, transparent 72%);
}

.features-page #ai::before {
  background:
    radial-gradient(ellipse 62% 54% at 66% 46%, rgba(1,129,250,0.070) 0%, transparent 70%),
    radial-gradient(ellipse 34% 30% at 66% 48%, rgba(192,240,0,0.020) 0%, transparent 62%);
}

.features-page #news::before {
  background:
    radial-gradient(ellipse 70% 52% at 78% 48%, rgba(1,129,250,0.056) 0%, transparent 72%),
    radial-gradient(ellipse 44% 38% at 20% 76%, rgba(192,240,0,0.026) 0%, transparent 66%),
    radial-gradient(ellipse 76% 48% at 50% 50%, rgba(255,255,255,0.010) 0%, transparent 72%);
}

.features-page #growth::before {
  background:
    radial-gradient(ellipse 66% 56% at 78% 50%, rgba(1,129,250,0.050) 0%, transparent 70%),
    radial-gradient(ellipse 44% 48% at 22% 78%, rgba(70,100,255,0.036) 0%, transparent 68%);
}

.features-page #quiz::before {
  background:
    radial-gradient(ellipse 58% 52% at 34% 54%, rgba(1,129,250,0.046) 0%, transparent 70%),
    radial-gradient(ellipse 64% 44% at 62% 50%, rgba(255,255,255,0.010) 0%, transparent 72%);
}

.features-page #community::before {
  background:
    radial-gradient(ellipse 62% 52% at 52% 48%, rgba(70,100,255,0.046) 0%, transparent 70%),
    radial-gradient(ellipse 38% 30% at 74% 30%, rgba(192,240,0,0.020) 0%, transparent 64%);
}

.features-page #chart::after,
.features-page #education::after,
.features-page #ai::after,
.features-page #news::after,
.features-page #growth::after,
.features-page #quiz::after,
.features-page #community::after {
  content: none !important;
}

.features-page .features-nav-pills {
  background: transparent !important;
  border-bottom-color: rgba(255,255,255,0.026) !important;
}

.features-page .news-section::before,
.features-page .tg-section::before {
  opacity: 0.74;
  mask-image: radial-gradient(ellipse 86% 74% at 50% 50%, black 0%, rgba(0,0,0,0.72) 48%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 86% 74% at 50% 50%, black 0%, rgba(0,0,0,0.72) 48%, transparent 82%);
}

.features-page .chart-showcase-glow,
.features-page .ai-showcase-glow,
.features-page .lesson-cards-glow,
.features-page .phone-ambient-glow,
.features-page .news-phone-glow {
  opacity: 0.86;
}

@media (max-width: 768px) {
  body.features-page {
    background-attachment: scroll;
  }

  .features-page main {
    background:
      linear-gradient(180deg, rgba(8,13,23,0.72) 0%, rgba(5,7,13,0.20) 20%, transparent 44%),
      radial-gradient(ellipse 120% 560px at 50% 3%, rgba(1,129,250,0.060) 0%, transparent 72%),
      radial-gradient(ellipse 116% 680px at 88% 46%, rgba(70,100,255,0.036) 0%, transparent 74%),
      transparent !important;
  }

  .features-page .page-hero::before,
  .features-page #chart::before,
  .features-page #education::before,
  .features-page #ai::before,
  .features-page #news::before,
  .features-page #growth::before,
  .features-page #quiz::before,
  .features-page #community::before {
    top: -72px;
    bottom: -72px;
  }
}

/* ============================================================
   BLOG LISTING CONTINUOUS BACKGROUND PASS
   Final authority for the blog index atmosphere. Keeps the blog
   particles, badges, card hovers, and category accents, while
   making the ambient glows belong to the page instead of the
   viewport or isolated section boxes.
   ============================================================ */

body.blog-listing-page {
  background-color: #05070D !important;
  background-image:
    radial-gradient(ellipse 88% 48% at 50% 0%, rgba(1,129,250,0.078) 0%, transparent 64%),
    radial-gradient(ellipse 76% 46% at 94% 34%, rgba(70,100,255,0.048) 0%, transparent 66%),
    radial-gradient(ellipse 58% 38% at 12% 68%, rgba(175,218,0,0.022) 0%, transparent 68%),
    linear-gradient(180deg, #080D17 0%, #05070D 28%, #05070D 100%) !important;
  background-attachment: scroll;
}

.blog-listing-page #blog-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8,13,23,0.76) 0%, rgba(5,7,13,0.26) 16%, transparent 36%),
    radial-gradient(ellipse 92% 760px at 50% 3%, rgba(1,129,250,0.066) 0%, transparent 72%),
    radial-gradient(ellipse 78% 980px at 88% 42%, rgba(70,100,255,0.038) 0%, transparent 74%),
    radial-gradient(ellipse 70% 860px at 12% 70%, rgba(1,129,250,0.026) 0%, transparent 74%),
    transparent !important;
}

.blog-listing-page #blog-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.010) 1px, transparent 1px);
  background-size: 82px 82px;
  opacity: 0.42;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.54), rgba(0,0,0,0.18) 760px, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.54), rgba(0,0,0,0.18) 760px, transparent 90%);
}

.blog-listing-page #blog-page::after {
  content: '';
  position: absolute;
  top: 500px;
  right: max(-12vw, -170px);
  width: min(680px, 62vw);
  height: 980px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 36% at 62% 24%, rgba(251,191,36,0.018) 0%, transparent 68%),
    radial-gradient(ellipse 58% 42% at 56% 48%, rgba(175,218,0,0.022) 0%, transparent 72%),
    radial-gradient(ellipse 70% 58% at 52% 66%, rgba(1,129,250,0.030) 0%, transparent 76%);
  filter: blur(1px);
  opacity: 0.92;
  mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 80%, transparent 100%);
}

.blog-listing-page #blog-page > .blog-hero,
.blog-listing-page #blog-page > .container,
.blog-listing-page #blog-page > .section-sm {
  position: relative;
  z-index: 1;
}

.blog-listing-page .blog-hero {
  background:
    radial-gradient(ellipse 72% 54% at 50% 18%, rgba(1,129,250,0.060) 0%, transparent 70%),
    linear-gradient(180deg, rgba(8,13,23,0.18) 0%, transparent 100%) !important;
  overflow: hidden;
}

.blog-listing-page .blog-hero::after {
  background:
    radial-gradient(ellipse 52% 34% at 50% 12%, rgba(1,129,250,0.104) 0%, transparent 72%),
    radial-gradient(ellipse 32% 24% at 62% 58%, rgba(175,218,0,0.034) 0%, transparent 68%) !important;
  opacity: 0.86;
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

.blog-listing-page .blog-hero-inner::after {
  background: linear-gradient(90deg, transparent, rgba(1,129,250,0.16), rgba(175,218,0,0.13), transparent) !important;
  opacity: 0.80;
}

.blog-listing-page .blog-search-wrap,
.blog-listing-page .blog-featured-wrap,
.blog-listing-page .blog-start-here-section,
.blog-listing-page .blog-latest-section,
.blog-listing-page .section-sm {
  position: relative;
  isolation: isolate;
}

.blog-listing-page .blog-featured-wrap::before,
.blog-listing-page .blog-start-here-section::before,
.blog-listing-page .blog-latest-section::before,
.blog-listing-page .section-sm::before {
  content: '';
  position: absolute;
  left: max(-6vw, -96px);
  right: max(-6vw, -96px);
  top: -96px;
  bottom: -96px;
  z-index: 0;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}

.blog-listing-page .blog-featured-wrap::before {
  background:
    radial-gradient(ellipse 68% 54% at 68% 38%, rgba(1,129,250,0.052) 0%, transparent 72%),
    radial-gradient(ellipse 36% 30% at 20% 74%, rgba(175,218,0,0.018) 0%, transparent 66%);
}

.blog-listing-page .blog-start-here-section::before {
  background:
    radial-gradient(ellipse 62% 52% at 28% 48%, rgba(70,100,255,0.040) 0%, transparent 72%),
    radial-gradient(ellipse 50% 40% at 82% 68%, rgba(1,129,250,0.028) 0%, transparent 70%);
}

.blog-listing-page .blog-latest-section::before {
  background:
    radial-gradient(ellipse 70% 56% at 76% 38%, rgba(1,129,250,0.038) 0%, transparent 74%),
    radial-gradient(ellipse 40% 32% at 86% 62%, rgba(251,191,36,0.010) 0%, transparent 70%);
}

.blog-listing-page .section-sm::before {
  background:
    radial-gradient(ellipse 64% 52% at 50% 48%, rgba(175,218,0,0.024) 0%, transparent 70%),
    radial-gradient(ellipse 76% 54% at 50% 60%, rgba(1,129,250,0.030) 0%, transparent 74%);
}

.blog-listing-page .blog-featured-wrap > *,
.blog-listing-page .blog-start-here-section > *,
.blog-listing-page .blog-latest-section > *,
.blog-listing-page .section-sm > * {
  position: relative;
  z-index: 1;
}

.blog-listing-page .start-here-timeline {
  --journey-rail-edge: calc((100% - 36px) / 8);
  position: relative;
  height: 24px;
  align-items: center;
  isolation: isolate;
  z-index: 2;
}

.blog-listing-page .start-here-timeline::before {
  content: '';
  position: absolute;
  left: var(--journey-rail-edge);
  right: var(--journey-rail-edge);
  top: 50%;
  height: 12px;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(1,129,250,0.22) 14%, rgba(1,129,250,0.24) 50%, rgba(1,129,250,0.22) 86%, transparent);
  filter: blur(6px);
  opacity: 0.82;
}

.blog-listing-page .start-here-timeline::after {
  content: '';
  position: absolute;
  left: var(--journey-rail-edge);
  right: var(--journey-rail-edge);
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(1,129,250,0.10) 0%,
    rgba(1,129,250,0.44) 14%,
    rgba(1,129,250,0.66) 50%,
    rgba(1,129,250,0.44) 86%,
    rgba(1,129,250,0.10) 100%
  );
  box-shadow:
    0 0 0 1px rgba(1,129,250,0.07),
    0 0 14px rgba(1,129,250,0.18);
  opacity: 0.98;
}

.blog-listing-page .start-here-node {
  position: relative;
  z-index: 3;
}

.blog-listing-page .start-here-node::before {
  position: relative;
  z-index: 4;
  width: 9px;
  height: 9px;
  background: #0181FA;
  box-shadow:
    0 0 0 3px #07070A,
    0 0 0 6px rgba(1,129,250,0.14),
    0 0 16px rgba(1,129,250,0.48);
}

.blog-listing-page .blog-card--market-news:hover,
.blog-listing-page .blog-featured-main--market-news:hover,
.blog-listing-page .blog-featured-pick--market-news:hover {
  box-shadow:
    0 18px 46px rgba(0,0,0,0.30),
    0 0 24px rgba(251,191,36,0.070),
    inset 0 1px 0 rgba(255,255,255,0.11) !important;
}

@media (max-width: 768px) {
  body.blog-listing-page {
    background-attachment: scroll;
  }

  .blog-listing-page #blog-page {
    background:
      linear-gradient(180deg, rgba(8,13,23,0.76) 0%, rgba(5,7,13,0.24) 22%, transparent 46%),
      radial-gradient(ellipse 120% 560px at 50% 3%, rgba(1,129,250,0.062) 0%, transparent 72%),
      radial-gradient(ellipse 112% 640px at 88% 46%, rgba(70,100,255,0.034) 0%, transparent 74%),
      transparent !important;
  }

  .blog-listing-page #blog-page::after {
    top: 420px;
    right: -46vw;
    width: 92vw;
    height: 760px;
    opacity: 0.64;
  }

  .blog-listing-page .blog-featured-wrap::before,
  .blog-listing-page .blog-start-here-section::before,
  .blog-listing-page .blog-latest-section::before,
  .blog-listing-page .section-sm::before {
    top: -72px;
    bottom: -72px;
  }
}