/* ============================================================
   ООО «СПЕЦПРОЕКТ» — дизайн-система v1.0
   Чистый CSS, без фреймворков. Токены → база → компоненты → секции.
   ============================================================ */

/* ---------- 1. ТОКЕНЫ ---------- */
:root{
  /* поверхности и фон */
  --bg:#F4F6F8; --surface:#FFFFFF; --surface-2:#ECEFF3;
  /* текст */
  --text:#11151A; --text-muted:#5A6573;
  /* акцент (стальной-синий) */
  --accent:#1E5BFF; --accent-600:#0E45D6; --accent-700:#0B37AC;
  --accent-soft:#E7EEFF; --accent-contrast:#FFFFFF;
  /* линии */
  --border:#DCE1E8; --line:#C7CED7; --line-faint:rgba(17,21,26,.06);
  /* тёмная база */
  --ink:#11151A; --ink-2:#1A1F26; --ink-border:#2A313B;
  --on-ink:#E6EAEF; --on-ink-muted:#8A95A3; --accent-on-ink:#4E83FF;
  /* семантика */
  --success:#1FA36B; --success-soft:#E3F5EC;
  --warning:#E08A00; --warning-soft:#FBF0DC;
  --danger:#D33A2C; --danger-soft:#FBE6E3;
  --focus-ring:0 0 0 3px rgba(30,91,255,.35);

  /* шрифты */
  --font-display:'Unbounded','Inter',system-ui,sans-serif;
  --font-text:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs-eyebrow:clamp(.75rem,.72rem + .15vw,.8125rem);
  --fs-small:clamp(.8125rem,.79rem + .12vw,.875rem);
  --fs-body:clamp(1rem,.97rem + .15vw,1.0625rem);
  --fs-lead:clamp(1.125rem,1.06rem + .35vw,1.375rem);
  --fs-h6:clamp(1.0625rem,1.02rem + .2vw,1.1875rem);
  --fs-h5:clamp(1.1875rem,1.1rem + .4vw,1.4375rem);
  --fs-h4:clamp(1.375rem,1.25rem + .6vw,1.75rem);
  --fs-h3:clamp(1.625rem,1.4rem + 1.1vw,2.25rem);
  --fs-h2:clamp(2rem,1.6rem + 2vw,3.25rem);
  --fs-h1:clamp(2.5rem,1.9rem + 3.2vw,4.5rem);
  --fs-display:clamp(3rem,2rem + 5vw,6rem);

  /* сетка и пространство */
  --container:1240px; --container-wide:1440px;
  --gutter:clamp(1rem,.5rem + 2.5vw,2.5rem); --col-gap:24px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:160px;
  --section-y:clamp(64px,4rem + 4vw,128px);
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:20px; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(17,21,26,.06),0 1px 1px rgba(17,21,26,.04);
  --shadow-md:0 4px 12px rgba(17,21,26,.08),0 2px 4px rgba(17,21,26,.05);
  --shadow-lg:0 12px 32px rgba(17,21,26,.12),0 4px 10px rgba(17,21,26,.06);
  --shadow-accent:0 8px 24px rgba(30,91,255,.22);
  --bw:1px; --bw-strong:2px; --bw-tick:3px;

  /* движение */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-inout:cubic-bezier(.65,.05,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:150ms; --dur-base:300ms; --dur-slow:600ms;
  --nav-h:72px;
}
:root[data-accent="amber"]{
  --accent:#FF8A00; --accent-600:#E07700; --accent-700:#B85F00;
  --accent-soft:#FFF1DF; --accent-contrast:#11151A;
  --focus-ring:0 0 0 3px rgba(255,138,0,.40); --accent-on-ink:#FFB14D;
  --shadow-accent:0 8px 24px rgba(255,138,0,.24);
}

/* ---------- 2. БАЗА / RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-text); font-size:var(--fs-body); line-height:1.6;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button,input,textarea,select{font:inherit; color:inherit}
ul[class]{list-style:none; padding:0}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:none; box-shadow:var(--focus-ring); border-radius:var(--r-xs);
}
.no-scroll{overflow:hidden}

h1,h2,h3,h4{font-family:var(--font-display); color:var(--text); line-height:1.08;
  font-weight:700; letter-spacing:-.02em; margin:0 0 .5em; text-wrap:balance}
h1{font-size:var(--fs-h1); font-weight:800; letter-spacing:-.03em}
h2{font-size:var(--fs-h2); letter-spacing:-.025em}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4); font-weight:600}
h5{font-family:var(--font-display); font-size:var(--fs-h5); font-weight:600; line-height:1.2; letter-spacing:-.01em; margin:0 0 .4em}
h6{font-family:var(--font-display); font-size:var(--fs-h6); font-weight:600; line-height:1.25; margin:0 0 .4em}
p{margin:0 0 1em; max-width:68ch}
p:last-child{margin-bottom:0}
strong{font-weight:600}

/* ---------- 3. ЛЕЙАУТ ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.container--wide{max-width:var(--container-wide)}
.container--narrow{max-width:880px}
.section{padding-block:var(--section-y); position:relative}
.section--tint{background:var(--surface-2)}
.section--ink{background:var(--ink); color:var(--on-ink);
  --text:var(--on-ink); --text-muted:var(--on-ink-muted); --surface:var(--ink-2);
  --border:var(--ink-border); --accent:var(--accent-on-ink); --line-faint:rgba(255,255,255,.06)}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4,.section--ink h5,.section--ink h6{color:var(--on-ink)}
.grid{display:grid; gap:var(--col-gap)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* секционный заголовок */
.section-head{max-width:760px; margin-bottom:var(--s-8)}
.section-head--center{margin-inline:auto; text-align:center}
.section-head .lead{margin-top:var(--s-4)}

/* ---------- 4. ТЕКСТОВЫЕ РОЛИ ---------- */
.lead{font-size:var(--fs-lead); line-height:1.5; color:var(--text-muted); font-weight:400; max-width:62ch}
.small,small{font-size:var(--fs-small); line-height:1.45}
.muted{color:var(--text-muted)}
.eyebrow{font-family:var(--font-text); font-size:var(--fs-eyebrow); font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; color:var(--accent);
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:var(--s-4)}
.eyebrow::before{content:""; width:1.6rem; height:2px; background:var(--accent)}
.eyebrow--center{justify-content:center}

/* ---------- 5. КНОПКИ ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-text); font-weight:600; font-size:var(--fs-small); letter-spacing:.01em;
  line-height:1; padding:15px 26px; border-radius:var(--r-sm); border:var(--bw) solid transparent;
  background:var(--accent); color:var(--accent-contrast); cursor:pointer; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out)}
.btn:hover{background:var(--accent-600); transform:translateY(-2px); box-shadow:var(--shadow-accent)}
.btn:active{background:var(--accent-700); transform:translateY(0); box-shadow:none}
.btn .icon{width:18px;height:18px}
.btn--secondary{background:transparent; color:var(--text); border-color:var(--border)}
.btn--secondary:hover{background:var(--surface); border-color:var(--accent); color:var(--accent); box-shadow:var(--shadow-sm)}
.btn--secondary:active{background:var(--accent-soft)}
.btn--ghost{background:transparent; color:var(--text-muted); padding-inline:14px}
.btn--ghost:hover{color:var(--accent); background:var(--accent-soft); transform:none; box-shadow:none}
.btn--lg{padding:18px 34px; font-size:var(--fs-body)}
.btn--sm{padding:10px 16px}
.btn--block{width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center}
.section--ink .btn--secondary{color:var(--on-ink); border-color:var(--ink-border)}
.section--ink .btn--secondary:hover{background:rgba(255,255,255,.06); color:#fff; border-color:var(--accent-on-ink)}

/* ---------- 6. ХЕДЕР / НАВБАР ---------- */
.header{position:sticky; top:0; z-index:100}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff;
  padding:10px 16px; border-radius:0 0 var(--r-sm) 0; z-index:200}
