/* =====================================================================
   «Всё Знайки» — детский сад
   Дизайн-система и стили сайта-визитки. Mobile-first.
   ===================================================================== */

/* ------------------------------- Токены ---------------------------- */
:root{
  /* фирменная палитра из брендбука */
  --lav:      #DABCDF;
  --orange:   #E68138;
  --teal:     #ACCACC;
  --peach:    #EEC7AE;
  --green:    #D8E09D;
  --yellow:   #FEC15B;
  --salmon:   #F6A38C;
  --pink:     #FFC6C6;

  /* акцент интерфейса: сочный коралл из семьи salmon/pink,
     контраст с белым текстом лучше, чем у бренд-оранжевого */
  --coral:    #EE6352;

  --cream:    #F4F0ED;
  --cream-2:  #FBF8F5;
  --ink:      #1E1E1E;
  --ink-60:   rgba(30,30,30,.62);
  --ink-40:   rgba(30,30,30,.40);
  --ink-14:   rgba(30,30,30,.14);
  --ink-08:   rgba(30,30,30,.08);

  --r-sm: 14px;
  --r:    22px;
  --r-lg: 30px;
  --r-xl: 42px;

  --sh-1: 0 2px 8px rgba(88,60,40,.06);
  --sh-2: 0 10px 30px rgba(88,60,40,.09);
  --sh-3: 0 22px 60px rgba(88,60,40,.13);

  --pad: clamp(18px, 5vw, 34px);
  --sec: clamp(64px, 11vw, 130px);
  --maxw: 1220px;

  /* Nunito/Comfortaa грузятся с Google Fonts; если сети нет — на Apple
     подхватится SF Pro Rounded через ui-rounded, форма букв близкая */
  --font: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --font-d: "Comfortaa", "Nunito", ui-rounded, system-ui, sans-serif;

  --ease-out: cubic-bezier(.22,.9,.28,1);
  --ease-spring: cubic-bezier(.34,1.56,.5,1);
}

/* ------------------------------- Сброс ----------------------------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  font-family:var(--font);
  font-size:clamp(15.5px,.55vw + 14px,17.5px);
  line-height:1.62;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Акварельная подложка: мягкие полупрозрачные пятна фирменных тонов
   под всей страницей. Слой фиксированный — контент скользит поверх,
   а «размытость» даёт сам радиальный градиент, без дорогих фильтров. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(56vmax 56vmax at 88% -8%,  rgba(218,188,223,.40), transparent 62%),
    radial-gradient(48vmax 48vmax at -10% 24%, rgba(216,224,157,.34), transparent 62%),
    radial-gradient(44vmax 44vmax at 110% 58%, rgba(172,202,204,.32), transparent 62%),
    radial-gradient(48vmax 48vmax at -8% 98%,  rgba(255,198,198,.36), transparent 62%),
    radial-gradient(36vmax 36vmax at 56% 120%, rgba(254,193,91,.20),  transparent 62%);
}
body.is-loading{ overflow:hidden }
body.nav-open{ overflow:hidden }
body.modal-open{ overflow:hidden }

img,svg{ max-width:100%; display:block }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer }
ul,ol{ margin:0; padding:0; list-style:none }
h1,h2,h3,p,figure,dl,dd{ margin:0 }

h1,h2,h3{ line-height:1.08; font-weight:900; letter-spacing:-.02em }
h1{ font-size:clamp(31px,7.6vw,60px) }
h2{ font-size:clamp(26px,5.4vw,46px) }
h3{ font-size:clamp(18px,2.2vw,21px); line-height:1.25 }

:focus-visible{ outline:3px solid var(--coral); outline-offset:3px }

.skip-link{
  position:fixed; left:50%; top:-100px; transform:translateX(-50%);
  z-index:1000; background:var(--ink); color:#fff;
  padding:12px 22px; border-radius:0 0 var(--r) var(--r); transition:top .2s;
}
.skip-link:focus{ top:0 }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.wrap--narrow{ max-width:820px }

/* ============================== ЗАСТАВКА ============================ */
.intro{
  position:fixed; inset:0; z-index:999;
  display:grid; place-items:center;
  background:var(--cream);
  transition:transform .62s var(--ease-out);
}
.intro.is-gone{ transform:translateY(-101%) }
.intro[hidden]{ display:none }

.intro__stage{
  width:min(80vw,520px);
  display:grid; justify-items:center; gap:clamp(14px,3.4vw,24px);
  opacity:0;
}
.intro.is-play .intro__stage{ animation:introIn .5s var(--ease-out) forwards }
@keyframes introIn{ from{opacity:0} to{opacity:1} }

/* маскот */
.intro__mascot{
  position:relative; width:min(52vw,290px); aspect-ratio:743/624;
}
.intro__draw,.intro__brain{ position:absolute; inset:0; width:100%; height:100% }

.intro__draw svg{ width:100%; height:100%; overflow:visible }
.intro__draw path{
  fill:none; stroke:var(--ink); stroke-width:1.6;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
}
.intro.is-play .intro__draw path{ animation:introDraw 1.05s ease-in-out .18s forwards }
.intro.is-play .intro__draw{ animation:introFade .35s ease .98s forwards }
@keyframes introDraw{ to{ stroke-dashoffset:0 } }
@keyframes introFade{ to{ opacity:0 } }

.intro__brain{ opacity:0; transform:scale(.9) }
.intro.is-play .intro__brain{ animation:introPop .55s var(--ease-spring) .9s forwards }
@keyframes introPop{ to{ opacity:1; transform:scale(1) } }

.intro__deco{
  position:absolute; opacity:0;
  transform:scale(.2) rotate(-40deg);
}
.intro.is-play .intro__deco{
  animation:introPop .5s var(--ease-spring) forwards;
  animation-delay:calc(1.12s + var(--i) * .07s);
}
/* координаты деталей — из assets/img/parts.json, пересчитаны от бокса мозга */
.intro__deco[style*="--i:1"]{ left:54%;  top:-34%; width:20% }  /* молекула */
.intro__deco[style*="--i:2"]{ left:21%;  top:-27%; width:16% }  /* крестик  */
.intro__deco[style*="--i:3"]{ left:90%;  top:-15%; width:12% }  /* звезда   */
.intro__deco[style*="--i:4"]{ left:-11%; top:10%;  width:16% }  /* пазл     */
.intro__deco[style*="--i:5"]{ left:106%; top:11%;  width:16% }  /* колба    */
.intro__deco[style*="--i:6"]{ left:7%;   top:-4%;  width:7%  }  /* искра    */

