:root{
  --pink-a:#fe3c72;--pink-b:#ff655b;--pink-c:#ff8e61;--bg:#08080c;--muted:#9a9aab;--border:#2a2a36;
  --grad:linear-gradient(135deg,var(--pink-a),var(--pink-b) 55%,var(--pink-c));
  --ink:#0f0f0f;--ink-soft:#333;--card-muted:#888;--card-faint:#aaa;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;color:#f4f4f7;-webkit-font-smoothing:antialiased;background:var(--bg)}
.bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 52% at 80% 30%,rgba(254,60,114,.30),transparent 60%),
    radial-gradient(48% 48% at 90% 72%,rgba(255,142,97,.16),transparent 60%),
    radial-gradient(70% 60% at 6% 92%,rgba(120,40,160,.10),transparent 60%);}
.bg::after{content:"";position:absolute;inset:0;opacity:.05;
  background-image:radial-gradient(rgba(255,255,255,.7) 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:overlay}

.stage{position:relative;z-index:1;height:100svh;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px;
  padding:clamp(28px,4vw,64px) clamp(24px,5vw,80px) 64px}

/* left */
.left{max-width:640px;min-width:0}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:clamp(22px,4vh,46px);opacity:0;animation:rise .7s .05s both}
.brand img{width:46px;height:46px;border-radius:13px;box-shadow:0 10px 30px rgba(254,60,114,.35)}
.brand b{font-weight:800;font-size:19px;letter-spacing:-.01em}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:22px;opacity:0;animation:rise .7s .15s both}
.kicker .pulse{width:8px;height:8px;border-radius:50%;background:var(--pink-a);box-shadow:0 0 0 0 rgba(254,60,114,.6);animation:pulse 2.4s infinite}
h1{font-size:clamp(40px,5.4vw,80px);line-height:.98;font-weight:900;letter-spacing:-.035em;max-width:12ch;
  margin-bottom:24px;opacity:0;animation:rise .8s .25s both}
h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
p.lead{color:#c2c2cf;font-size:clamp(16px,1.4vw,20px);line-height:1.55;white-space:nowrap;margin-bottom:clamp(24px,4vh,38px);
  opacity:0;animation:rise .8s .35s both}
.actions{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:rise .8s .45s both}
.store{display:inline-flex;align-items:center;gap:12px;padding:15px 22px;border-radius:16px;background:#000;
  border:1px solid var(--border);text-decoration:none;color:#fff;text-align:left;font-size:11px;line-height:1.2;
  transition:transform .2s,border-color .2s}
