/* ============================================================
   STEPET landing v2
   Пиксель остаётся в картинках; буквы — обычные и читаемые.
   Заголовки Rubik, текст Nunito, пиксельный шрифт только на
   логотипе и счётчике шагов.
   ============================================================ */

:root{
  --ink:      #22203a;
  --ink-2:    #4f4a70;
  --ink-3:    #7d7799;

  --paper:    #fffdf8;
  --tint:     #f2f8f1;
  --line:     #e6e2d6;

  --green:    #3fae6a;
  --green-d:  #2c8b52;
  --green-l:  #7fd9a6;
  --yellow:   #ffc94a;
  --pink:     #ff9ec4;
  --sky:      #7fd0f0;
  --violet:   #8b6bd8;

  --sky-1:    #7cc9ef;
  --sky-2:    #a9e4fb;
  --sky-3:    #dff4e8;

  --r:        14px;
  --shadow:   0 10px 30px rgba(34,32,58,.10);
  --shadow-s: 0 4px 14px rgba(34,32,58,.10);

  --f-head:   "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-body:   "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-pix:    "Pixelify Sans", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:18px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

.wrap{ width:min(1200px, 100% - 44px); margin-inline:auto; }
.wrap--narrow{ width:min(800px, 100% - 44px); }

/* ─────────────────────────────────────────── типографика ── */
.h2{
  font-family:var(--f-head); font-weight:800;
  font-size:clamp(30px, 3.4vw, 46px);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:.1em 0 .4em;
}
h3{ font-family:var(--f-head); font-weight:700; font-size:21px; line-height:1.3; margin:0 0 .35em; letter-spacing:-.01em; }
h4{ font-family:var(--f-head); font-weight:700; font-size:17px; margin:0 0 .9em; }

.kicker{
  font-family:var(--f-head); font-weight:700;
  font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-d);
  margin:0 0 4px;
}
.sublead{ color:var(--ink-2); font-size:19px; max-width:62ch; margin:0; }
.sechead{ margin-bottom:44px; }
.sechead--center{ text-align:center; }
.sechead--center .sublead{ margin-inline:auto; }

/* ─────────────────────────────────────────── кнопки ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-head); font-weight:700; font-size:17px;
  padding:13px 24px;
  border:2px solid var(--ink);
  border-radius:var(--r);
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  box-shadow:0 4px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--ink); }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }
.btn--primary{ background:var(--green); color:#06301a; }
.btn--primary:hover{ background:#48bd75; }
.btn--ghost{ background:transparent; }
.btn--glass{ background:rgba(255,253,248,.82); backdrop-filter:blur(4px); }
.btn--lg{ font-size:19px; padding:16px 30px; }
.btn--sm{ font-size:15px; padding:9px 16px; box-shadow:0 3px 0 var(--ink); }

/* ─────────────────────────────────────────── шапка ── */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .25s, box-shadow .25s, border-color .25s;
  border-bottom:1px solid transparent;
}
.topbar.is-stuck{
  background:rgba(255,253,248,.94);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
  box-shadow:0 4px 20px rgba(34,32,58,.06);
}
.topbar__inner{ display:flex; align-items:center; gap:22px; height:72px; }

.logo{ display:flex; align-items:center; gap:11px; }
.logo__badge{
  width:40px; height:40px; flex:none;
  border-radius:11px;
  background:var(--green-l);
  border:2px solid var(--ink);
  overflow:hidden;
  display:grid; place-items:center;
}
.logo__badge img{ width:36px; margin-top:6px; image-rendering:pixelated; }
.logo__text{ font-family:var(--f-pix); font-size:25px; letter-spacing:.04em; }

.nav{ display:flex; gap:26px; margin-left:auto; font-family:var(--f-head); font-weight:600; font-size:16px; }
.nav a{ position:relative; padding:6px 0; color:var(--ink); }
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--green); transition:right .22s ease;
}
.nav a:hover::after{ right:0; }
.nav__cta{ display:none; }

/* margin-left:auto держим здесь, а не только на .nav: на телефоне меню
   спрятано, и без этого бургер прилипает к логотипу. */