/* вордмарк побуквенно */
.intro__word{ width:100% }
.intro__word svg{ width:100%; height:auto; overflow:visible }
.intro__word g{ opacity:0; transform:translateY(38%) scale(.82); transform-origin:center bottom }
.intro.is-play .intro__word g{ animation:chIn .5s var(--ease-spring) forwards }
.intro.is-play .intro__word g:nth-child(1){ animation-delay:1.38s }
.intro.is-play .intro__word g:nth-child(2){ animation-delay:1.43s }
.intro.is-play .intro__word g:nth-child(3){ animation-delay:1.48s }
.intro.is-play .intro__word g:nth-child(4){ animation-delay:1.56s }
.intro.is-play .intro__word g:nth-child(5){ animation-delay:1.61s }
.intro.is-play .intro__word g:nth-child(6){ animation-delay:1.66s }
.intro.is-play .intro__word g:nth-child(7){ animation-delay:1.71s }
.intro.is-play .intro__word g:nth-child(8){ animation-delay:1.76s }
.intro.is-play .intro__word g:nth-child(9){ animation-delay:1.81s }
@keyframes chIn{ to{ opacity:1; transform:translateY(0) scale(1) } }

.intro__sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }

/* Занавес: пять кремовых полос, которые на выходе уезжают вверх
   по очереди и «пробегают» цветной кромкой по экрану. */
.intro__curtain{ position:absolute; inset:0; display:flex; pointer-events:none }
.intro__curtain i{ position:relative; flex:1; background:var(--cream) }
.intro__curtain i::after{
  content:""; position:absolute; inset:auto 0 0; height:10px; background:var(--lav);
}
.intro__curtain i:nth-child(2)::after{ background:var(--peach) }
.intro__curtain i:nth-child(3)::after{ background:var(--yellow) }
.intro__curtain i:nth-child(4)::after{ background:var(--green) }
.intro__curtain i:nth-child(5)::after{ background:var(--teal) }

.intro.is-exit{ background:transparent }
.intro.is-exit .intro__curtain i{ animation:curtainUp .68s var(--ease-out) .18s forwards }
.intro.is-exit .intro__curtain i:nth-child(2){ animation-delay:.24s }
.intro.is-exit .intro__curtain i:nth-child(3){ animation-delay:.3s }
.intro.is-exit .intro__curtain i:nth-child(4){ animation-delay:.36s }
.intro.is-exit .intro__curtain i:nth-child(5){ animation-delay:.42s }
@keyframes curtainUp{ to{ transform:translateY(-101%) } }

.intro__stage{ position:relative }
.intro.is-exit .intro__stage{ animation:stageOut .32s var(--ease-out) forwards }
@keyframes stageOut{ to{ opacity:0; transform:scale(.93) } }

/* =============================== ШАПКА ============================== */
.hdr{
  position:fixed; inset:0 0 auto; z-index:90;
  padding:10px 0;
  transition:padding .3s;
}
/* Подложка с блюром живёт в ::before, а не на самой шапке:
   backdrop-filter на предке делает position:fixed потомков относительным
   его бокса — открытое мобильное меню «обрезалось» до высоты шапки.
   У псевдоэлемента потомков нет, баг не воспроизводится. */
.hdr::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:rgba(244,240,237,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--ink-08), var(--sh-1);
  transition:opacity .3s;
}
.hdr.is-stuck{ padding:6px 0 }
.hdr.is-stuck::before{ opacity:1 }
.hdr__in{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--pad);
  display:flex; align-items:center; gap:14px;
}
.hdr__logo{ position:relative; z-index:2; display:flex; align-items:center; margin-right:auto; flex:none }
.hdr__word{
  width:auto; height:clamp(18px,3.9vw,23px); flex:none;
  transition:transform .4s var(--ease-spring);
}
.hdr__logo:hover .hdr__word{ transform:scale(1.05) }

.hdr__call{
  display:none; align-items:center; gap:8px;
  font-weight:800; font-size:15px; white-space:nowrap;
  padding:10px 18px; border-radius:999px;
  background:var(--ink); color:var(--cream);
  transition:transform .25s var(--ease-spring), background .25s;
}
.hdr__call svg{ width:17px; height:17px }
.hdr__call:hover{ transform:translateY(-2px); background:var(--coral) }

/* бургер */
.burger{
  width:46px; height:46px; border-radius:14px;
  background:var(--ink); display:grid; place-content:center; gap:4.5px;
  flex:none; z-index:2;
}
.burger span{
  display:block; width:19px; height:2.2px; border-radius:2px; background:var(--cream);
  transition:transform .32s var(--ease-out), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.7px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.7px) rotate(-45deg) }

/* мобильное меню */
.nav{
  position:fixed; inset:0; z-index:1;
  background:var(--cream);
  padding:100px var(--pad) 40px;
  display:flex; flex-direction:column; justify-content:space-between; gap:24px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  clip-path:circle(0% at calc(100% - 45px) 40px);
  transition:clip-path .5s var(--ease-out);
  visibility:hidden;
}
body.nav-open .nav{ clip-path:circle(150% at calc(100% - 45px) 40px); visibility:visible }
.nav__list{ display:flex; flex-direction:column; gap:2px }
.nav__list a{
  display:block; padding:11px 0;
  font-size:clamp(25px,7vw,34px); font-weight:900; letter-spacing:-.02em;
  opacity:0; transform:translateY(16px);
}
body.nav-open .nav__list a{ animation:navIn .45s var(--ease-out) forwards }
body.nav-open .nav__list li:nth-child(1) a{ animation-delay:.12s }
body.nav-open .nav__list li:nth-child(2) a{ animation-delay:.17s }
body.nav-open .nav__list li:nth-child(3) a{ animation-delay:.22s }
body.nav-open .nav__list li:nth-child(4) a{ animation-delay:.27s }
body.nav-open .nav__list li:nth-child(5) a{ animation-delay:.32s }
body.nav-open .nav__list li:nth-child(6) a{ animation-delay:.37s }
body.nav-open .nav__list li:nth-child(7) a{ animation-delay:.42s }
@keyframes navIn{ to{ opacity:1; transform:none } }
.nav__list a:active{ color:var(--coral) }

