/* ============================================================
   Voco — Landing „Sonic Editorial". Reine CSS-Bewegung, kein JS.
   ============================================================ */

@font-face { font-family:"Fraunces"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/fraunces-600.woff2") format("woff2") }
@font-face { font-family:"Fraunces"; font-style:italic; font-weight:500; font-display:swap; src:url("fonts/fraunces-italic-500.woff2") format("woff2") }

:root {
  --blue:#5a9bff; --teal:#34dcc6; --purple:#b98bf7;
  --grad:linear-gradient(105deg,#5a9bff 0%,#34dcc6 48%,#b98bf7 100%);
  --bg:#06070e; --bg-2:#090b15;
  --ink:#f1f3fa; --ink-2:#c2c8d8; --ink-3:#9097ab;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, monospace;
  --maxw:1160px;
}

* { margin:0; padding:0; box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body { font-family:var(--sans); background:var(--bg); color:var(--ink); line-height:1.65; letter-spacing:-.011em; overflow-x:clip; -webkit-font-smoothing:antialiased }
img { max-width:100%; height:auto; display:block }
a { color:inherit; text-decoration:none }
.defs { position:absolute; width:0; height:0 }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 26px; position:relative; z-index:2 }
.grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.skip { position:absolute; left:-9999px; top:0; z-index:200; background:#fff; color:#000; padding:10px 16px }
.skip:focus { left:0 }
:focus-visible { outline:2px solid var(--teal); outline-offset:3px; border-radius:5px }

/* ---------- Fließende Wellenlinien ---------- */
.wave { position:absolute; left:-4%; width:108%; height:130px; z-index:0; pointer-events:none; opacity:.5 }
.wave path { fill:none; stroke:url(#wg); stroke-width:1.6; stroke-linecap:round; animation:waveMove 9s ease-in-out infinite }
.wave .w2 { stroke-width:1.1; opacity:.6; animation-duration:11s; animation-direction:reverse }
.wave-hero { bottom:-8px }
.wave-soft { top:50%; translate:0 -50%; opacity:.32 }
.wave-top { top:-2px }
@keyframes waveMove { 0%,100%{transform:translateX(0) scaleY(1)} 50%{transform:translateX(-48px) scaleY(1.16)} }

/* ---------- Aura: Glühen + emanierende Schallwellen ---------- */
.aura { position:absolute; left:50%; top:36%; translate:-50% -50%; width:min(780px,94vw); aspect-ratio:1; z-index:0; pointer-events:none }
.aura .glow { position:absolute; inset:16%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(90,160,255,.40), rgba(185,139,247,.22) 50%, transparent 74%);
  filter:blur(34px); animation:breathe 7s ease-in-out infinite }
@keyframes breathe { 0%,100%{opacity:.72; transform:scale(.94)} 50%{opacity:1; transform:scale(1.06)} }
.ripples { position:absolute; inset:0 }
.ripples i { position:absolute; left:50%; top:50%; width:36%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(closest-side, transparent 60%, rgba(120,205,235,.55) 69%, rgba(150,140,250,.34) 74%, transparent 80%);
  transform:translate(-50%,-50%) scale(.32); opacity:0; animation:ripple 5s cubic-bezier(.36,0,.5,1) infinite }
.ripples i:nth-child(2){animation-delay:1.25s} .ripples i:nth-child(3){animation-delay:2.5s} .ripples i:nth-child(4){animation-delay:3.75s}
@keyframes ripple { 0%{transform:translate(-50%,-50%) scale(.34); opacity:0} 12%{opacity:.8} 100%{transform:translate(-50%,-50%) scale(2.6); opacity:0} }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:15px;
  border-radius:100px; padding:12px 24px; cursor:pointer; border:1px solid transparent; white-space:nowrap;
  transition:transform .22s ease, box-shadow .3s ease, background-position .5s ease, border-color .25s ease }
.btn-fill { color:#06121f; background:var(--grad); background-size:170% 170%; background-position:0 50%; box-shadow:0 10px 32px -12px rgba(52,220,198,.55) }
.btn-fill:hover { transform:translateY(-2px); background-position:100% 50%; box-shadow:0 18px 46px -12px rgba(185,139,247,.6) }
.btn-line { color:var(--ink); border-color:var(--line-2); background:rgba(255,255,255,.025) }
.btn-line:hover { transform:translateY(-2px); border-color:var(--ink-3) }
.btn-xl { padding:17px 34px; font-size:16.5px }

/* ---------- Header ---------- */
.hdr { position:sticky; top:0; z-index:60; background:rgba(6,7,14,.66); backdrop-filter:blur(16px) saturate(1.4); border-bottom:1px solid var(--line) }
.nav { display:flex; align-items:center; justify-content:space-between; height:72px }
.brand-logo { height:26px; width:auto; filter:drop-shadow(0 2px 12px rgba(90,155,255,.3)) }
.nav-r { display:flex; align-items:center; gap:30px }
.nav-r .lk { font-size:15px; font-weight:500; color:var(--ink-2); transition:color .2s }
.nav-r .lk:hover { color:var(--ink) }

/* Mobiles Menü — reines CSS via <details>, kein JS */
.mmenu { display:none }
.mmenu > summary { list-style:none; cursor:pointer; display:grid; place-items:center;
  width:44px; height:44px; border-radius:12px; color:var(--ink);
  border:1px solid var(--line-2); background:rgba(255,255,255,.03); transition:border-color .2s, background .2s }
.mmenu > summary::-webkit-details-marker { display:none }
.mmenu > summary svg { width:22px; height:22px }
.mmenu[open] > summary { border-color:var(--blue); background:rgba(90,155,255,.1) }
.mmenu-panel { position:absolute; right:0; top:calc(100% + 6px); z-index:70; width:min(80vw,290px);
  display:flex; flex-direction:column; gap:2px; padding:12px;
  border-radius:18px; background:rgba(9,11,21,.97); backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line-2); box-shadow:0 26px 64px -22px rgba(0,0,0,.75); animation:menuIn .22s ease both }
.mmenu-panel a { padding:13px 14px; border-radius:11px; font-size:16px; font-weight:500; color:var(--ink-2); transition:background .18s, color .18s }
.mmenu-panel a:not(.btn):hover { background:rgba(255,255,255,.05); color:var(--ink) }
@keyframes menuIn { from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }

/* Sprachumschalter DE/EN */
.langsw { display:flex; align-items:center; gap:4px; font-size:13px; font-weight:600 }
.langsw .lang-cur { color:var(--ink); padding:4px 8px; border-radius:8px; background:rgba(255,255,255,.08) }
.langsw a { color:var(--ink-3); padding:4px 8px; border-radius:8px; transition:color .2s, background .2s }
.langsw a:hover { color:var(--ink); background:rgba(255,255,255,.05) }
.mmenu-lang { display:flex; align-items:center; gap:6px; margin-top:8px; padding:14px 14px 2px; border-top:1px solid var(--line) }
.mmenu-lang .lang-cur { font-size:15px; font-weight:600; color:var(--ink); padding:4px 8px }
.mmenu-lang a { font-size:15px; font-weight:500; color:var(--ink-3); padding:4px 8px }

/* ---------- Hero ---------- */
.hero { position:relative; padding:46px 0 96px; text-align:center; overflow:hidden }
.hero-in { position:relative; z-index:2 }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3) }
.pip { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 5px rgba(52,220,198,.16); animation:blip 2.6s ease-in-out infinite }
@keyframes blip { 0%,100%{opacity:1} 50%{opacity:.4} }
.logo-stage { position:relative; margin:26px auto 10px; max-width:min(840px,93vw) }
.logo-hero { width:100%; filter:drop-shadow(0 18px 60px rgba(70,150,255,.28));
  clip-path:inset(0 100% 0 0); animation:wipe 1.5s cubic-bezier(.66,.01,.2,1) .2s forwards, floaty 9s ease-in-out 2.2s infinite }
@keyframes wipe { to { clip-path:inset(0 0 0 0) } }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }

