/*
  SEED: 1789386530962

  A — Layout:      digit 2 → Horizontal scroll hero
  B — Color:       digit 6 → Lavender (#e8e0f0) base, deep violet primary, sharp lime accent
  C — Typography:  digit 9 → Unbounded + Crimson Pro
  D — Visual lang: digit 0 → Ruled lines, newspaper column dividers, typographic ornaments
  E — Navigation:  digit 3 → Bottom navigation (fixed dock)
  F — Tone:        digit 5 → Energetic challenger

  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:    Challenger
  LAYOUT PARADIGM:    Horizontal-scroll hero + vertical newspaper stack · cinematic then F-column
  SECTION ORDER:      Hero rail → Provocation → Product → Benefits → Compare → Phases → Usage → Proof → Recesso → CTA → FAQ → Contact → Footer
  DISPLAY FONT:       Unbounded — https://fonts.google.com/specimen/Unbounded
  BODY FONT:          Crimson Pro — https://fonts.google.com/specimen/Crimson+Pro
  PRIMARY COLOR:      #3d1570 — a committed violet, not a wellness blush
  SHAPE LANGUAGE:     Sharp / rectangular — hairline rules, zero radius, cut type
  SIGNATURE MOMENT:   First viewport scrolls sideways like a broadsheet; scramble reveal on the claim
  TONE OF VOICE:      Punchy, confrontational, urgent
*/

@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;1,400&family=Unbounded:wght@700;800;900&display=swap");

:root {
  --brand-primary:    #3d1570;
  --brand-secondary:  #1a0828;
  --brand-accent:     #c5ff00;

  --surface-base:     #e8e0f0;
  --surface-raised:   #f4eef9;
  --surface-inverse:  #3d1570;
  --surface-ink:      #1a0828;
  --surface-wash:     #d9cde6;

  --text-primary:     #1a0828;
  --text-secondary:   #5a456c;
  --text-inverse:     #f6f0fc;
  --text-on-accent:   #1a0828;

  --border-subtle:    #c9bdd6;
  --border-strong:    #1a0828;
  --rule:             #1a0828;

  --font-display: "Unbounded", "Arial Narrow", sans-serif;
  --font-body:    "Crimson Pro", "Times New Roman", serif;

  --text-hero: clamp(3.5rem, 10vw, 9rem);
  --text-h1:   clamp(2.5rem, 6vw, 5rem);
  --text-h2:   clamp(1.75rem, 4vw, 3rem);
  --text-h3:   clamp(1.25rem, 2.5vw, 1.75rem);
  --text-body: clamp(1rem, 1.5vw, 1.125rem);
  --text-sm:   clamp(0.75rem, 1vw, 0.875rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --gutter: clamp(16px, 3.2vw, 48px);
  --max: 1440px;
  --col: 560px;
  --ad-h: 32px;
  --dock-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t-mid: 220ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-bottom: calc(var(--dock-h) + 12px);
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--surface-base);
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection {
  background: var(--brand-accent);
  color: var(--text-on-accent);
}

:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
}

h1, h2, h3, h4, .wordmark-text, .display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-feature-settings: "ss01" 1, "kern" 1;
}

p, li, dd, dt, small, summary {
  font-feature-settings: "liga" 1, "onum" 1, "kern" 1;
}

.wrap {
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
}

.ornament {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.62rem;
  color: var(--text-secondary);
}