.skip-link:focus{left:0}
.navbar{height:var(--nav-h); display:flex; align-items:center;
  background:rgba(244,246,248,.72); backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:height var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)}
.navbar.is-scrolled{height:64px; background:rgba(255,255,255,.94); box-shadow:var(--shadow-sm); border-bottom-color:var(--border)}
.navbar .container{display:flex; align-items:center; justify-content:space-between; gap:var(--s-5)}

/* лого-lockup */
.logo{display:inline-flex; align-items:center; gap:.65rem; color:var(--text); flex:none}
.logo__mark{width:38px; height:38px; color:var(--text); flex:none}
.logo__text{display:flex; flex-direction:column; align-items:flex-start; line-height:1}
.logo__name{font-family:var(--font-display); font-weight:600; font-size:1.06rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--text)}
.logo__sub{font-size:.575rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); margin-top:4px; white-space:nowrap}
@media(max-width:420px){.logo__sub{display:none}}

.nav{display:flex; align-items:center; gap:var(--s-6)}
.nav-list{display:flex; align-items:center; gap:var(--s-6)}
.nav-link{position:relative; font-weight:500; font-size:var(--fs-small); color:var(--text); padding:8px 2px;
  transition:color var(--dur-fast) var(--ease-out)}
.nav-link::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-base) var(--ease-out)}
.nav-link:hover{color:var(--accent)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.nav__cta{display:flex; align-items:center; gap:var(--s-4)}
.nav__phone{display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:var(--fs-small); color:var(--text)}
.nav__phone:hover{color:var(--accent)}
@media(max-width:1080px){.nav__phone span{display:none}}

/* бургер */
.burger{display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; position:relative; z-index:160}
.burger span{position:absolute; left:11px; width:22px; height:2px; background:var(--text); border-radius:2px;
  transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out), top var(--dur-base) var(--ease-out)}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger.is-open span:nth-child(1){top:21px; transform:rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){top:21px; transform:rotate(-45deg)}

