:root{
  --bg:#0B0C0E; --bg-alt:#101216; --panel:#15181D; --line:#242830;
  --ink:#F2F4F7; --ink-dim:#A3ABB8; --ink-mute:#6E7885;
  --amber:#FF7A18; --amber-2:#FFB020; --hot:#FF4D00;
  --radius:14px; --wrap:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; line-height:1.15; letter-spacing:-.02em; font-weight:800}
h1{font-size:clamp(30px,4.4vw,58px); max-width:16ch}
h2{font-size:clamp(24px,2.6vw,38px)}
h3{font-size:19px; font-weight:700}
p{margin:0}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(11,12,14,.92);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; gap:28px; min-height:74px}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto}
.brand-mark{width:34px; height:34px; filter:drop-shadow(0 0 10px rgba(255,122,24,.35))}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text b{font-size:20px; letter-spacing:.01em}
.brand-text i{font-style:normal; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute)}
.nav{display:flex; gap:24px; font-size:14.5px; color:var(--ink-dim)}
.nav a{position:relative; padding:4px 0}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:linear-gradient(90deg,var(--amber),var(--amber-2)); transition:right .2s;
}
.nav a:hover{color:#fff}
.nav a:hover::after{right:0}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:10px; font-weight:700; font-size:14.5px;
  border:1px solid transparent; transition:transform .12s, background .2s, border-color .2s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--hot),var(--amber-2)); color:#170A00}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:#3A404A; background:#171A20}
.btn-phone{border-color:#3A3020; color:var(--amber-2); background:#191308; font-variant-numeric:tabular-nums}
.btn-phone:hover{background:#221806}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-bg{
  position:absolute; inset:0;
  background:url("../img/dark/hero-dark.webp") center 35%/cover no-repeat;
  opacity:.66;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 16% 18%, rgba(255,77,0,.18), transparent 70%),
    linear-gradient(100deg, rgba(11,12,14,.94) 0%, rgba(11,12,14,.80) 46%, rgba(11,12,14,.45) 100%),
    linear-gradient(180deg, rgba(11,12,14,.30) 0%, rgba(11,12,14,.80) 70%, var(--bg) 100%);
}
.hero-inner{position:relative; padding:clamp(56px,8vw,116px) 22px clamp(40px,5vw,64px)}
.eyebrow{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-2);
  font-weight:700; margin-bottom:16px;
}
.lead{margin-top:20px; max-width:60ch; font-size:clamp(15px,1.25vw,18px); color:#CFD5DE}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.facts{
  list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px; margin:44px 0 0; padding:22px 0 0; border-top:1px solid var(--line);
}
.facts li{display:flex; flex-direction:column; gap:4px}
.facts b{font-size:clamp(20px,2vw,27px); letter-spacing:-.02em; color:#fff}
.facts span{font-size:13px; color:var(--ink-mute)}

/* ---------- sections ---------- */
.section{padding:clamp(48px,6vw,88px) 0}
.section-alt{background:var(--bg-alt); border-block:1px solid var(--line)}
.section-head{max-width:70ch; margin-bottom:34px}
.section-sub{margin-top:14px; color:var(--ink-dim); font-size:16px}

/* ---------- cards ---------- */
.grid{display:grid; gap:18px}
.cards{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
@media (min-width:1080px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .2s, transform .2s;
}
.card:hover{border-color:#3A2A18; transform:translateY(-2px)}
.card img{aspect-ratio:4/3; width:100%; object-fit:cover; background:#0E1013}
.card h3{padding:20px 20px 0}
.card h3 span{display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-2); margin-top:6px}
.card p{padding:12px 20px 22px; color:var(--ink-dim); font-size:14.5px}

/* ---------- why ---------- */
.why-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.why-item{padding:26px 24px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius)}
.why-num{font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--amber); display:block; margin-bottom:14px}
.why-item h3{margin-bottom:10px}
.why-item p{color:var(--ink-dim); font-size:14.5px}

/* ---------- specs ---------- */
.spec-block{margin-bottom:26px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.spec-block h3{padding:20px 22px; border-bottom:1px solid var(--line); font-size:17px}
table{width:100%; border-collapse:collapse; font-size:14.5px}
th,td{padding:13px 22px; text-align:left; vertical-align:top; border-bottom:1px solid #1D2128}
tr:last-child th,tr:last-child td{border-bottom:none}
th{color:var(--ink-mute); font-weight:600; width:52%}
td{color:#E4E8EE}

/* ---------- steps ---------- */
.steps{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:0; padding:0; counter-reset:step}
.steps li{position:relative; padding:26px 24px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius)}
.steps li span{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; margin-bottom:14px;
  background:linear-gradient(135deg,var(--hot),var(--amber-2)); color:#170A00; font-weight:800; font-size:14px;
}
.steps p{margin-top:8px; color:var(--ink-dim); font-size:14.5px}

/* ---------- contacts ---------- */
.contacts{display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:start}
.contact-list{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px}
.contact-list li{display:grid; gap:2px; font-size:16px}
.contact-list span{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute)}
.contact-list a{border-bottom:1px solid #2C3038; padding-bottom:2px}
.contact-list a:hover{color:var(--amber-2); border-color:var(--amber)}
.contact-form{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.contact-form h3{margin-bottom:18px}
label{display:block; margin-bottom:14px; font-size:13px; color:var(--ink-dim)}
input,textarea{
  width:100%; margin-top:7px; padding:12px 14px; border-radius:9px;
  background:#0E1116; border:1px solid #262B33; color:var(--ink); font:inherit; font-size:14.5px;
}
input:focus,textarea:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,122,24,.14)}
textarea{resize:vertical}
.form-note{margin-top:12px; font-size:12.5px; color:var(--ink-mute)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); background:#08090B; padding:40px 0}
.footer-inner{display:grid; grid-template-columns:1.2fr 1fr .8fr; gap:26px; font-size:13.5px; color:var(--ink-mute)}
.footer-inner b{color:#fff; font-size:15px}
.footer-requisites p,.footer-contacts p{margin:6px 0}
.footer-contacts a{display:block; margin-bottom:6px; color:var(--ink-dim)}
.footer-contacts a:hover{color:var(--amber-2)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav{display:none}
  .contacts{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .header-inner{min-height:64px; gap:12px}
  .brand-mark{width:28px; height:28px}
  .brand-text b{font-size:17px}
  .brand-text i{display:none}
  .btn-phone{padding:9px 12px; font-size:12.5px}
  .facts{grid-template-columns:1fr 1fr; gap:14px}
  .footer-inner{grid-template-columns:1fr}
  .contact-form{padding:20px}
  th{width:auto}
  th,td{padding:11px 16px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; scroll-behavior:auto!important}
}