/* ==========================================================================
   Teaserr Landingpage — style.css
   Bespoke vanilla CSS. Tokens in :root, section namespaces below.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/CormorantGaramond/CormorantGaramond-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/CormorantGaramond/CormorantGaramond-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/CormorantGaramond/CormorantGaramond-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/CormorantGaramond/CormorantGaramond-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/CormorantGaramond/CormorantGaramond-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/CormorantGaramond/CormorantGaramond-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter/Inter_18pt-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter/Inter_18pt-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter/Inter_18pt-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --color-bg:        #141110;
  --color-accent:    #F2C438;
  --color-accent-hi: #F6D466;
  --color-highlight: #F4E9D6;

  --color-bg-lift:   #1E1A17;
  --color-bg-raised: #211D1B;
  --color-bg-raised-2: #2A2521;
  --color-text-dim:  rgba(244, 233, 214, 0.65);
  --color-text-dim-2: rgba(244, 233, 214, 0.45);
  --color-border:    rgba(244, 233, 214, 0.12);
  --color-border-strong: rgba(244, 233, 214, 0.22);

  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.75rem, 5vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h-paired: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-number: clamp(2.5rem, 2rem + 2.5vw, 4.25rem);

  --container: 1140px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 20px;
  --radius-sm: 12px;
  --nav-height: 96px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.6s;
  --dur-slow: 0.9s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-highlight);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input { font: inherit; color: inherit; }

/* ---------- Page-wide ambient glow ---------- */
/* A single fixed, very low-opacity echo of the hero's warm light source,
   painted once above the whole page instead of re-invented per section. */
.page-glow {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(70% 55% at 50% 0%,
    rgba(242, 196, 56, 0.05) 0%,
    rgba(206, 104, 48, 0.03) 40%,
    transparent 72%);
}

.skip-link {
  position: absolute;
  left: 1rem; top: -60px;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Shared: container, buttons, cards ---------- */
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  min-height: 44px;
}
.btn--accent {
  background: var(--color-accent);
  color: var(--color-bg);
}
.btn--accent:hover {
  background: var(--color-accent-hi);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(242, 196, 56, 0.25);
}
.btn--accent:active { transform: translateY(0); }
.btn--lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn__arrow { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.card {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---------- Shared section heading (watermark number + title) ----------
   Used by every numbered section (1-4). The number is an absolutely
   positioned watermark that does NOT participate in layout — the title
   itself always sits flush on the container's left edge so every section
   heading (and the body copy beneath it) shares one x-position. */
.section-head {
  position: relative;
}
.section-head__number {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0.6rem;
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-size: var(--fs-number);
  font-weight: 600;
  color: var(--color-accent);
  opacity: 0.4;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.section-head__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h-paired);
  color: var(--color-accent);
}
@media (max-width: 599px) {
  .section-head__number {
    position: static;
    display: block;
    transform: none;
    margin: 0 0 0.35rem;
    font-size: 2.5rem;
    opacity: 0.6;
  }
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.16s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.27s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.38s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.49s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * {
    transform: none;
    transition: opacity var(--dur-fast) ease;
  }
}

/* ==========================================================================
   Navigation — three columns, as in the reference header: two links left,
   wordmark holding the optical centre, one link plus a soft pill right.
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav--solid {
  background: rgba(20, 17, 16, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--color-border);
}
/* Full-bleed rather than container-width: the reference pins the outer items
   to the viewport edges. Equal 1fr side columns are what keep the wordmark on
   the true centre even though the two sides hold different content. */
.nav__inner {
  /* 34/22 padding instead of a fixed height; --nav-height follows so the
     drawer and the hero's top offset stay in step. */
  padding-block: 34px 22px;
  padding-inline: clamp(20px, 4vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
.nav__logo {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
}
/* Wordmark asset is cropped to its ink (901x168, ~5.36:1), so height alone
   sets the visible size — no transparent-padding compensation needed here. */
.nav__logo img { height: 28px; width: auto; }
.nav__wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--color-highlight);
}

.nav__links { grid-column: 1; justify-self: start; }
.nav__links ul { display: flex; gap: 1.75rem; }
.nav__right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.6rem);
}

.nav__links a, .nav__solo {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-dim);
  position: relative;
  padding-bottom: 4px;
  transition: color var(--dur-fast) var(--ease);
}
.nav__links a::after, .nav__solo::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transition: right var(--dur-fast) var(--ease);
}
.nav__links a:hover, .nav__links a.is-active,
.nav__solo:hover, .nav__solo.is-active { color: var(--color-highlight); }
.nav__links a.is-active::after, .nav__solo.is-active::after { right: 0; }

/* The reference pill: a soft translucent rect, not a full-round solid. It sits
   over moving colour, so it needs its own blur to stay legible. */
.btn--ghost {
  background: rgba(244, 233, 214, 0.10);
  border: 1px solid rgba(244, 233, 214, 0.10);
  color: var(--color-highlight);
  border-radius: var(--radius-sm);
  padding: 0.65rem 1.35rem;
  font-size: 0.875rem;
  min-height: 40px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn--ghost:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
  transform: translateY(-1px);
}
.btn--ghost:active { transform: translateY(0); }

.nav__burger {
  display: none;
  grid-column: 3;
  justify-self: end;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
}
.nav__burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--color-highlight);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--nav-height);
  background: var(--color-bg);
  padding: 2rem var(--gutter);
  flex-direction: column;
  gap: 2rem;
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease);
  z-index: 99;
}
.nav__mobile.is-open { transform: translateX(0); }
.nav__mobile ul { display: flex; flex-direction: column; gap: 1.5rem; }
.nav__mobile a { font-size: 1.25rem; font-weight: 500; }
.nav__mobile .btn { align-self: flex-start; }

/* ==========================================================================
   Hero + Wave overlap (core scroll effect)
   ========================================================================== */
