/* ============================================================================
   elucor.de — Landing v2 (Design-Handoff aus Claude Design, 2026-07-03)
   Quelle: Design-System-Projekt "elucor Design System" → templates/landing-page.
   Produktions-Anpassungen: Tokens inline (statt tokens.css), Tweak-Varianten
   entfernt (Defaults eingebacken: accent=tiefe, hero=left, rhythm=tiefer,
   founder=Foto), Tweaks-Panel gestrichen, smooth-scroll reduced-motion-safe.
   Legal-Seiten (impressum/datenschutz) nutzen weiterhin styles.css.
   ============================================================================ */

/* ---- Design-Tokens ---------------------------------------------------------- */
:root{
  /* Oberfläche (helle Zone) */
  --surface:#FAFDFF;
  --mist:#EAF4FB;
  --welle:#3FA9F5;
  --tiefe:#1273B8;
  --ink:#0B2A3C;
  --glow:#BFE3FB;
  /* Tiefenwasser (dunkle Zone) */
  --abyss:#04202F;
  --deep-1:#0D3B57;
  --deep-2:#082C44;
  --deep-3:#06263A;
  --deep-4:#031824;
  --ground:#02141E;
  --lux:#9FE0FF;
  --hud:#8FD2FF;
  --light-head:#F2F9FE;
  --light-body:rgba(218,237,249,.87);
  --muted:rgba(11,42,60,.68);
  --quiet:rgba(11,42,60,.52);
  /* Typo-Rollen */
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Albert Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  /* Layout */
  --wrap:1000px;
  /* Akzent (Design-Entscheidung: Tiefe) */
  --accent:var(--tiefe);
  --accent-hover:#0E5E97;
  --accent-soft:rgba(18,115,184,.28);
}

/* ---- Basis ------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--glow); color:var(--ink); }
img,svg,canvas{ display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-display); margin:0; }
p{ margin:0; }
:focus-visible{
  outline:2px solid var(--welle);
  outline-offset:3px;
  border-radius:4px;
}
.wrap{ width:min(var(--wrap),100%); margin-inline:auto; padding-inline:clamp(20px,4vw,40px); }

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

/* ---- Reveal / Motion (nur mit JS + ohne reduced-motion) --------------------- */
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1);
    will-change:opacity, transform;
  }
  html.js .reveal.is-visible{ opacity:1; transform:none; }
  html.js .reveal[data-delay="1"]{ transition-delay:.09s; }
  html.js .reveal[data-delay="2"]{ transition-delay:.18s; }
  html.js .reveal[data-delay="3"]{ transition-delay:.27s; }
  html.js .reveal[data-delay="4"]{ transition-delay:.36s; }
}

.section{ position:relative; }
.section-inner{ padding-block:clamp(4.5rem,10vh,7.5rem); }

