/* Heia — warm, dark-first brand site. Theme-aware. */
:root{
  --bg:#F7F1E8; --bg2:#F1E8DA; --card:#FFFFFF; --text:#2A2119; --muted:#7A6A58;
  --accent:#C98A4B; --accent-soft:#E9C79C; --lilac:#8B7CB6; --rose:#C97C87; --sage:#6E9470;
  --border:#E8DECF;
  --sh-sm:0 2px 8px rgba(42,33,25,.05);
  --sh-md:0 10px 30px -8px rgba(42,33,25,.13), 0 2px 8px rgba(42,33,25,.04);
  --sh-lg:0 28px 60px -18px rgba(42,33,25,.22), 0 6px 18px rgba(42,33,25,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#161210; --bg2:#1D1712; --card:#231C16; --text:#F2EADF; --muted:#B3A290;
    --accent:#E3B074; --accent-soft:#8A6538; --lilac:#B0A4CE; --rose:#DD9C8E; --sage:#A6C29C;
    --border:#352A20;
    --sh-sm:0 2px 8px rgba(0,0,0,.3);
    --sh-md:0 12px 32px -10px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
    --sh-lg:0 30px 70px -20px rgba(0,0,0,.7), 0 8px 20px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1120px; margin:0 auto; padding:0 22px; position:relative; z-index:1}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--card); padding:10px 16px; border-radius:10px}

/* ── icons ────────────────────────────────────────────────────── */
.i{width:24px; height:24px; flex:0 0 auto; stroke:currentColor; fill:none;
   stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.i-badge{width:46px; height:46px; border-radius:14px; display:flex; align-items:center;
   justify-content:center; background:color-mix(in srgb,var(--accent) 13%, transparent);
   color:var(--accent)}
.i-badge.lilac{background:color-mix(in srgb,var(--lilac) 15%, transparent); color:var(--lilac)}
.i-badge.rose{background:color-mix(in srgb,var(--rose) 15%, transparent); color:var(--rose)}
.i-badge.sage{background:color-mix(in srgb,var(--sage) 16%, transparent); color:var(--sage)}

/* ── animated bloom (mirrors the in-app Logo component) ───────── */
/* Rotation sitzt pro Instanz auf dem Wrapper; die Blütenblatt-Pulsation muss an
   den Quell-Kreisen in <defs> hängen — <use> klont sie samt Animation in den
   Shadow-Tree, den Nachfahren-Selektoren nicht erreichen. */
.bloom-wrap{display:block; animation:bloom-spin 30s linear infinite}
#bloom circle{transform-box:fill-box; transform-origin:center;
  animation:bloom-pulse 3400ms ease-in-out infinite}
#bloom circle:nth-child(1){animation-delay:0ms}
#bloom circle:nth-child(2){animation-delay:500ms}
#bloom circle:nth-child(3){animation-delay:1000ms}
#bloom circle:nth-child(4){animation-delay:1500ms}
#bloom circle:nth-child(5){animation-delay:2000ms}
#bloom circle:nth-child(6){animation-delay:2500ms}
#bloom circle:nth-child(7){animation:bloom-core 3400ms ease-in-out infinite}
@keyframes bloom-spin{to{transform:rotate(360deg)}}
@keyframes bloom-pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.16)}}
@keyframes bloom-core{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.16); opacity:.9}}

/* ── ambient aurora ───────────────────────────────────────────── */
.aura{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.aura span{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5}
.aura .a1{width:520px; height:520px; top:-190px; left:8%;
  background:radial-gradient(circle,var(--accent),transparent 68%); animation:drift1 26s ease-in-out infinite}
.aura .a2{width:430px; height:430px; top:40px; right:2%;
  background:radial-gradient(circle,var(--lilac),transparent 68%); opacity:.34; animation:drift2 32s ease-in-out infinite}
.aura .a3{width:380px; height:380px; bottom:-160px; left:36%;
  background:radial-gradient(circle,var(--rose),transparent 68%); opacity:.28; animation:drift3 29s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(48px,34px) scale(1.09)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-42px,42px) scale(1.11)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(34px,-30px) scale(1.07)}}

/* ── header / nav ─────────────────────────────────────────────── */
header.site{position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.5) blur(14px);
  background:color-mix(in srgb, var(--bg) 84%, transparent); border-bottom:1px solid var(--border)}