h1.tag { font-family:var(--serif); font-weight:600; font-size:clamp(46px,8.6vw,102px); line-height:.92; letter-spacing:-.03em; margin-top:16px }
h1.tag em { font-style:italic; font-weight:500;
  background:linear-gradient(100deg,#5a9bff,#34dcc6,#b98bf7,#34dcc6,#5a9bff); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 6s linear infinite }
@keyframes shimmer { to { background-position:220% 0 } }
.sub { font-size:clamp(17px,1.6vw,20px); color:var(--ink-2); max-width:33em; margin:24px auto 0 }
.cta { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:36px 0 18px }
.meta { font-size:14px; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; margin-top:16px }
.meta b { color:var(--ink-2); font-weight:600 }

/* Erst-Start-Hinweis */
.note { display:flex; align-items:flex-start; gap:10px; width:fit-content; max-width:35em; margin:0 auto;
  padding:11px 16px; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid var(--line);
  font-size:13.5px; line-height:1.5; color:var(--ink-2); text-align:left }
.note svg { flex:none; width:16px; height:16px; margin-top:1px; color:var(--teal) }
.note b { color:var(--ink); font-weight:600 }
.note-c { margin-top:24px }

/* ---------- Gemeinsame Sektions-Überschriften ---------- */
.kick { display:block; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin-bottom:18px }
h2 { font-family:var(--serif); font-weight:600; font-size:clamp(31px,4.8vw,58px); line-height:1.0; letter-spacing:-.03em }
h2 em { font-style:italic; font-weight:500; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.feat-head { max-width:640px; margin:0 auto 64px; text-align:center }
.feat-head p { color:var(--ink-2); font-size:clamp(16px,1.6vw,18px); max-width:30em; margin:20px auto 0 }

/* ---------- Showcase (Live-Demo) ---------- */
.show { position:relative; padding:120px 0 132px; overflow:hidden; border-top:1px solid var(--line) }
.show-glow { position:absolute; left:50%; top:52%; translate:-50% -50%; width:min(1080px,99vw); aspect-ratio:1.5;
  background:radial-gradient(ellipse at center, rgba(52,220,198,.15), rgba(90,155,255,.20) 34%, rgba(185,139,247,.13) 60%, transparent 74%); filter:blur(14px); pointer-events:none; z-index:0 }
.show-head { position:relative; z-index:2; text-align:center; max-width:640px; margin:0 auto 58px }
.show-head p { color:var(--ink-2); font-size:clamp(16px,1.6vw,18px); max-width:32em; margin:22px auto 0 }
.stage { position:relative; z-index:2; width:min(740px,100%); margin:0 auto; padding-bottom:32px }
.win { position:relative; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(31,36,56,.97), rgba(14,17,27,.98));
  box-shadow:0 54px 120px -34px rgba(0,0,0,.92), 0 1px 0 rgba(255,255,255,.07) inset }
.win-bar { display:flex; align-items:center; gap:8px; padding:14px 17px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.04) }
.win-bar .tl { width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.22) }
.win-bar em { margin:0 auto; padding-right:33px; font-style:normal; font-size:12.5px; color:var(--ink-3); font-weight:500 }
.win-body { padding:34px 38px 46px }
.doc-h { font-family:var(--serif); font-weight:600; font-size:24px; letter-spacing:-.01em; margin-bottom:16px }
.doc { font-size:17px; line-height:1.75; color:var(--ink-2); max-width:40em }
.doc .typed { background:linear-gradient(100deg,#7ab0ff,#34dcc6,#c5a0ff); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:500 }
.caret { display:inline-block; width:2px; height:1.1em; margin-left:3px; vertical-align:-.16em; background:var(--teal); animation:blink 1.05s step-end infinite }
@keyframes blink { 50%{opacity:0} }

.pillm { position:absolute; left:50%; bottom:0; translate:-50% 0; z-index:3; display:flex; align-items:center; gap:12px;
  padding:12px 21px; border-radius:100px; border:1px solid rgba(255,255,255,.18);
  background:rgba(15,17,28,.9); backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 28px 60px -18px rgba(0,0,0,.9), 0 0 48px -10px rgba(52,220,198,.5); animation:floaty 7s ease-in-out infinite }
.pm-logo { height:19px; width:auto }
.pm-dot { width:9px; height:9px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 0 rgba(52,220,198,.5); animation:dotpulse 1.8s ease-out infinite }
@keyframes dotpulse { 0%{box-shadow:0 0 0 0 rgba(52,220,198,.5)} 100%{box-shadow:0 0 0 8px rgba(52,220,198,0)} }
.pm-txt { font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap }
.pm-wave { display:flex; align-items:center; gap:3px; height:18px; margin-left:2px }
.pm-wave i { width:3px; border-radius:3px; background:var(--grad); animation:eq 1s ease-in-out infinite }
.pm-wave i:nth-child(odd){height:38%} .pm-wave i:nth-child(even){height:78%}
.pm-wave i:nth-child(1){animation-delay:-.90s}.pm-wave i:nth-child(2){animation-delay:-.20s}.pm-wave i:nth-child(3){animation-delay:-.50s}.pm-wave i:nth-child(4){animation-delay:-.80s}.pm-wave i:nth-child(5){animation-delay:-.10s}.pm-wave i:nth-child(6){animation-delay:-.60s}.pm-wave i:nth-child(7){animation-delay:-.30s}.pm-wave i:nth-child(8){animation-delay:-.70s}.pm-wave i:nth-child(9){animation-delay:-.40s}.pm-wave i:nth-child(10){animation-delay:-.95s}.pm-wave i:nth-child(11){animation-delay:-.15s}.pm-wave i:nth-child(12){animation-delay:-.55s}
@keyframes eq { 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)} }