.topbar__right{ display:flex; align-items:center; gap:12px; margin-left:auto; }

.burger{ display:none; width:42px; height:38px; border:2px solid var(--ink); border-radius:10px; background:var(--paper); cursor:pointer; padding:8px 9px; }
.burger span{ display:block; height:2px; background:var(--ink); margin:4px 0; }

/* ═══════════════════════════════════════════════ ГЕРОЙ ═══ */
/* Ровно один экран: дракон должен быть виден сразу, без прокрутки. */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  isolation:isolate;
}

.world{ position:absolute; inset:0; z-index:0; }

.w-sky{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 42%, var(--sky-3) 74%);
  transition:background 1s ease;
}
/* солнце: ореол живёт на самом блоке, а гранёный диск — на ::after,
   потому что clip-path режет и тени, и потомков. */
.w-orb{
  position:absolute; right:12%; top:12%; z-index:2;
  width:190px; height:190px;
  background:radial-gradient(circle, rgba(255,229,150,.55) 0 26%, rgba(255,229,150,.22) 34%, rgba(255,229,150,0) 62%);
  animation:orbPulse 6s ease-in-out infinite;
}
.w-orb::after{
  content:""; position:absolute; inset:26%;
  background:linear-gradient(150deg, #ffe79c 0 42%, #ffd05a 42% 100%);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  transition:background .8s ease;
}
@keyframes orbPulse{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }

.w-clouds{ position:absolute; inset:0; }
.cl{ position:absolute; width:190px; image-rendering:pixelated; opacity:.95; }
.cl--1{ top:14%; left:-18%; animation:cloud 78s linear infinite; }
.cl--2{ top:26%; left:-32%; width:130px; animation:cloud 104s linear infinite; }
.cl--3{ top:8%;  left:-52%; width:230px; opacity:.75; animation:cloud 132s linear infinite; }
@keyframes cloud{ from{ transform:translateX(0);} to{ transform:translateX(180vw);} }

.w-bird{ position:absolute; width:26px; image-rendering:pixelated; }
.bird--1{ top:34%; left:18%; animation:flit 14s ease-in-out infinite; }
.bird--2{ top:44%; left:74%; width:20px; animation:flit 19s ease-in-out infinite reverse; }
@keyframes flit{
  0%,100%{ transform:translate(0,0) rotate(-4deg); }
  25%    { transform:translate(40px,-26px) rotate(6deg); }
  50%    { transform:translate(84px,6px) rotate(-3deg); }
  75%    { transform:translate(36px,26px) rotate(5deg); }
}

.w-far, .w-hills, .w-ground, .w-front, .w-fence, .w-tower, .rig__stage{
  transition:filter 1s ease;
}
.w-far{
  position:absolute; left:0; right:0; bottom:34%;
  height:min(240px, 26vw);
  background:url("assets/world/far.svg") repeat-x bottom left / auto 100%;
  image-rendering:pixelated;
}
.w-tower{
  position:absolute; left:5%; bottom:37%;
  width:64px; image-rendering:pixelated;
  filter:drop-shadow(0 3px 0 rgba(34,32,58,.12));
}
.w-hills{
  position:absolute; left:0; right:0; bottom:30%;
  height:min(210px, 22vw);
  background:url("assets/world/hills.svg") repeat-x bottom left / auto 100%;
  image-rendering:pixelated;
}
.w-ground{
  position:absolute; left:0; right:0; bottom:0;
  height:32%;
  background:linear-gradient(180deg, #6fc57e 0%, #5cb56d 60%, #4ea562 100%);
}
.w-meadow{
  position:absolute; inset:0;
  background:url("assets/world/meadow.svg") repeat 0 0 / 320px 120px;
  image-rendering:pixelated;
  opacity:.95;
}
.w-fence{
  position:absolute; left:2%; bottom:52%;
  width:200px; image-rendering:pixelated; opacity:.9;
}
.w-front{
  position:absolute; left:0; right:0; bottom:0;
  height:min(120px, 13vw); z-index:3;
  background:url("assets/world/front-grass.svg") repeat-x bottom left / auto 100%;
  image-rendering:pixelated;
}
/* дракон в мире */
.hero__pet{
  position:absolute; left:58%; bottom:9.5%;
  width:min(430px, 34vw);
  z-index:2;
}
.petbox{ position:relative; }

/* справа от дракона: слева плашка налезала на текст */
.pet-hud{
  position:absolute; top:-4%; right:-10%;
  display:flex; align-items:baseline; gap:7px;
  background:rgba(255,253,248,.94);
  border:2px solid var(--ink);
  border-radius:12px;
  padding:7px 14px;
  box-shadow:0 4px 0 rgba(34,32,58,.85);
  white-space:nowrap;
}
.pet-hud__k{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:700; }
.pet-hud__v{ font-family:var(--f-pix); font-size:23px; }
.pet-hud__u{ font-size:13px; color:var(--ink-2); }

/* текст героя */
.hero__inner{ position:relative; z-index:4; padding:104px 0 clamp(170px, 26vh, 300px); }
.hero__copy{ max-width:680px; position:relative; }
/* Мир должен просвечивать, но текст обязан читаться на любом экране.
   Ореол вокруг самого текста, а не полоса поперёк героя: у полосы виден
   край — либо шов в траве, либо выбеленный дракон. */
.hero__copy::before{
  content:""; position:absolute; left:-190px; right:-210px; top:-90px; bottom:-70px;
  background:radial-gradient(62% 66% at 42% 50%,
    rgba(255,253,248,.86) 0 34%, rgba(255,253,248,.42) 62%, rgba(255,253,248,0) 84%);
  pointer-events:none; z-index:-1;
}
.hero__eyebrow{
  display:inline-block;
  font-family:var(--f-head); font-weight:700; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase;
  background:rgba(255,253,248,.86);
  border:2px solid var(--ink);
  border-radius:999px;
  padding:6px 16px;
  margin:0 0 20px;
}
/* Две строки, не три: заголовок в три строки растягивал первый экран
   и уводил дракона под сгиб. */
.hero__title{
  font-family:var(--f-head); font-weight:800;
  font-size:clamp(38px, 4.6vw, 64px);
  line-height:1.04;
  letter-spacing:-.03em;
  margin:0 0 20px;
  text-shadow:0 3px 0 rgba(255,255,255,.55);
}
.hero__title span{ display:block; white-space:nowrap; }
.hero__title em{
  display:block; font-style:normal;
  color:var(--green-d);
  position:relative; width:max-content; max-width:100%;
}
.hero__title em::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:12px;
  background:repeating-linear-gradient(90deg, var(--yellow) 0 12px, transparent 12px 24px);
  z-index:-1;
}
.hero__lead{
  font-size:20px; line-height:1.6;
  color:#2f2c4d;
  max-width:52ch;
  margin:0 0 30px;
  text-shadow:0 1px 0 rgba(255,255,255,.8), 0 2px 10px rgba(255,253,248,.9);
}
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; }

