/* ==========================================================================
   JERS FINANCE ACADEMY — FOUNDATION STYLESHEET (V4 "The Tape")
   ---------------------------------------------------------------------------
   Design language borrowed from the product itself: the price chart.
   - Eyebrows are rendered as chart LEVEL MARKERS (zone square + hairline rule)
   - Photography is framed as a CHART ZONE (dashed supply/demand rectangle)
   - Every number is set in tabular mono — the "price voice"
   Display: Archivo (variable width axis, used expanded for terminal signage)
   Body:    Instrument Sans
   Data:    JetBrains Mono
   ========================================================================== */

:root {
  /* ---- Dark obsidian surfaces ---- */
  --bg-pitch: #06070a;
  --bg-surface-1: #0a0c11;
  --bg-surface-2: #10131a;
  --bg-surface-3: #161b26;
  --bg-surface-elevated: #1b212f;
  --bg-surface: #0d1017;

  /* ---- Warm paper (alternating light sections) ---- */
  --cream-bg: #f5f2ec;
  --cream-card: #ffffff;
  --cream-surface: #ece8e0;
  --cream-border: rgba(28, 24, 19, 0.10);
  --cream-border-hover: rgba(255, 23, 61, 0.38);
  --cream-text-dark: #0f1218;
  --cream-text-muted: #4a5260;
  --cream-text-dim: #6d7887;

  /* ---- JERS crimson (from the winged emblem) ---- */
  --red-primary: #ff173d;
  --red-hover: #ff3355;
  --red-dark: #b80020;
  --red-deep: #7a0014;
  --red-glow: rgba(255, 23, 61, 0.42);
  --red-subtle: rgba(255, 23, 61, 0.12);
  --red-border: rgba(255, 23, 61, 0.28);
  --red-gradient: linear-gradient(135deg, #ff173d 0%, #b80020 100%);

  /* ---- Market confluence colours ---- */
  --bull-green: #00e599;
  --bull-green-subtle: rgba(0, 229, 153, 0.12);
  --bull-green-glow: rgba(0, 229, 153, 0.35);
  --bear-red: #ff2a4b;
  --bear-red-subtle: rgba(255, 42, 75, 0.12);
  --bear-red-glow: rgba(255, 42, 75, 0.35);
  --gold-accent: #f0a63c;

  /* ---- Text ---- */
  --text-white: #ffffff;
  --text-platinum: #eef2f7;
  --text-muted: #96a1b2;
  --text-dim: #5f6b7d;

  /* ---- Lines ---- */
  --border-glass: rgba(255, 255, 255, 0.07);
  --border-glass-hover: rgba(255, 255, 255, 0.16);
  --hairline: rgba(255, 255, 255, 0.10);
  --hairline-ink: rgba(16, 20, 28, 0.12);

  /* ---- Type ---- */
  --font-display: 'Archivo', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Instrument Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* ---- Motion ---- */
  --tr-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-normal: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-smooth: 0.45s cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout & Geometry (Sharp, bespoke institutional aesthetic) ---- */
  --max-width: 1240px;
  --nav-height: 80px;
  --gutter: 24px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 10px;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--bg-pitch);
  /* `clip` (not `hidden`) kills sideways overflow WITHOUT breaking the
     sticky navbar or turning <body> into a scroll container. */
  overflow-x: clip;
  scroll-padding-top: calc(var(--nav-height) + 20px);
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-pitch);
  color: var(--text-platinum);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Safari 15 and older ignore `clip` and fall back to `visible`, which would
   let the sideways scrollbar return. `hidden` on <body> alone is the old
   workaround — it costs us nothing there because those versions also don't
   get the sticky-nav regression that `hidden` on <html> would cause. */
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

/* Nothing may push the page sideways. */
img, svg, video, canvas, iframe { max-width: 100%; }
img { display: block; }