.hero {
  /* Fixed and exactly one viewport tall. This is what the content sheet slides
     over — the effect only works if the hero stays put while the page moves,
     so the hero can never be taller than the screen. Everything inside has to
     fit that budget. */
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 1;
  overflow: hidden;
  background: var(--color-bg);
  /* isolate so the screen-blended aura masses composite against the hero's
     own black, not against whatever the page paints underneath it. */
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   Reference background — four huge light masses drifting on independent,
   mutually prime periods (31/43/37/53s), so the composite never repeats
   inside a visit. Screen blending makes overlaps build in brightness rather
   than stack as flat washes, which is what gives the reference its depth.

   No blur() filter: the gradient stops are already soft, and blurring a layer
   this size is the one thing that would make it cost real frames.
   -------------------------------------------------------------------------- */
.hero__aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  animation: aura-exposure 26s ease-in-out infinite;
}
@keyframes aura-exposure {
  0%   { opacity: 0.20; filter: brightness(0.80) saturate(1); }
  38%  { opacity: 1;    filter: brightness(1.16) saturate(1.06); }
  68%  { opacity: 0.48; filter: brightness(0.98) saturate(1); }
  100% { opacity: 0.20; filter: brightness(0.80) saturate(1); }
}
.hero__aura i {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
/* gold — the largest mass, sweeping the top half */
.hero__aura-a {
  width: 82vmax; height: 68vmax;
  left: 4%; top: -34%;
  background: radial-gradient(closest-side,
    rgba(238, 166, 66, 0.90) 0%,
    rgba(216, 124, 52, 0.58) 26%,
    rgba(190, 96, 44, 0.22) 52%,
    rgba(180, 86, 42, 0) 74%);
  animation: aura-a 31s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* terracotta — travels furthest, left edge to right edge and back */
.hero__aura-b {
  width: 86vmax; height: 86vmax;
  left: -44%; top: -18%;
  background: radial-gradient(closest-side,
    rgba(206, 104, 48, 0.96) 0%,
    rgba(172, 74, 40, 0.62) 28%,
    rgba(128, 46, 36, 0.24) 54%,
    rgba(108, 38, 34, 0) 76%);
  animation: aura-b 43s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* hot core — small and bright, the bloom that reads as the light source */
.hero__aura-c {
  width: 34vmax; height: 34vmax;
  left: 44%; top: 16%;
  background: radial-gradient(closest-side,
    rgba(252, 232, 168, 0.86) 0%,
    rgba(240, 168, 62, 0.36) 34%,
    rgba(206, 112, 46, 0) 68%);
  animation: aura-c 37s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* rose — the counter-hue. The reference gets its depth from two hues crossing,
   not one wash; this is the dusty rose already living in the orb artwork
   (sampled at #9C4F59), lifted just enough to register as light. */
.hero__aura-d {
  width: 62vmax; height: 56vmax;
  left: 32%; top: 10%;
  background: radial-gradient(closest-side,
    rgba(196, 96, 112, 0.68) 0%,
    rgba(156, 72, 88, 0.36) 30%,
    rgba(112, 48, 62, 0.12) 56%,
    rgba(96, 42, 54, 0) 76%);
  animation: aura-d 53s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* pale bloom — a pale tint of the rose, not a neutral: a neutral light
   desaturates every mass it crosses and leaves khaki behind. */
.hero__aura-e {
  width: 62vmax; height: 54vmax;
  left: -10%; top: 34%;
  background: radial-gradient(closest-side,
    rgba(230, 184, 186, 0.17) 0%,
    rgba(206, 148, 152, 0.065) 38%,
    rgba(180, 118, 124, 0) 70%);
  animation: aura-e 61s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* Opacity swings as hard as position does. The reference spends real time at
   near-black and then floods; masses that only slide around never get there. */
@keyframes aura-a {
  0%   { transform: translate3d(26%, -10%, 0) scale(0.82); opacity: 0.60; }
  33%  { transform: translate3d(-6%, 20%, 0) scale(1.40); opacity: 1; }
  66%  { transform: translate3d(-38%, 2%, 0) scale(0.94); opacity: 0.80; }
  100% { transform: translate3d(26%, -10%, 0) scale(0.82); opacity: 0.60; }
}
@keyframes aura-b {
  0%   { transform: translate3d(-16%, 10%, 0) scale(0.90); opacity: 0.95; }
  30%  { transform: translate3d(30%, -18%, 0) scale(1.20); opacity: 0.62; }
  62%  { transform: translate3d(58%, 16%, 0) scale(1.18); opacity: 1; }
  100% { transform: translate3d(-16%, 10%, 0) scale(0.90); opacity: 0.95; }
}
@keyframes aura-c {
  0%   { transform: translate3d(-24%, 16%, 0) scale(0.74); opacity: 0.55; }
  40%  { transform: translate3d(24%, -20%, 0) scale(1.54); opacity: 1; }
  70%  { transform: translate3d(8%, 26%, 0) scale(0.88); opacity: 0.70; }
  100% { transform: translate3d(-24%, 16%, 0) scale(0.74); opacity: 0.55; }
}
@keyframes aura-d {
  0%   { transform: translate3d(24%, -14%, 0) scale(0.88); opacity: 0.70; }
  38%  { transform: translate3d(-30%, 12%, 0) scale(1.34); opacity: 1; }
  72%  { transform: translate3d(18%, 28%, 0) scale(0.92); opacity: 0.55; }
  100% { transform: translate3d(24%, -14%, 0) scale(0.88); opacity: 0.70; }
}
@keyframes aura-e {
  0%   { transform: translate3d(6%, -10%, 0) scale(1.00); opacity: 0.7; }
  45%  { transform: translate3d(70%, 12%, 0) scale(1.22); opacity: 1; }
  75%  { transform: translate3d(34%, -22%, 0) scale(0.84); opacity: 0.4; }
  100% { transform: translate3d(6%, -10%, 0) scale(1.00); opacity: 0.7; }
}

/* The dark corridor the reference keeps sweeping through the frame. An
   ellipse rather than a circle, so rotating it drags a dark band across the
   composition instead of just pulsing. Also what guarantees the headline
   always has something dark behind it. */
.hero__wedge {
  position: absolute;
  inset: -55%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(20, 17, 16, 0) 0%,
    rgba(20, 17, 16, 0.18) 36%,
    rgba(20, 17, 16, 0.56) 46%,
    rgba(20, 17, 16, 0.58) 54%,
    rgba(20, 17, 16, 0.18) 64%,
    rgba(20, 17, 16, 0) 100%);
  animation: hero-wedge 47s linear infinite;
  will-change: transform;
}
/* A full turn, not an alternation: the band should keep travelling in one
   direction rather than retracing itself. */
@keyframes hero-wedge {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.12); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Readability plus the seams: darkens under the fixed header, and fades the
   whole hero into --color-bg at the bottom so the wave has something to
   land on. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(76% 58% at 50% 46%, rgba(20,17,16,0.24) 0%, rgba(20,17,16,0.10) 46%, rgba(20,17,16,0) 74%),
    linear-gradient(to bottom, rgba(20,17,16,0.70) 0%, rgba(20,17,16,0.16) 17%, rgba(20,17,16,0) 34%),
    linear-gradient(to bottom, transparent 70%, rgba(20,17,16,0.80) 92%, #141110 100%);
}

.hero__content {
  position: relative;
  z-index: 4;
  height: 100%;
  max-width: 1680px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 27fr) minmax(0, 46fr) minmax(0, 27fr);
  grid-template-areas:
    "head  head head"
    "intro orb  steps";
  /* The headline keeps its own height; the second row takes the rest, and the
     columns hang off its bottom edge. That is what produces the gap under the
     headline without a margin that could overflow a fixed hero. */
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(48px, 6vw, 96px);
  row-gap: 0;
  padding: calc(var(--nav-height) + clamp(1.25rem, 4vh, 3rem)) clamp(20px, 3vw, 44px) max(96px, calc(14dvh + 28px));
  will-change: opacity, transform;
}

.hero__headline {
  grid-area: head;
  text-align: center;
  margin-inline: auto;
  /* 32ch, not 22: Cormorant's digit is wide, so 22ch came to two thirds of what
     the longer of the two fixed lines needs and the browser re-wrapped past
     the <br>. */
  max-width: 32ch;
  font-family: var(--font-display);
  font-weight: 700;
  /* Measured: the longer of the two fixed lines needs 15.18x the font size.
     The container is min(1680,100vw) - 88, so 6vw is the largest factor that
     still holds the two-liner at 1024, and 102px is the largest cap that holds
     it once max-width takes over. Go above either and the browser re-wraps
     past the <br> into three lines. The svh term only bites on flat windows. */
  font-size: clamp(34px, min(5.2vw, 13svh), 88px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--color-highlight);
  margin-bottom: clamp(90px, 10vh, 140px);
}

/* Centred against the orb, then the right column is lifted so the two are
   offset rather than sharing a baseline. */
.hero__intro { grid-area: intro; align-self: end; padding-block: 24px; }
.hero__sub {
  max-width: 40ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-highlight);
  opacity: 0.68;
}
.hero__cta { margin-top: 30px; }
.hero__meta {
  margin-top: 14px;
  font-size: 13px;
  color: var(--color-highlight);
  opacity: 0.38;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Sticky mobile CTA — the hero's own button is gone on narrow phones (see
   the max-width:767 block below), so this replaces it as the one always-
   reachable "Join the Waitlist" once the desktop nav's own button disappears
   behind the burger menu. A small floating circle rather than a full bar —
   a bar would permanently eat a strip of every section on a page this long.
   Appears once the content sheet starts covering the fixed hero, hidden
   again while the real waitlist form is on screen. -------------------------------------------------------------------------- */
.sticky-cta {
  display: none;
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 56px; height: 56px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  box-shadow: 0 10px 26px rgba(0,0,0,0.45), 0 0 0 1px rgba(242,196,56,0.3);
  opacity: 0;
  transform: translateY(14px) scale(0.85);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.sticky-cta__arrow { font-size: 22px; font-weight: 700; color: var(--color-bg); line-height: 1; }
.sticky-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.sticky-cta.is-visible:hover { transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   Hero orb. Layers outward-in: three shell walls plus the veil, the inner
   haze, drifting dust, the three scenes, and a glass reflex in front.
   Motion is driven from JS. It is the middle grid column, so it centres
   horizontally on its own.
   -------------------------------------------------------------------------- */
.hero__stage {
  /* Top-anchored in the middle column: that is what makes the gap under the
     headline a fixed value instead of a leftover. Whatever does not fit runs
     past the bottom of the fixed hero and is clipped by it, so the orb still
     reads as only partly in frame. Size formula unchanged. */
  grid-area: orb;
  position: relative;
  justify-self: center;
  align-self: start;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(32vw, 58svh, 520px);
  aspect-ratio: 1;
  cursor: pointer;
  perspective: 900px;
  -webkit-tap-highlight-color: transparent;
}
.hero__stage:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 14px; border-radius: 50%; }

.orb {
  position: absolute;
  inset: -3%;
  /* The veil is scaled 1.3, so the shell reaches well past the stage box and
     was swallowing clicks meant for the steps next to it. The stage itself is
     the hit target; the walls never need events. */
  pointer-events: none;
  will-change: transform;
  transition: transform 0.8s var(--ease), filter 0.8s ease;
}
.orb__wall {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
  /* Safety mask: under shear a wall can never show a straight edge. */
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 62%, transparent 78%);
          mask: radial-gradient(circle at 50% 50%, #000 62%, transparent 78%);
}
.orb__wall img { width: 100%; height: 100%; object-fit: contain; }
.orb__wall--veil { opacity: 0.07; filter: blur(20px); transform: scale(1.3); }
.hero__stage.is-pulsing .orb { transform: scale(1.05); filter: brightness(1.26); }

.orb__haze {
  position: absolute;
  left: 16%; right: 16%; top: 16%; bottom: 16%;
  border-radius: 50%;
  z-index: 3;
  background: radial-gradient(circle at 50% 42%,
    rgba(242,196,56,0.10) 0%, rgba(180,86,42,0.05) 42%, rgba(242,196,56,0) 72%);
  filter: blur(14px);
  animation: orb-haze 11s ease-in-out infinite;
}
@keyframes orb-haze {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.07); opacity: 1; }
}

.orb__dust {
  position: absolute;
  inset: 18%;
  z-index: 4;
  pointer-events: none;
  border-radius: 50%;
  overflow: hidden;
}
.orb__dust i {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255, 236, 190, 0.55);
  filter: blur(0.6px);
  animation: orb-drift linear infinite;
}
@keyframes orb-drift {
  from { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  to   { transform: translate(18px, -120px); opacity: 0; }
}

/* Measured off the shell art: the lit ring runs from 64% to 86% of the
   asset's half-width, so the inside of the sphere is everything under 64%.
   The mask is set just inside that and the scenes are sized to clear it, which
   is what keeps the artwork from poking out through the shell. */
.orb__viewport {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 58%, rgba(0,0,0,0.65) 66%, transparent 73%);
          mask: radial-gradient(circle at 50% 50%, #000 58%, rgba(0,0,0,0.65) 66%, transparent 73%);
}
.orb__scenes {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.orb__scene {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 62%;
  max-height: 62%;
  width: auto; height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.9);
  filter: drop-shadow(0 0 34px rgba(242, 196, 56, 0.18));
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.orb__scene.is-on { opacity: 1; transform: scale(1); }

.orb__front { position: absolute; inset: -3%; z-index: 6; pointer-events: none; will-change: transform; }
.orb__sweep {
  position: absolute;
  left: 6%; top: 8%;
  width: 44%; height: 26%;
  border-radius: 50%;
  transform: rotate(-22deg);
  filter: blur(10px);
  background: linear-gradient(120deg, rgba(255,246,220,0.13), rgba(255,246,220,0) 62%);
}

/* ---- the three steps, beside the orb ---- */
.hero__process {
  grid-area: steps;
  align-self: end;
  padding-block: 24px;
  margin-bottom: clamp(1.5rem, 8vh, 6rem);
  display: flex;
  flex-direction: column;
}

/* Both decks stack their children in one grid cell, so each takes the height
   of its tallest member once and rotating never reflows the hero. */
.hero__bodies,
.hero__titles { display: grid; }
.hero__bodies > *,
.hero__titles > * {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms var(--ease), visibility 0s linear 260ms;
}
/* The incoming panel waits for the outgoing one to clear. Crossfading two
   blocks of text in the same spot leaves both legible at half opacity for a
   third of a second, which reads as a rendering fault. */
.hero__bodies > .is-on,
.hero__titles > .is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 360ms var(--ease) 260ms, visibility 0s linear 0s;
}
.hero__step-body {
  margin: 0;
  font-size: clamp(0.9rem, min(1.05vw, 1.8svh), 1.0625rem);
  line-height: 1.7;
  /* The muted tone has to come from the colour, not from opacity: an opacity
     here has the same specificity as the deck rule above and wins on source
     order, so the outgoing panel stopped at 0.68 instead of reaching 0 and
     stayed legible under the incoming one for the whole fade. */
  color: rgba(244, 233, 214, 0.68);
}

.hero__ticks {
  display: flex;
  gap: 8px;
  margin: clamp(1rem, 2.6vh, 1.75rem) 0 clamp(0.75rem, 2vh, 1.25rem);
}
/* The bar is 48x2; the button around it is 20px tall so it is tappable. */
.hero__tick {
  position: relative;
  width: 48px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hero__tick::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  margin-top: -1px;
  background: rgba(244, 233, 214, 0.18);
  transition: background-color 600ms var(--ease);
}
.hero__tick.is-on::after { background: var(--color-accent); }
.hero__tick:hover::after { background: rgba(244, 233, 214, 0.42); }
.hero__tick.is-on:hover::after { background: var(--color-accent); }
.hero__tick:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.hero__titles { justify-items: end; }
.hero__step-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.2rem, min(1.8vw, 2.9svh), 1.7rem);
  line-height: 1.2;
  text-align: right;
  color: var(--color-highlight);
}

/* Short viewports. The hero is fixed and clipped, so anything that does not
   fit is simply gone. The orb is the only element with real height to give
   back, so it takes the cut. */
@media (max-width: 1023px) and (max-height: 860px) {
  .hero__stage { width: min(38vw, 20svh, 240px); }
}
@media (max-height: 680px) {
  /* Applies to the three-column layout too: a 1024x600 window is wide enough
     for three columns but has no height to spare for a 300px orb. */
  .hero__stage { width: min(38vw, 42svh, 480px); }
  .hero__meta { display: none; }
}
/* Flat desktop windows: the headline is deliberately huge, so the stagger and
   the two body texts are what have to give before the columns reach the wave. */
@media (min-width: 1024px) and (max-height: 900px) {
  .hero__process { margin-bottom: clamp(0.75rem, 3.5vh, 2.5rem); }
  .hero__sub { font-size: clamp(14px, 1.9svh, 17px); line-height: 1.6; }
  .hero__step-body { font-size: clamp(14px, 1.9svh, 17px); line-height: 1.6; }
}
@media (min-width: 1024px) and (max-height: 740px) {
  .hero__process { margin-bottom: clamp(0.5rem, 2vh, 1.5rem); }
  .hero__meta { display: none; }
}

@media (max-height: 640px) {
  .hero__stage { width: min(34vw, 36svh, 480px); }
  /* At 1024 the intro column is only ~255px, so the paragraph runs to nine
     lines — it, not the orb, is the tall block in a flat three-column window. */
  .hero__sub { font-size: 14px; line-height: 1.55; }
  .hero__cta { margin-top: 20px; }
}

@media (max-height: 800px) {
  .hero__content { padding-top: calc(var(--nav-height) + 0.5rem); }
  .hero__headline { margin-bottom: clamp(120px, 14vh, 150px); }
}
@media (max-height: 680px) {
  .hero__content { padding-top: calc(var(--nav-height) + 0.25rem); }
  .hero__headline { margin-bottom: 120px; }
  .hero__process { margin-bottom: clamp(0.5rem, 2vh, 1.5rem); }
}

/* Flat desktop windows. Below ~660px there is no room for the rotating body
   under a headline this size; the title and the ticks still carry the
   sequence, same trade as on a phone. */
@media (min-width: 1024px) and (max-height: 660px) {
  .hero__bodies { display: none; }
  .hero__process { margin-bottom: 0; }
  .hero__intro, .hero__process { padding-block: 8px; }
  .hero__ticks { margin: 0.6rem 0 0.4rem; }
}

/* ---- 768-1023: two columns. Headline, then the orb across both, then the
   paragraph and the slider side by side underneath. ---- */
@media (max-width: 1023px) {
  .hero__content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "head  head"
      "orb   orb"
      "intro steps";
    grid-template-rows: none;
    align-content: center;
    align-items: start;
    row-gap: clamp(1rem, 3vh, 2rem);
    padding-top: calc(var(--nav-height) + 1rem);
  }
  .hero__headline { margin-bottom: 0; }
  .hero__intro, .hero__process { align-self: auto; padding-block: 0; }
  .content-sheet { margin-top: 87vh; margin-top: 87dvh; }
  /* Wider than the desktop 32ch would suggest, because the measure here is
     what sets the line count, and every extra line costs the stack 47px. */
  .hero__headline { max-width: 30ch; font-size: clamp(30px, 4vw, 46px); }
  .hero__headline br { display: none; }
  /* Back into the grid as its own row: there is no room beside two columns
     on a tablet, and an orb hanging off the bottom would eat the CTA. */
  .hero__stage {
    grid-area: orb;
    align-self: auto;
    justify-self: center;
    width: min(40vw, 23svh, 280px);
  }
  .hero__process { margin-bottom: 0; }
  .hero__intro { align-self: start; }
  .hero__sub { max-width: none; font-size: clamp(13px, 1.75svh, 16px); line-height: 1.55; }
}

