/* Germanize — landing page styles */

/* ---------------- FONT STACK ----------------
   Craftwork Grotesk doesn't have accents / diacritics / cyrillic.
   We constrain it to BASIC LATIN + COMMON PUNCTUATION via unicode-range,
   and let the browser fall back to Hanken Grotesk (a close visual match)
   for all accented + cyrillic + turkish characters automatically.
   This keeps 'Deutsch', 'é', 'ü', 'ß', 'München', Ру́сский, Türkçe looking clean.
------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&display=swap');

@font-face {
  font-family: "Craftwork Grotesk";
  src: url("fonts/CraftworkGrotesk-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+2013-2014, U+2018-201D, U+2022, U+2026;
}
@font-face {
  font-family: "Craftwork Grotesk";
  src: url("fonts/CraftworkGrotesk-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+2013-2014, U+2018-201D, U+2022, U+2026;
}
@font-face {
  font-family: "Craftwork Grotesk";
  src: url("fonts/CraftworkGrotesk-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+2013-2014, U+2018-201D, U+2022, U+2026;
}
@font-face {
  font-family: "Craftwork Grotesk";
  src: url("fonts/CraftworkGrotesk-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+2013-2014, U+2018-201D, U+2022, U+2026;
}
@font-face {
  font-family: "Craftwork Grotesk";
  src: url("fonts/CraftworkGrotesk-Heavy.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+2013-2014, U+2018-201D, U+2022, U+2026;
}

:root {
  --bg: #FAFAF7;
  --bg-subtle: #F0F0ED;
  --bg-card: #FFFFFF;
  --section-y: 140px;
  --section-y-tight: 120px;
  --paper: #FAFAF7;
  --border: #E4E4DF;
  --border-strong: #1A1A1A;
  --ink: #1A1A1A;
  --ink-2: #4A4A46;
  --ink-3: #8A8A84;
  --lime: #25A7DE;
  --lime-dark: #1583B5;
  --lime-deep: #FFFFFF;
  --highlight: #D6ECF8;
  --word-hl: #FFF3B8;
  --der: #6B9AC4;
  --die: #D48BA4;
  --das: #A3B820;
  --c1: #6D28D9;
  --c2: #4C1D95;
  --c1plus: #4C1D95;
  --a1: #4CAF50;
  --a2: #86B84A;
  --b1: #F59E0B;
  --b2: #EA580C;
  --font: "Craftwork Grotesk", "Hanken Grotesk", ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  --serif: "Iowan Old Style", "Charter", "Cambria", Georgia, serif;
  --radius: 16px;
  --radius-lg: 24px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

img { display: block; max-width: 100%; }

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .35s ease, padding .35s ease, background .35s ease;
}
.nav.scrolled {
  border-bottom-color: transparent;
  padding-top: 12px; padding-bottom: 12px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  box-shadow: 0 1px 0 rgba(20,22,26,.05), 0 16px 38px -22px rgba(20,30,0,.25);
}
.nav-brand { display:flex; align-items:center; gap: 10px; font-weight: 900; font-size: 22px; letter-spacing: -0.02em; }
.nav-brand .logo { width: 36px; height: 36px; display: block; }
.nav-links { display:flex; gap: 28px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  display:inline-flex; align-items:center; gap: 8px;
  background: var(--ink); color: #fff;
  padding: 10px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  transition: transform .15s ease, background .15s ease;
}
.nav-cta:hover { transform: translateY(-1px); background: #000; }
.nav-cta svg { width: 16px; height: 16px; }

@media (max-width: 820px) { .nav-links { display:none; } .nav { padding: 14px 20px;} }

/* ---------- LAYOUT ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 700px) { .container { padding: 0 22px; } }

section { position: relative; }

/* ---------- HERO ---------- */
.hero {
  padding: 60px 0 0;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px; align-items: center;
}
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 20px;} }

.eyebrow {
  display:inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-2);
}
.eyebrow .dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--lime);
  display: inline-flex; align-items:center; justify-content:center;
  color: var(--lime-deep); font-weight: 900; font-size: 11px;
}

