/* ==========================================================================
   BiTo Fintech — Design System Tokens
   Single source of truth: values sampled from the supplied Figma frames.
   Use semantic tokens (--c-*, --fs-*, --space-*) in all stylesheets.
   ========================================================================== */
:root {
  /* ========================================================================
     COLOR — brand & accent (Figma-verified)
     ======================================================================== */
  --c-primary: #1462dd;
  --c-primary-hover: #1150be;
  --c-primary-bright: #2e6bf0;
  --c-sky: #5fc6fd;              /* accent headlines, labels, links on dark */
  --c-sky-soft: #8fd4f8;
  --c-cyan: #17c5fa;             /* bright fills — cards, 360° ring, diagram */
  --c-cyan-line: #2bb0f0;        /* connector strokes & dots */
  --c-link: var(--c-sky);
  --c-link-hover: var(--c-sky-soft);
  --c-btn-primary-bg: var(--c-primary);
  --c-btn-primary-text: var(--c-text);
  --c-btn-sky-bg: var(--c-sky);
  --c-btn-sky-text: #0a0e16;
  --c-btn-ghost-border: var(--c-border);

  /* ========================================================================
     COLOR — surfaces
     ======================================================================== */
  --c-bg: #080c14;
  --c-bg-navy: #0d152c;          /* canonical section navy (all Figma frames) */
  --c-bg-navy-2: #0e1626;
  --c-bg-deep: #05080e;
  --c-bg-hero: #04060c;
  --c-footer-bg: #0a0c10;
  --c-hero: #0a0e16;
  --c-surface-light: #f1f4fa;
  --c-surface-light-2: #ffffff;
  --c-card-light: #f4f9ff;
  --c-card-dark: #111820;
  --c-card-line: rgba(255, 255, 255, .08);
  --c-nav-pill: rgba(244, 247, 252, .96);
  --c-nav-ink: #1d2738;
  --c-nav-cta: #1857c4;

  /* ========================================================================
     COLOR — text
     ======================================================================== */
  --c-text: #f3f9ff;
  --c-text-muted: #9aa6b8;
  --c-text-dim: #6b7689;
  --c-text-on-light: #1e2633;
  --c-text-on-light-muted: #5a6473;
  --c-heading-muted: #5d6b80;
  --c-pill-text: #cfe0ff;

  /* ========================================================================
     COLOR — borders
     ======================================================================== */
  --c-border: rgba(255, 255, 255, .10);
  --c-border-soft: rgba(255, 255, 255, .06);
  --c-border-light: #e3e8f1;
  --c-border-node: rgba(255, 255, 255, .28);
  --c-rule: rgba(255, 255, 255, .35);

  /* ========================================================================
     COLOR — overlays & glows (alpha presets)
     ======================================================================== */
  --c-glow-primary: rgba(46, 107, 240, .45);
  --c-glow-primary-soft: rgba(46, 107, 240, .12);
  --c-glow-cyan: rgba(40, 125, 255, .8);
  --c-glow-cyan-mid: rgba(40, 125, 255, .62);
  --c-glow-cyan-soft: rgba(40, 125, 255, .55);
  --c-glow-node: rgba(63, 140, 255, .22);
  --c-glow-node-inset: rgba(120, 190, 255, .10);
  --c-overlay-dark: rgba(10, 16, 28, .35);
  --c-overlay-primary: rgba(35, 64, 230, .08);
  --c-overlay-sky: rgba(91, 194, 245, .07);
  --c-overlay-sky-btn: rgba(91, 194, 245, .18);
  --c-overlay-sky-btn-hover: rgba(91, 194, 245, .30);
  --c-watermark: rgba(255, 255, 255, .04);
  --c-watermark-strong: rgba(255, 255, 255, .07);
  --c-watermark-light: rgba(20, 30, 55, .07);

  /* ========================================================================
     TYPOGRAPHY — families
     ======================================================================== */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ========================================================================
     TYPOGRAPHY — weights
     ======================================================================== */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ========================================================================
     TYPOGRAPHY — sizes (fluid scale from Figma 1440 frame)
     ======================================================================== */
  --fs-hero: clamp(2.6rem, 6vw, 5rem);
  --fs-hero-lg: clamp(2.8rem, 6vw, 5.5rem);
  --fs-h1: clamp(2.2rem, 4.6vw, 4rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 2.4vw, 2.25rem);
  --fs-h4: clamp(1.15rem, 1.6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.375rem);
  --fs-body: 1rem;
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;
  --fs-label: .8125rem;
  --fs-stat: clamp(2.4rem, 4vw, 3.25rem);
  --fs-card-title: 1.25rem;
  --fs-card-desc: .9rem;
  --fs-nav: 1.05rem;

  /* ========================================================================
     TYPOGRAPHY — line-height
     ======================================================================== */
  --lh-tight: 1.04;
  --lh-snug: 1.08;
  --lh-heading: 1.1;
  --lh-body: 1.6;
  --lh-relaxed: 1.75;
  --lh-display: .9;

  /* ========================================================================
     TYPOGRAPHY — letter-spacing
     ======================================================================== */
  --ls-tight: -.04em;
  --ls-heading: -.015em;
  --ls-display: -.01em;
  --ls-label: .14em;
  --ls-label-sm: .12em;
  --ls-track: .04em;
  --ls-watermark: -.03em;
  --ls-built-for: .14em;

  /* ========================================================================
     SPACING — scale
     ======================================================================== */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4rem, 8vw, 8rem);
  --section-y-sm: clamp(3rem, 6vw, 6rem);
  --hero-y: clamp(4rem, 9vw, 8.5rem);
  --hero-y-sm: clamp(2.5rem, 5vw, 4rem);

  /* ========================================================================
     LAYOUT
     ======================================================================== */
  --container: 1200px;
  --container-wide: 1320px;
  --container-analytics: 1280px;
  --container-legal: 1080px;
  --container-diagram: 1024px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --grid-gap: 1.5rem;
  --grid-gap-lg: clamp(2rem, 4vw, 3.5rem);
  --grid-gap-xl: clamp(2rem, 5vw, 5rem);
  --sticky-nav: 96px;

  /* ========================================================================
     COMPONENT — card & button spacing
     ======================================================================== */
  --card-pad: 2rem;
  --card-pad-sm: 1.75rem;
  --card-pad-lg: 2rem 2.25rem;
  --btn-pad-y: .85rem;
  --btn-pad-x: 1.6rem;
  --btn-pad-lg-y: 1.05rem;
  --btn-pad-lg-x: 2.1rem;
  --icon-md: 56px;
  --icon-sm: 48px;
  --icon-xs: 44px;

  /* ========================================================================
     RADIUS
     ======================================================================== */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ========================================================================
     EFFECTS — shadows
     ======================================================================== */
  --shadow-card: 0 18px 50px rgba(8, 14, 28, .10);
  --shadow-card-light: 0 20px 50px rgba(0, 0, 0, .28);
  --shadow-card-dark: 0 20px 60px rgba(0, 0, 0, .45);
  --shadow-card-float: 0 26px 55px rgba(2, 6, 18, .60);
  --shadow-card-platform: 0 24px 60px rgba(0, 0, 0, .35);
  --shadow-btn: 0 10px 28px rgba(20, 98, 221, .35);
  --shadow-btn-sky: 0 10px 28px rgba(91, 194, 245, .35);
  --shadow-nav: 0 8px 30px rgba(0, 0, 0, .25);
  --shadow-nav-mobile: 0 30px 60px rgba(0, 0, 0, .50);
  --shadow-laptop: 0 40px 70px rgba(0, 0, 0, .55);
  --shadow-node: 0 0 28px var(--c-glow-node);
  --shadow-node-filled: 0 0 38px rgba(20, 98, 221, .55);
  --shadow-connector-node: 0 0 0 4px rgba(43, 176, 240, .18);

  /* ========================================================================
     EFFECTS — blur & glow
     ======================================================================== */
  --blur-sm: 2px;
  --blur-md: 9px;
  --blur-lg: 12px;
  --blur-xl: 40px;
  --glow-blue: 0 0 80px rgba(46, 107, 240, .25);
  --glow-cyan-drop: drop-shadow(0 0 14px rgba(43, 176, 240, .35));
  --glow-particles: radial-gradient(circle 20px at 6% 58%, var(--c-glow-cyan), transparent 70%),
    radial-gradient(circle 15px at 25% 30%, var(--c-glow-cyan-mid), transparent 70%),
    radial-gradient(circle 26px at 45% 70%, var(--c-glow-cyan), transparent 70%),
    radial-gradient(circle 18px at 64% 28%, rgba(40, 125, 255, .72), transparent 70%),
    radial-gradient(circle 30px at 83% 74%, rgba(40, 125, 255, .9), transparent 70%),
    radial-gradient(circle 14px at 98% 40%, var(--c-glow-cyan-soft), transparent 70%);

  /* ========================================================================
     EFFECTS — gradient presets (decorative, Figma-verified)
     ======================================================================== */
  --gradient-hero-home: linear-gradient(to bottom, var(--c-bg-hero) 0%, var(--c-bg-hero) 70%, var(--c-bg-navy) 100%);
  --gradient-hero-about:
    radial-gradient(55% 95% at -4% 52%, var(--c-glow-primary), var(--c-glow-primary-soft) 38%, transparent 64%),
    radial-gradient(55% 95% at 104% 52%, var(--c-glow-primary), var(--c-glow-primary-soft) 38%, transparent 64%),
    radial-gradient(90% 120% at 50% 42%, rgba(3, 6, 12, .85), rgba(3, 6, 12, .2) 55%, transparent 75%);
  --gradient-cta-band: radial-gradient(ellipse 42% 42% at 50% 50%, rgba(46, 107, 240, .95), rgba(40, 90, 210, .45) 38%, rgba(20, 45, 120, .12) 58%, transparent 70%);
  --gradient-connection-ambient:
    radial-gradient(closest-side, rgba(63, 140, 255, .30), transparent),
    radial-gradient(closest-side, rgba(120, 170, 230, .20), transparent),
    radial-gradient(closest-side, rgba(63, 140, 255, .20), transparent),
    radial-gradient(closest-side, rgba(120, 170, 230, .18), transparent);
  --gradient-contact-bg:
    radial-gradient(circle at 20% 30%, rgba(91, 194, 245, .06) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--c-primary) 8%, transparent) 0, transparent 45%),
    var(--c-bg-navy);
  --gradient-timeline: linear-gradient(var(--c-sky), color-mix(in srgb, var(--c-sky) 15%, transparent));
  --gradient-pf-line: linear-gradient(180deg, var(--c-cyan-line), color-mix(in srgb, var(--c-cyan-line) 25%, transparent));

  /* ========================================================================
     EFFECTS — opacity & noise
     ======================================================================== */
  --opacity-noise-section: .055;
  --opacity-noise-hero: .10;
  --opacity-noise-about: .06;
  --opacity-card-desc: .92;
  --opacity-card-desc-cyan: .80;
  --noise-size: 220px;
  --noise-size-section: 200px;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ========================================================================
     MOTION
     ======================================================================== */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .15s;
  --t: .25s;
  --t-slow: .4s;
  --reveal-y: 24px;
}