.nav__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  opacity:0; transition:opacity .3s .35s;
}
body.nav-open .nav__foot{ opacity:1 }

/* =============================== КНОПКИ ============================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:999px;
  font-weight:800; font-size:16px; line-height:1.2; text-align:center;
  transition:transform .25s var(--ease-spring), box-shadow .25s, background .25s, color .25s;
}
.btn svg{ width:18px; height:18px; flex:none }
.btn--primary{ background:var(--coral); color:#fff; box-shadow:0 8px 20px rgba(238,99,82,.28) }
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(238,99,82,.36) }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink-14) }
.btn--ghost:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 2px var(--ink) }
.btn--lg{ padding:17px 32px; font-size:clamp(16px,2.3vw,19px) }

.socials{ display:flex; gap:9px }
.socials a{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--cream-2); box-shadow:inset 0 0 0 2px var(--ink-14);
  transition:transform .25s var(--ease-spring), background .25s, color .25s, box-shadow .25s;
}
.socials svg{ width:21px; height:21px }
.socials a:hover{ transform:translateY(-3px) rotate(-6deg); background:var(--ink); color:var(--cream); box-shadow:none }
.socials--lg a{ width:56px; height:56px }
.socials--lg svg{ width:26px; height:26px }

/* ================================ ГЕРОЙ ============================= */
.hero{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100svh;
  padding:calc(64px + var(--pad)) 0 0;
  overflow:hidden;
}
/* лента направлений — нижняя кромка первого экрана */
.hero .ticker{ margin-top:clamp(26px,6vw,64px) }
.hero__blobs{ position:absolute; inset:0; z-index:-1; pointer-events:none }
.blob{
  position:absolute; border-radius:50%; filter:blur(52px); opacity:.5;
  animation:float 18s ease-in-out infinite;
}
.blob--1{ width:52vw; height:52vw; max-width:520px; max-height:520px; background:var(--lav); top:-8%; right:-14% }
.blob--2{ width:44vw; height:44vw; max-width:440px; max-height:440px; background:var(--green); bottom:-16%; left:-16%; animation-delay:-6s }
.blob--3{ width:36vw; height:36vw; max-width:380px; max-height:380px; background:var(--peach); top:34%; left:44%; animation-delay:-11s }
@keyframes float{
  0%,100%{ transform:translate(0,0) scale(1) }
  33%{ transform:translate(4%,-6%) scale(1.08) }
  66%{ transform:translate(-5%,4%) scale(.95) }
}

/* тянется на всё свободное место до ленты, контент — по центру */
.hero__in{ flex:1 0 auto; display:grid; align-content:center; gap:clamp(14px,3.5vw,40px) }
.hero__copy{ order:2 }
/* компактнее, чем на десктопе: лента должна попадать в первый экран */
.hero__art{ order:1; width:min(66%,260px); margin-inline:auto }

.hero__badge{
  display:inline-block; margin-bottom:14px;
  font-family:var(--font-d); font-weight:700;
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-60); background:var(--cream-2);
  padding:7px 15px; border-radius:999px; box-shadow:inset 0 0 0 2px var(--ink-08);
}
.hero__note{
  margin-top:14px; font-size:14.5px; font-weight:700; color:var(--ink-60);
  display:flex; align-items:center; gap:9px;
}
.hero__note::before{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--coral); flex:none;
}
.hero__h1{ margin-bottom:16px }

.hero__lead{ color:var(--ink-60); max-width:34em; margin-bottom:clamp(18px,3vw,26px) }
.hero__cta{ display:flex; flex-wrap:wrap; gap:11px }
.hero__cta .btn{ flex:1 1 auto; min-width:170px }

/* композиция маскота */
.mascot{
  position:relative; width:100%; aspect-ratio:1000/852;
  margin-inline:auto; max-width:520px; --px:0; --py:0;
}
/* transform занят «плаванием», параллакс кладём в независимое свойство translate */
.mascot__p{
  position:absolute; will-change:transform;
  translate:calc(var(--px) * var(--k,1) * 1px) calc(var(--py) * var(--k,1) * 1px);
  transition:translate .6s var(--ease-out);
}
.mascot__p[data-p="brain"]   { left:8.94%;  top:26.15%; width:74.31%; --k:.35 }
.mascot__p[data-p="puzzle"]  { left:.49%;   top:33.40%; width:12.20%; --k:1.5 }
.mascot__p[data-p="cross"]   { left:24.39%; top:5.73%;  width:12.03%; --k:1.2 }
.mascot__p[data-p="flask"]   { left:87.48%; top:34.35%; width:12.03%; --k:1.7 }
.mascot__p[data-p="molecule"]{ left:49.27%; top:.57%;   width:15.12%; --k:1 }
.mascot__p[data-p="star"]    { left:76.10%; top:14.70%; width:9.11%;  --k:2 }
.mascot__p[data-p="spark"]   { left:13.82%; top:23.47%; width:5.04%;  --k:2.4 }

.mascot__p[data-p="brain"]{ animation:bob 6s ease-in-out infinite }
@keyframes bob{ 50%{ transform:translateY(-2.2%) } }

.mascot__p:not([data-p="brain"]){ animation:orbit 7s ease-in-out infinite }
.mascot__p[data-p="puzzle"]  { animation-duration:8.5s; animation-delay:-1s }
.mascot__p[data-p="cross"]   { animation-duration:6.4s; animation-delay:-3s }
.mascot__p[data-p="flask"]   { animation-duration:7.8s; animation-delay:-2s }
.mascot__p[data-p="molecule"]{ animation-duration:9.2s; animation-delay:-4.5s }
.mascot__p[data-p="star"]    { animation-duration:5.6s; animation-delay:-1.5s }
.mascot__p[data-p="spark"]   { animation-duration:4.8s; animation-delay:-.5s }
@keyframes orbit{
  0%,100%{ transform:translate(0,0) rotate(0deg) }
  33%    { transform:translate(6%,-11%) rotate(9deg) }
  66%    { transform:translate(-5%,7%)  rotate(-7deg) }
}