header.site .wrap{display:flex; align-items:center; gap:18px; height:68px}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.16rem;
  letter-spacing:-.01em; color:var(--text); flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand svg{width:31px; height:31px; display:block}
nav.main{flex:1; display:flex; gap:2px; overflow-x:auto; scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main a{color:var(--muted); font-weight:600; font-size:.94rem; padding:8px 13px;
  border-radius:10px; white-space:nowrap; transition:color .18s, background .18s}
nav.main a:hover{color:var(--text); background:var(--bg2); text-decoration:none}

/* App Store badge */
.appstore{display:inline-flex; align-items:center; gap:11px; background:var(--text); color:var(--bg);
  padding:11px 20px; border-radius:14px; font-weight:700; line-height:1.1; white-space:nowrap;
  box-shadow:var(--sh-md); transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s}
.appstore:hover{text-decoration:none; transform:translateY(-2px); box-shadow:var(--sh-lg)}
.appstore svg{width:22px; height:22px; fill:currentColor; stroke:none; flex:0 0 auto}
.appstore small{display:block; font-size:.67rem; font-weight:600; opacity:.72; letter-spacing:.02em}
.appstore b{display:block; font-size:1.04rem; letter-spacing:-.01em}
.appstore.sm{padding:9px 15px; border-radius:12px} .appstore.sm b{font-size:.92rem}
.appstore.lg{padding:15px 28px; border-radius:17px} .appstore.lg b{font-size:1.22rem}

/* ── hero ─────────────────────────────────────────────────────── */
.hero{position:relative; text-align:center; padding:78px 0 26px; overflow:hidden}
.hero .bloom-wrap{width:78px; height:78px; margin:0 auto 22px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  border:1px solid var(--border); background:var(--card); color:var(--muted); font-size:.78rem;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; box-shadow:var(--sh-sm)}
.pill .i{width:15px; height:15px}
.pill.live{color:var(--sage); border-color:color-mix(in srgb,var(--sage) 42%, var(--border))}
.pill.live .dot{width:7px; height:7px; border-radius:50%; background:var(--sage);
  animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.82)}}
h1{font-size:clamp(2.15rem,5.3vw,3.55rem); line-height:1.07; letter-spacing:-.028em;
  font-weight:800; max-width:15em; margin:20px auto 0}
h1 .glow-word{background:linear-gradient(96deg,var(--accent),var(--rose) 55%,var(--lilac));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .sub{color:var(--muted); font-size:clamp(1.05rem,2.3vw,1.26rem); margin:22px auto 0; max-width:33em}
.cta{margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; align-items:center}
.trust-line{color:var(--muted); font-size:.9rem; margin-top:18px}
.trust-line b{color:var(--text); font-weight:700}

/* three pillars */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:820px; margin:38px auto 0}
.pillar{background:var(--card); border:1px solid var(--border); border-radius:17px; padding:18px 16px;
  box-shadow:var(--sh-sm); text-align:center; transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s}
.pillar:hover{transform:translateY(-3px); box-shadow:var(--sh-md)}
.pillar .i-badge{width:38px; height:38px; border-radius:12px; margin:0 auto 10px}
.pillar .i{width:20px; height:20px}
.pillar b{display:block; font-size:.97rem; letter-spacing:-.01em}
.pillar span{display:block; color:var(--muted); font-size:.84rem; margin-top:3px}

