/* ==========================================================================
   Егор Красноборов — главная. Редакторский минимализм на бумаге.
   Дисплей: Geologica (вшита). Текст: Plex (вшит). Подписи: системный моно.
   Один акцент — кобальт-чернила, по капле. Углы острые (3px). Тема: авто.
   ========================================================================== */

/* --- Шрифты (те же вшитые файлы, что и на остальном сайте) --------------- */
@font-face{font-family:'Geologica';src:url('../fonts/geologica-cyrillic.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Geologica';src:url('../fonts/geologica-latin.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex';src:url('../fonts/plex-cyrillic.woff2') format('woff2');font-weight:400 600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Plex';src:url('../fonts/plex-latin.woff2') format('woff2');font-weight:400 600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --- Токены ------------------------------------------------------------- */
:root{
  --paper:#f6f5f2; --paper-2:#efeee9; --surface:#ffffff;
  --ink:#15161a; --ink-2:#5f626a; --ink-3:#9a9ca1;
  --line:#dcdbd4;
  /* Акцент временно монохромный (чёрные чернила). Когда будет фирменный цвет
     из нового логотипа — поменять только эти три строки, и он разольётся везде. */
  --accent:#15161a; --accent-ink:#f6f5f2; --accent-soft:#e8e7e1;
  --hl:#9a7b4f;            /* тёплое выделение по капле (слово-перевёртыш) */
  --r:3px; --r-btn:4px;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,5vw,64px); --maxw:1200px;
  --font-display:'Geologica','Plex',sans-serif;
  --font-body:'Plex',ui-sans-serif,system-ui,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
  --err:#c0392b;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#101114; --paper-2:#16181c; --surface:#16181c;
    --ink:#eceef1; --ink-2:#9a9da4; --ink-3:#6c6f77;
    --line:#272a30; --accent:#eceef1; --accent-ink:#101114; --accent-soft:#23262c;
    --hl:#c8a36a;
    --err:#ff8a7a;
  }
}
:root[data-theme="dark"]{
    --paper:#101114; --paper-2:#16181c; --surface:#16181c;
    --ink:#eceef1; --ink-2:#9a9da4; --ink-3:#6c6f77;
    --line:#272a30; --accent:#eceef1; --accent-ink:#101114; --accent-soft:#23262c;
    --hl:#c8a36a;
    --err:#ff8a7a;
  }


*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.62;overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--ink);color:var(--paper);}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.025em;line-height:1.02;margin:0;text-wrap:balance;}
p{margin:0;}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
.label{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:300;}
.skip:focus{left:12px;top:12px;}

/* --- Ссылка-текст с дорисованным подчёркиванием -------------------------- */
.tlink{display:inline-flex;align-items:baseline;gap:9px;font-weight:500;color:var(--ink);position:relative;padding-bottom:3px;cursor:pointer;}
.tlink::after{content:'';position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);}
.tlink:hover::after{transform:scaleX(1);}
.tlink .a{color:var(--accent);transition:transform .4s var(--ease);}
.tlink:hover .a{transform:translateX(4px);}

/* --- Кнопки ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
  padding:14px 26px;border-radius:var(--r-btn);border:1px solid transparent;font:inherit;font-weight:600;font-size:16px;cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .12s var(--ease);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 86%,#000);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}
.btn .a{transition:transform .4s var(--ease);}
.btn:hover .a{transform:translateX(4px);}

/* --- Иконки (Phosphor через <use>) -------------------------------------- */
.tick,.ci{fill:currentColor;flex:none;display:inline-block;vertical-align:middle;}
.tick{width:18px;height:18px;}
.ci{width:22px;height:22px;}
.btn .tick{width:18px;height:18px;}

/* --- Плавающая среда (canvas) ------------------------------------------- */
.amb{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;}

/* --- Свой курсор -------------------------------------------------------- */
.cursor{position:fixed;left:0;top:0;z-index:120;pointer-events:none;width:9px;height:9px;border-radius:50%;
  background:var(--accent);transform:translate(-50%,-50%);display:none;align-items:center;justify-content:center;
  transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);}
.cursor .lbl{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink);opacity:0;transform:scale(.6);transition:opacity .25s,transform .3s var(--ease);white-space:nowrap;}
.cursor.grow{width:54px;height:54px;background:transparent;border:1.5px solid var(--accent);}
.cursor.media{width:88px;height:88px;background:var(--accent);}
.cursor.media .lbl{opacity:1;transform:scale(1);}
@media (hover:hover) and (pointer:fine){
  .has-cursor,.has-cursor a,.has-cursor button,.has-cursor summary,.has-cursor label{cursor:none;}
  .has-cursor .cursor{display:flex;}
}