.badges{ display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:0; }
.badges li{
  font-family:var(--f-head); font-weight:600; font-size:14px;
  background:rgba(255,253,248,.8);
  border:2px solid rgba(34,32,58,.75);
  border-radius:999px;
  padding:5px 14px;
}


/* ═══════════════════════════════════════════ РИГ ДРАКОНА ═══ */
/* Геометрия и тайминги — из assets/pets/rig2/rig_manifest.json.
   Настроения меняют только переменные ниже.                     */
.rig{
  --dur:4.2s;
  --lid-l:0%;   --blink-l:77.2%;
  --lid-r:0%;   --blink-r:76.2%;
  --brow-deg:0deg; --brow-dy:0%;
  --ear-droop:0deg;
  --wing-droop:0deg; --wing-amp:7deg;
  --tail-amp:3.5deg;
  --head-drop:0%; --head-bob:.56%;

  position:relative;
  width:100%;
  aspect-ratio:1;
}
.rig__stage{
  position:absolute; inset:0;
  transform-origin:39.9% 86.1%;
  animation:breath var(--dur) ease-in-out infinite;
}
@keyframes breath{
  0%,100%{ transform:scale(1,1); }
  50%    { transform:scale(1.006,1.016); }
}

.l{ position:absolute; image-rendering:pixelated; }