@media (max-width:960px){
  /* backdrop-filter создаёт containing block для fixed → на мобиле убираем, чтобы меню-оверлей был на весь экран */
  .navbar,.navbar.is-scrolled{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--bg);
    box-shadow:var(--shadow-sm); border-bottom-color:var(--border)}
  .burger{display:block}
  .nav{position:fixed; inset:0; flex-direction:column; justify-content:center; gap:var(--s-7);
    background:var(--surface); transform:translateY(-100%); transition:transform var(--dur-base) var(--ease-out);
    padding:var(--s-9) var(--gutter); z-index:150; overflow-y:auto}
  .nav.is-open{transform:translateY(0)}
  .nav-list{flex-direction:column; align-items:center; gap:var(--s-5)}
  .nav-link{font-family:var(--font-display); font-size:var(--fs-h5); font-weight:600}
  .nav-link::after{display:none}
  .nav__cta{flex-direction:column; width:100%; max-width:340px; margin-top:var(--s-4)}
  .nav__cta .btn{width:100%; justify-content:center}
  .nav__phone{font-size:var(--fs-h6); justify-content:center}
  .nav__phone span{display:inline}
}

/* кнопки на телефоне — в столбик на всю ширину, длинные подписи переносятся */
@media (max-width:560px){
  .btn{white-space:normal; text-align:center}
  .btn-row{flex-direction:column; align-items:stretch}
  .btn-row .btn{width:100%; justify-content:center}
}

/* ---------- 7. HERO ---------- */
.hero{position:relative; overflow:hidden; padding-block:clamp(72px,8vw,128px); background:var(--bg)}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line-faint) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-faint) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(120% 80% at 72% 0%,#000 30%,transparent 75%);
  mask-image:radial-gradient(120% 80% at 72% 0%,#000 30%,transparent 75%)}
.hero::after{content:""; position:absolute; top:-22%; right:-12%; width:62vw; height:62vw; max-width:760px; max-height:760px;
  pointer-events:none; border-radius:50%; filter:blur(18px);
  background:radial-gradient(circle,rgba(30,91,255,.16),transparent 60%);
  transform:translate3d(var(--px,0),var(--py,0),0); transition:transform var(--dur-slow) var(--ease-out)}
:root[data-accent="amber"] .hero::after{background:radial-gradient(circle,rgba(255,138,0,.18),transparent 60%)}
.hero .container{position:relative; z-index:1}
.hero__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s-8); align-items:center}
@media(max-width:980px){.hero__grid{grid-template-columns:1fr; gap:var(--s-7)}}
.hero__title{margin-bottom:var(--s-5)}
.hero__lead{margin-bottom:var(--s-6); max-width:54ch}
.hero__badges{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-7)}
.hero__media{position:relative}