.hero h1 {
  font-size: clamp(44px, 5.6vw, 84px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-weight: 900;
  margin: 22px 0 26px;
  text-wrap: balance;
}
.hero h1 .serif { font-family: var(--serif); font-weight: 500; font-style: italic; letter-spacing: -0.02em;}
.hero h1 .mark {
  background: var(--lime);
  padding: 0.04em 0.16em;
  border-radius: 6px;
  color: #fff;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero-sub {
  font-size: 19px; line-height: 1.55; color: var(--ink-2);
  max-width: 520px; margin-bottom: 32px;
}
.hero-ctas { display:flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.btn-app {
  display:inline-flex; align-items:center; gap: 12px;
  background: var(--ink); color: #fff;
  padding: 14px 22px 14px 18px;
  border-radius: 14px;
  font-weight: 600; font-size: 16px;
  min-height: 64px; box-sizing: border-box;
  transition: transform .15s ease;
}
.btn-app:hover { transform: translateY(-2px); }
.btn-app svg { width: 28px; height: 28px;}
.btn-app .small { font-size: 11px; opacity: .8; display:block; font-weight: 500; line-height: 1;}
.btn-app .big { font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em;}
.btn-ghost {
  display:inline-flex; align-items:center; gap: 8px;
  padding: 0 22px; border-radius: 14px;
  font-size: 16px; font-weight: 700;
  line-height: 1; letter-spacing: -.01em;
  border: 1px solid var(--border-strong);
  font-weight: 600; font-size: 15px;
  background: transparent;
  min-height: 64px; box-sizing: border-box;
  transition: background .15s, color .15s, transform .15s ease;
}
.btn-ghost:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }

.hero-meta {
  margin-top: 30px;
  display:flex; gap: 28px; flex-wrap:wrap;
  font-size: 13px; color: var(--ink-3);
}
.hero-meta strong { color: var(--ink); font-weight: 700; display:block; font-size: 22px; margin-bottom: 2px; letter-spacing: -0.02em;}

/* hero right: phone + floating cards */
.hero-visual {
  position: relative;
  height: 640px;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width: 960px) { .hero-visual { height: 560px; margin-top: 30px; } }

.phone {
  position: relative;
  width: 300px; aspect-ratio: 9 / 19.5;
  border-radius: 46px;
  background: #0a0a0a;
  padding: 9px;
  box-shadow:
    0 60px 120px -30px rgba(20,30,0,.25),
    0 20px 40px -15px rgba(0,0,0,.15),
    0 0 0 1px rgba(0,0,0,.06);
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: var(--bg);
  position: relative;
}
.phone-screen img {
  width: 100%; height: 100%; object-fit: cover;
  display:block;
}
.phone-notch {
  position:absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 94px; height: 28px; background: #0a0a0a; border-radius: 999px;
  z-index: 3;
}

.hero-phone-wrap {
  position: relative;
  transform: rotate(-4deg);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.hero-phone-wrap:hover { transform: rotate(-1deg) translateY(-4px); }

/* Floating cards around phone */
/* Hero floating accent cards — liquid glass, unified with the in-app player */
.hero-float {
  position: absolute;
  background: rgba(255,255,255,0.42);
  -webkit-backdrop-filter: blur(26px) saturate(200%);
  backdrop-filter: blur(26px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 16px;
  box-shadow:
    0 18px 44px -14px rgba(20,30,0,.20),
    0 8px 18px -8px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.85);
  padding: 12px 14px;
  z-index: 5;
  animation: floaty 6.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@media (prefers-reduced-motion: no-preference) {
  body:not(.hero-in) .hero-float { opacity: 0; filter: blur(10px); }
  .hero-float {
    transition:
      opacity .9s cubic-bezier(.16,1,.3,1) var(--in, 0s),
      filter .9s cubic-bezier(.16,1,.3,1) var(--in, 0s);
  }
}
.hero-mag            { --in: .15s; }
.hero-float-progress { --in: .32s; }
.hero-gram           { --in: .5s; }
.hero-word           { --in: .68s; }
.hero-player         { --in: .86s; }
/* phone sits between the back card and the front cards for depth */
.hero-phone-wrap .hero-phone { position: relative; z-index: 5; }
/* Hörtraining mini-player — liquid glass, mirrors the in-app player */
.hero-player {
  bottom: 4%; right: -44px; left: auto; top: auto;
  --rot: -2deg; z-index: 7;
  width: 308px; max-width: 92vw;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px;
  border-radius: 18px;
  background: rgba(250,250,247,0.42);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    0 22px 52px -18px rgba(30,38,8,0.34),
    0 6px 16px -8px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.92);
}
.hero-player .hp-sliver {
  position: absolute; top: -2px; left: 20px;
  width: 50px; height: 2px; border-radius: 999px;
  background: var(--lime);
}
.hero-player .hp-thumb {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden;
}
.hero-player .hp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-player .hp-info { flex: 1; min-width: 0; }
.hero-player .hp-title {
  font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px;
}
.hero-player .hp-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hero-player .hp-meta-text {
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  white-space: nowrap; flex-shrink: 0;
}
.hero-player .hp-badge {
  flex-shrink: 0;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  color: #fff; background: #E8412A;
  padding: 1px 6px; border-radius: 6px;
}
.hero-player .hp-controls { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.hero-player .hp-speed {
  display: inline-flex; align-items: center; gap: 3px;
  border: none; background: none; cursor: pointer; padding: 0;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
}
.hero-player .hp-speed svg { width: 14px; height: 14px; opacity: 0.6; }
.hero-player .hp-play {
  border: none; background: none; cursor: pointer; padding: 2px;
  color: var(--ink); display: inline-flex;
}
.hero-player .hp-play svg { width: 18px; height: 18px; }
.hero-player .hp-close {
  width: 27px; height: 27px; flex-shrink: 0;
  border: none; cursor: pointer; border-radius: 50%;
  background: rgba(120,120,110,0.16);
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s;
}
.hero-player .hp-close:hover { background: rgba(120,120,110,0.28); }
.hero-player .hp-close svg { width: 14px; height: 14px; }

.hero-float-progress {
  top: 24%; right: -52px; bottom: auto;
  --rot: 4deg; z-index: 7;
  display: flex; align-items: center; gap: 11px;
  width: 176px;
}
.hero-float-progress .con-ring-wrap { position: relative; width: 50px; height: 50px; flex-shrink: 0; }
.hero-float-progress .con-ring { width: 100%; height: 100%; display: block; }
.hero-float-progress .con-ring-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: -.02em;
}
.hero-float-progress .con-ring-num .pct { font-size: 8px; color: var(--ink-3); font-weight: 700; vertical-align: super; }
.hero-float-progress .con-progress-label { font-size: 11.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.hero-float-progress .con-progress-meta { font-size: 10px; color: var(--ink-3); font-weight: 600; }

/* --- Magazine preview card (mid-left) — sits in FRONT, overlapping the phone --- */
.hero-mag {
  top: 15%; left: -104px;
  --rot: -5deg; z-index: 8;
  width: 236px;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
}
.hero-mag .hm-cover {
  position: relative;
  height: 116px;
  overflow: hidden;
}
.hero-mag .hm-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-mag .hm-badge {
  position: absolute; top: 9px; right: 9px;
  font-size: 10px; font-weight: 800; color: #fff;
  background: var(--b1);
  padding: 2px 7px; border-radius: 6px; letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.hero-mag .hm-body { padding: 11px 13px 12px; }
.hero-mag .hm-meta {
  font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.hero-mag .hm-title {
  font-family: var(--serif);
  font-size: 16px; line-height: 1.2; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em;
}
.hero-mag .hm-foot {
  display: flex; align-items: center; gap: 14px;
  margin-top: 11px;
  font-size: 10px; color: var(--ink-3); font-weight: 600;
}
.hero-mag .hm-stat { display: inline-flex; align-items: center; gap: 5px; }
.hero-mag .hm-stat svg { width: 12px; height: 12px; }

/* --- Word flashcard (bottom-left) --- */
.hero-word {
  bottom: 17%; left: -64px;
  width: 176px;
  padding: 14px 15px;
}
.hero-word .hw-top { display: flex; align-items: center; gap: 6px; margin-bottom: 11px; }
.hero-word .hw-gender { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--der); padding: 2px 9px; border-radius: 6px; }
.hero-word .hw-level { font-size: 10px; font-weight: 800; letter-spacing: .02em; color: #fff; background: var(--b1); padding: 2px 7px; border-radius: 6px; }
.hero-word .hw-spk { color: var(--ink-3); display: inline-flex; margin-left: auto; }
.hero-word .hw-spk svg { width: 15px; height: 15px; }
.hero-word .hw-word { font-size: 25px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); line-height: 1; }
.hero-word .hw-def { font-family: var(--serif); font-style: italic; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); margin-top: 7px; }

/* --- Grammar-in-sentence card (mid-right) --- */
.hero-gram {
  top: 54%; right: -56px;
  width: 206px;
  padding: 13px 15px;
}
.hero-gram .hg-kind { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #4A78C7; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.hero-gram .hg-kind::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #4A78C7; }
.hero-gram .hg-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px; }
.hero-gram .hg-ex { font-family: var(--serif); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.hero-gram .hg-ex u { text-decoration: none; border-bottom: 2.5px solid #4A78C7; padding-bottom: 0.5px; color: var(--ink); font-weight: 600; }

/* (mobile constellation handled by the mobile-first grid at end of file) */

/* legacy float cards */
.float {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 50px -15px rgba(20,30,0,.18), 0 10px 20px -8px rgba(0,0,0,.08);
  padding: 14px 16px;
  font-size: 13px;
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-10px) rotate(var(--rot, 0deg)); }
}
.float .tag {
  display:inline-block;
  padding: 3px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  background: var(--lime); color: var(--lime-deep);
  margin-bottom: 8px;
}
.float .word { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.float .trans { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.float-xp {
  top: 2%; left: -40px;
  display:flex; align-items:center; gap: 10px;
  animation-delay: -1s;
  padding: 10px 14px;
}
.float-xp .flame { font-size: 22px; }
.float-xp .amount { font-weight: 900; font-size: 20px; letter-spacing: -0.02em;}
.float-xp .label { font-size: 11px; color: var(--ink-3); }

.float-word {
  top: 28%; right: -30px;
  animation-delay: -2s;
}
.float-audio {
  bottom: 18%; left: -70px;
  animation-delay: -3s;
  padding: 12px 14px;
  display:flex; align-items: center; gap: 10px;
}
.float-audio .play {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--lime); display: inline-flex; align-items:center; justify-content:center;
  color: var(--lime-deep);
}
.float-audio .bars { display:flex; gap: 2px; align-items: flex-end; height: 18px;}
.float-audio .bars span { width: 3px; background: var(--ink); border-radius: 2px; animation: eq 1.1s ease-in-out infinite; }
.float-audio .bars span:nth-child(1){ height: 70%; animation-delay:-.1s;}
.float-audio .bars span:nth-child(2){ height: 40%;animation-delay:-.3s;}
.float-audio .bars span:nth-child(3){ height: 90%;animation-delay:-.5s;}
.float-audio .bars span:nth-child(4){ height: 55%;animation-delay:-.2s;}
.float-audio .bars span:nth-child(5){ height: 30%;animation-delay:-.4s;}
@keyframes eq {
  0%,100% { transform: scaleY(1);}
  50% { transform: scaleY(0.4);}
}

.float-check {
  bottom: 0; right: 10px;
  animation-delay: -4s;
  display:flex; align-items:center; gap: 10px;
}
.float-check .ring {
  width: 40px; height: 40px; border-radius: 50%;
  background: conic-gradient(var(--lime) 75%, var(--bg-subtle) 0);
  display:inline-flex; align-items:center; justify-content:center;
}
.float-check .ring::before { content:""; width: 30px; height: 30px; border-radius: 50%; background: #fff; }

@media (max-width: 540px) {
  .float-xp { left: -10px; }
  .float-word { right: -10px; }
  .float-audio { left: -10px; }
}

@media (max-width: 420px) {
  /* Hide floating cards on small phones — they collide with phone mockup */
  .float-xp, .float-word, .float-audio { display: none; }
  /* Smaller hero phone mockup */
  .phone { width: 240px; }
}

/* Hero bottom: marquee of words */
.marquee {
  margin-top: 80px;
  padding: 28px 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--bg);
}
.marquee-track {
  display: inline-flex;
  gap: 48px;
  animation: scroll 60s linear infinite;
  font-size: 24px; font-weight: 700; letter-spacing: -0.01em;
}
.marquee-track span { color: var(--ink); }
.marquee-track i { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-3);}
.marquee-track em { font-style: normal; color: var(--lime-dark); font-weight: 700;}
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- SECTION HEADER ---------- */
.sh { margin-bottom: 56px; }
.sh .kicker {
  display:inline-flex; align-items:center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime-dark);
  margin-bottom: 18px;
}
.sh .kicker::before {
  content: ""; width: 28px; height: 2px; background: var(--lime-dark); display:inline-block;
}
.sh h2 {
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0 0 14px;
  max-width: 820px;
  text-wrap: balance;
}
.sh h2 .serif { font-family: var(--serif); font-style: italic; font-weight: 500;}
.sh h2 .mark {
  background: var(--lime);
  padding: 0.04em 0.16em;
  border-radius: 6px;
  color: #fff;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.sh p {
  font-size: 18px; line-height: 1.5; color: var(--ink-2);
  max-width: 620px; margin: 0;
}

/* ---------- MANIFESTO ---------- */
.manifesto {
  padding: 140px 0 120px;
}
.manifesto-grid {
  display:grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: end;
}
@media (max-width: 900px) { .manifesto-grid { grid-template-columns: 1fr; gap: 40px;} }
.manifesto-big {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08; font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 560px;
}
.manifesto-big strong {
  background: linear-gradient(transparent 8%, var(--lime) 8%, var(--lime) 92%, transparent 92%);
  padding: 0 0.1em;
  border-radius: 4px;
  color: var(--lime-deep);
  font-weight: 700;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.manifesto-big .serif { font-family: var(--serif); font-weight: 500; font-style: italic; color: var(--ink-2);}
.manifesto-side p {
  font-size: 16px; line-height: 1.6; color: var(--ink-2);
  margin: 0 0 18px;
}
.manifesto-side p.founder { font-style: italic; font-family: var(--serif); font-size: 18px; color: var(--ink);}
.manifesto-side .byline { font-size: 13px; color: var(--ink-3); margin-top: 18px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;}

.pill-row { display:flex; gap: 10px; flex-wrap: wrap; margin-top: 30px;}
.pill {
  padding: 8px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.pill.strike { color: var(--ink-3); text-decoration: line-through; background: transparent; border-color: var(--border); font-weight: 500;}
.pill.lime { background: var(--lime); color: var(--lime-deep); border-color: var(--lime);}

/* ---------- ALL-IN-ONE SECTION ---------- */
.allinone {
  padding: var(--section-y) 0 var(--section-y-tight);
  background: var(--bg);
}

.allinone .sh { text-align: center; margin: 0 auto 56px; }

/* Scroll-driven fill on "Nothing you don't" — green grows left→right with scroll */
/* Scroll-driven highlight on "Nada que você não precisa" — the branding-blue
   marker sweeps in left→right the first time it scrolls into view. Branding
   blue (#25A7DE / --lime) ONLY — no second/darker blue. Text stays dark and
   readable before the mark fills. */
.allinone .sh h2 .mark {
  --fill: 0;
  background: linear-gradient(
    to right,
    var(--lime) 0%,
    var(--lime) calc(var(--fill) * 100%),
    transparent calc(var(--fill) * 100%),
    transparent 100%
  );
  padding: 0.04em 0.16em;
  border-radius: 6px;
  color: var(--ink);
  transition: color .2s linear;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* once the marker has substantially filled, flip text to white for contrast */
.allinone .sh h2 .mark.is-filled { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .allinone .sh h2 .mark { --fill: 1; color: #fff; }
}

.allinone .sh > p {
  max-width: 620px; margin: 20px auto 0;
  font-size: 17px; line-height: 1.6;
  color: var(--ink-2);
}
.aio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .aio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .aio-grid { grid-template-columns: 1fr; gap: 12px; }
  .allinone { padding: 90px 0 70px; }
}
.aio-card {
  position: relative;
  padding: 28px 24px 26px;
  background: #fff;
  border: none;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(20,22,16,.04), 0 10px 28px -14px rgba(20,22,16,.10);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.aio-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20,22,16,.05), 0 22px 44px -18px rgba(20,22,16,.16);
}
.aio-icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: var(--paper);
  border: none;
  border-radius: 16px;
  margin-bottom: 18px;
  transition: background .2s, transform .25s;
}
.aio-icon img {
  width: 56px; height: 56px;
  object-fit: contain;
  transition: transform .25s;
}
.aio-card:hover .aio-icon {
  background: var(--lime);
  transform: rotate(-3deg);
}
.aio-card:hover .aio-icon img {
  transform: scale(1.08);
}
.aio-name {
  font-family: var(--font);
  font-size: 17px; font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.aio-desc {
  font-family: var(--serif);
  font-size: 14px; line-height: 1.5;
  color: var(--ink-2);
}

/* ---------- FEATURE SECTIONS ---------- */
.features {
  padding: var(--section-y-tight) 0 40px;
}
.feat-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: center;
  padding: 70px 0;
}
.feat-row.reverse { direction: rtl; }
.feat-row.reverse > * { direction: ltr; }
/* prevent grid min-content blowout on very small screens */
.feat-row > * { min-width: 0; }
.feat-copy ul li { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 900px) {
  .feat-row, .feat-row.reverse { grid-template-columns: 1fr; direction: ltr; gap: 40px;}
}
.feat-copy .num {
  font-family: var(--serif);
  font-size: 14px; color: var(--ink-3);
  margin-bottom: 18px; letter-spacing: .06em;
}
.feat-copy h3 {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 900; letter-spacing: -0.025em; line-height: 1;
  margin: 0 0 20px;
  color: var(--ink);
  text-wrap: balance;
}
.feat-copy h3 .serif { font-family: var(--serif); font-weight: 500; font-style: italic;}
.feat-copy h3 .mark {
  background: linear-gradient(transparent 8%, var(--lime) 8%, var(--lime) 92%, transparent 92%);
  padding: 0 0.12em;
  border-radius: 4px;
  color: var(--lime-deep);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.feat-copy p {
  font-size: 17px; line-height: 1.55; color: var(--ink-2);
  margin: 0 0 14px;
  max-width: 480px;
}
.feat-copy ul {
  list-style: none; padding: 0; margin: 18px 0 0;
}
.feat-copy ul li {
  display:flex; gap: 10px; padding: 8px 0;
  font-size: 15px; color: var(--ink);
  align-items: flex-start;
}
.feat-copy ul li::before {
  content: ""; width: 16px; height: 16px; flex: none; margin-top: 2px;
  background: var(--lime); border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8l3 3 5-6' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: center;
}

.feat-visual { position: relative; }

/* tile with phone */
.tile-phone {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  padding: 60px 30px; border-radius: 28px;
  background: var(--bg-subtle);
  min-height: 540px;
  overflow: hidden;
}
.tile-phone .phone { width: 260px; position: relative; z-index: 3; }
.tile-phone .illu {
  position: absolute;
  width: 150px; height: 150px;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
  mix-blend-mode: multiply;
  transition: transform .4s cubic-bezier(.2,.85,.25,1);
}
/* Mask-based tinting for brand illustrations (recolor black line-art) */
.tile-phone:hover .illu { transform: rotate(0deg) translateY(-4px) !important; }
.tile-phone .illu.illu-mask {
  -webkit-mask: var(--illu) center / contain no-repeat;
  mask: var(--illu) center / contain no-repeat;
  background: var(--illu-color, #1A2E00);
  mix-blend-mode: normal;
  opacity: 0.82;
}
.tile-phone .illu.illu-lg { width: 186px; height: 186px; }
/* Library tile (Wörterbuch): bottom-right with a dark corner accent like behind the iPhone */
.tile-phone .illu.br { bottom: 16px; right: 16px; transform: rotate(6deg); }
.tile-phone:has(.illu.br)::after {
  content: '';
  position: absolute;
  right: -1px; bottom: -1px;
  width: 180px; height: 180px;
  background: var(--ink);
  opacity: 0.06;
  border-top-left-radius: 100%;
  pointer-events: none;
  z-index: 1;
}
.tile-phone .illu.br { z-index: 1; }
.tile-phone .illu.tr { top: 16px; right: 16px; transform: rotate(6deg);}
.tile-phone .illu.bl { bottom: 16px; left: 16px; transform: rotate(-6deg);}
.tile-phone.lime-bg { background: var(--bg-subtle); }
.tile-phone.dark-bg { background: var(--ink); color: #fff; }
.tile-phone.cream-bg { background: #F2EFDF; }

.tile-phone .deco-word {
  position: absolute;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 120px; color: rgba(0,0,0,0.06);
  letter-spacing: -0.04em;
  white-space: nowrap;
  pointer-events: none;
}
.tile-phone.lime-bg .deco-word { color: rgba(0,0,0,0.06); }

/* ---------- INTERACTIVE CARD DEMO ---------- */
.demo {
  padding: var(--section-y-tight) 0;
  background: var(--ink);
  color: #fff;
}
.demo .sh h2 { color: #fff; }
.demo .sh p { color: #B5B5AE; }
.demo .sh .kicker { color: var(--lime);}
.demo .sh .kicker::before { background: var(--lime);}
.demo-stage {
  display:grid; grid-template-columns: 1fr 1.2fr;
  gap: 60px; align-items: center; margin-top: 40px;
}
@media (max-width: 900px) { .demo-stage { grid-template-columns: 1fr; } }

.demo-copy h4 {
  font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.demo-copy p { color: #B5B5AE; font-size: 16px; line-height: 1.55; margin: 0 0 18px;}
.demo-controls { display:flex; gap: 10px; margin-top: 20px; flex-wrap: wrap;}
.demo-controls button {
  padding: 10px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.08); color: #fff;
  font-weight: 600; font-size: 14px;
  min-height: 44px;
  transition: background .2s;
  border: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 480px) {
  .demo-controls { flex-direction: column; }
  .demo-controls button { width: 100%; }
}
.demo-controls button:hover { background: rgba(255,255,255,0.16);}
.demo-controls button.primary { background: var(--lime); color: var(--lime-deep); border-color: var(--lime);}
.demo-controls button.primary:hover { background: #1E97CC;}

.card3d {
  position: relative;
  perspective: 1500px;
  display: flex; justify-content: center; align-items: center;
  min-height: 480px;
}
.card-deck {
  position: relative; width: 320px; height: 440px;
  transform-style: preserve-3d;
  perspective: 1500px;
}
.card-face {
  position: absolute; inset: 0;
  background: #fff; color: var(--ink);
  border-radius: 22px;
  padding: 30px 26px;
  box-shadow: 0 30px 60px -10px rgba(0,0,0,0.4);
  display: flex; flex-direction: column;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.card-back {
  padding: 28px 28px 26px;
  overflow: hidden;
}
.card-back .row-top { margin-bottom: 18px !important; }
.card-back .word { margin-bottom: 10px !important; }
.card-back > p:first-of-type { margin-bottom: 4px !important; }
.card-back h5 { margin: 14px 0 4px !important; }
.card-back table { margin-top: 2px !important; }
.card-back .tags { padding-top: 14px !important; }
.card-front { transform: rotateY(0deg); }
.card-back { transform: rotateY(180deg); }
.card-deck.flipped .card-front { transform: rotateY(-180deg); }
.card-deck.flipped .card-back { transform: rotateY(0deg); }

.card-face .row-top { display:flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px;}
.card-face .pos-tag {
  background: var(--bg-subtle); padding: 4px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ink-2);
}
.card-face .gender {
  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #fff;
}
.card-face .gender.der { background: var(--der); }
.card-face .gender.die { background: var(--die); }
.card-face .gender.das { background: var(--das); }
.card-face .icon {
  width: 32px; height: 32px; display:flex; align-items:center; justify-content:center;
  color: var(--ink-3);
}
.card-face .word {
  font-family: var(--serif);
  font-size: 42px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.05;
  margin-bottom: 6px;
  color: var(--ink);
}
.card-face .ipa { font-size: 13px; color: var(--ink-3); margin-bottom: 22px;}
.card-face .sentence {
  font-family: var(--serif);
  font-size: 17px; line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: auto;
}
.card-face .sentence b { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 3px; font-weight: 500;}
.card-face .tags { display:flex; gap: 6px; flex-wrap: wrap; margin-top: 16px;}
.card-face .tags .t {
  padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
  background: var(--bg-subtle); color: var(--ink-2);
}
.card-face .tags .t.level-c2 { background: var(--c2); color: #fff;}
.card-face .tags .t.level-c1 { background: var(--c1); color: #fff;}
.card-face .tags .t.level-b1 { background: var(--b1); color: #fff;}
.card-face .tags .t.level-a1 { background: var(--a1); color: #fff;}

.card-back h5 { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 6px;}
.card-back h5:first-child { margin-top: 0; }
.card-back p { font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink); margin: 0;}
.card-back table { width: 100%; font-size: 13px; margin-top: 4px;}
.card-back table td { padding: 3px 0; color: var(--ink);}
.card-back table td:first-child { color: var(--ink-3); width: 40%;}

.swipe-hint {
  position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: rgba(255,255,255,0.6); letter-spacing: .04em;
}

/* ---------- MAGAZIN section ---------- */
.editorial {
  padding: var(--section-y) 0;
  background: #F2EFDF;
  color: var(--ink);
}
.editorial .sh { position: relative; }
.editorial .feat-row:first-child { border-top: none; padding-top: 40px;}
.magazin-illu {
  position: absolute;
  top: -24px; right: -28px;
  width: 182px; height: 182px;
  opacity: 0.9;
  mix-blend-mode: multiply;
  pointer-events: none;
}
@media (max-width: 700px) {
  .magazin-illu { width: 120px; height: 120px; top: -12px; right: -8px; opacity: 0.85; }
}
.editorial .tile-phone { background: #fff; box-shadow: 0 40px 80px -30px rgba(60,40,10,0.15); }

.ed-article {
  background: #fff; border-radius: 16px;
  padding: 26px; max-width: 420px;
  box-shadow: 0 30px 60px -20px rgba(60,40,10,.15);
}
.ed-article .meta { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; display:flex; gap: 10px; align-items: center;}
.ed-article .meta .level { background: var(--a2); color: #fff; padding: 3px 8px; border-radius: 6px; letter-spacing: .04em;}
.ed-article h4 { font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 14px 0 12px;}
.ed-article p { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0 0 10px;}
.ed-article p .hl {
  background: var(--highlight);
  padding: 0 3px; border-radius: 2px; cursor: pointer; position: relative;
  transition: background .15s;
}
.ed-article p .hl:hover { background: var(--lime); }
.ed-article .quiz {
  margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--border);
}
.ed-article .quiz .q { font-size: 14px; font-weight: 600; margin-bottom: 10px;}
.ed-article .quiz .opt {
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 14px; margin-bottom: 6px; cursor: pointer;
  transition: all .15s;
  display:flex; align-items: center; gap: 10px;
}
.ed-article .quiz .opt:hover { border-color: var(--ink); }
.ed-article .quiz .opt .bullet { width: 16px; height: 16px; border: 1.5px solid var(--border); border-radius: 50%;}
.ed-article .quiz .opt.correct { background: #EAF6D1; border-color: var(--a2);}
.ed-article .quiz .opt.correct .bullet { background: var(--a2); border-color: var(--a2);}
.ed-article .quiz .opt.wrong { background: #FDECEC; border-color: #EF4444;}

/* ---------- BERUFSDEUTSCH (field-tailored business German) ---------- */
.bizde { padding: var(--section-y-tight) 0 var(--section-y); background: var(--bg); overflow-x: clip; }
.biz-stage { max-width: 760px; margin: 8px auto 0; }
.biz-pick {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 14px;
}
.biz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.biz-chip {
  padding: 0 17px; min-height: 44px;
  border-radius: 999px; border: none; cursor: pointer;
  background: #fff; color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(20,22,16,.05), 0 6px 16px -10px rgba(20,22,16,.14);
  transition: background .2s, color .2s, transform .15s, box-shadow .2s;
}
.biz-chip:hover { transform: translateY(-1px); }
.biz-chip:active { transform: scale(.96); transition-duration: .08s; }
.biz-chip.active { background: var(--ink); color: var(--paper); box-shadow: 0 6px 18px -8px rgba(20,22,16,.4); }
.biz-card {
  background: #fff; border-radius: 22px;
  padding: 26px 30px 22px;
  box-shadow: 0 1px 2px rgba(20,22,16,.04), 0 16px 44px -20px rgba(20,22,26,.14);
}
.biz-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.biz-ctx {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3);
}
.biz-ctx-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime-dark); flex-shrink: 0; }
.biz-level {
  margin-left: auto; flex-shrink: 0;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  color: #fff; padding: 3px 10px; border-radius: 8px;
  background: var(--b1);
}
.biz-level.lv-a1 { background: var(--a1); }
.biz-level.lv-a2 { background: var(--a2); }
.biz-level.lv-b1 { background: var(--b1); }
.biz-level.lv-b2 { background: var(--b2); }
.biz-level.lv-c1 { background: var(--c1); }
.biz-phrase {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 31px);
  line-height: 1.32; color: var(--ink); letter-spacing: -0.01em;
}
.biz-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.biz-field { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.biz-listen { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.biz-listen svg { width: 17px; height: 17px; color: var(--lime-dark); }
@keyframes biz-swap {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .biz-card.swap .biz-card-top  { animation: biz-swap .3s cubic-bezier(.2,.8,.2,1); }
  .biz-card.swap .biz-phrase    { animation: biz-swap .38s cubic-bezier(.2,.8,.2,1); }
  .biz-card.swap .biz-card-foot { animation: biz-swap .46s cubic-bezier(.2,.8,.2,1); }
}
@media (max-width: 700px) {
  .biz-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .biz-chips::-webkit-scrollbar { display: none; }
  .biz-chip { flex-shrink: 0; }
  .biz-card { padding: 22px 20px 18px; }
}

/* ---------- DAILY PLAN (app-style "picked for you") ---------- */
.daily { padding: var(--section-y-tight) 0 var(--section-y); background: var(--bg); overflow-x: clip; }
.daily-stage { max-width: 600px; margin: 8px auto 0; }

/* segmented tabs */
.dc-tabs {
  display: flex; gap: 4px; padding: 5px;
  background: #ECECE6; border-radius: 999px;
  margin: 0 auto 40px; width: fit-content; max-width: 100%;
}
.dc-tab {
  padding: 11px 22px; border: none; cursor: pointer;
  border-radius: 999px; background: transparent;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink-3); white-space: nowrap;
  transition: color .2s, background .2s, box-shadow .2s, transform .12s;
}
.dc-tab:active { transform: scale(.97); }
.dc-tab.active { background: #fff; color: var(--lime); box-shadow: 0 1px 2px rgba(20,22,16,.06), 0 6px 16px -8px rgba(20,22,16,.18); }

/* card + floating tasks share a positioning context */
.dc-wrap { position: relative; }
.dc-card {
  position: relative;
  background: #fff; border-radius: 28px;
  padding: 30px 32px;
  box-shadow: 0 2px 4px rgba(20,22,16,.04), 0 30px 70px -28px rgba(20,30,40,.28);
  z-index: 2;
}
/* soft, light blue glow sitting BEHIND the card (sibling, not a child) */
.dc-sliver {
  position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
  width: 86%; height: 76px; border-radius: 32px;
  background: rgba(37,167,222,0.30);
  filter: blur(26px); z-index: 0; pointer-events: none;
}
.dc-eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 18px;
}
.dc-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.dc-title {
  margin: 0; font-size: clamp(26px, 3.4vw, 34px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.08; color: var(--ink); text-wrap: balance;
}
.dc-time {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid rgba(37,167,222,.35); background: rgba(37,167,222,.06);
  font-size: 14px; font-weight: 700; color: var(--ink-2);
}
.dc-time svg { width: 17px; height: 17px; color: var(--lime); }
.dc-time b { font-size: 17px; font-weight: 800; color: var(--ink); }
.dc-meta { margin-top: 16px; font-size: 16px; line-height: 1.45; color: var(--ink-3); font-weight: 500; }
/* drag-to-start control */
.dc-drag {
  position: relative; margin-top: 26px;
  display: flex; align-items: center;
  height: 64px; padding: 6px; border-radius: 999px;
  background: rgba(37,167,222,.07);
  border: 1px solid rgba(37,167,222,.2);
  cursor: grab; overflow: hidden;
  touch-action: pan-y;
}
.dc-drag.dragging { cursor: grabbing; }
/* blue fill that follows the knob */
.dc-drag .dc-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 64px;
  border-radius: 999px;
  background: rgba(37,167,222,.16);
  pointer-events: none; z-index: 1;
}
.dc-drag.done { background: rgba(37,167,222,.16); }
.dc-knob {
  position: relative; z-index: 2; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--lime); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px -4px rgba(37,167,222,.6);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
  touch-action: none;
}
.dc-knob.dragging { transition: none; cursor: grabbing; }
.dc-knob svg { width: 24px; height: 24px; }
.dc-drag-label {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: 16px; font-weight: 700; color: var(--lime);
  pointer-events: none;
  transition: opacity .15s;
}
@media (prefers-reduced-motion: no-preference) {
  .dc-drag:hover .dc-knob { transform: translateX(10px); }
  .dc-drag::after {
    content: ""; position: absolute; left: 64px; top: 0; bottom: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(37,167,222,.14), transparent);
    animation: dc-shine 2.4s ease-in-out infinite;
  }
  @keyframes dc-shine { 0% { transform: translateX(-40px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(360px); opacity: 0; } }
}
@keyframes dc-swap { from { transform: translateY(9px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .dc-card.swap .dc-eyebrow,
  .dc-card.swap .dc-row,
  .dc-card.swap .dc-meta,
  .dc-card.swap .dc-drag { animation: dc-swap .36s cubic-bezier(.2,.8,.2,1); }
  .dc-card.swap .dc-row { animation-delay: .03s; }
  .dc-card.swap .dc-meta { animation-delay: .06s; }
  .dc-card.swap .dc-drag { animation-delay: .09s; }
}

/* floating task chips around the card — IN FRONT of the central card */
.dc-tasks { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.dc-task {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 14px;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 14px 32px -14px rgba(20,30,40,.3), inset 0 1px 0 rgba(255,255,255,.9);
  font-size: 13px; font-weight: 700; color: var(--ink);
  white-space: nowrap;
  animation: dc-float 5.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.dc-task-ic { width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: rgba(37,167,222,.12); color: var(--lime-dark); }
.dc-task-ic svg { width: 14px; height: 14px; }
.dc-task-lv { flex-shrink: 0; font-size: 10px; font-weight: 800; color: #fff; padding: 1px 6px; border-radius: 5px; background: var(--b1); }
.dc-task-lv.lv-a1 { background: var(--a1); } .dc-task-lv.lv-a2 { background: var(--a2); }
.dc-task-lv.lv-b1 { background: var(--b1); } .dc-task-lv.lv-b2 { background: var(--b2); }
.dc-task-lv.lv-c1 { background: var(--c1); }
.dc-task-n { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--ink); background: #EFEFEA; padding: 1px 9px; border-radius: 999px; min-width: 22px; text-align: center; }
.dc-task-n.is-lv { color: #fff; }
.dc-task-n.is-lv.lv-a1 { background: var(--a1); }
.dc-task-n.is-lv.lv-a2 { background: var(--a2); }
.dc-task-n.is-lv.lv-b1 { background: var(--b1); }
.dc-task-n.is-lv.lv-b2 { background: var(--b2); }
.dc-task-n.is-lv.lv-c1 { background: var(--c1); }
/* floating mini vocab card (Vocabulário task) — just the little card, no chip shell */
.dc-task.dc-task-mini {
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: none; box-shadow: none; padding: 0;
}
.dc-task-mini .dcr-vcard { margin: 0; transform: none; }

/* Floating mini vocab card — mirrors the big "A carta que não te deixa
   esquecer" (#dnv) flip card, scaled down, auto-flipping to reveal the meaning.
   The rotating element IS the card (two solid faces); no static plate, so the
   content is always centered inside the face and never detaches. */
.dc-miniflip {
  position: relative; display: block; width: 158px; height: 120px;
  perspective: 800px;
}
.dc-miniflip-inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
}
@media (prefers-reduced-motion: no-preference) {
  .dc-miniflip-inner { animation: dc-miniflip-spin 7s cubic-bezier(.65,0,.25,1) infinite; }
}
@keyframes dc-miniflip-spin {
  0%, 46%   { transform: rotateY(0deg); }
  54%, 96%  { transform: rotateY(180deg); }
  100%      { transform: rotateY(360deg); }
}
.dc-miniflip-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: #fff; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 12px; text-align: center;
  box-shadow: 0 2px 4px rgba(20,22,16,.05), 0 18px 34px -14px rgba(20,30,40,.42);
}
.dc-miniflip-back { transform: rotateY(180deg); }
.dc-miniflip-front .dcr-vgender {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #fff;
  background: var(--lime); padding: 2px 11px; border-radius: 999px;
}
.dc-miniflip-front .dcr-vword {
  font-family: var(--serif); font-size: 22px; font-weight: 700;
  color: var(--lime); letter-spacing: -.02em; line-height: 1.05;
}
.dc-miniflip-back .dc-miniflip-def {
  font-family: var(--serif); font-size: 14px; line-height: 1.35;
  color: var(--ink-2); font-style: italic;
}
.dc-miniflip-back::before {
  content: "DE"; font-size: 8px; font-weight: 800; letter-spacing: .1em;
  color: var(--ink-3); position: absolute; top: 10px; left: 0; right: 0;
}

/* Review tab: list of large option cards (no central card) */
.dc-card.is-review { background: transparent; box-shadow: none; padding: 0; }
.dc-wrap:has(.dc-card.is-review) .dc-sliver { display: none; }
.dc-review { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dcr-item {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border-radius: 20px; padding: 16px 20px;
  box-shadow: 0 2px 4px rgba(20,22,16,.04), 0 18px 40px -24px rgba(20,30,40,.20);
  cursor: pointer; transition: transform .16s, box-shadow .2s;
}
.dcr-item:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,22,16,.05), 0 26px 52px -24px rgba(20,30,40,.28); }
.dcr-ic { flex-shrink: 0; width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: rgba(37,167,222,.12); color: var(--lime-dark); }
.dcr-ic svg { width: 26px; height: 26px; }
.dcr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dcr-title { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.dcr-sub { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.dcr-n { flex-shrink: 0; font-size: 22px; font-weight: 800; color: var(--ink); font-feature-settings: "tnum"; }
.dcr-arrow { flex-shrink: 0; color: var(--ink-3); display: inline-flex; }
.dcr-arrow svg { width: 18px; height: 18px; }
/* mini vocab card as the lead of the Vocabulary row — smaller, floating, tilted */
.dcr-item.has-mini { padding-left: 26px; }
.dcr-vcard {
  flex-shrink: 0; width: 80px; min-height: 78px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 9px 6px; border-radius: 14px; background: #fff;
  box-shadow: 0 2px 4px rgba(20,22,16,.05), 0 14px 28px -10px rgba(20,30,40,.38);
  transform: rotate(-5deg);
  margin: -8px 6px -8px -10px;
}
.dcr-vgender { font-size: 8px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--lime); padding: 1px 7px; border-radius: 999px; }
.dcr-vword { font-size: 15px; font-weight: 800; color: var(--lime); letter-spacing: -.02em; line-height: 1; }
.dcr-vex { font-family: var(--serif); font-size: 8.5px; color: var(--ink-3); line-height: 1.15; text-align: center; }
@keyframes dcr-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .dc-card.is-review.swap .dcr-item { animation: dcr-in .34s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i) * 50ms); }
}
@media (max-width: 600px) {
  .dcr-item { padding: 13px 15px; gap: 13px; }
  .dcr-ic { width: 46px; height: 46px; border-radius: 13px; }
  .dcr-ic svg { width: 22px; height: 22px; }
  .dcr-title { font-size: 16px; }
  .dcr-sub { font-size: 12.5px; }
  .dcr-n { font-size: 19px; }
  .dcr-vcard { width: 68px; min-height: 66px; }
}

/* New-words tab: flip card (front: word in context · back: plain-German meaning) */
.dc-card.is-flip { background: transparent; box-shadow: none; padding: 0; perspective: 1500px; }
.dnv-counter { font-size: 13px; font-weight: 700; color: var(--ink-3); margin: 0 0 14px 4px; }
.dnv {
  position: relative; width: 100%;
  height: clamp(330px, 52vw, 360px);
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
}
.dnv.flipped { transform: rotateY(180deg); }
.dnv-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: #fff; border-radius: 28px;
  padding: 30px 28px 40px;
  box-shadow: 0 2px 4px rgba(20,22,16,.04), 0 30px 70px -28px rgba(20,30,40,.28);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.dnv-back { transform: rotateY(180deg); }
.dnv-gender {
  font-size: 13px; font-weight: 800; letter-spacing: .04em; color: #fff;
  background: var(--lime); padding: 5px 16px; border-radius: 999px; margin-bottom: 16px;
}
.dnv-word {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: clamp(30px, 4.4vw, 40px); font-weight: 800; letter-spacing: -0.03em; color: var(--lime);
}
.dnv-word.sm { font-size: 24px; color: var(--ink); margin-bottom: 12px; }
.dnv-spk { color: var(--ink-3); display: inline-flex; }
.dnv-spk svg { width: 22px; height: 22px; }
.dnv-pos { margin-top: 8px; font-size: 15px; color: var(--ink-3); font-weight: 600; }
.dnv-ex { margin-top: 22px; font-family: var(--serif); font-size: 20px; line-height: 1.4; color: var(--ink); max-width: 30ch; }
.dnv-ex u { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dnv-news { position: absolute; top: 22px; right: 24px; color: var(--ink-3); opacity: .28; }
.dnv-news svg { width: 30px; height: 30px; }
.dnv-test {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px; padding: 9px 18px;
  border-radius: 999px; background: #F1F1EC;
  font-size: 14px; font-weight: 700; color: var(--ink);
}
.dnv-test svg { width: 17px; height: 17px; color: var(--ink-2); }
.dnv-tags { display: flex; gap: 8px; margin-top: 18px; }
.dnv-lv { font-size: 12px; font-weight: 800; color: #fff; padding: 2px 10px; border-radius: 999px; background: var(--a1); }
.dnv-lv.lv-a1 { background: var(--a1); } .dnv-lv.lv-a2 { background: var(--a2); }
.dnv-lv.lv-b1 { background: var(--b1); } .dnv-lv.lv-b2 { background: var(--b2); }
.dnv-lv.lv-c1 { background: var(--c1); }
.dnv-theme { font-size: 12px; font-weight: 700; color: var(--ink-2); background: #EFEFEA; padding: 2px 10px; border-radius: 999px; }
.dnv-back-label { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lime-dark); margin-bottom: 14px; }
.dnv-def { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 32ch; }
.dnv-hint { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.dc-task-0 { top: -30px; left: -58px; }
.dc-task-1 { top: 34%; right: -104px; bottom: auto; }
.dc-task-2 { top: 42%; left: -98px; bottom: auto; }
.dc-task-3 { bottom: -26px; right: -52px; }
@keyframes dc-float { 0%, 100% { transform: translateY(0) rotate(var(--tr, 0deg)); } 50% { transform: translateY(-9px) rotate(var(--tr, 0deg)); } }
.dc-task-0 { --tr: -3deg; } .dc-task-1 { --tr: 3deg; } .dc-task-2 { --tr: 2deg; } .dc-task-3 { --tr: -2deg; }
@media (prefers-reduced-motion: reduce) { .dc-task { animation: none; } }

@media (max-width: 1040px) {
  .dc-task-0 { top: -22px; left: -10px; }
  .dc-task-1 { top: -34px; right: -6px; }
  .dc-task-1 .dc-miniflip { width: 124px; height: 94px; }
  .dc-task-2, .dc-task-3 { display: none; }
}
@media (max-width: 600px) {
  .dc-tabs { width: 100%; }
  .dc-tab { flex: 1; padding: 11px 8px; font-size: 13px; }
  .dc-card { padding: 24px 20px; border-radius: 24px; }
  .dc-row { flex-direction: column; gap: 14px; }
  .dc-time { align-self: flex-start; }
  /* floating chips reflow into a tidy row UNDER the card */
  .dc-task-1 .dc-miniflip { width: 120px; height: 90px; }
  .dc-miniflip-front .dcr-vword { font-size: 19px; }
  .dc-miniflip-back .dc-miniflip-def { font-size: 12.5px; }
  .dc-wrap { display: flex; flex-direction: column; }
  .dc-card { order: 1; }
  .dc-tasks {
    order: 2; position: static; inset: auto; z-index: auto;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin-top: 16px;
  }
  .dc-task,
  .dc-task-0, .dc-task-1, .dc-task-2, .dc-task-3 {
    position: static; top: auto; left: auto; right: auto; bottom: auto;
    animation: none; --tr: 0deg; display: inline-flex;
  }
}

/* ---------- LEVELS ---------- */
.levels {
  padding: var(--section-y) 0;
  position: relative;
  overflow: hidden;
}
.levels .container { position: relative; z-index: 1; }
.levels-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  margin-top: 60px;
}
@media (max-width: 900px) { .levels-grid { grid-template-columns: repeat(2, 1fr);} }
.level-card {
  padding: 28px 22px 24px; border-radius: 20px;
  background: #fff; border: none;
  box-shadow: 0 1px 2px rgba(20,22,16,.04), 0 10px 28px -14px rgba(20,22,16,.10);
  transition: transform .25s, box-shadow .25s;
}
.level-card:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(20,22,16,.05), 0 30px 60px -25px rgba(20,30,0,.2);}
.level-card .label {
  font-size: 14px; font-weight: 900; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 6px;
  color: #fff; display:inline-block;
}
.level-card .name { font-size: 17px; font-weight: 700; margin-top: 14px; letter-spacing: -0.01em;}
.level-card .desc { font-size: 13px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; font-family: var(--serif);}
.level-card .word {
  font-family: var(--serif); font-size: 22px; font-weight: 500; font-style: italic;
  margin-top: 22px; color: var(--ink);
  padding-top: 16px; border-top: 1px solid var(--border);
}
.level-card .word small { display:block; font-family: var(--font); font-style: normal; font-size: 11px; color: var(--ink-3); margin-top: 4px; letter-spacing: .04em;}
.level-card.a1 .label{background: var(--a1);}
.level-card.a2 .label{background: var(--a2);}
.level-card.b1 .label{background: var(--b1);}
.level-card.b2 .label{background: var(--b2);}
.level-card.c1 .label{background: var(--c1);}
.level-card.c2 .label{background: var(--c2);}
.level-card.c1plus .label{background: var(--c1plus);}

/* ---------- NUMBERS (refactored: clean editorial cards) ---------- */
.stats {
  padding: 120px 0;
  background: #FAF8EE;
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.stats::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 400px at 20% 0%, rgba(37,167,222,0.18), transparent 60%),
    radial-gradient(600px 300px at 90% 100%, rgba(37,167,222,0.12), transparent 60%);
  pointer-events: none;
}
.stats .container { position: relative; }
.stats-head {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  margin-bottom: 60px;
  gap: 14px;
}
.stats-head .kicker { color: #fff; background: var(--lime); border-color: var(--lime); }
.stats-head::after { content: none; }
.stats-head h2 {
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 900; letter-spacing: -0.03em; line-height: 1;
  margin: 0; max-width: 18ch;
}
.stats-head h2 .serif { font-family: var(--serif); font-weight: 500; font-style: italic; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stats-grid::before, .stats-grid::after { content: none; }
.stat {
  position: relative;
  background: #fff;
  border: none;
  border-radius: 20px;
  padding: 36px 28px 32px;
  display: flex; flex-direction: column;
  min-height: 220px;
  box-shadow: 0 1px 2px rgba(20,22,16,.04), 0 10px 28px -14px rgba(20,22,16,.09);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(20,22,16,.05), 0 20px 40px -20px rgba(0,0,0,0.15); }
.stat:nth-child(2) { background: var(--ink); color: #fff; }
.stat:nth-child(2) .num { color: var(--lime); }
.stat:nth-child(2) .label { color: rgba(255,255,255,0.7); }
.stat:nth-child(2)::before {
  content: "★"; position: absolute; top: 18px; right: 22px;
  font-size: 14px; color: var(--lime);
}
.stat .num {
  font-size: clamp(56px, 5.5vw, 80px);
  font-weight: 900; letter-spacing: -0.04em; line-height: 0.95;
  font-feature-settings: "tnum";
  margin-bottom: auto;
  display: inline-block;
}
.stat .num .serif { font-family: var(--serif); font-weight: 500; font-style: italic; color: var(--ink-2); }
.stat .label {
  font-size: 13px; font-weight: 500;
  line-height: 1.45;
  color: var(--ink-2);
  margin-top: 18px;
  letter-spacing: 0.01em;
}
@media (max-width: 1000px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .stats { padding: 80px 0; }
  .stats-grid { grid-template-columns: 1fr; gap: 14px; }
  .stat { min-height: 0; padding: 28px 24px; }
  .stat .num { font-size: 64px; }
}

/* ---------- PRICING (paywall-style) ---------- */
.pricing {
  padding: var(--section-y) 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(37,167,222,0.12), transparent 70%),
    var(--bg);
}

/* Compare table */
.compare-card {
  max-width: 720px;
  margin: 60px auto 50px;
  background: #fff;
  border: none;
  border-radius: 24px;
  padding: 28px 32px;
  box-shadow: 0 1px 2px rgba(20,22,16,.04), 0 16px 44px -20px rgba(20,22,26,.12);
}
.compare-head h4 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.compare-table thead th {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-3);
  text-align: center;
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--border);
}
.compare-table thead th.col-pro {
  color: var(--lime-dark);
}
.compare-table thead th:first-child { text-align: left; width: 50%;}
.compare-table tbody td {
  padding: 14px 0;
  font-size: 15px;
  border-bottom: 1px solid rgba(20, 22, 26, 0.06);
  text-align: center;
  color: var(--ink-2);
}
.compare-table tbody tr:last-child td { border-bottom: 0;}
.compare-table tbody td.row-label {
  text-align: left;
  color: var(--ink);
  font-weight: 600;
}
.compare-table tbody td.cell-free { color: var(--ink-3);}
.compare-table tbody td.cell-pro strong {
  font-weight: 700;
  color: var(--ink);
}
.cmp-icon { font-weight: 700; font-size: 16px; line-height: 1; display: inline-block; }
.cmp-icon.cmp-yes, .cmp-icon.cmp-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 50%;
  border: 2px solid; font-size: 12px; vertical-align: middle;
}
.cmp-icon.cmp-yes,
.cell-pro .cmp-icon.cmp-yes { border-color: var(--lime-dark); color: var(--lime-dark); }
.cmp-icon.cmp-no { border-color: var(--border); color: var(--ink-3); opacity: 1; }
.cmp-icon.cmp-inf { font-size: 26px; font-weight: 800; color: var(--lime-dark); vertical-align: middle; }
.cell-pro .cmp-icon.cmp-inf { color: var(--lime-dark); }
.cell-free .cmp-icon.cmp-inf { color: var(--ink-3); }

/* Plans grid */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 920px;
  margin: 0 auto 32px;
}
@media (max-width: 800px) {
  .plans-grid { grid-template-columns: 1fr; }
}
.plan-card {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 22px 22px 20px 56px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .2s, transform .15s, box-shadow .2s;
  display: block;
  width: 100%;
}
.plan-card:hover { border-color: var(--ink-3); transform: translateY(-2px) rotateX(2deg); box-shadow: 0 8px 24px rgba(20,22,26,0.06);}
.plan-card { transform-style: preserve-3d; perspective: 800px; transition: border-color .2s, transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .25s; }
.plan-card.is-highlight {
  border-color: var(--lime-dark);
  background: linear-gradient(180deg, rgba(37,167,222,0.06), #fff);
  box-shadow: 0 12px 32px -10px rgba(37,167,222,0.45), 0 4px 12px rgba(20,22,26,0.05);
  transform: translateY(-4px);
}
.plan-card.is-highlight::before {
  content: "Mais popular";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lime);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 2;
}
html[lang="de"] .plan-card.is-highlight::before { content: "Am beliebtesten"; }
html[lang="en"] .plan-card.is-highlight::before { content: "Most popular"; }
.plan-card.is-selected {
  border-color: var(--lime-dark);
  /* ring via shadow — no border-width/padding change, so the radio and
     text never shift when a plan is selected */
  box-shadow: inset 0 0 0 1px var(--lime-dark);
}
.plan-card.is-selected.is-highlight {
  box-shadow: inset 0 0 0 1px var(--lime-dark), 0 0 0 3px rgba(37,167,222,0.2);
}
.plan-radio {
  position: absolute;
  left: 20px;
  top: 25px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: #fff;
  transition: all .2s;
}
.plan-card.is-selected .plan-radio {
  background: var(--lime-dark);
  border-color: var(--lime-dark);
}
.plan-card.is-selected .plan-radio::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 6.5l2.8 2.8L10 3.7'/></svg>") center/contain no-repeat;
}
.plan-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.plan-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.plan-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--lime) 0%, #4FBEE8 100%);
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px -4px rgba(37, 167, 222, 0.55), 0 0 0 1px rgba(0,0,0,0.04);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: plan-badge-pulse 2.4s ease-in-out infinite;
}
.plan-badge::before {
  content: '★';
  font-size: 9px;
  line-height: 1;
}
.plan-badge.badge-best {
  background: linear-gradient(135deg, #1583B5 0%, #25A7DE 100%);
  color: #fff;
  font-size: 11px;
  letter-spacing: .04em;
  box-shadow: 0 6px 14px -4px rgba(21,131,181,0.5);
}
.plan-badge.badge-best::before {
  content: '◆';
  color: #fff;
}
@keyframes plan-badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 14px -4px rgba(37, 167, 222, 0.55), 0 0 0 1px rgba(0,0,0,0.04); }
  50% { transform: scale(1.04); box-shadow: 0 8px 20px -4px rgba(37, 167, 222, 0.75), 0 0 0 1px rgba(0,0,0,0.04); }
}
@media (prefers-reduced-motion: reduce) {
  .plan-badge { animation: none; }
}
.plan-price {
  display: flex; align-items: baseline; gap: 6px;
  margin: 4px 0 12px;
}
.plan-amount {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.plan-unit {
  margin-top: -2px;
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
}
.plan-trial {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--lime-dark);
  margin-bottom: 8px;
}
.plan-trial::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime); flex-shrink: 0;
}
.plan-fine {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
  line-height: 1.5;
}

/* Big trial CTA */
.pricing-cta {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 4px;
}
.big-trial-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 34px;
  background: linear-gradient(135deg, #2BAEE3 0%, #1583B5 100%);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  transition: transform .15s, box-shadow .2s, background .2s;
  box-shadow: 0 6px 20px rgba(37,167,222,0.4);
}
.big-trial-btn:hover {
  background: linear-gradient(135deg, #239DD4 0%, #12749F 100%);
  transform: scale(1.03);
  box-shadow: 0 12px 32px rgba(37,167,222,0.5);
}
@keyframes trial-pulse {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(37,167,222,0.4), 0 0 0 0 rgba(37,167,222,0.55);
  }
  50% {
    box-shadow: 0 8px 26px rgba(37,167,222,0.55), 0 0 0 14px rgba(37,167,222,0);
  }
}
.big-trial-btn.is-pulsing {
  animation: none;
}
.big-trial-btn.is-pulsing:hover { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .big-trial-btn.is-pulsing { animation: none; }
}
.big-trial-main {
  font-size: 19px;
  letter-spacing: -0.01em;
}
.big-trial-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.3;
}
.big-trial-sub .cta-free {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
}
.big-trial-sub .cta-then {
  font-size: 12.5px;
  font-weight: 500;
  opacity: .8;
}

/* ---------- FAQ ---------- */
.faq { padding: var(--section-y-tight) 0 var(--section-y);}
.faq-list { max-width: 780px; margin: 40px auto 0; }
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
}
.faq-item summary {
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  cursor: pointer; list-style: none;
  display:flex; justify-content: space-between; align-items: center;
  gap: 20px;
  text-wrap: balance;
}
.faq-item summary::-webkit-details-marker { display: none;}
.faq-item summary::after {
  content: "+"; font-size: 28px; font-weight: 400; color: var(--ink-3);
  transition: transform .2s;
  flex: none;
}
.faq-item[open] summary::after { content: "−";}
.faq-item p {
  font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink-2);
  margin: 14px 0 0; max-width: 680px;
}

/* ---------- CTA ---------- */
.cta-big {
  position: relative;
  padding: var(--section-y-tight) 0 var(--section-y);
  text-align: center;
  background: var(--bg);
}
/* Blue glow bleeds UP into the section above instead of being clipped at the top edge */
.cta-big::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -240px;
  transform: translateX(-50%);
  width: 130%;
  height: 620px;
  background: radial-gradient(ellipse 50% 50% at center, rgba(37,167,222,0.22), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.cta-big .container { position: relative; z-index: 1; }
.cta-big h2 {
  font-size: clamp(48px, 7vw, 100px);
  font-weight: 900; letter-spacing: -0.035em; line-height: 0.95;
  margin: 0 auto 20px; max-width: 900px; text-wrap: balance;
}
.cta-big h2 .serif { font-family: var(--serif); font-weight: 500; font-style: italic;}
.cta-big h2 .mark {
  background: linear-gradient(transparent 8%, var(--lime) 8%, var(--lime) 92%, transparent 92%);
  padding: 0 0.12em;
  border-radius: 4px;
  color: var(--lime-deep);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cta-big p { font-size: 18px; color: var(--ink-2); max-width: 520px; margin: 0 auto 36px;}
.cta-big .ctas { display:flex; gap: 12px; justify-content: center; flex-wrap: wrap;}

/* ---------- FOOTER ---------- */
footer {
  background: var(--ink); color: #B5B5AE;
  padding: 80px 0 40px;
}
footer .foot-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;}
@media (max-width: 800px) { footer .foot-grid { grid-template-columns: 1fr 1fr; } }
footer h5 { color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .04em; margin: 0 0 16px;}
footer ul { list-style: none; padding: 0; margin: 0; font-size: 14px; }
footer ul li { padding: 6px 0; }
footer ul li a:hover { color: #fff; }
footer .brand-col .pitch { font-size: 14px; color: #8A8A84; max-width: 300px; margin-top: 14px; line-height: 1.5;}
footer .bottom {
  display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap; gap: 10px;
  margin-top: 60px; padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
}

/* ---------- UTILS ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);}
.reveal.in { opacity: 1; transform: translateY(0);}

/* German highlight cursor */
.wordHL {
  background: var(--highlight);
  padding: 0 3px; border-radius: 2px;
  cursor: pointer;
}

/* Phone overlay drawings */
.phone-chrome-status {
  position: absolute; top: 0; left: 0; right: 0; height: 44px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px; font-size: 13px; font-weight: 600; color: var(--ink);
  pointer-events: none; z-index: 2;
}

/* ---------- LANGUAGE SWITCHER ---------- */
.lang-switch {
  position: relative;
  display: inline-flex;
  margin-right: 18px;
}
.lang-btn {
  display:inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.lang-btn:hover { border-color: var(--ink); }
.lang-btn .flag { font-size: 16px; line-height: 1; }
.lang-btn .code { letter-spacing: .04em; }
.lang-btn .chev { width: 10px; height: 10px; color: var(--ink-3);}
.lang-menu {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  min-width: 200px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .15s, transform .15s;
  z-index: 60;
}
.lang-switch.open .lang-menu { opacity: 1; pointer-events: auto; transform: translateY(0);}
.lang-menu button {
  width: 100%; text-align: left;
  display:flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.lang-menu button:hover { background: var(--bg-subtle); }
.lang-menu button.active { background: var(--lime); color: var(--lime-deep); font-weight: 700;}
.lang-menu button .flag { font-size: 18px;}

@media (max-width: 820px) {
  .lang-switch { margin-right: 10px; }
  .lang-btn .code { display:none; }
}

/* ---------- ARTICLE WORD POPOVER (Magazin new) ---------- */
.article-mock {
  background: #fff;
  border-radius: 24px;
  padding: 30px 26px 26px;
  max-width: 440px;
  box-shadow: 0 40px 80px -30px rgba(60,40,10,.22), 0 12px 30px -10px rgba(0,0,0,.08);
  position: relative;
}
.article-mock .top {
  display:flex; justify-content: space-between; align-items: center; margin-bottom: 18px;
}
.article-mock .top .back-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-subtle);
  display:inline-flex; align-items:center; justify-content: center;
  font-size: 14px; color: var(--ink);
}
.article-mock .top .save-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-subtle);
  display:inline-flex; align-items:center; justify-content: center;
  color: var(--ink);
}
.article-mock .meta-line {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  display:flex; gap: 10px; align-items: center;
  margin-bottom: 10px;
}
.article-mock .meta-line .level-chip {
  margin-left: auto;
  background: var(--a2); color: #fff;
  padding: 3px 8px; border-radius: 6px;
  letter-spacing: .04em; font-size: 11px;
}
.article-mock h4 {
  font-family: var(--serif);
  font-size: 30px; font-weight: 700;
  line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--ink);
}
.article-mock hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}
.article-mock .vorlesen {
  display:inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; background: var(--highlight);
  border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--lime-dark);
  margin-bottom: 16px;
}
.article-mock .vorlesen svg { width: 12px; height: 12px; }
.article-mock p {
  font-family: var(--serif);
  font-size: 15px; line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.article-mock .tap {
  background: var(--word-hl);
  padding: 1px 4px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  position: relative;
  color: var(--ink);
  font-weight: 500;
}
.article-mock .tap:hover { background: var(--lime); }
.article-mock .tap.active {
  background: var(--lime);
  box-shadow: 0 0 0 2px var(--lime-dark);
}
/* Gender-coloured nouns: blau (der), rosa (die), grün (das) */
.article-mock .tap[data-gender="der"] { background: rgba(107,154,196,0.28); }
.article-mock .tap[data-gender="der"]:hover,
.article-mock .tap[data-gender="der"].active { background: rgba(107,154,196,0.46); box-shadow: 0 0 0 2px var(--der); }
.article-mock .tap[data-gender="die"] { background: rgba(212,139,164,0.30); }
.article-mock .tap[data-gender="die"]:hover,
.article-mock .tap[data-gender="die"].active { background: rgba(212,139,164,0.48); box-shadow: 0 0 0 2px var(--die); }
.article-mock .tap[data-gender="das"] { background: rgba(163,184,32,0.28); }
.article-mock .tap[data-gender="das"]:hover,
.article-mock .tap[data-gender="das"].active { background: rgba(163,184,32,0.46); box-shadow: 0 0 0 2px var(--das); }
/* Popover chip dot mirrors the noun's gender colour */
.word-popover[data-gender="der"] .chip::before { background: var(--der); }
.word-popover[data-gender="die"] .chip::before { background: var(--die); }
.word-popover[data-gender="das"] .chip::before { background: var(--das); }

/* The popover that appears below the article */
.word-popover {
  position: absolute;
  left: 14px; right: 14px;
  bottom: 14px;
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-radius: 20px;
  padding: 18px 18px 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 20px 50px -10px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.06);
  opacity: 0;
  transform: translateY(28px) scale(.94);
  filter: blur(2px);
  pointer-events: none;
  transition: opacity .35s ease, transform .55s cubic-bezier(.16,1.05,.32,1), filter .3s ease;
  z-index: 5;
  border: 1px solid rgba(255,255,255,0.8);
}
.word-popover.show {
  opacity: 1; transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}
.word-popover .grabber {
  width: 32px; height: 4px;
  background: #E5E3DA;
  border-radius: 2px;
  margin: -4px auto 14px;
}
.word-popover .pop-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.word-popover .chip {
  display:inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  background: #fff;
  color: var(--ink);
  border-radius: 8px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  border: 1px solid var(--border-strong);
}
.word-popover .chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime-dark);
  flex-shrink: 0;
}
.word-popover .icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .18s, color .18s, transform .18s, border-color .18s;
}
.word-popover .icon-btn:hover { background: var(--bg-subtle); color: var(--ink); border-color: var(--ink-3); }
.word-popover .icon-btn.active {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.word-popover .def {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.word-popover .def strong {
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.word-popover .translation {
  max-height: 0; overflow: hidden;
  opacity: 0;
  transition: max-height .3s cubic-bezier(.2,.8,.2,1), opacity .25s, margin .3s, padding .3s;
  background: #EAF6FC;
  border-left: 3px solid var(--lime-dark);
  border-radius: 4px 10px 10px 4px;
  padding: 0 12px;
  margin-bottom: 0;
  display: block;
}
.word-popover .translation.show {
  max-height: 140px; opacity: 1;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.word-popover .translation .t-label {
  display: block;
  font-size: 9px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--lime-dark);
  margin-bottom: 2px;
}
.word-popover .translation .t-text {
  font-family: var(--serif);
  font-size: 13px; line-height: 1.4;
  color: var(--ink);
}
.word-popover .save-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px 8px 12px;
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  border: 1px solid var(--ink);
  font-family: var(--font);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .18s, color .18s, transform .12s, border-color .18s;
  margin-top: 4px;
}
.word-popover .save-action svg { flex-shrink: 0; }
.word-popover .save-action:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); }
.word-popover .save-action:active { transform: scale(.97); }
.word-popover .save-action.saved {
  background: var(--lime-dark); color: var(--paper); border-color: var(--lime-dark);
}