/* phones */
.phones{display:flex; gap:20px; justify-content:center; padding:40px 0 8px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
.phones::-webkit-scrollbar{display:none}
.phone{flex:0 0 auto; width:234px; scroll-snap-align:center; border-radius:36px; padding:7px;
  background:linear-gradient(160deg,#332d26,#0d0a08); box-shadow:var(--sh-lg);
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.phone img{width:100%; height:auto; display:block; border-radius:30px}
.phones .phone:nth-child(even){transform:translateY(20px)}
.phones .phone:hover{transform:translateY(-6px)}
.phones .phone:nth-child(even):hover{transform:translateY(12px)}

/* ── sections ─────────────────────────────────────────────────── */
section{padding:74px 0; position:relative}
.eyebrow{color:var(--accent); font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  font-size:.79rem; text-align:center}
h2{font-size:clamp(1.7rem,3.6vw,2.4rem); letter-spacing:-.024em; text-align:center;
  margin:11px auto 0; max-width:15em; font-weight:800; line-height:1.16}
.lead{color:var(--muted); text-align:center; max-width:36em; margin:17px auto 0}
.band{background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}

/* ── pain → solution ──────────────────────────────────────────── */
/* Vier Karten: 380px erzwingt 2 Spalten im 1100er-Container → ausgewogenes
   2×2 statt 3+1 mit einzelner Karte in der zweiten Reihe. */
.pains{display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:18px; margin-top:44px}
.pain{background:var(--card); border:1px solid var(--border); border-radius:22px; overflow:hidden;
  box-shadow:var(--sh-sm); transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s}
.pain:hover{transform:translateY(-4px); box-shadow:var(--sh-lg)}
.pain-top{padding:24px 24px 20px; background:color-mix(in srgb,var(--bg2) 60%, transparent)}
/* Deutsche Anführungszeichen als Unicode-Escapes: „ = U+201E, " = U+201C.
   Als rohe Zeichen geschrieben bricht das Literal die CSS-Datei ab. */
.pain-top q{color:var(--muted); font-style:italic; font-size:1.02rem; display:block;
  quotes:"\201E" "\201C"}
.pain-bot{padding:20px 24px 24px; display:flex; gap:14px; align-items:flex-start;
  border-top:1px solid var(--border)}
.pain-bot b{display:block; letter-spacing:-.01em; font-size:1.04rem}
.pain-bot p{color:var(--muted); font-size:.95rem; margin-top:3px}

/* ── feature grid ─────────────────────────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:18px; margin-top:44px}
.feat{background:var(--card); border:1px solid var(--border); border-radius:22px; padding:26px;
  box-shadow:var(--sh-sm); transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s, border-color .28s}
.feat:hover{transform:translateY(-4px); box-shadow:var(--sh-lg);
  border-color:color-mix(in srgb,var(--accent) 34%, var(--border))}
.feat h3{margin:15px 0 6px; font-size:1.13rem; letter-spacing:-.012em}
.feat p{color:var(--muted); font-size:.96rem}

/* ── split rows ───────────────────────────────────────────────── */
.split{display:grid; grid-template-columns:1fr 300px; gap:60px; align-items:center; margin-top:62px}
.split.flip{grid-template-columns:300px 1fr}
.split.flip .split-text{order:2} .split.flip .split-img{order:1}
.split h3{font-size:clamp(1.4rem,2.6vw,1.8rem); letter-spacing:-.022em; line-height:1.18}
.split .kicker{display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-weight:800;
  text-transform:uppercase; letter-spacing:.07em; font-size:.77rem; margin-bottom:11px}
.split .kicker .i{width:17px; height:17px}
.split p{color:var(--muted); margin-top:13px}
.split ul{list-style:none; margin-top:19px; display:flex; flex-direction:column; gap:11px}
.split li{position:relative; padding-left:30px; font-size:.99rem}
.split li .i{position:absolute; left:0; top:3px; width:19px; height:19px; color:var(--sage)}
.split-img .phone{width:100%; margin:0 auto}

/* ── chips ────────────────────────────────────────────────────── */
.chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:36px}
.chip{display:inline-flex; align-items:center; gap:8px; background:var(--card);
  border:1px solid var(--border); border-radius:999px; padding:9px 17px; font-size:.92rem;
  font-weight:600; box-shadow:var(--sh-sm); transition:transform .2s, border-color .2s}
.chip:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 40%, var(--border))}
.chip .i{width:17px; height:17px; color:var(--accent)}

/* ── moments (baby milestones) ────────────────────────────────── */
.moments{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-top:40px}
.moment{background:var(--card); border:1px solid var(--border); border-radius:20px; padding:24px 20px;
  text-align:center; box-shadow:var(--sh-sm); transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s}
.moment:hover{transform:translateY(-4px) rotate(-.6deg); box-shadow:var(--sh-md)}
.moment .i-badge{margin:0 auto 12px}
.moment b{display:block; letter-spacing:-.01em}
.moment span{display:block; color:var(--muted); font-size:.88rem; margin-top:4px}

/* ── personas ─────────────────────────────────────────────────── */
.personas{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:16px; margin-top:42px}
.persona{background:var(--card); border:1px solid var(--border); border-radius:20px; padding:24px;
  box-shadow:var(--sh-sm); transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s}
.persona:hover{transform:translateY(-4px); box-shadow:var(--sh-md)}
.persona h3{font-size:1.04rem; margin:14px 0 6px; letter-spacing:-.01em}
.persona p{color:var(--muted); font-size:.94rem}