::selection { background: var(--red-primary); color: #fff; }

:focus-visible {
  outline: 2px solid var(--red-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   PAGE LOADER — a candle print forming on the tape
   ---------------------------------------------------------------------------
   Bodies grow from their open with a staggered scaleY, which is exactly how a
   candle builds on a live chart. Transform + opacity only, so it costs one
   composited layer and nothing else while the page is still parsing.

   It dismisses three ways, in order of speed:
     1. main.js adds .is-done on window load (the normal path),
     2. main.js's own timeout, if load never fires,
     3. the CSS delay below — so the page is never trapped behind the loader
        even with JavaScript disabled entirely.
   ========================================================================== */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg-pitch);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  animation: loader-out 0.45s cubic-bezier(0.16, 1, 0.3, 1) 4s forwards;
}

/* JS-driven dismissal: higher specificity, so it overrides the timed fallback. */
.page-loader.is-done {
  animation: loader-out 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes loader-out {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Loader Close / Skip Button */
.loader-close-btn {
  position: absolute;
  top: 26px;
  right: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  min-height: 38px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #8ea1bd;
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.22s ease;
  z-index: 310;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.loader-close-btn:hover,
.loader-close-btn:focus-visible {
  background: rgba(255, 42, 75, 0.16);
  border-color: rgba(255, 42, 75, 0.45);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 42, 75, 0.25);
  outline: none;
}

.loader-close-btn svg {
  stroke: currentColor;
  transition: transform 0.22s ease;
  flex-shrink: 0;
}

.loader-close-btn:hover svg {
  transform: rotate(90deg);
}

@media (max-width: 576px) {
  .loader-close-btn {
    top: 16px;
    right: 16px;
    padding: 7px 14px;
    font-size: 0.72rem;
    gap: 6px;
    min-height: 36px;
  }
}

.loader-candles {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 72px;
}

.loader-candle {
  position: relative;
  width: 9px;
  border-radius: 2px;
  transform-origin: bottom center;
  animation: candle-print 1.25s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* The wick, drawn from the body's own colour. */
.loader-candle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -9px;
  bottom: -9px;
  width: 2px;
  transform: translateX(-50%);
  background: inherit;
  opacity: 0.5;
  border-radius: 1px;
}

.loader-candle.up {
  background: var(--bull-green);
  box-shadow: 0 0 12px var(--bull-green-glow);
}

.loader-candle.down {
  background: var(--red-primary);
  box-shadow: 0 0 12px var(--red-glow);
}

/* Staggered heights and delays so the row reads as price action, not a
   progress bar pretending to be candles. */
.loader-candle:nth-child(1) { height: 26px; animation-delay: 0s; }
.loader-candle:nth-child(2) { height: 44px; animation-delay: 0.09s; }
.loader-candle:nth-child(3) { height: 20px; animation-delay: 0.18s; }
.loader-candle:nth-child(4) { height: 52px; animation-delay: 0.27s; }
.loader-candle:nth-child(5) { height: 34px; animation-delay: 0.36s; }
.loader-candle:nth-child(6) { height: 62px; animation-delay: 0.45s; }
.loader-candle:nth-child(7) { height: 40px; animation-delay: 0.54s; }

@keyframes candle-print {
  0%   { transform: scaleY(0.12); opacity: 0.3; }
  45%  { transform: scaleY(1);    opacity: 1; }
  100% { transform: scaleY(0.12); opacity: 0.3; }
}

.loader-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
}


@media (prefers-reduced-motion: reduce) {
  /* No looping animation, and get out of the way almost immediately. */
  .loader-candle { animation: none; opacity: 1; }
  .page-loader { animation: loader-out 0.01s linear 0.35s forwards; }
}

/* ==========================================================================
   AMBIENT BACKGROUND
   ========================================================================== */
.bg-grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 60%, transparent 100%);
}

.ambient-glow-top {
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: min(800px, 130vw);
  height: 500px;
  background: radial-gradient(ellipse, rgba(255, 23, 61, 0.16) 0%, rgba(255, 23, 61, 0.03) 45%, transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   TYPOGRAPHY
   The display face runs EXPANDED (wdth ~112) so headlines read like
   exchange signage rather than another geometric sans.
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-white);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.45rem, 5.4vw, 4.05rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.035em;
  line-height: 0.99;
}

