/* ============================================================
   KOSPI INSIDER — "MIDNIGHT TERMINAL" THEME OVERLAY
   Loads AFTER style.css. Transforms the warm/light playful look
   into a premium dark fintech "trading terminal" aesthetic:
   midnight canvas · glassmorphism · electric-cyan + coral + gold
   neon · animated aurora mesh · data grid · scanning beams ·
   glowing live tickers · shimmer CTAs · mono terminal numbers.

   Non-destructive: only the VISUAL layer is overridden. All
   layout, positioning and JS-driven states (.reveal/.in,
   [data-marker]/.marked, .floating-cta/.show, .modal/.open,
   slider .active, magnetic/tilt inline transforms) are preserved.
   New keyframes are namespaced "nx-" to avoid collisions.
   ============================================================ */

/* ---------- 1. PALETTE (cascades through existing var() usage) ---------- */
:root{
  --bg:        #070b16;            /* deep midnight */
  --bg-soft:   #0b1124;            /* alt band */
  --ink:       #e9eefc;            /* light text on dark */
  --ink-soft:  #9aa7cc;            /* muted light */
  --paper:     rgba(20,28,52,.62); /* glass surface */

  --brand:     #ff5a36;            /* coral-red energy (kept) */
  --brand-2:   #ff8a3d;            /* warm orange */
  --brand-3:   #ffce5a;            /* gold */
  --accent:    #36b6ff;            /* electric blue */
  --accent-2:  #1fe0c8;            /* signature electric cyan */
  --up:        #ff5a52;            /* korean market: red = up */
  --down:      #4f9bff;            /* blue = down */

  --cyan:      #1fe0c8;
  --gold:      #ffd479;

  --line:      rgba(255,255,255,.10);
  --glass-bd:  rgba(255,255,255,.10);
  --glass-bd2: rgba(255,255,255,.16);
  --shadow:    0 18px 44px rgba(0,0,0,.55);
  --shadow-lg: 0 36px 90px rgba(0,0,0,.62);
  --glow-cyan: 0 0 0 1px rgba(31,224,200,.18), 0 0 36px rgba(31,224,200,.22);
  --glow-coral:0 0 0 1px rgba(255,90,54,.20), 0 0 38px rgba(255,90,54,.28);
}