/* --- Обёртка контента над фоновой средой -------------------------------- */
#scroll{position:relative;z-index:1;}

/* --- Навигация ---------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:70px;display:flex;align-items:center;border-bottom:1px solid transparent;transition:background .4s var(--ease),border-color .4s var(--ease);}
.nav[data-solid="true"]{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;gap:22px;}
.brand{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.02em;}
.brand small{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:400;}
.nav-links{display:flex;gap:28px;margin-left:auto;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;}
.nav-links a{color:var(--ink-2);transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{margin-left:6px;}
.nav-links a.nav-cta{color:var(--accent-ink);}      /* кнопка в шапке: свой цвет текста, не серый как ссылки */
.nav-links a.nav-cta:hover{color:var(--accent-ink);}
/* В монохроме ссылки в тексте различаем подчёркиванием, а не цветом */
.row p a,.niches-note a,.consent-text a,.cookie a,.form-note a,.field .hint a{text-decoration:underline;text-underline-offset:3px;}
.burger{display:none;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-btn);background:transparent;color:var(--ink);cursor:pointer;}
.burger i,.burger i::before,.burger i::after{display:block;width:18px;height:1.5px;background:currentColor;position:relative;}
.burger i::before,.burger i::after{content:'';position:absolute;left:0;transition:transform .22s var(--ease);}
.burger i::before{top:-6px;} .burger i::after{top:6px;}
.burger[aria-expanded="true"] i{background:transparent;}
.burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg);}
.burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg);}
@media(max-width:820px){
  .nav-links,.nav-cta{display:none;}
  .burger{display:flex;}
  .nav-links.is-open{display:flex;flex-direction:column;align-items:flex-start;gap:2px;position:absolute;top:70px;left:0;right:0;
    padding:16px var(--pad) 26px;background:var(--surface);border-bottom:1px solid var(--line);font-size:15px;}
  .nav-links.is-open a{padding:10px 0;color:var(--ink);letter-spacing:.02em;}
}

/* --- Первый экран ------------------------------------------------------- */
.hero{padding-top:clamp(116px,16vh,180px);padding-bottom:clamp(40px,6vw,72px);}
.hero-top{margin-bottom:clamp(28px,5vw,50px);}
.hero-h1{font-size:clamp(2.7rem,8vw,6.4rem);font-weight:600;letter-spacing:-.035em;line-height:.98;max-width:16ch;}
.hero-h1 .ln{display:block;overflow:hidden;padding-bottom:.03em;}
.hero-h1 .ln>span{display:block;}
.js .hero-h1 .ln>span{transform:translateY(116%);}
.hero-h1 .ln>span.in{transform:translateY(0);transition:transform 1.05s var(--ease);transition-delay:var(--d,0ms);}
.hero-h1 .dot{color:var(--accent);transition:opacity .3s;}
.hero-h1.typing .dot{opacity:0;}
.hero-top .cmt{color:var(--accent);opacity:.75;}
.caret{display:none;}
.js .hero-h1 .caret{display:inline-block;width:.07em;min-width:3px;height:.78em;margin-left:.04em;
  background:var(--accent);vertical-align:baseline;transform:translateY(.06em);animation:caretblink 1.05s steps(1) infinite;}
@keyframes caretblink{50%{opacity:0;}}
.hero-sub{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:clamp(28px,4vw,46px);}
.hero-lead{max-width:42ch;color:var(--ink-2);font-size:clamp(1.04rem,1.4vw,1.2rem);line-height:1.5;}
.hero-lead b{color:var(--ink);font-weight:500;}
.hero-actions{display:flex;gap:14px 26px;flex-wrap:wrap;align-items:center;}
@media(max-width:560px){
  .hero-sub{display:block;}
  .hero-lead{max-width:none;}
  .hero-actions{margin-top:24px;}
}

.hero-media{margin-top:clamp(44px,6vw,80px);position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper-2);}
.hero-media img{width:100%;height:auto;display:block;transform:scale(1.05) translateY(var(--py,0px));will-change:transform;}
.hero-media .cap{position:absolute;left:0;bottom:0;z-index:2;display:flex;gap:14px;align-items:center;padding:11px 15px;
  background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line);border-right:1px solid var(--line);border-top-right-radius:var(--r);}
.hero-media .cap .label{color:var(--ink);}
.hero-media .cap span{color:var(--ink-2);font-size:13px;}

.js .reveal-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease);}
.reveal-img.in{clip-path:inset(0 0 0 0);}