/* Hero: карточка предприятия */
.spec-card{position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:linear-gradient(158deg,#1c2533 0%,#11151A 60%); border:1px solid var(--ink-border);
  border-radius:var(--r-lg); padding:clamp(22px,2.4vw,32px); color:var(--on-ink); box-shadow:var(--shadow-lg)}
.spec-card::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:30px 30px; -webkit-mask-image:radial-gradient(120% 80% at 92% 0,#000,transparent 72%); mask-image:radial-gradient(120% 80% at 92% 0,#000,transparent 72%)}
.spec-card::after{content:""; position:absolute; top:-28%; right:-18%; width:62%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(78,131,255,.22),transparent 62%); pointer-events:none}
.spec-card>*{position:relative; z-index:1}
.spec-card__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:clamp(22px,3vw,30px)}
.spec-card__eyebrow{font-size:var(--fs-eyebrow); font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  color:var(--on-ink-muted); display:inline-flex; align-items:center; gap:.55rem}
.spec-card__eyebrow::before{content:""; width:1.2rem; height:2px; background:var(--accent-on-ink)}
.spec-card__chip{font-family:var(--font-display); font-weight:600; font-size:.78rem; letter-spacing:.1em;
  color:var(--accent-on-ink); border:1px solid rgba(78,131,255,.35); border-radius:var(--r-xs); padding:4px 11px}
.spec-card__hero{margin-bottom:clamp(20px,2.6vw,28px)}
.spec-card__okved{font-family:var(--font-display); font-weight:800; line-height:1; letter-spacing:-.04em;
  font-size:clamp(2.9rem,2rem + 3.4vw,4.4rem); color:#fff; font-variant-numeric:tabular-nums}
.spec-card__caption{margin-top:12px; color:var(--on-ink-muted); font-size:var(--fs-small); max-width:34ch}
.spec-card__list{display:flex; flex-direction:column; margin:0; border-top:1px solid rgba(255,255,255,.1)}
.spec-card__row{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08)}
.spec-card__row dt{color:var(--on-ink-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em}
.spec-card__row dd{margin:0; color:#fff; font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
.spec-card__foot{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:clamp(22px,3vw,28px)}
.spec-card__foot .badge{background:rgba(78,131,255,.12); color:var(--accent-on-ink); border-color:rgba(78,131,255,.3)}
.spec-card__foot .badge::before{background:var(--accent-on-ink)}
.spec-card__foot .badge--ghost{background:transparent; color:var(--on-ink-muted); border-color:var(--ink-border)}
.spec-card__foot .badge--ghost::before{background:var(--on-ink-muted)}

/* ---------- 8. БЕЙДЖИ ---------- */
.badge{display:inline-flex; align-items:center; gap:.45rem; font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.04em;
  padding:7px 13px; border-radius:var(--r-xs); background:var(--accent-soft); color:var(--accent-600);
  border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.badge::before{content:""; width:6px; height:6px; border-radius:1px; background:var(--accent); transform:rotate(45deg)}
.badge--success{background:var(--success-soft); color:#157A4F; border-color:#9CD9BC}
.badge--success::before{background:var(--success)}
.badge--ghost{background:transparent; color:var(--text-muted); border-color:var(--border)}
.badge--ghost::before{background:var(--text-muted)}
.section--ink .badge{background:rgba(78,131,255,.12); color:var(--accent-on-ink); border-color:rgba(78,131,255,.3)}
.section--ink .badge::before{background:var(--accent-on-ink)}

/* ---------- 9. КАРТОЧКИ ---------- */
.card{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--s-6); overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)}
.card::before{content:""; position:absolute; top:0; left:0; height:3px; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform var(--dur-base) var(--ease-out)}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--accent)}
.card:hover::before{transform:scaleX(1)}
.card__icon{width:52px; height:52px; display:grid; place-items:center; border-radius:var(--r-sm);
  background:var(--accent-soft); color:var(--accent); margin-bottom:var(--s-5);
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out)}
.card:hover .card__icon{background:var(--accent); color:var(--accent-contrast)}
.card__icon .icon{width:26px; height:26px}
.card__title{font-size:var(--fs-h5); margin-bottom:var(--s-3)}
.card__text{color:var(--text-muted); font-size:var(--fs-small); margin-bottom:var(--s-4)}
.card__list{display:flex; flex-direction:column; gap:8px; font-size:var(--fs-small)}
.card__list li{position:relative; padding-left:20px; color:var(--text-muted)}
.card__list li::before{content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:1px;
  background:var(--accent); transform:rotate(45deg)}
.card__link{display:inline-flex; align-items:center; gap:.4rem; margin-top:var(--s-5); font-weight:600;
  font-size:var(--fs-small); color:var(--accent)}
