/* ============================================================================
   Luna – Site styles (Richtung A: "One night, scrolled")
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(15px, 1vw + 12px, 17px);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Fixes App-Nacht-Material (LunaMaterialBackground): radiale Luna-Card-Bühne
   + diagonale Tönung + Vignette. Keine Tageszeit, keine Scroll-Verläufe. */
#sky {
  position: fixed; inset: 0; z-index: -4;
  background:
    /* EINGELOCKT: James' #tune-Endstand 15.8.26 (Tuner danach ausgebaut) */
    /* deepen – Navy-Schleier "Buch-Innenseite" (0.32) */
    linear-gradient(rgba(10,18,38,0.32), rgba(10,18,38,0.32)),
    /* boden – Boden-Schatten (1.1 × 0.16) */
    linear-gradient(rgba(0,0,0,0) 55%, rgba(0,0,0,0.176) 100%),
    /* helligkeit – globaler Lift (+0.02) */
    linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.02)),
    /* lack – Lack-Schein (0.15 @ 67/44, Grösse 20%) */
    radial-gradient(20% 20% at 67% 44%, rgba(255,255,255,0.0083) 0%, rgba(255,255,255,0.0027) 30%, rgba(255,255,255,0.0006) 70%, rgba(255,255,255,0) 100%),
    /* einfall – kühler Lichteinfall (0.4 @ 29/32) */
    radial-gradient(38% 38% at 29% 32%, rgba(200,216,240,0.028) 0%, rgba(170,187,216,0.010) 35%, rgba(255,255,255,0) 70%),
    /* wölbung – obere Mitte hell, Rand tief (0.3) */
    radial-gradient(85% 85% at 50% 28%, rgba(255,255,255,0.0165) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.042) 100%),
    /* mitte – radiales Zentrum-Licht (+0.65 @ 50/48, Grösse 20%) */
    radial-gradient(20% 20% at 50% 48%, rgba(255,255,255,0.0247) 0%, rgba(255,255,255,0.0065) 45%, rgba(255,255,255,0) 78%),
    /* Bühne: Grösse 0.5, Zentrum -40%, Mitte-Stop 20% */
    radial-gradient(68% 53% at 50% -40%, var(--ground-top-2) 0%, var(--ground-mid-2) 20%, var(--ground-deep-2) 100%);
  background-color: var(--ground-deep-2);
}
/* Gravur-Wellen (App-Material, Seed 8317) – von sky.js auf Canvas gezeichnet */
#waves { position: fixed; inset: 0; z-index: -3; pointer-events: none; opacity: 0; transition: opacity 0.9s var(--ease-out); }
#sky::after {   /* Rand-Vignette (rand=3.0) */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(125% 95% at 50% 45%, transparent 52%, rgba(0,0,0,1) 100%);
}
/* Korn-Overlay (LCG-Noise-Tile) – feine Textur wie im App-Material.
   0.65 → 1.00 (James' #tune-Endstand 15.8. nachmittags) */
#grain {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 1;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
#stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity 1.2s var(--ease-out); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(212,184,114,0.28); color: var(--pure-white); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

/* --- Layout helpers --- */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }

/* --- Type primitives --- */
.eyebrow {
  font-family: var(--font-logo); font-weight: 400;
  font-size: var(--t-eyebrow); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--eyebrow-cream); opacity: 0.72; margin: 0 0 1.4em;
}
.display { font-family: var(--font-display); font-weight: 400; line-height: 1.08;
  font-size: var(--t-display); letter-spacing: -0.01em; color: var(--header-cream); margin: 0; }
.poetic { font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: var(--t-poetic); line-height: 1.4; color: var(--pearl); }
.lead { font-family: var(--font-display); font-weight: 300; font-size: var(--t-lead); line-height: 1.7; color: var(--ink-soft); max-width: 46ch; }
.lower { text-transform: lowercase; }

