/*
  ═══════════════════════════════════════════════════════════════════
  SEED BLOCK
  ═══════════════════════════════════════════════════════════════════

  SEED: 583726

  A — Layout:      digit 6 → Dashboard grid — information-dense, tight spacing, tabular rhythm
  B — Color:       digit 2 → Mid-tone slate (#2a3240) base, sky blue + white type
  C — Typography:  digit 7 → Anton (impact condensed) + Nunito (rounded)
  D — Visual lang: digit 3 → Noise grain texture over all backgrounds (SVG feTurbulence filter)
  E — Navigation:  digit 8 → Mega menu — single hover reveals full-width panel with structured content
  F — Tone:        digit 5 → Energetic challenger — short punchy fragments, active verbs, urgency

  These choices were determined by the seed and must not be changed
  for reasons of "appropriateness" or "better fit for the content".
  Tension between content and form is intentional.

  ═══════════════════════════════════════════════════════════════════
  BRAND METADATA
  ═══════════════════════════════════════════════════════════════════

  BRAND ARCHETYPE:    Challenger
  LAYOUT PARADIGM:    Dashboard grid — 12-col, 1px seam lines, tabular rhythm / cinematic vertical
  SECTION ORDER:      Hero → Intro+Context → 5 Reasons Mosaic → Product Offer → Footer
  DISPLAY FONT:       Anton — https://fonts.google.com/specimen/Anton
  BODY FONT:          Nunito — https://fonts.google.com/specimen/Nunito
  PRIMARY COLOR:      #38b6ff sky blue — a single loud commitment against the dark slate
  SHAPE LANGUAGE:     Sharp / rectangular — no border-radius on panels, hard seams, ruled lines
  SIGNATURE MOMENT:   Full-bleed sky-blue product section slamming against the dark slate canvas
  TONE OF VOICE:      Punchy, urgent, direct
*/

/* ─── FONT IMPORT ─── */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Nunito:wght@300;400;600;700;800&display=swap');

/* ─── COLOR SYSTEM ─── */
:root {
  --brand-primary:    #38b6ff;   /* sky blue — the single loud commitment */
  --brand-secondary:  #0e8bcc;   /* deeper sky — hover states, active elements */
  --brand-accent:     #38b6ff;   /* same sky blue for CTAs and highlights */

  --surface-base:     #2a3240;   /* mid-tone slate — the entire canvas */
  --surface-raised:   #323d4e;   /* panels, cards — one step lighter */
  --surface-deep:     #1d2533;   /* deeper recesses, footer, meta areas */
  --surface-inverse:  #f0f4ff;   /* for sky-blue-bg sections needing light surfaces */

  --text-primary:     #f0f4ff;   /* near-white — all body text on dark */
  --text-secondary:   rgba(240, 244, 255, 0.55);  /* subdued — captions, labels */
  --text-inverse:     #1d2533;   /* on sky-blue backgrounds */
  --text-inverse-sub: rgba(29, 37, 51, 0.65);

  --border-subtle:    rgba(56, 182, 255, 0.12);  /* near-invisible — grid seams */
  --border-medium:    rgba(56, 182, 255, 0.22);
  --border-strong:    rgba(56, 182, 255, 0.45);  /* active / focus borders */
  --border-seam:      rgba(56, 182, 255, 0.08);  /* dashboard grid lines */
}

/* ─── TYPOGRAPHY SCALE ─── */
:root {
  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-body:    'Nunito', 'Segoe UI', system-ui, sans-serif;

  /* Fluid scale — no fixed breakpoints */
  --text-hero:    clamp(3.75rem, 12vw, 9.5rem);
  --text-h1:      clamp(2.5rem,  7vw,  6rem);
  --text-h2:      clamp(1.5rem,  3.5vw, 2.75rem);
  --text-h3:      clamp(1.2rem,  2vw,  1.6rem);
  --text-body:    clamp(0.95rem, 1.4vw, 1.075rem);
  --text-sm:      clamp(0.75rem, 0.9vw, 0.875rem);
  --text-xs:      0.7rem;

  /* Display font is Anton — always uppercase, always 400 (weight is optical) */
  --font-feature-display: "kern" 1, "liga" 0;
  --font-feature-body:    "kern" 1, "liga" 1, "calt" 1;
}

/* ─── SPACING SCALE ─── */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
}

/* ─── SHAPE / RADIUS — Sharp language: panels are hard-cut ─── */
:root {
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   0px;   /* dashboard panels are rectangles, no rounding */
  --radius-btn:  0px;   /* buttons are rectangular — Challenger energy */
  --radius-tag:  2px;
}

/* ─── SHADOWS ─── */
:root {
  --shadow-panel:  0 8px 40px rgba(10, 16, 28, 0.55);
  --shadow-card:   0 4px 20px rgba(10, 16, 28, 0.38);
  --shadow-btn:    0 8px 24px rgba(56, 182, 255, 0.32);
  --shadow-glow:   0 0 40px rgba(56, 182, 255, 0.18);
}

/* ─── TRANSITIONS ─── */
:root {
  --t-fast:    150ms ease;
  --t-normal:  220ms ease;
  --t-slow:    380ms ease;
}

/* ─── LAYOUT ─── */
:root {
  --max-content: 1280px;
  --max-narrow:  760px;
  --page-px:     clamp(16px, 4vw, 48px);
  --header-h:    64px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-feature-settings: var(--font-feature-body);
  background-color: var(--surface-base);
  color: var(--text-primary);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

/* ─── NOISE GRAIN OVERLAY (Seed D = 3) ─── */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.042;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}