/* ---- Grammar-construction underline + popover ---- */
.article-mock .gram {
  cursor: pointer;
  border-bottom: 2.5px solid #4A78C7;
  border-radius: 1px;
  padding-bottom: 0.5px;
  transition: background .16s ease, box-shadow .16s ease;
}
.article-mock .gram:hover { background: rgba(74,120,199,0.10); }
.article-mock .gram.active {
  background: rgba(74,120,199,0.16);
  box-shadow: 0 0 0 1px rgba(74,120,199,0.35);
}
.gram-popover .grabber { background: #E5E3DA; }
.gram-popover .gram-head { margin-bottom: 8px; }
.gram-popover .gram-kind {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #4A78C7;
  margin-bottom: 7px;
}
.gram-popover .gram-kind::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4A78C7; flex-shrink: 0;
}
.gram-popover .gram-title {
  font-family: var(--font);
  font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em;
  margin: 0;
}
.gram-popover .gram-title em { font-family: var(--serif); font-style: italic; font-weight: 500; }
.gram-popover .gram-def {
  font-family: var(--serif);
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
  margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gram-popover .gram-def em { font-style: italic; color: var(--ink); font-weight: 600; }
.gram-popover .gram-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: #4A78C7; color: #fff; border: none; cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  transition: background .18s, transform .12s;
}
.gram-popover .gram-cta:hover { background: #3A66B0; transform: translateY(-1px); }
.gram-popover .gram-cta:active { transform: scale(.97); }
.gram-popover .gram-cta svg { flex-shrink: 0; }

/* Legend chip for the grammar underline (mirrors the word hint) */
.gram-hint {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(74,120,199,0.10);
  border-radius: 10px;
  display: inline-flex; gap: 9px; align-items: center;
  font-size: 13px; color: #36568f; font-weight: 600;
}
.gram-hint .gram-swatch {
  width: 22px; height: 12px; flex-shrink: 0;
  border-bottom: 2.5px solid #4A78C7;
}

/* ---------- ECOSYSTEM SECTION ---------- */
.ecosystem {
  padding: var(--section-y) 0;
  background: var(--bg);
  overflow-x: clip;
}
.ecosystem-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 70px;
  align-items: center;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .ecosystem-grid { grid-template-columns: 1fr; gap: 40px; }
}
.eco-copy h2 { margin: 0 0 20px; }
.eco-copy > p {
  font-size: 17px; line-height: 1.6; color: var(--ink-2);
  max-width: 520px; margin: 0 0 30px;
}
/* Bento grid — Apple-minimal: no black, no icon backgrounds, varied sizes */
.eco-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(110px, auto);
  gap: 8px;
}
.eco-list li {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  transition: border-color .25s, transform .35s cubic-bezier(.2,.8,.2,1);
  position: relative;
  overflow: hidden;
  min-height: 110px;
}
/* Varied sizes — Apple-style bento rhythm.
   5 items: [1] big (2col x 2row), [2] tall (1col x 2row), [3] short (2col), [4] short (1col), [5] full-width bottom */