h2 {
  font-size: clamp(1.95rem, 3.8vw, 2.95rem);
  font-weight: 800;
  font-stretch: 108%;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

h3 {
  font-size: clamp(1.28rem, 2.1vw, 1.6rem);
  font-weight: 700;
  font-stretch: 104%;
  letter-spacing: -0.018em;
}

h4 { font-size: 1.1rem; font-weight: 700; font-stretch: 102%; }
h5 { font-size: 0.95rem; font-weight: 700; }

p {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.68;
  text-wrap: pretty;
}

a { color: inherit; text-decoration: none; transition: color var(--tr-fast); }

strong, b { color: var(--text-platinum); font-weight: 600; }
.section-cream strong, .section-cream b { color: var(--cream-text-dark); }

/* Every figure on this site is a price. Set it like one. */
.num, .counter-val, .hero-stat-number, .pricing-val, .rr-result-val,
.rr-slider-val, .course-price-now, .lesson-duration {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.text-gradient-red {
  background: linear-gradient(118deg, #ffffff 4%, #ff7289 46%, #ff173d 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.section-cream .text-gradient-red {
  background: linear-gradient(118deg, #1a1f29 4%, #d4102f 52%, #ff173d 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-red { color: var(--red-primary) !important; }
.text-green { color: var(--bull-green) !important; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 1;
}

.section {
  padding: 104px 0;
  position: relative;
  z-index: 1;
}

.section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px auto;
}

.section-header p {
  margin-top: 16px;
  font-size: 1.1rem;
}

/* Centered section headers need the level marker centered too. */
.section-header .badge-pill { justify-content: center; }

/* ==========================================================================
   SIGNATURE: THE LEVEL MARKER
   The old pill badge is re-cut as a chart price-level annotation —
   a filled zone square, a mono label, and a hairline that runs off to the
   right exactly the way a level is drawn on a chart.
   ========================================================================== */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #ff5f78;
  font-family: var(--font-mono);
  font-size: 0.735rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  margin-bottom: 20px;
  line-height: 1;
}

/* The zone square replaces the pulsing dot. */
.badge-pill .pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--red-subtle);
  border: 1.5px solid var(--red-primary);
  box-shadow: 0 0 10px var(--red-glow);
  flex-shrink: 0;
  animation: zone-breathe 2.6s infinite ease-in-out;
}

.badge-pill::after { display: none !important; }

.badge-pill-green { color: var(--bull-green); }
.badge-pill-green .pulse-dot {
  background: var(--bull-green-subtle);
  border-color: var(--bull-green);
  box-shadow: 0 0 10px var(--bull-green-glow);
}
.badge-pill-green::after { display: none !important; }

.section-cream .badge-pill { color: #cf0c2e; }

@keyframes zone-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

/* Small standalone mono label, used for captions and data rows. */
.data-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ==========================================================================
   SCROLL REVEAL
   Baseline CSS state. GSAP takes over when it loads (see motion.js);
   if it doesn't, main.js's IntersectionObserver reveals these instead.
   ========================================================================== */
.reveal-on-scroll,
.reveal-up {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  /* No will-change here. These are scattered across every page, so promoting
     all of them up front costs far more in layer memory than it saves on one
     short transition. motion.js sets it per element as each tween runs. */
}

.reveal-on-scroll.revealed,
.reveal-up.revealed,
.motion-ready .reveal-on-scroll,
.motion-ready .reveal-up {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

/* GSAP owns these elements — drop the CSS transition so the two don't fight. */
.gsap-ready .reveal-on-scroll,
.gsap-ready .reveal-up { transition: none; }

/* If JS never runs at all, show everything. */
.no-js .reveal-on-scroll,
.no-js .reveal-up { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-on-scroll, .reveal-up { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.site-navbar {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--nav-height);
  background: rgba(7, 9, 13, 0.84);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border-glass);
  z-index: 50;
  transition: background var(--tr-normal), box-shadow var(--tr-normal), height var(--tr-normal);
}

.site-navbar.scrolled {
  background: rgba(7, 9, 13, 0.97);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 23, 61, 0.22);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}

.nav-brand { display: flex; align-items: center; flex-shrink: 0; }

.nav-logo-img {
  height: 58px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(255, 23, 61, 0.42));
  transition: transform var(--tr-normal), filter var(--tr-normal);
}

.nav-brand:hover .nav-logo-img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 22px rgba(255, 23, 61, 0.7));
}

.nav-menu { display: flex; align-items: center; gap: 30px; list-style: none; }

.nav-link {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text-muted);
  position: relative;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color var(--tr-fast);
}

/* The underline is drawn like a level being marked: left to right. */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--red-gradient);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--tr-normal);
}

.nav-link:hover { color: var(--text-white); }
.nav-link:hover::after { transform: scaleX(1); }