/* ── pricing ──────────────────────────────────────────────────── */
.price-box{max-width:660px; margin:42px auto 0; background:var(--card); border:1px solid var(--border);
  border-radius:26px; padding:34px; box-shadow:var(--sh-lg); position:relative; overflow:hidden}
.price-box::before{content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--accent),var(--rose),var(--lilac),var(--sage))}
.price-row{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap}
.price-row h3{font-size:1.3rem; letter-spacing:-.015em}
.price-tag{font-weight:800; font-size:1.9rem; letter-spacing:-.03em;
  background:linear-gradient(96deg,var(--accent),var(--rose));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.price-box ul{list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:11px}
.price-box li{position:relative; padding-left:30px; color:var(--muted)}
.price-box li .i{position:absolute; left:0; top:3px; width:19px; height:19px; color:var(--sage)}
.price-note{margin-top:22px; padding-top:20px; border-top:1px solid var(--border);
  color:var(--muted); font-size:.92rem}

/* ── faq ──────────────────────────────────────────────────────── */
.faq{max-width:780px; margin:42px auto 0; display:flex; flex-direction:column; gap:12px}
details{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:4px 22px;
  box-shadow:var(--sh-sm); transition:border-color .22s, box-shadow .22s}
details[open]{border-color:color-mix(in srgb,var(--accent) 32%, var(--border)); box-shadow:var(--sh-md)}
summary{cursor:pointer; font-weight:700; padding:17px 0; list-style:none; display:flex;
  justify-content:space-between; align-items:center; gap:16px}
summary::-webkit-details-marker{display:none}
summary .i{color:var(--accent); transition:transform .25s cubic-bezier(.2,.8,.3,1)}
details[open] summary .i{transform:rotate(45deg)}
details p{color:var(--muted); padding:0 0 19px}
details p + p{padding-top:11px}

/* ── final cta ────────────────────────────────────────────────── */
.final{text-align:center; background:var(--bg2); border-top:1px solid var(--border); overflow:hidden}
.final .bloom-wrap{width:64px; height:64px; margin:0 auto 20px}

/* ── footer ───────────────────────────────────────────────────── */
footer.site{border-top:1px solid var(--border); padding:48px 0; text-align:center; color:var(--muted)}
footer.site .brand{justify-content:center; margin-bottom:12px}
footer.site .links{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin:14px 0}
footer.site .links a{color:var(--text); font-weight:600}
.copy{font-size:.86rem; margin-top:12px; opacity:.82}

/* ── scroll reveal ────────────────────────────────────────────── */
/* Progressive Enhancement: ohne die von JS gesetzte .js-Klasse bleibt alles
   sichtbar. Sonst wären bei blockiertem/fehlgeschlagenem JS 60+ Elemente
   dauerhaft unsichtbar — die Seite wirkte leer. */
.js .reveal{opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1)}
.js .reveal.in{opacity:1; transform:none}

/* ── legal pages ──────────────────────────────────────────────── */
.legal{max-width:760px; margin:0 auto; padding:40px 22px 90px}
.legal nav{font-size:.92rem; margin-bottom:8px}
.legal h1{font-size:1.7rem; text-align:left; margin:14px 0 4px; max-width:none}
.legal .updated{color:var(--muted); font-size:.9rem; margin-bottom:22px}
.legal h2{font-size:1.08rem; text-align:left; margin:24px 0 6px; max-width:none}
.legal p{font-size:.97rem; white-space:pre-line; color:var(--text)}
.legal hr{border:none; border-top:1px solid var(--border); margin:40px 0}
.legal .en{color:var(--muted); font-size:.85rem}

/* ── responsive ───────────────────────────────────────────────── */
@media (max-width:880px){
  .split, .split.flip{grid-template-columns:1fr; gap:30px; margin-top:52px}
  .split.flip .split-text, .split.flip .split-img{order:initial}
  .split-img{max-width:280px; margin:0 auto}
  h2{max-width:none}
  .pillars{grid-template-columns:1fr; max-width:420px}
}
@media (max-width:640px){
  nav.main{display:none}
  section{padding:58px 0}
  .hero{padding:54px 0 14px}
  .phones .phone:nth-child(even){transform:none}
  .price-box{padding:26px 22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bloom-wrap, #bloom circle, .aura span, .pill.live .dot{animation:none !important}
  .reveal{opacity:1; transform:none; transition:none}
  *{transition-duration:.01ms !important}
}