.l--tail { left:57.42%; top:59.65%; width:28.79%; height:27.59%;
           transform-origin:23.82% 31.79%;
           animation:tail var(--dur) ease-in-out infinite; animation-delay:-1.05s; }
.l--wingl{ left:20.26%; top:48.72%; width:17.86%; height:19.86%;
           transform-origin:78.57% 28.51%;
           animation:wingl calc(var(--dur) / 2) ease-in-out infinite; }
.l--wingr{ left:57.34%; top:44.02%; width:25.92%; height:21.85%;
           transform-origin:18.77% 62.04%;
           animation:wingr calc(var(--dur) / 2) ease-in-out infinite; }
.l--body { left:21.45%; top:22.01%; width:46.73%; height:68.42%; }

.head{
  position:absolute; inset:0;
  transform-origin:39.9% 55.8%;
  animation:head var(--dur) ease-in-out infinite;
  animation-delay:-.588s;
}
.l--earl { left:16.75%; top:15.87%; width:11.32%; height:30.70%;
           transform-origin:67.61% 52.73%;
           animation:earl var(--dur) ease-in-out infinite; animation-delay:-1.85s; }
.l--earr { left:60.69%; top:18.66%; width:16.27%; height:23.29%;
           transform-origin:19.12% 54.11%;
           animation:earr var(--dur) ease-in-out infinite; animation-delay:-1.85s; }
.l--head { left:20.73%; top:5.34%;  width:45.93%; height:50.88%; }
.l--browl{ left:25.44%; top:23.92%; width:6.70%;  height:5.42%;
           transform-origin:13% 73%;
           transform:translateY(var(--brow-dy)) rotate(var(--brow-deg)); }
.l--browr{ left:47.05%; top:23.68%; width:7.97%;  height:4.23%;
           transform-origin:82% 66%;
           transform:translateY(var(--brow-dy)) rotate(calc(var(--brow-deg) * -1)); }
.l--mouth{ left:31.18%; top:43.62%; width:15.71%; height:8.69%; }

@keyframes head{
  0%,100%{ transform:translateY(var(--head-drop)) rotate(0deg); }
  50%    { transform:translateY(calc(var(--head-drop) - var(--head-bob))) rotate(1.1deg); }
}
@keyframes earl{
  0%,100%{ transform:rotate(var(--ear-droop)); }
  50%    { transform:rotate(calc(var(--ear-droop) - 2.6deg)); }
}
@keyframes earr{
  0%,100%{ transform:rotate(calc(var(--ear-droop) * -1)); }
  50%    { transform:rotate(calc(var(--ear-droop) * -1 + 2.6deg)); }
}
@keyframes wingl{
  0%,100%{ transform:rotate(var(--wing-droop)); }
  50%    { transform:rotate(calc(var(--wing-droop) - var(--wing-amp))); }
}
@keyframes wingr{
  0%,100%{ transform:rotate(calc(var(--wing-droop) * -1)); }
  50%    { transform:rotate(calc(var(--wing-droop) * -1 + var(--wing-amp))); }
}
@keyframes tail{
  0%,100%{ transform:rotate(0deg); }
  50%    { transform:rotate(var(--tail-amp)); }
}

/* веки: полоска кожи с ресницей едет вниз, обрезанная маской глаза */
.eye{ position:absolute; overflow:hidden; }
.eye__lid{ position:absolute; left:0; width:100%; }
.eye__lid img{ width:100%; image-rendering:pixelated; }
.eye--l{
  left:23.44%; top:29.82%; width:9.41%; height:13.24%;
  -webkit-mask:url("assets/dragon/left_clip.png") 0 0 / 100% 100%;
          mask:url("assets/dragon/left_clip.png") 0 0 / 100% 100%;
}
.eye--l .eye__lid{ top:-104.2%; height:127.1%; transform:translateY(var(--lid-l)); }
.eye--l img{ animation:blinkL var(--dur) steps(1,end) infinite; }
.eye--r{
  left:46.25%; top:28.87%; width:11.64%; height:14.19%;
  -webkit-mask:url("assets/dragon/right_clip.png") 0 0 / 100% 100%;
          mask:url("assets/dragon/right_clip.png") 0 0 / 100% 100%;
}
.eye--r .eye__lid{ top:-92.1%; height:113.5%; transform:translateY(var(--lid-r)); }
.eye--r img{ animation:blinkR var(--dur) steps(1,end) infinite; }

