/* ==========================================================================
   ITMagic.SPB — единая дизайн-система (токены + компоненты).
   Источник правды для всех страниц сайта (лендинг, pSEO-шаблоны, блог, юр. страницы).
   Подключать одним <link>, без дублирования в инлайновых <style>.
   ========================================================================== */

:root {
  --itm-ink:#111214; --itm-ink-2:#1e1f23; --itm-ink-3:#2c2e33;
  --itm-accent:#c8102e;
  --itm-text:#2b2d31; --itm-text-2:#5a5c60; --itm-text-3:#3f4145;
  --itm-text-inv:#b4b6ba; --itm-text-inv-2:#9a9ca0; --itm-text-inv-3:#d5d5d2;
  --itm-bg:#ffffff; --itm-bg-2:#f4f4f2; --itm-bg-3:#f7f7f5; --itm-bg-page:#e9e9e6;
  --itm-line:#e3e3e0; --itm-line-2:#dcdcd8; --itm-line-3:#eeeeeb; --itm-line-4:#b9b9b4;
  --itm-font-display:'Archivo',system-ui,sans-serif;
  --itm-font-text:'Onest',system-ui,sans-serif;
  --itm-font-mono:'JetBrains Mono',ui-monospace,monospace;
  --itm-h1:34px; --itm-h1-lh:1.03; --itm-h1-ls:-.035em;
  --itm-figure:44px; --itm-figure-lh:1; --itm-figure-ls:-.045em;
  --itm-h2:28px; --itm-h2-lh:1.06; --itm-h2-ls:-.03em;
  --itm-h3:19px; --itm-h3-lh:1.15; --itm-h3-ls:-.02em;
  --itm-h4:16px; --itm-h4-lh:1.2; --itm-h4-ls:-.01em;
  --itm-num-lg:26px; --itm-num-md:21px; --itm-num-sm:18px;
  --itm-body:16px; --itm-body-lh:1.55; --itm-body-sm:15px;
  --itm-article:17px; --itm-article-lh:1.65;
  --itm-small:14px; --itm-small-lh:1.5; --itm-xsmall:13px;
  --itm-label:10px; --itm-label-ls:.16em; --itm-caption:11px; --itm-caption-ls:.08em;
  --itm-min-text:11px;
  --itm-s1:4px; --itm-s2:8px; --itm-s3:12px; --itm-s4:14px; --itm-s5:16px; --itm-s6:18px;
  --itm-s7:20px; --itm-s8:22px; --itm-s9:24px; --itm-s10:26px; --itm-s11:28px; --itm-s12:30px;
  --itm-s13:34px; --itm-s14:36px; --itm-s15:44px;
  --itm-page-x:20px; --itm-page-x-md:32px; --itm-page-x-lg:40px;
  --itm-section-y:44px; --itm-section-y-lg:80px; --itm-card-p:22px; --itm-container:1200px;
  --itm-header-h:56px; --itm-header-h-lg:62px;
  --itm-radius:0; --itm-radius-round:50%;
  --itm-border:1px solid var(--itm-line); --itm-border-soft:1px solid var(--itm-line-2);
  --itm-border-accent:2px solid var(--itm-accent); --itm-border-ink:2px solid var(--itm-ink);
  --itm-shadow:none; --itm-thumb-shadow:0 1px 5px rgba(0,0,0,.3);
  --itm-transition:.3s ease;
  --itm-z-header:50; --itm-z-menu:49; --itm-z-sticky-cta:60;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--itm-bg);color:var(--itm-ink);font:400 var(--itm-body)/var(--itm-body-lh) var(--itm-font-text);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--itm-accent);text-decoration:none}
a:hover{color:var(--itm-ink)}
button{font:inherit;cursor:pointer;border-radius:0}
:focus-visible{outline:2px solid var(--itm-accent);outline-offset:2px}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}