/* ---- under 768: one column — headline, orb, slider, paragraph, CTA ---- */
@media (max-width: 767px) {
  .hero__content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "orb"
      "steps"
      "intro";
    grid-template-rows: none;
    justify-items: center;
    align-content: center;
    /* This layout is centred, not bottom-anchored, so it does not need the
       wave-tracking padding the desktop grid uses — that just squeezed the
       stack until the headline slid under the header. */
    padding-bottom: clamp(92px, 15vh, 165px);
    text-align: center;
    row-gap: clamp(0.7rem, 1.9vh, 1.25rem);
  }
  /* The 34px floor from the base clamp forced four lines into a 350px
     column; the whole fold cannot pay for that here. 26ch in this serif
     comfortably exceeds a phone's viewport on its own, so it's capped with
     100% too — whichever is smaller — or the box itself ran wider than the
     screen and got clipped mid-word by .hero's overflow:hidden instead of
     actually wrapping. */
  .hero__headline { max-width: min(26ch, 100%); box-sizing: border-box; font-size: clamp(25px, 7.2vw, 38px); }
  /* Bigger and no longer capped tight by svh — the CTA, meta line and the
     rotating body text are gone from this view (sticky bar + ticks carry
     that job instead), so the orb can actually use the room a tall phone
     has to give. */
  .hero__stage { width: min(58vw, 26svh, 240px); }
  .hero__intro { max-width: 34rem; }
  .hero__sub { max-width: none; margin-inline: auto; font-size: clamp(13px, 1.7svh, 15px); line-height: 1.55; }
  /* Both repeat elsewhere (meta verbatim in Packages; the CTA lives in the
     sticky bar below) — cutting them is what buys the orb its size back and
     stops the fold from reading as one dense wall of text. */
  .hero__cta, .hero__meta { display: none; }

  /* Only one panel is ever visible, so the deck needs no scroller — it just
     centres like everything else in this column. The rotating sentence
     itself is cut too; the tick + title pair already carries the sequence. */
  .hero__process { width: 100%; max-width: 34rem; align-items: center; }
  .hero__bodies { display: none; }
  .hero__step-title { font-size: clamp(1rem, 4.4vw, 1.25rem); }
  .hero__ticks { margin: 0.75rem 0 0.6rem; }
  .hero__tick { width: 40px; }
  .hero__titles { justify-items: center; }
  .hero__step-title { text-align: center; }
  .hero__ticks { justify-content: center; }
}

