/* Сайт для операторов ПД. Только токены кабинета (tokens.css), без своих цветов. */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--color-bg-primary);color:var(--color-text-primary);font-family:var(--font-sans);font-feature-settings:var(--font-features);font-size:var(--text-regular-size);line-height:var(--text-regular-line);letter-spacing:var(--text-regular-tracking);-webkit-font-smoothing:antialiased}
a{color:var(--color-link);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--color-text-primary);font-weight:var(--font-weight-semibold);text-wrap:balance}
h1{font-size:44px;line-height:1.1;letter-spacing:-0.025em}
h2{font-size:var(--title-4-size);line-height:var(--title-4-line);letter-spacing:var(--title-4-tracking)}
h3{font-size:var(--title-1-size);line-height:var(--title-1-line)}
p{color:var(--color-text-secondary);text-wrap:pretty}
ul,ol{color:var(--color-text-secondary)}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--space-6)}

/* Шапка */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--color-bg-primary),transparent 8%);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border-primary)}
.top .wrap{display:flex;align-items:center;gap:var(--space-6);height:60px}
.brand{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}
.brand:hover{text-decoration:none}
.brand__logo{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--radius-6);background:var(--color-accent);color:var(--color-text-on-accent);font-size:13px}
.nav{display:flex;gap:var(--space-5);margin-left:var(--space-4)}
.nav a{color:var(--color-text-tertiary);font-size:var(--text-small-size);white-space:nowrap}
.nav a:hover{color:var(--color-text-primary);text-decoration:none}
.top__actions{margin-left:auto;display:flex;gap:var(--space-2);align-items:center}
@media (max-width:980px){.nav{display:none}}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--control-height-md);padding:0 var(--space-4);border-radius:var(--radius-6);border:1px solid var(--color-border-secondary);background:var(--color-bg-primary);color:var(--color-text-primary);font:inherit;font-size:var(--text-small-size);font-weight:var(--font-weight-medium);cursor:pointer;white-space:nowrap;transition:background var(--speed-quick)}
.btn:hover{background:var(--color-bg-tertiary);text-decoration:none}
.btn--primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-on-accent)}
.btn--primary:hover{background:var(--color-accent-hover)}
.btn--lg{height:var(--control-height-lg);padding:0 var(--space-5);font-size:var(--text-regular-size)}
.btn--ghost{border-color:transparent}

/* Секции */
section{padding:88px 0;border-bottom:1px solid var(--color-border-primary)}
section.alt{background:var(--color-bg-secondary)}
.eyebrow{display:inline-block;color:var(--color-accent);font-size:var(--text-small-size);font-weight:var(--font-weight-medium);margin-bottom:var(--space-3)}
.lead{font-size:var(--text-large-size);line-height:var(--text-large-line);max-width:720px;margin-top:var(--space-4)}
.sec-head{max-width:760px;margin-bottom:var(--space-8)}
.sec-head p{margin-top:var(--space-3)}
.muted{color:var(--color-text-tertiary);font-size:var(--text-mini-size)}
.note{margin-top:var(--space-5);color:var(--color-text-tertiary);font-size:var(--text-mini-size);max-width:820px}

/* Hero */
.hero{padding:96px 0 80px}
.hero h1{max-width:860px}
.cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.cta + .muted{margin-top:var(--space-3)}
.badges{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin-top:var(--space-10)}
.badges li{font-size:var(--text-mini-size);color:var(--color-text-tertiary);padding:4px 12px;border:1px solid var(--color-border-primary);border-radius:var(--radius-full);background:var(--color-bg-secondary)}

/* Сетки и карточки */
.grid{display:grid;gap:var(--space-4)}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--color-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--radius-12);padding:var(--space-6);box-shadow:var(--shadow-tiny)}
.card h3{margin-bottom:var(--space-2)}
.card p,.card li{font-size:var(--text-small-size)}
.card ul{padding-left:18px;display:grid;gap:4px;margin-top:var(--space-2)}
.card--accent{background:var(--color-accent-tint);border-color:color-mix(in srgb,var(--color-accent),transparent 70%)}
.tag{display:inline-block;font-size:var(--text-micro-size);font-weight:var(--font-weight-medium);padding:2px 8px;border-radius:var(--radius-full);background:var(--color-bg-tertiary);color:var(--color-text-tertiary);margin-left:var(--space-2);vertical-align:2px}
.tag--soon{background:var(--color-warning-bg);color:var(--color-warning-text)}
.group-title{font-size:var(--text-small-size);font-weight:var(--font-weight-semibold);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.04em;margin:var(--space-8) 0 var(--space-3)}
.group-title:first-child{margin-top:0}

