/* domenu.pro: стили лендинга. Цвета, тени и скругления — токены design-system/domenu/tokens.css без изменений,
   новых цветов и градиентов нет. Отступы и позиции только логические: вёрстка готова к письму справа налево.
   Ширины от меньшей к большей: до 480, 481, 768, 960, 1200. */

:root{
  /* тема одна, светлая: принудительная тёмная тема Chrome и Samsung Internet сайт не перекрашивает */
  color-scheme:only light;
  /* поверхности */
  --bg:#FCFAF7;
  --card:#F7F0E9;
  --white:#FFFFFF;
  /* состояния и действия */
  --peach:#FFE9DE;
  --cat:#FFD7C6;
  --want:#C2D2EF;
  --add:#FFB6B3;
  --on:#B0ECA0;
  /* текст и декор */
  --ink:#19130F;
  --ink2:#6D5E56;
  --hint:#DACFC7;
  /* цвета главного градиента */
  --pink:#FFA5D8;
  --orange:#FF8B5E;
  --accent:#F77957;
  /* служебные */
  --scrim:rgba(25,19,15,.32);
  --card-border:rgba(255,255,255,.15);

  --grad:linear-gradient(135deg,#FFA5D8 0%,#FF8B5E 55%,#F77957 100%);
  --grad-soft:linear-gradient(135deg,#FFE9DE,#FFD7C6);
  --grad-line:linear-gradient(90deg,#FFA5D8 0%,#FF8B5E 55%,#F77957 100%);

  --shadow:0 10px 28px rgba(25,19,15,.10);
  --shadow-s:0 4px 14px rgba(25,19,15,.08);
  --shadow-pair:0 10px 30px rgba(25,19,15,.08);
  --shadow-pair-lead:0 0 0 4px #FFD7C6,0 16px 36px rgba(247,121,87,.22);
  --shadow-push:0 12px 34px rgba(25,19,15,.20);
  --shadow-paper:0 6px 20px rgba(25,19,15,.08);

  --radius-card:28px;
  --radius-tile:24px;
  --radius-chip:22px;
  --radius-input:20px;
  --radius-row:18px;
  --radius-nav:34px;
  --radius-tag:8px;

  --font:'Onest',system-ui,sans-serif;

  /* сайт */
  --wrap:1240px;
  --gut:clamp(20px,4vw,48px);
  --sec:clamp(72px,8vw,128px);
  --header-h:64px;
  --shadow-phone:0 0 0 1px rgba(25,19,15,.05),0 28px 64px -18px rgba(25,19,15,.22);
  --shadow-phone-s:0 0 0 1px rgba(25,19,15,.05),0 16px 36px -14px rgba(25,19,15,.18);
  --shadow-float:var(--shadow);
  --ease-out:cubic-bezier(.2,.7,.2,1);

  --fs-display:clamp(40px,3.4vw + 27px,76px);
  --fs-h2:clamp(32px,2.3vw + 23px,56px);
  --fs-h3:clamp(26px,1.3vw + 21px,40px);
  --fs-lead:clamp(18px,.4vw + 16.4px,22px);
  --lh-display:1;
  --lh-h2:1.06;
  --lh-h3:1.1;
  --lh-body:1.6;
  --track-display:-.032em;
  --track-h2:-.028em;
  --track-h3:-.022em;
  --track-h4:-.01em;
}
@media (min-width:481px){:root{--header-h:76px}}

/* письменности, которым латинский кегль и трекинг не подходят; шрифт подключает build.py только на их страницах */
:lang(zh){--font:'Onest','Noto Sans SC',system-ui,sans-serif;--lh-display:1.2;--lh-h2:1.25;--lh-h3:1.3;--lh-body:1.7}
:lang(hi){--font:'Onest','Noto Sans Devanagari',system-ui,sans-serif}
:lang(bn){--font:'Onest','Noto Sans Bengali',system-ui,sans-serif}
:lang(ar){--font:'Onest','Noto Sans Arabic',system-ui,sans-serif;--lh-display:1.4;--lh-h2:1.4;--lh-h3:1.4;--lh-body:1.75}
:lang(hi),:lang(bn){--lh-display:1.35;--lh-h2:1.35;--lh-h3:1.35;--lh-body:1.75;--fs-display:clamp(36px,3vw + 25px,68px)}
:lang(de){--fs-display:clamp(36px,3vw + 25px,68px)}
:lang(zh),:lang(hi),:lang(bn),:lang(ar){--track-display:normal;--track-h2:normal;--track-h3:normal;--track-h4:normal}
:lang(de) :is(p,h3,h4,li),:lang(fr) :is(p,h3,h4,li),:lang(es) :is(p,h3,h4,li),:lang(pt) :is(p,h3,h4,li){hyphens:auto}

/* ---------- основа ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:calc(var(--header-h) + 16px)}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;font-weight:400;line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.page{position:relative;overflow-x:clip}
img,svg{display:block;max-inline-size:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
summary{cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--ink)}
.vh{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.ms{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;flex:none;inline-size:1em;block-size:1em;overflow:hidden;white-space:nowrap;direction:ltr;font-feature-settings:'liga';font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;-webkit-user-select:none;user-select:none}
.ms.fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
/* SVG-иконки кнопок без подписи (меню, стрелки галереи, раскрытие вопроса): те же 24 px и толщина, что у шрифта */
.ic{inline-size:24px;block-size:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.skip{position:absolute;inset-inline-start:16px;inset-block-start:-80px;z-index:100;padding:12px 18px;border-radius:22px;background:var(--white);font-weight:600;box-shadow:var(--shadow-float)}
.skip:focus{inset-block-start:12px}

.wrap{position:relative;z-index:1;max-inline-size:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}

/* ---------- текст ---------- */
.wordmark{font-family:'Onest',system-ui,sans-serif;font-weight:800;line-height:1.1;padding-inline:.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
h1,h2,h3,h4{color:var(--ink);text-wrap:balance}
h1{font-size:var(--fs-display);font-weight:800;line-height:var(--lh-display);letter-spacing:var(--track-display)}
h2{font-size:var(--fs-h2);font-weight:800;line-height:var(--lh-h2);letter-spacing:var(--track-h2)}
h3{font-size:var(--fs-h3);font-weight:800;line-height:var(--lh-h3);letter-spacing:var(--track-h3)}
h4{font-size:20px;font-weight:700;line-height:1.2;letter-spacing:var(--track-h4)}
p,li,figcaption,summary{text-wrap:pretty}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink2)}
.body-l{font-size:17px;line-height:var(--lh-body);color:var(--ink2)}
.kicker{font-size:17px;font-weight:600;line-height:1.3;color:var(--ink2)}
.tag{display:inline-block;padding:5px 12px 6px;border-radius:var(--radius-tag);background:var(--cat);font-size:14px;font-weight:700;line-height:1.2;color:var(--ink)}
.sec-head h2{margin-block-start:20px;max-inline-size:22ch}
.sec-head .lead{margin-block-start:20px;max-inline-size:44ch}
@media (min-width:481px){
  h4{font-size:22px}
  .body-l{font-size:18px}
  .tag{font-size:15px}
}

/* ---------- кнопки ---------- */
/* Главная кнопка сайта: grad с текстом ink (6,9–10,2:1). Белый на grad (1,8–2,7:1) остаётся только в приложении, 3.11 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-block-size:56px;padding-block:14px;padding-inline:30px 26px;border-radius:28px;background:var(--grad);color:var(--ink);font-size:18px;font-weight:700;line-height:1.2;text-align:center;touch-action:manipulation;transition:filter .2s ease,box-shadow .2s ease}
.btn .ms{font-size:22px;transition:translate .2s ease}
.btn:hover{filter:saturate(1.12) brightness(1.03);box-shadow:0 10px 24px -10px rgba(247,121,87,.55)}
.btn:hover .ms{translate:3px 0}
.btn:active{translate:0 1px}
[dir=rtl] .btn .ms{scale:-1 1}
[dir=rtl] .btn:hover .ms{translate:-3px 0}
.btn.sm{min-block-size:44px;padding-block:10px;padding-inline:20px 18px;border-radius:22px;font-size:16px;white-space:nowrap}
.btn.sm .sh{display:none}
@media (max-width:480px){
  .btn.sm .lg{display:none}
  .btn.sm .sh{display:inline}
  .cta-row .btn,.band-act .btn,.cta-row .play{inline-size:100%;justify-content:center}
}
@media (min-width:481px){.btn{white-space:nowrap}}

/* «Скоро в Google Play»: просто текст, не ссылка и не пилюля */
.soon{display:inline-flex;align-items:center;gap:10px;min-block-size:56px;font-size:16px;font-weight:500;line-height:1.3;color:var(--ink2)}
.soon .ms{font-size:26px}
.soon b{font-weight:600;color:var(--ink)}
/* «Скачать в Google Play», когда в config.json задан play_url: вторая кнопка рядом с веб-версией */
.play{display:inline-flex;align-items:center;gap:10px;min-block-size:56px;padding-block:12px;padding-inline:22px 26px;border-radius:28px;background:var(--card);color:var(--ink);font-size:18px;font-weight:700;line-height:1.2;transition:background-color .2s ease}
.play:hover{background:var(--cat)}
.play .ms{font-size:24px}

.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.cta-row:has(.play){gap:12px 16px}
.note-lang{display:flex;align-items:flex-start;gap:8px;font-size:15px;line-height:1.45;color:var(--ink2)}
.note-lang .ms{font-size:20px;margin-block-start:1px}

/* ---------- шапка ---------- */
.site-header{position:sticky;inset-block-start:0;z-index:50;transition:background-color .25s ease,box-shadow .25s ease}
.site-header.solid,.site-header:has(.mnav[open]){background:var(--bg);box-shadow:0 1px 0 var(--hint)}
.hdr{display:flex;align-items:center;gap:12px;block-size:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;border-radius:14px}
.brand img{inline-size:32px;block-size:auto}
.brand .wordmark{font-size:24px}
.hdr .brand{margin-inline-end:auto}
.nav{display:none}
.hdr-lang,.lang{display:none;order:2}
.mnav{order:3}
.hdr .btn{order:2}
@media (max-width:359px){.hdr .wordmark{display:none}}
@media (min-width:481px){
  .hdr{gap:16px}
  .brand img{inline-size:36px}
  .brand .wordmark{font-size:26px}
}
@media (min-width:768px){
  .hdr-lang{display:inline-flex}
  .lang{display:block}
  .hdr .btn{order:4}
}
@media (min-width:960px){
  .hdr{gap:32px}
  .nav{display:flex;order:1;gap:32px}
  .mnav{display:none}
}
.nav a{display:inline-flex;align-items:center;min-block-size:44px;font-size:16px;font-weight:500;line-height:1.3;color:var(--ink2);border-radius:8px;transition:color .2s ease}
.nav a:hover{color:var(--ink)}

/* язык: при двух языках — ссылка на второй, при трёх и больше — список */
.hdr-lang,.lang summary{align-items:center;justify-content:center;gap:6px;min-block-size:44px;min-inline-size:44px;padding-inline:8px;border-radius:22px;font-size:15px;font-weight:600;line-height:1.2;color:var(--ink2);transition:background-color .2s ease,color .2s ease}
.hdr-lang .ms,.lang summary .ms{font-size:20px}
.hdr-lang:hover,.lang summary:hover{background:var(--card);color:var(--ink)}
@media (max-width:959px){.hdr-lang .lang-name,.lang summary .lang-name{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media (min-width:960px){.hdr-lang,.lang summary{padding-inline:10px 12px}}
.lang{position:relative}
.lang summary{list-style:none;display:inline-flex}
.lang summary::-webkit-details-marker{display:none}
.lang-panel{position:absolute;inset-block-start:calc(100% + 8px);inset-inline-end:0;min-inline-size:220px;padding:8px;background:var(--white);border-radius:20px;box-shadow:var(--shadow-float)}
.lang-panel a,.mnav-langs a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-block-size:44px;padding-inline:14px;border-radius:14px;font-size:16px;font-weight:500;color:var(--ink)}
.lang-panel a:hover,.mnav-langs a:hover{background:var(--card)}
.lang-panel a[aria-current],.mnav-langs a[aria-current]{background:var(--cat)}
.lang-panel .ms,.mnav-langs .ms{font-size:20px}

/* меню на узком экране */
.mnav summary{list-style:none;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:50%;background:var(--card)}
.mnav summary::-webkit-details-marker{display:none}
.mnav .i-close,.mnav[open] .i-menu{display:none}
.mnav[open] .i-close{display:block}
.mnav-panel{position:fixed;inset-inline:0;inset-block-start:var(--header-h);padding:16px var(--gut) 24px;max-block-size:min(calc(100dvh - 64px),960px);overflow:auto;background:var(--bg);border-block-end:1px solid var(--hint)}
.mnav-panel nav a{display:flex;align-items:center;min-block-size:48px;padding-block:6px;font-size:20px;font-weight:600;line-height:1.3;color:var(--ink);border-block-end:1px solid var(--hint)}
.mnav-langs{margin-block-start:16px}
.mnav-langs ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.mnav-langs .mnav-lang{justify-content:flex-start;padding-inline:0;font-weight:600}
.mnav-langs .mnav-lang:hover{background:none;color:var(--ink2)}
@media (min-width:768px){.mnav-langs{display:none}}

/* ---------- пятна ---------- */
.blob{position:absolute;z-index:0;aspect-ratio:1;border-radius:50%;filter:blur(var(--blur,96px));opacity:var(--o,.95);pointer-events:none}
.blob.cat{background:var(--cat)}
.blob.want{background:var(--want)}
.blob.add{background:var(--add)}

/* ---------- телефон ---------- */
.phone{--w:300px;inline-size:var(--w);padding:calc(var(--w)*.032);background:var(--white);border-radius:calc(var(--w)*.15);box-shadow:var(--shadow-phone);flex:none}
.phone img{inline-size:100%;block-size:auto;aspect-ratio:1080/2400;border-radius:calc(var(--w)*.118);background:var(--bg)}

.duo{--pw:min(196px,46vw);position:relative;flex:none;inline-size:calc(var(--pw)*1.82);block-size:calc(var(--pw)*2.47)}
.duo .ph{position:absolute}
.duo .phone{--w:var(--pw)}

/* ---------- первый экран ---------- */
.hero{position:relative;padding-block:clamp(32px,4vw,64px) clamp(48px,5vw,72px)}
.hero .b1{inline-size:clamp(380px,48vw,760px);inset-inline-start:-16vw;inset-block-start:-300px}
.hero .b2{inline-size:clamp(280px,34vw,520px);inset-inline-end:-12vw;inset-block-start:160px;--o:.8}
.hero .b3{inline-size:clamp(320px,40vw,600px);inset-inline-start:-17vw;inset-block-start:84%;--o:.9;--blur:120px}
.hero-grid{display:grid;gap:48px;justify-items:center}
.hero-copy{justify-self:stretch}
.hero h1{margin-block-start:16px}
.hero h1 .l{display:block}
.hero .lead{margin-block-start:20px;max-inline-size:34ch}
.hero .cta-row{margin-block-start:32px}
.notes{display:grid;gap:6px;margin-block-start:20px;max-inline-size:46ch;font-size:15px;line-height:1.45;color:var(--ink2)}
.facts{display:flex;flex-direction:column;gap:12px;margin-block-start:28px}
.facts li{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500;line-height:1.3;color:var(--ink)}
.facts .ms{font-size:20px}
.hero-duo .back{inset-inline-start:0;inset-block-start:0}
.hero-duo .front{inset-inline-end:0;inset-block-start:calc(var(--pw)*.28)}
.hero-duo .back .phone{rotate:-3.5deg}
.hero-duo .front .phone{rotate:3deg}
[dir=rtl] .hero-duo .back .phone{rotate:3.5deg}
[dir=rtl] .hero-duo .front .phone{rotate:-3deg}
@media (min-width:481px){
  .hero h1{margin-block-start:20px}
  .hero .lead{margin-block-start:24px}
  .hero .cta-row{margin-block-start:36px}
  .notes{margin-block-start:24px}
  .facts{flex-direction:row;flex-wrap:wrap;gap:12px 28px}
}
@media (min-width:768px){
  .hero-grid{gap:64px}
  .hero-copy{justify-self:start;max-inline-size:620px}
  .hero-duo{--pw:248px}
}
@media (min-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
  .hero-copy{max-inline-size:none}
  .hero h1{font-size:clamp(44px,5vw,56px)}
  .hero-duo{--pw:min(236px,22vw);justify-self:end}
}
@media (min-width:1200px){
  .hero-grid{gap:48px}
  .hero h1{font-size:var(--fs-display)}
  .hero-duo{--pw:300px}
}

/* ---------- «Знакомо?» ---------- */
.story{position:relative;padding-block:calc(var(--sec)*.5)}
.story-grid{display:grid;gap:48px}
.chat{margin-block-start:32px;padding:24px;background:var(--card);border-radius:var(--radius-card)}
.chat-lines{display:grid;gap:14px}
.who{display:block;margin-block-end:6px;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink2)}
.bubble{display:inline-block;max-inline-size:85%;padding:12px 18px;border-radius:20px;background:var(--white);font-size:17px;line-height:1.45;color:var(--ink)}
.chat-aside{margin-block-start:24px;font-size:14px;line-height:1.4;color:var(--ink2);text-align:center;text-wrap:balance}
.chat-aside .ms{font-size:18px;vertical-align:-4px;margin-inline-end:6px}
.story-end .body-l{margin-block-start:16px;max-inline-size:40ch}
/* меню семьи листом, как «Поделиться меню»: всё, что семья готовит, перед глазами */
.story-end .paper{z-index:2;margin-block-start:32px}
@media (min-width:481px){.chat{padding:28px}}
@media (min-width:768px){
  .story-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
  .story-end{padding-block-start:72px}
  .story-end .paper{inline-size:100%;padding:28px 24px 24px}
  .story-end .m-cols{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:1200px){
  .story-grid{gap:80px}
  .story-end{padding-block-start:56px}
  .story-end .paper{inline-size:min(500px,calc(100% + 80px));margin-inline-start:-80px;padding:40px 40px 32px}
  .story-end .m-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ---------- как это работает ---------- */
.how{padding-block:calc(var(--sec)*.5)}
.steps{display:grid;margin-block-start:32px}
.step{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;align-content:start;padding-block:24px;border-block-start:1px solid var(--hint)}
.step-ico{grid-row:span 3;display:grid;place-items:center;inline-size:56px;block-size:56px;border-radius:50%;background:var(--peach)}
.step:nth-child(2) .step-ico{background:var(--cat)}
.step:nth-child(3) .step-ico{background:var(--add)}
.step-ico .ms{font-size:26px}
.step-n{font-size:14px;font-weight:500;line-height:1.3;color:var(--ink2)}
.step h3{margin-block-start:4px;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:var(--track-h4)}
.step p{margin-block-start:8px;max-inline-size:34ch;color:var(--ink2)}
@media (min-width:768px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-block-start:56px}
  .step{display:block;padding-block:28px 0}
  .step-ico{margin-block-end:20px}
}
@media (min-width:1200px){
  .steps{gap:48px;margin-block-start:56px}
  .step h3{font-size:22px}
}

/* ---------- галерея ---------- */
.gallery{position:relative;display:grid;grid-template-columns:[full-start] minmax(var(--gut),1fr) [content-start] minmax(0,var(--wrap)) [content-end] minmax(var(--gut),1fr) [full-end];padding-block:calc(var(--sec)*.4) calc(var(--sec)*.5)}
.gallery > .blob{inline-size:420px;inset-inline-start:50%;inset-block-start:58%;translate:-50% -50%;--o:.5;--blur:110px}
[dir=rtl] .gallery > .blob{translate:50% -50%}
.gal-head{position:relative;z-index:1;grid-column:content;grid-row:1}
.gal-head .lead{margin-block-start:20px;max-inline-size:44ch}
.gal-head h2{margin-block-start:20px}
.gal-nav{position:relative;z-index:1;grid-column:content;grid-row:3;justify-self:center;display:flex;gap:12px}
.gal-btn{display:grid;place-items:center;inline-size:48px;block-size:48px;border-radius:50%;background:var(--card);color:var(--ink);transition:background-color .2s ease,opacity .2s ease}
.gal-btn:hover{background:var(--cat)}
.gal-btn[aria-disabled=true]{opacity:.4;cursor:default}
.gal-btn[aria-disabled=true]:hover{background:var(--card)}
[dir=rtl] .gal-nav .ms,[dir=rtl] .gal-nav .ic{scale:-1 1}
html:not(.js) .gal-nav{display:none}
.strip{--bleed:max(var(--gut),calc((100% - var(--wrap))/2));position:relative;z-index:1;grid-column:full;grid-row:2;margin-block-start:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--bleed);scroll-behavior:smooth;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip:focus-visible{outline-offset:-6px;box-shadow:inset 0 0 0 2px var(--ink)}
.shots{display:flex;gap:16px;inline-size:max-content;padding-inline:var(--bleed);padding-block:16px 40px}
.shot{--gw:min(240px,62vw);flex:none;scroll-snap-align:start}
.shot .phone{--w:var(--gw);box-shadow:var(--shadow-phone-s)}
.shot figcaption{max-inline-size:var(--gw);margin-block-start:20px}
.shot strong{display:block;font-size:20px;font-weight:700;line-height:1.25;color:var(--ink)}
.shot figcaption span{display:block;margin-block-start:4px;font-size:15px;line-height:1.4;color:var(--ink2)}
@media (min-width:481px){.gallery > .blob{inline-size:640px}}
@media (min-width:768px){
  .gal-nav{grid-row:1;justify-self:end;align-self:end}
  .gal-head{padding-inline-end:136px}
  .strip{margin-block-start:32px}
  .shots{gap:24px;padding-block-end:48px}
  .shot{--gw:220px}
}
@media (min-width:1200px){
  .shots{gap:32px}
  .shot{--gw:250px}
}

/* ---------- возможности ---------- */
.spreads{padding-block:calc(var(--sec)*.5) calc(var(--sec)*.2)}
.spread{display:grid;gap:48px;padding-block:clamp(36px,3vw,44px)}
/* текст над пятнами соседнего телефона: у .blob z-index 0 без своего контекста */
.spread .copy{position:relative;z-index:1}
.spreads .sec-head + .spread{padding-block-start:clamp(40px,4vw,56px)}
.copy{max-inline-size:600px}
.copy .body-l{margin-block-start:20px}
.sub{margin-block-start:32px;padding-block-start:28px;border-block-start:1px solid var(--hint)}
.sub h4{display:flex;align-items:center;gap:10px}
.sub p{margin-block-start:10px;color:var(--ink2)}
.copy .cta-row{margin-block-start:32px}
.copy .note-lang{margin-block-start:16px;max-inline-size:46ch}
.visual{position:relative;display:grid;place-items:center}
.visual .blob{inline-size:400px;inset-inline-start:50%;inset-block-start:50%;translate:-50% -50%;--o:.75;--blur:88px}
.visual .blob.two{inline-size:240px;inset-inline-start:76%;inset-block-start:78%;--o:.65}
.rev .visual .blob.two{inset-inline-start:24%}
[dir=rtl] .visual .blob{translate:50% -50%}
.visual > .ph{position:relative;z-index:1}
.visual > .ph .phone{--w:240px}
.visual .duo{z-index:1}
/* голосование: сравнение пар впереди, итоги за ним */
.s2 .duo{--pw:min(190px,45vw);block-size:calc(var(--pw)*2.43)}
.s2 .back{inset-inline-end:0;inset-block-start:0}
.s2 .front{inset-inline-start:0;inset-block-start:calc(var(--pw)*.27)}
.s2 .back .phone{rotate:3deg}
.s2 .front .phone{rotate:-3deg}
[dir=rtl] .s2 .back .phone{rotate:-3deg}
[dir=rtl] .s2 .front .phone{rotate:3deg}
@media (min-width:768px){
  .visual .blob{inline-size:600px}
  .visual .blob.two{inline-size:340px}
  .s1 .visual .blob{inline-size:720px}
  .visual > .ph .phone{--w:280px}
  .s2 .duo{--pw:240px}
}
@media (min-width:900px){
  .spread{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:center}
  .rev .visual{order:-1}
  .copy{max-inline-size:520px}
  .rev .copy{justify-self:start}
  .s2 .duo{--pw:min(240px,23vw)}
}
@media (min-width:1200px){
  .visual > .ph .phone{--w:290px}
  .s2 .duo{--pw:250px}
}

/* пилюля «Хочу» у экрана «Сегодня» */
.want-pill{position:absolute;z-index:2;inset-block-start:12%;inset-inline-end:-28px;display:inline-flex;align-items:center;gap:8px;block-size:48px;padding-inline:16px 20px;border-radius:24px;background:var(--want);box-shadow:var(--shadow-float);font-size:17px;font-weight:600;line-height:1;color:var(--ink);white-space:nowrap;rotate:-3deg}
.want-pill .ms{font-size:22px}
[dir=rtl] .want-pill{rotate:3deg}

/* способы позвать семью, у экрана семьи */
.ways{position:absolute;z-index:2;inset-inline-start:-8px;inset-block-end:14%;inline-size:180px;padding:8px;background:var(--white);border-radius:20px;box-shadow:var(--shadow-float);rotate:-2.5deg}
.ways li{display:flex;align-items:center;gap:12px;min-block-size:44px;padding-inline:10px;font-size:15px;font-weight:600;line-height:1.25}
.ways li + li{border-block-start:1px solid var(--hint)}
.ways .ms{font-size:22px}
[dir=rtl] .ways{rotate:2.5deg}
@media (min-width:481px){.ways{inline-size:224px;inset-inline-start:-36px}}

/* лист меню в духе ресторанного, как «Поделиться меню» в приложении */
.paper{position:relative;z-index:1;inline-size:calc(100% - 24px);padding:28px 22px 24px;background:var(--white);border-radius:12px;box-shadow:var(--shadow-paper);line-height:1.3;rotate:-1.5deg}
[dir=rtl] .paper{rotate:1.5deg}
.m-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;padding-block-end:16px;margin-block-end:24px;border-block-end:1px solid var(--hint)}
.m-fam{font-size:32px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.m-sub{font-size:17px;font-weight:500;color:var(--ink2)}
.m-cols{display:grid;gap:24px 32px}
.m-cols > span,.m-sec,.m-dish,.m-foot{display:block}
.m-sec + .m-sec{margin-block-start:24px}
.m-tag{display:block;inline-size:fit-content;margin-block-end:4px;padding:5px 12px 6px;border-radius:var(--radius-tag);background:var(--cat);font-size:14px;font-weight:700;line-height:1.2}
.m-dish{padding-block:10px 11px;border-block-start:1px solid var(--hint)}
.m-tag + .m-dish{border-block-start:0}
.m-nm{display:block;font-size:16px;font-weight:600;line-height:1.25}
.m-nt{display:block;margin-block-start:3px;font-size:13px;line-height:1.4;color:var(--ink2);text-wrap:balance}
.m-foot{padding-block-start:32px}
.m-bar{display:block;block-size:3px;border-radius:2px;background:var(--grad-line)}
.m-brand{display:block;margin-block-start:9px;font-size:12px;font-weight:500;color:var(--ink2)}
@media (min-width:481px){
  .paper{inline-size:min(500px,100%);padding:40px 40px 32px;rotate:-2deg}
  [dir=rtl] .paper{rotate:2deg}
  .m-fam{font-size:38px}
  .m-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .m-foot{padding-block-start:40px}
}

/* ---------- мелочи ---------- */
.extras{padding-block:calc(var(--sec)*.5) calc(var(--sec)*.8)}
.extras h2{max-inline-size:22ch}
.cards{display:grid;gap:16px;margin-block-start:40px}
.card{padding:28px 24px 30px;background:var(--card);border-radius:var(--radius-card)}
.ico{display:grid;place-items:center;inline-size:52px;block-size:52px;border-radius:50%;background:var(--white)}
.card h3{margin-block-start:20px;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:var(--track-h4)}
.card p{margin-block-start:10px;max-inline-size:52ch;font-size:16px;line-height:1.5;color:var(--ink2)}
.long-rows{display:grid;gap:8px;margin-block-start:24px}
.long-row{padding:14px 18px;border-radius:var(--radius-row);background:var(--white)}
.long-row b{display:block;font-size:16px;font-weight:600;line-height:1.3}
.long-row span{display:block;margin-block-start:2px;font-size:14px;line-height:1.35;color:var(--ink2)}
/* языки приложения их же названиями */
.langs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin-block-start:24px;font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)}
@media (min-width:481px){
  .card{padding:32px 28px 36px}
  .card h3{font-size:22px;margin-block-start:24px}
}
@media (min-width:768px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));margin-block-start:56px}
  .card.long,.card.wide{grid-column:span 2}
}
@media (min-width:960px){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card.long,.card.wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 32px;align-items:center}
  .long-rows,.langs{margin-block-start:0}
}