.content-sheet {
  position: relative;
  z-index: 2;
  /* Offset against the fixed hero: the sheet starts near the bottom of the
     first screen and slides up over it as you scroll. */
  margin-top: 86vh;
  margin-top: 86dvh;
}

/* Self-generated audio-waveform edge (inline SVG, seeded in JS). The path
   above the yellow contour is left unfilled so the hero video shows through;
   the fill below the contour is exactly --color-bg so it merges seamlessly
   into the sheet. The wrapper clips vertical parallax; the SVG is given a
   top buffer larger than the max parallax travel so translating it down
   never exposes a gap at the wrap's top edge. */
/* overflow stays visible so the wave's cast shadow can bleed upward onto the
   video — clipping it here is what made the wave look pasted on. Nothing
   overflows horizontally, and the downward overflow during parallax lands on
   the sheet body, which is the same colour. */
.content-sheet__wave-wrap {
  position: relative;
  overflow: visible;
  height: clamp(150px, 21vw, 300px);
  margin-bottom: -1px;
}
.content-sheet__wave {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}
/* Layer 1 — body. */
.content-sheet__wave-fill { fill: var(--color-bg); }
/* Layer 2 — atmospheric bloom behind the sharp contour. */
.content-sheet__wave-glow {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 6;
  opacity: 0.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.content-sheet__wave-stroke {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.content-sheet__body {
  background: var(--color-bg);
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .hero__content { transition: none !important; }
  /* The drifting masses freeze mid-composition rather than snapping to a
     single flat colour, so the hero still reads as lit. The orb's own motion
     loop bails out in JS. */
  .hero__aura,
  .hero__aura i,
  .hero__wedge,
  .orb__haze,
  .orb__dust i { animation: none !important; }
  .hero__aura { opacity: 0.8; }
  .hero__aura-a { transform: translate3d(4%, 4%, 0) scale(1.02); }
  .hero__aura-b { transform: translate3d(8%, -2%, 0) scale(1); }
  .hero__aura-c { transform: translate3d(0, 0, 0) scale(1); }
  .hero__aura-d { transform: translate3d(-14%, 6%, 0) scale(1.06); }
  .hero__aura-e { transform: translate3d(30%, -6%, 0) scale(1.04); }
  .hero__wedge { transform: rotate(38deg) scale(1.04); }
  .orb__scene { transition: opacity 0.3s linear; }
  /* Nothing advances on its own here, so a collapsed step would never open.
     All three read as a plain list; the rule still marks where the orb is. */
  /* No auto-advance here. The deck still shows one panel at a time, because
     un-stacking all three would put three right-aligned titles and three
     bodies on top of the ticks; the ticks are real buttons, so every panel
     stays reachable without motion. */
  .hero__bodies > *,
  .hero__titles > *,
  .hero__tick { transition: none; }
}

/* ==========================================================================
   Value props (8.2)
   ========================================================================== */
.props{ padding: clamp(90px, 12vh, 150px) 24px; }

.props-inner{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 7vw, 110px);
  max-width: 1120px;
  margin: 0 auto;
}

.prop{
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.props.is-in .prop{ opacity: 1; transform: none; }
.props.is-in .prop:nth-child(2){ transition-delay: .07s; }
.props.is-in .prop:nth-child(3){ transition-delay: .14s; }

.prop-disc{
  width: 82px; height: 82px;
  margin: 0 auto 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(244,233,214,.035);
  border: 1px solid rgba(242,196,56,.18);
  box-shadow: inset 0 0 26px rgba(242,196,56,.06);
  transition: border-color .6s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease);
}
.prop:hover .prop-disc{
  transform: translateY(-4px);
  border-color: rgba(242,196,56,.55);
  box-shadow: inset 0 0 34px rgba(242,196,56,.14), 0 0 34px rgba(242,196,56,.10);
}
.prop-disc svg{ width: 46px; height: 46px; overflow: visible; }

.prop p{
  font-size: 16px;
  line-height: 1.65;
  opacity: .7;
  max-width: 20ch;
  margin: 0 auto;
}

/* ---------- 1  Balken wachsen, dann Pfeil ---------- */
.bar{
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform .7s var(--ease);
}
.props.is-in .bar{ transform: scaleY(1); }
.props.is-in .b1{ transition-delay: .05s; }
.props.is-in .b2{ transition-delay: .13s; }
.props.is-in .b3{ transition-delay: .21s; }
.props.is-in .b4{ transition-delay: .29s; }
.props.is-in .b5{ transition-delay: .37s; }

.arrow{
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  transition: stroke-dashoffset .8s var(--ease) .42s;
}
.props.is-in .arrow{ stroke-dashoffset: 0; }

/* ---------- 2  Boegen laufen nach aussen ---------- */
.src{
  transform-box: fill-box; transform-origin: center;
  transform: scale(0);
  transition: transform .6s cubic-bezier(.34,1.56,.64,1);
}
.props.is-in .src{ transform: none; }

.arc{
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset .75s var(--ease);
}
.props.is-in .a1{ stroke-dashoffset: 0; transition-delay: .10s; }
.props.is-in .a2{ stroke-dashoffset: 0; transition-delay: .22s; }
.props.is-in .a3{ stroke-dashoffset: 0; transition-delay: .34s; }

.fan{
  opacity: 0;
  transform: scale(.4);
  transform-box: fill-box; transform-origin: center;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.props.is-in .f1{ opacity: 1; transform: none; transition-delay: .46s; }
.props.is-in .f2{ opacity: 1; transform: none; transition-delay: .54s; }
.props.is-in .f3{ opacity: 1; transform: none; transition-delay: .62s; }

/* ---------- 3  Ring fuellt sich auf 98 % ---------- */
/* r=18  ->  Umfang 113.1 ; 98 % davon = 110.8 */
.ring{
  stroke-dasharray: 110.8 113.1;
  stroke-dashoffset: 113.1;
  transition: stroke-dashoffset 1.5s var(--ease) .2s;
}
.props.is-in .ring{ stroke-dashoffset: 0; }

.glyph{ opacity: 0; transition: opacity .7s var(--ease) .9s; }
.props.is-in .glyph{ opacity: .85; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .props-inner{ grid-template-columns: 1fr; gap: 54px; max-width: 380px; }
  .props{ padding: clamp(70px, 10vh, 110px) 24px; }
  .prop-disc{ width: 72px; height: 72px; margin-bottom: 20px; }
  .prop-disc svg{ width: 40px; height: 40px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .prop, .bar, .arrow, .arc, .fan, .src, .ring, .glyph{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .glyph{ opacity: .85 !important; }
}

/* ==========================================================================
   Section 1 — What is Teaserr (8.3)
   ========================================================================== */
.what{ padding: clamp(100px, 15vh, 180px) 24px; }

.what-inner{
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

/* ---------- Text ---------- */
.what-copy{ position: relative; max-width: 46ch; padding-left: 86px; }

.what-num{
  position: absolute; left: 0; top: -22px;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 92px; line-height: 1; color: var(--color-accent); opacity: .30;
  pointer-events: none; user-select: none;
}
.what-copy h2{
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.02em;
  color: var(--color-highlight); margin-bottom: 26px;
}
.what-copy p{
  font-size: 17px; line-height: 1.75; opacity: .66; max-width: 40ch;
  margin-bottom: 18px;
}
.what-copy .lead{ font-size: 19px; opacity: .86; }
.what-copy .closing{
  font-family: var(--font-display); font-style: italic;
  font-size: 21px; opacity: .82; margin-top: 26px; margin-bottom: 0;
}

/* ---------- Galerie ---------- */
.gallery{
  --card-w: min(34vw, 400px);
  --card-ratio: 1.6;                 /* 1.6 = Querformat. Fuer Hochformat: .55 */
  position: relative; overflow: hidden;
  height: calc(var(--card-w) / var(--card-ratio) + 92px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  perspective: 1400px;
  touch-action: pan-y;
}
.gallery-track{
  position: relative; width: 100%; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  height: calc(var(--card-w) / var(--card-ratio));
  transform-style: preserve-3d;
}
.slide{
  position: absolute; top: 0; left: 50%;
  width: var(--card-w); aspect-ratio: var(--card-ratio);
  margin: 0; border-radius: 14px; overflow: hidden;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  box-shadow: 0 26px 60px rgba(0,0,0,.55);
  transform-origin: center center;
  transition: transform .85s var(--ease), opacity .85s var(--ease), filter .85s var(--ease);
  will-change: transform, opacity;
  cursor: pointer;
}
.slide img{ width: 100%; height: 100%; object-fit: cover; }
.slide::after{                       /* Abdunklung fuer alles ausser der Mitte */
  content:''; position: absolute; inset: 0; background: rgba(20,17,16,.34);
  opacity: 1; transition: opacity .85s var(--ease); pointer-events: none;
}
.slide.is-active{ cursor: default; }
.slide.is-active::after{ opacity: 0; }
.slide.is-active{ border-color: rgba(242,196,56,.26); }

/* ---------- Punkte ---------- */
.gallery-dots{ display: flex; gap: 8px; margin-top: 30px; }
.gallery-dots button{
  width: 22px; height: 2px; padding: 0; border: 0; cursor: pointer;
  background: var(--color-highlight); opacity: .18; border-radius: 2px;
  transition: opacity .4s var(--ease), background .4s var(--ease), width .4s var(--ease);
}
.gallery-dots button[aria-selected="true"]{ opacity: 1; background: var(--color-accent); width: 30px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .what-inner{ grid-template-columns: 1fr; gap: 56px; }
  .what-copy{ max-width: 60ch; margin: 0 auto; padding-left: 0; }
  .what-num{ position: static; display: block; font-size: 64px; margin-bottom: 6px; }
  .gallery{ --card-w: min(72vw, 520px); }
}
@media (max-width: 640px){
  .what{ padding: 80px 20px; }
  .gallery{ --card-w: 78vw; }
  .what-copy p{ font-size: 16px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .slide{ transition: opacity .3s linear; }
}

/* ==========================================================================
   Statement (8.4)
   ========================================================================== */
.statement {
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
  text-align: center;
}
.statement__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-highlight);
  max-width: 900px;
  margin: 0 auto;
}

/* ==========================================================================
   Section 2 — Why Teaserr (8.5)
   ========================================================================== */
.why {
  padding: clamp(140px, 12vw, 180px) 0;
}
.why__inner { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- Lower-page atmosphere: subtle starfield ----------
   Shares the .star element/twinkle technique with the hero night sky.
   Used behind The Earnings, Packages, Calculator and CTA — deliberately
   kept out of FAQ/footer so those read as clean closing sections. */
.stars-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.stars-field .star {
  position: absolute;
  border-radius: 50%;
  background: var(--color-highlight);
}
.stars-field .star--twinkle {
  animation: star-twinkle var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes star-twinkle {
  0%, 100% { opacity: var(--o, 0.15); }
  50% { opacity: calc(var(--o, 0.15) * 0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .stars-field .star--twinkle { animation: none; }
}

/* Text-image combos */
.combos { display: flex; flex-direction: column; gap: clamp(3.5rem, 8vw, 6rem); }
.combo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.combo--img-left .combo__media { order: -1; }
.combo__headline {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-accent);
  font-size: var(--fs-h3);
  margin-bottom: 0.75rem;
}
.combo__copy { color: var(--color-highlight); line-height: 1.65; max-width: 42ch; }
.combo__media { display: flex; justify-content: center; }

.phone-frame {
  width: min(260px, 100%);
  aspect-ratio: 9 / 18.5;
  border-radius: 32px;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-strong);
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
  overflow: hidden;
}
.phone-frame img { width: 100%; height: 100%; object-fit: cover; }
.phone-frame--missing {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--color-border-strong);
  background: repeating-linear-gradient(135deg, rgba(244,233,214,0.04) 0 10px, transparent 10px 20px);
}
.phone-frame__label {
  color: var(--color-text-dim);
  font-size: 0.8rem;
  text-align: center;
  padding: 1.5rem;
  line-height: 1.5;
}
.phone-frame__label strong { color: var(--color-accent); }

/* ==========================================================================
   Section 3 — More Than Monetization (8.6)
   ========================================================================== */
.monetization {
  position: relative;
  padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 8vw, 6rem);
  background: var(--color-bg);
  overflow: hidden;
}
/* Fades the illustration's own bottom edge into the section background.
   z-index:0 (same layer as the img, which precedes this pseudo-element in
   paint order so it lands above the image) keeps it below the z-index:1
   text content so nothing gets obscured. */
.monetization::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--color-bg) 0%, transparent 100%);
}
.monetization__inner {
  position: relative; z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.monetization__inner > * { min-width: 0; }
.monetization__text .section-head { margin-bottom: 1rem; }
.monetization__lead {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  color: var(--color-highlight);
  margin-bottom: 0.85rem;
}
.monetization__copy { color: var(--color-highlight); line-height: 1.65; margin-bottom: 1.5rem; }

/* ---------- Chat-Spalte ---------- */
.chat{
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 16px;
  max-width: 460px; margin-left: auto;
  min-width: 0;
}

.bubble{
  position: relative;
  padding: 18px 22px;
  border-radius: 18px;
  background: rgba(32,27,24,.92);
  border: 1px solid rgba(244,233,214,.09);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 34px rgba(0,0,0,.42);
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 16px; line-height: 1.55; color: var(--color-highlight);
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.chat.is-in .bubble{ opacity: 1; transform: none; }
.chat.is-in .b1{ transition-delay: .15s; }
.chat.is-in .b2{ transition-delay: 1.75s; }   /* erst nach dem Tippen */
.chat.is-in .b3{ transition-delay: 2.70s; }

.bubble .avatar{
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-accent); margin-top: 1px;
}
.bubble p{ min-width: 0; }
.bubble.from-me{
  margin-left: 46px; flex-direction: row-reverse;
  background: rgba(38,32,26,.94);
  border-color: rgba(242,196,56,.22);
}
.bubble.from-fan{ margin-right: 46px; }

/* ---------- Tipp-Indikator ---------- */
.typing{
  align-self: flex-end; margin-left: 46px;
  display: flex; gap: 5px; padding: 14px 18px; border-radius: 16px;
  background: rgba(38,32,26,.9); border: 1px solid rgba(242,196,56,.16);
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  height: 0; margin-block: 0; padding-block: 0; border-width: 0; overflow: hidden;
}
.chat.is-in .typing{
  opacity: 1; transform: none;
  height: auto; padding-block: 14px; border-width: 1px;
  transition-delay: .75s;
}
.chat.is-typing-done .typing{
  opacity: 0; height: 0; padding-block: 0; border-width: 0;
  margin-block: 0; transition-delay: 0s;
}
.typing i{
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-highlight);
  opacity: .5; animation: typing 1.25s ease-in-out infinite;
}
.typing i:nth-child(2){ animation-delay: .16s; }
.typing i:nth-child(3){ animation-delay: .32s; }
@keyframes typing{
  0%,60%,100%{ transform: translateY(0);   opacity: .35; }
  30%        { transform: translateY(-5px); opacity: .95; }
}

/* ---------- Mikrofon-Illustration ---------- */
.mic-art{
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  transform: translateY(8%);          /* nur leicht tiefer */
}
.mic-art img{ width: 100%; height: auto; display: block; }

/* Sektion braucht Luft nach unten, damit das Bild Platz hat */
.section-close{ position: relative; padding-bottom: clamp(120px, 16vh, 200px); overflow: hidden; }

/* ---------- Bullets lesbarer ---------- */
.close-list{ list-style: none; padding: 0; margin: 34px 0 0; }
.close-list li{
  position: relative; padding-left: 22px; margin-bottom: 18px;
  font-size: 16px; line-height: 1.65; color: var(--color-highlight); opacity: .74;
  max-width: 42ch;
}
.close-list li::before{
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); opacity: .7;
}

@media (max-width: 1024px){
  .chat{ max-width: 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bubble{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .typing{ display: none; }
  .typing i{ animation: none; }
}

/* ==========================================================================
   The Earnings (8.7)
   ========================================================================== */
.earnings-info { position: relative; padding: clamp(4rem, 9vw, 7rem) var(--gutter); text-align: center; }
.earnings-info__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.earnings-info__headline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h2);
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}
.earnings-info__lead { font-weight: 600; font-size: 1.15rem; margin-bottom: 0.75rem; color: var(--color-highlight); }
.earnings-info__copy { color: var(--color-text-dim); line-height: 1.65; margin-bottom: 2.5rem; }

.earnings-card {
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}
.earnings-card__number {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(3rem, 2.4rem + 3vw, 4.5rem);
  color: var(--color-accent);
  line-height: 1;
}
.earnings-card__number span { font-size: 0.5em; }
.earnings-card__text { margin-top: 0.5rem; font-weight: 600; color: var(--color-highlight); }

.earnings-bars { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.earnings-bar__track {
  height: 14px;
  border-radius: 999px;
  background: var(--color-bg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.earnings-bar__fill { height: 100%; border-radius: 999px; transition: width 1.1s var(--ease); }
.earnings-bar__fill--accent { background: var(--color-accent); }
.earnings-bar__fill--dim { background: var(--color-text-dim-2); }
.earnings-bar__label { margin-top: 0.6rem; font-size: 0.9rem; color: var(--color-text-dim); text-align: left; }
.earnings-bar__label strong { color: var(--color-highlight); }

/* ==========================================================================
   Section 4 — Packages (8.8)
   ========================================================================== */
.packages { position: relative; padding: clamp(4rem, 9vw, 7rem) 0; }
.packages__inner { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.packages__inner > .section-head { margin-bottom: 0.5rem; }
.packages__subline { color: var(--color-text-dim); margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.packages__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
  align-items: stretch;
}
.package-card { display: flex; flex-direction: column; position: relative; }
.package-card--highlight { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.package-card__label { color: var(--color-text-dim); font-size: 0.85rem; margin-bottom: 1.5rem; max-width: 32ch; }
.package-card__head { margin-bottom: 1.25rem; }
.package-card__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--color-highlight);
}
.package-card__split { font-size: 2.5rem; font-weight: 700; color: var(--color-highlight); margin-top: 0.25rem; }
.package-card__split span { color: var(--color-accent); }
.package-card__keep { color: var(--color-text-dim); font-size: 0.9rem; margin-top: 0.25rem; }
.package-card__badge {
  display: inline-block;
  align-self: flex-start;
  background: rgba(242, 196, 56, 0.12);
  color: var(--color-accent);
  border: 1px solid rgba(242, 196, 56, 0.35);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.package-card__list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.75rem; flex-grow: 1; }
.package-card__list li {
  color: var(--color-text-dim);
  font-size: 0.92rem;
  line-height: 1.55;
  padding-left: 1.3rem;
  position: relative;
}
.package-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}
.package-card__list li strong { color: var(--color-highlight); }
.package-card__sticker {
  margin-top: auto;
  background: var(--color-highlight);
  color: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  transform: rotate(-2deg);
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
  align-self: flex-start;
  max-width: 90%;
}
.package-card__sticker p {
  font-size: 0.85rem;
  line-height: 1.5;
}

.packages__cta { display: flex; width: fit-content; margin: clamp(2rem, 5vw, 3rem) auto 0; }

/* ==========================================================================
   Earnings slider / calculator (8.9)
   ========================================================================== */
.calculator { position: relative; padding: clamp(3rem, 8vw, 6rem) var(--gutter); }
.calculator__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; text-align: center; }
.calculator__headline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h2);
  color: var(--color-accent);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.calculator__card { text-align: left; }
.calculator__control { margin-bottom: 2rem; }
.calculator__control:last-of-type { margin-bottom: 2.5rem; }
.calculator__control-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.75rem;
}
.calculator__control-head label { font-weight: 600; color: var(--color-highlight); }
.calculator__control-head output { font-family: var(--font-body); font-weight: 700; font-size: 1.4rem; color: var(--color-accent); }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--color-bg-raised-2);
  outline: none;
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 4px solid var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-accent);
  cursor: pointer;
  margin-top: -9px;
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--color-bg-raised-2); }
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 4px solid var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-accent);
  cursor: pointer;
}

