/* Общая дизайн-система сайта Unexis Бьюти: главная линейки, страницы «для мастера», «для салона», «для сети».
   Вынесено из index.html С21 (30.09.2026). Пути к шрифтам и картинкам — от этого файла (../fonts, ../img). */
/* Сайт продукта Unexis Бьюти v2 (С21, ТЗ §18.6). Самодостаточная страница: Caddy отдаёт site/ как есть, приложение не участвует.
   Система ЮниксAI: бумага #FCFBF7, ink #141719, кислотный #C8FF00 — только заливкой под тёмным текстом (текстовый
   вариант на светлом — #4A6300), шрифты Onest / Golos Text / JetBrains Mono со своего сервера. Пути — относительные
   (сайт живёт в корне домена, а копия — в приватном артефакте). */
@font-face{font-family:"Onest";font-weight:100 900;font-display:swap;src:url(../fonts/onest-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:100 900;font-display:swap;src:url(../fonts/onest-latin-wght-normal.woff2) format("woff2");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+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";font-weight:400 900;font-display:swap;src:url(../fonts/golos-text-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-weight:400 900;font-display:swap;src:url(../fonts/golos-text-latin-wght-normal.woff2) format("woff2");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+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");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+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#fcfbf7;--bg-2:#f3f1e9;--surface:#fff;--text:#141719;--text-2:#5c6058;--text-3:#8a8e85;
  --line:rgba(20,23,25,.12);--line-2:rgba(20,23,25,.2);
  --ink:#141719;--on-ink:#f5f3ec;--on-ink-2:#a3a89e;--ink-line:rgba(245,243,236,.14);
  --acid:#c8ff00;--acid-ink:#4a6300;--acid-soft:#eef8c8;
  --bubble-in:#fff;--bubble-out:#e6f6a8;--chat-bg:#eeece3;
  --shadow:0 40px 80px -40px rgba(20,23,25,.45);
  --f-d:"Onest",-apple-system,"Segoe UI",Arial,sans-serif;--f-b:"Golos Text",-apple-system,"Segoe UI",Arial,sans-serif;
  --f-m:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:24px;--wrap:1200px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;--bg:#0f1211;--bg-2:#151a17;--surface:#1a1f1c;--text:#f1efe8;--text-2:#a8ada3;--text-3:#7c8178;
  --line:rgba(245,243,236,.11);--line-2:rgba(245,243,236,.2);
  --ink:#050706;--ink-line:rgba(245,243,236,.1);
  --acid-ink:#c8ff00;--acid-soft:rgba(200,255,0,.1);
  --bubble-in:#252c27;--bubble-out:#3a4a12;--chat-bg:#111513;--shadow:0 40px 80px -40px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  color-scheme:dark;--bg:#0f1211;--bg-2:#151a17;--surface:#1a1f1c;--text:#f1efe8;--text-2:#a8ada3;--text-3:#7c8178;
  --line:rgba(245,243,236,.11);--line-2:rgba(245,243,236,.2);
  --ink:#050706;--ink-line:rgba(245,243,236,.1);
  --acid-ink:#c8ff00;--acid-soft:rgba(200,255,0,.1);
  --bubble-in:#252c27;--bubble-out:#3a4a12;--chat-bg:#111513;--shadow:0 40px 80px -40px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 var(--f-b);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-x:clip}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--f-d);letter-spacing:-.025em;margin:0}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 32px}}
.mono{font-family:var(--f-m);font-weight:500;letter-spacing:.02em}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 12.5px var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--acid);box-shadow:0 0 0 1px rgba(20,23,25,.25)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;
  font:600 16px var(--f-d);text-decoration:none;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--acid-ink);outline-offset:3px}
.btn-acid{background:var(--acid);color:#141719;box-shadow:0 10px 30px -12px rgba(140,180,0,.8)}
.btn-ink{background:var(--text);color:var(--bg)}
.btn-line{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}

/* шапка */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:750 21px var(--f-d);letter-spacing:-.03em}
/* написание названия: UNEXIS — как UNIX в логотипе unixai.ru, «бьюти» — Marck Script на кислотной плашке */
@font-face{font-family:"Marck Script";font-weight:400;font-display:swap;src:url(../fonts/marck-script-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
.wm{display:inline-flex;align-items:center;gap:.22em;font-weight:800;letter-spacing:-.045em;white-space:nowrap}
.wm b{font:400 .86em/1 "Marck Script",cursive;letter-spacing:0;color:#141719;background:var(--acid);padding:.16em .42em .22em;border-radius:.36em}
.nav{display:none;gap:22px;margin-left:auto;font-size:15px;white-space:nowrap}
.nav a{text-decoration:none;color:var(--text-2)}
.nav a:hover{color:var(--text)}
@media (min-width:1080px){.nav{display:flex}}
.nav .loc{display:none}
@media (min-width:1360px){.nav .loc{display:inline}}
.theme{margin-left:auto;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line)}
@media (min-width:1080px){.theme{margin-left:8px}}
.theme .sun,.theme .moon,.theme .auto{display:none}
.theme[data-mode="light"] .sun,.theme[data-mode="dark"] .moon,.theme[data-mode="auto"] .auto{display:block}
.top .btn{min-height:40px;padding:0 16px;font-size:14.5px}
.top .btn .long{display:none}
@media (min-width:480px){.top .btn .long{display:inline}}

/* первый экран */
.hero{position:relative;padding:36px 0 56px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -30% auto auto;width:720px;height:720px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--acid) 38%,transparent),transparent 62%);filter:blur(20px);opacity:.55;pointer-events:none}
.hero .wrap{position:relative;display:grid;gap:44px;align-items:center}
@media (min-width:1000px){.hero{padding:72px 0 96px}.hero .wrap{grid-template-columns:1.12fr .88fr;gap:40px}}
.hero h1{font-size:clamp(38px,8.4vw,76px);line-height:.98;font-weight:780;letter-spacing:-.045em;margin-top:18px}
.hero h1 mark{background:var(--acid);color:#141719;padding:0 .1em;border-radius:.14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero h1 .u{white-space:nowrap}
.lead{margin-top:22px;font-size:clamp(17px,2.3vw,20px);color:var(--text-2);max-width:33em}
.lead b{color:var(--text);font-weight:600}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font:500 13px var(--f-m);color:var(--text-2);letter-spacing:.02em}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acid-ink)}