.eco-list li:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.eco-list li:nth-child(2) { grid-column: span 1; grid-row: span 2; }
.eco-list li:nth-child(3) { grid-column: span 2; }
.eco-list li:nth-child(4) { grid-column: span 1; }
.eco-list li:nth-child(5) { grid-column: 1 / -1; }

.eco-list li:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* No icon container — icon sits free */
.eco-list .icon {
  display: inline-flex;
  width: 28px; height: 28px;
  background: transparent;
  border: none;
  padding: 0;
}
.eco-list .icon svg { width: 28px; height: 28px; color: var(--ink); }

.eco-list .text-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.eco-list .name { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.015em;}
.eco-list .desc { font-size: 13.5px; color: var(--ink-3); line-height: 1.5;}

/* Big tile gets larger title and pulls title up so desc has breathing room */
.eco-list li:nth-child(1) { padding: 32px; }
.eco-list li:nth-child(1) .icon { width: 36px; height: 36px; }
.eco-list li:nth-child(1) .icon svg { width: 36px; height: 36px; }
.eco-list li:nth-child(1) .name { font-size: 22px; letter-spacing: -0.02em;}
.eco-list li:nth-child(1) .desc { font-size: 14.5px; max-width: 340px;}

@media (max-width: 720px) {
  .eco-list { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, auto); }
  .eco-list li:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .eco-list li:nth-child(2),
  .eco-list li:nth-child(3),
  .eco-list li:nth-child(4) { grid-column: span 1; grid-row: span 1; }
  .eco-list li:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  /* Tidy single-column list: compact rows, icon left + text right */
  .eco-list { display: flex; flex-direction: column; gap: 10px; }
  .eco-list li,
  .eco-list li:nth-child(1),
  .eco-list li:nth-child(5) {
    grid-column: auto; grid-row: auto;
    flex-direction: row; align-items: center;
    justify-content: flex-start; gap: 14px;
    min-height: 0; padding: 16px 18px;
    border: none;
    box-shadow: 0 1px 2px rgba(20,22,16,.04), 0 8px 22px -14px rgba(20,22,16,.12);
  }
  .eco-list li .icon,
  .eco-list li:nth-child(1) .icon { width: 26px; height: 26px; flex-shrink: 0; }
  .eco-list li .icon svg,
  .eco-list li:nth-child(1) .icon svg { width: 26px; height: 26px; }
  .eco-list li .name,
  .eco-list li:nth-child(1) .name { font-size: 16px; }
  .eco-list li:nth-child(1) .desc { max-width: none; }
}