@keyframes blinkL{
  0%,23%   { transform:translateY(0); }
  25%      { transform:translateY(var(--blink-l)); }
  29%,70%  { transform:translateY(0); }
  72%      { transform:translateY(var(--blink-l)); }
  76%,100% { transform:translateY(0); }
}
@keyframes blinkR{
  0%,23%   { transform:translateY(0); }
  25%      { transform:translateY(var(--blink-r)); }
  29%,70%  { transform:translateY(0); }
  72%      { transform:translateY(var(--blink-r)); }
  76%,100% { transform:translateY(0); }
}

.rig__shadow{
  position:absolute; left:26%; bottom:7%;
  width:52%; height:4%;
  background:rgba(30,60,40,.18);
  border-radius:50%;
  animation:shadow var(--dur) ease-in-out infinite;
}
@keyframes shadow{ 0%,100%{ transform:scaleX(1); opacity:.9; } 50%{ transform:scaleX(1.04); opacity:.72; } }

/* Настроение на странице одно — радостное; остальные четыре живут в
   приложении. Числа для него взяты из блока moods манифеста. */
.rig[data-mood="happy"]{
  --dur:4.2s; --lid-l:0%; --blink-l:77.2%; --lid-r:0%; --blink-r:76.2%;
  --brow-deg:0deg; --brow-dy:0%; --ear-droop:0deg;
  --wing-droop:0deg; --wing-amp:7deg; --tail-amp:3.5deg; --head-drop:0%;
}

/* реакция на клик */
.rig.is-reacting{ --wing-amp:12deg; --dur:1.1s; }
.hearts{ position:absolute; inset:0; pointer-events:none; }
.heart{
  position:absolute; bottom:38%;
  font-size:22px;
  animation:heart 1.5s ease-out forwards;
}
@keyframes heart{
  0%  { opacity:0; transform:translateY(0) scale(.6); }
  20% { opacity:1; }
  100%{ opacity:0; transform:translateY(-120px) scale(1.15); }
}