.nav-link.active { color: #ffffff; }
.nav-link.active::after {
  transform: scaleX(1);
  box-shadow: 0 0 10px var(--red-primary);
}

.nav-badge-new {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--red-primary);
  color: #fff;
  letter-spacing: 0.08em;
  box-shadow: 0 0 8px var(--red-glow);
}

.nav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.mobile-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  color: var(--text-white);
  padding: 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background var(--tr-fast), border-color var(--tr-fast);
}

.mobile-toggle:hover {
  background: var(--red-subtle);
  border-color: var(--red-border);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 104%;
  font-size: 0.94rem;
  letter-spacing: -0.005em;
  padding: 13px 26px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  outline: none;
  transition: transform var(--tr-normal), box-shadow var(--tr-normal),
              background var(--tr-normal), border-color var(--tr-normal), color var(--tr-normal);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

/* A light sweep passes across the button on hover. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover::before { transform: translateX(120%); }

.btn-primary {
  background: var(--red-gradient);
  color: #ffffff !important;
  box-shadow: 0 0 24px var(--red-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(255, 23, 61, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

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

.btn-secondary {
  background: rgba(18, 22, 32, 0.7);
  color: var(--text-platinum);
  border: 1px solid var(--border-glass-hover);
  backdrop-filter: blur(8px);
}

.btn-secondary:hover {
  background: rgba(25, 30, 44, 0.92);
  border-color: var(--red-border);
  color: var(--text-white);
  transform: translateY(-2px);
}

.section-cream .btn-secondary {
  background: #ffffff;
  color: var(--cream-text-dark);
  border: 1px solid var(--hairline-ink);
  box-shadow: 0 4px 14px rgba(20, 15, 10, 0.06);
}

.section-cream .btn-secondary:hover {
  background: #ffffff;
  color: var(--cream-text-dark);
  border-color: var(--cream-border-hover);
  box-shadow: 0 10px 24px rgba(255, 23, 61, 0.14);
}

.section-cream .btn::before {
  background: linear-gradient(105deg, transparent 30%, rgba(255, 23, 61, 0.1) 50%, transparent 70%);
}
.section-cream .btn-primary::before {
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
}

.btn-sm { padding: 9px 17px; font-size: 0.84rem; border-radius: var(--radius-sm); }
.btn-lg { padding: 16px 34px; font-size: 1.02rem; border-radius: 12px; }

.btn-icon-right { transition: transform var(--tr-normal); flex-shrink: 0; }
.btn:hover .btn-icon-right { transform: translateX(5px); }

.btn-block { width: 100%; }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card-glass {
  background: rgba(13, 16, 23, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: transform var(--tr-normal), border-color var(--tr-normal), box-shadow var(--tr-normal);
}

.card-glass:hover {
  border-color: var(--red-border);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 23, 61, 0.12);
}

.glow-card-red {
  position: relative;
  border-radius: 18px;
  background: var(--bg-surface-2);
  border: 1px solid var(--red-border);
  box-shadow: 0 0 30px rgba(255, 23, 61, 0.15);
}

/* ==========================================================================
   WARM PAPER SECTIONS
   ========================================================================== */
.section-cream {
  background: var(--cream-bg);
  color: var(--cream-text-dark);
  position: relative;
  z-index: 2;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.section-cream h1, .section-cream h2, .section-cream h3,
.section-cream h4, .section-cream h5 { color: var(--cream-text-dark); }

.section-cream p { color: var(--cream-text-muted); }
.section-cream .data-label { color: var(--cream-text-dim); }

.cream-card {
  background: var(--cream-card);
  border: 1px solid var(--cream-border);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(20, 15, 10, 0.045);
  transition: transform var(--tr-normal), border-color var(--tr-normal), box-shadow var(--tr-normal);
  position: relative;
  overflow: hidden;
}

/* A crimson level line grows across the card top on hover. */
.cream-card::before,
.card-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--red-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cream-card:hover::before,
.card-glass:hover::before { transform: scaleX(1); }

.cream-card:hover {
  transform: translateY(-4px);
  border-color: var(--cream-border-hover);
  box-shadow: 0 18px 38px rgba(255, 23, 61, 0.1);
}

/* ==========================================================================
   SECTION DIVIDER
   ========================================================================== */
.trading-chart-divider {
  position: relative;
  width: 100%;
  height: 90px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.35;
}

.trading-chart-divider svg { width: 100%; height: 100%; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: #040507;
  border-top: 1px solid var(--border-glass);
  padding: 78px 0 26px 0;
  position: relative;
  z-index: 10;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1.25fr 1.1fr;
  gap: 48px;
  margin-bottom: 50px;
}

.footer-brand-col p {
  margin: 16px 0 22px 0;
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 360px;
}

.footer-logo-img {
  height: 58px;
  width: auto;
  filter: drop-shadow(0 0 14px rgba(255, 23, 61, 0.4));
}

.social-links-row { display: flex; align-items: center; gap: 12px; }

.social-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-glass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: transform var(--tr-fast), background var(--tr-fast),
              border-color var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast);
}