/* Tiefen-Bänder */
.band{ background:linear-gradient(180deg, var(--top), var(--bot)); }
.band--problem { --top:var(--deep-1); --bot:var(--deep-2); }
.band--example { --top:var(--deep-3); --bot:#041C2C; }
.band--services{ --top:var(--deep-1); --bot:#0A3450; }
.band--flow    { --top:var(--deep-2); --bot:var(--deep-3); }
.band--pricing { --top:var(--deep-3); --bot:var(--deep-2); }
.band--about   { --top:var(--deep-4); --bot:var(--deep-4); }
.band--faq     { --top:var(--deep-2); --bot:var(--deep-3); }
.band--contact { --top:var(--deep-4); --bot:var(--ground); }

/* ---- Licht-Layer (statisch, dekorativ — „elucere": Licht bricht durchs Wasser).
   Prinzip: Bild zwischen zwei Verläufen — der obere Overlay-Verlauf sichert
   Text-Kontrast, der untere ist der normale Band-Verlauf als Fallback/Grund. ---- */
.band--example{
  background:
    linear-gradient(180deg, rgba(6,38,58,.28) 0%, rgba(5,32,50,.58) 45%, rgba(4,28,44,.88) 100%),
    url("assets/licht-wasser.webp") center top / cover no-repeat,
    linear-gradient(180deg, var(--top), var(--bot));
}
.band--contact{
  background:
    linear-gradient(180deg, rgba(3,24,36,.38) 0%, rgba(2,20,30,.7) 60%, rgba(2,20,30,.92) 100%),
    url("assets/licht-beam.webp") center 18% / cover no-repeat,
    linear-gradient(180deg, var(--top), var(--bot));
}
/* Ablauf („So fängt das an"): Tropfen-Motiv gehört zur Tropfen-Metapher des
   Ablaufs (Review 2026-07-03: aus der FAQ hierher — dort saß es zu nah am
   God-Ray des Kontakts). Oben rechts neben der Headline, Kanten sind als
   Alpha-Vignette ins Asset gebacken. FAQ bleibt bewusst ruhig/plain. */
.band--flow{
  background:
    linear-gradient(180deg, rgba(8,44,68,.42) 0%, rgba(8,42,64,.5) 45%, rgba(6,36,56,.9) 100%),
    url("assets/licht-tropfen.webp") right -6% top -8% / min(880px,78%) no-repeat,
    linear-gradient(180deg, var(--top), var(--bot));
}

/* ---- Section-Head + Eyebrow -------------------------------------------------- */
.section-head{ max-width:640px; margin-bottom:clamp(2.2rem,5vw,3.6rem); }

/* Section head with a mascot beside it (Beispiel, FAQ). Text keeps its
   reading width; Nick sits to the right on desktop, stacks above on mobile. */
.section-head--mascot{
  max-width:none; display:flex; align-items:center;
  justify-content:space-between; gap:clamp(1.5rem,5vw,4rem);
}
.section-head--mascot .section-head-text{ max-width:640px; }
.section-mascot{
  flex:0 0 auto; width:clamp(150px,20vw,290px); height:auto;
  filter:drop-shadow(0 18px 34px rgba(2,20,34,.4));
}
@media (max-width:760px){
  .section-head--mascot{ flex-direction:column-reverse; align-items:flex-start; }
  .section-mascot{ width:clamp(140px,42vw,200px); align-self:center; }
}
.section-head h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.85rem,3.4vw,2.9rem);
  letter-spacing:-0.025em; line-height:1.12;
  margin:.9rem 0; color:var(--light-head); text-wrap:balance;
}
.section-head p{ font-size:1.05rem; line-height:1.65; color:var(--light-body); max-width:56ch; }
.eyebrow{
  font-family:var(--font-mono); font-weight:500;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--hud); margin:0 0 22px;
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:""; width:30px; height:1px; background:currentColor; flex:none; opacity:.7;
}

/* ============================================================================
   NAV — Glas-Pille, schaltet beim Abtauchen auf dunkles Glas
   ============================================================================ */
