/* локальные шрифты: ничего не грузится с чужих серверов */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-500-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215}
@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/literata-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/literata-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215}
@font-face{font-family:'Literata';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/literata-500-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Literata';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/literata-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215}

:root{
--desk:#191b1a;--desk-2:#222523;--desk-3:#151716;--line-d:#3a3e3b;
--card:#f7f2e8;--card-2:#fdfaf3;--card-line:#e3dbcb;
--ink:#14171a;--ink-2:#5f6462;--warm:#f0e9db;--warm-2:#a8a297;
--sand:#d9b87a;--sand-2:#c9a765;--amber:#8c6a2c;--stone:#7a736a;--clay:#9c5a48;
--radius:14px;--radius-btn:9px;--shadow-card:0 26px 54px rgba(0,0,0,.45);
--pad-s:clamp(56px,8vw,116px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--desk);color:var(--warm);font-family:"IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
section{padding:var(--pad-s) 0;position:relative}
h1,h2,h3{font-family:"Literata",Georgia,serif;font-weight:400;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(34px,4.4vw,58px);line-height:1.08;color:#fdfaf3}
h2{font-size:clamp(26px,3.2vw,42px);line-height:1.14;color:#fdfaf3;margin-bottom:18px}
h3{font-size:clamp(18px,2vw,23px);line-height:1.24}
p{text-wrap:pretty}
.lead{color:var(--warm-2);max-width:36em}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);margin-bottom:20px;display:flex;gap:12px;align-items:center}
.eyebrow span{color:var(--warm-2)}
.mark-u{text-decoration:none;background-image:linear-gradient(var(--sand),var(--sand));background-size:100% 3px;background-repeat:no-repeat;background-position:0 92%;padding-bottom:2px}
.btn{display:inline-block;background:var(--sand);color:#1d1f1d;padding:13px 24px;border-radius:var(--radius-btn);font-size:15px;font-weight:500;text-decoration:none;border:0;transition:background .18s cubic-bezier(.2,.7,.3,1),transform .18s cubic-bezier(.2,.7,.3,1)}
.btn:hover{background:var(--sand-2);transform:translateY(-1px)}
.btn-o{background:transparent;color:var(--warm);border:1px solid var(--line-d)}
.btn-o:hover{background:rgba(240,233,219,.06)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.note{font-size:13.5px;color:#8b8880;margin-top:14px}
.card{background:var(--card);color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:22px 24px}
.card h3{color:var(--ink)}
.lbl{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.money{font-family:"IBM Plex Mono",monospace;font-size:13px;text-align:right;white-space:nowrap}
.chip{font-size:11px;padding:4px 10px;border-radius:99px;white-space:nowrap;border:1px solid;display:inline-block}
.chip.ask{color:var(--amber);border-color:rgba(140,106,44,.35);background:rgba(217,184,122,.18)}
.chip.wait{color:var(--stone);border-color:rgba(122,115,106,.3);background:rgba(122,115,106,.08)}
.chip.no{color:var(--clay);border-color:rgba(156,90,72,.3);background:rgba(156,90,72,.07)}
.sec-no{position:absolute;right:24px;top:calc(var(--pad-s) - 8px);font-family:"IBM Plex Mono",monospace;font-size:11px;color:#4a4e4b;letter-spacing:.1em}
.rise{opacity:0;translate:0 18px;transition:opacity .6s cubic-bezier(.2,.7,.3,1),translate .6s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;translate:0 0;transition:none}html{scroll-behavior:auto}}
@media(max-width:900px){.sec-no{display:none}}

/* ── фактура и свет ─────────────────────────────────────────── */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E")}
.wrap,.top{position:relative;z-index:1}
.glow{position:absolute;pointer-events:none;z-index:0;border-radius:50%;filter:blur(90px);opacity:.5}
.glow-a{width:520px;height:420px;background:radial-gradient(closest-side,rgba(217,184,122,.24),transparent);right:-90px;top:60px}
.glow-b{width:420px;height:360px;background:radial-gradient(closest-side,rgba(217,184,122,.10),transparent);left:-120px;bottom:-60px}
/* карточки живут: подъём и глубже тень */
.card{transition:translate .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s cubic-bezier(.2,.7,.3,1)}
.card:hover{translate:0 -4px;box-shadow:0 34px 70px rgba(0,0,0,.55)}
/* строки списка проявляются по очереди */
.r{opacity:0;translate:0 8px;transition:opacity .5s cubic-bezier(.2,.7,.3,1),translate .5s cubic-bezier(.2,.7,.3,1)}
.card.in .r{opacity:1;translate:0 0}
.card.in .r:nth-of-type(1){transition-delay:.16s}
.card.in .r:nth-of-type(2){transition-delay:.26s}
.card.in .r:nth-of-type(3){transition-delay:.36s}
/* счётчик суммы */
.sum{font-variant-numeric:tabular-nums}
/* тонкая линия-разделитель между секциями */
.hr-soft{height:1px;background:linear-gradient(90deg,transparent,var(--line-d) 18%,var(--line-d) 82%,transparent)}
/* заголовок секции с засечкой-меткой */
h2{position:relative}
section > .wrap > h2::before{content:"";position:absolute;left:-24px;top:.42em;width:10px;height:1.5px;background:var(--sand);opacity:.7}
@media(max-width:1290px){section > .wrap > h2::before{display:none}}
@media(prefers-reduced-motion:reduce){.r{opacity:1;translate:0 0;transition:none}.card:hover{translate:0 0}}

/* ── живой расчёт ───────────────────────────────────────────── */
.field{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;padding:16px 0;border-bottom:1px dashed var(--line-d)}
.field span{font-size:14.5px;color:var(--warm-2);grid-column:1;grid-row:1}
.field b{font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:15px;color:var(--warm);grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
.field input[type=range]{grid-column:1/-1;grid-row:2;-webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--line-d);border-radius:2px;outline:none;margin-top:4px}
.field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--sand);cursor:grab;border:0;transition:transform .15s}
.field input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.12)}
.field input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--sand);cursor:grab;border:0}
.field input[type=range]:focus-visible{outline:2px solid var(--sand);outline-offset:4px}
.calc-out b{font-variant-numeric:tabular-nums}
.calc-note{margin-top:14px;font-size:13.5px;color:#8b8880;line-height:1.5}

/* ── светлая секция: снимает ощущение сплошной темноты ─────── */
.sec-light{background:var(--card);color:var(--ink)}
.sec-light h2,.sec-light h3{color:#101314}
.sec-light .lead,.sec-light p{color:#4d5250}
.sec-light .sec-no{color:#b3a993}
.sec-light .item{border-color:var(--card-line);background:linear-gradient(180deg,rgba(255,255,255,.55),transparent)}
.sec-light .item-n{color:var(--amber)}
.sec-light .plus{border-color:#cfc6b4;color:#4d5250}
.sec-light .plus b{color:var(--ink)}
.sec-light .btn-o{color:var(--ink);border-color:#cfc6b4}
.sec-light .btn-o:hover{background:rgba(20,23,26,.05)}
.sec-light > .wrap > h2::before{background:var(--amber)}


/* светлая тема должна побеждать блочные правила из <style> */
.sec-light .item h3,.sec-light .scene h3,.sec-light .step h3{color:#101314}
.sec-light .item p,.sec-light .scene p,.sec-light .step p{color:#4d5250}
.sec-light .item{border-color:#ddd4c2;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.15))}
.sec-light .item-n{color:var(--amber)}
.sec-light .lbl{color:#6b706e}

/* ── 6 contrast ─────────────────────────────────────────────── */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.vs-col{border:1px solid var(--line-d);border-radius:var(--radius);padding:26px 28px}
.vs-col.now{background:linear-gradient(180deg,rgba(240,233,219,.03),transparent)}
.vs-col.our{background:linear-gradient(180deg,rgba(217,184,122,.09),transparent);border-color:rgba(217,184,122,.34)}
.vs-h{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-2);margin-bottom:18px}
.vs-col.our .vs-h{color:var(--sand)}
.vs li{list-style:none;padding:14px 0 14px 26px;position:relative;color:var(--warm-2);font-size:15.5px;line-height:1.55;border-top:1px solid rgba(240,233,219,.07)}
.vs li:first-of-type{border-top:0}
.vs-col.our li{color:var(--warm)}
.vs li::before{content:"";position:absolute;left:0;top:22px;width:12px;height:1px;background:var(--line-d)}
.vs-col.our li::before{background:var(--sand)}
.vs-note{margin-top:20px;font-size:13.5px;color:#8b8880}
/* ── 7 fit ──────────────────────────────────────────────────── */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.fit-box{border:1px solid var(--line-d);border-radius:var(--radius);padding:26px 28px}
.fit-box h3{color:#fdfaf3;margin-bottom:12px}
.fit-box p{color:var(--warm-2);font-size:15.5px;line-height:1.58}
.fit-wide{grid-column:1/-1;background:linear-gradient(180deg,rgba(217,184,122,.07),transparent);border-color:rgba(217,184,122,.28)}
.fit-wide h3{color:var(--sand)}
.fit-wide p+p{margin-top:12px}
/* ── 8 author ───────────────────────────────────────────────── */
.author-grid{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:start;margin-top:30px}
.portrait{width:132px;height:132px;border-radius:50%;background:linear-gradient(150deg,#e8dfcc,#cbbfa6);display:grid;place-items:center;font-family:"Literata",Georgia,serif;font-size:52px;color:#6b5a37;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.author-grid p+p{margin-top:14px}
.sec-light .author-grid p{color:#4d5250;font-size:16.5px;max-width:44em}
.author-out{margin-top:20px;border-left:2px solid var(--amber);padding-left:18px;font-size:15.5px}
/* ── 9 proof ────────────────────────────────────────────────── */
.projects{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.proj{border:1px solid var(--card-line);border-radius:var(--radius);padding:26px 28px;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.15))}
.proj h3{margin-bottom:10px}
.proj p{font-size:15.5px;line-height:1.55}
.quote{margin-top:20px;border-radius:var(--radius);padding:30px 32px;background:linear-gradient(150deg,rgba(217,184,122,.22),rgba(217,184,122,.06));border:1px solid rgba(140,106,44,.22)}
.quote q{font-family:"Literata",Georgia,serif;font-size:clamp(20px,2.4vw,27px);line-height:1.36;color:#101314;display:block;quotes:"«" "»"}
.quote q+q{margin-top:12px}
.quote figcaption{margin-top:18px;font-size:14px;color:#5f6462}
.honest{margin-top:20px;font-size:14.5px;color:#5f6462;border-top:1px solid var(--card-line);padding-top:18px}
/* ── 10 price ───────────────────────────────────────────────── */
.price-main{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-top:34px;align-items:stretch}
.price-card{border:1px solid rgba(217,184,122,.34);border-radius:var(--radius);padding:32px 34px;background:linear-gradient(160deg,rgba(217,184,122,.12),transparent)}
.price-tag{font-family:"Literata",Georgia,serif;font-size:clamp(38px,5vw,62px);line-height:1;color:#fdfaf3;letter-spacing:-.02em}
.price-tag i{font-style:normal;font-size:.42em;color:var(--warm-2)}
.price-sub{font-size:16px;color:var(--sand);margin-top:12px}
.price-what{margin-top:18px;color:var(--warm-2);font-size:15.5px}
.price-side{display:grid;gap:14px}
.price-alt{border:1px solid var(--line-d);border-radius:var(--radius);padding:22px 24px}
.price-alt b{font-family:"Literata",Georgia,serif;font-size:26px;font-weight:500;color:#fdfaf3;display:block}
.price-alt span{font-size:14.5px;color:var(--warm-2)}
.price-why{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.price-why div{border-top:1px solid var(--line-d);padding-top:16px;font-size:15px;color:var(--warm-2);line-height:1.56}
.price-why b{color:var(--warm);font-weight:500}
/* ── 11 guarantee ───────────────────────────────────────────── */
.guar{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.guar-main{border:1px solid rgba(217,184,122,.34);border-radius:var(--radius);padding:32px 34px;background:linear-gradient(160deg,rgba(217,184,122,.11),transparent)}
.guar-big{font-family:"Literata",Georgia,serif;font-size:clamp(28px,3.4vw,42px);color:#fdfaf3;line-height:1.1;margin-bottom:14px}
.guar p{color:var(--warm-2);font-size:15.5px;line-height:1.58}
.guar p+p{margin-top:12px}
.guar-side{border:1px solid var(--line-d);border-radius:var(--radius);padding:28px 30px}
.guar-side h3{color:#fdfaf3;margin-bottom:12px}
/* ── 12 limits ──────────────────────────────────────────────── */
.limits{display:grid;gap:0;margin-top:30px;border-top:1px solid var(--card-line)}
.limit{padding:20px 0;border-bottom:1px solid var(--card-line);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.limit .x{width:14px;height:2px;background:var(--clay);border-radius:1px;margin-top:11px;opacity:.75}
.limit b{font-weight:500;display:block;margin-bottom:4px}
.limit p{font-size:15.5px;line-height:1.55}
.limits-out{margin-top:22px;font-size:16px;color:#101314}
/* ── 13 final ───────────────────────────────────────────────── */
#final{text-align:center}
#final h2{max-width:18ch;margin-left:auto;margin-right:auto}
#final .lead{margin:0 auto 30px}
#final .cta-row{justify-content:center}
#final > .wrap > h2::before{display:none}
footer{border-top:1px solid var(--line-d);padding:44px 0 56px;font-size:13.5px;color:#8b8880;line-height:1.6}
footer .disc{max-width:76ch;margin-bottom:22px}
footer .cols{display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between;align-items:flex-end}
footer a{color:var(--warm-2)}
@media(max-width:900px){
  .vs,.fit-grid,.projects,.price-main,.price-why,.guar{grid-template-columns:1fr}
  .author-grid{grid-template-columns:1fr;gap:20px}
}

/* ═══ СЛОЙ ГЛУБИНЫ И ЖИЗНИ ═══════════════════════════════════ */
/* прогресс чтения */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--amber),var(--sand));z-index:60;pointer-events:none}
/* виньетка: края темнее центра, глубина сцены */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 80% at 50% 40%,transparent 45%,rgba(0,0,0,.34) 100%)}
.sec-light{position:relative;z-index:3}
/* заголовок появляется построчно из-под маски */
.reveal{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.reveal i{display:block;font-style:inherit;translate:0 108%;transition:translate .78s cubic-bezier(.16,.84,.28,1)}
.reveal.in i{translate:0 0}
/* стол реагирует на курсор */
.deck{perspective:1200px}
.deck .card{will-change:transform}
.tilt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
/* магнитная кнопка */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .25s}
.btn:hover::after{opacity:1}
/* подсветки разных оттенков по секциям: цвет перестаёт быть одной нотой */
.glow-c{width:560px;height:440px;background:radial-gradient(closest-side,rgba(156,90,72,.16),transparent);left:-140px;top:20%}
.glow-d{width:480px;height:400px;background:radial-gradient(closest-side,rgba(217,184,122,.15),transparent);right:-120px;bottom:10%}
.glow-e{width:620px;height:460px;background:radial-gradient(closest-side,rgba(120,140,150,.10),transparent);left:30%;top:-10%}
/* тонкая рамка-хайлайт у карточек: край ловит свет */
.card,.vs-col,.fit-box,.price-card,.guar-main,.calc{position:relative}
.card::before,.price-card::before,.guar-main::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,rgba(255,255,255,.22),transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
/* цифры в расчёте перекатываются, а не скачут */
#v-total{display:inline-block;transition:translate .18s cubic-bezier(.2,.7,.3,1)}
#v-total.bump{translate:0 -3px}
/* бегущая строка ниш */
.ticker{overflow:hidden;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);padding:16px 0;margin-top:0}
.ticker-track{display:flex;gap:44px;width:max-content;animation:slide 38s linear infinite}
.ticker span{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-2);white-space:nowrap}
.ticker span::after{content:"·";margin-left:44px;color:var(--sand)}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .reveal i{translate:0 0;transition:none}
  .progress{display:none}
}

/* ═══ ЖИВАЯ ДЕМОНСТРАЦИЯ ПРОДУКТА ════════════════════════════ */
.demo{background:linear-gradient(170deg,var(--card-2),var(--card));border-radius:18px;box-shadow:0 40px 90px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.35) inset;color:var(--ink);overflow:hidden;position:relative}
.demo::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(160deg,rgba(255,255,255,.7),transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.demo-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:10px 14px 0 14px;border-bottom:1px solid var(--card-line)}
.demo-tabs{display:flex;gap:4px}
.demo-tab{appearance:none;border:0;background:transparent;font:inherit;font-size:12.5px;color:var(--ink-2);padding:9px 11px;border-radius:9px 9px 0 0;cursor:pointer;position:relative;transition:color .18s,background .18s;white-space:nowrap}
.demo-tab:hover{color:var(--ink);background:rgba(20,23,26,.04)}
.demo-tab.is-on{color:var(--ink);background:rgba(20,23,26,.05)}
.demo-tab.is-on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--amber);border-radius:2px}
.demo-live{display:flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding-bottom:11px;white-space:nowrap}
.demo-live i{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.demo-body{position:relative}
.demo-pane{display:none;padding:20px 22px 18px}
.demo-pane.is-on{display:block;animation:paneIn .34s cubic-bezier(.2,.7,.3,1)}
@keyframes paneIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.demo-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.demo-causes{display:flex;gap:16px;font-size:12.5px;color:var(--ink-2);flex-wrap:wrap;padding-top:6px}
.demo-causes b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.demo-list{min-height:212px;display:flex;flex-direction:column;justify-content:flex-start}
.demo-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid rgba(20,23,26,.08);font-size:13.5px;
  opacity:0;translate:0 -10px;animation:rowIn .5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rowIn{to{opacity:1;translate:0 0}}
.demo-row small{display:block;color:var(--ink-2);font-size:12px;margin-top:2px}
.demo-row.leaving{animation:rowOut .55s cubic-bezier(.4,0,.6,1) forwards}
@keyframes rowOut{to{opacity:0;translate:14px 0;filter:blur(1px)}}
.demo-foot{padding-top:12px;margin-top:4px;border-top:1px solid var(--card-line)}
.demo-hint{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;color:var(--ink-2)}
/* карточка клиента */
.client-top{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--card-line);flex-wrap:wrap}
.ava{width:44px;height:44px;border-radius:50%;background:linear-gradient(150deg,#e6dcc6,#cbbfa6);display:grid;place-items:center;font-family:"Literata",Georgia,serif;font-size:20px;color:#6b5a37}
.client-top b{font-weight:500;font-size:15px;display:block}
.client-top small{color:var(--ink-2);font-size:12.5px}
.client-top .chip{margin-left:auto}
.timeline{padding-top:14px;display:grid;gap:2px}
.tl{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:11px 0;position:relative}
.tl .dot{width:9px;height:9px;border-radius:50%;background:var(--card-line);margin-top:5px;position:relative}
.tl::before{content:"";position:absolute;left:4px;top:20px;bottom:-4px;width:1px;background:var(--card-line)}
.tl:last-child::before{display:none}
.tl.now .dot{background:var(--amber);box-shadow:0 0 0 4px rgba(217,184,122,.28)}
.tl b{font-weight:500;font-size:13.5px;display:block}
.tl small{color:var(--ink-2);font-size:12.5px}
/* день */
.day-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.day-k{border:1px solid var(--card-line);border-radius:11px;padding:14px 16px;background:rgba(255,255,255,.5)}
.day-k b{font-family:"Literata",Georgia,serif;font-size:30px;font-weight:500;display:block;line-height:1}
.day-k small{color:var(--ink-2);font-size:12.5px}
.day-rows{display:grid}
.day-row{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid rgba(20,23,26,.08);font-size:13.5px}
.day-row .t{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-2)}
.day-row.free{color:var(--ink-2)}
.day-row.free span:nth-child(2){opacity:.6}
@media(max-width:1180px){.demo-live{display:none}}
@media(max-width:900px){
  .demo-tab{font-size:12px;padding:8px 9px}
  .day-grid{grid-template-columns:1fr 1fr}
  .demo-list{min-height:150px}
}

/* ═══ КЕЙСЫ: РЕАЛЬНЫЕ САЙТЫ ══════════════════════════════════ */
.case{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;margin-top:42px;padding-top:42px;border-top:1px solid var(--card-line)}
.case:first-of-type{border-top:0;padding-top:8px}
.case.reverse .case-shot{order:2}
.case-shot{position:relative;padding-bottom:34px}
.browser{border-radius:12px;overflow:hidden;box-shadow:0 30px 64px rgba(20,23,26,.24);background:#fff;border:1px solid var(--card-line)}
.browser-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#eee8dc;border-bottom:1px solid var(--card-line)}
.browser-bar span{width:8px;height:8px;border-radius:50%;background:#cfc6b4}
.browser-bar i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:#8a8378;margin-left:10px;letter-spacing:.02em}
.browser img{display:block;width:100%;height:auto}
.phone{position:absolute;right:-6px;bottom:0;width:118px;border-radius:14px;overflow:hidden;border:4px solid #26282a;box-shadow:0 22px 44px rgba(20,23,26,.3);background:#26282a}
.phone img{display:block;width:100%;height:auto;border-radius:10px}
.case-kicker{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:12px}
.case-text h3{margin-bottom:12px}
.case-text p{font-size:15.5px;line-height:1.6}
.case-note{margin-top:14px;font-size:14px;color:#6b706e;border-left:2px solid var(--card-line);padding-left:14px}
.quote-in{margin-top:18px;border-radius:12px;padding:20px 22px;background:linear-gradient(150deg,rgba(217,184,122,.24),rgba(217,184,122,.06));border:1px solid rgba(140,106,44,.2)}
.quote-in q{font-family:"Literata",Georgia,serif;font-size:19px;line-height:1.4;color:#101314;display:block;quotes:"«" "»"}
.quote-in figcaption{margin-top:12px;font-size:13px;color:#5f6462}
@media(max-width:900px){
  .case{grid-template-columns:1fr;gap:26px;margin-top:30px;padding-top:30px}
  .case.reverse .case-shot{order:0}
  .phone{width:92px;right:0}
}

/* ═══ ЧТО ВХОДИТ: текст + мини-интерфейс ═════════════════════ */
.feat{display:grid;grid-template-columns:auto 1fr 340px;gap:26px;align-items:center;padding:30px 0;border-top:1px solid var(--card-line)}
.feat:first-of-type{border-top:0}
.feat-n{font-family:"Literata",Georgia,serif;font-size:34px;color:var(--amber);line-height:1;min-width:30px;opacity:.85}
.feat-t h3{margin-bottom:8px}
.feat-t p{font-size:15.5px;line-height:1.58;max-width:52ch}
.mini{background:#fff;border:1px solid var(--card-line);border-radius:12px;padding:14px 16px;box-shadow:0 14px 30px rgba(20,23,26,.10)}
.mini.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini-h{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:7px;margin-bottom:9px}
.mini-h.ok{color:var(--amber)}
.dotlive{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:pulse 2.4s ease-in-out infinite}
.mini-row{font-size:13px;color:var(--ink);padding:6px 0;display:flex;gap:8px;align-items:baseline}
.mini-row.split{justify-content:space-between;align-items:center;border-top:1px solid rgba(20,23,26,.07)}
.mini-row.muted{color:var(--ink-2);font-size:12.5px}
.mini-row b{font-weight:500}
.mini-row span{color:var(--ink-2);font-size:12.5px}
.mini-big{font-family:"Literata",Georgia,serif;font-size:30px;font-weight:500;line-height:1;color:var(--ink)}
.mini-big i{font-style:normal;font-size:15px;color:var(--ink-2)}
.mini-big.ok{color:var(--amber)}
.mini-card{display:flex;align-items:center;gap:10px;padding:8px 0}
.ava.sm{width:32px;height:32px;font-size:15px}
.mini-card b{font-size:13.5px;font-weight:500;display:block}
.mini-card small{font-size:11.5px;color:var(--ink-2)}
.mini-book{position:relative}
@media(max-width:1100px){.feat{grid-template-columns:auto 1fr;gap:18px}.feat-v{grid-column:1/-1;max-width:420px}}
@media(max-width:900px){.feat{padding:24px 0}.feat-n{font-size:28px}}

/* ═══ МЕХАНИКА: три шага со скриншотами ══════════════════════ */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0;align-items:stretch;margin-top:38px}
.flow-step{padding:0 22px;display:grid;grid-template-rows:auto auto 1fr auto;align-content:start}
.flow-step:first-child{padding-left:0}
.flow-step:last-child{padding-right:0}
.flow-n{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;color:var(--sand);margin-bottom:12px}
.flow-step h3{color:#fdfaf3;margin-bottom:8px}
.flow-step p{color:var(--warm-2);font-size:15px;line-height:1.55;margin-bottom:18px}
.flow-arrow{display:flex;align-items:center;justify-content:center;width:34px}
.flow-arrow span{display:block;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--line-d),transparent);position:relative}
.flow-arrow span::after{content:"";position:absolute;right:2px;top:-3px;width:6px;height:6px;border-right:1px solid var(--sand);border-top:1px solid var(--sand);transform:rotate(45deg);opacity:.8}
.scr{background:linear-gradient(170deg,var(--card-2),var(--card));border-radius:12px;padding:14px 16px;color:var(--ink);box-shadow:0 18px 38px rgba(0,0,0,.4);align-self:end}
.scr.alert{box-shadow:0 18px 38px rgba(0,0,0,.4),0 0 0 1px rgba(217,184,122,.4)}
.scr-h{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.scr-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;font-size:13px;border-top:1px solid rgba(20,23,26,.07)}
.scr-line:first-of-type{border-top:0}
.scr-line span{color:var(--ink-2)}
.scr-line b{font-weight:500}
.scr-line b.yes{color:var(--amber)}
.scr-line b.mark{color:var(--amber);position:relative}
.scr-line.big b{font-size:15px}
.scr-line .money{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink)}
.scr-bar{height:4px;border-radius:3px;background:rgba(20,23,26,.09);margin-top:10px;overflow:hidden}
.scr-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--sand));border-radius:3px}
@media(max-width:1000px){
  .flow{grid-template-columns:1fr;gap:26px}
  .flow-arrow{width:auto;height:24px;transform:rotate(90deg)}
  .flow-step{padding:0}
}

/* ═══ ОТСТРОЙКА: два экрана рядом ════════════════════════════ */
.duo{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:start;margin-top:36px}
.duo-side{padding:0 26px;margin:0}
.duo-side:first-child{padding-left:0;opacity:.72}
.duo-side:last-child{padding-right:0}
.duo-cap{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-2);margin-bottom:14px}
.duo-cap.our{color:var(--sand)}
.duo-vs{display:flex;align-items:center;justify-content:center;padding-top:60px}
.duo-vs span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-2);border:1px solid var(--line-d);border-radius:99px;padding:7px 12px;background:var(--desk)}
.scr.flat{box-shadow:0 10px 24px rgba(0,0,0,.28);background:linear-gradient(170deg,#f2ede2,#e8e2d5)}
.gauge{display:flex;align-items:baseline;gap:10px;padding:6px 0 12px}
.gauge b{font-family:"Literata",Georgia,serif;font-size:44px;font-weight:500;line-height:1;color:#6b706e}
.gauge b i{font-style:normal;font-size:20px}
.gauge span{font-size:12.5px;color:var(--ink-2)}
.bars{display:flex;align-items:flex-end;gap:6px;height:56px;padding:4px 0 8px}
.bars i{flex:1;background:#c9c1b0;border-radius:3px 3px 0 0;align-self:flex-end;min-height:8px}
.scr-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(20,23,26,.1);margin-top:8px;padding-top:10px;font-size:13px}
.scr-total b{font-family:"Literata",Georgia,serif;font-size:20px;font-weight:500}
.scr-line.big{display:grid;grid-template-columns:1fr auto auto;gap:10px}
.duo-list{list-style:none;padding:18px 0 0;margin:0}
.duo-list li{position:relative;padding:11px 0 11px 22px;font-size:14.5px;line-height:1.5;color:var(--warm-2);border-top:1px solid rgba(240,233,219,.07)}
.duo-list li:first-child{border-top:0}
.duo-list li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:1px;background:var(--line-d)}
.duo-list.our li{color:var(--warm)}
.duo-list.our li::before{background:var(--sand)}
@media(max-width:1000px){
  .duo{grid-template-columns:1fr;gap:22px}
  .duo-side{padding:0}
  .duo-side:first-child{opacity:.85}
  .duo-vs{padding:0;justify-content:flex-start}
}

/* ═══ ЦИКЛЫ ВОЗВРАТА ═════════════════════════════════════════ */
.cycles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.cyc{border:1px solid var(--line-d);border-radius:var(--radius);padding:20px 22px;background:linear-gradient(180deg,rgba(240,233,219,.03),transparent)}
.cyc b{font-weight:500;font-size:15px;color:#fdfaf3;display:block;margin-bottom:16px}
.cyc small{color:var(--warm-2);font-size:13px;line-height:1.45;display:block;margin-top:14px}
.track{display:flex;align-items:center;gap:0;height:12px;position:relative}
.track::before{content:"";position:absolute;left:5px;right:5px;top:50%;height:1px;background:var(--line-d)}
.track i{width:10px;height:10px;border-radius:50%;background:var(--sand);position:relative;z-index:1;margin-right:auto;box-shadow:0 0 0 3px rgba(217,184,122,.14)}
.track i:last-child{margin-right:0}
.cyc.off{opacity:.55}
.cyc.off .track i{background:var(--stone);box-shadow:none}
@media(max-width:1000px){.cycles{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cycles{grid-template-columns:1fr}}

/* ═══ СВЕТЛАЯ СЕКЦИЯ = ЛИСТ НА СТОЛЕ ═════════════════════════ */
.sec-light{background:transparent;padding-top:0;padding-bottom:0;margin:clamp(28px,4vw,56px) 0;position:static}
.sec-light > .wrap{background:var(--card);border-radius:clamp(18px,2vw,26px);
  padding-top:var(--pad-s);padding-bottom:var(--pad-s);padding-left:clamp(24px,3.4vw,52px);padding-right:clamp(24px,3.4vw,52px);
  box-shadow:0 34px 80px rgba(0,0,0,.5);position:relative}
.sec-light > .wrap::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(170deg,rgba(255,255,255,.75),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.sec-light .sec-no{right:clamp(24px,3.4vw,52px);top:calc(var(--pad-s) - 8px)}
.sec-light > .wrap > h2::before{left:-22px}
@media(max-width:1290px){.sec-light > .wrap > h2::before{display:none}}
@media(max-width:900px){.sec-light{margin:22px 0}.sec-light > .wrap{border-radius:16px}}

/* ═══ УЛИКИ НА СТОЛЕ ═════════════════════════════════════════ */
.evid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
.ev{margin:0}
.ev-obj{background:linear-gradient(170deg,var(--card-2),var(--card));border-radius:12px;padding:14px 15px;color:var(--ink);
  box-shadow:0 20px 42px rgba(0,0,0,.42);min-height:158px;display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden}
.ev:nth-child(odd) .ev-obj{rotate:-.7deg}
.ev:nth-child(even) .ev-obj{rotate:.6deg}
.ev figcaption{margin-top:16px;font-size:14px;line-height:1.5;color:var(--warm-2)}
.ev figcaption b{display:block;font-weight:500;font-size:15.5px;color:#fdfaf3;margin-bottom:6px;font-family:"Literata",Georgia,serif;line-height:1.25}
/* переписка */
.msg{background:#ece5d7;border-radius:10px 10px 10px 3px;padding:7px 10px;font-size:12px;max-width:88%;color:#2a2d2b}
.msg.last{opacity:.9}
.ev-badge{position:absolute;right:10px;bottom:10px;background:var(--clay);color:#fff;font-size:10.5px;padding:3px 8px;border-radius:99px}
/* тетрадь */
.note{background:linear-gradient(170deg,#fbf7ec,#f2ebdb)}
.nl{font-size:12.5px;color:#3a3f3d;padding:5px 0;border-bottom:1px dashed #ded5c2;font-family:"IBM Plex Mono",monospace}
.nl.strike{text-decoration:line-through;color:#9a938a}
.nl.faded{color:#b5ada1}
/* пропуск визитов */
.gap-line{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink-2)}
.gap-line span{width:26px;font-family:"IBM Plex Mono",monospace}
.gap-line i{flex:1;height:7px;border-radius:4px;background:rgba(20,23,26,.08)}
.gap-line i.on{background:var(--sand)}
/* выручка */
.mrow{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;padding:5px 0;border-bottom:1px solid rgba(20,23,26,.07)}
.mrow b{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:12.5px}
.mrow.unknown{border-bottom:0;margin-top:auto;padding-top:9px}
.mrow.unknown span{color:var(--clay)}
.mrow.unknown b{color:var(--clay);font-size:17px;font-family:"Literata",Georgia,serif}
@media(max-width:1100px){.evid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.evid{grid-template-columns:1fr}}

/* ═══ ДОСЬЕ АВТОРА ═══════════════════════════════════════════ */
.author-grid{display:grid;grid-template-columns:360px 1fr;gap:40px;align-items:start;margin-top:30px}
.dossier{background:#fff;border:1px solid var(--card-line);border-radius:14px;padding:22px 24px;box-shadow:0 20px 44px rgba(20,23,26,.13)}
.dossier-top{display:flex;align-items:center;gap:13px;padding-bottom:16px;border-bottom:1px solid var(--card-line);margin-bottom:6px}
.dossier-top b{font-weight:500;font-size:16px;display:block}
.dossier-top small{color:var(--ink-2);font-size:12.5px}
.ava.lg{width:52px;height:52px;font-size:24px}
.dossier-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px solid rgba(20,23,26,.06);font-size:13px}
.dossier-row:last-child{border-bottom:0}
.dossier-row span{color:var(--ink-2)}
.dossier-row b{font-weight:500;text-align:right;max-width:16em;font-size:13px}
/* ═══ ЦЕНА ═══════════════════════════════════════════════════ */
.price-hero{display:grid;grid-template-columns:1.08fr .92fr;gap:20px;margin-top:34px;align-items:stretch}
.price-left{border:1px solid rgba(217,184,122,.34);border-radius:var(--radius);padding:30px 32px;background:linear-gradient(160deg,rgba(217,184,122,.13),transparent)}
.price-tag{font-family:"Literata",Georgia,serif;font-size:clamp(42px,5.6vw,68px);line-height:1;color:#fdfaf3;letter-spacing:-.02em;margin-top:10px}
.price-tag i{font-style:normal;font-size:.34em;color:var(--warm-2)}
.price-sub{font-size:16px;color:var(--sand);margin-top:10px}
.price-in{list-style:none;padding:22px 0 0;margin:0}
.price-in li{position:relative;padding:11px 0 11px 24px;font-size:14.5px;line-height:1.5;color:var(--warm-2);border-top:1px solid rgba(240,233,219,.08)}
.price-in li:first-child{border-top:0}
.price-in li b{color:var(--warm);font-weight:500}
.price-in li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:1px;background:var(--sand)}
.price-right{display:grid;gap:14px;align-content:start}
.price-why-in{border:1px solid var(--line-d);border-radius:var(--radius);padding:18px 20px;font-size:14.5px;line-height:1.55;color:var(--warm-2)}
.price-why-in b{color:var(--warm);font-weight:500}
/* ═══ ФИНАЛ: превью сообщения ════════════════════════════════ */
.tg-card{max-width:520px;margin:34px auto 0;background:linear-gradient(170deg,var(--card-2),var(--card));border-radius:16px;padding:20px 22px;color:var(--ink);box-shadow:0 30px 64px rgba(0,0,0,.5);text-align:left}
.tg-head{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid var(--card-line)}
.tg-head b{font-weight:500;font-size:14.5px;display:block}
.tg-head small{color:var(--ink-2);font-size:12px}
.tg-msg{background:#ece5d7;border-radius:12px 12px 12px 4px;padding:12px 14px;font-size:14px;line-height:1.5;margin:16px 0;color:#2a2d2b}
.tg-btn{display:block;text-align:center;width:100%}
.tg-note{font-size:12.5px;color:var(--ink-2);margin-top:12px;text-align:center}
@media(max-width:900px){.author-grid{grid-template-columns:1fr}.price-hero{grid-template-columns:1fr}}

/* ═══════════════ СЛОЙ ВЗАИМОДЕЙСТВИЯ ═══════════════════════ */

/* 1. Заголовки выезжают из-под маски построчно */
h2 .ln{display:block;overflow:visible;padding-bottom:.06em;margin-bottom:-.06em}
h2 .ln i{will-change:transform}
h2 .ln i{display:block;font-style:inherit;translate:0 40%;opacity:0;transition:translate .8s cubic-bezier(.16,.84,.28,1),opacity .6s ease}
h2.in .ln i{translate:0 0;opacity:1}
h2.in .ln:nth-child(2) i{transition-delay:.08s}
h2.in .ln:nth-child(3) i{transition-delay:.16s}

/* 2. Фокус: наведённая карточка выходит вперёд, соседи отступают */
.evid:hover .ev{opacity:.42;filter:saturate(.7)}
.evid .ev{transition:opacity .3s ease,filter .3s ease,translate .3s cubic-bezier(.2,.7,.3,1)}
.evid:hover .ev:hover{opacity:1;filter:none;translate:0 -6px}
.evid:hover .ev:hover .ev-obj{box-shadow:0 30px 60px rgba(0,0,0,.55);rotate:0deg}
.ev-obj{transition:box-shadow .3s ease,rotate .35s cubic-bezier(.2,.7,.3,1)}

/* 3. Связка «пункт состава ↔ его экран» */
.feat{transition:background .3s ease}
.feat:hover{background:linear-gradient(90deg,rgba(217,184,122,.10),transparent 62%)}
.feat .mini{transition:translate .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s ease}
.feat:hover .mini{translate:0 -5px;box-shadow:0 22px 46px rgba(20,23,26,.18)}
.feat .feat-n{transition:color .3s ease,scale .3s cubic-bezier(.2,.7,.3,1)}
.feat:hover .feat-n{color:var(--clay);scale:1.14}

/* 4. Циклы ниш: точки оживают по очереди */
.cyc{transition:border-color .3s ease,translate .3s cubic-bezier(.2,.7,.3,1)}
.cyc:hover{border-color:rgba(217,184,122,.45);translate:0 -4px}
.track i{transition:scale .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.cyc:hover .track i{scale:1.35}
.cyc:hover .track i:nth-child(2){transition-delay:.06s}
.cyc:hover .track i:nth-child(3){transition-delay:.12s}
.cyc:hover .track i:nth-child(4){transition-delay:.18s}
.cyc:hover .track i:nth-child(5){transition-delay:.24s}
.cyc:hover .track i:nth-child(6){transition-delay:.3s}

/* 5. Сравнение: наведение на нашу колонку гасит чужую */
.duo:hover .duo-side:first-child{opacity:.4}
.duo:hover .duo-side.our{opacity:1}
.duo-side{transition:opacity .35s ease}
.duo-side.our .scr{transition:translate .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease}
.duo:hover .duo-side.our:hover .scr{translate:0 -6px;box-shadow:0 30px 62px rgba(0,0,0,.5)}
.duo-list li{transition:color .25s ease,padding-left .25s cubic-bezier(.2,.7,.3,1)}
.duo-list.our li:hover{color:#fdfaf3;padding-left:28px}

/* 6. Кейсы: браузер поднимается, телефон выезжает */
.case-shot{transition:translate .4s cubic-bezier(.2,.7,.3,1)}
.browser,.phone{transition:translate .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease}
.case:hover .browser{translate:0 -8px;box-shadow:0 40px 80px rgba(20,23,26,.3)}
.case:hover .phone{translate:-10px -14px;box-shadow:0 30px 56px rgba(20,23,26,.36)}

/* 7. Навигация: подчёркивание растёт слева, активный раздел подсвечен */
.nav-r a:not(.btn){position:relative;padding-bottom:3px}
.nav-r a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sand);scale:0 1;transform-origin:0 50%;transition:scale .3s cubic-bezier(.2,.7,.3,1)}
.nav-r a:not(.btn):hover::after,.nav-r a.here::after{scale:1 1}
.nav-r a.here{color:var(--warm)}

/* 8. Шаги механики: наведение подсвечивает экран и стрелку */
.flow-step{transition:translate .3s cubic-bezier(.2,.7,.3,1)}
.flow-step:hover{translate:0 -5px}
.flow-step .scr{transition:box-shadow .3s ease,rotate .3s cubic-bezier(.2,.7,.3,1)}
.flow-step:hover .scr{box-shadow:0 26px 52px rgba(0,0,0,.5),0 0 0 1px rgba(217,184,122,.32)}
.flow-step:hover .flow-n{color:var(--clay)}
.flow-n{transition:color .3s ease}

/* 9. Цена: строки состава подсвечиваются */
.price-in li{transition:color .25s ease,padding-left .25s cubic-bezier(.2,.7,.3,1)}
.price-in li:hover{color:var(--warm);padding-left:30px}
.price-alt{transition:border-color .3s ease,translate .3s cubic-bezier(.2,.7,.3,1)}
.price-alt:hover{border-color:rgba(217,184,122,.4);translate:0 -3px}

/* 10. Ограничения: строка выделяется целиком */
.limit{transition:background .28s ease,padding-left .28s cubic-bezier(.2,.7,.3,1);border-radius:8px}
.limit:hover{background:rgba(217,184,122,.12);padding-left:12px}
.limit .x{transition:width .28s cubic-bezier(.2,.7,.3,1)}
.limit:hover .x{width:22px}

/* 11. Подсветки медленно плывут за скроллом */
.glow{transition:translate .1s linear}

@media(prefers-reduced-motion:reduce){
  h2 .ln i{translate:0 0;transition:none}
  .evid:hover .ev,.duo:hover .duo-side:first-child{opacity:1;filter:none}
  .evid:hover .ev:hover,.cyc:hover,.flow-step:hover,.case:hover .browser,.case:hover .phone,.feat:hover .mini,.price-alt:hover{translate:0 0}
  .cyc:hover .track i,.feat:hover .feat-n{scale:1}
}

/* Блок про деньги: без движения. Решение Влада 06.09.2026 */
#guarantee .rise,#guarantee .guar-main,#guarantee .guar-side{opacity:1;translate:0 0;transition:none}
#guarantee .card:hover,#guarantee .guar-main:hover,#guarantee .guar-side:hover{translate:0 0;box-shadow:none}
#guarantee h2 .ln i{translate:0 0;transition:none}
#guarantee .btn:hover{transform:none;translate:0 0}
#guarantee .btn::after{display:none}

/* финал: две кнопки в ряд */
.tg-actions{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:4px}
.tg-btn{display:block;text-align:center;width:100%}
.tg-mail{white-space:nowrap;color:var(--ink);border-color:#cfc6b4;background:transparent}
.tg-mail:hover{background:rgba(20,23,26,.06)}
@media(max-width:520px){.tg-actions{grid-template-columns:1fr}}
.limits-grow{margin-top:12px;font-size:15.5px;line-height:1.55;color:#4d5250;border-left:2px solid var(--amber);padding-left:16px}


/* ═══════════ ПРЕМИАЛЬНЫЙ МАСШТАБ ═══════════════════════════ */
/* 1. фон: студийный свет, сцена подсвечена, углы уходят в темноту */
:root{--desk:#0c0d0e;--desk-2:#141517;--desk-3:#090a0b}
body{background:
  radial-gradient(120% 90% at 72% 8%, rgba(217,184,122,.10), transparent 55%),
  radial-gradient(100% 70% at 50% 0%, #1c1e21 0%, #0c0d0e 60%),
  #0c0d0e}
body::after{background:radial-gradient(130% 90% at 50% 30%,transparent 40%,rgba(0,0,0,.6) 100%)}

/* 2. воздух между секциями и внутри них */
:root{--pad-s:clamp(88px,11vw,168px)}
.wrap{max-width:1280px}

/* 3. типографика крупнее по всему сайту */
h2{font-size:clamp(32px,4.4vw,60px);line-height:1.06;letter-spacing:-.025em}
h3{font-size:clamp(19px,2.2vw,26px)}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.6;max-width:44ch}
section > .wrap > h2{margin-bottom:22px}
section > .wrap > .lead{margin-bottom:8px}

/* 4. служебное золото убираем: номера секций и мелкий декор в монохром */
.sec-no{color:#4c5057;letter-spacing:.14em}
.eyebrow{color:#b4b9c0;letter-spacing:.2em}
.eyebrow i{background:#4c5057}

/* 5. светлые листы дышат так же */
.sec-light > .wrap{padding-left:clamp(28px,4vw,68px);padding-right:clamp(28px,4vw,68px)}

/* ═══════════ ПРЕМИАЛЬНЫЙ ПЕРВЫЙ ЭКРАН ══════════════════════ */
#hero{padding-top:clamp(70px,9vw,120px);padding-bottom:0;overflow:hidden}
.hero-top{text-align:center;max-width:1000px;margin:0 auto}
.hero-top .eyebrow{justify-content:center;gap:14px;margin-bottom:clamp(24px,3vw,40px)}
.hero-top .eyebrow i{width:22px}
#hero h1{font-size:clamp(42px,7.2vw,104px);line-height:1.01;letter-spacing:-.035em;max-width:14ch;margin:0 auto clamp(20px,2.4vw,30px);color:#fff}
.hero-lead{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:#a9adb4;max-width:50ch;margin:0 auto clamp(30px,3.4vw,46px);text-wrap:pretty}
.stage{width:min(1180px,94%);margin:clamp(46px,6vw,86px) auto 0;perspective:1700px}
.mac{position:relative;transform:rotateX(6deg);transform-style:preserve-3d}
.mac-screen{background:#0f1012;border:10px solid #1e2024;border-radius:16px 16px 4px 4px;
  box-shadow:0 70px 130px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.mac-bar{height:28px;background:#17181b;display:flex;align-items:center;gap:6px;padding:0 13px;border-bottom:1px solid #24262a}
.mac-bar i{width:8px;height:8px;border-radius:50%;background:#3a3d42}
.mac-bar span{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5e626a}
.mac .demo{border-radius:0;box-shadow:none;background:linear-gradient(170deg,#fcfcfb,#f4f4f3)}
.mac .demo::before{display:none}
.mac-base{height:15px;background:linear-gradient(180deg,#24262a,#131418);border-radius:0 0 12px 12px;margin:0 -24px;box-shadow:0 28px 56px rgba(0,0,0,.6)}
.mac-foot{height:5px;width:32%;margin:0 auto;background:#191b1e;border-radius:0 0 9px 9px}
.phone-side{position:absolute;right:-34px;bottom:-26px;width:196px;border:9px solid #1e2024;border-radius:30px;background:#0f1012;
  box-shadow:0 44px 84px rgba(0,0,0,.62);overflow:hidden}
.phone-ui{background:linear-gradient(170deg,#fcfcfb,#f2f2f1);color:var(--ink);padding:16px 15px}
.p-sum{font-family:"Literata",Georgia,serif;font-size:30px;font-weight:500;line-height:1;margin:6px 0 10px}
.p-sum i{font-style:normal;font-size:14px;color:var(--ink-2)}
.p-row{display:flex;gap:10px;align-items:baseline;font-size:12px;padding:7px 0;border-top:1px solid rgba(17,18,20,.08)}
.p-row span{font-family:"IBM Plex Mono",monospace;color:var(--ink-2);font-size:11px}
.p-row b{font-weight:500}
.p-row.free{color:var(--ink-2)}
.p-row.free b{font-weight:400;opacity:.65}
@media(max-width:900px){
  .mac{transform:none}.phone-side{display:none}
  .mac-screen{border-width:7px}.stage{width:100%}
  #hero h1{max-width:none}
}
@media(max-width:640px){
  .demo-bar{padding:8px 10px 0}
  .demo-tabs{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex:1}
  .demo-tabs::-webkit-scrollbar{display:none}
  .demo-tab{font-size:11.5px;padding:8px 10px}
  .demo-pane{padding:16px 14px 14px}
  .demo-head{gap:10px}
  .sum{font-size:34px}
}

/* ═══════════ ПРЕМИАЛЬНЫЙ МАСШТАБ: ОСТАЛЬНЫЕ ЭКРАНЫ ═════════ */
/* крупнее текст в блоках, больше воздуха внутри */
.scene p,.step p,.fit-box p,.flow-step p,.item p,.feat-t p,.duo-list li,.case-text p,.guar p{font-size:16.5px;line-height:1.6}
.ev figcaption{font-size:15px;line-height:1.55}
.ev figcaption b{font-size:19px;line-height:1.22}

/* 02 улики: две крупные пары вместо четырёх узких */
.evid{grid-template-columns:1fr 1fr;gap:26px;margin-top:clamp(40px,5vw,64px)}
.ev-obj{min-height:196px;padding:20px 22px;gap:9px}
.msg{font-size:13.5px;padding:9px 12px}
.nl{font-size:13.5px;padding:7px 0}
.gap-line{font-size:12.5px}
.gap-line i{height:9px}
.mrow{font-size:13.5px;padding:7px 0}
.mrow b{font-size:13.5px}
.mrow.unknown b{font-size:22px}

/* 03 расчёт: цифра крупнее, поля просторнее */
.calc{padding:34px}
.calc-out b{font-size:clamp(34px,4vw,52px)}
.field{padding:20px 0}
.field span{font-size:15.5px}
.field b{font-size:16px}

/* 04 механика: шаги дышат */
.flow{margin-top:clamp(44px,5vw,68px)}
.flow-step{padding:0 30px}
.flow-step h3{margin-bottom:10px}
.scr{padding:18px 20px}
.scr-line{font-size:14px;padding:9px 0}
.scr-line.big b{font-size:16px}

/* 05 состав: строки просторнее, цифры крупные */
.feat{padding:clamp(30px,3.4vw,46px) 0;gap:32px;grid-template-columns:auto 1fr 380px}
.feat-n{font-size:44px;min-width:40px}
.feat-t h3{margin-bottom:10px}
.mini{padding:18px 20px}
.mini-big{font-size:34px}

/* 06 сравнение */
.duo{margin-top:clamp(40px,5vw,64px)}
.duo-side{padding:0 34px}
.gauge b{font-size:56px}
.duo-list li{padding:14px 0 14px 26px}
.scr-total b{font-size:24px}

/* 07 ниши и блоки */
.cycles{gap:20px;margin-top:clamp(38px,4.4vw,58px)}
.cyc{padding:26px 28px}
.cyc b{font-size:16.5px;margin-bottom:20px}
.fit-grid{gap:20px;margin-top:clamp(38px,4.4vw,58px)}
.fit-box{padding:34px 36px}

/* 08-09 автор и кейсы */
.author-grid{gap:44px;margin-top:clamp(30px,3.4vw,44px)}
.portrait{width:156px;height:156px;font-size:62px}
.sec-light .author-grid p{font-size:17.5px;line-height:1.6}
.case{gap:56px;margin-top:clamp(44px,5vw,64px);padding-top:clamp(44px,5vw,64px)}
.quote-in{padding:26px 28px}
.quote-in q{font-size:22px}

/* 10-11 цена и гарантия: цифры как главный герой блока */
.price-main{margin-top:clamp(40px,4.6vw,60px);gap:22px}
.price-card{padding:40px 42px}
.price-tag{font-size:clamp(46px,6.4vw,86px)}
.price-sub{font-size:18px;margin-top:16px}
.price-alt{padding:28px 30px}
.price-alt b{font-size:32px}
.price-why{margin-top:30px;gap:22px}
.price-why div{font-size:16px;padding-top:20px}
.guar{margin-top:clamp(40px,4.6vw,60px);gap:22px}
.guar-main,.guar-side{padding:38px 40px}
.guar-big{font-size:clamp(32px,4vw,52px);margin-bottom:18px}

/* 12 границы */
.limits{margin-top:clamp(36px,4vw,52px)}
.limit{padding:26px 0;gap:22px}
.limit b{font-size:18px;margin-bottom:6px}
.limit p{font-size:16.5px}
.limits-out{margin-top:28px;font-size:17.5px}
.limits-grow{font-size:16.5px}

/* 13 финал */
#final h2{font-size:clamp(34px,5.2vw,72px)}
#final .lead{font-size:19px}

@media(max-width:900px){
  .evid{grid-template-columns:1fr}
  .feat{grid-template-columns:auto 1fr;gap:20px}
  .flow-step,.duo-side{padding:0}
  .fit-box,.price-card,.guar-main,.guar-side{padding:26px 24px}
  .calc{padding:24px}
}

/* ═══ ЗАЩИТА ОТ ГОРИЗОНТАЛЬНОГО СКРОЛЛА ═════════════════════ */
/* overflow на body ломает position:sticky у шапки, поэтому обрезаем
   только внутри секций: подсветки лежат в них и наружу не выходят */
section,footer{overflow-x:clip}
body{max-width:100%}
@media(max-width:900px){
  .glow{max-width:120vw}
  .glow-a{width:min(520px,90vw);right:-10vw}
  .glow-b{width:min(420px,80vw);left:-10vw}
  .glow-c{width:min(560px,90vw);left:-12vw}
  .glow-d{width:min(480px,85vw);right:-10vw}
  .glow-e{width:min(620px,100vw);left:0}
  .mac-base{margin:0}
  .mac-screen{border-radius:12px 12px 3px 3px}
}

/* ═══ УМНАЯ ШАПКА ═══════════════════════════════════════════ */
.top{transition:translate .34s cubic-bezier(.2,.7,.3,1),background .3s ease,border-color .3s ease}
.top.hide{translate:0 -100%}
.top.solid{background:rgba(12,13,14,.9);border-bottom-color:var(--line-d)}
@media(prefers-reduced-motion:reduce){.top{transition:none}.top.hide{translate:0 0}}

/* фотография кружком, как аватар */
.ava-photo{width:104px;height:104px;border-radius:50%;object-fit:cover;flex-shrink:0;
  box-shadow:0 10px 26px rgba(20,23,26,.22);border:3px solid #fff}
.dossier-top{display:flex;align-items:center;gap:18px}
.dossier-top b{font-size:19px}
@media(max-width:900px){.ava-photo{width:88px;height:88px}}
.author-grid{align-items:center}
.dossier{max-width:340px}
@media(max-width:900px){.dossier{max-width:none}}
.ava-photo.sm{width:54px;height:54px;border-width:2px;box-shadow:0 6px 16px rgba(20,23,26,.18)}
.tg-head{display:flex;align-items:center;gap:14px}
.req b{display:block;color:var(--warm);font-weight:500;font-size:14.5px;margin-bottom:6px}
.req span{display:block}
.req-r{max-width:38ch;text-align:right}
@media(max-width:900px){.req-r{text-align:left;max-width:none}}



/* знак бренда: инициал на золотой линии */
.logo{display:flex;align-items:baseline;gap:11px;font-family:"Literata",Georgia,serif;font-size:20.5px;color:var(--warm);letter-spacing:.06em;text-decoration:none}
.logo .k{font-family:"Literata",Georgia,serif;font-size:30px;font-weight:500;color:var(--sand);line-height:1;position:relative;padding-bottom:6px;transition:color .25s ease}
.logo .k::after{content:"";position:absolute;left:0;right:-5px;bottom:0;height:2px;background:var(--sand);transition:right .25s cubic-bezier(.2,.7,.3,1)}
.logo:hover .k::after{right:-9px}
@media(max-width:640px){.logo{font-size:18px}.logo .k{font-size:26px}}