/* ============================================================================
   Wordmark (rekonstruiert aus LunaWordmark.swift)
   Aussenkreis r=42 @(60,60); Innen-Ellipse rx=25.9 ry=42 → Sichel-Rechtsseite.
   Geteilt in Top-/Bottom-Spitze (tipFraction 0.363 der Höhe 2.90em), "LUNA"
   (Jost Light, letter-spacing 0.40em) im Spalt. currentColor → hell/dunkel.
   ============================================================================ */
.wordmark {
  display: inline-flex; flex-direction: column; align-items: center;
  line-height: 1; user-select: none;
  --wm: 30px;                 /* Basisgröße; per font-size/--wm überschreibbar */
}
/* Echte App-Wordmark (LunaWordmark.swift): dünne senkrechte Sichel, oben+unten
   gespalten, "LUNA" (Jost Light) sitzt im Spalt. Farbe warmOffWhite, flach. */
.wordmark__mark { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.wordmark__cr {
  display: block; width: calc(var(--wm) * 1.45); height: auto;
  pointer-events: none;
  filter: drop-shadow(0 1px 0.5px rgba(0,0,0,0.30));
}
/* overflow hidden = jede Hälfte zeigt NUR ihren Spitzen-Ausschnitt (App:
   .clipped()); visible zeichnete die VOLLE Sichel aus beiden Hälften → Doppelbild. */
.wordmark__cr svg { width: 100%; height: auto; display: block; overflow: hidden; }
.wordmark .cr { fill: none; stroke: var(--off-white); stroke-width: 1.16; stroke-linecap: butt; stroke-linejoin: round; }
.wordmark__cr--top { margin-bottom: calc(var(--wm) * -0.24); }  /* topCrescentGap */
.wordmark__cr--bot { margin-top:    calc(var(--wm) * -0.24); }  /* bottomCrescentGap */
.wordmark__word {                 /* Jost Light, warmOffWhite, letterSpacing 0.40 */
  position: relative; z-index: 1;
  font-family: var(--font-logo); font-weight: 300;
  font-size: var(--wm); letter-spacing: 0.40em; padding-left: 0.40em;
  color: var(--off-white); -webkit-text-fill-color: var(--off-white); background: none;
}
.wordmark__sub {                  /* "sleep journal" – Spectral Italic, warm, ruhig */
  font-family: var(--font-display); font-style: italic; font-weight: 300; text-transform: none;
  font-size: calc(var(--wm) * 0.30); letter-spacing: 0.24em; padding-left: 0.24em;
  color: rgba(244,241,234,0.70); -webkit-text-fill-color: rgba(244,241,234,0.70);
  background: none; margin-top: calc(var(--wm) * 0.42);
}

/* ============================================================================
   Hero-Lockup — EINGELOCKT (⚙ logo-Tuner 15.8.26, James: gr 49 · metall an ·
   hell 0.70 · kon 0.50 · band 0.46 · wink 30° · ink 1.00 · kante 1.00/0.00 ·
   schatt 1.00/0.20/0.30 · sichel b 1.49 x −0.83 st 0.37 gap −0.07 · sp 0.29 ·
   gew 400 · sub metall 1.00/0.30/0.61). Der Splash-Look der App: Banding-
   Metall pro Glyph, Druck-Kopie + Prägekante + weicher Schatten als
   drop-shadow-Kette, Sichel-Spitzen fluchten auf EINER Sichel. Längen in
   var(--wm)-Faktoren (Ref-Einheit = wm/10.5). Untertitel-Laufweite wird von
   logo.js berechnet (Port von LogoSubtitle.tracking — Tinten-Breiten).
   Als Klasse .wordmark--metal überall einsetzbar (15.8.: Hero, Footer,
   Legal-Logos); der Untertitel bleibt Hero-exklusiv.
   ============================================================================ */
.wordmark--metal .wordmark__mark {
  filter: drop-shadow(0 calc(var(--wm) * 0.0295) 0 rgba(8,12,22,1))
          drop-shadow(0 calc(var(--wm) * 0.0295) calc(var(--wm) * 0.0143) rgba(10,14,24,1))
          drop-shadow(0 calc(var(--wm) * 0.0286) calc(var(--wm) * 0.0190) rgba(0,0,0,1));
}
.wordmark--metal .wordmark__word { font-weight: 400; letter-spacing: 0.29em; padding-left: 0.29em; }
.wordmark--metal .wm-g {
  background: linear-gradient(150deg, #919191 0%, #868686 30%, #6D6D6D 46%,
                              #8F8F8F 55%, #7D7D7D 78%, #717171 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wordmark--metal .wordmark__cr {
  width: calc(var(--wm) * 1.49);
  transform: translateX(calc(var(--wm) * -0.079));   /* x −0.83 Ref */
  filter: none;                                      /* Relief kommt vom Mark-Filter */
}
.wordmark--metal .wordmark__cr--top { margin-bottom: calc(var(--wm) * -0.07); }
.wordmark--metal .wordmark__cr--bot { margin-top:    calc(var(--wm) * -0.07); }
.wordmark--metal .cr { stroke: url(#lunaMetal); stroke-width: 1.73; }
.wordmark--metal .wordmark__sub {
  font-family: var(--font-logo); font-style: normal; font-weight: 400;
  text-transform: uppercase;
  font-size: calc(var(--wm) * 0.30); margin-top: calc(var(--wm) * 0.61);
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 calc(var(--wm) * 0.00886) 0 rgba(8,12,22,1))
          drop-shadow(0 calc(var(--wm) * 0.00886) calc(var(--wm) * 0.00429) rgba(10,14,24,1))
          drop-shadow(0 calc(var(--wm) * 0.00857) calc(var(--wm) * 0.00571) rgba(0,0,0,1));
}

/* ============================================================================
   Buttons (GlassPop-Feel)
   ============================================================================ */
.btn {
  font-family: var(--font-logo); font-weight: 500; font-size: 0.94rem;
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.85em 1.6em; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid transparent; letter-spacing: 0.04em;
  transition: transform var(--dur-fast) var(--ease-glass),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out);
}
.btn--gold { background: #CBB47E; color: #241c08; } /* --gold leicht entsättigt Richtung Wordmark */
.btn--gold:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn--gold:active { transform: scale(0.97); }
.btn--ghost { background: rgba(244,241,234,0.04); border-color: var(--hairline-strong); color: var(--off-white); }
.btn--ghost:hover { background: rgba(244,241,234,0.09); transform: translateY(-1px); }
.btn--ghost:active { transform: scale(0.97); }
.btn--quiet { padding: 0.4em 0; background: none; color: var(--muted-blue); }
.btn--quiet:hover { color: var(--off-white); }

/* ============================================================================
   Header
   ============================================================================ */
.site-header {
  position: fixed; top: 0; inset-inline: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(14px, 2vw, 22px) var(--gutter);
  transition: background var(--dur) var(--ease-out), backdrop-filter var(--dur) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(6,16,30,0.55);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--hairline);
}
.site-header .wordmark { --wm: 17px; }
.site-header__nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav-link { font-size: 0.9rem; color: var(--muted-blue); transition: color var(--dur-fast); }
.nav-link:hover { color: var(--off-white); }
@media (max-width: 640px){ .nav-link--read { display: none; } }

/* ============================================================================
   Hero
   ============================================================================ */
.hero {
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: clamp(140px, 20vh, 200px) var(--gutter) clamp(80px, 12vh, 140px);
  position: relative;
}
.hero__moon { margin-bottom: clamp(24px, 4vh, 44px); }
/* Masthead: Sichel+LUNA klein, oben am Viewport-Rand verankert; Claim allein
   im Zentrum. "SLEEP JOURNAL"-Sub auf dieser Grösse unleserlich → aus.
   (Logo-Endstand gr 49 bleibt für andere Verwendungen dokumentiert.) */
.hero__wordmark { --wm: 32px;
  position: absolute; top: clamp(40px, 8vh, 76px); left: 50%; translate: -50% 0; }
.hero__wordmark .wordmark__sub { display: none; }
.hero__line {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--t-hero); line-height: 1.12; color: var(--header-cream);
  margin: 0; max-width: 16ch; text-transform: lowercase;
}
.hero__sub { font-family: var(--font-display); font-weight: 300; font-size: var(--t-lead); color: var(--ink-soft); margin: 1.1em auto 0; max-width: 44ch; }
/* Feste Umbrüche nur, wo die Zeilen sicher passen; schmal → natürlicher Fluss */
@media (max-width: 480px){ .hero__sub-br { display: none; } .hero__sub { max-width: 34ch; } }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: clamp(30px, 5vh, 48px); }
.hero__scrollcue {
  position: absolute; bottom: clamp(20px, 4vh, 40px); left: 50%; translate: -50% 0;
  font-family: var(--font-logo); font-size: 0.62rem; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--off-white); opacity: 0.45;
}
.hero__scrollcue::after {
  content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0;
  background: linear-gradient(var(--off-white), transparent);
  animation: cue var(--pulse) var(--ease-out) infinite;
}
@keyframes cue { 0%,100%{ opacity:.2; transform: scaleY(.7);} 50%{ opacity:.7; transform: scaleY(1);} }