/* ---------- ECOSYSTEM device cluster ---------- */
.eco-visual {
  display: flex; justify-content: center; align-items: center;
  position: relative;
  min-height: 480px;
}
.device-cluster {
  position: relative;
  width: 100%; max-width: 520px;
  height: 460px;
  --card-bg: #fff;
  --card-shadow: 0 30px 60px -20px rgba(0,0,0,.25), 0 8px 20px -8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.08);
}
.device-cluster .dev {
  position: absolute;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s;
}
.device-cluster:hover .dev-iphone { transform: translate(0, -8px) rotate(-7deg); }
.device-cluster:hover .dev-watch  { transform: translate(-50%, -54%) rotate(2deg); }
.device-cluster:hover .dev-ipad   { transform: translate(0, -6px) rotate(5deg); }

/* Vorfreude card (shared) */
.vf-card {
  position: absolute; inset: 0;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column;
  gap: 8px;
  font-family: var(--font);
  color: var(--ink);
}
.vf-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  background: var(--lime);
  color: var(--lime-deep);
  border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: .06em;
  line-height: 1.4;
  box-shadow: 0 0 0 1px var(--lime-dark) inset;
}
.vf-word {
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.02em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  color: var(--ink);
}
.vf-gloss {
  font-size: 10px; color: var(--ink-3);
  font-family: var(--serif); font-style: italic;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.vf-lines {
  display: flex; flex-direction: column; gap: 4px; margin-top: 2px;
}
.vf-lines span {
  height: 2px; background: var(--border);
  border-radius: 1px;
}
.vf-lines span:nth-child(1) { width: 85%; }
.vf-lines span:nth-child(2) { width: 70%; }
.vf-lines span:nth-child(3) { width: 90%; }
.vf-pills {
  display: flex; gap: 4px; margin-top: auto;
}
.vf-pills span {
  height: 6px; width: 20px;
  background: var(--lime);
  border-radius: 3px;
}
.vf-dots {
  display: flex; gap: 3px;
}
.vf-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--border);
}
.vf-dots span:first-child { background: var(--lime-dark); }

/* iPhone */
.dev-iphone {
  left: 0; top: 30px;
  width: 170px; height: 350px;
  background: #1A1A1A;
  border-radius: 34px;
  padding: 10px;
  box-shadow: var(--card-shadow);
  transform: rotate(-10deg);
  z-index: 1;
}
.dev-iphone::before {
  /* notch/dynamic island */
  content: "";
  position: absolute; top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 72px; height: 18px;
  background: #000;
  border-radius: 999px;
  z-index: 2;
}
.dev-iphone .dev-screen {
  width: 100%; height: 100%;
  background: #FAFAF7;
  border-radius: 26px;
  position: relative;
  overflow: hidden;
  padding-top: 32px;
}
.vf-iphone { padding: 20px 16px 18px; }

/* Apple Watch */
.dev-watch {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  width: 180px;
  z-index: 3;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.25));
}
.dev-watch-body {
  position: relative;
  width: 180px; height: 220px;
  background: #111;
  border-radius: 46px;
  padding: 14px;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.1) inset,
    0 -6px 10px rgba(255,255,255,.08) inset,
    0 2px 4px rgba(0,0,0,.3);
}
.dev-watch-screen {
  width: 100%; height: 100%;
  background: #000;
  border-radius: 32px;
  position: relative;
  overflow: hidden;
  padding: 16px 14px;
  box-shadow: 0 0 0 3px #0a0a0a inset;
}
.vf-watch {
  padding: 14px;
  color: #fff;
  gap: 10px;
}
.vf-watch .vf-word {
  color: #fff;
  font-size: 17px;
}
.vf-watch .vf-tag {
  background: #25A7DE; color: #FFFFFF;
  font-size: 8px; padding: 2px 7px;
  box-shadow: none;
}
.vf-streak {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: auto;
  padding: 4px 8px 4px 6px;
  background: rgba(37, 167, 222, 0.15);
  border: 1px solid rgba(37, 167, 222, 0.3);
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  color: #25A7DE;
  align-self: flex-start;
}

