/* ============================================================================
   Nimo — Landing / Launch page
   "Bubbles" design system, ported from Nimo/DesignSystem/BubbleTheme.swift.
   Soft, rounded, glossy, gradient-driven: five kid-accent gradient pairs, a
   light violet→pink wash, drifting profile bubbles, pill buttons, soft coloured
   shadows (never a hard offset), Bricolage display + Nunito body.
   ========================================================================== */

/* ---- Fonts (self-hosted, OFL 1.1 — same variable TTFs as the iOS app) ---- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-latin.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-latin.woff2") format("woff2");
  font-weight: 200 900; font-display: swap;
}

/* ---- Tokens (values from BubbleTheme.swift) ---- */
:root {
  --wash-1:#F7F1FC; --wash-2:#FDEEF4; --wash-3:#FCEFEC;
  --card:rgba(255,255,255,0.72);

  --ink:#2E2B4E; --body:#56536F; --muted:#6E6B84;   /* muted darkened to clear 4.5:1 (placeholder/consent) */
  --link:#5158D6; --link-hover:#FF4C8B;   /* link darkened to clear 4.5:1 on white */
  --accent-ink:#D93B78;   /* headline accent, >=3:1 large text */
  --danger:var(--danger);       /* form error text/border, >=4.5:1 on white */
  --hairline:rgba(43,42,74,0.10); --hairline-soft:rgba(43,42,74,0.06);

  --bubblegum-a:#FF7CB0; --bubblegum-b:#FF4C8B;
  --tangerine-a:#FFC172; --tangerine-b:#FF9433;
  --lime-a:#B3ED7C;      --lime-b:#74C95C;
  --aqua-a:#7CEDDD;      --aqua-b:#33C2B0;
  --peri-a:#A3ADFF;      --peri-b:#6B72F0;

  --grad-bubblegum:linear-gradient(135deg,var(--bubblegum-a),var(--bubblegum-b));
  --grad-tangerine:linear-gradient(135deg,var(--tangerine-a),var(--tangerine-b));
  --grad-lime:linear-gradient(135deg,var(--lime-a),var(--lime-b));
  --grad-aqua:linear-gradient(135deg,var(--aqua-a),var(--aqua-b));
  --grad-peri:linear-gradient(135deg,var(--peri-a),var(--peri-b));
  --grad-primary:linear-gradient(135deg,var(--peri-a),var(--peri-b));
  --grad-wordmark:linear-gradient(90deg,#FF4C8B,#8A6BF0);
  --grad-bedtime:linear-gradient(135deg,#2A2750,#1B1836);

  --r-card:26px; --r-lg:32px; --r-sm:16px; --r-pill:999px;
  --r-bubble:46% 54% 57% 43% / 43% 47% 53% 57%;

  --shadow-card:0 14px 30px rgba(43,42,74,0.10);
  --shadow-soft:0 8px 20px rgba(43,42,74,0.08);
  --shadow-cta:0 10px 20px rgba(107,114,240,0.35);

  --font-display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;

  --maxw:1080px; --gap:clamp(1rem,3vw,2rem);
}

/* ---- Base ---- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-height:100%;
  color:var(--ink); font-family:var(--font-body);
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased;
  background:var(--wash-1);
}
/* fixed wash as a composited layer (cheaper than background-attachment:fixed,
   which forces a full repaint on every scroll frame on mobile) */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 8% -6%, rgba(163,173,255,0.28), transparent 60%),
    radial-gradient(1000px 720px at 100% 108%, rgba(255,124,176,0.24), transparent 62%),
    linear-gradient(180deg, var(--wash-1) 0%, var(--wash-2) 55%, var(--wash-3) 100%);
}
img { max-width:100%; display:block; }
a { color:inherit; }
::selection { background:rgba(255,76,139,0.22); color:var(--ink); }
:focus-visible { outline:3px solid rgba(108,116,240,0.55); outline-offset:3px; border-radius:6px; }

.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

h1,h2,h3 {
  font-family:var(--font-display); font-weight:800; line-height:1.06;
  letter-spacing:-0.02em; margin:0; color:var(--ink); text-wrap:balance;
  overflow-wrap:break-word;
}
h1 { font-size:clamp(2.4rem,6.2vw,4.2rem); }
h2 { font-size:clamp(1.9rem,4.2vw,2.9rem); }
h3 { font-size:clamp(1.2rem,2.1vw,1.45rem); font-weight:700; letter-spacing:-0.015em; }
p { margin:0 0 1rem; color:var(--body); overflow-wrap:break-word; }