/* --- Sky layer extras (driftender Mond-Schein + Sterne) --- */
#skymoon {
  position: fixed; top: 0; left: 0; width: 46vmin; height: 46vmin; z-index: -1;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(232,228,217,0.5) 0%, rgba(232,228,217,0.16) 32%, rgba(232,228,217,0) 66%);
  transform: translate(-50%,-50%);
}
.star { position: absolute; border-radius: 50%; background: #fff; opacity: var(--o, 0.4);
  animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%,100%{ opacity: calc(var(--o) * 0.35); } 50%{ opacity: var(--o); } }

/* --- Mountain ridge horizon (der Hausberg der App, MountainPalette) --- */
#ridge {
  position: fixed; left: -40px; right: -40px; bottom: 0; z-index: -1;
  height: clamp(88px, 15vh, 180px); pointer-events: none; opacity: 1;
}
#ridge svg { width: 100%; height: 100%; display: block; }
#ridge .far  { fill: url(#ridgeFar); opacity: 0.75; }   /* MountainPalette far, gradient */
#ridge .near { fill: var(--mtn-near); }                 /* #16233D solid, near */

/* --- The breathing crescent (hero + connective tissue) --- */
.moon { display: inline-block; will-change: transform, filter;
  translate: var(--px, 0) var(--py, 0); transition: translate 0.3s var(--ease-out); }
