/*
  ============================================================
  SEED: 738104

  A — Layout:      digit 4 → Mosaic — all content in a CSS grid mosaic,
                             no uniform card sizes
  B — Color:       digit 0 → Near-black base (#0a0a0a), single neon accent
                             (electric green #00FF87)
  C — Typography:  digit 1 → Display: Bebas Neue (condensed) + Body: Lora (serif)
  D — Visual lang: digit 8 → Oversized quotation marks and punctuation as
                             decorative layout elements
  E — Navigation:  digit 3 → Bottom navigation — fixed bottom bar
                             (mobile-app style, works desktop too)
  F — Tone:        digit 7 → Future-forward — forward-looking, systems-thinking,
                             minimal but visionary

  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:    Innovator
  LAYOUT PARADIGM:    Mosaic grid — 6-column CSS grid, items span 2–4 columns
                      asymmetrically; cinematic vertical reading flow
  SECTION ORDER:      Hero → Context → Reasons Mosaic (5 tiles) → Product CTA → Footer
  DISPLAY FONT:       Bebas Neue — https://fonts.google.com/specimen/Bebas+Neue
  BODY FONT:          Lora — https://fonts.google.com/specimen/Lora
  PRIMARY COLOR:      #00FF87 — electric green on near-black: clinical
                      precision meets raw biological energy
  SHAPE LANGUAGE:     Sharp / rectangular — no border-radius, hard cuts,
                      ruled lines; zero ornamental softness
  SIGNATURE MOMENT:   Oversized " " quotation glyphs float at 40vw in the
                      context section; mosaic tiles never share a column span
  TONE OF VOICE:      Precise. Systematic. Forward.
  ============================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lora:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  /* ── Color System ── */
  --brand-primary:    #00FF87;
  --brand-secondary:  #FF3B6B;
  --brand-accent:     #00FF87;

  --surface-base:     #0a0a0a;
  --surface-raised:   #111111;
  --surface-deep:     #060606;
  --surface-inverse:  #00FF87;

  --text-primary:     #f0f0ec;
  --text-secondary:   #686860;
  --text-muted:       #3a3a36;
  --text-inverse:     #0a0a0a;
  --text-accent:      #00FF87;

  --border-subtle:    rgba(255, 255, 255, 0.05);
  --border-mid:       rgba(255, 255, 255, 0.10);
  --border-strong:    rgba(255, 255, 255, 0.18);
  --border-accent:    rgba(0, 255, 135, 0.35);

  /* ── Typography ── */
  --font-display: 'Bebas Neue', 'Arial Narrow', 'Impact', sans-serif;
  --font-body:    'Lora', 'Georgia', 'Times New Roman', serif;

  /* Fluid Type Scale */
  --text-hero:  clamp(3.5rem, 11vw, 9.5rem);
  --text-h1:    clamp(2.5rem, 7vw,  6rem);
  --text-h2:    clamp(1.5rem, 3.5vw, 2.75rem);
  --text-h3:    clamp(1.15rem, 2vw,  1.5rem);
  --text-body:  clamp(0.95rem, 1.4vw, 1.075rem);
  --text-sm:    clamp(0.75rem, 1vw,  0.875rem);
  --text-xs:    0.7rem;

  /* ── Spacing Scale ── */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* ── Grid ── */
  --grid-gap:  clamp(0.5rem, 1.2vw, 1.25rem);
  --page-pad:  clamp(1rem, 4vw, 3rem);
  --max-w:     1440px;

  /* ── Bottom Nav ── */
  --nav-h: 58px;

  /* ── Easing & Timing ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sharp:  cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:  150ms;
  --t-mid:   250ms;
  --t-slow:  500ms;
  --t-enter: 700ms;

  /* ── Decorative ── */
  --quot-opacity: 0.04;
  --quot-size: clamp(12rem, 40vw, 36rem);
}