/* --- Факты -------------------------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:clamp(56px,7vw,90px);}
.fact{background:var(--paper);padding:clamp(24px,3vw,38px) clamp(20px,2.4vw,28px);}
.fact-num{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.035em;line-height:.95;}
.fact-lbl{margin-top:14px;color:var(--ink-2);font-size:14.5px;line-height:1.4;max-width:26ch;}
@media(max-width:820px){.facts{grid-template-columns:repeat(2,1fr);}}
@media(max-width:440px){.facts{grid-template-columns:1fr;}}

/* --- Секции ------------------------------------------------------------- */
.section{padding-block:clamp(78px,11vw,150px);}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:end;margin-bottom:clamp(40px,5vw,72px);padding-bottom:24px;border-bottom:1px solid var(--line);}
.sec-head h2{font-size:clamp(1.9rem,4.2vw,3.2rem);letter-spacing:-.03em;max-width:16ch;}
.sec-head .r{color:var(--ink-2);font-size:15.5px;max-width:40ch;justify-self:end;}
.sec-head .eyebrow{grid-column:1/-1;margin-bottom:-6px;}
@media(max-width:720px){.sec-head{grid-template-columns:1fr;}.sec-head .r{justify-self:start;}}

.rise{display:block;overflow:hidden;padding-bottom:.06em;}
.rise>span{display:block;}
.js .rise>span{transform:translateY(110%);}
.rise>span.in{transform:translateY(0);transition:transform 1.25s var(--ease);transition-delay:var(--d,0ms);}

/* --- Работы ------------------------------------------------------------- */
.works{display:grid;gap:clamp(60px,9vw,120px);}
.work{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;}
.work:nth-child(even) .work-media{order:2;}
.work-media{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper-2);display:block;}
.work-media img{width:100%;height:auto;transform:scale(var(--s,1.05)) translateY(var(--py,0px));transition:transform 1s var(--ease);will-change:transform;}
.work:hover .work-media img{--s:1.11;}
/* подпись поверх скриншота — как на первом экране */
.work-badge{position:absolute;left:0;bottom:0;z-index:2;color:var(--ink);padding:9px 14px;
  background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);border-right:1px solid var(--line);border-top-right-radius:var(--r);}
.work-body{display:flex;flex-direction:column;}
.work-idx{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:10px;}
.work h3{font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:-.03em;margin:0 0 14px;}
.work-desc{color:var(--ink-2);font-size:15.5px;max-width:46ch;}
/* мини-таблица деталей: делает карточку «дорогой», а не «за 15 минут» */
.work-facts{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line);}
.work-facts li{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink);line-height:1.4;}
.work-facts li span{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding-top:2px;}
.work .tlink{margin-top:24px;}
@media(max-width:780px){
  .work,.work:nth-child(even) .work-media{grid-template-columns:1fr;order:0;}
  .work-facts li{grid-template-columns:88px 1fr;}
}

/* --- Список (что входит / чем рискую) ----------------------------------- */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.row{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.25fr);gap:24px;padding:clamp(22px,3vw,36px) 0;border-bottom:1px solid var(--line);align-items:baseline;}
.row .n{font-family:var(--font-mono);font-size:13px;color:var(--ink-3);}
.row h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.02em;transition:transform .5s var(--ease),color .3s var(--ease);}
.row p{color:var(--ink-2);font-size:15.5px;max-width:54ch;}
.row p a{color:var(--accent);}
.row:hover h3{color:var(--accent);transform:translateX(8px);}
@media(max-width:720px){.row{grid-template-columns:1fr;gap:8px;}.row .n{display:none;}}

