/* ==========================================================================
   glaspro · направление C2 «Округлый гуманист» (перепрогон 2026-07-28)
   ДНК 16-okruglyy-gumanist · cold / light / humanist-rounded / editorial-rail
   Линза high-end-visual-design · планка живости commercial · стек: ваниль
   Токены залочены manifest.md §2 и manifest.json
   ========================================================================== */

/* ---------- Шрифты: self-hosted, кириллица раздельным unicode-range ---------- */
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/rubik-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/rubik-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2116, U+2122, U+2212;
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/rubik-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/rubik-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2116, U+2122, U+2212;
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/rubik-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/rubik-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2116, U+2122, U+2212;
}
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/nunitosans-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/nunitosans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2116, U+2122, U+2212;
}
@font-face {
  font-family: 'Nunito Sans'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('fonts/nunitosans-cyrillic-italic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito Sans'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('fonts/nunitosans-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2116, U+2122, U+2212;
}

/* ---------- Токены ---------- */
:root{
  /* палитра (провенанс — manifest.md §2) */
  --bg:#EEF2F7;          /* 60% — прохладный off-white, сине-серый подтон */
  --surface:#FBFCFD;     /* 30% — парящие карточки/остров навигации */
  --frame:#F6F6F9;       /* лоток кадра = фон иллюстраций клиента */
  --ink:#15181C;         /* холодный почти-чёрный */
  --muted:#4C5866;       /* вторичный текст */
  --accent:#1C5B52;      /* 10% — «зафиксировано» */
  --accent-soft:#E2EAE8; /* заливка-подложка акцента */
  --amber:#FFB41D;       /* Tier 1 — иконка логотипа, только микро-маркер */

  /* тёмное поле: одна секция на страницу — смена температуры по вертикали.
     Ступень ниже акцента, тот же холодный тил (круг доработки 3b) */
  --deep:#123F39;
  --on-deep:#FBFCFD;      /* текст на тёмном поле, APCA Lc≈98 */
  --on-deep-soft:#D6E4E0; /* вторичный текст на тёмном поле, APCA Lc≈81 */

  --hair:rgba(21,40,66,.10);
  --hair-soft:rgba(21,40,66,.06);
  --rail:#7C8A96;        /* нейтраль краевого хронометража: читается и на светлом, и на тёмном */

  /* радиусы: ровно 4 ступени (концентрика лотка) */
  --r-out:28px;
  --r:20px;
  --r-in:12px;
  --pill:999px;

  /* тени: двухуровневые, холодный подтон */
  --sh-1:0 1px 2px rgba(21,40,66,.05), 0 12px 24px -12px rgba(21,40,66,.16);
  --sh-2:0 2px 4px rgba(21,40,66,.06), 0 32px 64px -24px rgba(21,40,66,.22);

  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1320px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Nunito Sans', sans-serif;
  font-size:18px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3{
  font-family:'Rubik', sans-serif;
  font-weight:600;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(35.16px, 4.1vw, 54.93px);line-height:1.08}
h2{font-size:clamp(28.13px, 3.2vw, 43.95px);line-height:1.14}
h3{font-size:clamp(22.5px, 1.8vw, 28.13px);line-height:1.22;letter-spacing:-.015em}
p{margin:0}

::selection{background:var(--accent);color:var(--surface)}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-in);
}

.skip{
  position:absolute;left:-9999px;top:8px;
  background:var(--accent);color:var(--surface);
  padding:12px 20px;border-radius:var(--pill);z-index:60;
  font-size:14.4px;font-weight:600;text-decoration:none;
}
.skip:focus{left:16px}

.wrap{
  width:100%;max-width:var(--wrap);
  margin:0 auto;
  padding:0 20px;
}

/* ---------- Сигнатура: краевой хронометраж встречи (только ≥920px) ------- */
.tl{display:none}

/* ---------- Остров навигации ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  padding:12px 0;
}
.island{
  width:100%;max-width:var(--wrap);
  margin:0 auto;
  display:flex;align-items:center;gap:16px;
  padding:12px 12px 12px 20px;
  background:rgba(251,252,253,.84);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-radius:var(--pill);
  box-shadow:var(--sh-1);
}
.island__logo{display:flex;align-items:center;flex:0 0 auto}
.island__logo img{width:118px;height:auto}
.island__nav{display:none}
.island__act{display:none}
.island__sp{flex:1 1 auto}

.burger{
  flex:0 0 auto;margin-left:auto;
  width:48px;height:48px;
  display:grid;place-items:center;
  background:var(--bg);border:0;border-radius:var(--pill);
  cursor:pointer;color:var(--ink);
  transition:background .3s var(--ease);
}
.burger:hover{background:var(--accent-soft)}
.burger span{
  display:block;width:20px;height:2px;border-radius:var(--pill);
  background:currentColor;
  transition:transform .4s var(--ease), opacity .25s var(--ease);
}
.burger span + span{margin-top:4px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* мобильная панель: панель + бэкдроп (тап мимо панели закрывает) */
.sheet{position:fixed;inset:0;z-index:50}
.sheet[hidden]{display:none}
.sheet__scrim{
  position:absolute;inset:0;
  background:rgba(21,40,66,.42);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  cursor:pointer;
}
.sheet__panel{
  position:relative;z-index:1;
  margin:12px;padding:20px;
  max-height:calc(100vh - 24px);
  overflow:auto;
  display:flex;flex-direction:column;
  background:var(--bg);
  border-radius:var(--r-out);
  box-shadow:var(--sh-2);
}
.sheet__top{display:flex;align-items:center;justify-content:space-between;min-height:48px}
.sheet__close{
  width:48px;height:48px;display:grid;place-items:center;
  background:var(--surface);border:0;border-radius:var(--pill);
  color:var(--ink);cursor:pointer;box-shadow:var(--sh-1);
}
.sheet__nav{display:flex;flex-direction:column;gap:4px;margin-top:24px}
.sheet__nav a{
  font-family:'Rubik', sans-serif;font-weight:500;
  font-size:28.13px;line-height:1.4;
  text-decoration:none;
  animation:rise 520ms cubic-bezier(.22,.61,.36,1) both;
}
.sheet__nav a:nth-child(1){animation-delay:40ms}
.sheet__nav a:nth-child(2){animation-delay:80ms}
.sheet__nav a:nth-child(3){animation-delay:120ms}
.sheet__nav a:nth-child(4){animation-delay:160ms}
.sheet__nav a:nth-child(5){animation-delay:200ms}
.sheet__act{margin-top:32px;display:flex;flex-direction:column;gap:12px}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'Rubik', sans-serif;font-weight:500;font-size:18px;line-height:1;
  text-decoration:none;border:0;cursor:pointer;
  white-space:nowrap;flex:0 0 auto;
  padding:16px 16px 16px 28px;
  border-radius:var(--pill);
  transition:transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.btn--primary{background:var(--accent);color:var(--surface);box-shadow:var(--sh-1)}
.btn--primary:hover{box-shadow:var(--sh-2)}
.btn--ghost{background:var(--surface);color:var(--accent);box-shadow:var(--sh-1);padding:16px 28px}
.btn--ghost:hover{background:var(--accent-soft)}
.btn:active{transform:scale(.985)}
.btn__ic{
  width:32px;height:32px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:var(--pill);
  background:rgba(251,252,253,.18);
  transition:transform .4s var(--ease);
}
.btn--ghost .btn__ic{background:rgba(28,91,82,.10)}
.btn:hover .btn__ic{transform:translate(3px,-1px) scale(1.06)}
.btn__ic svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.btn--sm{font-size:14.4px;padding:12px 12px 12px 20px}
.btn--sm .btn__ic{width:24px;height:24px}
.btn--sm .btn__ic svg{width:12px;height:12px}
.btn--full{width:100%;justify-content:center}

.lnk{
  font-family:'Rubik', sans-serif;font-weight:500;font-size:18px;
  color:var(--accent);text-decoration:none;
  padding:12px 16px;border-radius:var(--pill);
  transition:background .3s var(--ease);
}
.lnk:hover{background:var(--accent-soft)}

/* ---------- Рубрикаторы ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Rubik', sans-serif;font-weight:500;
  font-size:14.4px;line-height:1;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
  background:var(--surface);
  padding:12px 20px;border-radius:var(--pill);
  box-shadow:var(--sh-1);
}
.eyebrow--plain{background:none;box-shadow:none;padding:0;color:var(--accent)}
.eyebrow--deep{background:none;box-shadow:none;padding:0;color:var(--on-deep-soft)}
.dot{width:8px;height:8px;border-radius:var(--pill);background:var(--amber);flex:0 0 auto}

.lead{
  font-size:clamp(18px, 1.65vw, 22.5px);
  line-height:1.55;color:var(--muted);
  max-width:38ch;
}

/* ---------- HERO ---------- */
.hero{padding:32px 0 64px}
.hero__grid{display:grid;gap:40px}
.hero__scene{order:2}
.hero__apps{order:3}

.hero h1{margin:24px 0 0;max-width:14ch}
.hero .lead{margin-top:24px}

/* сигнатурный ход: последнее слово H1 — штамп зафиксированной договорённости */
.pledge{
  display:inline-flex;align-items:baseline;gap:.16em;
  white-space:nowrap;
  background:var(--accent);color:var(--surface);
  border-radius:var(--r-in);
  padding:0 .18em .06em .2em;
  box-shadow:var(--sh-1);
}
.pledge svg{
  width:.44em;height:.44em;flex:0 0 auto;
  stroke:var(--amber);stroke-width:3.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  transform:translateY(-.02em);
}

.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.stores{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.stores a{display:block;transition:transform .3s var(--ease), opacity .3s var(--ease)}
.stores a:hover{transform:translateY(-2px)}
.stores img{height:44px;width:auto}

.hint{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:20px;font-size:14.4px;color:var(--muted);
}
.hint img{height:32px;width:auto}

/* продуктовая сцена */
.scene{position:relative;padding:8px}
.scene__plate{
  position:relative;
  border-radius:var(--r-out);
  background:var(--surface);
  background-image:radial-gradient(120% 90% at 50% 0%, rgba(28,91,82,.06) 0%, rgba(28,91,82,0) 62%);
  box-shadow:var(--sh-2);
  padding:32px 24px 24px;
}
.scene__plate img{width:100%}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);
  border-radius:var(--pill);
  padding:12px 20px;
  font-size:14.4px;font-weight:600;line-height:1;
  box-shadow:var(--sh-2);
  white-space:nowrap;
}
.chip--rec{position:absolute;top:0;right:8px;z-index:2}
.rec{
  width:10px;height:10px;border-radius:var(--pill);background:var(--amber);
  flex:0 0 auto;
  animation:beat 2600ms var(--ease) infinite;
}
@keyframes beat{
  0%,72%,100%{opacity:1;transform:scale(1)}
  36%{opacity:.32;transform:scale(.72)}
}