.card__link .icon{width:16px; height:16px; transition:transform var(--dur-fast) var(--ease-out)}
.card:hover .card__link .icon{transform:translateX(4px)}
.card--num{counter-increment:step}
.card__num{font-family:var(--font-display); font-size:var(--fs-h3); font-weight:700; color:var(--line); letter-spacing:-.04em; margin-bottom:var(--s-3)}

/* мини-карточка преимущества */
.feature{display:flex; gap:var(--s-4); align-items:flex-start}
.feature__icon{flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:var(--r-sm);
  background:var(--accent-soft); color:var(--accent)}
.feature__icon .icon{width:24px; height:24px}
.feature__title{font-size:var(--fs-h6); margin-bottom:6px}
.feature__text{color:var(--text-muted); font-size:var(--fs-small)}

/* ---------- 10. СТАТИСТИКА / СЧЁТЧИКИ ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--col-gap)}
@media(max-width:780px){.stats{grid-template-columns:repeat(2,1fr); gap:var(--s-6)}}
.stat{padding-top:var(--s-5); border-top:var(--bw-strong) solid currentColor}
.stat__num{font-family:var(--font-display); font-size:clamp(2.5rem,1.6rem + 3.4vw,3.8rem); font-weight:700;
  letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.stat__num .suffix{color:var(--accent)}
.stat__label{margin-top:var(--s-3); color:var(--text-muted); font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.06em}

/* ---------- Ключевое (highlights) ---------- */
.highlights{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--col-gap)}
@media(max-width:820px){.highlights{grid-template-columns:repeat(2,1fr); gap:var(--s-6)}}
@media(max-width:460px){.highlights{grid-template-columns:1fr}}
.highlight{position:relative; padding-top:var(--s-5); border-top:2px solid var(--text)}
.highlight__icon{width:46px; height:46px; display:grid; place-items:center; border-radius:var(--r-sm);
  background:var(--accent-soft); color:var(--accent); margin-bottom:var(--s-5);
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out)}
.highlight:hover .highlight__icon{background:var(--accent); color:var(--accent-contrast)}
.highlight__icon .icon{width:24px; height:24px}
.highlight__title{font-family:var(--font-display); font-size:var(--fs-h5); font-weight:600; line-height:1.15; letter-spacing:-.01em; margin-bottom:8px}
.highlight__text{color:var(--text-muted); font-size:var(--fs-small); max-width:26ch}

/* ---------- 11. ЭТАПЫ (process) ---------- */
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--col-gap)}
@media(max-width:880px){.steps{grid-template-columns:1fr}}
.step{position:relative; padding:var(--s-6); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md)}
.step::before{counter-increment:step; content:"0" counter(step); font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-h4); color:var(--accent); letter-spacing:-.03em; display:block; margin-bottom:var(--s-3)}
.step__title{font-size:var(--fs-h6); margin-bottom:var(--s-2)}
.step__text{color:var(--text-muted); font-size:var(--fs-small)}

/* ---------- 12. АККОРДЕОН FAQ ---------- */
.acc{border-top:1px solid var(--border)}
.acc__item{border-bottom:1px solid var(--border)}
.acc__head{width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
  padding:var(--s-5) 0; background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-h6); color:var(--text);
  transition:color var(--dur-fast) var(--ease-out)}
.acc__head:hover{color:var(--accent)}
.acc__icon{flex:none; position:relative; width:20px; height:20px}
.acc__icon::before,.acc__icon::after{content:""; position:absolute; background:var(--accent); border-radius:2px}
.acc__icon::before{top:9px; left:0; width:20px; height:2px}
.acc__icon::after{left:9px; top:0; width:2px; height:20px; transition:transform var(--dur-base) var(--ease-out)}
.acc__item.is-open .acc__icon::after{transform:rotate(90deg)}
.acc__body{overflow:hidden; max-height:0; transition:max-height var(--dur-base) var(--ease-inout)}
.acc__body-inner{padding-bottom:var(--s-5); color:var(--text-muted); max-width:80ch}

/* ---------- 13. РЕКВИЗИТЫ ---------- */
.req{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-6)}
.req__row{display:grid; grid-template-columns:230px 1fr auto; gap:var(--s-4); padding:var(--s-4) 0;
  border-bottom:1px dashed var(--border); align-items:baseline}