/* --- Кому подходит ------------------------------------------------------- */
.niches{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.niches li a{display:block;padding:12px 20px;border:1px solid var(--line);border-radius:999px;font-weight:500;color:var(--ink);font-size:clamp(15px,1.3vw,16px);transition:border-color .2s var(--ease),transform .12s var(--ease),background .2s;}
.niches li a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.niches-note{margin-top:26px;color:var(--ink-2);font-size:15.5px;max-width:64ch;}

/* --- Как идёт работа ---------------------------------------------------- */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.flow-step{background:var(--paper);padding:clamp(22px,2.6vw,32px);}
.flow-when{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
.flow-step h3{font-size:clamp(1.1rem,1.6vw,1.35rem);margin-bottom:10px;}
.flow-step p{color:var(--ink-2);font-size:14.5px;}
@media(max-width:860px){.flow{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.flow{grid-template-columns:1fr;}}

/* --- Цены --------------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);align-items:stretch;}
.plan{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;background:var(--surface);cursor:pointer;transition:border-color .25s var(--ease),background .25s var(--ease);}
.plan input{position:absolute;opacity:0;width:0;height:0;}
.plan:hover{border-color:var(--ink-3);}
.plan-featured{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));}
.plan:has(input:checked){border-color:var(--accent);background:var(--paper-2);}
.plan:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px;}
.plan-check{position:absolute;top:clamp(20px,2.4vw,30px);right:clamp(20px,2.4vw,30px);width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:.2s;}
.plan-check .tick{width:13px;height:13px;color:var(--accent-ink);opacity:0;transition:.2s;}
.plan:has(input:checked) .plan-check{background:var(--accent);border-color:var(--accent);}
.plan:has(input:checked) .plan-check .tick{opacity:1;}
.plan h3{font-size:clamp(1.24rem,1.9vw,1.55rem);padding-right:34px;}
.plan-price{font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,3vw,2.6rem);letter-spacing:-.03em;margin:16px 0 4px;line-height:1;font-variant-numeric:tabular-nums;}
.plan-price small{font-size:.42em;color:var(--ink-2);font-weight:400;}
.plan-term{color:var(--ink-2);font-size:14.5px;font-family:var(--font-mono);letter-spacing:.03em;}
.plan ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;}
.plan li{display:flex;gap:11px;align-items:flex-start;font-size:15px;}
.plan li .tick{flex:none;width:18px;height:18px;margin-top:2px;color:var(--accent);}
.plan li small{color:var(--ink-2);font-size:.86em;}

/* Калькулятор: шаги/поддержка + живой итог */
.calc-bar{margin-top:clamp(16px,2vw,24px);display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(16px,2vw,24px);align-items:stretch;}
.calc-opts{display:flex;flex-direction:column;gap:12px;}
.calc-row{flex:1;display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:var(--r);padding:16px clamp(16px,2vw,22px);background:var(--surface);}
.calc-rl{flex:1;}
.calc-rl b{display:block;font-weight:600;font-size:15.5px;}
.calc-rl small{color:var(--ink-3);font-size:13px;}
.stepper{display:flex;align-items:center;gap:12px;}
.stepper button{width:36px;height:36px;border-radius:var(--r);border:1px solid var(--line);background:var(--paper-2);color:var(--ink);font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:border-color .15s,transform .1s;}
.stepper button:hover:not(:disabled){border-color:var(--ink);}
.stepper button:active:not(:disabled){transform:scale(.92);}
.stepper button:disabled{opacity:.35;cursor:not-allowed;}
.stepper-v{font-family:var(--font-mono);font-weight:500;font-size:17px;min-width:20px;text-align:center;font-variant-numeric:tabular-nums;}
.switch{flex:none;width:52px;height:30px;border-radius:999px;background:var(--line);border:none;position:relative;cursor:pointer;transition:background .25s;}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--surface);transition:transform .25s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.3);}
.switch[aria-pressed="true"]{background:var(--accent);}
.switch[aria-pressed="true"]::after{transform:translateX(22px);}
.calc-total{border:1px solid var(--accent);border-radius:var(--r);padding:clamp(20px,2.4vw,26px);background:var(--paper-2);display:flex;flex-direction:column;}
.calc-total-label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.calc-price{font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,3.4vw,3rem);letter-spacing:-.03em;line-height:1;margin:10px 0 6px;font-variant-numeric:tabular-nums;}
.calc-price small{font-size:.4em;color:var(--ink-2);font-weight:400;}
.calc-term{color:var(--ink-2);font-size:14.5px;font-family:var(--font-mono);}
.calc-term b{color:var(--ink);font-weight:500;}
.calc-support{color:var(--ink-2);font-size:13.5px;margin-top:4px;display:none;}
.calc-support b{color:var(--ink);}
.calc-total .btn{margin-top:auto;width:100%;}
.calc-fine{margin-top:16px;color:var(--ink-3);font-size:14px;}
.calc-fine span{color:var(--ink-2);}
@media(max-width:860px){.plans{grid-template-columns:1fr;}.calc-bar{grid-template-columns:1fr;}}

/* --- Партнёрская программа ---------------------------------------------- */
.partner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;
  padding:clamp(28px,4vw,52px);border-radius:var(--r);background:var(--surface);border:1px solid var(--line);}
.partner h2{font-size:clamp(1.7rem,2.8vw,2.4rem);margin-bottom:18px;letter-spacing:-.03em;}
.partner-text>p{color:var(--ink-2);max-width:56ch;}
.partner-list{list-style:none;margin:24px 0 30px;padding:0;display:grid;gap:11px;}
.partner-list li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;}
.partner-list .tick{flex:none;width:18px;height:18px;margin-top:3px;color:var(--accent);}
.partner-rate{background:var(--accent);color:var(--accent-ink);border-radius:var(--r);padding:clamp(24px,3vw,36px);text-align:center;}
.partner-rate-value{font-family:var(--font-display);font-weight:600;font-size:clamp(3rem,6vw,4.2rem);line-height:1;letter-spacing:-.04em;margin-bottom:14px;}
.partner-rate-note{font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--accent-ink) 82%,var(--accent));}
@media(max-width:860px){.partner{grid-template-columns:1fr;}.partner-rate{order:-1;}}