.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gap); }
section { padding-block:clamp(3.5rem,8vw,6rem); position:relative; }

/* ---- Buttons — gradient pill, soft coloured shadow ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.4ch;
  font-family:var(--font-body); font-weight:800; font-size:1rem;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  padding:0.85rem 1.5rem; border:none; border-radius:var(--r-pill);
  background:var(--grad-primary); color:#fff; box-shadow:var(--shadow-cta);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 14px 26px rgba(107,114,240,0.42); filter:saturate(1.05); }
.btn:active { transform:translateY(0) scale(0.97); box-shadow:0 6px 14px rgba(107,114,240,0.4); }
.btn-arrow { width:1.05em; height:1.05em; flex:0 0 auto; transition:transform .15s ease; }
.btn:hover .btn-arrow { transform:translateX(3px); }
.btn--ghost { background:rgba(255,255,255,0.6); color:var(--ink); box-shadow:none; border:1px solid var(--hairline); }
.btn--ghost:hover { background:#fff; transform:translateY(-2px); box-shadow:var(--shadow-soft); filter:none; }
.btn--light { background:#fff; color:var(--link); box-shadow:var(--shadow-soft); }
.btn--light:hover { background:#fff; box-shadow:0 14px 26px rgba(0,0,0,0.18); }

/* ---- Phase toggle: prelaunch (waitlist) vs launched (App Store) ---- */
[data-phase="prelaunch"] .launched-only { display:none !important; }
[data-phase="launched"]  .prelaunch-only { display:none !important; }

/* ============================================================================
   Header
   ========================================================================== */