/* ═══════════════════════════════════════════ ПОЛОСА ЦИФР ═══ */
.strip{ background:var(--ink); color:var(--paper); padding:34px 0; }
.strip__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.strip__item{ display:flex; flex-direction:column; gap:2px; }
.strip__item b{ font-family:var(--f-pix); font-size:38px; line-height:1; color:var(--yellow); }
.strip__item span{ font-size:15.5px; color:#cfc9e4; line-height:1.45; }

/* ═══════════════════════════════════════════ СЕКЦИИ ═══ */
.sec{ padding:96px 0; }
.sec--tint{ background:var(--tint); }

.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.card{
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:20px;
  box-shadow:0 6px 0 rgba(34,32,58,.9);
  padding:26px 22px 28px;
}
.card p{ margin:0; color:var(--ink-2); font-size:16px; }
.card__ico{
  width:60px; height:60px; margin-bottom:18px;
  border-radius:14px;
  border:2px solid var(--ink);
  background-repeat:no-repeat;
  image-rendering:pixelated;
}
.ico--steps{
  background-color:var(--green-l);
  background-image:linear-gradient(var(--ink) 0 0),linear-gradient(var(--ink) 0 0),linear-gradient(var(--ink) 0 0),linear-gradient(var(--ink) 0 0);
  background-size:11px 11px;
  background-position:10px 36px, 22px 24px, 34px 12px, 44px 34px;
}
.ico--mood{
  background-color:var(--yellow);
  background-image:linear-gradient(var(--ink) 0 0),linear-gradient(var(--ink) 0 0),linear-gradient(var(--ink) 0 0),linear-gradient(var(--ink) 0 0),linear-gradient(var(--ink) 0 0);
  background-size:8px 12px,8px 12px,7px 6px,20px 6px,7px 6px;
  background-position:14px 15px, 34px 15px, 14px 38px, 19px 43px, 34px 38px;
}
.ico--day{
  background-color:var(--sky);
  background-image:linear-gradient(var(--ink) 0 0),linear-gradient(var(--ink) 0 0),linear-gradient(var(--ink) 0 0),linear-gradient(var(--ink) 0 0);
  background-size:22px 22px,6px 6px,6px 6px,46px 6px;
  background-position:18px 12px, 6px 22px, 46px 22px, 5px 42px;
}
.ico--streak{
  background-color:var(--pink);
  background-image:linear-gradient(var(--ink) 0 0),linear-gradient(var(--ink) 0 0),linear-gradient(var(--ink) 0 0),linear-gradient(var(--ink) 0 0);
  background-size:8px 8px;
  background-position:10px 40px, 21px 29px, 32px 18px, 43px 8px;
}

/* ═══════════════════════════════════════════ КАК РАБОТАЕТ ═══ */
.how{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.steps{ list-style:none; padding:0; margin:0 0 34px; display:grid; gap:24px; }
.step{ display:flex; gap:18px; align-items:flex-start; }
.step__n{
  flex:none; width:46px; height:46px;
  display:grid; place-items:center;
  font-family:var(--f-head); font-weight:800; font-size:20px;
  background:var(--green); color:#06301a;
  border:2px solid var(--ink); border-radius:14px;
  box-shadow:0 4px 0 var(--ink);
}
.step p{ margin:0; color:var(--ink-2); font-size:16.5px; }
.how__meta{ margin:14px 0 0; font-size:14.5px; color:var(--ink-3); }

.how__shot{ display:flex; justify-content:center; }
.phone{
  width:288px;
  border:3px solid var(--ink);
  border-radius:34px;
  background:var(--ink);
  padding:12px;
  box-shadow:0 14px 0 rgba(34,32,58,.85), var(--shadow);
  position:relative;
}
.phone::before{
  content:""; position:absolute; left:50%; top:20px; transform:translateX(-50%);
  width:78px; height:7px; border-radius:99px; background:#4a4470; z-index:2;
}
.phone__screen{ aspect-ratio:9/19; border-radius:24px; overflow:hidden; background:var(--paper); }
.phone__slot{
  width:100%; height:100%;
  display:grid; place-items:center;
  padding:14px;
  background:linear-gradient(180deg,#a9e4fb 0%,#dff4e8 44%,#6fc57e 44%,#4ea562 100%);
}
.slot__label{
  font-family:var(--f-head); font-weight:600; font-size:13px; text-align:center;
  background:rgba(255,253,248,.94); border:2px solid var(--ink); border-radius:10px;
  padding:7px 10px; color:var(--ink-2);
}

/* ═══════════════════════════════════════════ ОТЗЫВЫ ═══ */
.reviews{ columns:3; column-gap:22px; }
.review{
  break-inside:avoid;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:20px;
  box-shadow:0 6px 0 rgba(34,32,58,.9);
  padding:22px;
  margin:0 0 22px;
}
.review__top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.review__ava{
  width:40px; height:40px; flex:none;
  border:2px solid var(--ink); border-radius:12px;
  display:grid; place-items:center;
  font-family:var(--f-head); font-weight:800; font-size:17px;
}
.review__who{ font-family:var(--f-head); font-weight:700; font-size:16px; line-height:1.2; }
.review__meta{ font-size:13px; color:var(--ink-3); }
.review__stars{ margin-left:auto; color:#e8a91c; font-size:13px; letter-spacing:1px; }
.review p{ margin:0 0 14px; font-size:16px; color:var(--ink-2); }
.review__stat{
  display:inline-block;
  font-family:var(--f-head); font-weight:700; font-size:13px;
  background:var(--green-l); border:2px solid var(--ink); border-radius:999px;
  padding:3px 12px;
}

/* ═══════════════════════════════════════════ ПОДВАЛ ═══ */
.footer{
  background:var(--ink); color:#d7d2e8;
  position:relative; overflow:hidden;
  padding:56px 0 150px;
}
.footer__grid{ display:grid; grid-template-columns:1.5fr .8fr 1fr .9fr; gap:36px; padding:0 0 34px; }
.footer__brand p{ font-size:15.5px; color:#b9b3d0; margin:14px 0 0; max-width:34ch; }
.footer__wip{ font-size:13.5px !important; color:#847ca8 !important; }
.logo--foot .logo__badge{ background:var(--green); }
.footer__col{ display:grid; gap:10px; align-content:start; font-size:15.5px; }
.footer__col a{ color:#b9b3d0; }
.footer__col a:hover{ color:var(--yellow); }
.footer__bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid #39335c; padding-top:20px;
  font-size:14px; color:#847ca8;
}

/* Земля под подвалом: ночная трава и светлячки. Никакого дракона —
   он остаётся в первом экране, здесь только движение. */
.footer__ground{ position:absolute; left:0; right:0; bottom:0; height:132px; pointer-events:none; }
.footer__ground::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:64px;
  background:linear-gradient(180deg, rgba(24,34,30,0) 0%, #1b2a24 55%, #16241e 100%);
}
.footer__ground::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:96px;
  background:url("assets/world/front-grass.svg") repeat-x bottom left / auto 100%;
  image-rendering:pixelated;
  filter:brightness(.62) saturate(.62) hue-rotate(-6deg);
}
.ff{
  position:absolute; width:4px; height:4px;
  background:#ffe27a;
  box-shadow:0 0 8px 3px rgba(255,226,122,.45);
  opacity:0;
  animation:firefly 9s ease-in-out infinite;
}
.ff--1{ left:8%;  bottom:44px; animation-delay:0s;    }
.ff--2{ left:23%; bottom:70px; animation-delay:-1.8s; }
.ff--3{ left:41%; bottom:38px; animation-delay:-3.4s; }
.ff--4{ left:58%; bottom:76px; animation-delay:-5.1s; }
.ff--5{ left:74%; bottom:50px; animation-delay:-6.6s; }
.ff--6{ left:89%; bottom:66px; animation-delay:-7.9s; }
@keyframes firefly{
  0%   { opacity:0;   transform:translate(0,0); }
  15%  { opacity:.95; }
  50%  { opacity:.55; transform:translate(26px,-30px); }
  75%  { opacity:.95; transform:translate(6px,-52px); }
  100% { opacity:0;   transform:translate(-14px,-74px); }
}

/* ═══════════════════════════════════════════ правовые ═══ */
.legal{ padding:120px 0 90px; }
.legal h1{ font-family:var(--f-head); font-weight:800; font-size:clamp(32px,4.2vw,50px); letter-spacing:-.02em; margin:.2em 0 .1em; }
.legal .updated{ color:var(--ink-3); font-size:15px; margin-bottom:36px; }
.legal h2{ font-family:var(--f-head); font-weight:700; font-size:24px; margin:36px 0 10px; }
.legal p, .legal li{ color:var(--ink-2); }
.legal a{ color:var(--green-d); font-weight:700; }

/* ═══════════════════════════════════════════ адаптив ═══ */
@media (max-width:1080px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .how{ grid-template-columns:1fr; gap:40px; }
  .reviews{ columns:2; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .hero__pet{ left:52%; width:min(360px, 44vw); bottom:10%; }
  .hero__inner{ padding:100px 0 clamp(240px, 34vh, 360px); }
  .strip__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  body{ font-size:17px; }
  .nav{
    position:absolute; top:72px; left:0; right:0;
    display:none; flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:10px 22px 18px;
    box-shadow:0 12px 24px rgba(34,32,58,.08);
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:12px 0; border-bottom:1px solid var(--line); }
  .nav a::after{ content:none; }
  /* кнопка скачивания внутри раскрытого меню */
  .nav__cta{
    display:block; margin-top:14px; border-bottom:0 !important;
    background:var(--green); color:#06301a;
    border:2px solid var(--ink); border-radius:var(--r);
    box-shadow:0 4px 0 var(--ink);
    font-family:var(--f-head); font-weight:700; text-align:center;
    padding:12px 16px !important;
  }
  /* пока меню открыто, полоса шапки должна быть непрозрачной,
     иначе белая панель висит под прозрачным небом */
  .topbar:has(.nav.is-open){
    background:rgba(255,253,248,.98);
    backdrop-filter:blur(10px);
    border-bottom-color:var(--line);
  }
  .burger{ display:block; }
  .topbar__right .btn--sm{ display:none; }
  .sec{ padding:64px 0; }
  .cards{ grid-template-columns:1fr; }
  .reviews{ columns:1; }
  .review{ padding:18px; }
  .footer__grid{ grid-template-columns:1fr; }

  /* Герой обязан помещаться в экран телефона вместе с драконом.
     На 390x844 он был 963px, и дракон уходил под сгиб: текстовый блок
     похудел (кнопки в строку, бейджи в строку), нижний отступ ужат. */
  .hero__inner{ padding:88px 0 clamp(150px, 24vh, 230px); }
  .hero__cta{ gap:10px; margin-bottom:20px; }
  .hero__cta .btn{ flex:1 1 0; min-width:0; font-size:15.5px; padding:13px 8px; }
  .badges{ gap:7px; }
  .badges li{ font-size:12.5px; padding:4px 10px; }
  .hero__pet{ left:auto; right:-2%; width:min(250px, 58vw); bottom:10%; }
  /* На узком экране ореол растягиваем на всю ширину и гасим книзу,
     чтобы поляна с драконом осталась в полном цвете. */
  .hero__copy::before{
    left:-20%; right:-20%; top:-50px; bottom:-30px;
    background:linear-gradient(180deg, rgba(255,253,248,.8) 0 62%, rgba(255,253,248,0) 100%);
  }
  /* на телефоне плашка со счётчиком налезает на бейджи и вылезает за экран */
  .pet-hud{ display:none; }
  .w-orb{ width:130px; height:130px; top:6%; right:4%; }
  .w-tower{ display:none; }
  /* На узком экране облако, начатое на -18%, торчит у края белым бруском:
     уводим их полностью за кадр и оставляем два из трёх. */
  .cl--1{ left:-70%; }
  .cl--2{ left:-90%; }
  .cl--3{ display:none; }
  .hero__title{ font-size:clamp(32px, 8.4vw, 44px); margin-bottom:16px; text-shadow:0 2px 0 rgba(255,255,255,.7); }
  .hero__lead{ font-size:17px; margin-bottom:24px; }
  .hero__eyebrow{ font-size:12.5px; padding:5px 13px; margin-bottom:16px; }
  .phone{ width:min(260px, 74vw); }
  .footer{ padding-bottom:130px; }
}

/* Узкие телефоны: 360-375 не держат четыре бейджа в строку. */
@media (max-width:420px){
  .badges{ gap:6px; }
  .badges li{ font-size:11.5px; padding:4px 9px; }
  .hero__lead{ font-size:16px; }
  .hero__cta .btn{ font-size:15px; padding:13px 6px; }
}

/* Низкий экран (SE и подобные): текст ужимаем ещё, иначе дракон
   оказывается под бейджами вместо поляны. */
@media (max-width:760px) and (max-height:700px){
  .hero__inner{ padding:78px 0 clamp(120px, 20vh, 170px); }
  .hero__eyebrow{ margin-bottom:12px; }
  .hero__title{ font-size:30px; margin-bottom:12px; }
  .hero__lead{ font-size:15.5px; line-height:1.5; margin-bottom:18px; }
  .hero__cta{ margin-bottom:16px; }
  /* Дракон опускается на самый низ: на 640px по высоте иначе его макушка
     заходит под строку бейджей. Лапы прячет передняя трава. */
  .hero__pet{ width:min(200px, 52vw); bottom:1%; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}