/* --- Кто это делает ----------------------------------------------------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center;}
.about-nophoto{grid-template-columns:1fr;}
.about h2{font-size:clamp(1.9rem,3vw,2.6rem);letter-spacing:-.03em;}
.about-text p{color:var(--ink-2);margin-top:18px;max-width:52ch;}
.about-text p:first-of-type{color:var(--ink);font-size:1.08rem;}
.about-photo{border-radius:var(--r);overflow:hidden;background:var(--paper-2);aspect-ratio:1/1;max-width:400px;width:100%;border:1px solid var(--line);}
.about-photo img{width:100%;height:100%;object-fit:cover;}
.about-links{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;}
.about-mail{color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:3px;font-size:15px;transition:color .2s,border-color .2s;}
.about-mail:hover{color:var(--accent);border-color:var(--accent);}
@media(max-width:820px){.about{grid-template-columns:1fr;}.about-photo{order:-1;max-width:300px;}}

/* --- Вопросы ------------------------------------------------------------ */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;font-family:var(--font-display);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.01em;transition:color .18s var(--ease);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--accent);}
.faq summary::after{content:'';position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:1.6px solid var(--ink-2);border-bottom:1.6px solid var(--ink-2);transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq details p{color:var(--ink-2);padding-bottom:26px;max-width:68ch;}

/* --- Заявка ------------------------------------------------------------- */
.contact{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,68px);align-items:start;}
.contact h2{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.03em;}
.contact-side .lead{margin-top:18px;color:var(--ink-2);max-width:44ch;}
.contact-ways{margin-top:28px;display:grid;gap:12px;max-width:440px;}
.contact-way{display:flex;align-items:center;gap:14px;padding:15px 17px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);
  transition:border-color .2s var(--ease),transform .12s var(--ease);}
.contact-way:hover{border-color:var(--accent);transform:translateY(-2px);}
.contact-way .ci{flex:none;width:22px;height:22px;color:var(--accent);}
.contact-way span{display:grid;gap:2px;font-size:13.5px;color:var(--ink-2);line-height:1.35;}
.contact-way b{font-family:var(--font-display);font-weight:500;font-size:1.02rem;letter-spacing:-.01em;color:var(--ink);}
@media(max-width:860px){.contact{grid-template-columns:1fr;}}

.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,38px);display:grid;gap:20px;}
.field{display:grid;gap:8px;}
.field label{font-size:14.5px;font-weight:600;}
.field input,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-btn);padding:13px 15px;width:100%;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}
.field textarea{min-height:110px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-2);opacity:.8;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);}
.field .hint{font-size:13.5px;color:var(--ink-2);}
.label-opt{font-weight:400;color:var(--ink-2);font-size:13.5px;}
.field .err{font-size:13.5px;color:var(--err);display:none;}
.field.is-invalid input,.field.is-invalid textarea{border-color:var(--err);}
.field.is-invalid .err{display:block;}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;}
.form-foot .fine{font-size:13.5px;color:var(--ink-2);max-width:34ch;}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-note{display:none;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:var(--r-btn);background:var(--accent-soft);color:var(--ink);font-size:15px;}
.form-note .ci{flex:none;width:20px;height:20px;color:var(--accent);margin-top:2px;}
.form-note a{color:var(--accent);font-weight:600;}
.form.is-sent .form-done{display:flex;}
.form.is-failed .form-failed{display:flex;}

.consent{display:flex;gap:13px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--paper);cursor:pointer;transition:border-color .18s var(--ease);}
.consent:hover{border-color:var(--ink-2);}
.consent input{position:absolute;opacity:0;width:0;height:0;}
.consent-box{flex:none;width:22px;height:22px;border:1.5px solid var(--ink-2);border-radius:5px;position:relative;transition:background .18s,border-color .18s;}
.consent-box::after{content:'';position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.6);opacity:0;transition:opacity .16s,transform .16s var(--ease);}
.consent input:checked + .consent-box{background:var(--accent);border-color:var(--accent);}
.consent input:checked + .consent-box::after{opacity:1;transform:rotate(45deg) scale(1);}
.consent-text{display:grid;gap:3px;font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.35;}
.consent-text small{font-size:13px;font-weight:400;color:var(--ink-2);}
.consent-text a{color:var(--accent);}
.field.is-invalid .consent,.field.is-invalid .consent-box{border-color:var(--err);}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

