/* ===== Base ===== */
::selection { background: #22D3EE; color: #060810; }

.grid-bg {
  background-image:
    linear-gradient(rgba(148,197,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,197,255,0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* ===== Floating gradient orbs ===== */
.orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.35;
  will-change: transform;
}
.orb-a { width: 480px; height: 480px; top: -120px; left: -100px; background: radial-gradient(circle, #22D3EE, transparent 70%); }
.orb-b { width: 520px; height: 520px; top: 10%; right: -160px; background: radial-gradient(circle, #8B5CF6, transparent 70%); }
.orb-c { width: 420px; height: 420px; bottom: -10%; left: 30%; background: radial-gradient(circle, #F5B942, transparent 70%); opacity: 0.18; }

/* ===== Nav ===== */
#site-nav { background: transparent; }
#site-nav.scrolled {
  background: rgba(6,8,16,0.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(148,197,255,0.09);
}
.nav-link { position: relative; transition: color .2s ease; }
.nav-link:hover { color: #E7EEF9; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px;
  background: #22D3EE; transition: width .25s ease;
}
.nav-link:hover::after { width: 100%; }

/* ===== Buttons ===== */
.btn-glow {
  background: linear-gradient(135deg, #22D3EE, #8B5CF6);
  color: #060810;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 8px 30px -8px rgba(34,211,238,0.55);
  transition: transform .2s ease, box-shadow .2s ease;
  display: inline-block;
}
/* ---------------------------------------------------------------------------
   Hover is for pointers; press is for everyone.

   A :hover that moves an element sticks on a touchscreen: the browser applies
   it on tap and leaves it applied until something else is tapped, so a button
   that lifts on hover stays lifted after a phone user has already navigated
   away from it. Guarding the MOVEMENT behind (hover: hover) keeps it on
   mouse-driven devices and drops it on touch. The colour-only hovers below
   are left alone - a tinted link that stays tinted for a moment is not the
   same kind of wrong.

   :active then gives back what touch lost. Every control on this page had a
   hover state and no pressed state, so on a phone nothing at all acknowledged
   a tap until the next page arrived. These are deliberately small: a single
   pixel of travel reads as a physical press without feeling like an
   animation.
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .btn-glow:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 14px 36px -6px rgba(34,211,238,0.65); }
}
.btn-glow:active { transform: translateY(1px) scale(0.985); box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset, 0 6px 18px -8px rgba(34,211,238,0.5); }

.btn-outline {
  border: 1px solid rgba(148,197,255,0.25);
  color: #E7EEF9;
  background: rgba(255,255,255,0.02);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
  display: inline-block;
}
@media (hover: hover) {
  .btn-outline:hover { border-color: rgba(34,211,238,0.6); background: rgba(34,211,238,0.06); transform: translateY(-2px); }
}
.btn-outline:active { border-color: rgba(34,211,238,0.6); background: rgba(34,211,238,0.1); transform: translateY(1px) scale(0.985); }

/* ===== Hero ===== */
.text-glow-gradient {
  background: linear-gradient(135deg, #22D3EE, #8B5CF6 60%, #F5B942);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(34,211,238,0.25));
}

.hero-eyebrow { background: rgba(34,211,238,0.05); }

/* Ambient full-bleed hero background chart */
#hero-bg-chart { opacity: 0.28; }
#hero-bg-path { stroke-linecap: round; stroke-linejoin: round; }
#hero-bg-comet { filter: drop-shadow(0 0 8px rgba(245,185,66,0.9)); }
@media (max-width: 767px) {
  #hero-bg-chart { opacity: 0.16; }
}

/* 3D particle globe (canvas, drawn in JS) */
#hero-globe {
  position: absolute;
  display: block;
  width: min(80vw, 600px);
  aspect-ratio: 1 / 1;
  right: -4%;
  top: 50%;
  transform: translateY(-52%);
  opacity: 0.55;
}
@media (max-width: 1023px) {
  #hero-globe {
    right: auto;
    left: 50%;
    transform: translate(-50%, -46%);
    opacity: 0.4;
  }
}

#hero-status-cycle { display: inline-block; }

.pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,211,238,0.55); }
  50% { opacity: .6; box-shadow: 0 0 0 6px rgba(34,211,238,0); }
}

.scroll-dot { animation: scroll-dot 1.6s ease-in-out infinite; }
@keyframes scroll-dot {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* TradingView ticker tape */
.tv-ticker-wrap { min-height: 46px; }
.tv-ticker-wrap .tradingview-widget-container { width: 100%; }

/* Looping keyword marquee band */
.marquee-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-item { display: inline-flex; align-items: center; gap: .75rem; }
.marquee-dot { width: 5px; height: 5px; border-radius: 999px; background: #22D3EE; display: inline-block; }

/* Odometer-style rolling digit counters */
.odometer-digit {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  vertical-align: bottom;
  line-height: 1;
}
.odometer-strip { display: block; will-change: transform; }
.odometer-strip span { display: block; height: 1em; line-height: 1; text-align: center; }
.stat-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Gradient-clipped text on transformed (composited) layers ghosts/breaks in
   Chrome, so a spinning reel rolls as solid ink; once JS lands it, the reel
   is swapped out for a plain, untransformed span (see playOdometer in
   main.js), which safely inherits the parent's gradient clip below. */
.stat-num .odometer-strip span {
  color: #E7EEF9;
  -webkit-text-fill-color: #E7EEF9;
}

/* While the reels spin, drop the gradient clip AND the drop-shadow filter off
   the container entirely. Clipping a gradient to text across transformed
   children makes Chrome paint the digits twice, slightly offset — which reads
   as overlapping numbers that "clear up" the moment the animation ends.
   Colouring the strip alone was not enough: the filter on the parent is what
   creates the compositing layer the clip goes wrong on. */
.stat-num.rolling {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #E7EEF9;
  -webkit-text-fill-color: #E7EEF9;
  filter: none;
}

/* ===== Hero visual: floating terminal ===== */
#hero-visual { perspective: 1200px; }
#hero-parallax { transform-style: preserve-3d; will-change: transform; }

.radar-ring {
  position: absolute;
  inset: 8% 4% 18% 4%;
  border-radius: 9999px;
  border: 1px solid rgba(34,211,238,0.14);
  background: conic-gradient(from 0deg, rgba(34,211,238,0.16), transparent 30%, transparent 70%, rgba(139,92,246,0.14));
  animation: radar-spin 14s linear infinite;
  filter: blur(2px);
}
.radar-ring-2 { inset: 16% 12% 26% 12%; animation-duration: 20s; animation-direction: reverse; opacity: .7; }
@keyframes radar-spin { to { transform: rotate(360deg); } }

.terminal-panel {
  position: relative;
  z-index: 2;
  margin: 6% 4% 0 4%;
  background: rgba(14,20,36,0.62);
  border: 1px solid rgba(148,197,255,0.14);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6), 0 0 60px -25px rgba(34,211,238,0.35);
  overflow: hidden;
}

.float-card {
  position: absolute;
  z-index: 3;
  background: rgba(14,20,36,0.75);
  border: 1px solid rgba(148,197,255,0.16);
  border-radius: 12px;
  padding: .7rem .9rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px -18px rgba(0,0,0,0.55);
}
/* Sits clear ABOVE the terminal header. At -4% the card's lower edge lapped
   over the header row and covered the XAUUSD symbol — there was only ~3px of
   clearance, so any change in viewport width or font size collided. */
/* The float cards sit on NEGATIVE offsets so they overhang the chart card.
   That reads well on a wide hero and collides with the nav on a phone - card 1
   at top:-11% lands directly on the logo around 560px wide. They are decorative
   social proof, so they are hidden on small screens rather than repositioned;
   card 3 already worked this way and the others now match it. */
.float-card-1,
.float-card-2,
.float-card-3 { display: none; }

@media (min-width: 768px) {
  .float-card-1 { display: block; top: -11%; left: -3%; }
  .float-card-2 { display: block; bottom: 4%; right: -4%; }
}
@media (min-width: 1024px) {
  .float-card-3 { display: block; top: 34%; right: -8%; }
}

.candle-body { transform-box: fill-box; transform-origin: bottom; }
.candle-up { fill: #34D399; }
.candle-down { fill: #FB7185; }
.candle-wick { stroke: rgba(255,255,255,0.35); stroke-width: 1.4; }
.candle-wick.wick-up { stroke: #34D399; }
.candle-wick.wick-down { stroke: #FB7185; }
.candle-trend { fill: none; stroke: #22D3EE; stroke-width: 1.5; opacity: .55; }

/* ===== Section shared ===== */
.eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  letter-spacing: .12em;
  color: #22D3EE;
  margin-bottom: .9rem;
}
.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.15;
}
.section-desc {
  margin-top: .9rem;
  color: #8A97AE;
  font-size: 1rem;
  line-height: 1.6;
}

/* ===== Cards ===== */
.ea-card, .ind-card, .analysis-card, .course-card, .price-card, .quote-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.008));
  border: 1px solid rgba(148,197,255,0.09);
  border-radius: 16px;
  padding: 1.75rem;
  position: relative;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
  .ea-card:hover, .ind-card:hover, .analysis-card:hover, .course-card:hover {
    border-color: rgba(34,211,238,0.35);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(34,211,238,0.25);
  }
}
a.ea-card:active, a.ind-card:active, a.analysis-card:active, a.course-card:active {
  border-color: rgba(34,211,238,0.35);
  transform: translateY(1px) scale(0.995);
}

.tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .04em;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(148,197,255,0.08);
  color: #8A97AE;
  white-space: nowrap;
}
.tag-primary { background: rgba(34,211,238,0.12); color: #22D3EE; }
.tag-gold { background: rgba(245,185,66,0.12); color: #F5B942; }

.card-link { font-family: 'JetBrains Mono', monospace; font-size: .8rem; color: #22D3EE; }
.card-link:hover { text-decoration: underline; }

.chart-svg .chart-path { stroke-linecap: round; stroke-linejoin: round; }

.ind-icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: 10px;
  background: rgba(34,211,238,0.08);
  color: #22D3EE;
  display: flex; align-items: center; justify-content: center;
}
.ind-icon svg { width: 1.4rem; height: 1.4rem; }

.analysis-thumb {
  height: 90px;
  border-radius: 10px;
  background:
    repeating-linear-gradient(120deg, rgba(148,197,255,0.06) 0 2px, transparent 2px 18px),
    linear-gradient(135deg, rgba(34,211,238,0.10), rgba(139,92,246,0.10));
  display: flex; align-items: flex-end; padding: .75rem;
}

/* Signal panel */
.signal-panel {
  background: rgba(14,20,36,0.7);
  border: 1px solid rgba(148,197,255,0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.signal-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem; font-family: 'JetBrains Mono', monospace; font-size: .78rem; }
.signal-badge { padding: .15rem .5rem; border-radius: 4px; font-weight: 600; font-size: .68rem; }
.signal-buy { background: rgba(52,211,153,0.15); color: #34D399; }
.signal-sell { background: rgba(251,113,133,0.15); color: #FB7185; }
.signal-status { color: #8A97AE; }

/* Course / price highlight */
.course-card.border-primary\/40 { border-color: rgba(34,211,238,0.35); }
.price-card-featured {
  border-color: rgba(34,211,238,0.45) !important;
  background: linear-gradient(180deg, rgba(34,211,238,0.07), rgba(139,92,246,0.05));
  box-shadow: 0 0 60px -20px rgba(34,211,238,0.35);
}

.avatar {
  width: 2.2rem; height: 2.2rem; border-radius: 999px;
  background: linear-gradient(135deg, #22D3EE, #8B5CF6);
  color: #060810; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: .7rem;
  display: flex; align-items: center; justify-content: center;
}

.social-btn {
  width: 2.1rem; height: 2.1rem; border-radius: 8px;
  border: 1px solid rgba(148,197,255,0.12);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, color .2s ease;
}
.social-btn:hover { border-color: rgba(34,211,238,0.5); color: #22D3EE; }
.social-btn:active { border-color: rgba(34,211,238,0.5); color: #22D3EE; transform: translateY(1px); }
.footer-link:hover { color: #E7EEF9; }

/* CTA panel */
.cta-panel {
  background: radial-gradient(ellipse at 50% 0%, rgba(34,211,238,0.14), transparent 60%), #0e1424;
  border: 1px solid rgba(148,197,255,0.12);
}
.cta-panel::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent, rgba(139,92,246,0.15), transparent);
  animation: cta-sheen 6s linear infinite;
}
@keyframes cta-sheen {
  0% { transform: translateX(-40%); }
  100% { transform: translateX(40%); }
}

/* Reveal defaults (animated in JS) */
.reveal-card, #hero-title, #hero-sub, #hero-ctas, #hero-trust-stats, .stat-card, .section-head {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-card, #hero-title, #hero-sub, #hero-ctas, #hero-trust-stats, .stat-card, .section-head { opacity: 1 !important; }
  .pulse-dot, .scroll-dot, .cta-panel::before, .orb, .radar-ring { animation: none !important; }
}

/* JS-failure fallback: .anim-fallback is stamped on <html> by the inline
   resilience script when the animation stack never booted. */
.anim-fallback .reveal-card,
.anim-fallback #hero-title,
.anim-fallback #hero-title-2,
.anim-fallback #hero-sub,
.anim-fallback #hero-ctas,
.anim-fallback #hero-trust-stats,
.anim-fallback .stat-card,
.anim-fallback .section-head {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}


/* ===== Offering grid (homepage "Everything in one place") ===== */
.offer-card{display:flex;flex-direction:column;gap:.65rem;padding:1.6rem;border-radius:16px;
  border:1px solid var(--border);background:rgba(255,255,255,.022);text-decoration:none;
  transition:border-color .3s ease,transform .3s ease,background .3s ease;}
@media (hover: hover){
  .offer-card:hover{border-color:rgba(34,211,238,.45);transform:translateY(-3px);background:rgba(255,255,255,.04);}
}
.offer-card:active{border-color:rgba(34,211,238,.45);transform:translateY(1px) scale(.995);background:rgba(255,255,255,.05);}
.offer-ico{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;}
.offer-card h3{margin:.35rem 0 0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.12rem;color:var(--ink);}
.offer-card p{margin:0;font-size:.875rem;line-height:1.65;color:var(--muted);}
.offer-link{margin-top:auto;padding-top:.5rem;font-family:'JetBrains Mono',monospace;font-size:.75rem;color:#22D3EE;}
.offer-card--feature{border-color:rgba(245,185,66,.42);
  background:linear-gradient(135deg,rgba(245,185,66,.07),rgba(139,92,246,.05) 60%,transparent);}
.offer-card--feature:hover{border-color:rgba(245,185,66,.7);}
.offer-feature-row{display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:center;}
@media (min-width:640px){.offer-feature-row{grid-template-columns:1.35fr .65fr;}}
.offer-mini{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;}
.offer-mini > div{padding:.6rem .7rem;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,.25);}
.offer-mini span{display:block;font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.15rem;}
.offer-mini b{font-family:'Space Grotesk',sans-serif;font-size:1rem;color:var(--ink);}

/* ===== Sticky join button (appears once the hero is behind you) ===== */
#sticky-cta{position:fixed;right:1.25rem;bottom:1.25rem;z-index:60;opacity:0;transform:translateY(14px);
  pointer-events:none;transition:opacity .35s ease,transform .35s ease;}
#sticky-cta.show{opacity:1;transform:none;pointer-events:auto;}
@media print{#sticky-cta{display:none;}}


/* ===== Touch targets & phone safe areas =====================================
   Two things phones need that desktop never surfaces:
   1. Anything tappable wants ~44px. Inline text links were 19px tall, which is
      fine with a mouse and genuinely awkward with a thumb.
   2. iPhones put a home-indicator gesture bar across the bottom of the screen.
      A fixed element sitting 6px from the bottom lands underneath it, so it
      cannot be tapped at all. env(safe-area-inset-*) is how you clear it. */
@media (max-width: 900px){
  #menu-btn, .social-btn{min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;}
  .card-link, .footer-link, .offer-link{display:inline-block;padding-block:.55rem;}
  .btn-glow, .btn-outline{min-height:46px;display:inline-flex;align-items:center;justify-content:center;}
}

#sticky-cta{
  right:calc(1rem + env(safe-area-inset-right, 0px));
  bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
  min-height:46px;
}

@media (max-width: 640px){
  .offer-card{padding:1.25rem;}
  .offer-mini{grid-template-columns:1fr 1fr;}
}

/* ===========================================================================
   Mobile spacing rhythm
   ---------------------------------------------------------------------------
   The page is laid out with py-24 (6rem) on nearly every section, which reads
   well on a wide screen and badly on a phone: 6rem top plus 6rem bottom puts
   192px of empty space between every block, so a thumb scrolls past more
   nothing than content.

   These rules tighten that on small screens only. They are scoped with an
   attribute selector - section[id] is (0,1,1) against Tailwind's (0,1,0) - so
   they win on specificity rather than on stylesheet order, which the Tailwind
   CDN decides at runtime and is not safe to bet on.
   ========================================================================= */
@media (max-width: 639px) {
  section[id]:not(#hero) {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  /* Gap between a section's heading and its content. */
  section[id] .mt-14 { margin-top: 2rem; }
  section[id] .mt-12 { margin-top: 1.75rem; }

  /* Stacked flex children: gap-8 is 2rem of vertical air once the row wraps
     to a column, which is what makes a two-part card look like two unrelated
     cards with a hole between them. */
  section[id] .gap-8 { gap: 1.5rem; }

  .section-desc { margin-top: .65rem; font-size: .9375rem; }

  /* The hero is the one block that should still breathe: it is the first
     thing seen and has nothing above it competing for the space. */
  #hero { padding-top: 6.5rem; padding-bottom: 3rem; }
}