.req__row:last-child{border-bottom:0}
.req__key{color:var(--text-muted); font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.06em}
.req__val{font-weight:600; font-variant-numeric:tabular-nums}
.req__copy{border:0; background:transparent; color:var(--accent); cursor:pointer; padding:4px; border-radius:var(--r-xs);
  display:inline-grid; place-items:center; opacity:.7; transition:opacity var(--dur-fast)}
.req__copy:hover{opacity:1}
.req__copy .icon{width:16px; height:16px}
@media(max-width:600px){.req__row{grid-template-columns:1fr auto; gap:2px 8px}.req__key{grid-column:1/-1}}

/* ---------- 14. ФОРМА ---------- */
.form{display:grid; gap:var(--s-5)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5)}
@media(max-width:560px){.form__row{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column}
.label{font-size:var(--fs-small); font-weight:500; color:var(--text-muted); margin-bottom:var(--s-2)}
.label .req-mark{color:var(--danger)}
.input,.textarea{width:100%; font-size:var(--fs-body); color:var(--text); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-sm); padding:14px 16px; line-height:1.4;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)}
.input::placeholder,.textarea::placeholder{color:#9AA4B0}
.input:hover,.textarea:hover{border-color:var(--line)}
.input:focus,.textarea:focus{outline:none; border-color:var(--accent); box-shadow:var(--focus-ring)}
.input:user-invalid,.textarea:user-invalid{border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft)}
.textarea{min-height:140px; resize:vertical}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-small); color:var(--text-muted)}
.consent input{margin-top:3px; accent-color:var(--accent); width:18px; height:18px; flex:none}
.consent a{color:var(--accent); text-decoration:underline}
.form__note{font-size:var(--fs-small); color:var(--text-muted)}
.form-status{font-size:var(--fs-small); padding:12px 16px; border-radius:var(--r-sm); display:none}
.form-status.is-ok{display:block; background:var(--success-soft); color:#157A4F}
.form-status.is-err{display:block; background:var(--danger-soft); color:var(--danger)}

/* ---------- 15. ХЛЕБНЫЕ КРОШКИ ---------- */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); font-size:var(--fs-small); color:var(--text-muted)}
.crumbs a{color:var(--text-muted); transition:color var(--dur-fast)}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{color:var(--line)}
.crumbs [aria-current="page"]{color:var(--text); font-weight:500}

/* подзаголовок страницы (page hero) */
.page-hero{position:relative; overflow:hidden; padding-block:var(--s-9) var(--s-8); background:var(--surface-2)}
.page-hero::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:linear-gradient(var(--line-faint) 1px,transparent 1px),linear-gradient(90deg,var(--line-faint) 1px,transparent 1px);
  background-size:40px 40px; -webkit-mask-image:radial-gradient(120% 90% at 80% 0%,#000 20%,transparent 70%); mask-image:radial-gradient(120% 90% at 80% 0%,#000 20%,transparent 70%)}
.page-hero .container{position:relative; z-index:1}
.page-hero__title{margin:var(--s-5) 0 var(--s-4)}
.page-hero .lead{max-width:60ch}

/* ---------- 16. МЕДИА / ПЛЕЙСХОЛДЕРЫ ---------- */
.media{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; background:var(--surface-2)}
.media img{width:100%; height:100%; object-fit:cover;
  filter:grayscale(.2) contrast(1.05) saturate(.85);
  transition:filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out)}
.media::after{content:""; position:absolute; inset:0; background:var(--accent); mix-blend-mode:multiply; opacity:.14;
  transition:opacity var(--dur-base) var(--ease-out)}
.media:hover img{filter:none; transform:scale(1.03)}
.media:hover::after{opacity:0}

/* угловые маркеры (видоискатель) */
.framed{position:relative}
.framed::before,.framed::after{content:""; position:absolute; width:18px; height:18px; z-index:2; pointer-events:none}
.framed::before{top:10px; left:10px; border-top:2px solid var(--accent); border-left:2px solid var(--accent)}
.framed::after{bottom:10px; right:10px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent)}

/* плейсхолдер «чертёж» */
.ph{aspect-ratio:4/3; border-radius:var(--r-lg); position:relative; overflow:hidden;
  border:1px solid var(--border); display:grid; place-items:center; text-align:center; color:var(--text-muted);
  background:linear-gradient(135deg,var(--ink),var(--ink-2))}