/* --- Подвал ------------------------------------------------------------- */
.footer{border-top:1px solid var(--line);padding-block:44px 40px;}
.footer-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);padding-bottom:32px;margin-bottom:26px;border-bottom:1px solid var(--line);}
.footer-name{font-family:var(--font-display);font-weight:600;font-size:1.15rem;letter-spacing:-.02em;margin-bottom:12px;}
.footer-about p{color:var(--ink-2);font-size:15px;max-width:44ch;}
.footer-about .footer-place{margin-top:12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase;}
.footer-col{display:grid;gap:10px;align-content:start;}
.footer-col a{color:var(--ink-2);font-size:15px;width:fit-content;transition:color .18s;}
.footer-col a:hover{color:var(--accent);}
.footer-title{font-weight:600;font-size:15px;color:var(--ink);margin-bottom:2px;}
.footer-inner{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;color:var(--ink-2);font-size:14px;font-family:var(--font-mono);letter-spacing:.02em;}
.footer-inner a{transition:color .18s;} .footer-inner a:hover{color:var(--accent);}
@media(max-width:820px){.footer-top{grid-template-columns:1fr 1fr;row-gap:30px;}.footer-about{grid-column:1/-1;}}

/* --- Cookie / toast ----------------------------------------------------- */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:55;max-width:600px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:0 20px 50px rgba(0,0,0,.14);opacity:0;transform:translateY(12px);transition:opacity .3s var(--ease),transform .3s var(--ease);}
.cookie.is-on{opacity:1;transform:none;}
.cookie p{font-size:14px;color:var(--ink-2);line-height:1.4;flex:1 1 300px;}
.cookie a{color:var(--accent);}
@media(max-width:520px){.cookie button{width:100%;}}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);z-index:60;max-width:calc(100vw - 32px);padding:12px 20px;border-radius:var(--r-btn);
  background:var(--ink);color:var(--paper);font-size:15px;font-weight:500;box-shadow:0 20px 50px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);}
.toast.is-on{opacity:1;transform:translate(-50%,0);}

/* --- Появление ---------------------------------------------------------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);}
[data-reveal].in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms);}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  [data-reveal],.rise>span,.hero-h1 .ln>span{opacity:1 !important;transform:none !important;}
  .caret{display:none !important;}
  .msg-bubble{animation:none !important;opacity:1 !important;transform:none !important;}
  .reveal-img{clip-path:none !important;}
  .hero-media img,.work-media img{transform:none !important;}
  .amb{display:none !important;}
  .has-cursor .cursor{display:none !important;}
  .has-cursor,.has-cursor a,.has-cursor button,.has-cursor summary,.has-cursor label{cursor:auto !important;}
}

/* Секция «И вам начинают писать» — заявки слетаются к экрану (концепт 4) */
.msgs-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;}
.msgs-copy .lead{max-width:38ch;margin-top:16px;}
.msgs-scene{position:relative;height:300px;}
.msg-phone{position:absolute;right:9%;top:50%;transform:translateY(-50%);width:148px;height:266px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.16);}
.msg-n{height:26px;background:var(--surface);border-bottom:1px solid var(--line);}
.msg-pg{padding:16px 14px;display:flex;flex-direction:column;gap:8px;}
.msg-pg .mh{height:11px;width:78%;background:var(--ink);opacity:.85;border-radius:4px;}
.msg-pg .mh.s{width:54%;opacity:.5;}
.msg-pg .mb{margin-top:8px;height:26px;width:62%;background:var(--accent);border-radius:6px;}
.msg-bubble{position:absolute;left:0;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:4px;
  padding:9px 14px;font-size:13.5px;color:var(--ink-2);box-shadow:0 8px 24px rgba(0,0,0,.10);
  opacity:0;animation:msgfly 5.4s cubic-bezier(.4,0,.2,1) infinite;}
.msg-bubble i{width:22px;height:22px;border-radius:50%;background:var(--accent-soft);border:1px solid var(--line);flex:none;}
.msg-bubble.b1{top:12%;animation-delay:0s;}
.msg-bubble.b2{top:45%;animation-delay:1.8s;}
.msg-bubble.b3{top:75%;animation-delay:3.6s;}
@keyframes msgfly{
  0%{opacity:0;transform:translateX(-8px) scale(.92);}
  11%{opacity:1;transform:translateX(6px) scale(1);}
  60%{opacity:1;transform:translateX(28px) scale(1);}
  84%{opacity:0;transform:translateX(190px) scale(.55);}
  100%{opacity:0;}
}
@media(max-width:820px){
  .msgs-in{grid-template-columns:1fr;gap:34px;}
  .msgs-scene{height:250px;order:2;}
}