/* ============================== БЕГУЩАЯ ============================= */
.ticker{
  background:var(--ink); color:var(--cream);
  padding:14px 0; overflow:hidden; --tick:34s;
}
.ticker__track{ display:flex; width:max-content; animation:tick var(--tick) linear infinite }
.ticker__row{ display:flex; align-items:center; gap:clamp(20px,4vw,42px); padding-right:clamp(20px,4vw,42px) }
.ticker__row span{
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(15px,2.6vw,23px); letter-spacing:.01em; white-space:nowrap;
}
.ticker__row i{ width:9px; height:9px; border-radius:50%; background:var(--yellow); flex:none }
.ticker__row i:nth-child(4n){ background:var(--salmon) }
.ticker__row i:nth-child(4n+2){ background:var(--teal) }
@keyframes tick{ to{ transform:translateX(-50%) } }

/* ============================== СЕКЦИИ ============================== */
.sec{ padding-block:var(--sec); position:relative }
.sec,.hero{ scroll-margin-top:78px }
.sec__head{ max-width:760px; margin-bottom:clamp(28px,5vw,52px) }
.sec__head--row{ max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:20px }
.sec__lead{ color:var(--ink-60); margin-top:14px; font-size:1.03em }
.sec__foot{
  margin-top:clamp(20px,3vw,30px); max-width:62ch;
  color:var(--ink-60); font-size:.97em;
}
.sec__foot a{ font-weight:800; color:var(--ink); box-shadow:inset 0 -2px 0 var(--yellow); transition:box-shadow .25s }
.sec__foot a:hover{ box-shadow:inset 0 -12px 0 var(--yellow) }

.kicker{
  font-family:var(--font-d); font-weight:700;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--coral); margin-bottom:12px;
}

/* --------------------------- Плейсхолдеры -------------------------- */
.ph{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--phc,var(--lav)) 40%, var(--cream-2)) 0%,
                            color-mix(in srgb, var(--phc,var(--lav)) 14%, var(--cream-2)) 100%);
  box-shadow:inset 0 0 0 2px var(--ink-08);
  display:grid; place-content:center; gap:9px; justify-items:center;
  aspect-ratio:4/3;
}
.ph::before{
  content:""; width:34px; height:34px; opacity:.4;
  background:currentColor;
  -webkit-mask:var(--cam) center/contain no-repeat; mask:var(--cam) center/contain no-repeat;
  --cam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='26' height='19' rx='4'/%3E%3Ccircle cx='16' cy='17.5' r='5'/%3E%3Cpath d='M10 8l2-3h8l2 3'/%3E%3C/svg%3E");
}
.ph::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-100%); animation:shine 4.5s ease-in-out infinite;
}
@keyframes shine{ 45%,100%{ transform:translateX(100%) } }
.ph__label{
  font-size:13px; font-weight:700; color:var(--ink-40);
  position:relative; z-index:1; text-align:center; padding-inline:10px;
}
/* Готовое фото: добавьте класс is-photo и <img> внутрь <figure class="ph"> */
.ph.is-photo{ display:block; background:none; box-shadow:inset 0 0 0 2px var(--ink-08) }
.ph.is-photo::before,.ph.is-photo::after{ content:none }
.ph.is-photo picture{ display:block; width:100%; height:100% }
.ph.is-photo img{ width:100%; height:100%; object-fit:cover; display:block }
.ph figcaption{
  position:absolute; left:12px; bottom:12px; z-index:2;
  padding:6px 13px; border-radius:999px;
  background:rgba(30,30,30,.6); color:var(--cream);
  font-size:12.5px; font-weight:700; line-height:1.3;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

/* Карта-виджет: та же рамка, что у фото, внутри — iframe Яндекса */
.ph.is-map{ display:block; background:var(--cream-2) }
.ph.is-map::before,.ph.is-map::after{ content:none }
.ph.is-map iframe{ display:block; width:100%; height:100%; border:0 }

.ph--tall{ aspect-ratio:4/5; --phc:var(--peach) }
.ph--slide{ --phc:var(--teal) }
.ph--map{ aspect-ratio:4/3; --phc:var(--green) }
.ph--slide:nth-child(2n){ --phc:var(--lav) }
.ph--slide:nth-child(3n){ --phc:var(--yellow) }

/* ------------------------------ О саде ----------------------------- */
/* светлые секции полупрозрачные — сквозь них мягко просвечивает
   акварельная подложка, и фон перестаёт быть плоско-белым */
.sec--about{ background:rgba(251,248,245,.6); border-radius:var(--r-xl) var(--r-xl) 0 0; margin-top:-1px }
.about{ display:grid; gap:clamp(26px,5vw,54px) }
.about__media{ position:relative; isolation:isolate }
.about__media::after{
  content:""; position:absolute; inset:auto -14px -18px auto;
  width:clamp(72px,14vw,120px); aspect-ratio:1;
  border-radius:50%; background:var(--yellow); z-index:-1;
}
.about__copy h2{ margin-bottom:16px }
.about__copy p{ color:var(--ink-60); margin-bottom:14px }

.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:26px }
.stats li{
  background:var(--cream); border-radius:var(--r); padding:18px 16px;
  box-shadow:inset 0 0 0 2px var(--ink-08);
}
.stats b{
  display:block; font-size:clamp(30px,7vw,42px); font-weight:900;
  line-height:1; letter-spacing:-.03em; color:var(--coral);
}
.stats span{ display:block; font-size:13.5px; font-weight:600; color:var(--ink-60); margin-top:6px }