/* ---------- веб-версия ---------- */
.web{padding-block:0 calc(var(--sec)*.8)}
.band{display:grid;gap:32px;padding:clamp(40px,5vw,72px) clamp(24px,6vw,88px);background:var(--grad-soft);border-radius:var(--radius-card)}
.band h2{max-inline-size:18ch}
.band .lead{margin-block-start:20px;max-inline-size:40ch}
.points{display:grid;gap:12px;margin-block-start:28px}
.points li{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:500;line-height:1.35;color:var(--ink)}
.band-act{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.or-type{font-size:16px;line-height:1.4;color:var(--ink2)}
.or-type b{font-weight:600;color:var(--ink)}
.band-act > .note-lang,.band-act > .qr{inline-size:100%;padding-block-start:24px;border-block-start:1px solid var(--hint)}
.band-act > .note-lang span{max-inline-size:44ch}
.qr{display:none}
.qr img{inline-size:112px;block-size:112px;padding:10px;border-radius:16px;background:var(--white)}
.qr figcaption{max-inline-size:24ch;font-size:15px;line-height:1.45;color:var(--ink2)}
@media (max-width:480px){.band-act{align-items:stretch}}
@media (min-width:960px){.band{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px 64px;align-items:center}}
@media (min-width:1200px){
  .band{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px 80px}
  .qr{display:flex;align-items:center;gap:20px}
}

/* ---------- вопросы ---------- */
.faq{padding-block:0 calc(var(--sec)*.7)}
.faq-grid{display:grid;gap:32px}
.faq-head h2{margin-block-start:20px}
.qa{border-block-end:1px solid var(--hint)}
.qa details{border-block-start:1px solid var(--hint)}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;min-block-size:44px;padding-block:22px;font-size:18px;font-weight:600;line-height:1.3;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ms,.qa summary .ic{color:var(--ink2);transition:rotate .2s ease}
.qa details[open] summary .ms,.qa details[open] summary .ic{rotate:180deg}
.qa details p{max-inline-size:62ch;padding-block-end:28px;font-size:17px;color:var(--ink2)}
@media (min-width:481px){
  .qa summary{padding-block:18px;font-size:20px}
  .qa details p{padding-inline-end:56px}
}
@media (min-width:1200px){
  .faq-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start}
  .faq-head{position:sticky;inset-block-start:calc(var(--header-h) + 32px)}
}