.calculator__result {
  border-top: 1px solid var(--color-border);
  padding-top: 1.75rem;
  text-align: center;
}
.calculator__result-label { color: var(--color-text-dim); font-size: 0.9rem; margin-bottom: 0.4rem; }
.calculator__result-value {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  color: var(--color-accent);
  line-height: 1.1;
}
.calculator__result-compare { color: var(--color-text-dim-2); font-size: 0.85rem; margin-top: 0.5rem; }
.calculator__disclaimer { color: var(--color-text-dim-2); font-size: 0.78rem; text-align: center; margin-top: 1.5rem; line-height: 1.5; }

/* ==========================================================================
   CTA — waitlist + countdown (8.10)
   ========================================================================== */
.cta {
  position: relative;
  padding: clamp(4rem, 10vw, 8rem) var(--gutter);
  background: var(--color-bg);
  text-align: center;
}
.cta__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.cta__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}
.cta__headline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.25;
  color: var(--color-highlight);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.cta__headline em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--color-accent);
}

.countdown { margin-bottom: clamp(2rem, 5vw, 3rem); }
.countdown__grid { display: flex; justify-content: center; gap: clamp(0.75rem, 3vw, 1.75rem); }
.countdown__unit { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; min-width: 64px; }
.countdown__value {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums lining-nums;
}
.countdown__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-dim); }
.countdown__live { font-family: var(--font-body); font-weight: 700; font-size: 1.5rem; color: var(--color-accent); }