.i-wrap{width:100%;max-width:var(--itm-container);margin:0 auto;padding-left:var(--itm-page-x);padding-right:var(--itm-page-x)}
.i-section{padding-top:var(--itm-section-y);padding-bottom:var(--itm-section-y)}
.i-section--alt{background:var(--itm-bg-2)}
.i-section--ink{background:var(--itm-ink);color:#fff}

.i-h1{font:800 var(--itm-h1)/var(--itm-h1-lh) var(--itm-font-display);letter-spacing:var(--itm-h1-ls)}
.i-h2{font:800 var(--itm-h2)/var(--itm-h2-lh) var(--itm-font-display);letter-spacing:var(--itm-h2-ls)}
.i-h3{font:700 var(--itm-h3)/var(--itm-h3-lh) var(--itm-font-display);letter-spacing:var(--itm-h3-ls)}
.i-h4{font:700 var(--itm-h4)/var(--itm-h4-lh) var(--itm-font-display);letter-spacing:var(--itm-h4-ls)}
.i-lead{margin-top:var(--itm-s4);color:var(--itm-text-2)}
.i-note{font:400 var(--itm-xsmall)/1.5 var(--itm-font-text);color:var(--itm-text-2)}
.i-mono{font-family:var(--itm-font-mono);text-transform:uppercase}
.i-article{font-size:var(--itm-article);line-height:var(--itm-article-lh);color:var(--itm-text)}
.i-article h2{margin-top:var(--itm-s13)}
.i-article h3{margin-top:var(--itm-s11)}
.i-article p,.i-article ul,.i-article ol{margin-top:var(--itm-s6)}
.i-article ul{list-style:disc;padding-left:1.3em}
.i-article ol{list-style:decimal;padding-left:1.3em}
.i-article li{padding-left:.2em;margin-top:var(--itm-s2)}
.i-article li::marker{color:var(--itm-accent)}
.i-article table{width:100%;border-collapse:collapse;margin-top:var(--itm-s6);font-size:var(--itm-small);overflow-x:auto;display:block}
.i-article table th,.i-article table td{padding:10px 14px;border:var(--itm-border);text-align:left}
.i-article table th{background:var(--itm-bg-2);font-family:var(--itm-font-display);font-weight:700}
.i-article pre{margin-top:var(--itm-s6);padding:16px 18px;background:var(--itm-ink);color:var(--itm-text-inv-3);font-family:var(--itm-font-mono);font-size:var(--itm-small);line-height:1.5;overflow-x:auto}
.i-article code{font-family:var(--itm-font-mono);background:var(--itm-bg-2);padding:2px 6px;font-size:.92em}
.i-article pre code{background:none;padding:0}

.i-label{display:inline-flex;align-items:center;gap:var(--itm-s2);font:400 var(--itm-label)/1 var(--itm-font-mono);letter-spacing:var(--itm-label-ls);text-transform:uppercase;color:var(--itm-accent)}
.i-label::before{content:"";width:20px;height:7px;background:var(--itm-accent)}
.i-label--plain::before{display:none}

.i-btn{display:block;width:100%;padding:18px;border:0;text-align:center;font:700 var(--itm-body)/1 var(--itm-font-display);transition:background var(--itm-transition),border-color var(--itm-transition)}
.i-btn--accent{background:var(--itm-accent);color:#fff}
.i-btn--accent:hover{background:#a80d26;color:#fff}
.i-btn--ink{background:var(--itm-ink);color:#fff}
.i-btn--ink:hover{background:var(--itm-ink-2);color:#fff}
.i-btn--ghost{background:transparent;border:var(--itm-border-ink);color:var(--itm-ink)}
.i-btn--ghost:hover{background:var(--itm-ink);color:#fff}
.i-btn--light{background:#fff;color:var(--itm-ink)}
.i-btn--auto{display:inline-block;width:auto}

.i-header{position:sticky;top:0;z-index:var(--itm-z-header);height:var(--itm-header-h);display:flex;align-items:center;justify-content:space-between;gap:var(--itm-s5);padding:0 var(--itm-page-x);background:#fff;border-bottom:var(--itm-border)}
.i-logo{font:800 15px/1 var(--itm-font-display);letter-spacing:-.01em;color:var(--itm-ink)}
.i-logo span{color:var(--itm-accent)}
.i-header__right{display:flex;align-items:center;gap:var(--itm-s4)}
.i-contact{display:flex;gap:10px;font:400 11px/1 var(--itm-font-mono);color:var(--itm-text-2)}
.i-contact a{color:var(--itm-text-2)}
.i-contact a:hover{color:var(--itm-ink)}
.i-burger{width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:transparent;border:0}
.i-burger span{width:20px;height:2px;background:var(--itm-ink)}
.i-header__nav,.i-header__cta,.i-header__slots{display:none}

.i-menu{position:sticky;top:var(--itm-header-h);z-index:var(--itm-z-menu);display:none;flex-direction:column;background:var(--itm-ink)}
.i-menu[data-open="true"]{display:flex}
.i-menu a{padding:17px var(--itm-page-x);border-bottom:1px solid var(--itm-ink-3);font:500 var(--itm-body)/1.2 var(--itm-font-text);color:#fff}
.i-menu a:last-child{border-bottom:0}

.i-breadcrumbs{display:flex;flex-wrap:wrap;gap:6px;font:400 11px/1.4 var(--itm-font-mono);color:var(--itm-text-2);text-transform:uppercase;letter-spacing:.04em}
.i-breadcrumbs a{color:var(--itm-text-2)}
.i-breadcrumbs a:hover{color:var(--itm-accent)}
.i-breadcrumbs span{color:var(--itm-line-4)}

.i-hero{padding:var(--itm-s13) 0 var(--itm-s12)}
.i-trust{display:flex;background:var(--itm-bg-2);border-top:var(--itm-border);border-bottom:var(--itm-border)}
.i-trust div{flex:1;padding:14px 12px;text-align:center;font:400 11px/1.3 var(--itm-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--itm-text-3);border-right:var(--itm-border)}
.i-trust div:last-child{border-right:0}

.i-card{padding:var(--itm-card-p);background:#fff;border:var(--itm-border)}
.i-card--accent{border:var(--itm-border-accent)}
.i-card--alt{background:var(--itm-bg-3)}
.i-stack{display:flex;flex-direction:column;gap:12px;margin-top:var(--itm-s9)}
.i-badge{padding:4px 9px;background:var(--itm-accent);font:400 9px/1.3 var(--itm-font-mono);letter-spacing:.1em;text-transform:uppercase;color:#fff}

.i-numlist{display:flex;flex-direction:column;margin-top:var(--itm-s9);border-top:var(--itm-border)}
.i-numlist li{display:flex;gap:16px;padding:18px 0;border-bottom:var(--itm-border)}
.i-numlist li:last-child{border-bottom:0}
.i-numlist b{flex:none;font:700 12px/1.6 var(--itm-font-mono);color:var(--itm-accent)}
.i-numlist p{margin-top:6px;font-size:var(--itm-small);line-height:1.55;color:var(--itm-text-2)}

.i-inkbox{display:flex;gap:14px;margin-top:var(--itm-s6);padding:16px 18px;background:var(--itm-ink)}
.i-inkbox > div{flex:1}

.i-ba{margin-top:var(--itm-s7);border:var(--itm-border)}
.i-ba__col{padding:15px 16px;border-bottom:var(--itm-border)}
.i-ba__col:last-child{border-bottom:0;background:var(--itm-bg-3)}
.i-ba__cap{font:400 var(--itm-caption)/1 var(--itm-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--itm-text-2)}
.i-ba__col:last-child .i-ba__cap{color:var(--itm-accent)}
.i-ba ul{display:flex;flex-direction:column;gap:6px;margin-top:9px;font-size:var(--itm-small);color:var(--itm-text-2)}
.i-ba__col:last-child ul{font-weight:600;color:var(--itm-ink)}

.i-figure-row{display:flex;gap:var(--itm-s9);flex-wrap:wrap;margin-top:var(--itm-s7)}
.i-figure{font:800 var(--itm-num-md)/1 var(--itm-font-display);letter-spacing:-.03em;color:var(--itm-ink)}
.i-figure__cap{margin-top:4px;font:400 var(--itm-caption)/1.2 var(--itm-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--itm-text-2)}
.i-section--ink .i-figure,.i-result .i-figure{color:#fff}
.i-section--ink .i-figure__cap,.i-result .i-figure__cap{color:var(--itm-text-inv-2)}

.i-steps{display:flex;flex-direction:column;gap:var(--itm-s7);margin-top:var(--itm-s9)}
.i-step{padding-left:16px;border-left:2px solid var(--itm-line-2)}
.i-step--now{border-left-color:var(--itm-accent)}
.i-step__cap{font:400 11px/1 var(--itm-font-mono);letter-spacing:.1em;color:var(--itm-text-2)}
.i-step--now .i-step__cap{color:var(--itm-accent)}
.i-step h3{margin-top:7px}
.i-step p{margin-top:6px;font-size:var(--itm-small);line-height:1.55;color:var(--itm-text-2)}

.i-price__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.i-price__val{font:800 22px/1 var(--itm-font-display);letter-spacing:-.03em}
.i-price__val--lg{display:block;margin-top:10px;font-size:30px;letter-spacing:-.04em}
.i-price ul{display:flex;flex-direction:column;gap:7px;margin-top:14px;font-size:var(--itm-small);color:var(--itm-text-2)}
.i-card--accent ul{font-weight:500;color:var(--itm-ink)}

.i-no{display:flex;flex-direction:column;margin-top:var(--itm-s7);border-top:1px solid var(--itm-ink-3)}
.i-no li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--itm-ink-3);font-size:var(--itm-body-sm);line-height:1.55;color:var(--itm-text-inv-3)}
.i-no li:last-child{border-bottom:0}
.i-no span{color:var(--itm-accent);font-weight:700}

.i-author{display:flex;gap:18px;align-items:center}
.i-avatar{width:96px;height:96px;flex:none;border-radius:50%;background:var(--itm-bg-2);object-fit:cover}

.i-faq{margin-top:var(--itm-s9);border-top:var(--itm-border)}
.i-faq details{border-bottom:var(--itm-border);padding:16px 0}
.i-faq summary{cursor:pointer;font:700 var(--itm-body)/1.4 var(--itm-font-display);color:var(--itm-ink);list-style:none}
.i-faq summary::-webkit-details-marker{display:none}
.i-faq summary::after{content:"+";float:right;color:var(--itm-accent);font-family:var(--itm-font-mono)}
.i-faq details[open] summary::after{content:"–"}
.i-faq p{margin-top:10px;font-size:var(--itm-small);line-height:1.6;color:var(--itm-text-2)}

.i-quiz{margin-top:var(--itm-s9);background:#fff;border:var(--itm-border)}
.i-quiz__top{display:flex;align-items:center;justify-content:space-between;padding:16px var(--itm-page-x) 0;font:400 11px/1 var(--itm-font-mono);color:var(--itm-text-2)}
.i-quiz__top span:first-child{letter-spacing:.12em;text-transform:uppercase}
.i-progress{height:3px;margin:10px var(--itm-page-x) 0;background:var(--itm-bg-page)}
.i-progress i{display:block;height:100%;background:var(--itm-accent);transition:width var(--itm-transition)}
.i-quiz__body{padding:var(--itm-page-x)}
.i-options{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.i-option{padding:16px;background:#fff;border:var(--itm-border-soft);text-align:left;font:400 var(--itm-body-sm)/1.4 var(--itm-font-text);color:var(--itm-ink);transition:border-color var(--itm-transition)}
.i-option:hover{border-color:var(--itm-accent)}
.i-fields{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.i-fields input{padding:17px 16px;background:#fff;border:var(--itm-border-soft);font:400 16px/1.2 var(--itm-font-text);color:var(--itm-ink);outline:none;width:100%}
.i-fields input:focus{border-color:var(--itm-accent)}
.i-consent{display:flex;gap:12px;align-items:flex-start;margin-top:16px;font-size:var(--itm-xsmall);line-height:1.5;color:var(--itm-text-2)}
.i-consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--itm-accent)}
.i-summary{margin-top:8px;padding:12px 14px;background:var(--itm-bg-3);font-size:var(--itm-small);line-height:1.5;color:var(--itm-text-2)}
.i-summary b{color:var(--itm-ink)}
.i-back{margin-top:16px;padding:8px 0;background:transparent;border:0;font:400 12px/1 var(--itm-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--itm-text-2)}
.i-errors{margin-top:12px;font-size:var(--itm-xsmall);line-height:1.5;color:var(--itm-accent)}
[hidden]{display:none !important}

.i-footer{padding:32px var(--itm-page-x) 110px;background:var(--itm-ink);color:#fff}
.i-footer .i-logo{color:#fff}
.i-footer p{margin-top:12px;font-size:var(--itm-small);line-height:1.6;color:var(--itm-text-inv)}
.i-footer p a{color:#fff}
.i-footer nav{display:flex;flex-wrap:wrap;gap:14px 24px;margin-top:20px}
.i-footer nav a{font-size:var(--itm-small);color:var(--itm-text-inv)}
.i-footer nav a:hover{color:#fff}

.i-sticky{position:sticky;bottom:0;z-index:var(--itm-z-sticky-cta);display:flex;gap:10px;padding:12px 16px 16px;background:rgba(255,255,255,.96);border-top:var(--itm-border)}
.i-sticky .i-btn{flex:1;width:auto;padding:17px;font-size:var(--itm-body-sm)}
.i-sticky__tg{width:56px;height:52px;display:flex;align-items:center;justify-content:center;border:var(--itm-border-soft);font:700 11px/1 var(--itm-font-mono);color:var(--itm-ink)}

.i-related{margin-top:var(--itm-s9)}
.i-related ul{display:flex;flex-direction:column;gap:1px;margin-top:var(--itm-s7);background:var(--itm-line);border:var(--itm-border)}
.i-related a{display:block;padding:16px 18px;background:#fff;font:500 var(--itm-body-sm)/1.4 var(--itm-font-text);color:var(--itm-ink)}
.i-related a:hover{color:var(--itm-accent)}

@media (min-width:641px){
  .i-wrap{max-width:600px;padding-left:var(--itm-page-x-md);padding-right:var(--itm-page-x-md)}
  .i-h1{font-size:42px}
  .i-h2{font-size:32px}
  .i-stack{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .i-stack--full{grid-template-columns:1fr}
}

@media (min-width:1024px){
  .i-wrap{max-width:var(--itm-container);padding-left:var(--itm-page-x-lg);padding-right:var(--itm-page-x-lg)}
  .i-section{padding-top:var(--itm-section-y-lg);padding-bottom:var(--itm-section-y-lg)}
  .i-header{height:var(--itm-header-h-lg);padding:0 var(--itm-page-x-lg)}
  .i-burger{display:none}
  .i-header__nav{display:flex;gap:26px;margin-right:auto;margin-left:20px}
  .i-header__nav a{font:500 var(--itm-small)/1 var(--itm-font-text);color:var(--itm-text-2)}
  .i-header__nav a:hover{color:var(--itm-ink)}
  .i-header__cta{display:block;width:auto;padding:11px 20px;font-size:var(--itm-xsmall)}
  .i-menu{display:none !important}
  .i-sticky{display:none}
  .i-footer{padding-bottom:44px}

  .i-trust{border:0}
  .i-trust div{background:var(--itm-bg-2)}

  .i-stack{grid-template-columns:repeat(3,1fr);gap:26px}
  .i-stack--2{grid-template-columns:1fr 1fr}
  .i-stack--4{grid-template-columns:repeat(2,1fr)}
  .i-numlist{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--itm-line);border:var(--itm-border)}
  .i-numlist li{padding:28px 24px;background:#fff;border:0}
  .i-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
  .i-ba{display:grid;grid-template-columns:1fr 1fr}
  .i-ba__col{border-bottom:0;border-right:var(--itm-border)}
  .i-ba__col:last-child{border-right:0}
  .i-quiz{max-width:720px;margin-left:auto;margin-right:auto}
  .i-related ul{display:grid;grid-template-columns:1fr 1fr;gap:1px}
}