.moon svg { display: block; overflow: visible; width: 100%; height: auto; }
.hero__moon .moon { width: clamp(58px, 9vw, 94px); }
.moon .disc { fill: var(--pearl); }
.moon .shadow { fill: var(--bg); }
.moon.is-breathing { animation: breathe var(--pulse) ease-in-out infinite; }
@keyframes breathe {
  0%,100% { transform: scale(1);   filter: drop-shadow(0 0 14px rgba(232,228,217,0.18)); }
  50%     { transform: scale(1.035);filter: drop-shadow(0 0 26px rgba(232,228,217,0.34)); }
}

/* ============================================================================
   Generic prose section (intro / "what luna is")
   ============================================================================ */
.statement { text-align: center; }
.statement .display { max-width: 20ch; margin-inline: auto; }
.statement .lead { margin: 1.4em auto 0; }

/* ============================================================================
   Feature spreads
   ============================================================================ */
.spread {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px);
  align-items: center;
}
.spread + .spread { margin-top: clamp(90px, 16vh, 200px); }
.spread--flip .spread__media { order: 2; }
.spread__body { max-width: 42ch; }
.spread__title { font-family: var(--font-display); font-weight: 400; font-size: var(--t-display);
  line-height: 1.1; color: var(--header-cream); margin: 0 0 0.5em; }