/* ---------------------------- Направления -------------------------- */
.cards{ display:grid; gap:14px }
.card{
  position:relative; overflow:hidden;
  background:var(--cream-2); border-radius:var(--r-lg);
  padding:clamp(22px,4.5vw,32px);
  box-shadow:inset 0 0 0 2px var(--ink-08);
  transition:transform .35s var(--ease-out), box-shadow .35s;
}
.card::after{
  content:""; position:absolute; right:-38px; top:-38px;
  width:120px; height:120px; border-radius:50%;
  background:var(--c); opacity:.22; transition:transform .5s var(--ease-out);
}
.card:hover{ transform:translateY(-6px); box-shadow:inset 0 0 0 2px var(--ink-14), var(--sh-2) }
.card:hover::after{ transform:scale(1.5) }
.card__ic{
  position:relative; z-index:1;
  display:grid; place-items:center; width:60px; height:60px;
  border-radius:20px; background:var(--c); color:var(--ink);
  margin-bottom:18px;
  transition:transform .4s var(--ease-spring);
}
.card:hover .card__ic{ transform:rotate(-8deg) scale(1.06) }
.card__ic svg{ width:32px; height:32px }
.card__age{
  position:relative; z-index:1; margin-bottom:7px;
  font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-40);
}
.card h3{ margin-bottom:9px; position:relative; z-index:1 }
.card p{ color:var(--ink-60); font-size:.95em; position:relative; z-index:1 }

/* --------------------------- День в саду --------------------------- */
.sec--day{ background:rgba(251,248,245,.6) }
.tl{ position:relative; display:grid; gap:4px }
.tl::before{
  content:""; position:absolute; left:7px; top:12px; bottom:12px; width:2px;
  background:repeating-linear-gradient(var(--ink-14) 0 6px, transparent 6px 12px);
}
.tl li{ position:relative; padding:12px 0 12px 34px }
.tl li::before{
  content:""; position:absolute; left:0; top:19px;
  width:16px; height:16px; border-radius:50%;
  background:var(--yellow); box-shadow:0 0 0 4px var(--cream-2);
}
.tl li:nth-child(3n)::before{ background:var(--teal) }
.tl li:nth-child(3n+2)::before{ background:var(--salmon) }
.tl time{
  display:block; font-family:var(--font-d); font-weight:700;
  font-size:14px; color:var(--coral); letter-spacing:.03em;
}
.tl h3{ font-size:clamp(17px,2vw,19px); margin-bottom:2px }
.tl p{ color:var(--ink-60); font-size:.93em }

/* ------------------------------- Кухня ------------------------------ */
.kitchen{
  position:relative;
  padding-block:clamp(6px,2vw,18px);
  text-align:center;
}
/* На узких экранах иконки идут строкой над текстом: по углам карточки
   им негде встать, не наехав на строки. По углам разводим только там,
   где по бокам от колонки текста есть свободное поле (см. 1000+). */
.kitchen__deco{
  display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(16px,6vw,30px);
  margin-bottom:clamp(22px,5vw,30px);
}
.kitchen__ic{
  display:block; width:clamp(42px,11vw,56px);
  animation:floatSoft 7s ease-in-out infinite;
}
.kitchen__ic svg{ display:block; width:100%; height:auto }
.kitchen__ic[style*="--i:1"]{ animation-delay:-1s;   rotate:-6deg }
.kitchen__ic[style*="--i:2"]{ animation-delay:-3.6s; rotate:5deg }
.kitchen__ic[style*="--i:3"]{ animation-delay:-2.2s; rotate:-4deg }
.kitchen__ic[style*="--i:4"]{ animation-delay:-5.1s; rotate:7deg }

.kitchen__copy{ position:relative; z-index:1; max-width:600px; margin-inline:auto }
.kitchen__lead{ color:var(--ink-60); max-width:48ch; margin-inline:auto; margin-top:16px }
.kitchen__list{ display:inline-grid; gap:9px; margin:26px 0 30px; text-align:left }

/* --------------------------- Модалка: меню --------------------------- */
dialog.menu-modal{
  border:0; padding:0; margin:auto;
  width:min(720px,92vw); max-height:min(720px,86vh);
  border-radius:var(--r-xl); background:var(--cream);
  box-shadow:var(--sh-3); overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out),
             overlay .25s allow-discrete, display .25s allow-discrete;
}
dialog.menu-modal[open]{ opacity:1; transform:none }
@starting-style{ dialog.menu-modal[open]{ opacity:0; transform:translateY(14px) scale(.98) } }
dialog.menu-modal::backdrop{
  background:rgba(30,30,30,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .25s;
}
dialog.menu-modal[open]::backdrop{ opacity:1 }
@starting-style{ dialog.menu-modal[open]::backdrop{ opacity:0 } }

.menu-modal__in{ display:flex; flex-direction:column; max-height:inherit }
.menu-modal__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:24px 24px 0;
}
.menu-modal__title{ font-size:clamp(20px,3vw,25px) }
.menu-modal__note{ color:var(--ink-60); font-size:13.5px; margin-top:5px }
.menu-modal__close{
  position:relative; flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--ink-08); transition:background .2s, transform .25s;
}
.menu-modal__close::before,.menu-modal__close::after{
  content:""; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:15px; height:2.2px; border-radius:2px; background:var(--ink);
}
.menu-modal__close::before{ rotate:45deg }
.menu-modal__close::after{ rotate:-45deg }
/* поворот и заливку показываем только там, где есть настоящий hover:
   на тапе мобильный браузер оставляет :hover висеть после нажатия */
@media (hover:hover){
  .menu-modal__close:hover{ background:var(--ink); transform:rotate(90deg) }
  .menu-modal__close:hover::before,.menu-modal__close:hover::after{ background:var(--cream) }
}

.menu-modal__tabs{ display:flex; gap:8px; padding:18px 24px 0 }
.menu-modal__tab{
  padding:9px 18px; border-radius:999px; font-weight:800; font-size:14px;
  background:var(--cream-2); box-shadow:inset 0 0 0 2px var(--ink-08);
  transition:background .2s, color .2s, box-shadow .2s;
}
.menu-modal__tab[aria-pressed="true"]{ background:var(--ink); color:var(--cream); box-shadow:none }

