:root {
  /* Colors (Refero ElevenLabs) */
  --color-eggshell: #fdfcfc;
  --color-warm-taupe: #f5f3f1;
  --color-stone: #ebe8e4;
  --color-ink: #000000;
  --color-graphite: #44403b;
  --color-smoke: #777169;
  --color-ash: #a59f97;
  --color-violet-spark: #0447ff;
  --color-ember-orange: #ff4704;

  /* Typography */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  --text-body-sm: 14px;   --leading-body-sm: 1.5;   --tracking-body-sm: 0.14px;
  --text-body: 16px;      --leading-body: 1.5;      --tracking-body: 0.16px;
  --text-subheading: 18px;--leading-subheading: 1.6;
  --text-body-lg: 20px;   --leading-body-lg: 1.35;
  --text-heading-sm: 32px;--leading-heading-sm: 1.13; --tracking-heading-sm: -0.64px;
  --text-display: 48px;   --leading-display: 1.08;  --tracking-display: -0.96px;

  /* Spacing */
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-48: 48px;
  --spacing-64: 64px; --spacing-72: 72px; --spacing-96: 96px; --spacing-128: 128px;

  /* Layout & shape */
  --content-width: 680px;
  --panel-width: 640px;
  --radius-cards: 20px;
  --radius-large-cards: 24px;
  --radius-full: 9999px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-eggshell);
  color: var(--color-smoke);
  font-family: var(--font-inter);
  font-weight: var(--font-weight-regular);
  text-rendering: optimizeLegibility;
}

/* ---------- Hero ---------- */
.hero {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--spacing-128) var(--spacing-24) 0;
  text-align: center;
}

.hero h1 {
  margin: 0;
  font-family: var(--font-inter);
  font-weight: var(--font-weight-light);      /* Waldenburg 300 substitute */
  font-size: var(--text-display);              /* 48px */
  line-height: var(--leading-display);         /* 1.08 */
  letter-spacing: var(--tracking-display);     /* -0.96px */
  color: var(--color-ink);
}

.hero .subline {
  margin: var(--spacing-24) auto 0;
  max-width: 30em;
  font-size: var(--text-body-lg);              /* 20px */
  line-height: var(--leading-body-lg);         /* 1.35 */
  letter-spacing: 0;
  color: var(--color-smoke);
}

/* Focal object — original CSS artwork; the only place violet/ember appear */
.focal {
  position: relative;
  width: 168px;
  height: 168px;
  margin: var(--spacing-72) auto 0;
  animation: float 7s ease-in-out infinite alternate;
}

.focal .orb {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 72% 76%, var(--color-ember-orange) 0%, rgba(255, 71, 4, 0.35) 34%, rgba(255, 71, 4, 0) 58%),
    radial-gradient(circle at 38% 42%, var(--color-violet-spark) 0%, rgba(4, 71, 255, 0.45) 42%, rgba(4, 71, 255, 0) 72%),
    radial-gradient(circle at 50% 50%, var(--color-warm-taupe) 0%, var(--color-stone) 100%);
  filter: blur(0.4px);
}

.focal .spark {
  position: absolute;
  top: -10px;
  right: -4px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--color-ember-orange);
}

@keyframes float {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .focal { animation: none; }
}

/* ---------- Process section ---------- */
.process {
  max-width: var(--panel-width);
  margin: var(--spacing-96) auto 0;
  padding: 0 var(--spacing-24);
}

.panel {
  background: var(--color-warm-taupe);
  border-radius: var(--radius-large-cards);    /* 24px */
  padding: var(--spacing-48);
}

.panel h2 {
  margin: 0;
  font-weight: var(--font-weight-light);       /* display voice */
  font-size: var(--text-heading-sm);           /* 32px */
  line-height: var(--leading-heading-sm);      /* 1.13 */
  letter-spacing: var(--tracking-heading-sm);  /* -0.64px */
  color: var(--color-ink);
}

.panel ol {
  margin: var(--spacing-32) 0 0;
  padding: 0;
  list-style-position: outside;
}

.panel li {
  padding: var(--spacing-16) 0;
  font-size: var(--text-body);                 /* 16px */
  line-height: var(--leading-body);            /* 1.5 */
  letter-spacing: var(--tracking-body);        /* +0.16px */
  color: var(--color-graphite);
}

.panel li + li {
  border-top: 1px solid var(--color-stone);    /* hairline separation */
}

.panel li::marker {
  color: var(--color-ash);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm);
}

/* ---------- Footer ---------- */
footer {
  margin-top: var(--spacing-96);
  border-top: 1px solid var(--color-stone);
  padding: var(--spacing-32) var(--spacing-24);
  text-align: center;
  font-size: var(--text-body-sm);              /* 14px */
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  color: var(--color-ash);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .hero { padding-top: var(--spacing-72); }
  .hero h1 {
    font-size: var(--text-heading-sm);         /* 32px */
    line-height: var(--leading-heading-sm);
    letter-spacing: var(--tracking-heading-sm);
  }
  .hero .subline { font-size: var(--text-subheading); }  /* 18px */
  .focal { width: 128px; height: 128px; margin-top: var(--spacing-48); }
  .focal .spark { width: 10px; height: 10px; top: -8px; right: -2px; }
  .process { margin-top: var(--spacing-72); }
  .panel { padding: var(--spacing-32) var(--spacing-24); border-radius: var(--radius-cards); } /* 20px */
  footer { margin-top: var(--spacing-72); }
}