.ph::before{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:26px 26px}
.ph__inner{position:relative; z-index:1; color:var(--on-ink-muted); display:grid; gap:10px; justify-items:center; padding:var(--s-5)}
.ph__inner .icon{width:40px; height:40px; color:var(--accent-on-ink)}
.ph__label{font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:.18em; font-weight:600}
.ph__code{position:absolute; right:18px; bottom:14px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(2rem,5vw,3.4rem); color:rgba(255,255,255,.06); letter-spacing:-.04em; z-index:1}

/* ---------- 17. CTA-полоса ---------- */
.cta{position:relative; overflow:hidden}
.cta__box{background:linear-gradient(135deg,var(--ink),var(--ink-2)); border-radius:var(--r-lg);
  padding:clamp(32px,5vw,64px); color:var(--on-ink); position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.4fr auto; gap:var(--s-6); align-items:center}
.cta__box::before{content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px; -webkit-mask-image:radial-gradient(100% 100% at 100% 0,#000,transparent 70%); mask-image:radial-gradient(100% 100% at 100% 0,#000,transparent 70%)}
.cta__box>*{position:relative; z-index:1}
.cta__box h2,.cta__box h3{color:#fff; margin-bottom:var(--s-3)}
.cta__box .lead{color:var(--on-ink-muted)}
.cta__box .btn--secondary{color:var(--on-ink); border-color:var(--ink-border)}
.cta__box .btn--secondary:hover{background:rgba(255,255,255,.08); color:#fff; border-color:var(--accent-on-ink)}
.cta__actions{display:flex; flex-direction:column; gap:var(--s-3)}
@media(max-width:820px){.cta__box{grid-template-columns:1fr}.cta__actions{flex-direction:row; flex-wrap:wrap}}

/* ---------- 18. FOOTER ---------- */
.footer{background:var(--ink); color:var(--on-ink-muted); padding-block:var(--s-9) var(--s-6); border-top:2px solid var(--accent)}
.footer a{color:var(--on-ink); transition:color var(--dur-fast)}
.footer a:hover{color:var(--accent-on-ink)}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:var(--s-7); padding-bottom:var(--s-8)}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.footer__grid{grid-template-columns:1fr}}
.footer__brand .logo__name,.footer .logo__mark{color:var(--on-ink)}
.footer__about{margin-top:var(--s-4); color:var(--on-ink-muted); font-size:var(--fs-small); max-width:36ch}
.footer__badges{display:flex; gap:var(--s-2); margin-top:var(--s-5); flex-wrap:wrap}
.footer__col{min-width:0}
.footer__title{color:var(--on-ink); font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.12em; margin-bottom:var(--s-4)}
.footer__list{display:flex; flex-direction:column; gap:12px; font-size:var(--fs-small)}
.footer__contacts{display:flex; flex-direction:column; gap:12px; font-size:var(--fs-small); font-style:normal}
.footer__contacts a{display:inline-flex; gap:.5rem; align-items:flex-start}
.footer__contacts .icon{width:18px; height:18px; color:var(--accent-on-ink); flex:none; margin-top:2px}
.footer__bottom{border-top:1px solid var(--ink-border); padding-top:var(--s-5); display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:var(--s-3); font-size:var(--fs-small)}
.footer__legal{color:var(--on-ink-muted)}

/* ---------- 19. SCROLL-REVEAL ---------- */
[data-reveal]{opacity:0; transform:translateY(24px);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  transition-delay:calc(var(--i,0)*80ms); will-change:opacity,transform}
[data-reveal].is-visible{opacity:1; transform:none}

/* ---------- 20. УТИЛИТЫ ---------- */
.list-check{display:grid; gap:12px}
.list-check li{position:relative; padding-left:30px; color:var(--text-muted)}
.list-check li::before{content:""; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:var(--r-xs);
  background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231E5BFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat}
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-8); align-items:center}
.split--media-left{grid-template-columns:.9fr 1.1fr}
@media(max-width:900px){.split,.split--media-left{grid-template-columns:1fr; gap:var(--s-6)}}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.text-center{text-align:center}
.divider{height:1px; border:0; background:var(--border); margin-block:var(--s-7)}
.tag{display:inline-block; font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:var(--r-xs)}

/* ---------- 21. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important; transform:none!important}
  .hero::after{transform:none!important}
}