/* Цифры */
.stat{padding-left:var(--space-4);border-left:2px solid var(--color-accent)}
.stat b{display:block;font-size:40px;line-height:1.1;font-weight:var(--font-weight-semibold);letter-spacing:-0.02em;color:var(--color-text-primary)}
.stat span{display:block;margin-top:var(--space-1);font-size:var(--text-small-size);color:var(--color-text-tertiary)}

/* Таблицы */
.table-wrap{overflow-x:auto;border:1px solid var(--color-border-primary);border-radius:var(--radius-8);background:var(--color-bg-primary)}
table{border-collapse:collapse;width:100%;font-size:var(--text-small-size)}
th,td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--color-border-primary)}
tr:last-child td{border-bottom:0}
th{background:var(--color-bg-secondary);color:var(--color-text-tertiary);font-weight:var(--font-weight-medium);font-size:var(--text-mini-size)}
td{color:var(--color-text-secondary)}
td.n{white-space:nowrap;color:var(--color-text-tertiary)}
.cmp td:last-child,.cmp th:last-child{background:var(--color-accent-tint);color:var(--color-text-primary)}
h3 + .table-wrap{margin-top:var(--space-3)}
.table-wrap + h3{margin-top:var(--space-8)}

/* Шаги */
.steps{list-style:none;counter-reset:s;display:grid;gap:var(--space-3)}
.steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:var(--space-4);align-items:start;background:var(--color-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--radius-12);padding:var(--space-5)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-full);background:var(--color-accent-tint);color:var(--color-accent);font-weight:var(--font-weight-semibold)}
.steps b{display:block;color:var(--color-text-primary);margin-bottom:2px}
.steps span{font-size:var(--text-small-size);color:var(--color-text-secondary)}
.steps .law{display:block;margin-top:4px;font-size:var(--text-mini-size);color:var(--color-text-tertiary)}

/* Тарифы */
.plan{display:flex;flex-direction:column}
.plan .price{font-size:30px;font-weight:var(--font-weight-semibold);letter-spacing:-0.02em;color:var(--color-text-primary);margin:var(--space-2) 0 0}
.plan .price small{font-size:var(--text-small-size);font-weight:var(--font-weight-normal);color:var(--color-text-tertiary)}
.plan .year{font-size:var(--text-mini-size);color:var(--color-text-tertiary);margin-bottom:var(--space-4)}
.plan ul{flex:1;margin-bottom:var(--space-5)}
.plan--main{border-color:var(--color-accent);box-shadow:var(--shadow-low)}

/* FAQ */
details{border:1px solid var(--color-border-primary);border-radius:var(--radius-8);background:var(--color-bg-primary);padding:var(--space-4) var(--space-5)}
details + details{margin-top:var(--space-2)}
summary{cursor:pointer;font-weight:var(--font-weight-medium);color:var(--color-text-primary);list-style:none;display:flex;justify-content:space-between;gap:var(--space-4)}
summary::after{content:"+";color:var(--color-text-tertiary);font-size:18px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:var(--space-3);font-size:var(--text-small-size)}

/* Форма */
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-10)}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.form label{display:flex;flex-direction:column;gap:6px;font-size:var(--text-mini-size);color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}
.form .wide{grid-column:1/-1}
.form input:not([type=checkbox]),.form select,.form textarea{height:var(--control-height-md);padding:0 var(--space-3);border:1px solid var(--color-border-secondary);border-radius:var(--radius-6);font:inherit;font-size:var(--text-small-size);color:var(--color-text-primary);background:var(--color-bg-primary)}
.form textarea{height:auto;padding:var(--space-2) var(--space-3);resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;box-shadow:var(--focus-ring);border-color:var(--color-accent)}
.form .chk{flex-direction:row;align-items:flex-start;gap:var(--space-2);font-weight:var(--font-weight-normal)}
.form .chk input{margin-top:3px}
.form button{justify-self:start}
.form-msg{grid-column:1/-1;font-size:var(--text-small-size);padding:var(--space-3) var(--space-4);border-radius:var(--radius-6);background:var(--color-info-bg);color:var(--color-info-text);border:1px solid var(--color-info-border)}
.form-msg[hidden]{display:none}

/* Подвал */
footer{background:var(--color-bg-secondary);padding:56px 0 40px}
.foot{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--space-8)}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}}
.foot h4{font-size:var(--text-mini-size);color:var(--color-text-tertiary);font-weight:var(--font-weight-medium);margin-bottom:var(--space-3)}
.foot a,.foot span{display:block;font-size:var(--text-small-size);color:var(--color-text-secondary);margin-bottom:var(--space-2)}
.foot span{color:var(--color-text-quaternary)}
.foot p{font-size:var(--text-small-size);margin-top:var(--space-3)}
.copy{margin-top:var(--space-10);padding-top:var(--space-5);border-top:1px solid var(--color-border-primary);font-size:var(--text-mini-size);color:var(--color-text-tertiary);display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between}