/* ---------- финал: сплэш приложения ---------- */
.final{position:relative;padding-block:calc(var(--sec)*.8) var(--sec);text-align:center}
.final .b1{inline-size:clamp(320px,40vw,620px);inset-inline-start:-10vw;inset-block-start:0}
.final .b2{inline-size:clamp(260px,30vw,460px);inset-inline-end:-8vw;inset-block-start:24%;--o:.7}
/* add — слева внизу, не под текстом ink2 (контраст 4,5:1) */
.final .b3{inline-size:clamp(300px,36vw,560px);inset-inline-start:-8vw;inset-block-end:0;--o:.8;--blur:120px}
.dome{inline-size:200px;block-size:auto;margin-inline:auto;overflow:visible}
.final .wordmark{display:inline-block;margin-block-start:8px;font-size:clamp(56px,4vw + 30px,88px);padding-inline:.06em}
.tagline{font-size:20px;font-weight:500;line-height:1.4;color:var(--ink2)}
.final h2{max-inline-size:16ch;margin-block-start:40px;margin-inline:auto}
.final .lead{max-inline-size:40ch;margin-block-start:20px;margin-inline:auto}
.final .cta-row{justify-content:center;margin-block-start:36px}
.final .note-lang{justify-content:center;margin-block-start:24px}
@media (max-width:480px){.final .cta-row{flex-direction:column;align-items:stretch} .final .soon{justify-content:center}}
@media (min-width:481px){.dome{inline-size:clamp(220px,18vw,280px)}}

