/*
  SEED: 1792056391368

  A — Layout:      digit 8 → Diagonal composition
  B — Color:       digit 6 → Lavender (#e8e0f0) base, deep violet primary, sharp lime accent
  C — Typography:  digit 3 → Space Grotesk + Merriweather
  D — Visual lang: digit 1 → Large background numerals (40vw, opacity 0.06)
  E — Navigation:  digit 3 → Bottom navigation
  F — Tone:        digit 9 → Community voice

  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:    Diagonal SVG seams between bands; diagonal clip-path frames inside them. Reading pattern is a diagonal drop, not a column scan.
  SECTION ORDER:      Hero → Intro → Context → Product → Discretion → Movement → Pelvic floor → Layers → Connector → Voices → CTA → Footer
  DISPLAY FONT:       Space Grotesk — https://fonts.google.com/specimen/Space+Grotesk
  BODY FONT:          Merriweather — https://fonts.google.com/specimen/Merriweather
  PRIMARY COLOR:      #3b1570 — deep violet, a full field against lavender, not a tint used as trim
  SHAPE LANGUAGE:     sharp
  SIGNATURE MOMENT:   Alternating diagonal SVG seams, with a 40vw section numeral at opacity 0.06 behind each band
  TONE OF VOICE:      warm, collective, direct
*/

:root {
  --brand-primary:   #3b1570;
  --brand-secondary: #c6f135;
  --brand-accent:    #d2ff3e;

  --surface-base:    #e8e0f0;
  --surface-raised:  #d9cfe6;
  --surface-inverse: #3b1570;
  --surface-deep:    #2a0d52;

  --text-primary:    #1b1028;
  --text-secondary:  #534266;
  --text-inverse:    #f6f1fb;
  --text-inverse-dim:#d9cceb;

  --border-subtle:   color-mix(in srgb, var(--brand-primary) 22%, transparent);
  --border-strong:   var(--brand-primary);

  --mesh-violet: color-mix(in srgb, var(--brand-primary) 16%, transparent);
  --mesh-lime:   color-mix(in srgb, var(--brand-accent) 32%, transparent);

  --font-display: "Space Grotesk", "Arial Narrow", sans-serif;
  --font-body:    "Merriweather", "Palatino Linotype", 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: 4.5rem;
  --space-9: 7rem;

  --dock-h: 4.25rem;
  --dock-space: 5.4rem;
  --pad: max(1.25rem, calc((100vw - 72rem) / 2));

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  scroll-padding-bottom: var(--dock-space);
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  color: var(--text-primary);
  background:
    radial-gradient(ellipse 70% 45% at 0% 0%, var(--mesh-violet), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 12%, var(--mesh-lime), transparent 50%),
    var(--surface-base);
  overflow-x: clip;
  padding-bottom: calc(var(--dock-space) + env(safe-area-inset-bottom));
}

h1, h2, h3, .wordmark__name, .idx, .price, .btn, .dock, .kicker, .byline, .announce {
  font-family: var(--font-display);
  font-weight: 700;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3 {
  line-height: 0.96;
  letter-spacing: -0.045em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a {
  color: var(--brand-primary);
  text-underline-offset: 0.18em;
}

img { max-width: 100%; }

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