/* =========================================================
   Base — design tokens, reset, typography primitives

   Palette: warm paper base, single copper accent, one warm-tinted
   grey family. Every text colour below meets WCAG AA on its own
   background (ratios noted inline).
   ========================================================= */

:root {
  /* ---- Surfaces (warm off-white, never pure #fff on #fff) ---- */
  --paper: #f7f6f3;        /* page background */
  --surface: #ffffff;      /* raised cards, nav */
  --surface-2: #f1efea;    /* recessed / alternating bands */
  --surface-3: #e9e6df;    /* subtle fills, progress tracks */

  /* ---- Ink (warm-tinted greys, one family only) ---- */
  --ink: #14161a;          /* 15.9:1 on paper */
  --ink-2: #3a4048;        /* 9.4:1  — subheads */
  --muted: #5f666f;        /* 6.1:1  — body copy */
  --faint: #767d86;        /* 4.5:1  — labels, meta */

  /* ---- Lines ---- */
  --line: rgba(20, 22, 26, 0.10);
  --line-strong: rgba(20, 22, 26, 0.20);

  /* ---- Accent: one copper, three roles ----
     --accent      text + buttons  (4.9:1 on paper, 5.4:1 vs white)
     --accent-deep hover / pressed
     --accent-glow graphics only — too light for text */
  --accent: #a9501f;
  --accent-deep: #8a3f16;
  --accent-glow: #e0823d;
  --accent-soft: #f6ebe2;
  --accent-tint: rgba(169, 80, 31, 0.08);

  /* ---- Support ---- */
  --positive: #2f7d55;     /* 4.7:1 on paper */
  --positive-soft: #e6f2ea;

  /* ---- Dark band (closing CTA + footer only) ---- */
  --deep: #16191f;
  --deep-2: #1e232b;
  --deep-ink: #f5f3f0;
  --deep-muted: #a7aeb8;
  --deep-line: rgba(245, 243, 240, 0.14);

  /* ---- Shadows: warm-tinted to match the paper, not pure black ---- */
  --shadow-sm: 0 1px 2px rgba(38, 26, 14, 0.05), 0 2px 6px rgba(38, 26, 14, 0.04);
  --shadow-md: 0 2px 4px rgba(38, 26, 14, 0.04), 0 10px 24px rgba(38, 26, 14, 0.07);
  --shadow-lg: 0 4px 8px rgba(38, 26, 14, 0.04), 0 24px 56px rgba(38, 26, 14, 0.10);
  --shadow-nav: 0 1px 1px rgba(38, 26, 14, 0.04), 0 8px 28px rgba(38, 26, 14, 0.10);

  /* ---- Geometry: radii vary by scale, never uniform ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

  /* ---- z-index scale — no arbitrary 9999 ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 100;
  --z-skip: 200;

  --font-body: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", sans-serif;
}

/* ---- Reset ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Anchors land below the fixed nav instead of underneath it. */
  scroll-padding-top: 104px;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient warmth — barely-there radial tints so the paper is not dead flat. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 88% -5%, rgba(224, 130, 61, 0.10), transparent 60%),
    radial-gradient(50rem 40rem at -10% 18%, rgba(120, 134, 160, 0.07), transparent 60%);
}

/* Film grain — breaks the digital flatness of large empty areas. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }

/* Numbers align in columns instead of dancing. */
.metric strong,
.performance-card strong,
.price-line strong,
.floating-card strong,
.rings::after { font-variant-numeric: tabular-nums; }

/* ---- Focus: visible for keyboard, invisible for mouse ---- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.band-dark :focus-visible { outline-color: var(--accent-glow); }

/* ---- Skip link — required for keyboard users ---- */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: var(--z-skip);
  transform: translate(-50%, -120%);
  padding: 12px 22px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ---- Typography primitives ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.section-title {
  max-width: 20ch;
  color: var(--ink);
  font: 600 clamp(2.1rem, 4.4vw, 3.9rem)/1.06 var(--font-display);
  letter-spacing: -.035em;
  text-wrap: balance;
}

.section-copy {
  max-width: 58ch;        /* ~65 characters of comfortable measure */
  margin-top: 20px;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.7;
  text-wrap: pretty;
}

/* ---- Dark band: the closing CTA + footer, one deliberate anchor ---- */
.band-dark {
  color: var(--deep-ink);
  background: var(--deep);
}
.band-dark .section-title,
.band-dark h2,
.band-dark h3 { color: var(--deep-ink); }
.band-dark .section-copy,
.band-dark p { color: var(--deep-muted); }
.band-dark .eyebrow { color: var(--accent-glow); }

/* ---- Scroll reveal ----
   Content is hidden ONLY when scroll-reveal.js has confirmed it is running
   (it sets .js-reveal on <html>). If the script fails to load, everything
   renders normally instead of staying invisible. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js-reveal .reveal.visible { opacity: 1; transform: translateY(0); }

/* Staggered entry — children cascade instead of mounting all at once. */
.js-reveal .stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.js-reveal .stagger.visible > * { opacity: 1; transform: translateY(0); }
.js-reveal .stagger.visible > *:nth-child(1) { transition-delay: .05s; }
.js-reveal .stagger.visible > *:nth-child(2) { transition-delay: .14s; }
.js-reveal .stagger.visible > *:nth-child(3) { transition-delay: .23s; }
.js-reveal .stagger.visible > *:nth-child(4) { transition-delay: .32s; }

/* ---- Animations ---- */
@keyframes breathe {
  0%, 100% { transform: scale(.95); opacity: .7; }
  50% { transform: scale(1.05); opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-reveal .reveal,
  .js-reveal .stagger > * { opacity: 1; transform: none; }
}