.menu-modal__body{ overflow-y:auto; padding:18px 24px 26px }
.menu-week{ display:none; flex-direction:column; gap:20px }
.menu-week.is-active{ display:flex }
.menu-day + .menu-day{ padding-top:18px; border-top:1px dashed var(--ink-14) }
.menu-day h3{
  font-size:16px; margin-bottom:9px; display:flex; align-items:center; gap:8px;
}
.menu-day h3::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--coral); flex:none }
.menu-day dl{ display:grid; grid-template-columns:auto 1fr; gap:5px 14px }
.menu-day dt{
  font-style:italic; font-weight:700; color:var(--ink-60);
  font-size:13px; white-space:nowrap; padding-top:1px;
}
.menu-day dt::after{ content:":" }
.menu-day dd{ font-size:14px; line-height:1.5 }

/* ------------------------------ Слайдер ---------------------------- */
.slider{ overflow:hidden }
.slider__track{
  display:flex; gap:14px;
  padding-inline:max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)));
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-block:6px 10px;
}
.slider__track::-webkit-scrollbar{ display:none }
.slider__track > *{
  flex:0 0 min(78vw,380px); scroll-snap-align:center;
}
.slider__nav{ display:none; gap:9px; flex:none }
.slider__nav button{
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 2px var(--ink-14);
  transition:background .25s, color .25s, transform .25s, box-shadow .25s;
}
.slider__nav button svg{ width:22px; height:22px }
.slider__nav [data-slide="prev"] svg{ transform:rotate(180deg) }
.slider__nav button:hover{ background:var(--ink); color:var(--cream); box-shadow:none }
.slider__nav button:disabled{ opacity:.3; pointer-events:none }

/* ----------------------------- Сад и клуб -------------------------- */
.formats{ display:grid; gap:14px }
.format{
  position:relative; overflow:hidden;
  background:var(--cream-2); border-radius:var(--r-lg);
  padding:clamp(24px,4.5vw,38px);
  box-shadow:inset 0 0 0 2px var(--ink-08);
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease-out), box-shadow .35s;
}
.format::after{
  content:""; position:absolute; right:-48px; top:-48px;
  width:150px; height:150px; border-radius:50%;
  background:var(--c); opacity:.24; transition:transform .5s var(--ease-out);
}
.format:hover{ transform:translateY(-6px); box-shadow:inset 0 0 0 2px var(--ink-14), var(--sh-2) }
.format:hover::after{ transform:scale(1.4) }
.format > *{ position:relative; z-index:1 }
.format__tag{
  display:inline-block; align-self:flex-start; margin-bottom:14px;
  font-size:12.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  background:var(--c); color:var(--ink); padding:7px 14px; border-radius:999px;
}
.format h3{ margin-bottom:10px; font-size:clamp(20px,2.7vw,26px) }
.format > p{ color:var(--ink-60); font-size:.97em }
.format__list{ display:grid; gap:9px; margin:20px 0 24px }
.format__list li{ position:relative; padding-left:29px; font-size:.95em; font-weight:600 }
.format__list li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:17px; height:17px; border-radius:50%;
  background:var(--c);
}
.format__list li::after{
  content:""; position:absolute; left:5px; top:.72em;
  width:7px; height:4px; border:2px solid var(--ink);
  border-top:0; border-right:0; transform:rotate(-45deg);
}
.format__cta{
  margin-top:auto; align-self:flex-start;
  font-weight:800; font-size:.98em;
  box-shadow:inset 0 -2px 0 var(--ink-14);
  transition:box-shadow .25s;
}
.format__cta::after{ content:" →" }
.format__cta:hover{ box-shadow:inset 0 -12px 0 var(--c) }

/* ------------------------------ Почему мы -------------------------- */
.sec--perks{ background:rgba(251,248,245,.6) }
.perks{ display:grid; gap:14px }
.perks li{ display:flex; gap:15px; align-items:flex-start }
.perk__ic{
  flex:none; display:grid; place-items:center;
  width:52px; height:52px; border-radius:18px;
  background:var(--peach); color:var(--ink);
}
.perk__ic svg{ width:27px; height:27px }
.perks li:nth-child(8n+2) .perk__ic{ background:var(--teal) }
.perks li:nth-child(8n+3) .perk__ic{ background:var(--green) }
.perks li:nth-child(8n+4) .perk__ic{ background:var(--lav) }
.perks li:nth-child(8n+5) .perk__ic{ background:var(--yellow) }
.perks li:nth-child(8n+6) .perk__ic{ background:var(--salmon) }
.perks li:nth-child(8n+7) .perk__ic{ background:var(--pink) }
.perks li:nth-child(8n) .perk__ic{ background:var(--teal) }
.perks h3{ font-size:clamp(16px,2vw,18.5px); margin-bottom:4px }
.perks p{ color:var(--ink-60); font-size:.93em; line-height:1.5 }


/* ------------------------------- Отзывы ---------------------------- */
.reviews{ display:grid; gap:16px }
.review{
  position:relative;
  background:var(--cream-2); border-radius:var(--r-lg);
  padding:clamp(24px,4.5vw,32px);
  box-shadow:inset 0 0 0 2px var(--ink-08), var(--sh-1);
  display:flex; flex-direction:column;
  transition:transform .4s var(--ease-out), box-shadow .4s;
}
/* лёгкий наклон — карточки как приколотые записки, а не сетка блоков */
.review:nth-child(3n+1){ rotate:-1.1deg }
.review:nth-child(3n+2){ rotate:.7deg }
.review:nth-child(3n)  { rotate:-.5deg }
.review:hover{ rotate:0deg; transform:translateY(-6px); box-shadow:inset 0 0 0 2px var(--ink-14), var(--sh-2) }