.waitlist-form { margin-bottom: 1.5rem; }
.waitlist-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
  text-align: left;
}
.waitlist-form__field { display: flex; flex-direction: column; gap: 0.5rem; }
.waitlist-form__field label { font-size: 0.85rem; color: var(--color-text-dim); }
.waitlist-form__field input {
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  color: var(--color-highlight);
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease);
}
.waitlist-form__field input:focus { border-color: var(--color-accent); }
.waitlist-form__field input.is-invalid { border-color: #e2685a; }
.waitlist-form__submit { width: 100%; justify-content: center; }
.waitlist-form__error { color: #f28c7d; font-size: 0.85rem; margin-top: 1rem; }
.waitlist-form__success { color: var(--color-accent); font-size: 1rem; font-weight: 600; margin-top: 1rem; }

.cta__trust { color: var(--color-text-dim-2); font-size: 0.8rem; }

/* ==========================================================================
   FAQ (8.11)
   ========================================================================== */
.faq { padding: clamp(4rem, 9vw, 7rem) var(--gutter); }
.faq__inner { max-width: 760px; margin: 0 auto; }
.faq__headline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h2);
  color: var(--color-accent);
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item__heading { margin: 0; }
.faq-item__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 0;
  text-align: left;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-highlight);
}
.faq-item__chevron {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--color-accent);
  transition: transform var(--dur-fast) var(--ease);
}
.faq-item__trigger[aria-expanded="true"] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease);
}
.faq-item[data-open="true"] .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__panel-inner { overflow: hidden; }
.faq-item__panel-inner p { color: var(--color-text-dim); line-height: 1.65; padding-bottom: 1.35rem; max-width: 68ch; }

