/* Postup: дизайн-токены по образцу Postmypost (RAZBOR-site.md, 23.09.2026) */
:root{
  --font-primary:'Nunito',sans-serif;
  --color-primary:#1f66ff;
  --color-black:#000000;
  --color-white:#ffffff;
  --color-text-base:#26262b;
  --color-text-secondary:#3f3f45;
  --color-text-muted:#8891a0;
  --color-success:#3ecf72;
  --color-error:#e34a3c;
  --color-star:#e8b23a;
  --color-discount:#7fce3a;
  --color-surface-6:#ffe8b2;
  --color-surface-7:#ffe7d3;
  --color-footer-bg:#201f26;
  --color-footer-surface:#2b2a32;
  --color-ai-surface:#241f38;
  --color-tariff-gradient-start:#ff5099;
  --color-tariff-gradient-end:#b23df0;
  --color-bg:#ffffff;
  --color-panel:#f5f6fa;
  --color-line:#e6e8ef;
  --container-width:75rem;
  --container-padding:clamp(0.75rem,4vw,1.25rem);
  --header-height:72px;
  --header-height-desktop:78px;
  --radius-card:1.875rem;
  --radius-btn:6.25rem;
  --radius-sm:2px;
}
@media (prefers-color-scheme:dark){
  :root{
    --color-bg:#15151a;
    --color-panel:#1d1d24;
    --color-line:#2d2d36;
    --color-text-base:#f2f3f7;
    --color-text-secondary:#c9cbd6;
    --color-text-muted:#8f93a3;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--color-bg);color:var(--color-text-base);font-family:var(--font-primary);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100vw}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container-width);margin:0 auto;padding:0 var(--container-padding)}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.01em;overflow-wrap:break-word;word-break:break-word;hyphens:auto}
p{margin:0;overflow-wrap:break-word}
ul{margin:0;padding:0;list-style:none}

/* Шапка */
.shapka{position:sticky;top:0;z-index:50;height:var(--header-height);display:flex;align-items:center;background:color-mix(in srgb, var(--color-bg) 80%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-line)}
@media (min-width:64rem){.shapka{height:var(--header-height-desktop)}}
.shapka__row{display:flex;align-items:center;gap:28px;width:100%}
.shapka__logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:22px;color:var(--color-text-base);margin-right:auto}
.shapka__logo-znak{width:34px;height:34px;border-radius:10px;background:var(--color-primary);color:#fff;display:grid;place-items:center;font-weight:800}
.shapka__logo-img{height:28px;width:auto;display:block}
@media (min-width:64rem){.shapka__logo-img{height:30px}}
.shapka__logo-img--dark{display:none}
@media (prefers-color-scheme:dark){
  .shapka__logo-img--light{display:none}
  .shapka__logo-img--dark{display:block}
}
.shapka__menu{display:none;align-items:center;gap:24px;font-weight:600;font-size:15px}
@media (min-width:64rem){.shapka__menu{display:flex}}
.shapka__menu a{color:var(--color-text-secondary)}
.shapka__menu a:hover{color:var(--color-primary)}
.shapka__vypad{position:relative}
.shapka__vypad-spisok{display:none;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);background:var(--color-bg);border:1px solid var(--color-line);border-radius:20px;padding:10px;min-width:260px;box-shadow:0 20px 50px rgba(0,0,0,.15)}
.shapka__vypad:hover .shapka__vypad-spisok,.shapka__vypad:focus-within .shapka__vypad-spisok{display:block}
.shapka__vypad-spisok a{display:block;padding:10px 14px;border-radius:12px;font-weight:600;color:var(--color-text-base)}
.shapka__vypad-spisok a:hover{background:var(--color-panel);color:var(--color-primary)}
.shapka__akcii{display:flex;align-items:center;gap:6px;flex-shrink:0}
.shapka__vhod{font-weight:700;font-size:14px;color:var(--color-text-base);padding:8px 4px;white-space:nowrap}
.shapka__akcii .btn{height:2.6rem;font-size:13px;padding:0 14px;white-space:nowrap}
@media (min-width:30rem){.shapka__akcii .btn{height:2.75rem;font-size:14px;padding:0 18px}}
@media (min-width:64rem){.shapka__akcii .btn{height:3rem;font-size:15px;padding:0 22px}}
.shapka__burger{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--color-line);border-radius:10px;background:none;margin-left:4px;flex-shrink:0}
@media (min-width:64rem){.shapka__burger{display:none}}
@media (max-width:22.4rem){.shapka__vhod{display:none}}
.mobil-menu{display:none;position:fixed;inset:var(--header-height) 0 0 0;background:var(--color-bg);z-index:49;overflow:auto;padding:20px var(--container-padding) 40px}
.mobil-menu.otkryto{display:block}
.mobil-menu a{display:block;padding:14px 0;border-bottom:1px solid var(--color-line);font-weight:700;font-size:18px}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;height:3.6875rem;padding:0 var(--rem-28,1.75rem);border-radius:var(--radius-btn);background:var(--color-primary);color:#fff!important;font-weight:600;font-size:1.25rem;border:none;cursor:pointer;transition:background .2s ease-out,transform .2s ease-out}
.btn:hover{background:var(--color-black)}
.btn--sm{height:3rem;font-size:1rem;padding:0 1.5rem}
.btn--outline{background:transparent;color:var(--color-text-base)!important;border:1.5px solid var(--color-line)}
.btn--outline:hover{background:var(--color-panel)}
.btn--block{width:100%}