.review blockquote{
  margin:0; position:relative; z-index:1; flex:1;
  font-family:var(--font-d); font-weight:500;
  font-size:clamp(17px,2.3vw,21px); line-height:1.5;
}
/* кавычка-подложка */
.review blockquote::before{
  content:"“"; position:absolute; left:-6px; top:-34px; z-index:-1;
  font-family:var(--font-d); font-weight:700; font-size:110px; line-height:1;
  color:var(--peach); opacity:.55;
}
.review__who{ display:flex; align-items:center; gap:12px; margin-top:22px }
.review__ava{
  flex:none; display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--lav); color:var(--ink);
  font-size:14px; font-weight:900; letter-spacing:.02em;
}
.review:nth-of-type(3n+1) .review__ava{ background:var(--peach) }
.review:nth-of-type(3n+2) .review__ava{ background:var(--green) }
.review:nth-of-type(4n)   .review__ava{ background:var(--salmon) }
.review__name{ font-weight:800; font-size:15.5px; line-height:1.25 }
.review__name i{ display:block; font-style:normal; font-size:13px; font-weight:600; color:var(--ink-40); margin-top:2px }

/* карточка-заголовок секции: занимает место первой карточки в стене */
.review--intro{
  background:var(--yellow); box-shadow:none;
  align-items:flex-start; rotate:0deg !important;
}
.review--intro:hover{ box-shadow:var(--sh-2) }
.review--intro__kicker{
  font-family:var(--font-d); font-weight:700;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); opacity:.55; margin-bottom:12px;
}
.review--intro__title{
  font-size:clamp(26px,3.4vw,32px); line-height:1.12; margin-bottom:14px;
}
.review--intro__lead{ color:rgba(30,30,30,.68); font-size:.97em }

/* карточка-приглашение */
.review--cta{ background:var(--teal); box-shadow:none }
.review--cta:hover{ box-shadow:var(--sh-2) }
.review--cta h3{ margin-bottom:9px }
.review--cta p{ font-size:.95em; flex:1 }

.review__link{
  align-self:flex-start; margin-top:20px;
  font-weight:800; font-size:.97em;
  box-shadow:inset 0 -2px 0 var(--ink-14); transition:box-shadow .25s;
}
.review__link::after{ content:" →" }
.review__link:hover{ box-shadow:inset 0 -12px 0 rgba(30,30,30,.14) }

/* сноска про демо-отзывы: снять вместе с примерами */
.reviews__note{ margin-top:18px; font-size:13px; color:var(--ink-40) }
.reviews__note a{ color:inherit; box-shadow:inset 0 -1px 0 var(--ink-14) }
.reviews__note a:hover{ color:var(--ink) }

/* -------------------------------- FAQ ------------------------------ */
.faq{ display:grid; gap:10px }
.faq details{
  background:var(--cream-2); border-radius:var(--r);
  box-shadow:inset 0 0 0 2px var(--ink-08);
  overflow:hidden; transition:box-shadow .25s;
}
.faq details[open]{ box-shadow:inset 0 0 0 2px var(--ink-14) }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; cursor:pointer; list-style:none;
  font-weight:800; font-size:clamp(16px,2.1vw,18.5px);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary i{
  position:relative; width:26px; height:26px; border-radius:50%;
  background:var(--peach); flex:none; transition:transform .3s var(--ease-out), background .25s;
}
.faq summary i::before,.faq summary i::after{
  content:""; position:absolute; left:50%; top:50%; translate:-50% -50%;
  background:var(--ink); border-radius:2px;
}
.faq summary i::before{ width:11px; height:2.2px }
.faq summary i::after{ width:2.2px; height:11px; transition:transform .3s var(--ease-out) }
.faq details[open] summary i{ transform:rotate(180deg); background:var(--yellow) }
.faq details[open] summary i::after{ transform:scaleY(0) }
.faq__body{ padding:0 20px 20px; color:var(--ink-60) }

/* ------------------------------ Контакты --------------------------- */
.sec--contacts{ padding-bottom:clamp(48px,8vw,90px) }
.cta{
  position:relative; overflow:hidden;
  background:var(--lav); border-radius:var(--r-xl);
  padding:clamp(28px,6vw,64px);
  display:grid; gap:clamp(26px,5vw,48px);
}
/* Декор живёт в углах карточки — в зоне паддинга, куда не заходит текст.
   Качается на месте: орбитальная амплитуда увела бы его за обрезку. */
/* z-index — чтобы декор не уезжал под .ph карты (у неё свой position) */
.cta__deco{ position:absolute; inset:0; pointer-events:none; z-index:2 }
.cta__deco img{ position:absolute; opacity:.9; animation:floatSoft 7s ease-in-out infinite }
.cta__deco img[style*="--i:1"]{ width:clamp(44px,6vw,66px); right:14px; top:14px }
/* остальной декор прячем: свободных от текста углов в карточке нет */
.cta__deco img[style*="--i:2"]{ display:none }
.cta__deco img[style*="--i:3"]{ display:none }
@keyframes floatSoft{
  0%,100%{ transform:translateY(0) rotate(0) }
  50%    { transform:translateY(-9px) rotate(8deg) }
}
.cta__copy{ position:relative; z-index:1 }
.cta h2{ margin-bottom:14px; max-width:15ch }
.cta__copy > p{ max-width:44ch; margin-bottom:26px }
.cta__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:28px }
.cta__actions .btn--primary{ background:var(--ink); box-shadow:0 8px 20px rgba(30,30,30,.2) }
.cta__actions .btn--primary:hover{ background:var(--coral) }
.cta .socials a{ background:transparent; box-shadow:inset 0 0 0 2px rgba(30,30,30,.22) }
.cta .socials a:hover{ background:var(--ink); color:var(--lav); box-shadow:none }

.cta__info{ display:grid; gap:16px }
.cta__info dt{ font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(30,30,30,.5); margin-bottom:3px }
.cta__info dd{ font-weight:700 }
.cta__info dd a{ box-shadow:inset 0 -2px 0 rgba(30,30,30,.25); transition:box-shadow .25s }
.cta__info dd a:hover{ box-shadow:inset 0 -12px 0 rgba(30,30,30,.15) }
.todo{
  display:inline-block; margin-top:4px; font-size:12px; font-weight:700;
  padding:2px 9px; border-radius:999px; background:rgba(30,30,30,.12); color:rgba(30,30,30,.6);
}
.cta .ph{ box-shadow:inset 0 0 0 2px rgba(30,30,30,.12) }
.cta .ph--map{ --phc:var(--cream-2) }