/* ---------- подвал ---------- */
.foot{position:relative;z-index:1;padding-block:48px 56px;border-block-start:1px solid var(--hint)}
.foot-row{display:flex;flex-direction:column;align-items:flex-start;gap:16px 48px}
.foot .brand{flex-wrap:wrap;column-gap:10px}
.foot-tag{font-size:15px;font-weight:500;color:var(--ink2)}
.foot-nav ul{display:flex;flex-wrap:wrap;gap:0 32px}
.foot-nav a,.foot-langs a,.foot-lang{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;font-size:15px;font-weight:500;line-height:1.3;color:var(--ink2);border-radius:8px;transition:color .2s ease}
.foot-nav a:hover,.foot-langs a:hover,.foot-lang:hover{color:var(--ink)}
.foot-lang .ms{font-size:20px}
.foot-langs ul{display:flex;flex-wrap:wrap;gap:0 20px;margin-block-start:16px}
.foot-langs a[aria-current]{font-weight:600;color:var(--ink)}
.foot-legal{display:flex;flex-direction:column;align-items:flex-start;gap:4px 32px;margin-block-start:24px;font-size:14px;line-height:1.4;color:var(--ink2)}
.foot-legal .foot-lang{font-size:15px}
@media (min-width:768px){
  .foot-row{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .foot-legal{flex-direction:row;flex-wrap:wrap;align-items:center}
  .foot-legal p:first-child{margin-inline-end:auto}
}

/* ---------- корень и 404 ---------- */
.mini{position:relative;overflow-x:clip;padding:clamp(64px,12vw,160px) var(--gut);text-align:center}
.mini > main{position:relative;z-index:1}
.mini .blob.cat{inline-size:clamp(320px,40vw,560px);inset-inline-start:-12vw;inset-block-start:-180px}
.mini .blob.want{inline-size:clamp(240px,28vw,400px);inset-inline-end:-10vw;inset-block-start:45%;--o:.6}
.mini .brand{justify-content:center}
.mini-langs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-block-start:32px}
.mini-langs a{display:inline-flex;align-items:center;min-block-size:44px;padding-inline:20px;border-radius:22px;background:var(--card);font-weight:600}
.mini-langs a:hover{background:var(--cat)}
.lost{display:grid;gap:56px;margin-block-start:48px}
.lost h1,.lost h2{font-size:clamp(28px,2vw + 20px,40px);font-weight:800;line-height:1.1;letter-spacing:var(--track-h3)}
.lost p{margin-block-start:12px;color:var(--ink2)}
.lost .btn{margin-block-start:24px}