/* Apple Watch face — premium redesign */
.watch-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 14px 12px 12px;
  color: #fff;
  font-family: var(--font);
  background: radial-gradient(circle at 50% 35%, #0A1A00 0%, #000 65%);
  overflow: hidden;
}
.watch-status {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  color: #25A7DE;
}
.watch-time { font-feature-settings: "tnum"; }
.watch-streak-mini {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 800; color: #25A7DE;
}
.watch-ring-wrap {
  flex: 1;
  position: relative;
  display: grid; place-items: center;
  margin: 4px 0;
}
.watch-ring {
  width: 100%; height: 100%;
  max-width: 130px; max-height: 130px;
  filter: drop-shadow(0 0 8px rgba(37, 167, 222, 0.45));
}
.watch-ring .ring-fg {
  transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1);
}
.dev-watch:hover .watch-ring .ring-fg { stroke-dashoffset: 30; }
.watch-ring-center {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 1px;
}
.watch-art {
  font-family: var(--serif);
  font-size: 9px;
  font-style: italic;
  color: rgba(37, 167, 222, .7);
  letter-spacing: 0.04em;
}
.watch-word {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  text-wrap: balance;
}
.watch-xp {
  display: flex; justify-content: center; align-items: center;
  gap: 5px;
  font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,.7);
  letter-spacing: 0.02em;
}
.watch-xp .watch-dot {
  width: 2px; height: 2px; border-radius: 50%;
  background: rgba(255,255,255,.4);
  display: inline-block;
}
.dev-watch-crown {
  position: absolute;
  right: -5px; top: 70px;
  width: 10px; height: 28px;
  background: linear-gradient(90deg, #3a3a3a, #1a1a1a);
  border-radius: 2px 4px 4px 2px;
}
.dev-watch-btn {
  position: absolute;
  right: -3px; top: 120px;
  width: 6px; height: 40px;
  background: linear-gradient(90deg, #3a3a3a, #1a1a1a);
  border-radius: 0 3px 3px 0;
}
.dev-watch-band {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 110px; height: 50px;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  z-index: -1;
}
.dev-watch-band-top {
  top: -22px;
  border-radius: 20px 20px 4px 4px;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}
.dev-watch-band-bot {
  bottom: -22px;
  border-radius: 4px 4px 20px 20px;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

/* iPad */
.dev-ipad {
  right: 0; top: 60px;
  width: 200px; height: 280px;
  background: #1A1A1A;
  border-radius: 18px;
  padding: 8px;
  box-shadow: var(--card-shadow);
  transform: rotate(8deg);
  z-index: 2;
}
.dev-ipad .dev-screen {
  width: 100%; height: 100%;
  background: #FAFAF7;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.vf-ipad { padding: 16px 14px; }

/* Sync badge floating */
.sync-badge {
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  box-shadow: 0 6px 20px -4px rgba(0,0,0,.1);
  z-index: 10;
}
.sync-badge svg { color: #3478F6; filter: drop-shadow(0 1px 2px rgba(52, 120, 246, 0.25)); }

@media (max-width: 900px) {
  .eco-visual { min-height: 420px; }
  .device-cluster { height: 420px; max-width: 420px; }
  .dev-iphone { width: 140px; height: 290px; left: 0; top: 50px; }
  .dev-watch { width: 150px; }
  .dev-watch-body { width: 150px; height: 190px; }
  .dev-watch-body { padding: 11px; }
  .watch-ring { max-width: 105px; max-height: 105px; }
  .watch-word { font-size: 14px; }
  .watch-art { font-size: 8px; }
  .watch-xp { font-size: 9px; }
  .watch-status { font-size: 9px; }
  .dev-ipad { width: 170px; height: 240px; right: 0; top: 70px; }
}
@media (max-width: 480px) {
  .device-cluster { max-width: 320px; height: 360px; }
  .dev-iphone { width: 110px; height: 230px; top: 40px; }
  .dev-watch { width: 120px; }
  .dev-watch-body { width: 120px; height: 150px; padding: 8px; border-radius: 30px; }
  .dev-watch-screen { border-radius: 22px; padding: 8px 6px; }
  .watch-face { gap: 0; }
  .watch-ring-wrap { margin: 2px 0; }
  .watch-ring { max-width: 80px; max-height: 80px; filter: drop-shadow(0 0 4px rgba(37,167,222,0.4)); }
  .watch-word { font-size: 11px; line-height: 1; }
  .watch-art { font-size: 7px; }
  .watch-xp { font-size: 8px; gap: 3px; }
  .watch-status { font-size: 8px; }
  .watch-status .watch-streak-mini { gap: 2px; }
  .dev-watch-crown { top: 50px; width: 6px; height: 18px; right: -4px; }
  .dev-watch-btn { top: 84px; width: 5px; height: 14px; right: -3px; }
  .dev-watch-band-top, .dev-watch-band-bot { width: 70px; }
  .dev-watch-band-top { top: -16px; }
  .dev-watch-band-bot { bottom: -16px; }
  .vf-watch { padding: 8px; gap: 6px; }
  .vf-watch .vf-word { font-size: 13px; }
  .dev-ipad { width: 140px; height: 200px; top: 60px; }
  .vf-iphone { padding: 14px 10px 10px; }
  .vf-word { font-size: 14px; }
  .vf-gloss { font-size: 9px; }
}

/* ---------- PRICING: trial ribbon ---------- */
.price-card .trial-ribbon {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: rgba(37, 167, 222, 0.15);
  border: 1px dashed var(--lime-dark);
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  color: var(--lime-dark);
  display:flex; align-items: center; gap: 10px;
}
.price-card.pro .trial-ribbon {
  background: rgba(37, 167, 222, 0.15);
  border-color: var(--lime);
  color: var(--lime);
}
.price-card .trial-ribbon .gift {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--lime-deep);
  display:inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900;
  flex: none;
}


.sh-center { text-align: center; margin-left: auto; margin-right: auto; }
.sh-center .kicker { justify-content: center; }
.sh-center h2 { margin-left: auto; margin-right: auto; }
.sh-center p { margin-left: auto; margin-right: auto; }

.think-de {
  padding: var(--section-y) 0 var(--section-y-tight);
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.think-de::before {
  /* Grid bg */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.think-de .container { position: relative; z-index: 1; }
.think-de .sh { text-align: center; margin: 0 auto 80px; max-width: 920px; }
.think-de .sh .kicker {
  justify-content: center;
  color: var(--lime);
}
.think-de .sh .kicker::before {
  background: var(--lime);
}
.think-de .sh h2 {
  font-size: clamp(40px, 5.2vw, 72px);
  font-weight: 900; letter-spacing: -0.035em; line-height: 1.05;
  margin: 0 auto 24px;
  text-wrap: balance;
  color: #fff;
  max-width: 18ch;
}
.think-de .sh h2 .serif {
  font-family: var(--serif); font-weight: 500; font-style: italic; color: #E8E5D0;
}
.think-de .sh h2 .mark {
  background: var(--lime);
  padding: 0.04em 0.16em;
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: #fff;
}
.think-de .sh p {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: #CFCDBF;
  max-width: 56ch;
  margin: 0 auto;
}

/* 3-step flow */
.think-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
  margin-top: 48px;
}
.think-flow::before {
  /* Connecting arrow line */
  content: "";
  position: absolute;
  top: 130px; left: 16%; right: 16%;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(37,167,222,.4) 0, rgba(37,167,222,.4) 8px,
    transparent 8px, transparent 16px);
  z-index: 0;
}
@media (max-width: 900px) {
  .think-flow { grid-template-columns: 1fr; gap: 18px; }
  .think-flow::before { display: none; }
}
.think-step {
  position: relative; z-index: 1;
  padding: 36px 28px 32px;
  background: #1A1A18;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  text-align: left;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, background .3s;
}
.think-step:hover {
  transform: translateY(-4px);
  border-color: rgba(37,167,222,.35);
  background: #1F1F1C;
}
.think-step.is-old {
  opacity: .85;
}
.think-step.is-old .think-step-icon {
  background: #2A2A26;
  filter: grayscale(.4);
}
.think-step.is-best {
  border-color: rgba(37,167,222,.5);
  background: linear-gradient(180deg, rgba(37,167,222,.08), #1A1A18);
}
.think-step-num {
  font-family: var(--serif);
  font-size: 13px; font-style: italic;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.think-step.is-best .think-step-num { color: var(--lime); }
/* Scroll-driven ignite — steps light up in sequence as the section enters */
.think-step.live { border-color: rgba(37,167,222,.45); background: #1F1F1C; }
.think-step.live .think-step-num { color: var(--lime); }
@media (prefers-reduced-motion: no-preference) {
  .think-step.live .think-step-icon { transform: rotate(-3deg) scale(1.03); }
}
.think-step-icon {
  width: 88px; height: 88px;
  background: var(--paper);
  border-radius: 18px;
  display: grid; place-items: center;
  margin: 0 0 22px;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.think-step:hover .think-step-icon {
  transform: rotate(-4deg) scale(1.04);
}
.think-step.is-best .think-step-icon {
  background: var(--lime);
}
.think-step-icon img {
  width: 72px; height: 72px;
  object-fit: contain;
}
.think-step-title {
  font-family: var(--font);
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: #fff;
}
.think-step.is-best .think-step-title {
  color: var(--lime);
}
.think-step-desc {
  font-family: var(--serif);
  font-size: 15px; line-height: 1.55;
  color: #B5B3A6;
  margin: 0;
}
.think-step-desc em {
  color: var(--lime);
  font-style: italic;
}

/* ---------- THEMES ---------- */
.themes {
  padding: var(--section-y) 0;
  background: var(--bg);
}
.themes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.theme-card {
  padding: 36px 30px 40px;
  background: #fff;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 200px;
  position: relative;
  background: #fff;
  transition: background .2s;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.theme-card::before {
  content: counter(theme, decimal-leading-zero);
  counter-increment: theme;
  position: absolute; top: 20px; left: 24px;
  font-family: var(--serif);
  font-size: 14px; font-style: italic;
  color: var(--ink-3);
  letter-spacing: 0;
}
.themes-grid { counter-reset: theme; }
.theme-card .theme-icon {
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: var(--ink-2);
}
.theme-card .theme-icon svg { width: 100%; height: 100%; }
.theme-card .theme-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.theme-card.theme-2 .theme-icon { color: rgba(255,255,255,0.85); }
.theme-card .theme-name {
  font-size: 28px; font-weight: 900; letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--ink);
}
.theme-card .theme-desc {
  font-family: var(--serif);
  font-size: 15px; line-height: 1.45;
  color: var(--ink-2);
  max-width: 30ch;
}
.theme-card:hover {
  background: #EAF6FC;
  transform: translateY(-4px);
  transition: background .25s, transform .35s cubic-bezier(.2,.9,.2,1);
}
.theme-card { transition: background .25s, transform .35s cubic-bezier(.2,.9,.2,1); }
.theme-card .theme-icon { transition: transform .45s cubic-bezier(.2,.9,.2,1); }
.theme-card:hover .theme-icon { transform: rotate(-4deg) scale(1.08); }
/* Consistent themes grid: 5 white cards + 1 blue accent (theme-4) */
.theme-card.theme-0 { background: #fff; }
.theme-card.theme-2 { background: #fff; color: var(--ink); }
.theme-card.theme-2 .theme-icon { color: var(--ink); }
.theme-card.theme-2::before { color: var(--ink-3); }
.theme-card.theme-2 .theme-name { color: var(--ink); }
.theme-card.theme-2 .theme-desc { color: var(--ink-2); }
.theme-card.theme-4 { background: #fff; }
.theme-card.theme-4::before { color: var(--ink-3); }
.theme-card.theme-4 .theme-name { color: var(--ink); }
.theme-card.theme-4 .theme-desc { color: var(--ink-2); }
.theme-card.theme-4 .theme-icon { color: var(--ink-2); }
@media (max-width: 900px) {
  .themes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .themes-grid { grid-template-columns: 1fr; }
  .theme-card { min-height: 160px; }
}

/* ---------- SCROLL PROGRESS BAR ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 9999;
  pointer-events: none;
  background: transparent;
}
.scroll-progress i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--lime), var(--lime-dark));
  transform-origin: 0 0;
  transform: scaleX(0);
  will-change: transform;
  box-shadow: 0 0 10px rgba(37,167,222,0.5);
}

/* ---------- CURSOR FOLLOWER ---------- */
.cursor-follower {
  position: fixed; top: 0; left: 0;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border: 1.5px solid var(--lime-dark);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity .25s, width .25s, height .25s, margin .25s, background .25s, border-color .25s, transform .08s linear;
  background: rgba(37,167,222,0.15);
}
.cursor-follower.is-active { opacity: 0.8; }
.cursor-follower.is-hover {
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  background: var(--lime);
  border-color: var(--lime-dark);
  opacity: 0.6;
}
@media (hover: none), (pointer: coarse) {
  .cursor-follower { display: none; }
}

/* ---------- ENHANCED FOOTER ---------- */
footer .foot-social {
  display: flex; gap: 10px;
  margin-top: 18px;
}
footer .foot-social a {
  height: 38px; padding: 0 15px 0 11px;
  border-radius: 999px;
  border: 1px solid #333;
  display: inline-flex; align-items: center; gap: 9px;
  color: #B5B5AE;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
footer .foot-social .social-handle { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
footer .foot-social a:hover {
  background: var(--lime); color: var(--ink);
  border-color: var(--lime); transform: translateY(-2px);
}
footer .foot-social svg { width: 17px; height: 17px; flex-shrink: 0; }
footer .foot-newsletter {
  margin-top: 18px;
  display: flex; gap: 8px;
  max-width: 360px;
}
footer .foot-newsletter input {
  flex: 1;
  background: transparent;
  border: 1px solid #333;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
}
footer .foot-newsletter input::placeholder { color: #6A6A64; }
footer .foot-newsletter input:focus { border-color: var(--lime); }
footer .foot-newsletter button {
  background: var(--lime); color: var(--ink);
  border: none; border-radius: 8px;
  padding: 0 16px;
  font-family: var(--font); font-weight: 700; font-size: 13px;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
footer .foot-newsletter button:hover { background: var(--lime-dark); transform: translateY(-1px); }
footer .foot-newsletter .ok-msg { color: var(--lime); font-size: 12px; margin-top: 8px; display: none; }
footer .foot-newsletter.is-sent .ok-msg { display: block; }


/* ---------- ÜBUNGEN / EXERCISES ---------- */
.exercises {
  padding: var(--section-y) 0;
  background: #FAF7EC;
  position: relative;
  overflow: hidden;
}
.exercises::before {
  /* Subtle paper texture */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(37,167,222,.06), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(109,40,217,.04), transparent 50%);
  pointer-events: none;
}
.exercises .container { position: relative; z-index: 1; }

.ex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 60px 0 40px;
}
@media (max-width: 900px) {
  .ex-grid { grid-template-columns: 1fr; gap: 18px; }
  .exercises { padding: 100px 0; }
}

.ex-card {
  background: #fff;
  border: none;
  border-radius: 22px;
  padding: 28px 28px 24px;
  box-shadow: 0 1px 2px rgba(20,22,16,.04), 0 12px 32px -18px rgba(20,30,0,.16);
  display: flex; flex-direction: column;
  position: relative;
}

.ex-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 22px;
}
.ex-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
}
.ex-tag img {
  width: 26px; height: 26px;
  object-fit: contain;
}
.ex-level {
  margin-left: 4px;
  padding: 3px 8px;
  background: var(--ink);
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.ex-bottom-min {
  display: flex; align-items: baseline; gap: 14px;
  margin-top: 30px;
  padding: 18px 24px;
  border-top: 1px solid var(--border);
}
.ex-bottom-min-num {
  font-size: 32px; font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-feature-settings: "tnum";
}
.ex-bottom-min-text {
  font-family: var(--serif);
  font-size: 15px; color: var(--ink-2);
  line-height: 1.4;}
/* Hero treatment for "Zehn Übungen nach jedem Artikel" */
.ex-bottom-min.ex-bottom-hero {
  align-items: center;
  gap: 28px;
  margin-top: 36px;
  padding: 28px 28px 30px;
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.ex-bottom-min.ex-bottom-hero::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 320px; height: 320px;
  background: radial-gradient(circle at center, rgba(37,167,222,0.22), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.ex-bottom-numwrap {
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center;
  flex: 0 0 auto;
  z-index: 1;
}
.ex-bottom-min.ex-bottom-hero .ex-bottom-min-num {
  position: relative;
  z-index: 2;
  font-size: clamp(72px, 9vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, var(--ink) 55%, var(--lime-dark) 55%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-feature-settings: "tnum";
}
.ex-bottom-min-num-shadow {
  position: absolute;
  z-index: 1;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(96px, 12vw, 150px);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--lime);
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
  line-height: 1;
}
.ex-bottom-textwrap {
  display: flex; flex-direction: column; gap: 6px;
  position: relative; z-index: 1;
  flex: 1 1 auto;
}
.ex-bottom-min.ex-bottom-hero .ex-bottom-min-text {
  font-family: var(--sans);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}
.ex-bottom-min-sub {
  font-family: var(--serif);
  font-size: 15px; line-height: 1.45;
  color: var(--ink-2);
  font-style: italic;
  max-width: 56ch;
}
@media (max-width: 600px) {
  .ex-bottom-min.ex-bottom-hero { gap: 18px; padding: 22px 18px; }
}
.ex-progress {
  font-family: var(--serif);
  font-size: 13px; font-style: italic;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Question */
.ex-question {
  font-family: var(--serif);
  font-size: 20px; line-height: 1.5;
  color: var(--ink);
  margin: 0 0 14px;
  font-weight: 500;
}
.ex-blank {
  display: inline-block;
  min-width: 70px;
  padding: 0 4px;
  background: linear-gradient(transparent 60%, rgba(37,167,222,.45) 60%);
  font-style: italic;
  color: var(--ink-2);
}

/* Hint pill */
.ex-hint {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(37,167,222,.18);
  border: 1px solid rgba(37,167,222,.4);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--lime-dark);
  margin-bottom: 18px;
  align-self: flex-start;
}
.ex-hint svg { color: var(--lime-dark); }
.ex-hint-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}

/* Passage block (reading comprehension) */
.ex-passage {
  background: #FAF7EC;
  border-left: 3px solid var(--lime);
  border-radius: 4px 12px 12px 4px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.ex-passage-label {
  font-size: 9px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime-dark);
  display: block;
  margin-bottom: 6px;
}
.ex-passage p {
  font-family: var(--serif);
  font-size: 15px; line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.ex-passage em {
  font-style: italic;
  font-weight: 600;
  color: var(--ink);
  background: rgba(37,167,222,.25);
  padding: 0 3px;
  border-radius: 3px;
}

/* Options */
.ex-options {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.ex-opt {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
  text-align: left;
}
.ex-opt:hover {
  border-color: var(--ink-3);
  background: #FCFBF5;
}
.ex-opt:active { transform: scale(.99); }
.ex-radio {
  width: 18px; height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  flex: none;
  position: relative;
  transition: border-color .15s;
}
.ex-opt.is-correct {
  border-color: var(--a2);
  background: #F1F8DC;
}
.ex-opt.is-correct .ex-radio {
  border-color: var(--a2);
  background: var(--a2);
}
.ex-opt.is-correct .ex-radio::after {
  content: "";
  position: absolute; inset: 4px;
  background: #fff;
  border-radius: 50%;
}
/* Dark-mode exercise option hover/correct (background is theme-token driven via
   var(--bg-card) on the base rule, so no separate dark bg override needed). */
html[data-theme="dark"] .ex-opt:hover { background: #2E333D; border-color: var(--ink-3); }
html[data-theme="dark"] .ex-opt.is-correct { background: rgba(76,175,80,.16); border-color: var(--a2); }

/* Feedback */
.ex-feedback {
  margin-top: auto;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(37,167,222,.1), rgba(37,167,222,.04));
  border-radius: 12px;
  font-family: var(--serif);
  font-size: 13px; line-height: 1.5;
  color: var(--ink-2);
  border: 1px dashed rgba(37,167,222,.5);
}
.ex-feedback strong {
  color: var(--ink);
  font-weight: 700;
}
.ex-feedback em {
  font-style: italic;
  color: var(--lime-dark);
  font-weight: 600;
}

/* Bottom strip */
.ex-bottom {
  display: flex; align-items: center; gap: 22px;
  padding: 22px 28px;
  background: var(--ink);
  color: #fff;
  border-radius: 18px;
  margin-top: 30px;
}
.ex-bottom-icon {
  width: 60px; height: 60px;
  background: var(--lime);
  border-radius: 14px;
  display: grid; place-items: center;
  flex: none;
}
.ex-bottom-icon img {
  width: 50px; height: 50px;
  object-fit: contain;
}
.ex-bottom-title {
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.ex-bottom-sub {
  font-family: var(--serif);
  font-size: 14px; line-height: 1.5;
  color: #B5B5AE;
}
@media (max-width: 600px) {
  .ex-bottom { flex-direction: column; align-items: flex-start; padding: 22px; }
  .ex-question { font-size: 18px; }
}

/* ====================================================== */
/* APPLE-STYLE SCROLL REVEAL SYSTEM                         */
/* ====================================================== */

/* Word-by-word reveal: each word slides up from clip mask, with cascade.
   Used for h2's marked with [data-reveal-words]. */
[data-reveal-words] {
  --word-stagger: 60ms;
}
.rw-line {
  display: block;
  overflow: hidden;
  line-height: 1.1;
  padding: 0.05em 0.02em;
}
.rw-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%) rotate(4deg);
  will-change: transform, opacity;
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--rw-delay, 0ms);
}
[data-reveal-words].rw-in .rw-word {
  opacity: 1;
  transform: translateY(0) rotate(0);
}
@keyframes rw-rise {
  from { opacity: 0; transform: translateY(110%) rotate(4deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}

/* Big-text scroll highlight (Copilot Money-style):
   text starts faded → as you scroll into it, words light up one after another.
   Default = dark theme (white text). Light sections override via .sh-light. */
[data-scroll-highlight] {
  color: rgba(255,255,255,.06);
  transition: color .3s;
}
[data-scroll-highlight] .sh-word {
  color: rgba(255,255,255,.06);
  transition: color .35s ease;
  display: inline-block;
}
[data-scroll-highlight] .sh-word.lit {
  color: #fff;
}
/* Light-bg variant: dark text on light bg (used by .allinone etc.) */
[data-scroll-highlight].sh-light,
.sh-light[data-scroll-highlight] {
  color: rgba(20,22,26,.08);
}
[data-scroll-highlight].sh-light .sh-word,
.sh-light [data-scroll-highlight] .sh-word {
  color: rgba(20,22,26,.08);
}
[data-scroll-highlight].sh-light .sh-word.lit,
.sh-light [data-scroll-highlight] .sh-word.lit {
  color: var(--ink);
}
[data-scroll-highlight] .sh-word.lit .mark,
[data-scroll-highlight] .sh-word.lit.is-mark {
  background: var(--lime);
  color: #fff;
  padding: 0.04em 0.16em;
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Hero phone scroll-driven rotate + scale (Apple iPhone reveal vibe).
   Driven by motion.js setting --hero-p (0..1) on .hero-phone-wrap. */
.hero-phone-wrap {
  --hero-p: 0;
  transform:
    perspective(1400px)
    rotateX(calc(var(--rx, 0deg)))
    rotateY(calc(var(--ry, 0deg) + (var(--hero-p) * -8deg)))
    translateY(calc(var(--ty, 0px) + var(--sy, 0px) + (var(--hero-p) * -20px)))
    translateX(var(--tx, 0px))
    scale(calc(var(--sc, 1) - var(--hero-p) * 0.06));
  transition: transform .15s linear;
  will-change: transform;
}

/* Feature phone slide-in */
.feat-visual {
  opacity: 0;
  transform: translateY(60px) scale(.96);
  will-change: transform, opacity;
  transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1);
}
.feat-row.in .feat-visual,
.feat-row .feat-visual.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.feat-row .feat-copy {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1) .15s, transform .9s cubic-bezier(.2,.8,.2,1) .15s;
}
.feat-row.in .feat-copy {
  opacity: 1;
  transform: translateY(0);
}

/* Card cascade for AIO + Themes + Levels + Stats: scale + slide */
.aio-card,
.theme-card,
.level-card,
.stat,
.eco-list li {
  opacity: 0;
  transform: translateY(36px) scale(.97);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.aio-card.in,
.theme-card.in,
.level-card.in,
.stat.in,
.eco-list li.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Section heading kicker shimmer-in */
.sh .kicker { opacity: 0; transform: translateX(-12px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.sh.in .kicker { opacity: 1; transform: translateX(0); }
.sh > p { opacity: 0; transform: translateY(16px); transition: opacity .8s ease .25s, transform .8s cubic-bezier(.2,.8,.2,1) .25s; }
.sh.in > p { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal-words] .rw-word,
  .feat-visual, .feat-row .feat-copy,
  .aio-card, .theme-card, .level-card, .stat, .eco-list li,
  .sh .kicker, .sh > p {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-scroll-highlight] .sh-word { color: inherit !important; }
}

/* ---------- FLY-IN (card lands from the right with rotation) ---------- */
@keyframes flyInRotate {
  0%   { opacity: 0; transform: translate3d(120%, 30px, 0) rotate(18deg) scale(0.92); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}
@keyframes blurFadeIn {
  0%   { opacity: 0; filter: blur(14px); transform: translateY(20px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
[data-fly-in] {
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: center center;
}
[data-fly-in].in {
  animation: flyInRotate 1.05s cubic-bezier(.2,.85,.25,1) both;
}
[data-blur-in] {
  opacity: 0;
  will-change: transform, opacity, filter;
}
[data-blur-in].in {
  animation: blurFadeIn 0.9s cubic-bezier(.22,.65,.25,1) both;
  animation-delay: var(--blur-d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-fly-in], [data-blur-in] {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ============================================================
   MOBILE POLISH — final pass
   ============================================================ */
@media (max-width: 820px) {
  :root {
    --section-y: 88px;
    --section-y-tight: 72px;
  }
  /* Nav */
  .nav { padding: 12px 18px; }
  .nav-brand { font-size: 18px; }
  .nav-brand .logo { width: 30px; height: 30px; }
  .nav-cta { padding: 9px 14px; font-size: 13px; }
  .nav-cta svg { width: 14px; height: 14px; }

  /* Hero */
  .hero { padding-top: 30px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero h1 { font-size: clamp(38px, 11vw, 56px); line-height: 1.0; }
  .hero-sub { font-size: 16px; max-width: 100%; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-ctas .btn-app, .hero-ctas .btn-ghost { width: 100%; justify-content: center; }
  .hero-meta { gap: 18px; }
  .hero-meta strong { font-size: 18px; }
  .hero-visual { height: 480px; margin-top: 8px; }

  /* Section headings */
  .sh h2 { font-size: clamp(30px, 8vw, 44px); }
  .sh p { font-size: 16px; }
  .sh .kicker { font-size: 11px; margin-bottom: 14px; }

  /* All in one — make sure h2 stays readable */
  .allinone .sh h2 { line-height: 1.05; }
  .allinone .sh > p { font-size: 15px; }

  /* Features */
  .feat-row { grid-template-columns: 1fr !important; gap: 28px; }
  .feat-copy h3 { font-size: clamp(26px, 7vw, 36px); }
  .feat-copy p { font-size: 15px; }

  /* Manifesto */
  .manifesto-big { font-size: clamp(28px, 7vw, 38px); }

  /* Demo / cards */
  .demo-grid { grid-template-columns: 1fr !important; }
  .demo-copy h4 { font-size: 22px; }
  .card-face .word { font-size: 32px; }

  /* Editorial / Magazin article mock */
  .editorial .feat-row { grid-template-columns: 1fr !important; gap: 32px; }
  .article-mock { padding: 24px 20px; }
  .article-mock h4 { font-size: 22px; }
  .article-mock p { font-size: 14px; line-height: 1.5; }

  /* Levels */
  .levels-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .level-card { padding: 22px 18px; }
  .level-card .word { font-size: 18px; margin-top: 16px; padding-top: 12px; }

  /* Pricing */
  .plan-card { padding: 26px 22px 24px 54px; }
  .plan-card .price { font-size: 38px !important; }

  /* Themes */
  .theme-card { padding: 28px 22px 32px; min-height: 150px; }
  .theme-card .theme-icon { width: 60px; height: 60px; }

  /* Exercises */
  .ex-bottom-min-num,
  .ex-bottom-min-num-shadow { font-size: clamp(80px, 22vw, 130px) !important; }
  .ex-bottom-textwrap h3 { font-size: clamp(20px, 5.5vw, 26px) !important; }

  /* Think in German — uses .think-flow not .think-grid */
  .think-de { padding: 80px 0 70px; }
  .think-step { padding: 24px 20px; }

  /* Ecosystem — eco-list bento already responds via its own rules */
  .ecosystem-grid { gap: 32px; }

  /* Compare table — fit within the viewport (no horizontal scroll) */
  .compare-card { padding: 22px 16px; }
  .compare-table { min-width: 0; }
  .compare-table thead th { font-size: 11px; padding: 0 0 10px; }
  .compare-table thead th:first-child { width: auto; }
  .compare-table tbody td {
    font-size: 12.5px; padding: 12px 0;
  }
  .compare-table tbody td:first-child {
    padding-right: 8px; line-height: 1.25;
  }
  .compare-table tbody td:not(:first-child),
  .compare-table thead th:not(:first-child) {
    width: 64px; text-align: center; white-space: nowrap;
  }
  .cmp-icon.cmp-inf { font-size: 22px; }
  .cmp-icon.cmp-yes, .cmp-icon.cmp-no { width: 24px; height: 24px; }

  /* Lang switcher dropdown shouldn't overflow viewport edge */
  .lang-menu { right: 0; left: auto; }

  /* FAQ */
  .faq-item summary { font-size: 16px; padding: 16px 12px; }
  .faq-item .ans { font-size: 14px; }

  /* CTA big */
  .cta-big { padding: 80px 0 90px; }
  .cta-big .ctas { flex-direction: column; align-items: stretch; }
  .cta-big .ctas .btn-app, .cta-big .ctas .btn-ghost { width: 100%; justify-content: center; }

  /* Footer */
  footer { padding: 60px 0 30px; }
  footer .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  footer .foot-newsletter { max-width: 100%; }
  footer .bottom { flex-direction: column; align-items: flex-start; text-align: left; gap: 8px; margin-top: 40px; }

  /* Big trial pulse */
  .big-trial-btn { width: 100%; }

  /* Marquee */
  .marquee-track { font-size: 18px; gap: 32px; }

  /* Cursor extras hidden */
  .cursor-follower, .scroll-progress { display: none !important; }
}

@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .hero h1 { font-size: clamp(34px, 11vw, 46px); }
  .levels-grid { grid-template-columns: 1fr !important; }
  .nav-brand span { display: none; }
  .float-card, .floater { display: none; }

  /* Allinone grid 1 column on tiny phones */
  .aio-grid { grid-template-columns: 1fr !important; }

  /* Themes — single column */
  .themes-grid { grid-template-columns: 1fr !important; }

  /* Sync badge text smaller */
  .sync-badge { font-size: 10px; padding: 6px 10px; }
  .sync-badge span { white-space: nowrap; }

  /* Plan badge smaller */
  .plan-badge { font-size: 9px; padding: 4px 8px; }

  /* Magazin article mock — tighter */
  .article-mock { padding: 20px 16px; border-radius: 18px; }
  .article-mock h4 { font-size: 20px; }
  .article-mock p { font-size: 13.5px; }

  /* Demo card flip — slightly smaller */
  .card-deck { width: 280px !important; height: 400px !important; }
  .card-face { padding: 24px 22px; }

  /* Hero meta in 2 columns */
  .hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Hero phone smaller for small phones */
  .phone { width: 230px; }

  /* Tile-phone inside features — smaller */
  .tile-phone .phone { width: 220px; }

  /* Section heading kicker tighter */
  .sh .kicker { font-size: 10px; }

  /* Newsletter input padding so 44 tap target */
  footer .foot-newsletter input { min-height: 44px; }
  footer .foot-newsletter button { min-height: 44px; padding: 0 18px; }
}

@media (max-width: 360px) {
  /* Extra small (iPhone SE 1st gen) */
  .container { padding: 0 14px; }
  .hero h1 { font-size: clamp(30px, 10.5vw, 40px); }
  .sh h2 { font-size: clamp(26px, 8vw, 36px); }
  .card-deck { width: 260px !important; height: 380px !important; }
  .phone { width: 200px; }
  .lang-btn .flag { font-size: 18px; }
  .nav-cta { font-size: 12px; padding: 8px 12px; }
  .ex-bottom-min { flex-direction: column; align-items: flex-start; gap: 8px; }
  .article-mock { padding: 16px 14px; }
}

/* Touch targets — make sure links/buttons hit 44px on mobile */
@media (hover: none) and (pointer: coarse) {
  .nav-cta, .btn-app, .btn-ghost, .big-trial-btn,
  .plan-card .cta, .faq-item summary, .lang-btn,
  .legal-tab, .demo-controls button, .nav-links a {
    min-height: 44px;
  }
  /* Plan-radio bigger tap area */
  .plan-radio { min-width: 24px; min-height: 24px; }
  /* Smooth scroll feel */
  html { -webkit-overflow-scrolling: touch; }
}
/* ============================================================
   HERO CONSTELLATION — tighter cohesive composition (Apple-like)
   ============================================================ */
.hero-constellation {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.con-tile {
  position: absolute;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(20,18,12,0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 8px 24px -8px rgba(20,18,12,0.12),
    0 24px 60px -20px rgba(20,18,12,0.10);
  animation: con-float 9s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  transition: transform .45s cubic-bezier(.2,.85,.25,1), box-shadow .35s, z-index 0s linear .45s;
  z-index: 1;
  will-change: transform;
  box-sizing: border-box;
}
.con-tile:hover {
  z-index: 30;
  transform: translate(0, -8px) rotate(0deg) scale(1.02) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 18px 40px -10px rgba(20,18,12,0.22),
    0 44px 90px -20px rgba(20,18,12,0.16);
  transition-delay: 0s;
}

@keyframes con-float {
  0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  50%      { transform: translate(0, -4px) rotate(calc(var(--rot, 0deg) + 0.15deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .con-tile { animation: none; transform: rotate(var(--rot, 0deg)); }
  .con-dict-card-inner { animation: none !important; }
}

/* ===== 1. MAGAZIN ===== */
.con-magazin {
  --rot: -1.5deg;
  top: 0; left: 20px;
  width: 268px;
  padding: 0;
  overflow: hidden;
  transform: rotate(-1.5deg);
  z-index: 5;
}
.con-magazin-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #B8C9DE 0%, #8BA5C3 100%);
  overflow: hidden;
}
.con-magazin-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.con-magazin-chip {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(255,255,255,0.95);
  color: var(--ink);
  font-size: 9px; font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: .08em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.con-magazin-body { padding: 12px 14px 14px; }
.con-kicker {
  display: inline-block;
  font-size: 9px; letter-spacing: .14em; font-weight: 800;
  color: var(--lime-dark);
  margin-bottom: 6px;
}
.con-magazin h4 {
  font-family: var(--serif);
  font-size: 15px; font-weight: 700; line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 8px;
  text-wrap: balance;
}
.con-magazin-foot {
  display: flex; gap: 10px;
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 600;
}
.con-magazin-foot span { display: inline-flex; align-items: center; gap: 4px; }

/* ===== 2. HÖRTRAINING ===== */
.con-audio {
  --rot: 3deg;
  top: 24px; right: 16px;
  width: 180px;
  padding: 12px;
  background: linear-gradient(180deg, #EAF6FC 0%, #FFFFFF 100%);
  transform: rotate(3deg);
  z-index: 6;
}
.con-audio-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.con-play {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--lime-deep);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -2px rgba(37,167,222,0.55);
  border: none;
}
.con-audio-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.con-audio-label { font-size: 11.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.con-audio-meta { font-size: 9.5px; color: var(--ink-3); }

/* Clean waveform — uniform monochrome with subtle progress fill */
.con-waveform {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2px;
  height: 18px;
  --progress: 5; /* 0..12, how many bars are "played" */
}
.con-waveform span {
  width: 2px;
  background: var(--ink);
  border-radius: 1px;
  opacity: 0.18;
}
.con-waveform span:nth-child(1)  { height: 30%; }
.con-waveform span:nth-child(2)  { height: 55%; }
.con-waveform span:nth-child(3)  { height: 75%; }
.con-waveform span:nth-child(4)  { height: 95%; }
.con-waveform span:nth-child(5)  { height: 65%; }
.con-waveform span:nth-child(6)  { height: 80%; }
.con-waveform span:nth-child(7)  { height: 50%; }
.con-waveform span:nth-child(8)  { height: 70%; }
.con-waveform span:nth-child(9)  { height: 40%; }
.con-waveform span:nth-child(10) { height: 60%; }
.con-waveform span:nth-child(11) { height: 35%; }
.con-waveform span:nth-child(12) { height: 25%; }
/* "Played" bars are fully opaque dark, plus an animated pulse on the cursor */
.con-waveform span:nth-child(-n+5) {
  opacity: 1;
  background: var(--ink);
}
.con-waveform span:nth-child(5) {
  background: var(--lime-dark);
  opacity: 1;
  animation: con-cursor-pulse 1.4s ease-in-out infinite;
}
@keyframes con-cursor-pulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.3); }
}

/* ===== 3. DICTIONARY WORD (auto-flipping card) ===== */
.con-dict {
  --rot: -1deg;
  top: 178px; right: 0;
  width: 222px;
  padding: 0; /* inner card handles padding */
  transform: rotate(-1deg);
  z-index: 4;
  perspective: 1000px;
  background: transparent;
  border: none;
  box-shadow: none;
  height: 130px;
}
/* Re-apply shadow to the inner card, not the perspective wrapper */
.con-dict-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: con-card-flip 8s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes con-card-flip {
  0%, 35%   { transform: rotateY(0deg); }
  47%, 82%  { transform: rotateY(180deg); }
  93%, 100% { transform: rotateY(360deg); }
}
.con-dict-face {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(20,18,12,0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 8px 24px -8px rgba(20,18,12,0.12),
    0 24px 60px -20px rgba(20,18,12,0.10);
  padding: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column;
}
.con-dict-back {
  transform: rotateY(180deg);
  background: #EAF6FC;
}

.con-dict-pills {
  display: flex; gap: 3px;
  margin-bottom: 12px;
  flex-wrap: nowrap;
}
.con-dict-pills .lv {
  font-size: 8.5px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--bg-subtle);
  color: var(--ink-3);
  letter-spacing: .03em;
}
.con-dict-pills .lv.active { background: #6D28D9; color: #fff; }
.con-dict-word {
  display: flex; align-items: flex-start; gap: 10px;
}
.con-art {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 10px; font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  letter-spacing: .02em;
}
.con-art.die { background: #D48BA4; }
.con-art.der { background: #5B8FE0; }
.con-art.das { background: #A3B820; }
.con-w {
  font-family: var(--serif);
  font-size: 18px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -.015em;
  margin-bottom: 3px;
  line-height: 1;
}
.con-g {
  font-size: 10.5px; line-height: 1.4;
  color: var(--ink-3);
  font-family: var(--serif);
  font-style: italic;
}

/* Dict back face — translation */
.con-dict-back .con-dict-trans-label {
  font-size: 9px; letter-spacing: .14em; font-weight: 800;
  color: var(--lime-dark);
  margin-bottom: 6px;
}
.con-dict-back .con-dict-trans {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px; line-height: 1.4;
  color: var(--ink);
  margin: 0 0 8px;
  text-wrap: balance;
}
.con-dict-back .con-dict-ex {
  font-size: 11px; color: var(--ink-3);
  font-family: var(--serif);
  line-height: 1.35;
}
.con-dict-back .con-dict-ex strong { color: var(--ink); font-weight: 700; }

/* ===== 4. GRAMMAR ===== */
.con-grammar {
  --rot: 1.8deg;
  top: 240px; left: 38px;
  width: 196px;
  padding: 12px 14px;
  transform: rotate(1.8deg);
  z-index: 5;
}
.con-g-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.con-g-verb { font-size: 12px; font-weight: 700; color: var(--ink); font-style: italic;}
.con-g-tense { font-size: 8.5px; color: var(--ink-3); letter-spacing: .1em; font-weight: 800; text-transform: uppercase; }
.con-g-table { display: flex; flex-direction: column; gap: 4px; }
.con-g-row { display: flex; align-items: baseline; gap: 8px; font-size: 11px; }
.con-g-pron { color: var(--ink-3); width: 44px; font-weight: 600; }
.con-g-form { color: var(--ink); font-weight: 500; }

/* ===== 5. VERSTEHEN ===== */
.con-verstehen {
  --rot: -2deg;
  top: 330px; left: 0;
  width: 244px;
  padding: 12px 14px;
  transform: rotate(-2deg);
  z-index: 7;
}
.con-q-label {
  font-size: 9px; letter-spacing: .14em; font-weight: 800;
  color: var(--lime-dark);
  margin-bottom: 6px;
}
.con-q-text {
  font-size: 12px; line-height: 1.4;
  color: var(--ink);
  margin: 0 0 8px;
  font-family: var(--serif);
}
.con-q-text em { font-style: normal; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--lime); }
.con-options { display: flex; flex-direction: column; gap: 4px; }
.con-opt {
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--bg-subtle);
  font-size: 10.5px;
  color: var(--ink-2);
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.con-opt.con-correct {
  background: var(--lime);
  color: var(--lime-deep);
  font-weight: 700;
}
.con-opt svg { color: var(--lime-deep); flex-shrink: 0; }

/* ===== 6. PROGRESS ===== */
.con-progress {
  --rot: 1.5deg;
  top: 340px; right: 24px;
  width: 188px;
  padding: 12px 14px;
  transform: rotate(1.5deg);
  display: flex; align-items: center; gap: 12px;
  z-index: 8;
}
.con-ring-wrap {
  position: relative;
  width: 54px; height: 54px;
  flex-shrink: 0;
}
.con-ring { width: 100%; height: 100%; display: block; }
.con-ring-fg { transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); }
.con-ring-num {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}
.con-ring-num .pct {
  font-size: 8.5px; color: var(--ink-3); font-weight: 700;
  margin-left: 1px;
  line-height: 1;
  vertical-align: super;
  position: relative; top: 1px;
}
.con-progress-info { flex: 1; min-width: 0; }
.con-progress-label { font-size: 11px; font-weight: 700; color: var(--ink); margin-bottom: 2px; letter-spacing: -.01em;}
.con-progress-meta { font-size: 9.5px; color: var(--ink-3); font-weight: 600; }

/* Soft radial glow behind whole composition */
.hero-constellation::before {
  content: '';
  position: absolute;
  top: 20%; left: 20%;
  width: 70%; height: 60%;
  background: radial-gradient(ellipse at center, rgba(37,167,222,0.22) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}

@media (max-width: 960px) {
  .hero-constellation { min-height: 520px; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 540px) {
  .hero-constellation { min-height: 500px; max-width: 380px; }
  .con-magazin { width: 224px; left: 10px; }
  .con-audio { width: 158px; right: 8px; }
  .con-grammar { width: 168px; left: 20px; top: 195px; }
  .con-dict { width: 186px; right: -4px; top: 174px; }
  .con-verstehen { width: 218px; top: 320px; }
  .con-progress { width: 162px; top: 335px; right: 10px; }
}
@media (max-width: 420px) {
  .hero-constellation { min-height: 470px; max-width: 340px; }
  .con-magazin { width: 200px; left: 4px; }
  .con-audio { width: 142px; right: 0; }
  .con-grammar { width: 152px; left: 8px; top: 178px; }
  .con-dict { width: 170px; right: -4px; top: 165px; }
  .con-verstehen { width: 196px; top: 295px; left: -6px; }
  .con-progress { width: 152px; top: 305px; right: 0; }
  .con-magazin h4 { font-size: 13px; }
}

/* ============================================================
   APP-FEEL LAYER — press states, glass app bar (mobile)
   ============================================================ */

/* Spring press states — mirrors the app's PressableButtonStyle */
.btn-app:active, .btn-ghost:active, .nav-cta:active,
.big-trial-btn:active, .plan-card:active, .aio-card:active,
.theme-card:active, .level-card:active, .lang-btn:active,
.demo-controls button:active, .appbar-cta:active {
  transform: scale(.965);
  transition-duration: .08s;
}
@media (prefers-reduced-motion: reduce) {
  .hero-float { animation: none; }
}

/* Mobile app-style download bar — liquid glass */
.appbar {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 14px;
  border-radius: 22px;
  background: rgba(250,250,247,0.62);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  backdrop-filter: blur(22px) saturate(185%);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow:
    0 22px 52px -18px rgba(30,38,8,0.34),
    0 6px 16px -8px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.92);
  transform: translateY(calc(100% + 30px));
  transition: transform .55s cubic-bezier(.16,1.05,.32,1);
}
.appbar.show { transform: translateY(0); }
.appbar .appbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.appbar .appbar-logo { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; }
.appbar .appbar-name { font-weight: 900; font-size: 16px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; }
.appbar .appbar-sub { font-size: 11.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar .appbar-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--lime); color: var(--lime-deep);
  padding: 0 18px; min-height: 44px;
  border-radius: 999px;
  font-weight: 700; font-size: 14px;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform .15s ease, background .2s;
}
.appbar .appbar-cta svg { width: 16px; height: 16px; }
@media (max-width: 700px) {
  .appbar { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .appbar { transition: none; }
}

/* True bottom sheets on mobile — popovers are moved to <body> by JS so
   position:fixed escapes transformed ancestors */
@media (max-width: 640px) {
  body > .word-popover {
    position: fixed;
    left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 95;
    border-radius: 24px;
    padding: 18px 18px calc(16px + env(safe-area-inset-bottom, 0px) / 2);
    box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 -10px 60px rgba(0,0,0,.22), 0 24px 60px -10px rgba(0,0,0,.3);
  }
  body > .word-popover::before {
    content: "";
    position: fixed;
    inset: -100vh -20px -20px;
    background: rgba(20,20,16,.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    z-index: -1;
  }
  body > .word-popover.show::before { opacity: 1; }
}

/* ============================================================
   MOBILE-FIRST HERO — desktop-style constellation, scaled down:
   smaller iPhone, cards floating over its edges, no card overlap
   ============================================================ */
@media (max-width: 700px) {
  .hero-visual { height: 500px !important; margin-top: 16px; }
  .hero-phone-wrap, .hero-phone-wrap:hover { transform: none; width: 232px; }
  .hero-phone-wrap .hero-phone { width: 232px; }
  /* keep the tilt gentle on phones to avoid edge overflow */
  .hero-mag { --rot: -3deg; }
  .hero-float-progress { --rot: 3deg; }
  .hero-player { --rot: 0deg; }

  /* side cards anchor to the viewport edges (works down to 320px) */
  .hero-mag {
    top: 1%; left: calc((232px - 100vw) / 2 + 12px);
    width: 178px; padding: 0;
  }
  .hero-mag .hm-cover { height: 92px; }
  .hero-mag .hm-body { padding: 9px 11px 10px; }
  .hero-mag .hm-title { font-size: 13px; }
  .hero-mag .hm-foot { gap: 10px; font-size: 9px; margin-top: 8px; }
  .hero-float-progress {
    top: 26%; right: calc((232px - 100vw) / 2 + 14px); left: auto;
    width: 152px; gap: 9px; padding: 11px 12px;
  }
  .hero-word {
    top: 42%; bottom: auto; left: calc((232px - 100vw) / 2 + 14px);
    width: 156px; padding: 12px 13px;
  }
  .hero-word .hw-word { font-size: 21px; }
  .hero-word .hw-def { font-size: 11.5px; }
  .hero-gram {
    top: 65%; right: calc((232px - 100vw) / 2 + 14px); left: auto;
    width: 172px; padding: 11px 13px;
  }
  .hero-gram .hg-title { font-size: 16px; }
  .hero-gram .hg-ex { font-size: 12px; }
  .hero-player {
    bottom: -10px; top: auto; right: auto;
    left: 50%;
    width: min(354px, calc(100vw - 32px));
    margin-left: calc(min(354px, calc(100vw - 32px)) / -2);
  }
  .hero-player .hp-title { font-size: 13px; }
}

/* ============================================================
   MOTION POLISH — tasteful, base-visible, reduced-motion safe
   ============================================================ */

/* Section kicker line draws in when the header reveals */
@media (prefers-reduced-motion: no-preference) {
  .sh.in .kicker::before,
  .sh .in .kicker::before {
    animation: kicker-draw .8s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes kicker-draw {
    from { width: 0; opacity: 0; }
    to   { width: 28px; opacity: 1; }
  }
}

/* Slow sheen sweep across the big lime CTA */
.big-trial-btn { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .big-trial-btn::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 60%;
    left: -80%;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    animation: cta-sheen 5.5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes cta-sheen {
    0%, 64% { left: -80%; }
    100% { left: 130%; }
  }
}

/* Feature phones lift toward you on hover */
.tile-phone .phone { transition: transform .5s cubic-bezier(.2,.85,.25,1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tile-phone:hover .phone { transform: translateY(-8px); }
}

/* Marquee pauses while being read */
.marquee:hover .marquee-track { animation-play-state: paused; }