.social-btn:hover {
  background: var(--red-primary);
  border-color: var(--red-primary);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--red-glow);
}

.footer-col-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-white);
  margin-bottom: 22px;
  position: relative;
  display: inline-block;
}

.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--red-primary);
  border-radius: 2px;
}

.footer-links-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }

.footer-link {
  color: var(--text-muted);
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color var(--tr-fast), transform var(--tr-fast);
}

.footer-link svg { transition: transform var(--tr-fast); flex-shrink: 0; }
.footer-link:hover { color: var(--red-primary); transform: translateX(4px); }
.footer-link:hover svg { transform: translateX(2px); }

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 0.92rem;
  min-width: 0;
}

.footer-contact-item svg { color: var(--red-primary); flex-shrink: 0; margin-top: 3px; }
.footer-contact-item > div { min-width: 0; }
/* Long addresses must wrap instead of widening the page. */
.footer-contact-item a { overflow-wrap: anywhere; }
.footer-contact-item a:hover { color: var(--red-primary); }

.footer-disclaimer-box {
  background: rgba(14, 17, 24, 0.7);
  border-left: 3px solid var(--red-primary);
  border-radius: 10px;
  padding: 18px 24px;
  margin-bottom: 36px;
}

.footer-disclaimer-box h5 {
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff5f78;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-disclaimer-box h5 svg { flex-shrink: 0; }
.footer-disclaimer-box p { font-size: 0.82rem; line-height: 1.65; color: var(--text-dim); }

.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--border-glass);
  font-size: 0.84rem;
  color: var(--text-dim);
}

/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */
.mobile-nav-drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  background: rgba(5, 6, 9, 0.985);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 26px var(--gutter) calc(26px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
  transition: transform var(--tr-smooth), visibility var(--tr-smooth);
}

.mobile-nav-drawer.open { transform: translate3d(0, 0, 0); visibility: visible; }

/* Scroll lock while the drawer is open. JS only measures the scrollbar width
   and hands it over as --scrollbar-gap; the declarations stay here. */
body.is-nav-open {
  overflow: hidden;
  padding-right: var(--scrollbar-gap, 0px);
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
  flex-shrink: 0;
}

.mobile-drawer-close {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  color: var(--text-white);
  padding: 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 0;
}

.mobile-menu-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 32px;
}

.mobile-menu-links a {
  font-size: 1.22rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 105%;
  letter-spacing: -0.02em;
  color: var(--text-platinum);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--border-glass);
  transition: color var(--tr-fast), padding-left var(--tr-fast);
}

.mobile-menu-links a:hover { padding-left: 10px; color: var(--text-white); }
.mobile-menu-links a.active { color: var(--red-primary); }
.mobile-menu-links a svg { flex-shrink: 0; opacity: 0.5; }

.mobile-drawer-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .nav-menu { display: none; }
  .mobile-toggle { display: inline-flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .section { padding: 82px 0; }
}

@media (max-width: 720px) {
  :root { --nav-height: 70px; --gutter: 18px; }
  .section { padding: 62px 0; }
  .section-header { margin-bottom: 40px; }
  .section-header p { font-size: 1.02rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .site-footer { padding: 56px 0 24px; }
  .footer-bottom-bar { flex-direction: column; align-items: flex-start; text-align: left; }
  .nav-logo-img, .footer-logo-img { height: 44px; }
  .badge-pill { font-size: 0.68rem; letter-spacing: 0.15em; margin-bottom: 16px; }
  p { font-size: 1rem; }
  /* The full-bleed CTA buttons stack rather than squeezing. */
  .btn-lg { padding: 14px 24px; font-size: 0.96rem; }
}

@media (max-width: 400px) {
  .btn { font-size: 0.88rem; padding: 12px 18px; }
  .btn-lg { width: 100%; }
}