.nav{
  position:fixed; inset:14px 0 auto; z-index:60;
  display:flex; justify-content:center;
  padding-inline:16px; pointer-events:none;
}
.nav-pill{
  pointer-events:auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  width:min(1080px,100%);
  padding:8px 8px 8px 18px;
  border-radius:999px;
  background:rgba(250,253,255,.68);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(18,115,184,.16);
  box-shadow:0 10px 36px rgba(11,42,60,.08);
  transition:background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.nav-pill.is-dark{
  background:rgba(5,30,45,.66);
  border-color:rgba(191,227,251,.22);
  box-shadow:0 14px 44px rgba(2,14,24,.35);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:19px;
  letter-spacing:-0.02em; color:var(--ink); text-decoration:none;
  transition:color .45s ease;
}
.brand svg{ width:27px; height:27px; flex:none; }
.nav-pill.is-dark .brand{ color:#fff; }
.nav-links{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.nav-links a{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; transition:color .25s ease;
}
.nav-pill.is-dark .nav-links a{ color:rgba(191,227,251,.7); }
.nav-links a:hover{ color:var(--accent); }
.nav-pill.is-dark .nav-links a:hover{ color:var(--glow); }
.nav-cta{
  font-family:var(--font-display); font-weight:600; font-size:14px;
  color:#fff; background:var(--accent); text-decoration:none;
  padding:10px 22px; border-radius:999px; white-space:nowrap;
  transition:background .2s ease, transform .2s ease;
}
.nav-cta:hover{ background:var(--accent-hover); transform:translateY(-1px); }
@media (max-width:720px){ .nav-links{ display:none; } }

/* ============================================================================
   HERO — 2-spaltig, Text links / Maskottchen rechts
   ============================================================================ */
.hero{
  background:linear-gradient(180deg,#FAFDFF 0%,#EAF4FB 34%,#BFE3FB 100%);
  padding-top:96px;
}
.hero-grid{
  display:grid; grid-template-columns:1.12fr .88fr;
  gap:clamp(1.6rem,4vw,3.5rem); align-items:center;
  padding-block:clamp(3rem,7vh,6rem) clamp(3.5rem,9vh,7rem);
}
.hero h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(38px,6vw,84px); line-height:1.04; letter-spacing:-0.045em;
  color:var(--ink); max-width:15ch; text-wrap:balance; margin:0;
}
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero .sub{
  margin:22px 0 0; max-width:52ch;
  font-size:clamp(16px,1.5vw,19px); line-height:1.65; color:var(--muted);
}
.hero-claim{
  margin:18px 0 0; max-width:52ch;
  font-family:var(--font-display); font-weight:600; font-size:clamp(15px,1.3vw,17px);
  color:var(--ink);
}
.etymology{
  margin:26px 0 0;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em;
  color:var(--quiet);
}
.etymology b{ font-weight:500; color:var(--muted); }
.mascot-slot{ position:relative; justify-self:center; }
.mascot-slot img{
  width:min(100%,340px); height:auto; margin-inline:auto;
  filter:drop-shadow(0 14px 30px rgba(18,115,184,.24));
}

/* ---- Buttons ----------------------------------------------------------------- */
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.btn-primary{
  display:inline-block; font-family:var(--font-display); font-weight:600; font-size:15px;
  color:#fff; background:var(--accent); text-decoration:none;
  padding:15px 30px; border-radius:999px;
  box-shadow:0 10px 28px var(--accent-soft);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{
  background:var(--accent-hover); transform:translateY(-2px);
  box-shadow:0 14px 34px var(--accent-soft);
}
.btn-ghost{
  display:inline-block; font-family:var(--font-display); font-weight:600; font-size:15px;
  color:var(--ink); text-decoration:none;
  padding:14px 28px; border-radius:999px;
  border:1.5px solid rgba(11,42,60,.32); background:rgba(250,253,255,.55);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.btn-ghost:hover{ border-color:var(--accent); background:rgba(250,253,255,.8); transform:translateY(-2px); }
.btn-primary--contact{
  background:linear-gradient(135deg, var(--accent), #0A4E7E);
  box-shadow:0 14px 34px rgba(63,169,245,.35), inset 0 1px 0 rgba(191,227,251,.35);
}
.btn-primary--contact:hover{
  background:linear-gradient(135deg, var(--accent-hover), #0A4E7E);
  box-shadow:0 18px 44px rgba(63,169,245,.5), inset 0 1px 0 rgba(191,227,251,.35);
}
.btn-book{
  display:inline-block; font-family:var(--font-display); font-weight:600; font-size:15px;
  color:var(--hud); text-decoration:none;
  padding:13px 26px; border-radius:999px;
  border:1.5px solid rgba(143,210,255,.35); background:rgba(143,210,255,.06);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.btn-book:hover{ border-color:var(--accent); background:rgba(143,210,255,.14); transform:translateY(-2px); }

/* ============================================================================
   PROBLEM
   ============================================================================ */
.pains{ list-style:none; margin:0 0 1.8rem; padding:0; display:grid; gap:1rem; max-width:600px; }
.pains li{
  position:relative; padding-left:1.6rem;
  color:rgba(191,227,251,.92); font-size:1.05rem; line-height:1.5;
}
.pains li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:16px; height:1.5px;
  background:linear-gradient(90deg, var(--hud), rgba(143,210,255,0));
}
.problem-close{ max-width:600px; display:grid; gap:1rem; }
.problem-close p{ color:var(--light-body); font-size:1.02rem; line-height:1.65; }
.problem-close .honest{ color:rgba(191,227,251,.72); }

/* ============================================================================
   BEISPIEL — Workflow-Tile + 4 Stat-Kacheln
   ============================================================================ */
.example-tile{
  background:linear-gradient(165deg, rgba(7,38,57,0.78), rgba(4,27,41,0.6));
  border:1px solid rgba(143,210,255,0.26); border-radius:20px;
  padding:clamp(1.7rem,3vw,2.6rem); max-width:720px;
  box-shadow:inset 0 1px 0 rgba(191,227,251,0.18), 0 24px 60px rgba(2,14,22,0.35);
  margin-bottom:clamp(1.4rem,3vw,2rem);
}
.tile-kicker{
  display:block; font-family:var(--font-mono); font-weight:500;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--hud); margin-bottom:.6rem;
}
.example-tile h3{
  font-family:var(--font-display); font-weight:600; font-size:1.4rem;
  letter-spacing:-0.015em; color:var(--light-head); margin:0 0 1rem;
}
.example-tile p{ color:rgba(214,234,247,0.85); font-size:1rem; margin:0 0 .9rem; line-height:1.6; }
.example-tile p:last-child{ margin-bottom:0; }
.example-tile p b{ color:var(--light-head); }
.example-result{ color:var(--light-head); }
.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.9rem,1.8vw,1.3rem);
}
.stat{
  position:relative; overflow:hidden;
  border-radius:16px; padding:1.3rem 1.2rem 1.15rem;
  border:1px solid rgba(143,210,255,.26);
  background:
    radial-gradient(80px 60px at 26% 24%, rgba(63,169,245,.18), rgba(63,169,245,0) 72%),
    linear-gradient(165deg, rgba(9,44,66,.62), rgba(4,24,38,.6));
  box-shadow:inset 0 1px 0 rgba(191,227,251,.16), 0 12px 30px rgba(2,14,22,.4);
}
.stat .fdot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--hud); box-shadow:0 0 12px 2px rgba(143,210,255,.5);
  margin-bottom:.9rem;
}
.stat b{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:1.05rem; letter-spacing:-0.01em; color:var(--light-head); margin-bottom:.3rem;
}
.stat span{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(191,227,251,.62); line-height:1.5;
}
.example-note{
  margin-top:1.4rem; max-width:720px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em;
  color:rgba(191,227,251,.55); line-height:1.6;
}

/* ============================================================================
   LEISTUNGEN — Service-Cards (mit Mono-Kicker im Titel)
   ============================================================================ */
.cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,2.5vw,1.8rem);
}
.card{
  background:linear-gradient(165deg, rgba(7,38,57,0.78), rgba(4,27,41,0.6));
  border:1px solid rgba(143,210,255,0.26); border-radius:20px;
  padding:clamp(1.6rem,3vw,2.2rem);
  box-shadow:inset 0 1px 0 rgba(191,227,251,0.18), 0 24px 60px rgba(2,14,22,0.35);
}
.card-icon{
  width:46px; height:46px; margin-bottom:1.1rem;
  filter:drop-shadow(0 1px 1px rgba(3,20,34,.55)) drop-shadow(0 0 6px rgba(143,210,255,.5));
}
.card h3{
  font-family:var(--font-display); font-weight:600; font-size:1.32rem;
  letter-spacing:-0.015em; color:var(--light-head); margin:0 0 .7rem;
}
.card h3 span{
  display:block; font-family:var(--font-mono); font-weight:500;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--hud); margin-bottom:.55rem;
}
.card > p{ color:rgba(214,234,247,0.85); font-size:.99rem; margin:0; }
.card ul{ list-style:none; margin:1.3rem 0 0; padding:0; display:grid; gap:.6rem; }
.card li{
  position:relative; padding-left:1.5rem;
  color:rgba(191,227,251,0.92); font-size:.95rem;
}
.card li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:15px; height:1.5px; background:linear-gradient(90deg, var(--hud), rgba(143,210,255,0));
}