.store:hover{transform:translateY(-2px);border-color:#3a3a48}
.store svg{width:26px;height:26px;flex:none}.store b{display:block;font-size:16px;font-weight:700;margin-top:1px}

/* footer pinned to bottom, выровнен по левому краю контента */
.foot{position:absolute;left:0;right:0;bottom:18px;z-index:6;text-align:left;
  padding:0 clamp(24px,5vw,80px);font-size:14px;color:var(--muted);opacity:0;animation:rise .8s .6s both}
.foot a{color:var(--muted);text-decoration:none;transition:color .2s}.foot a:hover{color:#fff}
.foot .dot{margin:0 9px;opacity:.5}

/* deck */
.deck{position:relative;height:clamp(440px,62vh,560px);min-width:0;animation:rise .8s .35s both}
.card{position:absolute;top:50%;left:0;right:0;margin-inline:auto;width:min(384px,92%);
  background:#fff;border:1px solid rgba(15,15,15,.08);border-radius:24px;padding:26px 26px 24px;
  box-shadow:0 36px 80px rgba(0,0,0,.55),0 10px 28px rgba(0,0,0,.35);
  transform:translateY(-50%);transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .5s ease}
.card.slot0{z-index:4;opacity:1;transform:translateY(-50%) rotate(0) scale(1)}
.card.slot1{z-index:3;opacity:.65;transform:translateY(calc(-50% - 18px)) rotate(-5deg) scale(.95)}
.card.slot2{z-index:2;opacity:.4;transform:translateY(calc(-50% - 32px)) rotate(-9deg) scale(.9)}
/* slot3 — невидимый буфер: следующая карта въезжает отсюда в slot2 плавно и в синхрон */
.card.slot3{z-index:1;opacity:0;transform:translateY(calc(-50% - 44px)) rotate(-12deg) scale(.86)}
.card.gone-right{z-index:5;opacity:0;transform:translate(160%,-50%) rotate(16deg)}
.card.gone-left{z-index:5;opacity:0;transform:translate(-160%,-50%) rotate(-16deg)}
.card.noanim{transition:none}

.c-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.pos{font-size:12px;font-weight:700;letter-spacing:1.3px;color:var(--card-faint)}
.cefr{font-size:12px;font-weight:700;color:var(--ink);padding:5px 11px;border-radius:999px;
  background:color-mix(in srgb,var(--c) 18%,transparent)}
.cefr-A1{--c:#22c55e}.cefr-A2{--c:#84cc16}.cefr-B1{--c:#eab308}.cefr-B2{--c:#f97316}.cefr-C1{--c:#ef4444}
.c-word{font-size:40px;font-weight:800;letter-spacing:-1px;color:var(--ink);line-height:1.05}
.c-ph{display:flex;align-items:center;gap:14px;margin-top:18px}
.audio{width:44px;height:44px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--grad);box-shadow:0 10px 24px rgba(255,61,115,.35)}
.audio svg{width:22px;height:22px}
.ipa{font-size:17px;color:var(--ink)}
.c-tr{font-size:20px;font-weight:700;color:var(--ink);margin-top:20px}
.c-def{font-size:16px;line-height:1.4;color:var(--card-muted);margin-top:8px}
.c-div{width:48px;height:3px;border-radius:2px;background:var(--grad);margin:18px 0}
.c-ex p{margin:0}.c-ex .en{font-size:15px;line-height:1.4;color:var(--ink)}
.c-ex .ru{font-size:14px;line-height:1.4;color:var(--card-muted);margin-top:3px}
.c-ex .en b{font-weight:700;color:var(--ink)}.c-ex .ru b{font-weight:600;color:var(--ink-soft)}
.c-ex .row+.row{margin-top:14px}

@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(254,60,114,.6)}70%{box-shadow:0 0 0 12px rgba(254,60,114,0)}100%{box-shadow:0 0 0 0 rgba(254,60,114,0)}}

/* mobile: один экран */
@media(max-width:880px){
  .stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:0;
    padding:20px 22px calc(54px + env(safe-area-inset-bottom));text-align:center;justify-items:center}
  .left{order:2;max-width:520px;display:flex;flex-direction:column;align-items:center}
  .brand{display:none}
  .kicker{margin-bottom:12px;font-size:11px}.kicker .pulse{display:none}
  h1{font-size:clamp(28px,8.5vw,44px);margin-bottom:12px}
  p.lead{font-size:15px;white-space:normal;max-width:36ch;margin-bottom:18px}
  .actions{justify-content:center}
  .store{padding:12px 18px}.store svg{width:22px;height:22px}.store b{font-size:14px}
  .foot{text-align:center;padding:0 22px}
  .deck{order:1;height:clamp(340px,46vh,420px);width:100%;margin-bottom:8px}
  .card{width:min(330px,86vw);padding:22px 22px 20px}
  .c-word{font-size:36px}.c-tr{font-size:18px;margin-top:16px}.c-def{display:none}
  .c-ph{margin-top:14px}.c-div{margin:14px 0}
  .c-ex .row+.row{display:none}
}
@media(max-width:880px) and (max-height:730px){
  .card.slot1,.card.slot2{opacity:0}
  .c-ex{display:none}.c-div{margin:12px 0 0}
  h1{font-size:clamp(25px,7.5vw,36px)}
  p.lead{margin-bottom:14px}
}
@media(prefers-reduced-motion:reduce){.card{transition:none}.pulse{animation:none}}