.site-header {
  position:sticky; top:0; z-index:30;
  border-bottom:1px solid var(--hairline-soft);
  background:rgba(250,246,253,0.72);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
}
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:0.8rem; }
.brand {
  font-family:var(--font-display); font-weight:800; font-size:1.6rem;
  letter-spacing:-0.03em; text-decoration:none; color:var(--ink);
  background:var(--grad-wordmark); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand .dot { -webkit-text-fill-color:initial; color:var(--bubblegum-b); }
.site-nav { display:flex; align-items:center; gap:1.4rem; }
.site-nav a.navlink { font-weight:700; font-size:0.95rem; text-decoration:none; color:var(--ink); transition:color .15s ease; }
.site-nav a.navlink:hover { color:var(--link-hover); }
.site-nav .navlink { display:none; }
@media (min-width:900px) { .site-nav .navlink { display:inline; } }

/* ============================================================================
   Hero — the drifting profile-bubble picker
   ========================================================================== */
.hero { overflow:hidden; text-align:center; padding-top:clamp(3rem,7vw,5.5rem); padding-bottom:clamp(3.5rem,8vw,6rem); }
.hero-inner { position:relative; z-index:2; max-width:750px; margin-inline:auto; }
.hero h1 { margin:0 0 1.15rem; }
.hero h1 .hl { color:var(--accent-ink); }

/* "Wer schaut?" picker label — floats among the bubbles as an app-UI chip */
.picker-tag {
  position:absolute; z-index:5; display:none; align-items:center; gap:0.55ch;
  top:clamp(5rem,9vw,7.5rem); left:clamp(1rem,6vw,8rem);
  padding:0.5rem 1.05rem; border-radius:var(--r-pill);
  background:#fff; border:1px solid rgba(43,42,74,0.08); box-shadow:var(--shadow-card);
  font-family:var(--font-display); font-weight:800; font-size:1rem; letter-spacing:-0.01em;
  color:#2E2B4E; white-space:nowrap;
}
.picker-tag .pt-dot { width:9px; height:9px; border-radius:50%; background:var(--grad-bubblegum); box-shadow:0 0 0 3px rgba(255,124,176,0.28); }
@media (min-width:900px) { .picker-tag { display:inline-flex; } }
.hero-sub { font-size:clamp(1.06rem,1.7vw,1.28rem); color:var(--body); max-width:46ch; margin-inline:auto; }

/* drifting bubbles */
.hero-bubbles { position:absolute; inset:0; z-index:1; pointer-events:none; }
.pbubble {
  position:absolute; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-bubble); background:var(--g); color:#fff;
  font-family:var(--font-display); font-weight:800;
  text-shadow:0 1px 3px rgba(43,42,74,0.28); isolation:isolate;
  animation:floaty var(--dur,9s) ease-in-out var(--delay,0s) infinite alternate;
}
.pbubble::before {
  content:""; position:absolute; top:15%; left:15%; width:40%; height:30%;
  border-radius:50%; background:rgba(255,255,255,0.55); filter:blur(6px); z-index:-1;
}
.pbubble.b1 { width:92px;  height:92px;  top:14%; left:6%;   font-size:2rem;   --delay:-1s;   box-shadow:0 16px 30px rgba(255,76,139,0.32); }
.pbubble.b2 { width:118px; height:118px; top:30%; right:6%;  font-size:2.5rem; --delay:-3.5s; --dur:11s; box-shadow:0 18px 34px rgba(255,148,51,0.30); }
.pbubble.b3 { width:74px;  height:74px;  bottom:16%; left:13%; font-size:1.6rem; --delay:-2.2s; --dur:10s; box-shadow:0 16px 30px rgba(51,194,176,0.30); }
.pbubble.b4 { width:96px;  height:96px;  bottom:9%; right:13%; font-size:2.05rem; --delay:-4.5s; box-shadow:0 16px 30px rgba(116,201,92,0.30); }
.pbubble.b5 { width:60px;  height:60px;  top:9%;  right:26%;  font-size:1.35rem; --delay:-1.5s; --dur:8s;  box-shadow:0 12px 22px rgba(107,114,240,0.30); }
.pbubble.b6 { width:58px;  height:58px;  bottom:30%; left:27%; font-size:1.3rem;  --delay:-5s;   --dur:12s; box-shadow:0 12px 22px rgba(255,76,139,0.28); }
@keyframes floaty {
  0%   { transform:translate(0, 10px) rotate(-6deg); }
  50%  { transform:translate(12px, -16px) rotate(4deg); }
  100% { transform:translate(-8px, -30px) rotate(8deg); }
}
@media (max-width:720px) {
  .hero { padding-top:4.75rem; }   /* reserve a band so bubbles clear the H1 */
  /* bubbles hug the screen edges (partly off-canvas), never over the headline */
  .pbubble.b1 { width:58px; height:58px; font-size:1.3rem; top:0.4rem; left:-20px; }
  .pbubble.b2 { width:66px; height:66px; font-size:1.5rem; top:0.2rem; right:-24px; }
  .pbubble.b3 { width:50px; height:50px; bottom:7%; left:-15px; }
  .pbubble.b4 { width:54px; height:54px; bottom:5%; right:-17px; }
  .pbubble.b5, .pbubble.b6 { display:none; }
}

/* signup form (Kit plain-HTML — no third-party JS) */
.signup { margin-top:1.9rem; max-width:32rem; margin-inline:auto; }
.signup-row { display:flex; flex-wrap:wrap; gap:0.6rem; }
.signup input[type="email"] {
  flex:1 1 12rem; min-width:0; font-family:var(--font-body); font-weight:600; font-size:1rem;
  padding:0.9rem 1.2rem; border:1px solid var(--hairline); border-radius:var(--r-pill);
  background:rgba(255,255,255,0.9); color:var(--ink); box-shadow:var(--shadow-soft);
  transition:box-shadow .15s ease, border-color .15s ease;
}
.signup input[type="email"]::placeholder { color:var(--muted); }
.signup input[type="email"]:focus { outline:none; border-color:rgba(108,116,240,0.6); box-shadow:0 0 0 4px rgba(108,116,240,0.18); }
.signup .btn { flex:0 0 auto; }
.consent { display:flex; gap:0.65rem; align-items:flex-start; margin-top:1rem; min-height:44px; padding-block:3px; font-size:0.84rem; color:var(--muted); line-height:1.5; text-align:left; cursor:pointer; }
.consent input { margin-top:0.1rem; width:20px; height:20px; accent-color:var(--link); flex:0 0 auto; }
.consent.field-bad { color:var(--link-hover); }
.consent.field-bad input { outline:2px solid var(--link-hover); outline-offset:2px; border-radius:4px; }
.consent a { color:var(--link); }
.microline { margin-top:0.9rem; font-size:0.85rem; font-weight:700; color:var(--body); display:flex; flex-wrap:wrap; gap:0.4rem 1.1rem; justify-content:center; }
.microline span { display:inline-flex; align-items:center; gap:0.45ch; }
.mi { width:1.05em; height:1.05em; color:var(--lime-b); flex:0 0 auto; }