/* ---------- Features ---------- */
.feat { padding:120px 0 }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.card { position:relative; padding:34px 30px 30px; border-radius:20px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  transition:transform .35s cubic-bezier(.16,1,.3,1), background .35s }
.card::before { content:""; position:absolute; inset:0; border-radius:20px; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, rgba(90,155,255,.55), rgba(52,220,198,.32) 48%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s }
.card:hover { transform:translateY(-6px); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) }
.card:hover::before { opacity:1 }
.ico { display:grid; place-items:center; width:46px; height:46px; border-radius:13px; margin-bottom:22px; background:rgba(90,155,255,.08); border:1px solid var(--line) }
.ico svg { width:24px; height:24px }
.card h3 { font-family:var(--serif); font-weight:600; font-size:23px; letter-spacing:-.02em; margin-bottom:9px }
.card p { color:var(--ink-2); font-size:15.5px; line-height:1.6 }

/* ---------- Flow ---------- */
.flow { position:relative; overflow:hidden; padding:114px 0; background:var(--bg-2); border-top:1px solid var(--line) }
.steps { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; z-index:2 }
.step { position:relative; padding:34px 30px; border-radius:20px; background:rgba(13,15,26,.7); border:1px solid var(--line-2); backdrop-filter:blur(6px); transition:transform .3s ease }
.step:hover { transform:translateY(-5px) }
.step .n { display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; font-family:var(--serif); font-style:italic; font-weight:600; font-size:20px; color:#06121f; background:var(--grad); margin-bottom:20px }
.step h3 { font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:-.02em; margin-bottom:7px }
.step p { color:var(--ink-2); font-size:15px }
kbd { font-family:var(--mono); font-size:.84em; background:rgba(255,255,255,.08); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:7px; padding:2px 8px; color:var(--ink) }

/* ---------- Privacy (asymmetrisch) ---------- */
.priv { position:relative; overflow:hidden; padding:132px 0 }
.priv .aura { top:auto; bottom:-30%; opacity:.7 }
.priv-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(40px,6vw,74px); align-items:center }
.priv-lede h2 { font-size:clamp(36px,5.2vw,68px); line-height:.98; margin-top:2px }
.priv-lede h2 em { font-style:italic; font-weight:500; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.priv-lede .pp { color:var(--ink-2); font-size:clamp(16px,1.5vw,18px); max-width:30em; margin-top:24px }
.priv-card { border-radius:22px; border:1px solid var(--line-2); padding:6px 28px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); backdrop-filter:blur(6px);
  box-shadow:0 46px 100px -46px rgba(0,0,0,.78) }
