/* ============================================
   GLOBAL DESIGN TOKENS
   Change values here to update the entire site.
   ============================================ */

:root {
  /* ----- COLORS ----- */
  --color-bg: #0a0a0b;
  --color-bg-deep: #050507;
  --color-glow-1: #7a1f1f;        /* deep red glow (top-left) */
  --color-glow-2: #4a1414;        /* mid red glow */
  --color-glow-3: #2a0a0a;        /* edge fade */
  --color-text: #ffffff;
  --color-text-dim: rgba(255, 255, 255, 0.7);
  --color-pill-bg: rgba(255, 255, 255, 0.1);
  --color-pill-bg-soft: rgba(255, 255, 255, 0.06);
  --color-pill-bg-frosted: rgba(217, 217, 217, 0.3);
  --color-accent: #ff3366;
  --color-growth: #00d97e;
  --color-cta-grad-start: #ff3366;     /* pink/red — gradient buttons start */
  --color-cta-grad-end: #ff9933;       /* orange — gradient buttons end */

  /* ----- TYPOGRAPHY ----- */
  --font-heading: 'Givonic', 'Inter', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ----- FIGMA CANVAS ----- */
  /* The Figma frames were designed at 1728 x 1144.
     Every pixel value in the layout is expressed in those units,
     and the stage scales uniformly to fit the viewport. */
  --canvas-w: 1728;
  --canvas-h: 1144;

  /* ----- SCROLL TIMELINE -----
     Total scroll distance for the pinned hero section, in viewport heights.
     Each phase ≈ 100vh of scroll once dwell time is included:
       Phase 1: zoom-out + APEX CAPITAL fade-in (Frame 8341→8437)
       Phase 2: Total Portfolio Balance slide-up + fade-in (Frame 9035→9133)
       Phase 3: Balance fades out + Market Insights card reveal (Frame 8533→8653)
       Phase 4: Insights out + Rebalance question card reveal (Frame 8773→8900)
       Phase 5: Phone shrinks + "Trusted by..." heading reveal (Frame 9273→10730)
       Phase 6: Floating company badges + phone slightly grows (Frame 10863→13:2)
       Phase 7: 8 more badges fade in (Frame 15:152→15:301)
       Phase 8: Phone + all badges fade out (Frame 15:451→24:2) */
  --scroll-section-vh: 920;

  /* ----- EASING (mirrors Figma "ease in and out") ----- */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}