/* Сообщения на телефоне: пузыри не должны налезать на макет телефона */
@media (max-width:560px){
  .msgs-scene{height:230px;}
  .msg-phone{width:116px;height:208px;right:2%;}
  .msg-bubble{font-size:12px;padding:8px 11px;max-width:calc(100% - 138px);animation-name:msgfly-m;}
  .msg-bubble span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
  .msg-bubble i{width:18px;height:18px;}
}
@keyframes msgfly-m{
  0%{opacity:0;transform:translateX(-6px) scale(.92);}
  14%{opacity:1;transform:translateX(3px) scale(1);}
  64%{opacity:1;transform:translateX(12px) scale(1);}
  86%{opacity:0;transform:translateX(64px) scale(.6);}
  100%{opacity:0;}
}

/* === 3D-добавки (28.08): наклон работ, магнит, переворот ниш === */
/* Наклон карточек «Работы» + лёгкий блик */
.work-media{transition:transform .3s var(--ease);will-change:transform;}
.work-media::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  transition:opacity .3s var(--ease);background:linear-gradient(120deg,rgba(255,255,255,.10),transparent 55%);}
.work-media:hover::after{opacity:1;}

/* Магнитные кнопки — мягко и плавно (перебивает быстрый transform из .btn) */
.btn-primary{transition:transform .35s cubic-bezier(.2,1,.3,1),background .25s var(--ease),color .25s var(--ease);}

/* «Кому подходит» — карточки-плитки с переворотом */
.niches{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.niche{list-style:none;}
.niche>a{display:block;perspective:800px;color:inherit;}
.niche-in{position:relative;display:block;height:60px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.5,0,.2,1);}
.niche>a:hover .niche-in{transform:rotateX(180deg);}
.niche-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;align-items:center;padding:0 16px;border:1px solid var(--line);border-radius:var(--r);
  font-size:14.5px;line-height:1.22;}
.niche-front{background:var(--surface);}
.niche-back{background:var(--ink);color:var(--paper);transform:rotateX(180deg);justify-content:space-between;gap:10px;}
.niche-back .a{transition:transform .3s var(--ease);flex:none;}
.niche>a:hover .niche-back .a{transform:translateX(3px);}
@media (hover:none){.niche>a:hover .niche-in{transform:none;}.work-media{transition:none;}}
@media (prefers-reduced-motion:reduce){.niche-in,.work-media,.btn-primary{transition:none !important;}.niche>a:hover .niche-in{transform:none;}}

/* Анти-мигание при загрузке: пока интро «вооружено» (boot.js), прячем весь
   контент, кроме самого оверлея интро — настоящий сайт не мелькает. */
html.intro-armed body > *:not(#intro-overlay){visibility:hidden;}

/* Блок «подход»: психология клиента / НЛП — слим-заявление до цены */
.approach{padding-block:clamp(40px,6vw,72px);}
.approach-line{font-family:var(--font-display);font-weight:500;font-size:clamp(1.35rem,2.6vw,2rem);
  letter-spacing:-.02em;line-height:1.3;max-width:38ch;margin-top:16px;text-wrap:balance;}

/* Блок «подход»: заголовок построчной шторкой (.rise) + слово-перевёртыш.
   Слова лежат в одной ячейке inline-grid — ширина по самому длинному, поэтому
   строка не прыгает при смене. Без JS видно первое слово. */
.approach .sec-head{grid-template-columns:1fr;align-items:start;}
.approach .approach-h{font-size:clamp(1.75rem,4.6vw,3.3rem);letter-spacing:-.03em;max-width:none;}
.approach .lead{max-width:56ch;}
.approach-h .rise{padding-bottom:.09em;}
.cyc{display:inline-grid;vertical-align:baseline;white-space:nowrap;}
.cyc-i{grid-area:1/1;justify-self:start;opacity:0;transform:translateY(45%);
  color:var(--hl);border-bottom:2px solid var(--hl);
  transition:opacity .7s var(--ease),transform .8s var(--ease);}
.cyc-i.is-on{opacity:1;transform:translateY(0);}
.cyc-i.is-out{opacity:0;transform:translateY(-45%);}
@media (prefers-reduced-motion:reduce){.cyc-i{transition:none;}}

/* Полоса прогресса скролла: масштабируем transform (не width) — только GPU */
.sprog{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--hl);z-index:60;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;pointer-events:none;}

/* Бегущая строка услуг */
.marq{overflow:hidden;border-block:1px solid var(--line);padding:clamp(14px,2vw,22px) 0;}
.marq-track{display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.4vw,2.6rem);animation:marq 28s linear infinite;}
.marq-track>*{padding:0 .34em;}
.marq i{color:var(--hl);font-style:normal;}
@keyframes marq{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marq-track{animation:none;}.sprog{display:none;}}