.pcard{
  position:relative;
  margin:-32px 0 0 0;
  background:var(--surface);
  border-radius:var(--r);
  padding:20px 24px;
  box-shadow:var(--sh-2);
  z-index:2;
  max-width:340px;
}
.pcard__k{
  display:flex;align-items:center;gap:8px;
  font-size:14.4px;font-weight:700;color:var(--accent);
  letter-spacing:.04em;text-transform:uppercase;
}
.pcard__k svg{width:16px;height:16px;stroke:var(--accent);stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.pcard__t{font-family:'Rubik', sans-serif;font-weight:500;font-size:18px;line-height:1.35;margin-top:8px}
.pcard__m{
  margin-top:12px;padding-top:12px;
  border-top:1px solid var(--hair-soft);
  font-size:14.4px;line-height:1.45;color:var(--muted);
}
.pcard__m b{font-weight:700;color:var(--ink)}

/* ---------- Как это работает ---------- */
.how{padding:64px 0}
.sechead h2{margin-top:20px;max-width:15ch}
.sechead .lead{margin-top:20px;max-width:46ch}

.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:20px;align-items:start}
.step{
  background:var(--surface);
  border-radius:var(--r-out);
  padding:28px 24px;
  box-shadow:var(--sh-1);
  display:grid;gap:24px;align-items:start;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.step__n{
  font-family:'Rubik', sans-serif;font-weight:700;
  font-size:14.4px;letter-spacing:.1em;
  color:var(--accent);
  display:block;
}
.step h3{margin-top:8px}
.step__d{margin:12px 0 0;color:var(--muted);font-size:18px;max-width:40ch}
/* кадр шага — подлинный экран приложения на лотке цвета его же фона */
.step__shot{
  background:var(--frame);
  border-radius:var(--r);
  overflow:hidden;
  max-width:232px;
}
.step__shot img{width:100%}
.step__shot--card{background:none;max-width:none}

/* карточка задачи — свёрстана, не скриншот: доказательство обещания шага 04 */
.tcard{
  background:var(--frame);
  border-radius:var(--r);
  padding:20px;
}
.tcard__k{
  display:flex;align-items:center;gap:8px;
  font-size:14.4px;font-weight:700;color:var(--accent);
  letter-spacing:.04em;text-transform:uppercase;line-height:1.2;
}
.tcard__k svg{width:16px;height:16px;flex:0 0 auto;stroke:var(--accent);stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.tcard__t{font-family:'Rubik', sans-serif;font-weight:500;font-size:18px;line-height:1.35;margin-top:12px}
.tcard__meta{
  margin:16px 0 0;padding-top:16px;
  border-top:1px solid var(--hair-soft);
  display:grid;gap:12px;
}
.tcard__meta div{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.tcard__meta dt{font-size:14.4px;color:var(--muted);margin:0}
.tcard__meta dd{font-size:14.4px;font-weight:700;margin:0;text-align:right}

/* списки-факты */
.facts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.facts li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:18px;line-height:1.5;
}
.facts svg{
  width:24px;height:24px;flex:0 0 auto;margin-top:4px;
  stroke:var(--accent);stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.facts--demo{margin-top:32px;color:var(--muted)}

/* ---------- Тёмное поле: одна секция на страницу ---------- */
.proof{
  background:var(--deep);
  color:var(--on-deep);
  padding:72px 0;
}
.proof__grid{display:grid;gap:40px}
.proof h2{margin-top:20px}
.proof .eyebrow--deep{color:var(--on-deep-soft)}
.proof .facts{margin-top:32px}
.proof .facts svg{stroke:var(--amber)}
.proof__shot{
  background:var(--surface);
  border-radius:var(--r-out);
  padding:16px 16px 0;
  overflow:hidden;
}

/* ---------- Полоса ленты ---------- */
.strip{padding:0}

/* ---------- Лента экранов приложения (нативный снап + видимые контролы) ---- */
.gallery{margin-top:64px}
.gallery__head{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.gallery__head h2{max-width:16ch}
.rail-ctl{display:flex;gap:8px;flex:0 0 auto}
.rail-btn{
  width:48px;height:48px;display:grid;place-items:center;
  background:var(--surface);border:0;border-radius:var(--pill);
  color:var(--accent);cursor:pointer;box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.rail-btn:hover{background:var(--accent-soft)}
.rail-btn:active{transform:scale(.94)}
.rail-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

.filmstrip{
  list-style:none;margin:24px 0 0;padding:0 0 8px;
  display:flex;gap:20px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.filmstrip::-webkit-scrollbar{display:none}
.filmstrip:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.shot{
  flex:0 0 216px;scroll-snap-align:start;
  background:var(--surface);
  border-radius:var(--r-out);
  padding:8px 8px 20px;
  box-shadow:var(--sh-1);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.shot:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
/* единая обработка серии: одна холодная нота на все шесть кадров */
.shot__img{background:var(--frame);border-radius:var(--r);overflow:hidden}
.shot__img img{filter:saturate(.94) contrast(1.02)}
.shot__t{
  font-family:'Rubik', sans-serif;font-weight:500;font-size:18px;line-height:1.3;
  margin:16px 12px 0;
}
.shot__d{margin:4px 12px 0;font-size:14.4px;line-height:1.4;color:var(--muted)}

.rail-dots{display:flex;gap:8px;margin-top:20px;justify-content:center}
.rail-dots span{
  width:8px;height:8px;border-radius:var(--pill);
  background:var(--hair);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.rail-dots span.is-on{background:var(--accent);transform:scale(1.25)}

/* ---------- Демо ---------- */
.demo{padding:64px 0 80px}
.demo__grid{display:grid;gap:32px}
.demo h2{margin-top:20px}
.demo .lead{margin-top:16px}
.demo__form{
  background:var(--surface);
  border-radius:var(--r-out);
  padding:28px 24px;
  box-shadow:var(--sh-1);
  display:grid;gap:16px;
}
.field{display:grid;gap:8px}
.field span{font-size:14.4px;font-weight:700;color:var(--muted)}
.field input{
  font-family:'Nunito Sans', sans-serif;font-size:18px;
  color:var(--ink);background:var(--frame);
  border:0;border-radius:var(--r-in);
  padding:16px 20px;width:100%;
  transition:box-shadow .3s var(--ease);
}
.field input::placeholder{color:var(--muted);opacity:.7}
.field input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--accent)}
.check{display:flex;align-items:flex-start;gap:12px;font-size:14.4px;color:var(--muted);line-height:1.45}
.check input{
  width:24px;height:24px;flex:0 0 auto;margin:0;
  accent-color:var(--accent);
}

/* ---------- Подвал ---------- */
.foot{
  border-top:1px solid var(--hair-soft);
  padding:40px 0;
  font-size:14.4px;color:var(--muted);
}
.foot__grid{display:grid;gap:16px}
.foot img{width:118px;height:auto}
.foot a{color:var(--accent);text-decoration:none}
.foot a:hover{text-decoration:underline}

/* ---------- Появление секций (единая система, один момент) ---------- */
.reveal{
  animation:rise cubic-bezier(.22,.61,.36,1) both;
  animation-timeline:view();
  animation-range:entry 0% cover 30%;
}
.reveal-load{animation:rise 700ms cubic-bezier(.22,.61,.36,1) both}
/* Появление — ТОЛЬКО transform, без opacity: страница обязана сниматься
   full-page-скриншотом и печататься без потерь. Прогресс view()-таймлайна
   у секций ниже вьюпорта равен нулю, и любой `opacity:0` в этом кадре
   отдал бы пустую страницу (артефакт прошлого прогона). */
@keyframes rise{
  from{transform:translateY(28px)}
  to{transform:none}
}

/* межстраничные переходы — пол планки commercial */
@view-transition{navigation:auto}

/* ---------- ≥760px ---------- */
@media (min-width:760px){
  .wrap{padding:0 40px}
  .hero{padding:40px 0 96px}
  .stores img{height:48px}
  .steps{grid-template-columns:repeat(12,1fr);gap:24px}
  /* 760–1023: карточка узкая — кадр остаётся под текстом, две колонки не влезают */
  .step{grid-column:span 6;padding:32px}
  .step__shot{max-width:256px}
  .step__shot--card{max-width:none}
  .proof{padding:96px 0}
  .proof__grid{grid-template-columns:repeat(12,1fr);align-items:center;gap:48px}
  .proof__copy{grid-column:span 5}
  .proof__scene{grid-column:span 7}
  .demo__grid{grid-template-columns:repeat(12,1fr);align-items:start;gap:40px}
  .demo__copy{grid-column:span 5}
  .demo__form{grid-column:span 7;padding:32px}
  .foot__grid{grid-template-columns:repeat(3,1fr);align-items:center}
  .scene__plate{padding:48px 40px 40px}
  .pcard{margin-left:24px}
}

/* ---------- ≥1024px: остров раскрывается, сцена уходит вправо ---------- */
@media (min-width:1024px){
  /* Остров раскрывается компактно: на 1024–1199 нав набран ступенью ниже, а
     вторичная ссылка спрятана — иначе строка не помещается и текст CTA режется
     (находка qa-light, круг доработки 3b). Полный набор — с 1200px. */
  .island{padding:12px 12px 12px 24px;gap:20px;flex-wrap:nowrap}
  .island__nav{
    display:flex;align-items:center;gap:2px;min-width:0;
  }
  .island__nav a{
    font-family:'Rubik', sans-serif;font-weight:500;font-size:14.4px;
    text-decoration:none;color:var(--ink);white-space:nowrap;
    padding:12px;border-radius:var(--pill);
    transition:background .3s var(--ease), color .3s var(--ease);
  }
  .island__nav a:hover{background:var(--bg);color:var(--accent)}
  .island__act{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
  .island__act .lnk{display:none}
  .burger{display:none}

  .hero{padding:56px 0 120px}
  .hero__grid{
    grid-template-columns:minmax(0,47fr) minmax(0,53fr);
    column-gap:64px;row-gap:40px;
    align-items:center;
  }
  .hero__copy{grid-column:1;grid-row:1;align-self:end}
  .hero__apps{grid-column:1;grid-row:2;align-self:start}
  .hero__scene{grid-column:2;grid-row:1 / span 2;align-self:center}
  .hero .lead{margin-top:28px}

  .how{padding:96px 0 80px}
  .sechead{
    display:grid;
    grid-template-columns:minmax(0,55fr) minmax(0,45fr);
    column-gap:64px;
  }
  .sechead .eyebrow{grid-column:1;grid-row:1;justify-self:start}
  .sechead h2{grid-column:1;grid-row:2}
  .sechead .lead{grid-column:2;grid-row:2;margin-top:0;max-width:38ch;align-self:end}
  .steps{margin-top:64px}
  .step{column-gap:32px}
  .step__shot{max-width:none}
  .step--wide{grid-column:span 7;grid-template-columns:minmax(0,1fr) 248px}
  .step--narrow{grid-column:span 5;grid-template-columns:minmax(0,1fr) 168px}
  .step--proof{grid-column:span 7;grid-template-columns:1fr}
  .step--proof .tcard{max-width:none}
  .tcard__meta{grid-template-columns:repeat(3,1fr);gap:24px}
  .tcard__meta div{display:block}
  .tcard__meta dd{text-align:left;margin-top:4px}
  .gallery{margin-top:80px}
  .shot{flex:0 0 264px}

  .demo{padding:96px 0 120px}
}

/* ---------- ≥920px: краевой хронометраж (L8) ---------- */
@media (min-width:920px){
  .tl{
    display:block;
    position:fixed;left:16px;top:50%;
    transform:translateY(-50%);
    z-index:30;
    width:32px;height:320px;
    pointer-events:none;
  }
  .tl__cap{
    position:absolute;left:0;top:0;
    writing-mode:vertical-rl;
    font-family:'Rubik', sans-serif;font-weight:500;
    font-size:11.52px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--rail);
  }
  .tl__line{
    position:absolute;left:15px;top:120px;bottom:32px;
    width:2px;border-radius:var(--pill);
    background:rgba(124,138,150,.55);
  }
  .tl__t{
    position:absolute;left:24px;
    writing-mode:vertical-rl;
    font-family:'Rubik', sans-serif;font-weight:500;
    font-size:11.52px;letter-spacing:.14em;
    color:var(--rail);
  }
  .tl__t--a{top:120px}
  .tl__t--b{bottom:32px}
  .tl__mark{
    position:absolute;left:11px;top:120px;
    width:10px;height:10px;border-radius:var(--pill);
    background:var(--amber);
    box-shadow:0 0 0 4px rgba(255,180,29,.24);
    animation:tlrun linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes tlrun{
    from{transform:translateY(0)}
    to{transform:translateY(160px)}
  }
  .wrap{padding:0 56px}
  .island{padding-left:32px}
}

/* ---------- ≥1200px: остров в полный набор ---------- */
@media (min-width:1200px){
  .island{padding:12px 12px 12px 28px;gap:32px}
  .island__nav{gap:4px}
  .island__nav a{font-size:18px;padding:12px 16px}
  .island__act .lnk{display:inline-block}
}

@media (min-width:1440px){
  .wrap{padding:0 40px}
}

/* ---------- Доступность: движение отключается ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal-load,.rec,.tl__mark,.sheet__nav a{animation:none}
  .btn,.step,.stores a,.burger span,.btn__ic{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}