.pc-head { display:flex; align-items:center; gap:9px; padding:22px 2px 4px; font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal) }
.pc-head svg { width:16px; height:16px }
.pf { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:21px 2px; border-top:1px solid var(--line) }
.pf b { font-family:var(--serif); font-weight:600; font-size:clamp(30px,3vw,40px); line-height:1; letter-spacing:-.02em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.pf span { font-size:13.5px; color:var(--ink-3); text-align:right; max-width:12em }

/* ---------- Support / Spende (warme Karte) ---------- */
.support { position:relative; padding:34px 0 122px }
.donate-card { position:relative; overflow:hidden; display:grid; grid-template-columns:1.4fr auto; gap:clamp(28px,4vw,52px); align-items:center;
  border-radius:26px; border:1px solid var(--line-2); padding:clamp(34px,4vw,54px);
  background:linear-gradient(115deg, rgba(240,168,104,.085), rgba(255,255,255,.02) 46%, rgba(90,155,255,.045)) }
.dc-glow { position:absolute; right:-8%; top:-52%; width:46%; aspect-ratio:1; background:radial-gradient(closest-side, rgba(240,168,104,.24), transparent 70%); filter:blur(18px); pointer-events:none }
.dc-text { position:relative; z-index:2 }
.donate-card .kick { color:#eaa869; margin-bottom:14px }
.dc-text h2 { font-size:clamp(26px,3.3vw,42px); line-height:1.06 }
.dc-text h2 em { font-style:italic; font-weight:500; background:linear-gradient(100deg,#f6c88f,#e89255); -webkit-background-clip:text; background-clip:text; color:transparent }
.dc-text p { color:var(--ink-2); font-size:16px; max-width:36em; margin-top:14px }
.dc-action { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:13px }
.btn-coffee { color:#23130a; background:linear-gradient(105deg,#f7cb91,#ec9a5c); box-shadow:0 12px 34px -12px rgba(236,154,92,.6) }
.btn-coffee:hover { transform:translateY(-2px); box-shadow:0 18px 46px -12px rgba(236,154,92,.72) }
.dc-note { font-size:12.5px; color:var(--ink-3); white-space:nowrap }

/* ---------- Final ---------- */
.final { position:relative; overflow:hidden; padding:130px 0 150px; text-align:center }
.final .show-glow { top:48% }
.final-logo { position:relative; z-index:2; height:48px; width:auto; margin:0 auto 30px; filter:drop-shadow(0 6px 26px rgba(90,160,255,.32)); animation:floaty 9s ease-in-out infinite }
.final h2 { position:relative; z-index:2; font-size:clamp(42px,6.6vw,86px); margin-bottom:18px; line-height:.96 }
.final h2 em { font-style:italic; font-weight:500; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.final > .wrap > p { position:relative; z-index:2; color:var(--ink-2); font-size:18px; margin-bottom:34px }
.final .cta { justify-content:center; position:relative; z-index:2 }
.wave-final { bottom:-8px; opacity:.42 }

/* ---------- Footer ---------- */
footer { border-top:1px solid var(--line); padding:56px 0 42px; color:var(--ink-3); font-size:14px }
.foot { display:flex; flex-wrap:wrap; align-items:flex-start; gap:28px 50px; padding-bottom:30px; margin-bottom:26px; border-bottom:1px solid var(--line) }
.foot-brand { display:flex; flex-direction:column; align-items:flex-start; gap:14px; max-width:300px }
.foot-logo { height:24px; width:auto; opacity:.9 }
.foot-brand p { font-size:13.5px; color:var(--ink-3); line-height:1.55 }
.foot-nav { display:flex; flex-wrap:wrap; gap:11px 26px; margin-left:auto; padding-top:4px }
.foot-nav a { color:var(--ink-2); transition:color .2s } .foot-nav a:hover { color:var(--ink) }
.foot-c { color:var(--ink-3) }
.foot-c a { color:var(--ink-2); text-decoration:underline; text-underline-offset:2px } .foot-c a:hover { color:var(--ink) }

/* ---------- Entrance + Reveal ---------- */
.up { opacity:0; animation:up .85s cubic-bezier(.16,1,.3,1) both }
@keyframes up { from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }
.u1{animation-delay:.1s}.u2{animation-delay:.95s}.u3{animation-delay:1.08s}.u4{animation-delay:1.2s}.u5{animation-delay:1.3s}.u6{animation-delay:1.4s}.u7{animation-delay:1.5s}
@supports (animation-timeline: view()) {
  .reveal { opacity:0; animation:revIn linear both; animation-timeline:view(); animation-range:entry 4% cover 26% }
  @keyframes revIn { from{opacity:0; transform:translateY(32px)} to{opacity:1; transform:none} }
}

/* ---------- Responsive ---------- */
@media (max-width:860px) {
  .nav-r .lk { display:none }
  .langsw { display:none }
  .nav-r { gap:14px }
  .mmenu { display:block }
  .grid { grid-template-columns:repeat(2,1fr) }
  .steps { grid-template-columns:1fr }
  .priv-grid { grid-template-columns:1fr; gap:46px }
  .donate-card { grid-template-columns:1fr; text-align:center }
  .donate-card .dc-text p { margin-left:auto; margin-right:auto }
}
@media (max-width:560px) {
  .wrap { padding:0 18px }
  .hero { padding:24px 0 70px }
  .nav { height:64px }
  .cta .btn { flex:1; justify-content:center }
  .show,.feat,.flow,.priv,.support,.final { padding-top:84px; padding-bottom:84px }
  .grid { grid-template-columns:1fr }
  .win-body { padding:24px 22px 32px }
  .pm-txt { font-size:13px }
  .pm-wave { display:none }
  .dc-action { align-self:stretch }
  .dc-action .btn { width:100%; justify-content:center }
  .foot-nav { margin-left:0 }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important }
  html { scroll-behavior:auto }
  .logo-hero { clip-path:none }
  .up, .reveal { opacity:1 !important; transform:none !important }
  .ripples, .wave, .caret { display:none }
}