/* ------------------------------- Подвал ---------------------------- */
.ftr{ background:var(--ink); color:var(--cream); padding:clamp(38px,6vw,64px) 0 26px; border-radius:var(--r-xl) var(--r-xl) 0 0 }
.ftr__in{ display:grid; gap:26px }
/* цветной вордмарк отлично живёт на тёмном фоне как есть */
.ftr__logo{ width:min(100%,270px) }
.ftr__nav{ display:flex; flex-wrap:wrap; gap:8px 20px; font-weight:700; font-size:15px }
.ftr__nav a{ color:rgba(244,240,237,.72); transition:color .2s }
.ftr__nav a:hover{ color:var(--yellow) }
.ftr__side{ display:flex; flex-wrap:wrap; align-items:center; gap:14px }
.ftr__tel{ font-size:clamp(19px,3.4vw,25px); font-weight:900; letter-spacing:-.01em }
.ftr__tel:hover{ color:var(--yellow) }
.ftr .socials a{ background:rgba(244,240,237,.08); box-shadow:inset 0 0 0 2px rgba(244,240,237,.16) }
.ftr .socials a:hover{ background:var(--yellow); color:var(--ink); box-shadow:none }
.ftr__copy{
  max-width:var(--maxw); margin:34px auto 0; padding-inline:var(--pad);
  font-size:13px; color:rgba(244,240,237,.45);
  border-top:1px solid rgba(244,240,237,.12); padding-top:20px;
}

/* --------------------------- Скролл-анимации ----------------------- */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:calc(var(--d,0) * 90ms);
}
.reveal[data-d="1"]{ --d:1 } .reveal[data-d="2"]{ --d:2 }
.reveal[data-d="3"]{ --d:3 } .reveal[data-d="4"]{ --d:4 }
.reveal[data-d="5"]{ --d:5 } .reveal[data-d="6"]{ --d:6 }
.reveal[data-d="7"]{ --d:7 } .reveal[data-d="8"]{ --d:8 }
.reveal[data-d="9"]{ --d:9 }
/* пока JS не отработал, ничего не прячем без него */
.no-js .reveal{ opacity:1; transform:none }

/* ============================ ПЛАНШЕТ 640+ ========================== */
@media (min-width:640px){
  .stats{ grid-template-columns:repeat(4,1fr) }
  .cards{ grid-template-columns:repeat(2,1fr) }
  .perks{ grid-template-columns:repeat(2,1fr); gap:18px 26px }
  .slider__nav{ display:flex }
  .hero__cta .btn{ flex:0 0 auto }
}

/* ============================ ПЛАНШЕТ 820+ ========================== */
@media (min-width:820px){
  .about{ grid-template-columns:.85fr 1fr; align-items:center }
  .tl{ grid-template-columns:repeat(2,1fr); column-gap:44px }
  .tl::before{ display:none }
  .tl li{ background:var(--cream); border-radius:var(--r); padding:16px 18px 16px 44px }
  .tl li::before{ left:18px; top:22px; box-shadow:0 0 0 4px var(--cream) }
  .cta{ grid-template-columns:1.1fr .9fr; align-items:center }
  .formats{ grid-template-columns:repeat(2,1fr); gap:18px }
  .reviews{ display:block; columns:2; column-gap:18px }
  .review{ break-inside:avoid; margin-bottom:18px }
  .menu-day dl{ grid-template-columns:96px 1fr }
}

/* ============================ ДЕСКТОП 1000+ ========================= */
@media (min-width:1000px){
  .hero{ padding-top:calc(96px + var(--pad)) }
  .hero__in{ grid-template-columns:1.02fr .98fr; align-items:center; gap:40px }
  .hero__copy{ order:1 }
  .hero__art{ order:2; width:auto; margin-inline:0 }
  .mascot{ max-width:none }

  .cards{ grid-template-columns:repeat(3,1fr); gap:18px }
  .ph--slide{ aspect-ratio:16/11 }
  .perks{ grid-template-columns:repeat(4,1fr) }
  .reviews{ columns:3; column-gap:20px }
  .review{ margin-bottom:20px }
  .kitchen{ padding-block:clamp(10px,2vw,24px) }
  .kitchen__deco{
    position:absolute; inset:0; display:block; margin:0; pointer-events:none;
  }
  .kitchen__ic{ position:absolute; width:clamp(58px,5vw,76px) }
  .kitchen__ic[style*="--i:1"]{ left:4%;  top:6% }
  .kitchen__ic[style*="--i:2"]{ right:5%; top:2% }
  .kitchen__ic[style*="--i:3"]{ left:7%;  bottom:8% }
  .kitchen__ic[style*="--i:4"]{ right:4%; bottom:12% }
}

/* Пункт «Кухня» добавил меню десятый пункт — горизонтальному ряду
   тесно уже под 1150px (сам ряд ~890px), поэтому переключение на
   строчную навигацию отделено от остальной десктопной раскладки
   и стоит на более широком пороге, с запасом проверено на 1085–1220px. */
@media (min-width:1150px){
  .burger{ display:none }
  .nav{
    position:static; inset:auto; padding:0; background:none;
    clip-path:none; visibility:visible; flex-direction:row; align-items:center;
    margin-right:8px;
  }
  .nav__list{ flex-direction:row; gap:4px }
  .nav__list a{
    font-size:14.5px; font-weight:700; padding:9px 10px; border-radius:999px;
    white-space:nowrap;
    opacity:1; transform:none; animation:none !important;
    transition:background .22s, color .22s;
  }
  .nav__list a:hover{ background:var(--ink-08) }
  .nav__foot{ display:none }
}

@media (min-width:1220px){
  .nav__list a{ font-size:15.5px; padding:9px 12px }
  .hero__h1{ font-size:clamp(48px,4.4vw,62px) }
}

@media (min-width:1400px){
  /* кнопка звонка помещается рядом с восемью пунктами меню только здесь;
     уже — телефон доступен через пункт «Контакты» и мобильное меню */
  .hdr__call{ display:inline-flex }
}

/* =========================== БЕРЕЖНЫЙ РЕЖИМ ========================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important }
  .ph::after{ display:none }
  .review{ rotate:0deg !important }
  dialog.menu-modal{ transition:none }
}