/* ============================================================================
   ABLAUF — Step-Cards
   ============================================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.2vw,1.8rem); }
.step{
  background:linear-gradient(165deg, rgba(7,38,57,0.7), rgba(4,27,41,0.55));
  border:1px solid rgba(143,210,255,0.2); border-radius:20px;
  padding:clamp(1.5rem,2.5vw,1.9rem);
  box-shadow:inset 0 1px 0 rgba(191,227,251,0.14), 0 18px 44px rgba(2,14,22,0.3);
}
.step-icon{
  width:54px; height:54px; margin-bottom:.9rem;
  filter:drop-shadow(0 0 6px rgba(143,210,255,.45));
}
.step h3{
  font-family:var(--font-display); font-weight:600; font-size:1.18rem;
  letter-spacing:-0.01em; color:var(--light-head); margin:0 0 .6rem;
}
.step h3 span{
  display:block; font-family:var(--font-mono); font-weight:500;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--hud); margin-bottom:.55rem;
}
.step p{ color:rgba(214,234,247,0.8); font-size:.97rem; margin:0; }

/* ============================================================================
   PREISE — Tiers + Notizen
   ============================================================================ */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.2vw,1.8rem); align-items:start; }
.tier{
  position:relative;
  background:linear-gradient(165deg, rgba(7,38,57,0.7), rgba(4,27,41,0.55));
  border:1px solid rgba(143,210,255,0.2); border-radius:20px;
  padding:clamp(1.6rem,2.6vw,2rem);
  box-shadow:inset 0 1px 0 rgba(191,227,251,0.14), 0 18px 44px rgba(2,14,22,0.3);
}
.tier[data-featured]{
  border:1.5px solid var(--welle);
  box-shadow:inset 0 1px 0 rgba(191,227,251,0.2), 0 18px 44px rgba(2,14,22,0.3), 0 0 24px rgba(63,169,245,.18);
}
.tier h3{
  font-family:var(--font-display); font-weight:600; font-size:1.2rem;
  letter-spacing:-0.01em; color:var(--light-head); margin:0 0 .6rem;
}
.tier h3 span{
  display:block; font-family:var(--font-mono); font-weight:500;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--hud); margin-bottom:.55rem;
}
.tier > p{ color:rgba(214,234,247,0.8); font-size:.97rem; margin:0; min-height:3.4em; }
.tier-price{
  font-family:var(--font-mono); font-weight:500; font-size:1.25rem; letter-spacing:.02em;
  color:var(--glow); margin:1.2rem 0 1.3rem;
}
.tier-price small{
  display:block; font-weight:400; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(191,227,251,.55); margin-top:.35rem;
}
.tier .btn-tier{
  display:block; text-align:center; font-family:var(--font-display); font-weight:600; font-size:14px;
  text-decoration:none; padding:12px 20px; border-radius:999px;
  color:var(--light-head); border:1.5px solid rgba(143,210,255,.32);
  background:rgba(143,210,255,.06); transition:background .2s ease, border-color .2s ease;
}
.tier .btn-tier:hover{ background:rgba(143,210,255,.14); border-color:rgba(143,210,255,.55); }
.tier[data-featured] .btn-tier{ background:var(--accent); border-color:transparent; color:#fff; }
.tier[data-featured] .btn-tier:hover{ background:var(--accent-hover); }
.tier-badge{
  position:absolute; top:-11px; left:clamp(1.6rem,2.6vw,2rem);
  font-family:var(--font-mono); font-weight:500; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:#04202F; background:var(--welle);
  padding:.35em .8em; border-radius:999px;
}
.pricing-notes{ margin-top:clamp(1.8rem,4vw,2.6rem); max-width:720px; display:grid; gap:.9rem; }
.pricing-notes .rates{ color:rgba(214,234,247,.85); font-size:.99rem; line-height:1.65; }
.pricing-notes .honest{
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  color:var(--light-head);
}
.pricing-notes .funding{
  font-size:.92rem; line-height:1.65; color:rgba(191,227,251,.66);
}

/* ============================================================================
   ÜBER + FOUNDER + DOGFOODING
   ============================================================================ */
.about-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(1.6rem,4vw,3.5rem); align-items:start; }
.about-lead h2{
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.85rem,3.4vw,2.9rem);
  letter-spacing:-0.025em; line-height:1.12; color:var(--light-head); margin:0 0 1.2rem; text-wrap:balance;
}
.about-lead p{ color:rgba(191,227,251,.78); line-height:1.75; margin:0 0 1rem; max-width:52ch; }
.founder{ display:flex; align-items:center; gap:1.2rem; margin-bottom:1.5rem; }
.founder-avatar{
  flex:none; width:clamp(116px,9vw,136px); height:clamp(116px,9vw,136px);
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; overflow:hidden;
  background:linear-gradient(165deg, rgba(191,227,251,.22), rgba(143,210,255,.07));
  border:1px solid rgba(191,227,251,.38);
  box-shadow:inset 0 1px 0 rgba(191,227,251,.32), 0 18px 44px rgba(2,14,22,.4);
}
.founder-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.founder-name{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:1.08rem; letter-spacing:-0.01em; color:var(--light-head);
}
.founder-role{
  display:block; font-family:var(--font-mono); font-weight:400;
  font-size:.78rem; letter-spacing:.05em; color:rgba(191,227,251,.72); margin-top:.35rem;
}
.about-card{
  background:linear-gradient(165deg, rgba(7,38,57,0.7), rgba(4,27,41,0.55));
  border:1px solid rgba(143,210,255,0.2); border-radius:20px;
  padding:clamp(1.6rem,3vw,2rem);
  box-shadow:inset 0 1px 0 rgba(191,227,251,0.14), 0 18px 44px rgba(2,14,22,0.3);
}
.about-card .quiet{ color:rgba(191,227,251,.7); line-height:1.7; margin:0; }
.dogfood{
  margin-top:clamp(1.6rem,4vw,2.4rem);
  background:linear-gradient(165deg, rgba(7,38,57,0.78), rgba(4,27,41,0.6));
  border:1px solid rgba(143,210,255,0.26); border-radius:20px;
  padding:clamp(1.7rem,3vw,2.4rem); max-width:820px;
  box-shadow:inset 0 1px 0 rgba(191,227,251,0.18), 0 24px 60px rgba(2,14,22,0.35);
}
.dogfood h3{
  font-family:var(--font-display); font-weight:600; font-size:1.35rem;
  letter-spacing:-0.015em; color:var(--light-head); margin:0 0 .8rem;
}
.dogfood p{ color:rgba(214,234,247,0.85); font-size:1rem; line-height:1.65; margin:0; }