/* ---------- движение ---------- */
@keyframes up{from{opacity:0;translate:0 24px}}
@keyframes drift-a{to{translate:60px 40px;scale:1.06}}
@keyframes drift-b{to{translate:-50px 50px;scale:1.05}}
@keyframes drift-c{to{translate:40px -40px;scale:1.08}}
@media (prefers-reduced-motion:no-preference){
  .hero-copy > *{animation:up .6s var(--ease-out) both}
  .hero-copy > :nth-child(2){animation-delay:.08s}
  .hero-copy > :nth-child(3){animation-delay:.16s}
  .hero-copy > :nth-child(4){animation-delay:.24s}
  .hero-copy > :nth-child(5){animation-delay:.32s}
  .hero-copy > :nth-child(6){animation-delay:.4s}
  .hero-duo{animation:up .7s .2s var(--ease-out) both}
  /* купол поднимается из-за горизонта, когда финал виден на 30 % (main.js ставит .in) */
  .dome .rise{transform-box:fill-box;transition:transform 1s .15s var(--ease-out)}
  .dome .glow{transition:opacity 1s .15s var(--ease-out)}
  .js:not(.still) .final:not(.in) .dome .rise{transform:translateY(100%)}
  .js:not(.still) .final:not(.in) .dome .glow{opacity:0}
}
@media (prefers-reduced-motion:no-preference) and (min-width:481px){
  .hero .blob.cat,.final .blob.cat{animation:drift-a 16s ease-in-out infinite alternate}
  .hero .blob.want,.final .blob.want{animation:drift-b 18s ease-in-out infinite alternate}
  .hero .blob.add,.final .blob.add{animation:drift-c 14s ease-in-out infinite alternate}
}
.still,.still *{scroll-behavior:auto!important}
.still *,.still *::before,.still *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .strip{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}