/*
  ============================================================
  SEED: 427384

  A — Layout:      digit 4 → Mosaic — all content in CSS grid mosaic, no uniform card sizes
  B — Color:       digit 8 → Bright cobalt (#0047FF) primary section backgrounds, white base, no other colors
  C — Typography:  digit 3 → Space Grotesk (techy sans) + Merriweather (serif)
  D — Visual lang: digit 7 → Hard geometric cutouts: sections use clip-path polygon borders
  E — Navigation:  digit 2 → Top bar morphing — transparent on load, solid + compact on scroll
  F — Tone:        digit 4 → Poetic editorial — longer rhythm, unexpected metaphors, considered word choice

  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 ARCHETYPE:    Authority
  LAYOUT PARADIGM:    Mosaic grid (6-col, asymmetric spans) / editorial F-column reading pattern
  SECTION ORDER:      Disclosure → Nav → Hero → Context → Reasons Mosaic → Product CTA → Footer
  DISPLAY FONT:       Space Grotesk — https://fonts.google.com/specimen/Space+Grotesk
  BODY FONT:          Merriweather — https://fonts.google.com/specimen/Merriweather
  PRIMARY COLOR:      #0047FF — cobalt, institutional authority, no warmth, no compromise
  SHAPE LANGUAGE:     Sharp / rectangular — no border-radius, hard cuts, clip-path polygons
  SIGNATURE MOMENT:   The reasons mosaic: 5 cards in an asymmetric 6-column grid where
                      each span is different, creating an editorial newspaper rhythm;
                      the feature card (Reason 1) dominates at 4×2 while the finale
                      (Reason 5) stretches full-width like a closing editorial statement.
  TONE OF VOICE:      Precise, elevated, unhurried
  ============================================================
*/

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');

/* ── SVG Noise filter definition ─────────────────────────── */
/* Applied via filter: url(#svg-noise) on surfaces */

/* ── Custom Properties ────────────────────────────────────── */
:root {

  /* === COLORS === */
  --brand-primary:    #0047FF;   /* Cobalt — dominant. Institutional. Non-negotiable. */
  --brand-secondary:  #001A66;   /* Deep navy — structural dark, not a new hue */
  --brand-accent:     #0047FF;   /* Functional: CTAs, active states, highlights */

  --surface-base:     #FFFFFF;   /* White — the deliberate brand choice */
  --surface-raised:   #F2F5FF;   /* Very light cobalt tint — cards, panels */
  --surface-deep:     #E6ECFF;   /* Deeper tint for bordered panels */
  --surface-inverse:  #0047FF;   /* Cobalt sections */

  --text-primary:     #080818;   /* Near-black for max contrast on white */
  --text-secondary:   #3D4A6B;   /* Subdued — captions, meta, labels */
  --text-muted:       #6B7A9F;   /* Ghost — fine print, timestamps */
  --text-inverse:     #FFFFFF;   /* On cobalt backgrounds */
  --text-accent:      #0047FF;   /* Cobalt text on white */

  --border-subtle:    rgba(0, 71, 255, 0.10);
  --border-mid:       rgba(0, 71, 255, 0.22);
  --border-strong:    #0047FF;

  /* === TYPOGRAPHY === */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Merriweather', Georgia, 'Times New Roman', serif;

  /* Fluid scale — no fixed breakpoints */
  --text-hero:   clamp(3.25rem, 9vw,  8.5rem);
  --text-h1:     clamp(2.25rem, 5.5vw, 4.5rem);
  --text-h2:     clamp(1.625rem, 3.5vw, 2.75rem);
  --text-h3:     clamp(1.2rem,  2.2vw,  1.65rem);
  --text-body:   clamp(1rem,    1.4vw,  1.1rem);
  --text-sm:     clamp(0.75rem, 0.95vw, 0.875rem);
  --text-xs:     0.6875rem;

  /* === SPACING === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* === GEOMETRY (clip-path system) === */
  /* The fundamental visual language — hard polygonal cuts */
  --clip-cut-tr:    polygon(0 0, calc(100% - 1.75rem) 0, 100% 1.75rem, 100% 100%, 0 100%);
  --clip-cut-tl:    polygon(1.75rem 0, 100% 0, 100% 100%, 0 100%, 0 1.75rem);
  --clip-cut-br:    polygon(0 0, 100% 0, 100% calc(100% - 1.75rem), calc(100% - 1.75rem) 100%, 0 100%);
  --clip-cut-bl:    polygon(0 0, 100% 0, 100% 100%, 1.75rem 100%, 0 calc(100% - 1.75rem));
  --clip-cut-tr-lg: polygon(0 0, calc(100% - 3rem) 0, 100% 3rem, 100% 100%, 0 100%);
  --clip-cut-bl-lg: polygon(0 0, 100% 0, 100% 100%, 3rem 100%, 0 calc(100% - 3rem));
  --clip-hero-img:  polygon(3rem 0, 100% 0, 100% 100%, 0 100%, 0 3rem);
  --clip-btn:       polygon(0 0, calc(100% - 0.75rem) 0, 100% 0.75rem, 100% 100%, 0 100%);
  --clip-tag:       polygon(0 0, calc(100% - 0.5rem) 0, 100% 0.5rem, 100% 100%, 0 100%);

  /* === TRANSITIONS === */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.45, 0, 0.55, 1);
  --t-fast:   150ms;
  --t-base:   250ms;
  --t-slow:   400ms;
  --t-reveal: 700ms;

  /* === SHADOW === */
  --shadow-sm:  0 2px 8px rgba(0, 71, 255, 0.08);
  --shadow-md:  0 8px 32px rgba(0, 71, 255, 0.12);
  --shadow-lg:  0 20px 60px rgba(0, 71, 255, 0.18);
  --shadow-xl:  0 32px 80px rgba(0, 0, 0, 0.18);

  /* === LAYOUT === */
  --max-content: 1280px;
  --gutter:      clamp(1.25rem, 4vw, 3rem);
  --nav-height:  4rem;
}

/* ── Base Reset ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-primary);
  background-color: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  display: block;
}

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

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ── Typography Base ──────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-feature-settings: 'ss01', 'cv01';
}

p {
  line-height: 1.75;
  color: var(--text-secondary);
}

strong {
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Utility Classes ──────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main { flex: 1; }