/* ============================================================================
   FAQ — natives <details>-Accordion
   ============================================================================ */
.faq-list{ display:grid; gap:14px; max-width:820px; }
.faq{
  background:linear-gradient(165deg, rgba(7,38,57,0.78), rgba(4,27,41,0.6));
  border:1px solid rgba(143,210,255,0.26); border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(191,227,251,0.18), 0 18px 44px rgba(2,14,22,0.3);
  overflow:hidden;
}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:1.15rem 1.5rem; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  letter-spacing:-0.01em; color:var(--light-head);
}
.faq summary::marker,
.faq summary::-webkit-details-marker{ display:none; content:""; }
.faq summary:hover{ color:var(--glow); }
.faq .chev{ flex:none; width:20px; height:20px; transition:transform .3s ease; }
@media (prefers-reduced-motion: reduce){ .faq .chev{ transition:none; } }
.faq[open] .chev{ transform:rotate(180deg); }
.faq .faq-body{ padding:0 1.5rem 1.3rem; color:rgba(214,234,247,0.85); font-size:.99rem; line-height:1.6; }
.faq .faq-body a{ color:var(--hud); }

/* ============================================================================
   KONTAKT + FOOTER
   ============================================================================ */
.contact-inner{ text-align:center; max-width:640px; margin-inline:auto; }
.contact-inner h2{
  font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,4vw,3.2rem);
  letter-spacing:-0.03em; line-height:1.08; color:var(--light-head); margin:0 0 1rem; text-wrap:balance;
}
.contact-inner > p{ color:var(--light-body); font-size:1.1rem; line-height:1.6; margin:0 0 2rem; }
.contact-actions{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.mail{
  display:inline-block; font-family:var(--font-mono); font-size:.95rem;
  color:var(--hud); text-decoration:underline; text-underline-offset:4px;
}
.mail:hover{ color:var(--glow); }
.contact-trust{
  margin-top:2.2rem;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  color:rgba(191,227,251,.5);
}
.site-footer{
  background:var(--ground);
  padding:2.5rem 0 3rem;
  border-top:1px solid rgba(143,210,255,.1);
}
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:17px; color:#fff; }
.footer-brand svg{ width:24px; height:24px; }
.footer-copy{ font-family:var(--font-mono); font-size:.78rem; color:rgba(218,237,249,.55); }
.footer-links{ display:flex; gap:1.4rem; }
.footer-links a{
  font-family:var(--font-mono); font-size:.82rem;
  color:rgba(218,237,249,.8); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(143,210,255,.35);
}
.footer-links a:hover{ text-decoration-color:var(--hud); color:#fff; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; text-align:left; }
  .hero .mascot-slot{ order:-1; margin-bottom:1rem; }
  .hero .mascot-slot img{ width:min(64%,260px); }
  .cards, .steps, .tiers, .about-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .stat-grid{ grid-template-columns:1fr; }
}