.spread__poetic { font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: var(--t-poetic); color: var(--gold); margin: 0 0 1em; text-transform: lowercase; }
.spread__text { font-family: var(--font-display); font-weight: 300; color: var(--ink-soft); }
.spread__media { display: flex; justify-content: center; }

@media (max-width: 820px){
  .spread { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .spread--flip .spread__media { order: 0; }
  .spread__body { max-width: 46ch; margin-inline: auto; }
  .spread__poetic, .spread__text { margin-inline: auto; }
}

/* ============================================================================
   Device frame + phone mockups (HTML/CSS, echte Tokens)
   ============================================================================ */
.device {
  --dw: clamp(232px, 29vw, 292px);
  width: var(--dw); aspect-ratio: 9 / 19.5;
  border-radius: 44px; padding: calc(var(--dw) * 0.024);   /* Rand = 2,4 % der Breite (iPhone-treu, frontal) */
  /* Gleichmässig helles Titan – flach, keine Hell/Dunkel-Modellierung. */
  background: #747a84;
  box-shadow:
    0 16px 34px -20px rgba(0,0,0,0.45),           /* minimaler weicher Schatten */
    0 0 2px 0.5px rgba(0,0,0,0.35),               /* weicher Aussen-Rand-Schatten – Kante tritt zurück */
    inset 0 0 3px rgba(0,0,0,0.24),               /* gleichmässiger Rand-Schatten innen */
    inset 0 0 0 1px rgba(255,255,255,0.09);       /* feine Innenkante */
  position: relative; will-change: transform;
}
.device::before {  /* dynamic island */
  content: ""; position: absolute; top: 17px; left: 50%; translate: -50% 0;
  width: 25.5%; height: 19px; border-radius: 999px; background: #05070c; z-index: 5;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
}
.device::after {   /* Seitentasten: Action + Lautstärke links, Power rechts (dezent) */
  content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; right: -1.5px;
  pointer-events: none; z-index: 2;
  --btn: linear-gradient(#7f858f, #7f858f);
  --seam: linear-gradient(#666b74, #666b74);       /* feine Antennenlinie */
  background:
    var(--btn)  0    16%   / 3px 17px no-repeat,   /* Action */
    var(--btn)  0    24.5% / 3px 36px no-repeat,   /* Vol + */
    var(--btn)  0    32.5% / 3px 36px no-repeat,   /* Vol − */
    var(--btn)  100% 26.5% / 3px 56px no-repeat,   /* Power */
    var(--seam) 100% 8.5%  / 8px 1.5px no-repeat,  /* Antenne rechts oben 1 */
    var(--seam) 100% 12%   / 8px 1.5px no-repeat,  /* Antenne rechts oben 2 */
    var(--seam) 0    8.5%  / 8px 1.5px no-repeat,  /* Antenne links oben 1 */
    var(--seam) 0    12%   / 8px 1.5px no-repeat,  /* Antenne links oben 2 */
    var(--seam) 100% 88%   / 8px 1.5px no-repeat,  /* Antenne rechts unten */
    var(--seam) 0    88%   / 8px 1.5px no-repeat;  /* Antenne links unten */
  filter: drop-shadow(0 0 0.5px rgba(0,0,0,0.3));
}
.device__screen {
  width: 100%; height: 100%; border-radius: calc(44px - var(--dw) * 0.024); overflow: hidden;   /* konzentrisch */
  position: relative; display: flex; flex-direction: column; z-index: 1;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--ground-top), var(--ground-mid) 45%, var(--ground-deep) 100%);
  box-shadow: 0 0 0 1.5px #05070d;   /* dünner, gleichmässiger schwarzer Bezel */
}
.device__screen::after {   /* nur feine, gleichmässige Glaskante – keine Reflexion */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.device__shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.scr { padding: 40px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.scr__eyebrow { font-family: var(--font-logo); font-size: 8px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--eyebrow-cream); opacity: 0.7; }
.scr__title { font-family: var(--font-display); font-size: 20px; color: var(--header-cream); margin: 0; }
.scr__sub  { font-family: var(--font-display); font-style: italic; font-size: 10px; color: var(--muted-blue); }

/* Sleep-Log-Screen (App-Sleep-Log nachgebaut) */
.scr--log { gap: 9px; padding: 38px 15px 14px; }
.log-head { text-align: center; margin-bottom: 4px; }
.log-head__title { font-family: var(--font-display); font-size: 21px; color: var(--header-cream); line-height: 1; }
.log-head__eyebrow { font-family: var(--font-logo); font-weight: 500; font-size: 8px;
  letter-spacing: 0.30em; text-transform: uppercase; color: var(--gold); opacity: 0.85; margin-top: 5px; }
.log-week { font-family: var(--font-logo); font-weight: 500; font-size: 7.5px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--eyebrow-cream); opacity: 0.50; margin-top: 3px; }
.log-prompt { display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-style: italic; font-size: 13px; color: rgba(244,241,234,0.62);
  padding: 7px 4px; border-bottom: 1px solid rgba(244,241,234,0.06); }
.log-prompt__dot { flex: none; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(244,241,234,0.30); }
.log-entry { display: flex; align-items: center; gap: 8px; padding: 8px 4px 2px;
  font-family: var(--font-ui); font-size: 10.5px; color: var(--off-white); }
.log-entry__day { color: var(--off-white); min-width: 22px; }
.log-entry__t { color: var(--muted-blue); font-variant-numeric: tabular-nums; }
.log-bar { flex: 1; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(212,184,114,0.25), var(--gold) 45%, var(--gold) 55%, rgba(212,184,114,0.25)); }
.log-entry__dur { font-family: var(--font-display); font-size: 12px; color: var(--pearl);
  text-align: right; padding-right: 4px; margin-top: -1px; }