/* Inline form validation / feedback — readable chip in every context (>=4.5:1) */
.form-msg:empty { display:none; }
.form-msg:not(:empty) { display:inline-block; margin-top:0.8rem; padding:0.42rem 0.85rem; border-radius:var(--r-sm); font-size:0.85rem; font-weight:800; }
.form-msg.is-error { background:rgba(196,46,106,0.12); color:var(--danger); }
.form-msg.is-busy  { background:var(--card); color:var(--body); }
.cta-final .form-msg.is-error { background:#fff; color:var(--danger); }
.cta-final .form-msg.is-busy  { background:rgba(255,255,255,0.94); color:var(--ink); }
.signup input[type="email"].field-bad { border-color:var(--danger); box-shadow:0 0 0 4px rgba(196,46,106,0.20); }
.signup input[type="email"]:user-invalid { border-color:var(--danger); }

/* App Store badge (launched phase) */
.store-row { display:flex; flex-direction:column; gap:0.7rem; margin-top:1.9rem; align-items:center; }
.store-badge {
  display:inline-flex; align-items:center; gap:0.7rem; text-decoration:none;
  background:#1B1836; color:#fff; padding:0.7rem 1.4rem; border-radius:var(--r-pill);
  box-shadow:var(--shadow-card); transition:transform .15s ease, box-shadow .15s ease;
}
.store-badge:hover { transform:translateY(-2px); box-shadow:0 16px 30px rgba(27,24,54,0.34); }
.store-apple { width:26px; height:26px; }
.store-badge span { display:flex; flex-direction:column; line-height:1.05; text-align:left; }
.store-badge small { font-size:0.75rem; opacity:0.85; }
.store-badge strong { font-size:1.05rem; font-weight:800; }

/* ============================================================================
   Proof — the app at work
   ========================================================================== */
.proof-grid { display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
@media (min-width:900px) { .proof-grid { grid-template-columns:1.02fr 0.98fr; } }
.proof-copy h2 { margin-bottom:1rem; }
.proof-points { list-style:none; padding:0; margin:1.3rem 0 0; display:grid; gap:0.7rem; }
.proof-points li { display:flex; gap:0.7rem; align-items:center; font-weight:700; color:var(--ink); }
.pp { width:22px; height:22px; color:var(--lime-b); flex:0 0 auto; }

/* phone device */
.proof-visual { position:relative; }
.phone {
  position:relative; width:min(280px,74vw); margin-inline:auto; aspect-ratio:9/19;
  background:#fff; border-radius:44px; border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 26px 50px rgba(43,42,74,0.26), 0 6px 14px rgba(43,42,74,0.12); padding:12px;
}
.phone::before { content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:30%; height:8px; border-radius:999px; background:rgba(255,255,255,0.5); z-index:3; }
.phone-screen { width:100%; height:100%; border-radius:34px; overflow:hidden; position:relative; display:flex; }
.feed-media { position:relative; width:100%; height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(165deg,#40356b 0%,#2a2450 55%,#171334 100%); }
.feed-scene { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(2px 2px at 24% 30%, rgba(255,255,255,0.9), transparent 60%),
             radial-gradient(2px 2px at 68% 22%, rgba(255,255,255,0.75), transparent 60%),
             radial-gradient(1.6px 1.6px at 46% 46%, rgba(255,255,255,0.7), transparent 60%),
             radial-gradient(2px 2px at 80% 60%, rgba(255,255,255,0.7), transparent 60%),
             radial-gradient(1.6px 1.6px at 16% 66%, rgba(255,255,255,0.6), transparent 60%); }
.feed-play { width:66px; height:66px; padding:16px; border-radius:50%; background:rgba(255,255,255,0.14); backdrop-filter:blur(2px); box-shadow:0 8px 22px rgba(0,0,0,0.35); }
.feed-caption { position:relative; z-index:2; display:flex; flex-direction:column; gap:0.15rem; padding:1.1rem 1rem 1.3rem;
  background:linear-gradient(180deg, transparent, rgba(15,12,34,0.72) 55%); }
.feed-title { font-family:var(--font-display); font-weight:800; font-size:1rem; color:#fff; }
.feed-sub { font-size:0.78rem; font-weight:700; color:rgba(255,255,255,0.72); }
.feed-dots { position:absolute; top:50%; right:12px; transform:translateY(-50%); z-index:2; display:flex; flex-direction:column; gap:7px; }
.feed-dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.35); }
.feed-dots i.on { background:#fff; box-shadow:0 0 8px rgba(255,255,255,0.7); }
.phone-caption { text-align:center; margin-top:1.1rem; font-size:0.8rem; color:var(--muted); font-weight:700; }

/* ============================================================================
   Journey — how it works (a sequence, not cards)
   ========================================================================== */
.journey-head { max-width:22ch; margin:0 auto clamp(2rem,4vw,3rem); text-align:center; }
.steps { list-style:none; padding:0; margin:0; display:grid; gap:clamp(1.75rem,4vw,2.5rem); position:relative; }
@media (min-width:820px) {
  .steps { grid-template-columns:repeat(3,1fr); }
  .steps::before { content:""; position:absolute; top:36px; left:16%; right:16%; height:0; z-index:0;
    border-top:2px dashed var(--hairline); }
}
.step { text-align:center; position:relative; z-index:1; }
.step-bubble {
  width:72px; height:72px; border-radius:var(--r-bubble); background:var(--g); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:1.05rem;
  position:relative; isolation:isolate; box-shadow:var(--shadow-soft);
}
.step-bubble::before { content:""; position:absolute; top:15%; left:15%; width:40%; height:30%; border-radius:50%; background:rgba(255,255,255,0.5); filter:blur(5px); z-index:-1; }
.step-bubble svg { width:32px; height:32px; }
.step h3 { margin-bottom:0.4rem; }
.step p { margin:0; font-size:0.98rem; max-width:34ch; margin-inline:auto; }

/* ============================================================================
   Features — asymmetric bento (two banners + four tiles)
   ========================================================================== */
.bento-head { max-width:24ch; margin:0 0 clamp(2rem,4vw,3rem); }
.bento { display:grid; grid-template-columns:1fr; gap:var(--gap); }
@media (min-width:720px) { .bento { grid-template-columns:1fr 1fr; } .tile--wide { grid-column:1 / -1; } }
.tile {
  background:var(--card); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.65); border-radius:var(--r-card); box-shadow:var(--shadow-card);
  padding:clamp(1.4rem,3vw,2rem);
}
.tile h3 { margin:0 0 0.35rem; }
.tile p { margin:0; font-size:0.97rem; }
.tile-ic {
  width:54px; height:54px; border-radius:var(--r-bubble); background:var(--g); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:1rem;
  position:relative; isolation:isolate; box-shadow:var(--shadow-soft);
}
.tile-ic::before { content:""; position:absolute; top:16%; left:16%; width:40%; height:30%; border-radius:50%; background:rgba(255,255,255,0.5); filter:blur(5px); z-index:-1; }
.tile-ic svg { width:28px; height:28px; }
@media (min-width:720px) {
  .tile--wide { display:grid; grid-template-columns:auto 1fr; gap:1.3rem; align-items:center; }
  .tile--wide .tile-ic { margin-bottom:0; width:60px; height:60px; }
  .tile--wide .tile-ic svg { width:30px; height:30px; }
}

/* ============================================================================
   Dark band (bedtime gradient) — shared by the safety section
   ========================================================================== */
.band-ink { background:var(--grad-bedtime); color:#EDEBFF; border-radius:var(--r-lg); margin-inline:var(--gap); }
.band-ink .wrap { padding-inline:clamp(1rem,4vw,3rem); }
.band-ink h2, .band-ink h3 { color:#fff; }
.band-ink p { color:#C9C6E8; }
.safety-grid { display:grid; gap:var(--gap); align-items:center; }
@media (min-width:820px) { .safety-grid { grid-template-columns:1fr 1fr; } }
.safety-grid p { max-width:44ch; margin:0; }
.privacy-badges { list-style:none; padding:0; margin:0; display:grid; gap:0.85rem; }
.privacy-badge {
  display:flex; align-items:center; gap:0.9rem; border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-radius:var(--r-pill); box-shadow:var(--shadow-soft); padding:0.8rem 1.25rem;
  font-weight:800; color:#fff;
}
.privacy-badge .chk {
  flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--grad-lime);
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
}
.privacy-badge .chk svg { width:17px; height:17px; }

/* ============================================================================
   Founding creators
   ========================================================================== */
.creator-inner {
  position:relative; overflow:hidden; text-align:center;
  background:var(--grad-bedtime); color:#EDEBFF; border-radius:var(--r-lg);
  padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,4vw,3rem);
}
.creator-inner::after { content:""; position:absolute; inset:auto -12% -50% auto; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,76,139,0.28), transparent 65%); pointer-events:none; }
.creator-ic {
  width:64px; height:64px; border-radius:var(--r-bubble); background:var(--g); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; margin:0 auto 1.3rem;
  position:relative; isolation:isolate; box-shadow:0 16px 30px rgba(0,0,0,0.32);
}
.creator-ic::before { content:""; position:absolute; top:16%; left:16%; width:40%; height:30%; border-radius:50%; background:rgba(255,255,255,0.5); filter:blur(5px); z-index:-1; }
.creator-ic svg { width:30px; height:30px; }
.creator-inner h2 { color:#fff; margin-bottom:0.9rem; position:relative; }
.creator-inner p { color:#C9C6E8; max-width:54ch; margin:0 auto 1.9rem; position:relative; }
.creator-inner .btn { position:relative; }

/* ============================================================================
   FAQ
   ========================================================================== */
.faq-head { text-align:center; margin:0 auto clamp(2rem,4vw,2.75rem); }
.faq { max-width:46rem; margin-inline:auto; }
.faq details {
  border:1px solid rgba(255,255,255,0.65); background:var(--card);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-radius:var(--r-sm); box-shadow:var(--shadow-soft); margin-bottom:0.85rem; overflow:hidden;
}
.faq summary {
  cursor:pointer; list-style:none; padding:1.1rem 1.25rem;
  font-family:var(--font-display); font-weight:700; font-size:1.06rem; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:""; flex:0 0 auto; width:20px; height:20px; transition:transform .2s ease;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235158D6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/contain no-repeat; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details[open] summary { border-bottom:1px solid var(--hairline); }
.faq .faq-body { padding:1rem 1.25rem 1.15rem; }
.faq .faq-body p { margin:0; color:var(--body); }
.faq .faq-body a { color:var(--link); }

/* ============================================================================
   Final CTA (gradient panel)
   ========================================================================== */
.cta-final { background:var(--grad-primary); border-radius:var(--r-lg); margin:0 var(--gap) clamp(2rem,5vw,4rem); overflow:hidden; position:relative; }
.cta-final::before { content:""; position:absolute; inset:-40% -10% auto auto; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.35), transparent 65%); pointer-events:none; }
.cta-final .wrap { text-align:center; position:relative; }
.cta-final h2 { margin-bottom:0.8rem; color:#fff; }
.cta-final p { color:rgba(255,255,255,0.92); max-width:42ch; margin-inline:auto; }
.cta-final .signup { margin-inline:auto; }
.cta-final .signup input[type="email"] { background:#fff; border-color:transparent; }
.cta-final .btn { background:#fff; color:var(--link); box-shadow:0 10px 22px rgba(27,24,54,0.28); }
.cta-final .btn:hover { background:#fff; filter:none; box-shadow:0 14px 26px rgba(27,24,54,0.34); }
.cta-final .consent { color:rgba(255,255,255,0.9); justify-content:center; }
.cta-final .consent a { color:#fff; text-decoration:underline; }
.cta-final .consent input { accent-color:#fff; }
.cta-final .store-badge { background:#fff; color:#1B1836; }
.cta-final .store-badge small { opacity:0.7; }

/* ============================================================================
   Footer
   ========================================================================== */
.site-footer { background:var(--grad-bedtime); color:#C9C6E8; padding-block:2.75rem; }
.site-footer .wrap { display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; }
.site-footer a { color:#EDEBFF; text-decoration:none; font-weight:700; }
.site-footer a:hover { color:var(--bubblegum-a); }
.site-footer .foot-links { display:flex; gap:1.5rem; flex-wrap:wrap; }
.site-footer .brand { color:#fff; -webkit-text-fill-color:initial; background:none; }
.site-footer .brand .dot { color:var(--bubblegum-a); }

/* ---- Legal pages (Impressum / Datenschutz) ---- */
.legal { padding-block:clamp(2.5rem,6vw,4rem); }
.legal .wrap { max-width:780px; }
.legal h1 { font-size:clamp(2rem,5vw,3rem); margin-bottom:1.5rem; }
.legal h2 { font-size:clamp(1.3rem,3vw,1.7rem); margin:2rem 0 0.6rem; }
.legal p, .legal li { color:var(--body); }
.legal a { color:var(--link); }
.legal .ph { background:rgba(255,193,114,0.28); border-bottom:2px dashed var(--tangerine-b); padding:0 0.25em; border-radius:4px; font-weight:700; color:var(--ink); }
.legal .note { border:1px solid rgba(255,255,255,0.65); background:var(--card); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-radius:var(--r-sm); box-shadow:var(--shadow-soft); padding:1rem 1.25rem; margin:1.5rem 0; font-size:0.95rem; }
.back-link { display:inline-block; margin-top:2rem; font-weight:800; text-decoration:none; color:var(--link); }
.back-link:hover { color:var(--link-hover); }

/* ---- Confirmation / thank-you (danke.html) ---- */
.confirm { padding-block:clamp(3.5rem,10vw,7rem); }
.confirm .wrap { max-width:620px; text-align:center; }
.confirm h1 { margin-bottom:1.1rem; }
.confirm .lead { font-size:clamp(1.05rem,1.8vw,1.25rem); color:var(--body); margin-bottom:1.75rem; }
.confirm .tip { border:1px solid rgba(255,255,255,0.65); background:var(--card); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-radius:var(--r-card); box-shadow:var(--shadow-soft); padding:1.15rem 1.35rem; text-align:left; font-size:0.95rem; margin:0 auto 2rem; }
.confirm .tip strong { color:var(--ink); }
.confirm .steps-inline { list-style:none; counter-reset:c; padding:0; margin:0 auto 2rem; max-width:460px; text-align:left; display:grid; gap:0.85rem; }
.confirm .steps-inline li { counter-increment:c; display:flex; gap:0.85rem; align-items:center; color:var(--body); }
.confirm .steps-inline li::before { content:counter(c); flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; color:#fff; background:var(--grad-primary); box-shadow:0 8px 16px rgba(107,114,240,0.4); }
.confirm .share-row { display:flex; gap:0.6rem; justify-content:center; flex-wrap:wrap; margin:0 0 2rem; }

/* ---- Dark mode (bedtime-toned) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#F1EFFF; --body:#C7C4E0; --muted:#9A97B8;
    --card:rgba(58,55,92,0.55); --hairline:rgba(255,255,255,0.12); --hairline-soft:rgba(255,255,255,0.08);
  }
  body { background:#1B1836; }
  body::before {
    background:
      radial-gradient(1100px 700px at 8% -6%, rgba(107,114,240,0.30), transparent 60%),
      radial-gradient(1000px 720px at 100% 108%, rgba(255,76,139,0.22), transparent 62%),
      linear-gradient(180deg, #211E3F 0%, #1B1836 60%, #191631 100%);
  }
  .site-header { background:rgba(27,24,54,0.72); }
  .btn--ghost { background:rgba(255,255,255,0.08); color:var(--ink); }
  .btn--ghost:hover { background:rgba(255,255,255,0.14); }
  .signup input[type="email"] { background:rgba(30,27,58,0.85); color:var(--ink); }
  .tile { border-color:rgba(255,255,255,0.10); }
  .faq details { border-color:rgba(255,255,255,0.10); }
  .cta-final .btn, .cta-final .store-badge { color:var(--link); }
  .phone-caption { color:var(--muted); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .btn, .btn-arrow, .btn:hover, .tile, .store-badge { transition:none; }
  .pbubble { animation:none; }
}