/*
  SEED: 847361

  A — Layout:      digit 1 → Magazine chaos grid (12-col asymmetric; sections never align to same column)
  B — Color:       digit 6 → Lavender (#e8e0f0) base, deep violet primary, sharp lime accent
  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 4 → Hidden until hover — nav appears on mouse move to top edge
  F — Tone:        digit 8 → Luxury restrained — evocative but sparse, never explains, implies

  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:  Luminary
  LAYOUT PARADIGM:  12-column asymmetric magazine chaos grid; editorial Z-pattern reading flow
  SECTION ORDER:    Hero → Intro → Comparison → Method 1 → Method 2 → Method 3 (Winner) →
                    CTA-1 → Features + Expert → Trust + Testimonials → CTA-2 → FAQ →
                    Product Box → Power CTA → Finale → Footer
  DISPLAY FONT:     Space Grotesk — https://fonts.google.com/specimen/Space+Grotesk
  BODY FONT:        Merriweather — https://fonts.google.com/specimen/Merriweather
  PRIMARY COLOR:    #3d1a7c — deep violet; quiet authority with luminous depth
  SHAPE LANGUAGE:   Sharp / rectangular — clip-path polygons, hard diagonal cuts, ruled lines
  SIGNATURE MOMENT: Diagonal clip-path cuts between sections reveal the next surface on scroll;
                    large ghost numerals 01–08 anchor each section in a typographic grid
  TONE OF VOICE:    Sparse. Declarative. Restrained.
*/

:root {

  /* ── BRAND COLORS ────────────────────────────────────────── */
  --brand-primary:   #3d1a7c;   /* Deep violet — dominant, luxurious */
  --brand-secondary: #c8ff00;   /* Acid lime — unexpected, decisive */
  --brand-accent:    #c8ff00;   /* CTAs, active states, highlights */

  /* ── SURFACES ────────────────────────────────────────────── */
  --surface-base:    #e8e0f0;   /* Lavender — main page background */
  --surface-raised:  #f2eef8;   /* Lighter lavender — cards, panels */
  --surface-mid:     #d4c8e8;   /* Mid lavender — borders, subtle separation */
  --surface-inverse: #160432;   /* Near-black violet — dark sections */

  /* ── TEXT ────────────────────────────────────────────────── */
  --text-primary:    #0e0318;   /* Near-black — maximum contrast on lavender */
  --text-secondary:  #5c4a78;   /* Muted violet — captions, meta, labels */
  --text-light:      #8a7aa8;   /* Subdued — placeholders, footnotes */
  --text-inverse:    #e8e0f0;   /* On dark inverse backgrounds */
  --text-lime:       #c8ff00;   /* On dark backgrounds, accent copy */

  /* ── BORDERS ─────────────────────────────────────────────── */
  --border-subtle:   #d4c8e8;
  --border-strong:   #3d1a7c;

  /* ── STATUS / VERDICT ────────────────────────────────────── */
  --verdict-green-bg:  #d4f5e0;
  --verdict-green-fg:  #0d5c2e;
  --verdict-red-bg:    #f5d4d4;
  --verdict-red-fg:    #7c1a1a;
  --verdict-warn-bg:   #f5ead4;
  --verdict-warn-fg:   #7c4a0d;

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Merriweather', Georgia, serif;

  /* Fluid type scale */
  --text-hero:   clamp(3rem, 8.5vw, 8rem);
  --text-h1:     clamp(2.25rem, 5.5vw, 4.5rem);
  --text-h2:     clamp(1.5rem, 3.2vw, 2.5rem);
  --text-h3:     clamp(1.125rem, 2vw, 1.5rem);
  --text-h4:     clamp(1rem, 1.6vw, 1.25rem);
  --text-body:   clamp(1rem, 1.3vw, 1.0625rem);
  --text-sm:     clamp(0.8125rem, 1vw, 0.875rem);
  --text-xs:     0.6875rem;
  --text-eyebrow: 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;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --max-width:      1440px;
  --content-width:  1200px;
  --grid-cols:      12;
  --grid-gap:       clamp(1rem, 2vw, 1.75rem);
  --section-pad-y:  clamp(4rem, 8vw, 8rem);
  --side-pad:       clamp(1.25rem, 4vw, 3rem);

  /* ── CLIP OFFSETS ────────────────────────────────────────── */
  --clip-skew: 5vw;   /* how deep the diagonal cut goes */

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-med:     300ms;
  --dur-slow:    600ms;

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(14, 3, 24, 0.12);
  --shadow-md:  0 4px 20px rgba(14, 3, 24, 0.16);
  --shadow-lg:  0 12px 48px rgba(14, 3, 24, 0.22);

  /* ── Z-INDEX STACK ───────────────────────────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-overlay:  100;
  --z-nav:      1000;
  --z-sticky:   1100;
  --z-progress: 9999;
}

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

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

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--text-primary);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

strong { font-weight: 700; }
em     { font-style: italic; }

ul, ol { list-style: none; }

/* ── FONT FEATURE SETTINGS ─────────────────────────────────── */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  letter-spacing: -0.02em;
}

p, li, blockquote {
  font-family: var(--font-body);
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}

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