/* ==========================================================================
   Footer (8.12)
   ========================================================================== */
.site-footer { position: relative; z-index: 2; background: var(--color-bg); border-top: 1px solid var(--color-border); padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2rem; }
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 0.9rem; }
.site-footer__brand img { width: 86px; height: 86px; }
.site-footer__tagline { color: var(--color-text-dim); font-size: 0.9rem; max-width: 26ch; }
.site-footer__col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-dim-2); margin-bottom: 1.1rem; }
.site-footer__col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.site-footer__col a { color: var(--color-text-dim); font-size: 0.92rem; transition: color var(--dur-fast) var(--ease); }
.site-footer__col a:hover { color: var(--color-accent); }
.site-footer__bottom { max-width: var(--container); margin: 0 auto; padding-top: 1.75rem; border-top: 1px solid var(--color-border); }
.site-footer__bottom p { color: var(--color-text-dim-2); font-size: 0.8rem; }

/* ==========================================================================
   Legal pages (impressum / privacy / terms)
   ========================================================================== */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 3rem) var(--gutter) 5rem;
}
.legal h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-h2);
  color: var(--color-accent);
  margin-bottom: 2rem;
}
.legal h2 { font-size: 1.15rem; font-weight: 600; margin: 2.25rem 0 0.75rem; color: var(--color-highlight); }
.legal p { color: var(--color-text-dim); line-height: 1.7; margin-bottom: 0.5rem; }
.legal .legal__back { display: inline-block; margin-bottom: 2rem; color: var(--color-accent); font-size: 0.9rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
  .monetization__inner { grid-template-columns: 1fr; }
  .chat { margin-top: 2rem; }
}