/* Курсор-прожектор: мягкий свет за контентом, едет в общем цикле с курсором.
   Только desktop (класс has-cursor ставится при pointer:fine и без reduced-motion). */
.spot{position:fixed;left:0;top:0;width:min(560px,60vw);aspect-ratio:1;border-radius:50%;
  z-index:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);will-change:transform;
  background:radial-gradient(circle,color-mix(in srgb,var(--hl) 26%,transparent),transparent 62%);}
@media (hover:hover) and (pointer:fine){.spot{opacity:1;}}
@media (prefers-reduced-motion:reduce){.spot{display:none;}}

/* Сравнение «конструктор / свой код»: два макета одной страницы. Верхний
   режется clip-path, поэтому текст и блоки не переформатируются. Отличия
   видны глазом: баннер конструктора, реклама, тусклая кнопка, шкала скорости. */
.cmp{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--surface);aspect-ratio:16/8;min-height:320px;}
.cmp-pane{position:absolute;inset:0;}
.cmp-a{background:var(--paper-2);clip-path:inset(0 calc(100% - var(--p,50%)) 0 0);}
.cmp-b{background:var(--surface);}

/* макет страницы внутри панели */
.cmp-mock{position:absolute;inset:clamp(26px,4vw,44px);display:flex;flex-direction:column;}
.cm-top{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.cm-logo{width:56px;height:12px;border-radius:3px;background:var(--ink-3);opacity:.6;}
.cm-nav{width:34px;height:7px;border-radius:3px;background:var(--ink-3);opacity:.35;}
.cm-cta{margin-left:auto;width:86px;height:22px;border-radius:var(--r-btn);background:var(--ink-3);opacity:.4;}
.cm-body{padding-top:clamp(16px,2.4vw,26px);display:grid;gap:10px;}
.cm-h1{height:20px;width:74%;border-radius:4px;background:var(--ink-3);opacity:.5;}
.cm-h1.sh{width:52%;}
.cm-txt{height:9px;width:60%;border-radius:3px;background:var(--ink-3);opacity:.32;}
.cm-txt.sh{width:40%;}
.cm-btn{margin-top:8px;height:34px;width:158px;border-radius:var(--r-btn);background:var(--ink-3);opacity:.45;}
/* своя версия: контраст, живой акцент */
.cmp-a .cm-logo,.cmp-a .cm-h1{background:var(--ink);opacity:.9;}
.cmp-a .cm-txt{background:var(--ink);opacity:.42;}
.cmp-a .cm-nav{background:var(--ink);opacity:.4;}
.cmp-a .cm-cta,.cmp-a .cm-btn{background:var(--hl);opacity:1;}
/* мусор, который тащит конструктор */
.cm-ads{margin-top:12px;padding:7px 12px;border:1px dashed var(--ink-3);border-radius:var(--r-sm,3px);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);opacity:.75;}
/* шкала скорости */
.cm-speed{margin-top:auto;display:flex;align-items:center;gap:10px;}
.cm-speed-lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.cm-speed-bar{flex:1;max-width:190px;height:5px;border-radius:3px;background:var(--line);overflow:hidden;}
.cm-speed-bar i{display:block;height:100%;border-radius:3px;background:var(--ink-3);width:38%;transition:width .5s var(--ease);}
.cmp-a .cm-speed-bar i{width:94%;background:var(--hl);}
/* плашка снизу */
.cm-badge{margin-top:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);}
.cmp-a .cm-badge{color:var(--hl);}
/* подписи сторон в противоположных углах */
.cmp-side-lbl{position:absolute;top:clamp(12px,1.8vw,18px);font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.cmp-side-a{left:clamp(14px,2vw,20px);color:var(--hl);}
.cmp-side-b{right:clamp(14px,2vw,20px);}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;background:var(--hl);pointer-events:none;}
.cmp-line::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:var(--hl);box-shadow:0 4px 16px rgba(0,0,0,.28);}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent;}
.cmp-range:focus-visible{outline:2px solid var(--hl);outline-offset:3px;}
.cmp-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);pointer-events:none;}
.cmp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
@media (max-width:720px){
  .cmp{aspect-ratio:3/4;min-height:0;}
  .cm-btn{width:130px;height:30px;}
  .cm-speed-bar{max-width:120px;}
  .cmp-hint{display:none;}
}

/* Кнопка смены темы в шапке */
.tsw{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--ink);font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:border-color .25s var(--ease),background .25s var(--ease);flex:none;}
.tsw:hover{border-color:var(--ink);background:var(--surface);}


.low-power .spot{display:none;}