/* Герой */
.geroy{padding:64px 0 48px;text-align:center}
@media (min-width:64rem){.geroy{padding:96px 0 64px}}
.geroy h1{font-size:clamp(2rem,5.5vw,3.5rem);line-height:1.08;max-width:900px;margin:0 auto}
.geroy__podpis{margin-top:26px;color:var(--color-text-muted);font-size:14px}
.geroy__cta{margin-top:22px}

/* Секции */
.sekciya{padding:56px 0}
.sekciya__zagolovok{font-size:clamp(1.5rem,3.2vw,2.25rem);text-align:center;max-width:760px;margin:0 auto 36px}
.sekciya__podzagolovok{text-align:center;color:var(--color-text-muted);font-size:15px;max-width:640px;margin:-20px auto 36px}

/* Карточки инструментов */
.setka{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:40rem){.setka{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.setka{grid-template-columns:repeat(3,1fr)}}
.kartochka{background:var(--color-panel);border-radius:var(--radius-card);padding:28px}
.kartochka h3{font-size:20px;margin-bottom:10px}
.kartochka p{color:var(--color-text-muted);font-size:15px;line-height:1.6}
.kartochka .btn{margin-top:18px}
.kartochka__skoro{display:inline-block;font-size:12px;font-weight:700;color:var(--color-discount);background:color-mix(in srgb, var(--color-discount) 16%, transparent);border-radius:100px;padding:4px 10px;margin-bottom:10px}

/* Площадки */
.ploshchadki{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:40rem){.ploshchadki{grid-template-columns:repeat(4,1fr)}}
@media (min-width:64rem){.ploshchadki{grid-template-columns:repeat(6,1fr)}}
.ploshchadka{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 10px;border-radius:20px;background:var(--color-panel);text-align:center}
.ploshchadka__znak{width:44px;height:44px;border-radius:12px;background:var(--color-bg);border:1px solid var(--color-line);display:grid;place-items:center;font-weight:800;color:var(--color-primary)}
.ploshchadka__imya{font-weight:700;font-size:14px}
.ploshchadka__sost{font-size:11px;color:var(--color-text-muted)}
.ploshchadka--skoro .ploshchadka__sost{color:var(--color-discount)}

/* Согласование в Telegram */
.soglasovanie{background:var(--color-ai-surface);border-radius:2.5rem;padding:44px 28px;color:#fff}
@media (min-width:64rem){.soglasovanie{padding:64px}}
.soglasovanie__grid{display:grid;gap:32px}
@media (min-width:64rem){.soglasovanie__grid{grid-template-columns:1fr 1fr;align-items:center}}
.soglasovanie h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:14px}
.soglasovanie p{color:#c7c9dd;font-size:15px;line-height:1.7}
.soglasovanie__chat{background:#151222;border-radius:24px;padding:20px}
.soglasovanie__post{background:#1f1b30;border-radius:16px;padding:14px;font-size:14px;color:#e9e9f2;margin-bottom:12px}
.soglasovanie__knopki{display:flex;gap:8px;flex-wrap:wrap}
.soglasovanie__knopki span{flex:1;text-align:center;padding:10px 6px;border-radius:12px;font-size:13px;font-weight:700;background:#292440;color:#fff}
.soglasovanie__knopki span.da{background:#2a6b3d}
.soglasovanie__knopki span.net{background:#7a2c2c}

/* AI блок */
.ai-blok{background:var(--color-ai-surface);border-radius:2.5rem;padding:44px 28px;color:#fff}
@media (min-width:64rem){.ai-blok{padding:64px}}
.ai-blok h2{color:#fff;font-size:clamp(1.5rem,3vw,2.25rem)}
.ai-blok__pod{color:#b9bcd6;margin-top:10px}
.ai-blok p.opis{color:#cfd0e6;margin-top:18px;max-width:640px}
.ai-blok__spisok{margin-top:24px;display:grid;gap:12px}
@media (min-width:48rem){.ai-blok__spisok{grid-template-columns:repeat(3,1fr)}}
.ai-blok__punkt{background:#1c1930;border-radius:18px;padding:16px;font-size:14px;color:#e9e9f2}

/* Мобильное приложение */
.mobapp{background:var(--color-surface-7);border-radius:2.5rem;padding:44px 28px;text-align:center}
.mobapp h2{font-size:clamp(1.5rem,3vw,2rem)}
.mobapp p{color:var(--color-text-secondary);margin-top:10px}
.mobapp__qr{width:120px;height:120px;margin:24px auto;background:#fff;border-radius:16px;border:1px solid var(--color-line);display:grid;place-items:center;font-size:12px;color:var(--color-text-muted)}

/* Тарифы */
.tarify{display:grid;gap:20px}
@media (min-width:64rem){.tarify{grid-template-columns:repeat(3,1fr)}}
.tarif{border-radius:var(--radius-card);padding:32px 26px;background:var(--color-panel);border:1px solid var(--color-line);display:flex;flex-direction:column}
.tarif--reko{background:linear-gradient(160deg,var(--color-tariff-gradient-start),var(--color-tariff-gradient-end));color:#fff;border:none}
.tarif__znachok{display:inline-block;font-size:12px;font-weight:800;background:rgba(255,255,255,.25);padding:4px 12px;border-radius:100px;margin-bottom:14px}
.tarif h3{font-size:22px}
.tarif__cena{font-size:38px;font-weight:800;margin:16px 0 4px}
.tarif__cena span{font-size:15px;font-weight:600;opacity:.7}
.tarif ul{margin:20px 0;display:grid;gap:10px;font-size:14px}
.tarif ul li{display:flex;gap:8px;align-items:flex-start}
.tarif ul li:before{content:"✓";font-weight:800;flex:0 0 auto}
.tarif ul li.skoro{opacity:.65}
.tarif ul li.skoro:after{content:"скоро";font-size:11px;font-weight:700;margin-left:auto;background:rgba(0,0,0,.08);padding:2px 8px;border-radius:100px}
.tarif--reko ul li.skoro:after{background:rgba(255,255,255,.25)}
.tarif .btn{margin-top:auto}

.perekl{display:flex;justify-content:center;gap:8px;margin-bottom:36px;flex-wrap:wrap}
.perekl button{font:inherit;font-weight:700;font-size:14px;border:1px solid var(--color-line);background:var(--color-bg);padding:10px 18px;border-radius:100px;cursor:pointer}
.perekl button.aktiv{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.perekl__skidka{color:var(--color-discount);font-weight:800}

.polzunok-wrap{max-width:420px;margin:0 auto 40px;text-align:center}
.polzunok-wrap input[type=range]{width:100%}
.polzunok-wrap .znach{font-weight:800;font-size:18px;margin-top:6px}

/* FAQ */
.faq{display:grid;gap:10px;max-width:800px;margin:0 auto}
.faq details{background:var(--color-panel);border-radius:18px;padding:18px 22px}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:22px;font-weight:400}
.faq details[open] summary:after{content:"−"}
.faq p{margin-top:12px;color:var(--color-text-muted);font-size:15px;line-height:1.65}

/* Подвал */
.podval{background:var(--color-footer-bg);color:#c7c9d6;padding:56px 0 30px;margin-top:60px}
.podval__grid{display:grid;gap:28px}
@media (min-width:48rem){.podval__grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.podval h4{color:#fff;font-size:14px;margin-bottom:14px}
.podval a{display:block;color:#a6a9be;font-size:14px;padding:6px 0}
.podval a:hover{color:#fff}
.podval__nizh{border-top:1px solid #34333d;margin-top:34px;padding-top:20px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;color:#7d7f92;font-size:13px}
.podval__soc{display:flex;gap:10px}
.podval__soc a{width:34px;height:34px;border-radius:10px;background:var(--color-footer-surface);display:grid;place-items:center;padding:0}

/* Общие текстовые страницы (юр., about) */
.tekst-stranica{max-width:800px;margin:0 auto;padding:56px 0 80px}
.tekst-stranica h1{font-size:clamp(1.75rem,4vw,2.5rem)}
.tekst-stranica .melko{color:var(--color-text-muted);font-size:14px;margin-top:8px}
.tekst-stranica h2{font-size:20px;margin:34px 0 10px}
.tekst-stranica p,.tekst-stranica li{color:var(--color-text-secondary);font-size:15px;line-height:1.75}
.tekst-stranica ul{display:grid;gap:8px;margin:10px 0}
.tekst-stranica ul li{padding-left:18px;position:relative}
.tekst-stranica ul li:before{content:"·";position:absolute;left:0;color:var(--color-text-muted)}
.tekst-stranica a{color:var(--color-primary);text-decoration:underline}
.rekvizity{background:var(--color-panel);border-radius:18px;padding:18px 22px;margin-top:14px;font-size:14px;color:var(--color-text-muted)}

/* Форма */
form.forma{display:grid;gap:14px;max-width:520px;background:var(--color-panel);border:1px solid var(--color-line);border-radius:24px;padding:24px;margin-top:24px}
form.forma label{display:grid;gap:6px;font-size:13px;color:var(--color-text-muted);font-weight:700}
form.forma input,form.forma select,form.forma textarea{font:inherit;color:var(--color-text-base);background:var(--color-bg);border:1px solid var(--color-line);border-radius:12px;padding:11px 14px}
form.forma textarea{min-height:110px;resize:vertical}
form.forma .lovushka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.forma .itog{min-height:1.4em}
form.forma .itog[data-vid=ok]{color:var(--color-success);font-weight:700}
form.forma .itog[data-vid=oshibka]{color:var(--color-error);font-weight:700}

.oglavlenie{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.oglavlenie a{font-size:13px;color:var(--color-text-muted);border:1px solid var(--color-line);padding:8px 14px;border-radius:100px}