@media (max-width: 899px) {
  .nav__inner { padding-block: 20px 16px; }
  :root { --nav-height: 80px; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__mobile { display: flex; }

  /* The whole right column goes, not just its contents: an empty grid item
     still occupies column 3 and pushes the burger onto a second row. */
  .nav__right { display: none; }
  /* The third wall and the dust cost more than they give on a phone. */
  .orb__wall--3, .orb__dust { display: none; }

  .sticky-cta { display: flex; }

  .combo, .combo--img-left .combo__media { grid-template-columns: 1fr; }
  .combo { grid-template-columns: 1fr; text-align: center; }
  .combo__copy { margin-inline: auto; }
  .combo--img-left .combo__media { order: 0; }

  .packages__grid { grid-template-columns: 1fr; }

  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 599px) {
  :root { --nav-height: 76px; }
  /* A touch more clearance under the orb stack so the wave never crops the
     CTA on the shortest phones. */
  /* Narrow viewports put the headline directly over the brightest part of a
     mass far more often, so the centre scrim gets heavier here. */
  .hero__scrim {
    background:
      radial-gradient(90% 52% at 50% 42%, rgba(20,17,16,0.64) 0%, rgba(20,17,16,0.34) 48%, rgba(20,17,16,0) 76%),
      linear-gradient(to bottom, rgba(20,17,16,0.74) 0%, rgba(20,17,16,0.18) 18%, rgba(20,17,16,0) 36%),
      linear-gradient(to bottom, transparent 68%, rgba(20,17,16,0.82) 92%, #141110 100%);
  }

  .waitlist-form__row { grid-template-columns: 1fr; }
  .countdown__grid { gap: 0.6rem; }
  .countdown__unit { min-width: 54px; }

  .site-footer__inner { grid-template-columns: 1fr; }
}

/* Small phones in portrait. Headline, copy, button, orb and three labels do
   not fit in ~700px of height. The steps cycle with the orb regardless, so
   showing only the active one costs the simultaneity and nothing else. */
@media (max-width: 1023px) and (max-height: 720px) {
  .hero__stage { width: min(38vw, 13.5vh, 140px); }
  .hero__sub { line-height: 1.45; }
  .hero__cta { margin-top: 10px; }
  /* The founder-tier line is the first thing to go: it repeats verbatim in
     the packages section. */
  .hero__meta { display: none; }
  /* Trimming padding here only moved the overflow, because the rows are
     centred in the box — the block itself is taller than the gap between the
     header and the wave. The body sentences are the only real height left,
     and the three titles still carry the sequence without them. */
  /* Trimming padding here only moved the overflow, because the rows are
     centred in the box. The body sentences are the only real height left; the
     title and the ticks still carry the sequence without them. */
  .hero__bodies { display: none; }
  .hero__ticks { margin: 0.5rem 0 0.4rem; }
}

/* The last of the small phones (320x568 and similar). Nothing left to trim but
   the orb itself. */
@media (max-width: 1023px) and (max-height: 600px) {
  /* Squeezing the orb below ~120px to keep the paragraph makes the artwork
     unreadable, which loses more than the sentence does — the same claim is
     repeated in the section right below the fold. */
  .hero__sub { display: none; }
  .hero__stage { width: min(52vw, 22svh, 170px); }
  .hero__cta { margin-top: 0; }
  .hero__ticks { margin: 0.35rem 0 0.25rem; }
  .hero__content { row-gap: clamp(0.3rem, 0.8vh, 0.6rem); }
}

/* Tablet-width windows that are not tall: the plain max-width:1023 rule above
   sets the orb for a 1024x1366 iPad, which is too big once the height drops. */
@media (min-width: 768px) and (max-width: 1023px) and (max-height: 860px) {
  .hero__stage { width: min(38vw, 20svh, 240px); }
}