/* card inside a screen */
.mini-card {
  background: rgba(244,241,234,0.045); border: 1px solid var(--hairline);
  border-radius: 18px; padding: 13px 14px;
}
.mini-card__head { display: flex; justify-content: space-between; align-items: baseline; }
.mini-card__day { font-family: var(--font-display); font-size: 14px; color: var(--off-white); }
.mini-card__score { font-family: var(--font-display); font-weight: 300; font-size: 30px;
  line-height: 1; color: var(--pure-white); }
.mini-card__score sup { font-size: 11px; color: var(--muted-blue); font-weight: 400; }
.mini-row { display: flex; justify-content: space-between; margin-top: 10px;
  font-family: var(--font-ui); font-size: 11px; }
.mini-row span:first-child { color: var(--hint-blue); }
.mini-row span:last-child { color: var(--off-white); }
.mini-note { font-family: var(--font-display); font-style: italic; font-size: 11px;
  color: var(--muted-blue); margin-top: 10px; line-height: 1.4; }

/* two-crescent buddy tile */
.buddytile { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px 0; }
.buddytile .moon { width: 36px; filter: drop-shadow(0 0 10px rgba(232,228,217,0.25)); }
.buddytile .moon--gold { filter: drop-shadow(0 0 12px rgba(232,201,106,0.4)); }
.buddytile .moon--gold .disc { fill: var(--knot-gold); }
.pill-goodnight {
  margin-top: 6px; text-align: center; font-family: var(--font-display); font-style: italic;
  font-size: 12px; color: var(--pearl); background: rgba(212,184,114,0.10);
  border: 1px solid rgba(212,184,114,0.22); border-radius: 999px; padding: 9px 12px;
}

/* tiny two-line chart */
.chart { position: relative; height: 96px; margin-top: 6px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart .band { fill: rgba(184,200,220,0.10); }
.chart .l-bed { fill: none; stroke: var(--pearl); stroke-width: 2; stroke-linecap: round; }
.chart .l-wake{ fill: none; stroke: var(--knot-gold); stroke-width: 2; stroke-linecap: round; }
.chart .dot { fill: var(--knot-gold); }
.chart__axis { display: flex; justify-content: space-between; margin-top: 6px;
  font-family: var(--font-logo); font-size: 7px; letter-spacing: 0.1em; color: var(--axis-blue); }

/* honest – closing statement (kein Device, zentriertes Kolophon) */
.honest { text-align: center; margin-top: clamp(130px, 24vh, 300px); }
.honest__lock { display: inline-block; width: 30px; height: 30px; color: var(--gold); opacity: 0.85;
  margin-bottom: 28px; filter: drop-shadow(0 0 12px rgba(212,184,114,0.35)); }
.honest__lock svg { width: 100%; height: 100%; display: block; }
.honest__title { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--t-display) * 1.12);
  line-height: 1.1; color: var(--header-cream); margin: 0 0 0.5em; }