/* телефон с живым диалогом */
.stage{position:relative;max-width:380px;width:100%;margin:0 auto}
.phone{position:relative;background:var(--ink);border-radius:46px;padding:10px;box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.08)}
.screen{position:relative;border-radius:37px;overflow:hidden;background:var(--chat-bg);height:580px;display:flex;flex-direction:column}
.notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:20px;background:var(--ink);z-index:3}
.chat-head{display:flex;align-items:center;gap:10px;padding:46px 16px 12px;background:color-mix(in srgb,var(--surface) 92%,transparent);border-bottom:1px solid var(--line)}
.ava{width:38px;height:38px;border-radius:50%;background:#141719;display:grid;place-items:center;flex:none}
.ava svg{width:20px;height:20px}
.chat-head b{display:block;font:650 15px var(--f-d)}
.chat-head small{display:block;font-size:12px;color:var(--acid-ink);font-weight:600}
.chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:12px 12px 14px;font-size:14px;line-height:1.38;overflow:hidden}
.msg{max-width:86%;padding:8px 11px 7px;border-radius:17px;background:var(--bubble-in);box-shadow:0 1px 0 rgba(20,23,25,.06);animation:pop .32s cubic-bezier(.2,.9,.3,1.2) both}
.msg.me{align-self:flex-end;background:var(--bubble-out);border-bottom-right-radius:5px}
.msg.bot{border-bottom-left-radius:5px}
.msg .t{display:block;text-align:right;font-size:10.5px;color:var(--text-3);margin-top:1px}
.kbd{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;max-width:92%;animation:pop .32s both}
.kbd span{text-align:center;padding:8px 0;border-radius:10px;background:color-mix(in srgb,var(--surface) 80%,transparent);font-weight:600;font-size:13px;box-shadow:inset 0 0 0 1px var(--line);transition:background .2s}
.kbd span.on{background:var(--acid);color:#141719;box-shadow:none}
.typing{align-self:flex-start;background:var(--bubble-in);border-radius:17px;border-bottom-left-radius:5px;padding:12px 14px;display:flex;gap:4px;animation:pop .2s both}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
.toast{position:absolute;left:-14px;right:-14px;bottom:-26px;z-index:4;background:var(--surface);border-radius:20px;padding:12px 14px;display:flex;gap:12px;align-items:center;
  box-shadow:0 24px 50px -20px rgba(20,23,25,.45),inset 0 0 0 1px var(--line);opacity:0;transform:translateY(12px);transition:.4s cubic-bezier(.2,.9,.3,1.2)}
.toast.show{opacity:1;transform:none}
.toast .ic{width:40px;height:40px;border-radius:12px;background:var(--acid);color:#141719;display:grid;place-items:center;flex:none}
.toast b{display:block;font:650 14px var(--f-d)}
.toast span{font-size:13px;color:var(--text-2)}
@media (min-width:1000px){.toast{left:-60px;right:40px}}
.stage-tag{position:absolute;top:92px;right:-8px;z-index:4;background:var(--ink);color:var(--on-ink);font:500 11.5px var(--f-m);padding:7px 11px;border-radius:999px;transform:rotate(4deg);letter-spacing:.04em}
.stage-tag b{color:var(--acid);font-weight:500}
@media (min-width:1000px){.stage-tag{right:-44px}}

/* цифры */
.facts{border-block:1px solid var(--line);background:var(--bg-2)}
.facts .wrap{display:grid;grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){.facts .wrap{grid-template-columns:repeat(4,1fr)}}
.fact{padding:26px 16px 24px 0;border-bottom:1px solid var(--line)}
.fact:nth-child(odd){padding-right:16px;border-right:1px solid var(--line)}
.fact:nth-child(even){padding-left:16px}
@media (min-width:860px){.fact{border-bottom:0;border-right:1px solid var(--line);padding:30px 24px!important}.fact:first-child{padding-left:0!important}.fact:last-child{border-right:0}}
.fact:nth-last-child(-n+2){border-bottom:0}
.fact b{display:block;font:780 clamp(32px,5vw,46px)/1 var(--f-d);letter-spacing:-.04em}
.fact span{display:block;margin-top:8px;font-size:14.5px;color:var(--text-2);line-height:1.4}

/* разделы */
section{padding:72px 0}
@media (min-width:1000px){section{padding:112px 0}}
.sec-head{max-width:44em;margin-bottom:40px}
.sec-head h2{font-size:clamp(32px,5.4vw,54px);line-height:1.02;font-weight:760;letter-spacing:-.04em;margin-top:14px}
.sec-head p{margin-top:16px;color:var(--text-2);font-size:clamp(17px,2vw,19px)}
.alt{background:var(--bg-2)}

/* как это работает */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.flow li{position:relative;display:grid;grid-template-columns:56px 1fr;gap:0 16px;padding-bottom:28px}
.flow li::before{content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:repeating-linear-gradient(var(--line-2) 0 6px,transparent 6px 12px)}
.flow li:last-child{padding-bottom:0}
.flow li:last-child::before{display:none}
.node{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2);position:relative;z-index:1;color:var(--text)}
.node svg{width:26px;height:26px}
.flow li.hot .node{background:var(--acid);box-shadow:none;color:#141719}
.flow li.inky .node{background:var(--text);color:var(--bg);box-shadow:none}
.flow .no{font:500 11.5px var(--f-m);color:var(--text-3);letter-spacing:.06em}
.flow h3{font-size:19px;margin:2px 0 6px;letter-spacing:-.02em}
.flow p{color:var(--text-2);font-size:15px}
.chip{display:inline-block;margin-top:10px;padding:6px 10px;border-radius:10px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font:500 12.5px var(--f-m);color:var(--text);letter-spacing:0}
@media (min-width:1040px){
  .flow{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
  .flow li{grid-template-columns:1fr;grid-template-rows:56px 1fr;align-content:stretch;padding:0}
  .flow li>div{display:flex;flex-direction:column;align-items:flex-start}
  .flow li h3{line-height:1.2;min-height:2.4em;display:flex;align-items:flex-end;margin-top:6px}
  .flow li .chip{margin-top:auto}
  .flow li p{margin-bottom:12px}
  .flow li::before{left:64px;right:-18px;top:27px;bottom:auto;width:auto;height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px)}
  .flow li .no{margin-top:18px}
  .flow::after{content:"";position:absolute;top:22px;left:0;width:12px;height:12px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 4px color-mix(in srgb,var(--acid) 30%,transparent);animation:run 7s linear infinite}
}
@keyframes run{0%{left:40px;opacity:0}5%{opacity:1}95%{opacity:1}100%{left:calc(100% - 40px);opacity:0}}
.flow-note{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;font-size:15px;color:var(--text-2)}
.flow-note b{color:var(--text)}

/* голос — тёмный остров */
.island{background:var(--ink);color:var(--on-ink);box-shadow:inset 0 0 0 1px var(--ink-line);border-radius:32px;padding:34px 22px;display:grid;gap:34px;overflow:hidden;position:relative}
.island::after{content:"";position:absolute;right:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(200,255,0,.22),transparent 65%);pointer-events:none}
@media (min-width:920px){.island{grid-template-columns:1.05fr .95fr;padding:64px;gap:56px;align-items:center}}
.island .eyebrow{color:var(--on-ink-2)}
.island h2{font-size:clamp(30px,4.6vw,48px);line-height:1.04;letter-spacing:-.04em;margin-top:14px}
.island p.l{color:var(--on-ink-2);margin-top:16px;font-size:17px;max-width:30em}
.ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.ticks li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--acid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141719' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.vchat{position:relative;z-index:1;display:grid;gap:10px;max-width:400px;width:100%;justify-self:center;font-size:14px;line-height:1.4}
.vb{background:#1f2622;border-radius:18px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--ink-line)}
.vb.me{justify-self:end;background:#34401a;border-bottom-right-radius:6px;display:flex;align-items:center;gap:12px;width:88%}
.play{width:36px;height:36px;border-radius:50%;background:var(--acid);display:grid;place-items:center;flex:none;color:#141719}
.wave{flex:1;display:flex;align-items:center;gap:2px;height:28px}
.wave i{flex:1;background:rgba(245,243,236,.55);border-radius:2px;animation:wv 1.4s ease-in-out infinite}
@keyframes wv{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.vb .dur{font:500 11.5px var(--f-m);color:var(--on-ink-2)}
.vb.bot{border-bottom-left-radius:6px}
.vb.bot q{display:block;margin:6px 0 10px;color:#fff;font-weight:600;quotes:"«" "»"}
.vb .who{font:500 11px var(--f-m);color:var(--on-ink-2);letter-spacing:.06em;text-transform:uppercase}
.vbtns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vbtns span{text-align:center;padding:9px 0;border-radius:11px;background:rgba(245,243,236,.08);font-weight:600;font-size:13.5px}
.vbtns span.on{background:var(--acid);color:#141719}

/* скриншоты */
.shots{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 16px 26px;margin:0 -16px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
@media (min-width:720px){.shots{padding:6px 32px 26px;margin:0 -32px}}
@media (min-width:1240px){.shots{justify-content:center;overflow:visible;margin:0;padding:6px 0 26px}}
.shot{flex:none;width:clamp(214px,64vw,232px);scroll-snap-align:center;margin:0}
.shot .fr{background:var(--ink);border-radius:34px;padding:7px;box-shadow:var(--shadow);transition:transform .3s}
.shot:nth-child(even) .fr{transform:translateY(22px)}
@media (hover:hover){.shot .fr:hover{transform:translateY(-6px)}.shot:nth-child(even) .fr:hover{transform:translateY(16px)}}
.shot img{border-radius:28px;aspect-ratio:390/844;object-fit:cover;object-position:top;width:100%;background:#f5f3ec}
.shot figcaption{margin-top:36px;font-size:14.5px;color:var(--text-2);padding:0 4px}
.shot:nth-child(odd) figcaption{margin-top:16px}
.shot figcaption b{display:block;color:var(--text);font:650 16px var(--f-d);margin-bottom:3px}
.shots-note{font:500 12.5px var(--f-m);color:var(--text-3);margin-top:6px;letter-spacing:.02em}

/* почему мы */
.why{display:grid;gap:14px}
@media (min-width:640px){.why{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.why{grid-template-columns:1.15fr 1fr 1fr}}
@media (min-width:640px) and (max-width:999px){.card.big,.why .card.move{grid-column:1/-1}}
@media (min-width:1000px){.why .card.move{grid-column:1;grid-row:3}}
.card{background:var(--surface);border-radius:var(--r);padding:24px;box-shadow:inset 0 0 0 1px var(--line);position:relative}
.card .ico{width:44px;height:44px;border-radius:14px;background:var(--acid-soft);color:var(--acid-ink);display:grid;place-items:center;margin-bottom:18px}
.card h3{font-size:19px;line-height:1.2;margin-bottom:8px}
.card p{color:var(--text-2);font-size:15.5px}
.card.big{background:var(--acid);color:#141719;box-shadow:none}
.card.big p{color:#2c3a00}
.card.big .ico{background:#141719;color:var(--acid)}
@media (min-width:1000px){.card.big{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between}.card.big h3{font-size:30px;letter-spacing:-.035em}}
.card.big .num{font:800 clamp(64px,9vw,112px)/.9 var(--f-d);letter-spacing:-.06em;margin:18px 0 8px}

.vs{margin-top:44px;background:var(--surface);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.vs table{width:100%;border-collapse:collapse;font-size:14.5px}
.vs th,.vs td{padding:14px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.vs tr:last-child td{border-bottom:0}
.vs thead th{font:500 11.5px var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);background:var(--bg-2)}
.vs thead th.us{background:var(--acid);color:#141719}
.vs td.us{font-weight:600;background:color-mix(in srgb,var(--acid) 9%,transparent)}
.vs td:first-child{color:var(--text-2);width:34%}
@media (max-width:560px){.vs th,.vs td{padding:12px 10px;font-size:13.5px}.vs td:first-child{width:30%}}
.vs-note{font-size:13px;color:var(--text-3);margin-top:12px}

/* сферы */
.spheres{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:900px){.spheres{grid-template-columns:repeat(5,1fr);gap:16px}}
.sph{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:var(--bg-2);margin:0}
.sph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.sph:hover img{transform:scale(1.05)}
.sph figcaption{position:absolute;inset:auto 0 0 0;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(10,12,11,.78));color:#fff}
.sph figcaption b{display:block;font:700 19px var(--f-d);letter-spacing:-.02em}
.sph figcaption span{font-size:13px;opacity:.85;line-height:1.35;display:block;margin-top:3px}
.sph.more{grid-column:span 2}
@media (min-width:900px){.sph.more{grid-column:auto}}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags span{padding:8px 14px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px}

/* тарифы */
.period{display:inline-flex;padding:5px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:28px;gap:4px}
.period button{border:0;background:transparent;color:var(--text-2);font:600 15px var(--f-d);min-height:44px;padding:0 20px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.period button[aria-checked="true"]{background:var(--text);color:var(--bg)}
.period .save{font:500 11.5px var(--f-m);background:var(--acid);color:#141719;padding:3px 7px;border-radius:999px}
.plans{display:grid;gap:14px}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.plan{background:var(--surface);border-radius:28px;padding:28px 24px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column}
.plan.hot{background:var(--ink);color:var(--on-ink);box-shadow:0 30px 60px -30px rgba(20,23,25,.6)}
.plan .pn{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan h3{font-size:24px}
.plan .badge{font:500 11.5px var(--f-m);letter-spacing:.04em;background:var(--acid);color:#141719;padding:5px 9px;border-radius:999px}
.plan .for{color:var(--text-2);font-size:15px;margin-top:6px;min-height:2.8em}
.plan.hot .for{color:var(--on-ink-2)}
.price{margin-top:22px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price b{font:800 52px/1 var(--f-d);letter-spacing:-.05em}
.price span{color:var(--text-2);font-size:15px}
.plan.hot .price span{color:var(--on-ink-2)}
.price s{color:var(--text-3);font-size:16px}
.bill{margin-top:8px;font:500 13px var(--f-m);color:var(--text-2);min-height:1.5em;letter-spacing:.01em}
.plan.hot .bill{color:var(--on-ink-2)}
.bill em{font-style:normal;color:var(--acid-ink);background:var(--acid-soft);padding:1px 6px;border-radius:6px}
.plan.hot .bill em{color:#141719;background:var(--acid)}
.feats{list-style:none;margin:22px 0 26px;padding:22px 0 0;border-top:1px solid var(--line);display:grid;gap:11px;font-size:15px;flex:1}
.plan.hot .feats{border-color:var(--ink-line)}
.feats li{display:flex;gap:10px}
.feats li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8ff00' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.plan.hot .feats li::before{background-color:var(--acid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141719' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.feats li.plus{font-weight:600}
.feats a{text-decoration-color:var(--acid);text-decoration-thickness:2px;text-underline-offset:3px}
.plan .btn{width:100%}
.plan .plan-trial{display:block;text-align:center;margin-top:10px;font-size:14px;color:var(--text-2)}
.plan .plan-trial:hover{color:var(--text)}
.plan.hot .plan-trial{color:var(--on-ink-2)}
.plan.hot .plan-trial:hover{color:var(--on-ink)}
.plan.hot .btn-line{color:var(--on-ink);box-shadow:inset 0 0 0 1.5px var(--ink-line)}
.plans-note{margin-top:18px;font-size:14px;color:var(--text-2);max-width:60em}

/* пробный период */
.trial{position:relative;overflow:hidden;background:var(--acid);color:#141719;border-radius:36px;padding:40px 22px;text-align:center}
@media (min-width:900px){.trial{padding:80px 64px}}
.trial::before{content:"14";position:absolute;right:-20px;bottom:-70px;font:850 clamp(200px,34vw,420px)/1 var(--f-d);letter-spacing:-.08em;color:rgba(20,23,25,.07);pointer-events:none}
.trial .eyebrow{color:#2c3a00}
.trial .eyebrow::before{background:#141719;box-shadow:none}
.trial h2{position:relative;font-size:clamp(34px,6vw,68px);line-height:1;letter-spacing:-.045em;margin:16px auto 0;max-width:12em}
.trial p{position:relative;margin:18px auto 0;font-size:18px;max-width:34em;color:#2c3a00}
.trial .cta{justify-content:center;position:relative}
.trial .btn-ink{background:#141719;color:#f5f3ec}
.trial .btn-line{color:#141719;box-shadow:inset 0 0 0 1.5px rgba(20,23,25,.35)}
.trial .steps3{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:26px;font:500 13px var(--f-m)}

/* отзывы */
.revs{display:grid;gap:14px}
@media (min-width:760px){.revs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.revs{grid-template-columns:repeat(4,1fr)}}
.rev{background:var(--surface);border-radius:var(--r);padding:24px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:18px;margin:0}
.rev blockquote{margin:0;font-size:15.5px;line-height:1.5;flex:1}
.rev blockquote::before{content:"“";display:block;font:800 44px/0.6 var(--f-d);color:var(--acid-ink);margin-bottom:12px}
.rev figcaption{display:flex;gap:12px;align-items:center}
.rev .ini{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:700 16px var(--f-d);background:var(--text);color:var(--bg);flex:none}
.rev figcaption b{display:block;font:650 15px var(--f-d)}
.rev figcaption span{font-size:13px;color:var(--text-2)}

/* пример лэндинга */
.landing{display:grid;gap:28px;align-items:center}
@media (min-width:920px){.landing{grid-template-columns:.9fr 1.1fr;gap:56px}}
.browser{border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);text-decoration:none;display:block;transition:transform .3s}
.browser:hover{transform:translateY(-4px) rotate(-.4deg)}
.bbar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.bbar i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.bbar span{margin-left:10px;font:500 12px var(--f-m);color:var(--text-2);background:var(--surface);padding:4px 10px;border-radius:8px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bprev{position:relative;aspect-ratio:16/10;background:#222 url(../img/dm-hero.webp) center/cover}
.bprev::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,20,.72),rgba(20,20,20,.1))}
.bprev div{position:absolute;z-index:1;left:7%;top:50%;transform:translateY(-50%);color:#fff;max-width:62%}
.bprev small{font:500 clamp(9px,1.4vw,12px) var(--f-m);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.bprev b{display:block;font:750 clamp(18px,3.4vw,34px)/1.02 var(--f-d);letter-spacing:-.035em;margin:8px 0 12px}
.bprev em{font-style:normal;display:inline-block;background:#c0643f;color:#fff;border-radius:999px;padding:6px 12px;font:600 clamp(10px,1.4vw,13px) var(--f-d)}
.swatches{display:flex;gap:8px;margin-top:20px}
.swatches i{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

/* вопросы */
.faq-grid{display:grid;gap:36px}
@media (min-width:1000px){.faq-grid{grid-template-columns:.8fr 1.2fr;gap:64px}}
.faq{display:grid;gap:10px}
.faq details{background:var(--surface);border-radius:20px;padding:0 20px;box-shadow:inset 0 0 0 1px var(--line)}
.faq details[open]{box-shadow:inset 0 0 0 1.5px var(--line-2)}
.faq summary{cursor:pointer;list-style:none;padding:19px 0;font:620 17px/1.3 var(--f-d);display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--text-2)}

/* заявка перед подвалом — уходит в send.php сайта агентства (почта + Telegram + CRM) */
.help{display:grid;gap:32px;background:var(--surface);border-radius:32px;padding:32px 20px;box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:920px){.help{grid-template-columns:.9fr 1.1fr;gap:56px;padding:56px;align-items:start}}
.help h2{font-size:clamp(30px,4.6vw,48px);line-height:1.04;letter-spacing:-.04em;margin-top:14px}
.help .lead{margin-top:16px;color:var(--text-2);font-size:18px;max-width:28em}
.help .alt-ways{margin-top:22px;font-size:15px;color:var(--text-2)}
.lf{display:grid;gap:16px}
.lf label.f{display:grid;gap:6px;font:560 14px var(--f-d)}
.lf .opt{font-weight:400;color:var(--text-3)}
.lf input[type=text],.lf input[type=tel],.lf textarea{width:100%;font:16px/1.4 var(--f-b);color:var(--text);background:var(--bg);border:0;border-radius:14px;padding:14px 16px;min-height:52px;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.lf textarea{min-height:96px;resize:vertical}
.lf input:focus-visible,.lf textarea:focus-visible{outline:3px solid var(--acid-ink);outline-offset:1px}
.lf fieldset{border:0;margin:0;padding:0;min-width:0}
.lf legend{font:560 14px var(--f-d);padding:0;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;font:560 15px var(--f-d);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background .15s}
.chips input:checked+span{background:var(--acid);color:#141719;box-shadow:none}
.chips input:focus-visible+span{outline:3px solid var(--acid-ink);outline-offset:2px}
.lf .consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-2)}
.lf .consent input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--acid-ink)}
.lf .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lf .btn{justify-self:start;border:0;cursor:pointer;font:620 16px var(--f-d)}
.lf .btn[disabled]{opacity:.6;cursor:progress;transform:none}
.lf-msg{font-size:15px;min-height:1.4em}
.lf-msg.err{color:#b3261e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lf-msg.err{color:#ff8a80}}
:root[data-theme="dark"] .lf-msg.err{color:#ff8a80}
.lf-ok{display:grid;gap:10px;padding:28px;border-radius:24px;background:var(--acid-soft)}
.lf-ok b{font:700 22px/1.2 var(--f-d)}
.lf-ok p{color:var(--text-2)}
.lf[hidden],.lf-ok[hidden],.cookie-note[hidden]{display:none}

/* уведомление о cookie — как на unixai.ru (CookieNotice.astro): «Принять» / «Отказаться», выбор в localStorage */
.cookie-note{position:fixed;left:20px;bottom:20px;z-index:60;max-width:420px;display:flex;flex-direction:column;gap:12px;background:var(--surface);color:var(--text);
  border-radius:18px;padding:20px 22px;box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -30px rgba(20,23,25,.45);
  opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.cookie-note.on{opacity:1;transform:none;pointer-events:auto}
.cookie-note .ct{font:620 15px var(--f-d)}
.cookie-note p{font-size:13.5px;line-height:1.5;color:var(--text-2)}
.cookie-note a{color:var(--text);text-underline-offset:2px}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.cookie-actions .btn{min-height:44px;padding:0 20px;font:620 15px var(--f-d);border:0;cursor:pointer}
@media (max-width:520px){.cookie-note{left:12px;right:12px;bottom:12px;max-width:none}.cookie-actions .btn{flex:1 1 0}}
footer button.linkish{background:none;border:0;padding:0;font:inherit;color:var(--on-ink);text-decoration:underline;text-decoration-color:rgba(245,243,236,.3);text-underline-offset:3px;cursor:pointer}

/* подвал */
footer{background:var(--ink);color:var(--on-ink);padding:56px 0 40px;margin-top:0}
footer .wrap{display:grid;gap:32px}
@media (min-width:860px){footer .wrap{grid-template-columns:1.2fr 1fr 1fr}}
footer .logo{color:var(--on-ink)}
footer p,footer li{color:var(--on-ink-2);font-size:14.5px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{color:var(--on-ink);text-decoration-color:rgba(245,243,236,.3);text-underline-offset:3px}
footer h4{margin:0 0 14px;font:500 12px var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-2)}
.legal{grid-column:1/-1;border-top:1px solid var(--ink-line);padding-top:22px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:13px;color:var(--on-ink-2)}

/* появление при прокрутке */
.rv{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.pre{opacity:0;transform:translateY(22px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv.pre{opacity:1;transform:none}
}

/* ═══════════ Линейка (с 30.09.2026): общая навигация, главная и страницы «для салона» и «для сети» ═══════════ */

/* навигация: активная страница, мобильное меню */
.nav a[aria-current="page"]{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--acid);text-decoration-thickness:3px;text-underline-offset:8px}
.nav .sep{width:1px;height:18px;background:var(--line-2);align-self:center}
.burger{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--text);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line)}
.burger svg{width:20px;height:20px}
@media (min-width:1080px){.burger{display:none}}
.mnav{position:fixed;inset:64px 0 auto 0;z-index:19;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(20,23,25,.45);padding:12px 16px 20px;display:grid;gap:4px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:.2s}
.mnav.on{transform:none;opacity:1;visibility:visible}
.mnav a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 14px;border-radius:14px;text-decoration:none;font:600 17px var(--f-d)}
.mnav a small{font:500 12px var(--f-m);color:var(--text-3);letter-spacing:.02em}
.mnav a[aria-current="page"]{background:var(--acid-soft)}
.mnav hr{border:0;border-top:1px solid var(--line);margin:6px 0}
@media (min-width:1080px){.mnav{display:none}}

/* переключатель продукта на внутренних страницах */
.pswitch{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.pswitch a{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;text-decoration:none;font:600 14px var(--f-d);color:var(--text-2)}
.pswitch a[aria-current="page"]{background:var(--text);color:var(--bg)}
.pswitch a:not([aria-current]):hover{color:var(--text)}
.hero .pswitch{display:flex;width:max-content;margin-bottom:20px}

/* метка статуса */
.status{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--f-m);letter-spacing:.04em;padding:6px 11px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--text-2);white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%;background:#2fbf71;box-shadow:0 0 0 3px rgba(47,191,113,.2)}
.status.soon i{background:#f2a33a;box-shadow:0 0 0 3px rgba(242,163,58,.22)}

/* главная: первый экран с тремя уровнями */
.levels{position:relative;height:520px;max-width:540px;width:100%;margin:0 auto}
@media (max-width:560px){.levels{height:450px}}
.lv{position:absolute;border-radius:26px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);background:var(--surface);overflow:hidden;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.lv-tag{position:absolute;z-index:3;font:500 11px var(--f-m);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--ink);color:var(--on-ink);white-space:nowrap}
.lv-tag b{color:var(--acid);font-weight:500}
.lv-net{right:0;top:0;width:74%;height:250px;transform:rotate(3deg)}
.lv-salon{left:0;top:196px;width:80%;height:300px;padding-top:40px;transform:rotate(-2.5deg);z-index:1}
.lv-master{right:4%;bottom:0;width:230px;height:236px;z-index:2;background:var(--chat-bg);transform:rotate(2.5deg)}
@media (hover:hover){.levels:hover .lv-net{transform:rotate(4deg) translate(10px,-8px)}.levels:hover .lv-salon{transform:rotate(-3.5deg) translate(-10px,0)}.levels:hover .lv-master{transform:rotate(3.5deg) translate(6px,8px)}}
.lv-net .lv-tag{top:14px;right:14px}.lv-salon .lv-tag{top:10px;left:12px}.lv-master .lv-tag{top:12px;left:12px}
@media (max-width:560px){.lv-net{width:90%;height:220px}.lv-salon{top:170px;width:94%;height:270px}.lv-master{width:190px;height:206px;right:0}.lv-salon .day{--row:24px}}

/* мини-дашборд сети */
.mini-dash{padding:50px 18px 18px;display:grid;gap:12px;align-content:start;height:100%}
.md-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.md-row b{font:780 28px/1 var(--f-d);letter-spacing:-.04em}
.md-row span{font:500 11px var(--f-m);color:var(--text-2);letter-spacing:.04em;text-transform:uppercase}
.md-bars{display:grid;gap:9px}
.md-bar{display:grid;grid-template-columns:92px 1fr 58px;gap:10px;align-items:center;font-size:12.5px}
.md-bar em{font-style:normal;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-bar i{display:block;height:10px;border-radius:6px;background:var(--bg-2);position:relative;overflow:hidden}
.md-bar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:6px;background:var(--text);animation:grow 1.4s cubic-bezier(.2,.8,.2,1) both}
.md-bar:first-child i::after{background:var(--acid-ink)}
.md-bar small{font:500 11.5px var(--f-m);text-align:right}
@keyframes grow{from{width:0}}

/* экран дня салона (мини и полный) */
.day{display:grid;grid-template-columns:40px repeat(var(--cols,3),minmax(0,1fr));grid-template-rows:auto 1fr;font-size:11px;position:relative}
.day .hd{font:600 12px var(--f-d);padding:8px 6px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;min-width:0}
.day .hd .av{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 10px var(--f-d);color:#141719}
.day .hd span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day .hd small{display:block;font:500 10px var(--f-m);color:var(--text-3);font-weight:500}
.day .tms{display:grid;grid-auto-rows:var(--row,34px);border-right:1px solid var(--line)}
.day .tms span{font:500 10px var(--f-m);color:var(--text-3);padding:3px 6px 0 0;text-align:right}
.day .col{position:relative;border-right:1px solid var(--line);background:repeating-linear-gradient(var(--line) 0 1px,transparent 1px var(--row,34px))}
.day .col:last-child{border-right:0}
.appt{position:absolute;left:4px;right:4px;top:calc(var(--s) * var(--row,34px) + 2px);height:calc(var(--h) * var(--row,34px) - 4px);border-radius:9px;padding:5px 7px;font-size:10.5px;line-height:1.25;overflow:hidden;color:#141719;box-shadow:inset 3px 0 0 rgba(20,23,25,.3)}
.appt b{display:block;font:650 11px var(--f-d)}
.appt.c1{background:#e8f7b4}.appt.c2{background:#f6d9df}.appt.c3{background:#d7e6fb}.appt.c4{background:#f8e3c4}.appt.c5{background:#dcefe2}
.appt.new{background:var(--acid);box-shadow:0 8px 20px -8px rgba(120,160,0,.9);animation:drop 5s cubic-bezier(.2,.9,.3,1.2) infinite}
@keyframes drop{0%,10%{opacity:0;transform:translateY(-10px) scale(.96)}18%,90%{opacity:1;transform:none}100%{opacity:0}}
.appt.free{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--text-3)}
.appt.done{opacity:.55}
.now-line{position:absolute;left:40px;right:0;top:var(--t);height:2px;background:#e5484d;z-index:2}
.now-line::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:#e5484d}
.lv-salon .day{--row:27px;margin-top:0}

/* мини-чат в карточке мастера */
.mchat{padding:42px 10px 10px;display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.35;height:100%;justify-content:flex-end}
.mchat .msg{animation:none;max-width:92%;padding:6px 9px;border-radius:13px}
.mchat .kbd{grid-template-columns:repeat(2,1fr);max-width:100%;animation:none}
.mchat .kbd span{font-size:11.5px;padding:6px 0}

/* карточки продуктов */
.lineup{display:grid;gap:16px}
@media (min-width:980px){.lineup{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.prod{position:relative;display:flex;flex-direction:column;border-radius:30px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;text-decoration:none;color:inherit;transition:transform .3s,box-shadow .3s}
@media (hover:hover){.prod:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1.5px var(--line-2),0 40px 70px -40px rgba(20,23,25,.45)}}
.prod .pv{position:relative;height:220px;overflow:hidden;background:var(--bg-2)}
.prod .pv img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
@media (hover:hover){.prod:hover .pv img{transform:scale(1.05)}}
.prod .pv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,11,.1),transparent 30%,transparent 50%,rgba(10,12,11,.6))}
.prod .pv .lvl{position:absolute;left:20px;bottom:16px;z-index:1;color:#fff;font:500 12px var(--f-m);letter-spacing:.08em;text-transform:uppercase}
.prod .pv .status{position:absolute;left:16px;top:16px;z-index:1}
.prod .pb{padding:24px 24px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.prod h3{font-size:30px;letter-spacing:-.04em;line-height:1}
.prod .who{color:var(--text-2);font-size:15.5px}
.prod .from{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.prod .from b{font:800 40px/1 var(--f-d);letter-spacing:-.05em}
.prod .from span{color:var(--text-2);font-size:14.5px}
.prod ul{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:9px;font-size:15px;flex:1;align-content:start}
.prod li{display:flex;gap:10px}
.prod li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8ff00' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.prod .go{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding:0 20px;min-height:52px;border-radius:999px;font:620 15.5px var(--f-d);background:var(--bg-2)}
.prod h3 a{color:inherit;text-decoration:none}
.prod .stretch::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.prod .acts{display:flex;flex-direction:column;gap:8px;margin-top:6px;position:relative;z-index:2}
.prod .acts .go{margin-top:0;text-decoration:none;color:inherit}
.prod .go2{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:999px;font:600 15px var(--f-d);text-decoration:none;color:inherit;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.prod .go2:hover{box-shadow:inset 0 0 0 1.5px var(--text)}
.prod.hot .go2{box-shadow:inset 0 0 0 1.5px var(--on-ink-2);color:var(--on-ink)}
.prod.hot .go2:hover{box-shadow:inset 0 0 0 1.5px var(--on-ink)}
.prod .go svg{transition:transform .2s}
.prod .go:hover svg{transform:translateX(4px)}
.prod.hot{background:var(--ink);color:var(--on-ink);box-shadow:0 30px 60px -30px rgba(20,23,25,.6)}
.prod.hot .who,.prod.hot .from span{color:var(--on-ink-2)}
.prod.hot ul{border-color:var(--ink-line)}
.prod.hot li::before{background-color:var(--acid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141719' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.prod.hot .go{background:var(--acid);color:#141719}

/* преимущества — сетка-бенто */
.bento{display:grid;gap:14px}
@media (min-width:700px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.bento{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card .big-n.q{font-size:clamp(40px,4.6vw,60px);letter-spacing:-.05em;line-height:.95}
.bento .card.wide{grid-column:span 2}
@media (max-width:699px){.bento .card.wide{grid-column:auto}}
.bento .card.tall{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between}
@media (max-width:1039px){.bento .card.tall{grid-row:auto}}
.card.ink{background:var(--ink);color:var(--on-ink);box-shadow:inset 0 0 0 1px var(--ink-line)}
.card.ink p{color:var(--on-ink-2)}
.card.ink .ico{background:var(--acid);color:#141719}
.card.acid{background:var(--acid);color:#141719;box-shadow:none}
.card.acid p{color:#2c3a00}
.card.acid .ico{background:#141719;color:var(--acid)}
.card .big-n{display:block;font:800 clamp(56px,7vw,88px)/.9 var(--f-d);letter-spacing:-.06em;margin:14px 0 12px}
.vs td.no{color:var(--text-2)}

/* рост: мастер → салон → сеть */
.grow{display:grid;gap:14px;position:relative}
@media (min-width:900px){.grow{grid-template-columns:repeat(3,1fr);gap:0}}
.step{position:relative;padding:26px 24px 26px 28px;border-radius:26px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:900px){
  .step{border-radius:0;box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line),inset -1px 0 0 var(--line)}
  .step:first-child{border-radius:26px 0 0 26px;box-shadow:inset 0 0 0 1px var(--line)}
  .step:last-child{border-radius:0 26px 26px 0;box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line),inset -1px 0 0 var(--line)}
  .step+.step::before{content:"";position:absolute;left:-17px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;background:var(--acid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141719' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;z-index:1;box-shadow:0 0 0 5px var(--bg)}
  .step+.step{padding-left:36px}
}
.step .no{font:500 12px var(--f-m);color:var(--text-3);letter-spacing:.06em;text-transform:uppercase}
.step h3{font-size:24px;margin:8px 0 8px}
.step p{color:var(--text-2);font-size:15px}
.keep{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.keep b{font:600 15px var(--f-d);margin-right:6px}
.keep span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--acid-soft);color:var(--acid-ink);font:600 14px var(--f-d)}

/* свои решения — тёмный остров с плитками */
.custom{background:var(--ink);color:var(--on-ink);border-radius:36px;padding:36px 20px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--ink-line)}
@media (min-width:920px){.custom{padding:64px}}
.custom::before{content:"";position:absolute;right:-160px;top:-220px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(200,255,0,.18),transparent 65%);pointer-events:none}
.custom .eyebrow{color:var(--on-ink-2)}
.custom h2{font-size:clamp(32px,5vw,54px);line-height:1.02;letter-spacing:-.04em;margin-top:14px;max-width:15em;position:relative}
.custom .l{color:var(--on-ink-2);margin-top:16px;font-size:18px;max-width:40em;position:relative}
.tiles{position:relative;display:grid;gap:10px;margin-top:36px}
@media (min-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{padding:20px;border-radius:20px;background:rgba(245,243,236,.05);box-shadow:inset 0 0 0 1px var(--ink-line);transition:background .2s}
.tile:hover{background:rgba(245,243,236,.09)}
.tile .ico{width:40px;height:40px;border-radius:12px;background:rgba(200,255,0,.12);color:var(--acid);display:grid;place-items:center;margin-bottom:14px}
.tile b{display:block;font:650 16.5px/1.25 var(--f-d);margin-bottom:6px}
.tile p{color:var(--on-ink-2);font-size:14px;line-height:1.45}
.howto{position:relative;display:grid;gap:14px;margin:32px 0 0;padding:0;counter-reset:h}
@media (min-width:860px){.howto{grid-template-columns:repeat(4,1fr)}}
.howto li{list-style:none;counter-increment:h;display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--on-ink-2);padding:16px 0 0;border-top:1px solid var(--ink-line)}
.howto li::before{content:counter(h,decimal-leading-zero);font:500 12px var(--f-m);color:var(--acid);padding-top:3px}
.howto li b{display:block;color:var(--on-ink);font:620 15.5px var(--f-d);margin-bottom:2px}
.custom .cta{position:relative}
.custom .btn-line{color:var(--on-ink);box-shadow:inset 0 0 0 1.5px var(--ink-line)}

/* сводная цен на главной */
.pgrid{display:grid;gap:14px}
@media (min-width:980px){.pgrid{grid-template-columns:repeat(3,1fr)}}
.pcol{background:var(--surface);border-radius:28px;padding:26px 24px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column}
.pcol.hot{background:var(--ink);color:var(--on-ink);box-shadow:0 30px 60px -30px rgba(20,23,25,.6)}
.pcol h3{font-size:26px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pcol .sub{color:var(--text-2);font-size:14.5px;margin:6px 0 12px}
.pcol.hot .sub{color:var(--on-ink-2)}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.pcol.hot .prow{border-color:var(--ink-line)}
.prow span{font-size:15px}
.prow span small{display:block;color:var(--text-3);font-size:12.5px}
.pcol.hot .prow span small{color:var(--on-ink-2)}
.prow b{font:760 22px var(--f-d);letter-spacing:-.03em;white-space:nowrap}
.prow b small{font:500 12px var(--f-m);color:var(--text-2);letter-spacing:0;margin-left:3px}
.pcol.hot .prow b small{color:var(--on-ink-2)}
.pcol .btn{margin-top:auto;width:100%}
.pcol .gap{flex:1;min-height:18px}
.pcol.hot .btn-line{color:var(--on-ink);box-shadow:inset 0 0 0 1.5px var(--ink-line)}
.addon{margin-top:14px;display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between;padding:18px 22px;border-radius:22px;background:var(--acid-soft);font-size:15px}
.addon b{font-family:var(--f-d)}

/* внутренние: окно браузера с экраном дня */
.win{border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.win-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.win-head b{font:700 15px var(--f-d);white-space:nowrap}
.win-head b small{font:500 11px var(--f-m);color:var(--text-3);margin-left:6px}
.win-head .seg{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--bg-2);font:600 11.5px var(--f-d)}
.win-head .seg span{padding:5px 10px;border-radius:999px;color:var(--text-2);white-space:nowrap}
.win-head .seg span.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.win .day{--row:36px}
@media (max-width:560px){.win .day{--row:31px;font-size:10px}.win .appt{font-size:9.5px;padding:4px 5px}.win .appt b{font-size:10px}.win-head .seg span:nth-child(n+3){display:none}}
.hero-win{position:relative;max-width:580px;width:100%;margin:0 auto}
.hero-win .toast{bottom:-34px}
@media (min-width:1000px){.hero-win .toast{left:-44px;right:auto;width:330px}}

/* роли */
.roles{display:grid;gap:14px}
@media (min-width:900px){.roles{grid-template-columns:repeat(var(--n,3),1fr)}}
.role{background:var(--surface);border-radius:26px;padding:24px;box-shadow:inset 0 0 0 1px var(--line)}
.role .rh{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.role .rh .av{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--acid-soft);color:var(--acid-ink);flex:none}
.role .rh b{display:block;font:700 19px var(--f-d)}
.role .rh span{font-size:13px;color:var(--text-2)}
.role ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px}
.role li{display:flex;gap:10px;align-items:flex-start}
.role li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--acid-ink);margin-top:8px}
.role li.x{color:var(--text-3)}
.role li.x::before{background:var(--line-2)}
.role.ink{background:var(--ink);color:var(--on-ink);box-shadow:inset 0 0 0 1px var(--ink-line)}
.role.ink .rh span,.role.ink li.x{color:var(--on-ink-2)}
.role.ink .rh .av{background:var(--acid);color:#141719}
.role.ink li::before{background:var(--acid)}
.role.ink li.x::before{background:var(--ink-line)}

/* функции — сетка с иконками */
.feat-grid{display:grid;gap:14px}
@media (min-width:700px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.feat-grid{grid-template-columns:repeat(3,1fr)}}
.fg{display:flex;gap:16px;padding:22px;border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.fg .ico{flex:none;width:44px;height:44px;border-radius:14px;background:var(--acid-soft);color:var(--acid-ink);display:grid;place-items:center}
.fg b{display:block;font:650 17px/1.25 var(--f-d);margin-bottom:6px}
.fg p{color:var(--text-2);font-size:15px}
.fg .when{display:inline-block;margin-top:10px;font:500 11.5px var(--f-m);letter-spacing:.04em;padding:4px 8px;border-radius:8px;background:var(--bg-2);color:var(--text-2)}
.fg .when.mod{background:var(--acid);color:#141719}

/* дорожная карта запуска */
.road{display:grid;gap:14px}
@media (min-width:900px){.road{grid-template-columns:repeat(3,1fr)}}
.rd{position:relative;padding:26px 24px;border-radius:26px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.rd.now{background:var(--acid);color:#141719;box-shadow:none}
.rd.now li{color:#2c3a00}
.rd .no{font:500 12px var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.rd.now .no{color:#2c3a00}
.rd h3{font-size:22px;margin:8px 0 12px}
.rd ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px;color:var(--text-2)}
.rd li{display:flex;gap:10px}
.rd li::before{content:"—";color:var(--text-3)}
.rd.now li::before{color:#2c3a00}
.road-note{margin-top:16px;font-size:14px;color:var(--text-3)}

/* калькулятор цены */
.calc{display:grid;gap:26px;background:var(--surface);border-radius:32px;padding:28px 22px;box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:920px){.calc{grid-template-columns:1.1fr .9fr;padding:48px;gap:48px;align-items:center}}
.calc label{display:block;font:600 17px var(--f-d)}
.calc .cnt{display:flex;align-items:baseline;gap:10px;margin:10px 0 14px}
.calc .cnt b{font:800 72px/1 var(--f-d);letter-spacing:-.05em;min-width:1.3em}
.calc .cnt span{color:var(--text-2);font-size:17px}
.calc input[type=range]{width:100%;accent-color:var(--acid-ink);height:32px;cursor:pointer;margin:0}
.ticks-row{display:flex;justify-content:space-between;font:500 11.5px var(--f-m);color:var(--text-3);margin-top:2px}
.steps4{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:24px}
@media (min-width:560px){.steps4{grid-template-columns:repeat(4,1fr)}}
.steps4 button{border:0;cursor:pointer;text-align:left;padding:12px 14px;border-radius:16px;background:var(--bg-2);color:var(--text);font:inherit;box-shadow:inset 0 0 0 1px var(--line);transition:background .2s;min-height:44px}
.steps4 button small{display:block;font:500 11.5px var(--f-m);color:var(--text-2)}
.steps4 button b{font:760 18px var(--f-d);letter-spacing:-.03em}
.steps4 button.on{background:var(--ink);color:var(--on-ink);box-shadow:none}
.steps4 button.on small{color:var(--on-ink-2)}
.calc .period{margin:0 0 22px}
.quote{background:var(--ink);color:var(--on-ink);border-radius:26px;padding:28px 24px;display:grid;gap:8px;box-shadow:0 30px 60px -30px rgba(20,23,25,.6)}
.quote .q-n{font:500 12px var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink-2)}
.quote .q-p{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.quote .q-p b{font:800 clamp(48px,7vw,68px)/1 var(--f-d);letter-spacing:-.05em}
.quote .q-p span{color:var(--on-ink-2)}
.quote .q-b{font:500 13px var(--f-m);color:var(--on-ink-2);min-height:1.5em}
.quote .q-b em{font-style:normal;background:var(--acid);color:#141719;padding:1px 6px;border-radius:6px}
.quote ul{list-style:none;margin:10px 0 16px;padding:16px 0 0;border-top:1px solid var(--ink-line);display:grid;gap:9px;font-size:14.5px}
.quote li{display:flex;gap:10px}
.quote li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;background:var(--acid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141719' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}
.quote .btn{width:100%}

/* сеть: филиалы */
.branches{display:grid;gap:8px;padding:14px}
.br{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:16px;background:var(--bg-2)}
.br .pin{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--text);color:var(--acid)}
.br .pin svg{width:18px;height:18px}
.br b{display:block;font:650 14px var(--f-d)}
.br span{font-size:12px;color:var(--text-2)}
.br small{font:500 12px var(--f-m);white-space:nowrap;text-align:right}
.br small i{display:block;font-style:normal;color:var(--text-3);font-size:10.5px}
.br.on{background:var(--acid);color:#141719}
.br.on span,.br.on small i{color:#2c3a00}
.br.on .pin{background:#141719;color:var(--acid)}
.net-sum{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.net-sum div{padding:14px;border-right:1px solid var(--line)}
.net-sum div:last-child{border-right:0}
.net-sum b{display:block;font:780 24px/1 var(--f-d);letter-spacing:-.04em}
.net-sum span{font:500 10.5px var(--f-m);color:var(--text-2);letter-spacing:.04em;text-transform:uppercase}
@media (max-width:480px){.net-sum b{font-size:19px}}

/* заявка на подключение: дополнительные поля */
.lf .two{display:grid;gap:16px}
@media (min-width:560px){.lf .two{grid-template-columns:1fr 1fr}}
.lf select{width:100%;font:16px/1.4 var(--f-b);color:var(--text);background-color:var(--bg);border:0;border-radius:14px;padding:14px 40px 14px 16px;min-height:52px;box-shadow:inset 0 0 0 1.5px var(--line-2);appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.lf select:focus-visible{outline:3px solid var(--acid-ink);outline-offset:1px}
.help .perks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;font-size:15.5px}
.help .perks li{display:flex;gap:12px;align-items:flex-start}
.help .perks li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--acid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141719' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}

/* перекрёстная ссылка на соседний продукт */
.upsell{display:grid;gap:20px;align-items:center;padding:30px 24px;border-radius:30px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:860px){.upsell{grid-template-columns:1fr auto;padding:40px 48px}}
.upsell h3{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.035em;line-height:1.08}
.upsell p{color:var(--text-2);margin-top:10px;max-width:40em}
.island .md-bar i::after{background:var(--acid)}
.island .md-bar small{color:var(--on-ink)}
.calc .cnt b{min-width:0}
.win .md-bar{grid-template-columns:124px 1fr 48px}
.burger,.theme,.enter{flex:none}
/* «Войти» в кабинет (С30б). Шапка заполнена впритык (замер по всем страницам 03.10.2026): до 560px — только первым
   пунктом меню; 560 — круглая иконка, как тема; 640 — с подписью; 1360 (появляются якорные ссылки .loc) — снова иконка;
   1520 — с подписью. Якорные ссылки поэтому с 1360, а не с 1280. */
.enter{display:none;align-items:center;justify-content:center;gap:7px;width:40px;height:40px;border-radius:999px;color:var(--text);text-decoration:none;font-size:14.5px;font-weight:600;box-shadow:inset 0 0 0 1.5px var(--line)}
.enter svg{width:19px;height:19px}
.enter span{display:none}
.enter:hover{box-shadow:inset 0 0 0 1.5px var(--line-2)}
@media (min-width:560px){.enter{display:inline-flex}}
@media (min-width:640px) and (max-width:1359px),(min-width:1520px){.enter{width:auto;padding:0 15px}.enter span{display:inline}}
.top .btn{flex:none}
.hero .wrap>*{min-width:0}
@media (max-width:560px){.hero-win .toast{left:-6px;right:-6px}.win .day .hd .av{display:none}.win .bbar span{font-size:11px}}
@media (max-width:400px){.top .wrap{gap:8px}.top .btn{padding:0 13px}.logo{font-size:19px}}
/* роли: чего роль не видит — крестиком */
.role li.x::before{width:14px;height:14px;margin-top:5px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d0453a' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/14px no-repeat}
.role.ink li.x::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a70' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/14px no-repeat}

/* ═══ Страница «Решения под задачу» (resheniya/, С28) ═══ */
/* первый экран: карточка задачи с этапами */
.brief .rows{display:grid;gap:8px;padding:14px 14px 40px}
.bi{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:16px;background:var(--bg-2)}
.bi .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.bi .ico svg{width:20px;height:20px}
.bi b{display:block;font:650 14.5px/1.25 var(--f-d)}
.bi span{font-size:12.5px;color:var(--text-2)}
.bi em{font:500 11px var(--f-m);font-style:normal;letter-spacing:.04em;padding:4px 8px;border-radius:8px;white-space:nowrap;background:var(--surface);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line)}
.bi em.ok{background:var(--acid);color:#141719;box-shadow:none}
.bi em.go{background:var(--text);color:var(--bg);box-shadow:none}
.brief .sum{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:14px 16px 0;font:500 12px var(--f-m);color:var(--text-2);letter-spacing:.02em}
.brief .sum b{font:700 14px var(--f-d);color:var(--text);letter-spacing:0}
@media (max-width:420px){.bi{grid-template-columns:1fr auto}.bi .ico{display:none}}

/* направления: развёрнутые карточки */
.sol-grid{display:grid;gap:14px}
@media (min-width:760px){.sol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sol{display:flex;flex-direction:column;padding:26px 24px;border-radius:26px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.sol .sh{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.sol .ico{flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--acid-soft);color:var(--acid-ink)}
.sol h3{font-size:21px;line-height:1.15;letter-spacing:-.025em}
.sol>p{color:var(--text-2);font-size:15.5px}
.sol ul{list-style:none;margin:14px 0 20px;padding:0;display:grid;gap:8px;font-size:15px}
.sol li{display:flex;gap:10px;align-items:flex-start}
.sol li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--acid-ink);margin-top:8px}
.sol .need{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--text-2)}
.sol .need b{color:var(--text);font-weight:600}
.sol.ink{background:var(--ink);color:var(--on-ink);box-shadow:inset 0 0 0 1px var(--ink-line)}
.sol.ink>p,.sol.ink .need{color:var(--on-ink-2)}
.sol.ink .need{border-color:var(--ink-line)}
.sol.ink .need b,.sol.ink .need a{color:var(--on-ink)}
.sol.ink .ico{background:var(--acid);color:#141719}
.sol.ink li::before{background:var(--acid)}
.sol .tag{display:inline-block;margin-top:6px;font:500 11.5px var(--f-m);letter-spacing:.04em;padding:4px 8px;border-radius:8px;background:var(--acid);color:#141719}

/* сайт салона или сети — отдельная работа */
.island .browser{position:relative;z-index:1;box-shadow:0 40px 80px -40px rgba(0,0,0,.8),inset 0 0 0 1px var(--ink-line);background:#1a1f1c}
.island .browser:hover{transform:none}
.island .bbar{background:#151a17;border-color:var(--ink-line)}
.island .bbar i{background:rgba(245,243,236,.2)}
.island .bbar span{background:#0f1211;color:var(--on-ink-2)}
.bprev.salon{background-image:url(../img/ln-salon-800.webp)}
.bprev.salon em{background:#f5f3ec;color:#141719}
.island .own{position:relative;z-index:1;margin-top:26px;padding:16px 18px;border-radius:18px;background:rgba(245,243,236,.06);box-shadow:inset 0 0 0 1px var(--ink-line);font-size:14.5px;color:var(--on-ink-2)}
.island .own b{color:var(--on-ink)}
.island .own a{color:var(--acid)}
.island .cta{position:relative;z-index:1}
.island .btn-line{color:var(--on-ink);box-shadow:inset 0 0 0 1.5px var(--ink-line)}

/* как проходит работа — четыре шага */
@media (min-width:700px){.road.four{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.road.four{grid-template-columns:repeat(4,1fr)}}

/* заявка: несколько вариантов */
.lf .hint{font:500 12.5px var(--f-m);color:var(--text-3);letter-spacing:.02em;margin-top:-4px}

/* ═══ Страница «Тарифы и сравнение» (tarify/, С28) ═══ */
/* первый экран: лестница тарифов */
.ladder{background:var(--surface);border-radius:28px;padding:22px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);display:grid;gap:10px}
.ladder .lh{display:flex;justify-content:space-between;align-items:center;gap:10px;font:500 11.5px var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin-bottom:4px}
.lad{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:center;text-decoration:none}
.lad b{font:650 15px var(--f-d)}
.lad b small{display:block;font:500 11px var(--f-m);color:var(--text-3);letter-spacing:.02em;white-space:nowrap}
.lad .bar{position:relative;height:40px;border-radius:12px;background:var(--bg-2);overflow:hidden}
.lad .bar i{position:absolute;inset:0 auto 0 0;width:max(var(--w),104px);border-radius:12px;background:var(--acid-soft);box-shadow:inset 0 0 0 1px var(--line)}
.lad .bar span{position:relative;display:flex;align-items:center;height:100%;padding:0 12px;font:700 15px var(--f-d);letter-spacing:-.02em;white-space:nowrap}
.lad .bar span em{font:500 11.5px var(--f-m);font-style:normal;color:var(--text-2);margin-left:6px;letter-spacing:0}
.lad.hot .bar i{background:var(--acid);box-shadow:none}
.lad.hot .bar span,.lad.hot .bar span em{color:#141719}
.lad.ink .bar i{background:var(--text);box-shadow:none}
.lad.ink .bar span,.lad.ink .bar span em{color:var(--bg)}
.ladder .ln{font-size:13px;color:var(--text-3);margin-top:4px}

/* подзаголовок уровня внутри раздела цен */
.tier{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin:56px 0 20px;padding-top:28px;border-top:1px solid var(--line)}
.tier.first{margin-top:0;padding-top:0;border-top:0}
.tier h3{font-size:clamp(26px,3.4vw,34px);letter-spacing:-.035em}
.tier h3 small{display:block;font:500 12px var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin-bottom:6px}
.tier a{font:600 15px var(--f-d);color:var(--text-2)}

/* таблица «что входит» по уровням */
.cmp{margin-top:8px;background:var(--surface);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp table{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px}
.cmp th,.cmp td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{position:sticky;top:0;font:500 11.5px var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);background:var(--bg-2)}
.cmp thead th b{display:block;font:700 17px var(--f-d);letter-spacing:-.02em;text-transform:none;color:var(--text);margin-top:2px}
.cmp tbody th{font-weight:400;color:var(--text-2);width:34%}
.cmp tr.grp th{padding-top:22px;font:500 11.5px var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--text);background:color-mix(in srgb,var(--acid) 9%,transparent)}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:0}
.cmp .y,.cmp .n{display:inline-block;width:20px;height:20px;border-radius:50%;vertical-align:-4px}
.cmp .y{background:var(--acid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141719' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.cmp .n{background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center/12px no-repeat}
.cmp .y+span,.cmp .n+span{margin-left:8px}
.cmp .w{display:inline-block;margin-left:6px;font:500 11px var(--f-m);letter-spacing:.04em;padding:3px 7px;border-radius:7px;background:var(--bg-2);color:var(--text-2);white-space:nowrap}
.cmp .w.mod{background:var(--acid);color:#141719}
.cmp small{display:block;color:var(--text-3);font-size:12.5px;margin-top:2px}
.cmp-note{font-size:13px;color:var(--text-3);margin-top:12px}
.cmp tr.grp th span{position:sticky;left:16px}
@media (max-width:560px){.cmp th,.cmp td{padding:12px 12px;font-size:13.5px}.cmp tbody tr:not(.grp) th,.cmp thead th:first-child{position:sticky;left:0;z-index:2;width:140px;min-width:140px}
  .cmp tbody tr:not(.grp) th{background:var(--surface)}.cmp tr.grp th{background:color-mix(in srgb,var(--acid) 9%,var(--surface))}.cmp tr.grp th span{left:12px}}

/* ═══ Страница «Контакты» (kontakty/, С28) ═══ */
/* способы связи — карточка на первом экране */
.ways{background:var(--surface);border-radius:28px;padding:14px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);display:grid;gap:8px}
.way{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;padding:14px;border-radius:18px;background:var(--bg-2);text-decoration:none;transition:background .2s}
.way:hover{background:var(--acid-soft)}
.way .ico{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--text);color:var(--acid)}
.way small{display:block;font:500 11.5px var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.way b{display:block;font:700 clamp(16px,2.2vw,19px)/1.2 var(--f-d);letter-spacing:-.02em;margin-top:2px;overflow-wrap:anywhere}
.way .arr{color:var(--text-3)}
.way.hot{background:var(--acid);color:#141719}
.way.hot small{color:#2c3a00}
.way.hot .ico{background:#141719;color:var(--acid)}
.way.hot .arr{color:#141719}
.ways .wn{display:flex;align-items:center;gap:8px;padding:8px 6px 4px;font:500 12.5px var(--f-m);color:var(--text-2)}
.ways .wn::before{content:"";width:8px;height:8px;border-radius:50%;background:#3fbf5a;box-shadow:0 0 0 4px rgba(63,191,90,.18)}

/* реквизиты и документы */
.reqs{display:grid;gap:14px}
@media (min-width:900px){.reqs{grid-template-columns:1.15fr .85fr}}
.req-card{background:var(--surface);border-radius:26px;padding:26px 24px;box-shadow:inset 0 0 0 1px var(--line)}
.req-card h3{font-size:22px;margin-bottom:14px}
.req-card dl{margin:0;display:grid}
.req-card dl div{display:grid;gap:2px 16px;padding:12px 0;border-top:1px solid var(--line)}
@media (min-width:560px){.req-card dl div{grid-template-columns:170px 1fr}}
.req-card dt{font:500 12px var(--f-m);letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);padding-top:3px}
.req-card dd{margin:0;font-size:15.5px;overflow-wrap:anywhere}
.req-card dd.mono{font-family:var(--f-m);letter-spacing:.02em}
.docs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.docs a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--bg-2);text-decoration:none;font:600 15.5px var(--f-d);transition:background .2s}
.docs a:hover{background:var(--acid-soft)}
.docs a .ico{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--surface);color:var(--acid-ink);box-shadow:inset 0 0 0 1px var(--line)}
.docs a small{display:block;font:500 12px var(--f-b);color:var(--text-2);margin-top:2px}
/* о продукте: три уровня на тёмном острове */
.island .stack{position:relative;z-index:1;display:grid;gap:10px}
.island .st{padding:20px 22px;border-radius:22px;background:rgba(245,243,236,.05);box-shadow:inset 0 0 0 1px var(--ink-line)}
.island .st .no{font:500 12px var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink-2)}
.island .st h3{font-size:22px;margin:6px 0 4px}
.island .st p{color:var(--on-ink-2);font-size:15px}
.island .st:first-child{background:var(--acid);color:#141719;box-shadow:none}
.island .st:first-child .no,.island .st:first-child p{color:#2c3a00}

/* ═══ 404 и оферта (С28) ═══ */
.e404{padding:56px 0 72px}
@media (min-width:1000px){.e404{padding:88px 0 104px}}
.e404 .big{display:block;font:800 clamp(96px,22vw,200px)/.86 var(--f-d);letter-spacing:-.07em;margin:22px 0 26px}
.e404 .big mark{display:inline-block;line-height:.86;background:var(--acid);color:#141719;padding:.04em .08em .02em;border-radius:.1em}
.e404 h1{font-size:clamp(30px,5vw,48px);line-height:1.04;letter-spacing:-.04em}
.go4{display:grid;gap:10px;margin-top:36px}
@media (min-width:640px){.go4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.go4{grid-template-columns:repeat(4,1fr)}}
.go4 a{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:22px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;transition:transform .2s,box-shadow .2s}
.go4 a:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.go4 .ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--acid-soft);color:var(--acid-ink);margin-bottom:8px}
.go4 b{font:650 17px var(--f-d)}
.go4 span{color:var(--text-2);font-size:14.5px}
/* оферта: два набора документов */
.doc-sets{display:grid;gap:14px}
@media (min-width:900px){.doc-sets{grid-template-columns:1fr 1fr}}
.doc-set{background:var(--surface);border-radius:26px;padding:26px 24px;box-shadow:inset 0 0 0 1px var(--line)}
.doc-set .no{font:500 12px var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.doc-set h2{font-size:26px;letter-spacing:-.03em;margin:8px 0 16px}
.doc-set .docs span{font:600 15.5px var(--f-d)}
.doc-set .docs li>div{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--bg-2)}
.doc-set .docs .ico{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--surface);color:var(--acid-ink);box-shadow:inset 0 0 0 1px var(--line)}
.doc-set .docs small{display:block;font:500 12px var(--f-b);color:var(--text-2);margin-top:2px}
.draft{display:flex;gap:14px;align-items:flex-start;margin:28px 0 20px;padding:18px 20px;border-radius:20px;background:var(--acid-soft);font-size:15.5px}
.draft .ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--acid);color:#141719}
.draft b{font-family:var(--f-d)}
.e404 .eyebrow+h1{margin-top:14px}
.doc-sets+.plans-note{margin-top:24px}

/* ═══ Попап заявки (С28, по образцу unixai.ru): кнопки «#help» открывают его вместо прокрутки. Разметку строит site.js ═══ */
body.locked{overflow:hidden}
.pop{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,23,25,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.pop.on{opacity:1;visibility:visible}
.pop-box{position:relative;width:min(460px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--surface);border-radius:28px;padding:30px 22px 24px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);transform:translateY(16px) scale(.98);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@media (min-width:560px){.pop-box{padding:36px 32px 30px}}
.pop.on .pop-box{transform:none}
.pop-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:50%;background:var(--bg-2);color:var(--text);font:400 24px/1 var(--f-d);cursor:pointer;display:grid;place-items:center;transition:background .2s}
.pop-x:hover{background:var(--acid);color:#141719}
.pop-box h3{font-size:clamp(24px,4vw,30px);line-height:1.08;letter-spacing:-.035em;margin:12px 40px 8px 0}
.pop-box .pop-lead{color:var(--text-2);font-size:15.5px;margin-bottom:20px}
.pop-box .lf .btn{justify-self:stretch}
@media (prefers-reduced-motion:reduce){.pop,.pop-box{transition:none}}
.pop[hidden]{display:none}

/* ═══ Политика и согласие (03.10.2026): длинный текст документа ═══ */
.legal-doc .doc-date{margin-top:12px;font:500 13px var(--f-m);color:var(--text-3)}
.doc-body{display:flex;flex-direction:column;gap:14px;max-width:74ch;margin-top:32px;font-size:15.5px;line-height:1.65;color:var(--text-2)}
.doc-body h2{font-size:clamp(19px,2.4vw,22px);letter-spacing:-.02em;color:var(--text);margin-top:18px}
.doc-body b{color:var(--text);font-weight:600}
.doc-body ul{display:flex;flex-direction:column;gap:8px;padding-left:20px;list-style:disc}
.doc-body a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.doc-body a:hover{color:var(--acid-ink)}
.doc-body .doc-note{padding:14px 18px;border-radius:16px;background:var(--acid-soft);color:var(--text)}
.doc-body .doc-req{margin-top:10px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px}
.doc-body h3{font-size:17px;letter-spacing:-.01em;color:var(--text);margin-top:12px}
.doc-body .doc-part{scroll-margin-top:96px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line);font-size:clamp(21px,2.8vw,26px)}
.doc-body .doc-part+.doc-date{margin-top:-6px}
.doc-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.doc-toc a{padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;color:var(--text);text-decoration:none}
.doc-toc a:hover{border-color:var(--text)}
.doc-table{overflow-x:auto}
.doc-table table{border-collapse:collapse;width:100%;font-size:14px}
.doc-table th,.doc-table td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.doc-table th{color:var(--text);font-weight:600}