/* Лаготто v4. Композиция по донору diabrowser.com, значения из замера 29.09.2026 при 1440x900 (scratchpad dia-measure.json),
   в комментариях «Dia …». Шрифты наши: Noto Serif Display вместо Exposure, Commissioner вместо ABC Oracle,
   системный моноширинный вместо ABC Favorit Mono. Палитра «Лагуна». Метки обычным регистром (правило Кирилла), у Dia капс. */

:root {
  --bg: #eef3f1;                  /* морская дымка вместо тумана */
  --paper: #ffffff;
  --ink: #0f2a2c;                 /* глубокая лагуна */
  --dark: #0e3b3e;
  --sage: #cfe1dc;
  --accent: #ee8546;              /* рыжий ошейник, контраст к бирюзе */
  --t85: rgba(15, 42, 44, .85);   /* Dia rgba(0,0,0,.85) */
  --t70: rgba(15, 42, 44, .7);
  --t60: rgba(15, 42, 44, .6);
  --t45: rgba(15, 42, 44, .45);
  --t20: rgba(15, 42, 44, .2);
  --line: rgba(15, 42, 44, .12);
  --serif: "Prata", "Times New Roman", serif;
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui: var(--sans);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.45, .05, .2, 1);   /* мягче, чем у Dia */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--t85); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }   /* hidden на body мобильный Chrome не держит: страница уезжала вширь */
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* появление при входе в экран; без скрипта всё видно через 3 с */
.js [data-in] { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js [data-in].is-in { opacity: 1; transform: none; }
.js:not(.ready) [data-in] { animation: failsafe 0s linear 3s forwards; }
@keyframes failsafe { to { opacity: 1; transform: none; } }

/* ---------- Пилюля меню: Dia 253x52 по центру, top 32, фон #f8f8f8, радиус 16, ссылки 16/20 ---------- */
.topbar { position: fixed; top: 32px; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; pointer-events: none; }
.pill { pointer-events: auto; display: flex; align-items: center; gap: 4px; height: 52px; padding: 6px 14px 6px 6px; background: rgba(248, 249, 247, .94); border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(12, 20, 18, .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pill__logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--dark); color: #f1f4ee; font: 400 24px/1 var(--serif); text-decoration: none; }
.pill__link { padding: 0 10px; font: 400 16px/20px var(--sans); color: var(--ink); text-decoration: none; transition: opacity .3s; }
.pill__link:hover { opacity: .6; }

/* ---------- 1. Первый экран: Dia 1440x900, строка top 116 (38.8/42.7, -0.04em, белая), знак top 198 высотой 284, окно top 397 шириной 1115 ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 760px; overflow: hidden; color: #fff; }
.hero__field { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }   /* зерно, как на плёнке */
.hero > * { z-index: 2; }
.hero > .hero__field { z-index: 0; }
.hero__title { position: absolute; top: 116px; left: 0; right: 0; padding: 0 24px; text-align: center; font: 400 38.8px/42.7px var(--serif); letter-spacing: -.04em; }
.hero__word { position: absolute; top: 176px; left: 0; right: 0; text-align: center; font: 400 clamp(96px, 15.5vw, 236px)/1 var(--serif); letter-spacing: -.035em; color: #fff; white-space: nowrap; }   /* Dia знак 763 в ширину */
/* окно по устройству окна Dia: матовое стекло, слева три закреплённые плитки и список, справа светлый лист с крошками */
.win { position: absolute; top: 397px; left: 50%; translate: -50% 0; width: min(1115px, 77.4vw); height: 793px; display: grid; grid-template-columns: 250px minmax(0, 1fr); padding: 10px 10px 0 0; border-radius: 16px; background: rgba(236, 246, 243, .5); -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35); box-shadow: 0 34px 90px rgba(6, 36, 38, .32), inset 0 0 0 1px rgba(255, 255, 255, .45); color: var(--t85); overflow: hidden; }
.win__side { padding: 8px 10px 0 16px; }
.win__dots { display: inline-flex; gap: 8px; margin: 10px 0 0 4px; }
.win__dots i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.win__dots i:nth-child(2) { background: #febc2e; }
.win__dots i:nth-child(3) { background: #28c840; }
.win__pins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.pin { height: 54px; border-radius: 12px; background: rgba(255, 255, 255, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); display: grid; place-items: center; }
.pin svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.win__tabs { margin-top: 14px; }
.win__tabs li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font: 400 15px/20px var(--ui); color: rgba(15, 42, 44, .82); white-space: nowrap; overflow: hidden; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.win__tabs li svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: rgba(15, 42, 44, .5); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.win__tabs li i { font-style: normal; color: rgba(15, 42, 44, .5); }
.win__tabs .is-sel { background: #fff; box-shadow: 0 1px 3px rgba(6, 36, 38, .1); }
.win__more-dots { flex: 0 0 18px; font-size: 10px; letter-spacing: 1px; color: rgba(15, 42, 44, .4); }
.win__sheet { position: relative; border-radius: 12px 12px 0 0; background: rgba(250, 253, 252, .78); padding: 14px 28px 0; }
.win__tool { display: flex; align-items: center; gap: 18px; }
.win__icons { display: inline-flex; gap: 14px; }
.win__icons svg { width: 19px; height: 19px; fill: none; stroke: rgba(15, 42, 44, .55); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.win__crumb { font: 400 15px/20px var(--ui); color: rgba(15, 42, 44, .45); }
.win__crumb b { font-weight: 500; color: var(--ink); }
.win__score { margin-left: auto; padding: 4px 10px; border-radius: 10px; background: rgba(15, 42, 44, .06); font: 400 13px/18px var(--ui); color: var(--t60); }
.win__score b { font-weight: 600; color: var(--ink); }
.win__stacks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px; max-width: 640px; margin: 34px auto 0; }
.stack { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; align-items: center; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.stack p { font: 500 14px/19px var(--ui); color: var(--ink); }
.stack__doc { position: relative; height: 54px; }
.stack__doc i { position: absolute; top: 4px; left: 14px; width: 40px; height: 50px; border-radius: 3px; background: #fff; box-shadow: 0 1px 3px rgba(6, 36, 38, .16); background-image: linear-gradient(rgba(15, 42, 44, .16) 1px, transparent 1px); background-size: 100% 6px; background-position: 0 10px; background-clip: content-box; padding: 8px 6px 14px; }
.stack__doc i:nth-child(2) { left: 22px; top: 2px; transform: rotate(4deg); }
.stack__doc i:nth-child(3) { left: 30px; top: 0; transform: rotate(8deg); }
.stack__badge { position: absolute; left: 4px; top: -6px; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(6, 36, 38, .18); }
.stack__badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.win__dotsline { margin-top: 30px; text-align: center; font-size: 12px; letter-spacing: 3px; color: rgba(15, 42, 44, .3); }
.ico--lock { background: #fde6d8; color: #d4642e; } .ico--phone { background: #d6efea; color: #1f7d74; } .ico--speed { background: #e6e3fb; color: #5f4fc9; }
.ico--chart { background: #fbe1e8; color: #c2476a; } .ico--search { background: #dfecfa; color: #2f6fb3; } .ico--link { background: #f7eed3; color: #a8801c; }
.ico--send { background: #dcebfb; color: #2b7bd0; }
.pin.ico--lock, .pin.ico--chart, .pin.ico--send { background-color: rgba(255, 255, 255, .5); }

/* поле проверки: у Dia «Ask another question…» (белая строка с круглой кнопкой) */
.ask { position: relative; display: flex; align-items: center; gap: 8px; max-width: 600px; margin: 30px auto 0; padding: 6px 6px 6px 20px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(6, 36, 38, .06), 0 10px 30px rgba(6, 36, 38, .1); }
.ask__input { flex: 1; min-width: 0; height: 42px; border: 0; background: transparent; font: 400 16px/1 var(--ui); color: var(--ink); outline: none; }
.ask__input::placeholder { color: rgba(15, 42, 44, .42); }
.ask__btn { flex: 0 0 38px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; display: grid; place-items: center; transition: transform .3s var(--ease); }
.ask__btn:hover { transform: scale(1.06); }
.ask__btn svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ask__status { position: absolute; left: 20px; top: calc(100% + 8px); font: 400 12px/16px var(--ui); color: var(--t60); }

/* ---------- Кнопка на дуге: Dia блок 1440x152 у нижнего края, кнопка 442x56 радиус 9999, 20/24; подпись 14/16.8 rgba(0,0,0,.5) ---------- */
.dock { position: sticky; bottom: 0; z-index: 30; overflow: hidden; height: 152px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 30px; pointer-events: none; }
.dock::before { content: ""; position: absolute; left: -30%; right: -30%; top: 40px; height: 600px; background: var(--bg); border-radius: 50% 50% 0 0 / 110px 110px 0 0; box-shadow: 0 -16px 40px rgba(12, 20, 18, .07); }
.dock__btn { position: relative; pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: min(442px, calc(100vw - 48px)); height: 56px; border-radius: 9999px; background: var(--ink); color: #f8f8f8; font: 400 20px/24px var(--sans); text-decoration: none; box-shadow: 0 6px 18px rgba(12, 20, 18, .22); transition: transform .35s var(--ease), background-color .3s; }
.dock__btn:hover { transform: translateY(-2px); background: #2a3a36; }
.dock__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dock__note { position: relative; margin-top: 12px; font: 400 14px/16.8px var(--sans); color: rgba(28, 40, 37, .5); }

/* ---------- 2. Три шага: Dia заголовок 48/56 -0.05em; список 447 (кнопки радиус 16, номер моно 11/14, заголовок 24/30 -0.03em, текст 14/20); окна 760x562 через 60 ---------- */
.sec-title { text-align: center; font: 400 48px/56px var(--serif); letter-spacing: -.05em; color: var(--t85); }
.steps-sec { padding: 80px 30px 0; }
.steps { display: grid; grid-template-columns: 447px 760px; column-gap: 96px; margin-top: 50px; justify-content: start; }
.steps__list { position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; }
.step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 24px; border: 0; border-radius: 16px; background: none; text-align: left; cursor: pointer; }
.step::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--ink); opacity: 0; transition: opacity .4s; }
.step.is-active::before { opacity: 1; }
.step__num { font: 400 11px/14px var(--mono); letter-spacing: .06em; color: var(--t20); transition: color .4s; }
.step__title { font: 400 24px/30px var(--serif); letter-spacing: -.03em; color: var(--t45); transition: color .4s; }
.step__text { max-width: 287px; font: 400 14px/20px var(--sans); color: var(--t60); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .5s; }
.step.is-active .step__num { color: var(--t45); }
.step.is-active .step__title { color: var(--t85); }
.step.is-active .step__text { max-height: 120px; opacity: 1; }
.steps__media { display: flex; flex-direction: column; gap: 60px; }
.shot { height: 562px; border-radius: 16px; background: #e3eeeb; padding: 0 10px; box-shadow: 0 30px 70px rgba(6, 36, 38, .14), inset 0 0 0 1px rgba(255, 255, 255, .6); overflow: hidden; display: flex; flex-direction: column; }
.shot__bar { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 8px; flex: 0 0 auto; }
.shot__addr { font: 400 13px/1 var(--sans); color: var(--t60); }
.shot__body { flex: 1; min-height: 0; border-radius: 12px 12px 0 0; background: #fbfdfc; overflow: hidden; }


.shot__body--chat { display: flex; justify-content: center; align-items: flex-start; padding: 36px; background: #eef1eb; }
.msg { position: relative; width: min(420px, 100%); padding: 10px 10px 16px; border-radius: 18px 18px 18px 6px; background: #fff; box-shadow: 0 2px 6px rgba(12, 20, 18, .08); }
.msg__img { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; }
.msg__kicker { margin: 14px 8px 0; font: 400 11px/14px var(--mono); letter-spacing: .06em; color: var(--t45); }
.msg__title { margin: 4px 8px 0; font: 400 22px/28px var(--serif); letter-spacing: -.03em; color: var(--ink); }
.msg__text { margin: 8px 8px 0; font: 400 14px/20px var(--sans); color: var(--t70); }
.msg__list { margin: 10px 8px 0; counter-reset: m; }
.msg__list li { counter-increment: m; padding: 6px 0 6px 24px; position: relative; border-top: 1px solid #eef0ec; font: 400 14px/20px var(--sans); color: var(--ink); }
.msg__list li::before { content: counter(m); position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); font: 500 10px/16px var(--sans); text-align: center; color: var(--ink); }
.msg__time { position: absolute; right: 14px; bottom: 6px; font: 400 11px/1 var(--sans); color: var(--t45); }

.shot__body--test { padding: 40px 56px; }
.test__head { font: 400 24px/30px var(--serif); letter-spacing: -.03em; color: var(--ink); }
.test { margin-top: 18px; }
.test li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0 16px 26px; position: relative; border-top: 1px solid #eceeea; font: 400 15px/20px var(--sans); }
.test li span:first-child { color: var(--ink); font-weight: 500; }
.test li span:last-child { color: var(--t60); text-align: right; }
.test li::before { content: ""; position: absolute; left: 0; top: 22px; width: 9px; height: 9px; border-radius: 50%; }
.test .is-ok::before { border: 1.5px solid var(--t45); width: 7px; height: 7px; }
.test .is-bad::before { background: var(--accent); }
.test .is-warn::before { background: #f3c77d; }
.test li span:last-child { padding: 2px 10px; border-radius: 12px; background: #f1f4f2; }
.test .is-ok span:last-child { background: #dcf1eb; color: #1f6f63; }
.test .is-bad span:last-child { background: #fde6d8; color: #b04a1c; }
.test .is-warn span:last-child { background: #fbf0d6; color: #8a6414; }
.test__sum { margin-top: 22px; padding: 16px 18px; border-radius: 12px; background: #f4f6f1; font: 400 15px/22px var(--sans); color: var(--t70); }

/* ---------- 3. Плитки: Dia ширина 1180, заголовок 506, карточки 700/460 через 20, радиус 12; метка 12/30 фон белый радиус 20; текст 20/30; картинка снизу 558 или 318, радиус 12 12 0 0 ---------- */
.bento-sec { padding: 120px 20px 0; }
.bento-sec .sec-title { max-width: 506px; margin: 0 auto; }
.bento { display: flex; flex-wrap: wrap; gap: 20px; width: min(1180px, 100%); margin: 80px auto 0; }
.bcard { position: relative; flex: 0 0 calc((100% - 20px) * 460 / 1160); display: flex; flex-direction: column; min-height: 560px; padding: 31px 27px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bcard--wide { flex-basis: calc((100% - 20px) * 700 / 1160); }
.bcard__label { align-self: flex-start; padding: 0 12px; border-radius: 20px; background: var(--paper); font: 400 12px/30px var(--sans); letter-spacing: .06em; color: rgba(28, 40, 37, .55); }
.bcard__text { margin-top: 20px; padding-left: 4px; max-width: 638px; font: 400 21px/30px var(--sans); letter-spacing: -.02em; color: var(--t85); }
.bcard__vis { margin: auto auto 0; width: calc(100% - 64px); border-radius: 14px 14px 0 0; background: var(--paper); box-shadow: 0 -6px 40px rgba(15, 42, 44, .12); padding: 26px 26px 0; min-height: 300px; }
/* у каждой плитки свой мягкий оттенок, в цвет её значка в окне проверки (у Dia цвет даёт сам продукт в кадре) */
.bento .bcard:nth-child(1) { background: linear-gradient(180deg, #fff7f1, #fde6d8); border-color: #f5d6c4; }
.bento .bcard:nth-child(2) { background: linear-gradient(180deg, #f3fbf9, #d6efea); border-color: #c6e4de; }
.bento .bcard:nth-child(3) { background: linear-gradient(180deg, #f6f5fe, #e6e3fb); border-color: #d9d4f6; }
.bento .bcard:nth-child(4) { background: linear-gradient(180deg, #fef5f7, #fbe1e8); border-color: #f3cfd9; }
.bento .bcard:nth-child(5) { background: linear-gradient(180deg, #f4f9fe, #dfecfa); border-color: #cbdcf1; }
.bento .bcard:nth-child(6) { background: linear-gradient(180deg, #fdfaf1, #f7eed3); border-color: #ecdfb9; }

.vis-addr__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 20px; background: #f1f3ef; font: 400 14px/1 var(--sans); color: var(--t70); }
.vis-addr__warn { padding: 4px 10px; border-radius: 12px; background: #fde7de; color: #b4452a; font-size: 13px; font-weight: 500; }
.vis-addr__page { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; padding: 22px; border-radius: 12px 12px 0 0; background: #fbf1ee; }
.vis-addr__page b { font: 600 22px/28px var(--sans); color: #8d2f1a; }
.vis-addr__page span { font: 400 14px/20px var(--sans); color: rgba(141, 47, 26, .75); }

.vis-phone { display: flex; justify-content: center; padding-top: 18px; background: linear-gradient(#fff, #f7f8f5); }
.vis-phone__screen { width: 180px; height: 274px; padding: 16px 12px 0; border: 7px solid #1c2825; border-bottom: 0; border-radius: 26px 26px 0 0; display: flex; flex-direction: column; gap: 5px; }
.vis-phone__screen i { height: 4px; border-radius: 2px; background: #dfe3dc; }
.vis-phone__screen i:nth-child(odd) { width: 70%; }
.vis-phone__screen span { margin-top: 8px; align-self: flex-start; padding: 2px 5px; border-radius: 3px; background: var(--ink); color: #fff; font: 500 5px/1.4 var(--sans); }

.vis-speed p { font: 400 17px/26px var(--sans); color: var(--t70); }
.vis-speed b { font-weight: 600; color: var(--ink); }
.vis-speed__bar { height: 10px; margin: 12px 0 22px; border-radius: 6px; background: #eef1eb; overflow: hidden; }
.vis-speed__bar i { display: block; width: 78%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #cfd8cd, var(--accent)); }

.vis-count__title { font: 500 14px/20px var(--sans); color: var(--ink); }
.vis-count__chart { position: relative; }
.vis-count__chart i { border: 1.5px dashed #e0c3cc; background: none; height: 40%; }
.vis-count__chart i:nth-child(2) { height: 58%; } .vis-count__chart i:nth-child(3) { height: 46%; } .vis-count__chart i:nth-child(4) { height: 70%; } .vis-count__chart i:nth-child(5) { height: 52%; } .vis-count__chart i:nth-child(6) { height: 30%; } .vis-count__chart i:nth-child(7) { height: 24%; }
.vis-count__void { position: absolute; left: 50%; top: 42%; translate: -50% -50%; padding: 6px 12px; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(15, 42, 44, .1); font: 500 13px/18px var(--sans); color: var(--t70); white-space: nowrap; }
.vis-count__days { display: flex; gap: 12px; margin-top: 6px; }
.vis-count__days span { flex: 1; text-align: center; font: 400 11px/14px var(--mono); color: var(--t45); }
.vis-speed__page { position: relative; margin-top: 4px; padding: 18px 16px 0; height: 150px; border: 1px solid #eceaf8; border-bottom: 0; border-radius: 10px 10px 0 0; overflow: hidden; }
.vis-speed__load { position: absolute; left: 0; top: 0; height: 3px; width: 34%; background: #5f4fc9; }
.vis-speed__page i { display: block; height: 10px; margin-bottom: 10px; border-radius: 5px; background: #eeedf8; }
.vis-speed__page i.short { width: 60%; }
.vis-speed__page b { display: block; height: 70px; border-radius: 8px; background: linear-gradient(90deg, #eeedf8, #f7f6fd, #eeedf8); }
.vis-count__chart { display: flex; align-items: flex-end; gap: 12px; height: 150px; margin-top: 16px; border-bottom: 1px solid #e6e9e3; }
.vis-count__chart i { flex: 1; height: 6px; border-radius: 4px 4px 0 0; background: #e6e9e3; }
.vis-count__none { margin-top: 14px; display: inline-block; padding: 4px 10px; border-radius: 12px; background: #fde7de; color: #b4452a; font: 500 13px/18px var(--sans); }

.vis-search__q { height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid #e0e4dd; font: 400 15px/40px var(--sans); color: var(--ink); }
.vis-search__r { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #f6f7f4; }
.vis-search__r b { font: 500 15px/20px var(--sans); color: #1f4f9c; }
.vis-search__r span { font: 400 13px/18px var(--sans); color: var(--t60); }
.vis-search__r.is-missing { background: none; border: 1.5px dashed #e7b6a6; }
.vis-search__r.is-missing b { color: #b4452a; }

.vis-link { background: #eef1eb; display: flex; align-items: flex-start; }
.vis-link__bubble { margin: 6px 0 0 auto; width: 88%; padding: 8px; border-radius: 16px 16px 4px 16px; background: #dcf1d2; }
.vis-link__url { display: block; padding: 2px 6px 8px; font: 400 13px/18px var(--sans); color: #1f6f3a; text-decoration: underline; }
.vis-link__card { border-left: 3px solid #5aa36a; padding: 4px 10px; background: rgba(255, 255, 255, .55); border-radius: 4px; }
.vis-link__img { height: 70px; margin-bottom: 8px; border-radius: 6px; border: 1.5px dashed rgba(28, 40, 37, .25); display: grid; place-items: center; font: 400 12px/1 var(--sans); color: var(--t45); }
.vis-link__card b { font: 500 13px/18px var(--sans); color: var(--ink); }

/* ---------- 4. Разбор: Dia рамка 1180x600 пунктиром радиус 12; заголовки 48/56; плашки 16/35 фон rgba(235,235,235,.7) радиус 20; текст 22/30 шириной 676; кнопка 16/35 фон #efefef радиус 20 ---------- */
.offer-sec { padding: 120px 20px 0; }
.offer { position: relative; width: min(1180px, 100%); margin: 0 auto; padding: 70px 24px 60px; border: 1.5px dashed rgba(28, 40, 37, .28); border-radius: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.offer__mark { position: absolute; top: -22px; left: 50%; translate: -50% 0; display: grid; place-items: center; width: 64px; height: 42px; border-radius: 21px; background: var(--bg); font: 400 26px/1 var(--serif); color: var(--ink); }
.offer__mark--bottom { top: auto; bottom: -22px; }
.offer__title { font: 400 48px/56px var(--serif); letter-spacing: -.05em; color: var(--t85); }
.chips { width: 100%; overflow: hidden; margin: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.chips__row { display: inline-flex; gap: 16px; white-space: nowrap; animation: chips 40s linear infinite; }
.chip { display: inline-flex; align-items: center; gap: 10px; height: 35px; padding: 0 6px 0 16px; border-radius: 20px; background: rgba(191, 222, 216, .7); font: 400 16px/35px var(--sans); color: var(--t85); }
.chip b { padding: 0 8px; border-radius: 12px; background: #fff; font: 400 14px/22px var(--sans); }
@keyframes chips { to { transform: translateX(-50%); } }
.offer__text { max-width: 676px; margin-top: 24px; font: 400 22px/30px var(--sans); color: var(--t60); }
.offer__text + .offer__text { margin-top: 12px; }
.soft-btn { margin-top: 40px; height: 35px; padding: 0 16px; border: 0; border-radius: 20px; background: #d3e6e2; font: 400 16px/35px var(--sans); color: var(--t85); cursor: pointer; transition: background-color .3s; }
.soft-btn:hover { background: #bfdcd6; }

/* ---------- 5. Вопросы ---------- */
.faq-sec { padding: 150px 20px 0; }
.faq { width: min(760px, 100%); margin: 50px auto 0; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer; font: 400 24px/30px var(--serif); letter-spacing: -.03em; color: var(--t85); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 26px/30px var(--sans); color: var(--t45); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; max-width: 640px; font: 400 16px/24px var(--sans); color: var(--t60); }

/* ---------- 6. Финальный призыв: Dia 48/56 над кнопкой ---------- */
.final-sec { padding: 150px 20px 0; }

/* ---------- Подвал: Dia моноширинный 13/16, разрядка 1.3px, колонки с x130, штамп 85x102 справа ---------- */
.foot { padding: 40px max(20px, calc((100vw - 1180px) / 2)) 48px; font: 400 13px/16px var(--mono); letter-spacing: .1em; color: var(--t85); display: grid; grid-template-columns: 1fr auto; row-gap: 72px; }
.foot__cols { display: flex; gap: 80px; }
.foot__cols h3 { font: inherit; letter-spacing: inherit; color: var(--t85); margin-bottom: 10px; }
.foot__cols li { margin-top: 10px; }
.foot__cols a, .foot__cols button { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: var(--t45); text-decoration: none; cursor: pointer; transition: color .3s; }
.foot__cols a:hover, .foot__cols button:hover { color: var(--ink); }
.foot__badge { width: 96px; height: 96px; }
.foot__badge text { font: 400 9.5px var(--mono); letter-spacing: .12em; fill: var(--t70); }
.foot__badge .foot__badge-l { font: 400 34px var(--serif); letter-spacing: 0; fill: var(--ink); }
.foot__bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--t45); }

/* ---------- Заявка в dialog ---------- */
.modal { width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 18px; background: var(--paper); color: var(--t85); box-shadow: 0 40px 100px rgba(8, 14, 12, .35); }
.modal::backdrop { background: rgba(19, 27, 25, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lead { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 32px; }
.modal__close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f3ef; font: 400 22px/1 var(--sans); cursor: pointer; }
.lead__title { font: 400 30px/36px var(--serif); letter-spacing: -.04em; color: var(--ink); }
.lead__choice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.lead__choice legend { width: 100%; margin-bottom: 8px; font: 400 13px/18px var(--sans); color: var(--t60); }
.lead__choice label { position: relative; cursor: pointer; }
.lead__choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lead__choice span { display: inline-block; height: 35px; padding: 0 14px; border-radius: 20px; background: #eef1eb; font: 400 15px/35px var(--sans); color: var(--t70); transition: background-color .3s, color .3s; }
.lead__choice input:checked + span { background: var(--ink); color: #f8f8f8; }
.lead__choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.lead__field { display: flex; flex-direction: column; gap: 6px; font: 400 13px/18px var(--sans); color: var(--t60); }
.lead__field input { height: 46px; padding: 0 14px; border: 1px solid #dfe3dc; border-radius: 12px; font: 400 16px/1 var(--sans); color: var(--ink); outline: none; }
.lead__field input:focus { border-color: var(--ink); }
.lead__consent { display: flex; gap: 10px; align-items: flex-start; font: 400 13px/19px var(--sans); color: var(--t60); cursor: pointer; }
.lead__consent input { margin-top: 3px; accent-color: var(--ink); }
.lead__send { height: 52px; border: 0; border-radius: 9999px; background: var(--ink); color: #f8f8f8; font: 400 18px/1 var(--sans); cursor: pointer; }
.lead__status { min-height: 18px; font: 400 13px/18px var(--sans); color: var(--t60); }

/* ---------- Планшет ---------- */
@media (max-width: 1320px) {
  .steps { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: 56px; }
}
@media (max-width: 1024px) {
  .hero__title { font-size: 32px; line-height: 36px; }
  .win { width: calc(100vw - 48px); }
  .steps { grid-template-columns: 1fr; row-gap: 32px; }
  .steps__list { position: static; }
  .step__text { max-height: none; opacity: 1; }
  .step__title { color: var(--t85); }
  .step::before { opacity: 1; }
  .bcard, .bcard--wide { flex-basis: 100%; min-height: 0; padding-bottom: 0; }
  .bcard__vis { margin-top: 28px; }
  .foot__cols { gap: 40px; flex-wrap: wrap; }
}

/* ---------- Телефон ---------- */
@media (max-width: 767px) {
  .topbar { top: 14px; }
  .pill { height: 48px; padding: 4px 10px 4px 4px; }
  .pill__logo { width: 40px; height: 40px; }
  .pill__link { font-size: 15px; padding: 0 8px; }
  .hero { min-height: 700px; }
  .hero__title { top: 88px; font-size: 26px; line-height: 30px; }
  .hero__word { top: 146px; font-size: 18vw; }
  .win { top: 238px; width: calc(100vw - 24px); height: 640px; border-radius: 14px; grid-template-columns: 1fr; padding: 8px 8px 0; }
  .win__side { display: none; }
  .win__sheet { padding: 12px 14px 0; border-radius: 10px 10px 0 0; }
  .win__icons svg:nth-child(n+2) { display: none; }
  .win__crumb { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .win__score { display: none; }
  .ask { margin-top: 18px; }
  .win__stacks { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
  .dock { height: 128px; padding-bottom: 20px; }
  .dock::before { top: 34px; border-radius: 50% 50% 0 0 / 60px 60px 0 0; }
  .dock__btn { height: 52px; font-size: 17px; }
  .dock__note { font-size: 12px; margin-top: 8px; }
  .sec-title { font-size: 34px; line-height: 40px; }
  .steps-sec { padding: 64px 16px 0; }
  .step { padding: 16px 18px; }
  .step__title { font-size: 21px; line-height: 27px; }
  .shot { height: auto; min-height: 420px; }
        .shot__body--chat { padding: 20px 14px; }
  .shot__body--test { padding: 24px 18px; }
  .test li { flex-direction: column; gap: 2px; }
  .test li span:last-child { text-align: left; }
  .bento-sec { padding: 96px 14px 0; }
  .bento { margin-top: 40px; gap: 14px; }
  .bcard { padding: 22px 18px 0; }
  .bcard__text { font-size: 17px; line-height: 25px; }
  .bcard__vis { width: calc(100% - 20px); min-height: 200px; }
  .offer-sec { padding: 96px 14px 0; }
  .offer { padding: 56px 16px 48px; }
  .offer__title { font-size: 32px; line-height: 38px; }
  .offer__text { font-size: 18px; line-height: 26px; }
  .faq-sec { padding: 100px 16px 0; }
  .faq summary { font-size: 20px; line-height: 26px; }
  .final-sec { padding: 100px 16px 0; }
  .foot { grid-template-columns: 1fr; padding: 32px 16px 40px; row-gap: 40px; }
  .foot__cols { flex-direction: column; gap: 28px; }
  .foot__bottom { flex-direction: column; gap: 8px; }
  .lead { padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
}

/* экран результата в кадре 1 шагов (вместо поддельной обложки) */
.shot__body--res { padding: 30px 40px; }
.res__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(15, 42, 44, .08); }
.res__title { font: 400 30px/36px var(--serif); letter-spacing: -.02em; color: var(--ink); }
.res__meta { margin-top: 6px; font: 400 13px/18px var(--sans); color: var(--t45); }
.res__score { text-align: right; font: 400 13px/16px var(--sans); color: var(--t60); }
.res__score b { display: block; font: 400 52px/1 var(--serif); color: var(--ink); letter-spacing: -.03em; }
.res__list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(15, 42, 44, .08); }
.res__list .stack__badge { position: static; }
.res__t { font: 500 15px/20px var(--sans); color: var(--ink); }
.res__d { margin-top: 4px; font: 400 14px/20px var(--sans); color: var(--t60); }
.res__next { margin-top: 18px; display: inline-block; padding: 8px 14px; border-radius: 12px; background: rgba(15, 42, 44, .05); font: 400 14px/18px var(--sans); color: var(--t70); }