.honest__poetic { font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: var(--t-poetic); color: var(--gold); margin: 0 0 1.2em; text-transform: lowercase; }
.honest__text { font-family: var(--font-display); font-weight: 300; color: var(--ink-soft);
  max-width: 34rem; margin-inline: auto; }
.honest__fine { font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: calc(var(--t-poetic) * 0.92); color: var(--ink-soft); opacity: 0.7; margin: 2.6em 0 0; }

/* ============================================================================
   CTA – download (App Store badge)
   ============================================================================ */
.cta { text-align: center; }
.cta .display { margin-bottom: clamp(30px, 5vh, 48px); }
.appstore-badge { display: inline-block; line-height: 0;
  transition: transform var(--dur-fast) var(--ease-glass), filter var(--dur-fast) var(--ease-out); }
.appstore-badge img { width: 180px; height: auto; display: block; }
.appstore-badge:hover { transform: translateY(-1px); filter: brightness(1.12); }
.appstore-badge:active { transform: scale(0.97); }

/* ============================================================================
   Core beliefs
   ============================================================================ */
.beliefs { text-align: center; position: relative; }
.statement { position: relative; }
.belief { padding-block: clamp(40px, 10vh, 90px); }
.belief__n { font-family: var(--font-logo); font-size: var(--t-eyebrow); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold); opacity: 0.8; }
.belief__line { font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: var(--t-belief); line-height: 1.2; color: var(--header-cream);
  margin: 0.6em auto 0; max-width: 18ch; text-transform: lowercase; }
.belief__gloss { color: var(--ink-soft); margin: 1em auto 0; max-width: 40ch; font-size: 0.96rem; }

/* ============================================================================
   Social proof – margin notes
   ============================================================================ */
.notes { position: relative; }
.notes__grid { display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; gap: clamp(24px, 4vw, 56px); margin-inline: auto; }
.note { text-align: center; }
.note__quote { font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; color: var(--pearl);
  text-transform: lowercase; }
.note__quote::before { content: "\201C"; }
.note__quote::after  { content: "\201D"; }
.note__by { font-family: var(--font-logo); font-size: 0.68rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted-blue); margin-top: 1.1em;
  display: flex; align-items: center; justify-content: center; gap: 0.7em; }
.note__by::before { content: ""; width: 18px; height: 1px; background: var(--gold); opacity: 0.6; flex: none; }
.notes__grid > .note:not(:first-child) .note__by { }
.note__ph { font-size: 0.6rem; letter-spacing: 0.14em; color: var(--nudge-orange);
  border: 1px solid rgba(232,168,90,0.4); border-radius: 999px; padding: 0.15em 0.6em; opacity: 0.8; }
@media (max-width: 820px){ .note__by { justify-content: center; } }
.notes__disclaimer { text-align: center; margin-top: clamp(40px, 7vh, 72px);
  font-size: 0.8rem; color: var(--hint-blue); font-style: italic; }
@media (max-width: 820px){ .notes__grid { grid-template-columns: 1fr; gap: 34px; text-align: center; } }

/* ============================================================================
   CTA / dawn
   ============================================================================ */