/* ---------- 2. CANVAS / ATMOSPHERE ---------- */
html{ background:#05070f; }

body{
  font-family:'Nanum Gothic', sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 720px at 12% -10%, rgba(31,224,200,.12), transparent 60%),
    radial-gradient(1000px 820px at 92% -4%, rgba(255,90,54,.12), transparent 56%),
    radial-gradient(1200px 900px at 50% 118%, rgba(54,182,255,.10), transparent 60%),
    linear-gradient(180deg, #070b16 0%, #0a1022 45%, #070a14 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* drifting data grid */
body::before{
  content:""; position:fixed; inset:-2px; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(120,160,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,255,.06) 1px, transparent 1px);
  background-size:46px 46px, 46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
  animation:nx-grid-drift 26s linear infinite;
}
/* grain + vignette */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(130% 130% at 50% 0%, transparent 55%, rgba(0,0,0,.45) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  background-size:auto, 160px 160px;
  opacity:.55; mix-blend-mode:overlay;
}
/* keep real content above the atmosphere layers.
   NOTE: do NOT include .floating-cta / .modal here — they are position:fixed
   in style.css (z-index 900/1000) and already sit above the z-index:0
   atmosphere; relative-positioning them would unpin the CTA and collapse the
   full-screen modal overlay. */
.hero, .section, .site-footer{ position:relative; z-index:1; }

@keyframes nx-grid-drift{ to{ background-position:46px 46px, 46px 46px; } }

/* selection + scrollbar */
::selection{ background:rgba(31,224,200,.30); color:#fff; }
*{ scrollbar-color:rgba(31,224,200,.5) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#070b16; }
::-webkit-scrollbar-thumb{ background:linear-gradient(#1fe0c8,#36b6ff); border-radius:99px; border:3px solid #070b16; }

/* ---------- 3. TYPOGRAPHY ACCENTS ---------- */
.section-title{ color:var(--ink); }
.section-title.light{ color:#fff; }
.section-lead, .section-lead.light{ color:var(--ink-soft); }

/* animated neon gradient text for accents */
.ink-accent, .coral-accent, .section-title em{
  background:linear-gradient(100deg, var(--brand) 0%, var(--brand-2) 35%, var(--gold) 70%, var(--cyan) 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:nx-text-flow 7s ease infinite;
}
@keyframes nx-text-flow{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* mono terminal numbers */
.hero-stats .num, .ticker-card .t-val, .ticker-card .t-chg,
.marquee span, .bullet-num, .badge-sticker strong{
  font-family:'Space Mono','Bebas Neue',monospace;
  letter-spacing:.01em;
}

/* ---------- 4. BUTTONS ---------- */
.btn-primary{
  background:linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 45%, var(--gold) 100%);
  background-size:200% auto;
  color:#1a0d06;
  box-shadow:0 10px 30px rgba(255,90,54,.40), 0 0 0 1px rgba(255,206,90,.35) inset;
  animation:nx-cta-flow 6s ease infinite;
}
@keyframes nx-cta-flow{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(255,90,54,.55), 0 0 0 1px rgba(255,206,90,.6) inset;
}
/* travelling sheen across every primary CTA */
.btn-primary::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(110deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); animation:nx-sheen 3.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes nx-sheen{ 0%{ left:-60%; } 55%{ left:140%; } 100%{ left:140%; } }

.btn-ghost{ color:var(--ink); border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.03); backdrop-filter:blur(6px); }
.btn-ghost:hover{ background:rgba(31,224,200,.12); border-color:var(--cyan); color:#fff; box-shadow:var(--glow-cyan); transform:translateY(-2px); }

/* ---------- 5. EYEBROWS / SECTION HEADS ---------- */
.section-eyebrow{
  color:var(--cyan);
  background:rgba(31,224,200,.10);
  border:1px solid rgba(31,224,200,.28);
  box-shadow:0 0 22px rgba(31,224,200,.14);
  backdrop-filter:blur(6px);
}
.section-eyebrow.gold{ color:var(--gold); background:rgba(255,212,121,.10); border-color:rgba(255,212,121,.32); box-shadow:0 0 22px rgba(255,212,121,.14); }
.circle-mark{ color:var(--cyan); }
.circle-mark::before{ border-color:var(--cyan); } /* ring is drawn on ::before in style.css */

/* ---------- 6. SECTION BACKGROUNDS ---------- */
.section-alt{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(31,224,200,.03)), var(--bg-soft); }
.section-about, .section-features, .section-archive, .section-reviews{ background:transparent; }
.section-features{ background:linear-gradient(180deg, transparent, rgba(54,182,255,.04), transparent); }
.section-reviews{ background:linear-gradient(180deg, transparent, rgba(255,90,54,.04), transparent); }
/* thin neon hairlines between bands */
.section-alt::before, .section-features::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(31,224,200,.5), transparent);
}

/* ---------- 7. HERO ---------- */
.hero{
  background:
    radial-gradient(1200px 620px at 82% -12%, rgba(255,206,90,.16), transparent 60%),
    radial-gradient(1000px 560px at 4% 8%, rgba(31,224,200,.16), transparent 58%),
    radial-gradient(900px 560px at 50% 110%, rgba(54,182,255,.12), transparent 60%);
}
/* scanning light beam sweeping the hero */
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(31,224,200,.10) 50%, transparent 62%);
  background-size:260% 100%;
  animation:nx-beam 9s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(#000,transparent 85%); mask-image:linear-gradient(#000,transparent 85%);
}
@keyframes nx-beam{ 0%{ background-position:120% 0; } 50%{ background-position:-40% 0; } 100%{ background-position:120% 0; } }

/* recolor hero blobs to neon, screen-blend glow */
.hero-blob{ mix-blend-mode:screen; filter:blur(46px); opacity:.55; }
.hero-blob.blob-1{ background:radial-gradient(circle at 30% 30%, #1fe0c8, transparent 70%); }
.hero-blob.blob-2{ background:radial-gradient(circle at 60% 40%, #ff5a36, transparent 70%); }
.hero-blob.blob-3{ background:radial-gradient(circle at 50% 50%, #ffce5a, transparent 70%); }
.hero-grain{ opacity:.04; }

/* sparkles + confetti -> neon */
.sparkle{ color:var(--cyan); filter:drop-shadow(0 0 8px rgba(31,224,200,.8)); }
.sparkle.s2, .sparkle.s5{ color:var(--gold); filter:drop-shadow(0 0 8px rgba(255,212,121,.8)); }
.sparkle.s4, .sparkle.s7{ color:var(--brand); filter:drop-shadow(0 0 8px rgba(255,90,54,.8)); }
.confetti.c1,.confetti.c4,.confetti.c7{ background:var(--cyan)!important; box-shadow:0 0 8px rgba(31,224,200,.7); }
.confetti.c2,.confetti.c5,.confetti.c8{ background:var(--gold)!important; box-shadow:0 0 8px rgba(255,212,121,.7); }
.confetti.c3,.confetti.c6,.confetti.c9{ background:var(--brand)!important; box-shadow:0 0 8px rgba(255,90,54,.7); }

/* brand + kicker */
.logo-mark, .footer-brand .logo-mark{
  background:linear-gradient(135deg, var(--cyan), var(--accent));
  color:#04121a; box-shadow:0 0 26px rgba(31,224,200,.5);
}
.brand-name, .logo-text{ color:var(--ink); }
.brand-name em, .logo-text em{ color:var(--cyan); }
.kicker{ color:var(--ink-soft); }
.kicker-dot{ background:var(--up); box-shadow:0 0 0 4px rgba(255,90,54,.18), 0 0 14px rgba(255,90,54,.7); }
.kicker-live{ color:var(--up); }
.kicker-live i{ filter:drop-shadow(0 0 6px rgba(255,90,54,.9)); }

/* hero title glow + squiggle/marker */
.hero-title{ color:var(--ink); }
.title-star, .title-deco{ color:var(--gold); filter:drop-shadow(0 0 10px rgba(255,212,121,.8)); }
.squiggle path{ stroke:var(--cyan); filter:drop-shadow(0 0 6px rgba(31,224,200,.7)); }
.hero-sub{ color:var(--ink-soft); }
.hero-sub strong{ color:var(--ink); }

/* marker highlight (animated by JS adding .marked) */
.marker-hl{ color:#05121a; }
.marker-hl::before, .marker-hl::after{ background:linear-gradient(90deg, var(--cyan), var(--accent))!important; }
.marker-gold::before, .marker-gold::after{ background:linear-gradient(90deg, var(--gold), var(--brand-2))!important; }
.marker-coral::before, .marker-coral::after{ background:linear-gradient(90deg, var(--brand), var(--gold))!important; }

/* stats */
.hero-stats{ border-top:1px solid var(--line); }
.hero-stats .num{ color:var(--cyan); text-shadow:0 0 18px rgba(31,224,200,.45); }
.hero-stats .lbl{ color:var(--ink-soft); }

/* ---------- 8. GLASSMORPHISM — shared surface look ---------- */
.feature-card, .info-cell, .ex-card, .ticker-card, .alert-card,
.final-card, .frame, .phone, .floating-pill, .frame-badge,
.pdf-pill, .speech-bubble, .hero-tag, .accent-flag, .badge-sticker,
.modal-dialog, .fcta-inner, .sticker-tape, .feature-tag, .ex-badge{
  background:var(--paper);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--glass-bd);
  color:var(--ink);
  box-shadow:var(--shadow);
}

/* ---------- 9. HERO VISUAL bits ---------- */
.hero-img-main, .hero-img-accent{ box-shadow:var(--shadow-lg); border:1px solid var(--glass-bd); border-radius:var(--radius-lg); }
.hero-img-main img, .hero-img-accent img{ filter:saturate(1.05) contrast(1.04); }
.hero-tag{ color:var(--ink); }
.hero-tag i{ color:var(--cyan); }
.tag-top i{ color:var(--gold); }

.badge-sticker{ color:var(--ink); }
.bs-best{ background:linear-gradient(135deg, rgba(255,90,54,.92), rgba(255,138,61,.92)); color:#1a0d06; border-color:rgba(255,206,90,.5); box-shadow:var(--glow-coral); }
.bs-best small{ color:#3a1d0c; }
.bs-rate i{ color:var(--gold); filter:drop-shadow(0 0 6px rgba(255,212,121,.8)); }
.bs-rate strong{ color:var(--ink); }
.bs-rate small{ color:var(--ink-soft); }

.accent-flag{ background:linear-gradient(135deg, rgba(31,224,200,.92), rgba(54,182,255,.92)); color:#04121a; border-color:rgba(255,255,255,.25); box-shadow:var(--glow-cyan); }
.accent-flag i{ color:#06222b; }

.deco-circle{ border-color:rgba(31,224,200,.35)!important; }
.deco-dots{ opacity:.5; filter:hue-rotate(150deg); }

/* speech bubble */
.speech-bubble{ color:var(--ink); }
.speech-bubble i{ color:var(--gold); }
.speech-bubble strong{ color:#fff; }

/* ---------- 10. LIVE TICKER CARD ---------- */
.ticker-card{ box-shadow:var(--shadow-lg), var(--glow-cyan); }
.ticker-card-head{ color:var(--ink); border-bottom:1px solid var(--line); }
.ticker-card-head i{ color:var(--cyan); }
.live-dot, .dot.live{ background:var(--up); box-shadow:0 0 0 4px rgba(255,90,54,.18); animation:nx-live 1.4s ease-in-out infinite; }
@keyframes nx-live{ 0%,100%{ box-shadow:0 0 0 3px rgba(255,90,54,.30), 0 0 10px rgba(255,90,54,.6); } 50%{ box-shadow:0 0 0 8px rgba(255,90,54,0), 0 0 18px rgba(255,90,54,.9); } }
.ticker-row{ border-bottom:1px solid rgba(255,255,255,.06); }
.ticker-row .t-name{ color:var(--ink-soft); }
.ticker-row .t-val{ color:var(--ink); }
.ticker-row.up .t-chg{ color:var(--up); text-shadow:0 0 12px rgba(255,90,54,.5); }
.ticker-row.down .t-chg{ color:var(--down); text-shadow:0 0 12px rgba(79,155,255,.5); }

/* ---------- 11. MARQUEE ---------- */
.marquee{
  background:rgba(7,11,22,.7);
  border-block:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee span{ color:var(--ink-soft); }
.marquee .fa-arrow-trend-up{ color:var(--up); }
.marquee .fa-arrow-trend-down{ color:var(--down); }

/* ---------- 12. CARD HOVERS (features / exclusive / info) ---------- */
.feature-card{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.feature-card:hover{ transform:translateY(-6px); border-color:rgba(31,224,200,.45); box-shadow:var(--shadow-lg), var(--glow-cyan); }
.feature-icon{ background:linear-gradient(135deg, rgba(31,224,200,.18), rgba(54,182,255,.18)); color:var(--cyan); border:1px solid rgba(31,224,200,.30); box-shadow:0 0 24px rgba(31,224,200,.18); }
.feature-card h3, .info-cell h4, .ex-card h3{ color:var(--ink); }
.feature-card p, .info-cell p, .ex-card p{ color:var(--ink-soft); }
.feature-tag{ background:rgba(31,224,200,.12); color:var(--cyan); border-color:rgba(31,224,200,.30); }
.feature-tag.hot{ background:rgba(255,90,54,.14); color:var(--brand); border-color:rgba(255,90,54,.35); }
.info-cell i{ color:var(--cyan); filter:drop-shadow(0 0 8px rgba(31,224,200,.5)); }

/* check list + big bullets */
.check-list li{ color:var(--ink-soft); }
.check-list li strong{ color:var(--ink); }
.check-list li i{ color:var(--cyan); background:rgba(31,224,200,.12); box-shadow:0 0 14px rgba(31,224,200,.25); }
.big-bullets li strong{ color:var(--ink); }
.big-bullets li p{ color:var(--ink-soft); }
.bullet-num{ color:var(--cyan); -webkit-text-fill-color:var(--cyan); text-shadow:0 0 16px rgba(31,224,200,.4); }

/* frames + decorative */
.frame{ box-shadow:var(--shadow-lg); border:1px solid var(--glass-bd); }
.frame img{ filter:saturate(1.05) contrast(1.04); }
.frame-badge{ color:var(--ink); }
.frame-badge i{ color:var(--cyan); }
.frame-deco-grid{ opacity:.4; filter:hue-rotate(150deg); }
.floating-pill{ color:#04121a; background:linear-gradient(135deg, var(--cyan), var(--accent)); border:none; box-shadow:var(--glow-cyan); }
.floating-pill i{ color:#04121a; }
.overlay-chart polyline{ stroke:var(--cyan); filter:drop-shadow(0 0 6px rgba(31,224,200,.8)); }

/* ---------- 13. NEWS ALERTS ---------- */
.alert-card{ color:var(--ink); }
.alert-card p{ color:var(--ink-soft); }
.alert-card em{ color:var(--cyan); font-style:normal; }
.alert-card strong{ color:var(--brand); }
.alert-strong-2{ color:var(--gold)!important; }
.alert-strong-3{ color:var(--cyan)!important; }
.alert-row .dot{ background:var(--ink-soft); }
.alert-row .time{ color:var(--ink-soft); }
.bell-deco i{ color:var(--gold); filter:drop-shadow(0 0 12px rgba(255,212,121,.7)); }
.bell-pulse{ border-color:rgba(255,212,121,.5); }

/* ---------- 14. EXCLUSIVE (VIP) ---------- */
.section-exclusive{
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(255,212,121,.10), transparent 60%),
    radial-gradient(800px 500px at 10% 100%, rgba(31,224,200,.08), transparent 60%),
    linear-gradient(180deg, #090d1c, #0c1226);
  border-block:1px solid rgba(255,212,121,.14);
}
.ex-card{ background:rgba(255,255,255,.04); }
.ex-card:hover{ transform:translateY(-6px); border-color:rgba(255,212,121,.45); box-shadow:var(--shadow-lg), 0 0 36px rgba(255,212,121,.18); }
.ex-icon{ color:var(--gold); background:rgba(255,212,121,.12); border:1px solid rgba(255,212,121,.30); box-shadow:0 0 22px rgba(255,212,121,.18); }
.ex-badge{ background:rgba(255,212,121,.12); color:var(--gold); border:1px solid rgba(255,212,121,.30); }
.ex-ribbon{ background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#1a0d06; box-shadow:0 6px 18px rgba(255,90,54,.45); }
.ribbon-blue{ background:linear-gradient(135deg, var(--accent), var(--cyan))!important; color:#04121a!important; }
.ribbon-yellow{ background:linear-gradient(135deg, var(--gold), #ffb020)!important; color:#1a0d06!important; }
/* animated gradient border on featured VIP card */
.ex-card.featured{ border:1px solid transparent; background:
    linear-gradient(rgba(14,19,38,.92), rgba(14,19,38,.92)) padding-box,
    linear-gradient(120deg, var(--gold), var(--brand), var(--cyan), var(--gold)) border-box;
  background-size:auto, 300% 300%;
  animation:nx-border-flow 6s linear infinite;
  box-shadow:var(--shadow-lg), 0 0 40px rgba(255,212,121,.20);
}
@keyframes nx-border-flow{ 0%{ background-position:0 0,0% 50%; } 100%{ background-position:0 0,300% 50%; } }
.exclusive-cta p{ color:var(--ink); }
.exclusive-cta p strong{ color:var(--gold); }

/* ---------- 15. ARCHIVE ---------- */
.pdf-pill{ color:var(--ink); }
.pdf-pill i{ color:var(--brand); }

/* ---------- 16. REVIEWS ---------- */
.phone{ background:linear-gradient(160deg, #0d1430, #0a0f24); border:1px solid var(--glass-bd2); box-shadow:var(--shadow-lg); }
.phone-notch{ background:#05070f; }
.phone-screen{ background:rgba(255,255,255,.03); color:var(--ink); }
.msg-header strong{ color:var(--ink); }
.msg-header small, .when{ color:var(--ink-soft); }
.verified{ color:var(--cyan); filter:drop-shadow(0 0 6px rgba(31,224,200,.6)); }
.stars i{ color:var(--gold); filter:drop-shadow(0 0 5px rgba(255,212,121,.5)); }
.msg{ color:var(--ink-soft); }
.msg strong{ color:var(--ink); }
.avatar{ color:#04121a; box-shadow:0 0 18px rgba(31,224,200,.25); }
.slider-btn{ background:var(--paper); color:var(--ink); border:1px solid var(--glass-bd2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.slider-btn:hover{ background:rgba(31,224,200,.16); color:#fff; border-color:var(--cyan); box-shadow:var(--glow-cyan); }
.slider-dots button{ background:rgba(255,255,255,.18); }
.slider-dots button.active{ background:linear-gradient(90deg, var(--cyan), var(--accent)); box-shadow:0 0 12px rgba(31,224,200,.7); }

/* ---------- 17. FINAL CTA ---------- */
.section-final-cta{ background:transparent; }
.final-card{
  background:
    radial-gradient(700px 320px at 50% -10%, rgba(255,90,54,.18), transparent 60%),
    linear-gradient(160deg, rgba(20,28,52,.85), rgba(12,16,34,.92));
  border:1px solid rgba(255,206,90,.22);
  box-shadow:var(--shadow-lg), 0 0 70px rgba(255,90,54,.16);
}
.final-card h2{ color:#fff; }
.final-card p{ color:var(--ink-soft); }
.final-deco{ background:radial-gradient(circle, rgba(31,224,200,.18), transparent 70%)!important; }
.final-sparkle.fs1{ color:var(--cyan); }
.final-sparkle.fs2{ color:var(--gold); }
.final-sparkle.fs3{ color:var(--brand); }
.final-sparkle{ filter:drop-shadow(0 0 10px currentColor); }
.final-sticker{ background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#1a0d06; box-shadow:var(--glow-coral); }
.final-note{ color:var(--ink-soft); }

/* ---------- 18. FOOTER ---------- */
.site-footer{
  background:linear-gradient(180deg, #080c18, #05070f);
  color:var(--ink-soft);
  border-top:1px solid var(--line);
}
.site-footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(31,224,200,.6), rgba(255,90,54,.5), transparent);
}
.footer-brand p{ color:var(--ink-soft); }
.footer-links h5{ color:var(--ink); }
.footer-links a{ color:var(--ink-soft); }
.footer-links a:hover{ color:var(--cyan); }
.footer-links a i{ color:var(--cyan); }
.footer-bottom{ border-top:1px solid var(--line); }
.footer-bottom small{ color:var(--ink-soft); }

/* ---------- 19. FLOATING CTA ---------- */
.floating-cta .fcta-inner{
  background:linear-gradient(135deg, rgba(20,28,52,.92), rgba(12,16,34,.94));
  border:1px solid rgba(31,224,200,.30);
  box-shadow:var(--shadow-lg), var(--glow-cyan);
}
.fcta-text{ color:var(--ink); }
.fcta-text i{ color:var(--cyan); }
.fcta-text strong{ color:#fff; }

/* ---------- 20. MODALS ---------- */
.modal-backdrop{ background:rgba(3,5,12,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.modal-dialog{ background:linear-gradient(165deg, #0d1430, #0a0f24); border:1px solid var(--glass-bd2); box-shadow:var(--shadow-lg); color:var(--ink); }
.modal-dialog h3{ color:#fff; }
.modal-dialog h3 i{ color:var(--cyan); }
.modal-body, .modal-body p{ color:var(--ink-soft); }
.modal-body h4{ color:var(--ink); }
.modal-body strong{ color:var(--ink); }
.modal-close{ background:rgba(255,255,255,.06); color:var(--ink); border:1px solid var(--glass-bd); }
.modal-close:hover{ background:rgba(255,90,54,.18); color:#fff; border-color:var(--brand); }

/* ---------- 21. STICKER TAPE ---------- */
.sticker-tape{ background:linear-gradient(135deg, var(--brand), var(--gold)); color:#1a0d06; border:none; box-shadow:var(--glow-coral); }
.sticker-tape span{ color:#1a0d06; }

/* ---------- 22. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  body::before, .hero::after, .btn-primary, .btn-primary::after,
  .ink-accent, .coral-accent, .section-title em, .ex-card.featured{ animation:none!important; }
}

/* ====================================================================
   PATCH — cascade the ORIGINAL light-theme variables to dark so every
   var()-based surface/border flips automatically, + catch the few
   light surfaces that slipped through (kicker pill, big-bullets cards,
   hero backdrop, marker text legibility).
   ==================================================================== */
:root{
  --cream:     #070b16;          /* was #FFF7F2 — hero/section bands */
  --cream-2:   #0b1124;          /* was #FFEFE7 */
  --white:     rgba(20,28,52,.62);/* was #FFFFFF — card default */
  --line:      rgba(255,255,255,.10); /* was #EDE0D6 — all hairlines */
  --navy:      #7aa0c8;          /* was #2C3E50 — legible slate on dark */
  --coral-deep:#ff6f5f;          /* brighter coral for dark backgrounds */
}

/* hero backdrop: drop the cream gradient, keep warm glows over midnight */
.hero-bg{
  background:
    radial-gradient(ellipse 80% 60% at 90% 0%, rgba(255,138,61,.20), transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 90%, rgba(31,224,200,.16), transparent 60%),
    linear-gradient(180deg, #070b16 0%, #0a1022 100%) !important;
}

/* kicker pill -> dark glass */
.kicker{
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-bd);
  color:var(--ink-soft);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}

/* study section "big bullets" cards -> dark glass */
.big-bullets li{
  background:var(--paper);
  border:1px solid var(--glass-bd);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
}

/* news alert inline highlights — legible chips on dark glass */
.alert-card p em{ background:rgba(31,224,200,.14); color:var(--cyan); }
.alert-pop-2 p em{ background:rgba(255,212,121,.16)!important; color:var(--gold)!important; }
.alert-pop-3 p em{ background:rgba(79,155,255,.16)!important; color:var(--down)!important; }

/* marker highlight text: visible on dark BEFORE the draw, dark on the
   neon swipe AFTER (.marker-drawn is toggled by JS on scroll) */
.marker-hl{ color:var(--ink); -webkit-text-fill-color:var(--ink); }
.marker-hl.marker-drawn{ color:#08121d; -webkit-text-fill-color:#08121d; transition:color .45s ease; }

/* ---- live news dot: beat the later, equal-specificity .alert-row .dot reset ---- */
.alert-row .dot.live{
  background:var(--up);
  box-shadow:0 0 0 4px rgba(255,90,54,.18);
  animation:nx-live 1.4s ease-in-out infinite;
}

/* ---- robustness: gradient-clipped headings must never vanish where
   background-clip:text is unsupported (older WebKit, print, forced-colors) ---- */
.ink-accent, .coral-accent, .section-title em{ color:var(--brand-2); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ink-accent, .coral-accent, .section-title em{
    -webkit-text-fill-color:transparent; color:transparent;
  }
}

/* ---- robustness: featured VIP card keeps a solid border if the animated
   gradient-border technique isn't supported ---- */
.ex-card.featured{ border:1px solid rgba(255,212,121,.5); }
@supports (background-clip:border-box) and (background-origin:border-box){
  .ex-card.featured{ border:1px solid transparent; }
}

/* ---- hero scan-beam strictly behind hero foreground ---- */
.hero-copy, .hero-visual{ position:relative; z-index:1; }

/* ---- mobile performance: ~20 simultaneous backdrop-filters tank mid-range
   GPUs. Drop the blur below 760px and fall back to a near-solid glass. ---- */
@media (max-width:760px){
  .feature-card, .info-cell, .ex-card, .ticker-card, .alert-card,
  .final-card, .frame, .phone, .floating-pill, .frame-badge,
  .pdf-pill, .speech-bubble, .hero-tag, .accent-flag, .badge-sticker,
  .modal-dialog, .fcta-inner, .sticker-tape, .feature-tag, .ex-badge,
  .kicker, .big-bullets li, .btn-ghost, .marquee, .slider-btn{
    -webkit-backdrop-filter:none !important;
            backdrop-filter:none !important;
    background-color:rgba(16,23,44,.94);
  }
  /* keep gradient/branded fills that happen to be in the list above */
  .floating-pill{ background:linear-gradient(135deg, var(--cyan), var(--accent)); }
  .accent-flag{ background:linear-gradient(135deg, rgba(42,210,192,.95), rgba(54,182,255,.95)); }
  .sticker-tape{ background:rgba(13,20,40,.94); }
  .bs-best{ background:linear-gradient(135deg, rgba(42,210,192,.95), rgba(54,182,255,.95)); }
}

/* ====================================================================
   REVISION 2 — feedback pass (loads last, wins the cascade):
     • Calm down the hero (kill scan-beam / blobs / sparkles / confetti /
       spinning star / squiggle; turn the big marker-swipe into a thin
       underline; make accent text a STATIC solid color, not animated rainbow).
     • Collapse the palette to ONE accent (cool cyan/blue) + neutrals.
       Red/blue kept ONLY for stock up/down data; muted amber ONLY for
       rating stars. Everything else → cyan/blue.
     • Make the fixed bottom CTA bold + glowing so it actually draws the eye.
   ==================================================================== */

/* ---- 1. palette consolidation: one cool accent everywhere ---- */
:root{
  --brand:    #2ad2c0;   /* was coral — now the single cyan accent */
  --brand-2:  #36b6ff;   /* blue, for the 2-stop cyan→blue gradients */
  --brand-3:  #2ad2c0;
  --gold:     #2ad2c0;   /* fold gold into cyan (stars handled separately) */
  --cyan:     #2ad2c0;
  --accent:   #36b6ff;
  --accent-2: #2ad2c0;
  --star:     #d8b15a;   /* muted amber — rating stars ONLY */
  --glow-cyan: 0 0 0 1px rgba(42,210,192,.20), 0 0 32px rgba(42,210,192,.26);
  --glow-coral:0 0 0 1px rgba(42,210,192,.20), 0 0 32px rgba(42,210,192,.26);
}

/* simpler page glow (drop the warm radial) */
body{
  background:
    radial-gradient(1100px 720px at 12% -8%, rgba(42,210,192,.10), transparent 60%),
    radial-gradient(1100px 820px at 90% 0%, rgba(54,182,255,.10), transparent 58%),
    linear-gradient(180deg, #070b16 0%, #0a1022 45%, #070a14 100%) !important;
  background-attachment:fixed;
}

/* ---- 2. CALM HERO ---- */
.hero{
  background:
    radial-gradient(1000px 560px at 85% -10%, rgba(54,182,255,.13), transparent 60%),
    radial-gradient(900px 520px at 4% 6%, rgba(42,210,192,.12), transparent 60%) !important;
}
.hero::after{ display:none !important; }      /* scan beam off */
.hero-bg{
  background:
    radial-gradient(ellipse 70% 60% at 88% 0%, rgba(54,182,255,.14), transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 90%, rgba(42,210,192,.12), transparent 60%),
    linear-gradient(180deg, #070b16 0%, #0a1022 100%) !important;
}
.hero-blob, .sparkle, .confetti,
.title-star, .title-deco, .squiggle{ display:none !important; }  /* drop the busy bits */

/* accent text: STATIC solid cyan (no animated multi-color gradient) */
.ink-accent, .coral-accent, .section-title em,
.final-card h2 em{
  background:none !important;
  -webkit-text-fill-color:var(--cyan) !important;
  color:var(--cyan) !important;
  animation:none !important;
}

/* marker highlight → calm thin cyan underline (JS still draws it via scaleX) */
.marker-hl{ color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important; }
.marker-hl.marker-drawn{ color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important; }
.marker-hl::before, .marker-hl::after{
  background:var(--cyan) !important;
  height:4px !important; bottom:1px !important; top:auto !important;
  left:-2px !important; right:-2px !important; border-radius:3px !important; opacity:.95;
}

/* live indicator → cool (red is reserved for stock data only) */
.kicker-dot{ background:var(--cyan); box-shadow:0 0 0 4px rgba(42,210,192,.18), 0 0 12px rgba(42,210,192,.7); }
.kicker-live{ color:var(--cyan); }
.kicker-live i{ filter:drop-shadow(0 0 6px rgba(42,210,192,.9)); }

/* calmer urgency tape */
.sticker-tape{ background:rgba(13,20,40,.9) !important; color:var(--cyan) !important; border:1px solid rgba(42,210,192,.4) !important; box-shadow:0 6px 18px rgba(0,0,0,.4) !important; }
.sticker-tape span{ color:var(--cyan) !important; }

/* ---- 3. CALM BUTTONS (one clean cyan gradient, no constant sheen/ring) ---- */
.btn-primary{
  background:linear-gradient(120deg, #2ad2c0 0%, #36b6ff 100%) !important;
  background-size:auto !important;
  color:#04121a !important;
  box-shadow:0 10px 28px rgba(42,210,192,.34), 0 0 0 1px rgba(42,210,192,.4) inset !important;
  animation:none !important;
}
.btn-primary:hover{ box-shadow:0 16px 42px rgba(42,210,192,.5), 0 0 0 1px rgba(42,210,192,.6) inset !important; }
.btn-primary::after{ display:none !important; }   /* travelling sheen off */
.btn-shine{ display:none !important; }            /* inner sweep off */
.pulse::after{ display:none !important; }          /* constant pulse ring off */

/* ---- 4. recolor leftover warm literals → cyan/blue ---- */
.section-eyebrow.gold{ color:var(--cyan); background:rgba(42,210,192,.10); border-color:rgba(42,210,192,.28); box-shadow:0 0 22px rgba(42,210,192,.14); }
.section-reviews{ background:linear-gradient(180deg, transparent, rgba(42,210,192,.03), transparent); }
.tag-top i, .speech-bubble i, .bell-deco i{ color:var(--cyan) !important; }
.bell-deco i{ filter:drop-shadow(0 0 12px rgba(42,210,192,.6)) !important; }
.bell-pulse{ border-color:rgba(42,210,192,.5) !important; }
.alert-strong-2{ color:var(--cyan) !important; }
.alert-pop-2 p em{ background:rgba(42,210,192,.14) !important; color:var(--cyan) !important; }

/* rating stars: the one small warm exception */
.stars i, .bs-rate i{ color:var(--star) !important; filter:none !important; }

/* BEST badge → cyan */
.bs-best{ background:linear-gradient(135deg, #2ad2c0, #36b6ff) !important; color:#04121a !important; border-color:rgba(42,210,192,.5) !important; box-shadow:0 0 0 1px rgba(42,210,192,.3), 0 0 24px rgba(42,210,192,.3) !important; }
.bs-best small{ color:#04121a !important; }

/* VIP / exclusive section → cyan/blue */
.section-exclusive{
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(54,182,255,.09), transparent 60%),
    radial-gradient(800px 500px at 10% 100%, rgba(42,210,192,.08), transparent 60%),
    linear-gradient(180deg, #090d1c, #0c1226) !important;
  border-block:1px solid rgba(42,210,192,.14) !important;
}
.ex-card:hover{ border-color:rgba(42,210,192,.45) !important; box-shadow:var(--shadow-lg), 0 0 36px rgba(42,210,192,.18) !important; }
.ex-icon{ color:var(--cyan) !important; background:rgba(42,210,192,.12) !important; border-color:rgba(42,210,192,.30) !important; box-shadow:0 0 22px rgba(42,210,192,.18) !important; }
.ex-badge{ color:var(--cyan) !important; background:rgba(42,210,192,.12) !important; border-color:rgba(42,210,192,.30) !important; }
.exclusive-cta p strong{ color:var(--cyan) !important; }
.ex-ribbon{ background:linear-gradient(135deg, #2ad2c0, #36b6ff) !important; color:#04121a !important; box-shadow:0 6px 18px rgba(42,210,192,.4) !important; }
.ribbon-blue, .ribbon-yellow{ background:linear-gradient(135deg, #36b6ff, #2ad2c0) !important; color:#04121a !important; }
.ex-card.featured{
  background:
    linear-gradient(rgba(14,19,38,.92), rgba(14,19,38,.92)) padding-box,
    linear-gradient(120deg, #2ad2c0, #36b6ff, #2ad2c0) border-box !important;
  box-shadow:var(--shadow-lg), 0 0 34px rgba(42,210,192,.2) !important;
}

/* final CTA card → cyan, drop sparkles */
.final-card{
  background:
    radial-gradient(700px 320px at 50% -10%, rgba(42,210,192,.16), transparent 60%),
    linear-gradient(160deg, rgba(20,28,52,.85), rgba(12,16,34,.92)) !important;
  border:1px solid rgba(42,210,192,.22) !important;
  box-shadow:var(--shadow-lg), 0 0 60px rgba(42,210,192,.14) !important;
}
.final-sparkle{ display:none !important; }
.final-sticker{ background:linear-gradient(135deg, #2ad2c0, #36b6ff) !important; color:#04121a !important; box-shadow:0 0 0 1px rgba(42,210,192,.3), 0 0 28px rgba(42,210,192,.3) !important; }
.final-deco{ background:radial-gradient(circle, rgba(42,210,192,.18), transparent 70%) !important; }

/* footer hairline + modal close → cyan */
.site-footer::before{ background:linear-gradient(90deg, transparent, rgba(42,210,192,.6), transparent) !important; }
.modal-close:hover{ background:rgba(42,210,192,.16) !important; border-color:var(--cyan) !important; color:#fff !important; }

/* ---- 5. BOLD FIXED CTA (the part that felt unattractive) ---- */
.floating-cta .fcta-inner{
  background:linear-gradient(135deg, rgba(13,20,40,.97), rgba(10,15,32,.98)) !important;
  border:1.5px solid rgba(42,210,192,.55) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(42,210,192,.25), 0 0 30px rgba(42,210,192,.30) !important;
  animation:nx-fcta 2.8s ease-in-out infinite;
}
@keyframes nx-fcta{
  0%,100%{ box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(42,210,192,.22), 0 0 24px rgba(42,210,192,.20); }
  50%{ box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(42,210,192,.55), 0 0 42px rgba(42,210,192,.46); }
}
.floating-cta .fcta-text strong{ color:#2ad2c0 !important; }
.floating-cta .fcta-text i{ color:#2ad2c0 !important; }
.floating-cta .btn-primary{ box-shadow:0 8px 24px rgba(42,210,192,.55), 0 0 0 1px rgba(42,210,192,.55) inset !important; }

@media (prefers-reduced-motion:reduce){ .floating-cta .fcta-inner{ animation:none; } }