.cta { text-align: center; }
.cta .wordmark { --wm: clamp(26px, 4vw, 38px); margin-bottom: clamp(24px,4vh,40px); }
.cta__line { font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: var(--t-display); color: var(--header-cream); text-transform: lowercase; margin: 0 0 1.5em; }
/* App-Store-Badge im klassischen Stil (schwarz + feine Lichtkante), liest sauber auf Nacht */
.badge-appstore {
  display: inline-flex; align-items: center; gap: 11px; padding: 11px 20px 12px;
  background: #05070c; color: #F7F7F5; border-radius: 13px;
  border: 1px solid rgba(247,247,245,0.32);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 12px 30px -14px rgba(0,0,0,0.8);
  transition: transform var(--dur-fast) var(--ease-glass), border-color var(--dur-fast) var(--ease-out);
  line-height: 1.05;
}
.badge-appstore:hover { transform: translateY(-2px); border-color: rgba(247,247,245,0.55); }
.badge-appstore:active { transform: scale(0.98); }
.badge-appstore small { display: block; font-size: 0.62rem; letter-spacing: 0.03em; opacity: 0.82; text-transform: none; }
.badge-appstore strong { display: block; font-weight: 600; font-size: 1.18rem; letter-spacing: 0.01em; }

/* ============================================================================
   Footer
   ============================================================================ */
.site-footer {
  padding: clamp(32px, 5vh, 60px) var(--gutter) 44px;
  background: transparent;
  position: relative; z-index: 1;
}
.site-footer__inner { width: min(100% - var(--gutter)*2, var(--wrap)); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 24px 30px; align-items: center; justify-content: space-between; }
.site-footer .wordmark { --wm: 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 30px); justify-content: flex-end; }
.footer-links a { font-size: 0.88rem; color: var(--muted-blue); transition: color var(--dur-fast); }
.footer-links a:hover { color: var(--off-white); }
.footer-fine { width: 100%; margin-top: 24px; padding-top: 24px;
  border-top: 1px solid rgba(244,241,234,0.10);   /* Trennlinie über dem Copyright */
  font-size: 0.76rem; color: var(--hint-blue);
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; text-align: center; }

/* ============================================================================
   Scroll reveal
   ============================================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .moon.is-breathing, .hero__scrollcue::after { animation: none; }
  .device { transform: none !important; }
}

/* ============================================================================
   Legal pages (privacy / terms) – nüchtern, Lesebreite
   ============================================================================ */
.legal { max-width: var(--measure); margin-inline: auto; padding: 150px var(--gutter) 120px; }
.legal__eyebrow { font-family: var(--font-logo); font-size: var(--t-eyebrow); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold); opacity: 0.8; }
.legal h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 5vw, 2.8rem);
  color: var(--header-cream); margin: 0.4em 0 0.2em; letter-spacing: -0.01em; }
.legal__meta { color: var(--hint-blue); font-size: 0.85rem; margin-bottom: 3em; }
.legal h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem;
  color: var(--header-cream); margin: 2.4em 0 0.6em; }
.legal h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--off-white); margin: 1.6em 0 0.4em; }
.legal p, .legal li { font-family: var(--font-display); font-weight: 300; font-size: 1.06rem;
  color: var(--off-white); line-height: 1.75; }
.legal a { color: var(--gold); text-decoration: none; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: 0.7em; }
.legal li::marker { color: rgba(244,241,234,0.45); }
.legal__intro { font-family: var(--font-display); font-size: 1.15rem;
  color: var(--pearl); line-height: 1.6; }
.legal__review {
  display: block; margin: 0.8em 0; padding: 12px 16px;
  background: rgba(212,184,114,0.08); border-left: 3px solid var(--gold); border-radius: 6px;
  font-family: var(--font-ui); font-size: 0.86rem; color: var(--nudge-orange);
}
.legal__end { margin-top: 4em; padding-top: 2em; border-top: 1px solid var(--hairline); text-align: center; }
a.legal__back { display: inline-block; font-family: var(--font-display); font-weight: 300; font-size: 0.88rem; color: var(--gold); text-decoration: none; }
.legal__logo { position: absolute; top: 26px; left: 30px; z-index: 2; }
.legal__logo .wordmark { --wm: 13px; }
.legal__back:hover { color: var(--off-white); }