/* Layout: серверная стойка — герой в виде юнитов с индикаторами, ниже спокойные секции на «стальной» бумаге */
:root{
  --bg:#eef1f3; --surface:#ffffff; --ink:#132029; --muted:#55636d; --line:#d3dade;
  --accent:#e35d12; --accent-ink:#ffffff; --rack:#1b2a35; --rack-2:#24384a; --led:#3fbf6b; --led-off:#3a4b57;
  --f-display:"Unbounded","Golos Text",system-ui,sans-serif;
  --f-body:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --radius:6px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f171d; --surface:#16222b; --ink:#e7ecef; --muted:#9aa8b1; --line:#2a3a46;
  --accent:#ff7a33; --accent-ink:#1a0d04; --rack:#0a1116; --rack-2:#16232d; --led:#4fd47d; --led-off:#2c3a44; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f171d; --surface:#16222b; --ink:#e7ecef; --muted:#9aa8b1; --line:#2a3a46;
  --accent:#ff7a33; --accent-ink:#1a0d04; --rack:#0a1116; --rack-2:#16232d; --led:#4fd47d; --led-off:#2c3a44; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;margin:0}
.wrap{max-width:1140px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;text-wrap:balance;margin:0}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:700}
h3{font-size:1.1rem;font-weight:500}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--f-mono)}
.eyebrow{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
section{padding-block:72px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{font-family:var(--f-display);font-weight:700;font-size:1.05rem;text-decoration:none;display:flex;align-items:center;gap:10px}
.logo i{display:inline-grid;place-items:center;width:30px;height:30px;background:var(--rack);border-radius:4px;font-style:normal}
.logo i::before{content:"";width:14px;height:3px;background:var(--led);box-shadow:0 6px 0 var(--led-off),0 -6px 0 var(--accent)}
.nav{display:flex;gap:22px;font-size:.95rem}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.phone{font-family:var(--f-mono);font-weight:600;text-decoration:none;white-space:nowrap}
@media (max-width:860px){.nav{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:var(--radius);font:600 1rem var(--f-body);text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}

/* hero */
.hero{padding-block:56px 64px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero .wrap>*{min-width:0}
.hero h1{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:700;margin-top:14px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{margin-top:20px;color:var(--muted);font-size:1.12rem;max-width:34em}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.facts{display:flex;flex-wrap:wrap;gap:28px;margin-top:36px}
.facts div{display:flex;flex-direction:column}
.facts b{font-family:var(--f-display);font-size:1.7rem;font-variant-numeric:tabular-nums}
.facts span{font-size:.88rem;color:var(--muted)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}

/* rack */
.rack{background:var(--rack);border-radius:10px;padding:14px 26px;position:relative;box-shadow:0 30px 60px -30px rgba(10,20,30,.55)}
.rack::before,.rack::after{content:"";position:absolute;top:14px;bottom:14px;width:10px;background:repeating-linear-gradient(to bottom,#4a5c69 0 3px,transparent 3px 12px)}
.rack::before{left:8px}.rack::after{right:8px}
.unit{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;background:var(--rack-2);border:1px solid #2f4557;border-radius:3px;padding:12px 14px;margin-block:6px;color:#dfe7ec;font-family:var(--f-mono);font-size:.82rem}
.unit .u{color:#7d8f9c;font-size:.7rem}
.unit .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leds{display:flex;gap:5px}
.leds s{width:7px;height:7px;border-radius:50%;background:var(--led);text-decoration:none}
.leds s.off{background:var(--led-off)}
.leds s.amber{background:var(--accent)}
.leds s.blink{animation:blink 1.4s steps(2,start) infinite}
.leds s.blink2{animation:blink .9s steps(2,start) infinite}
@keyframes blink{to{opacity:.25}}
.unit.ports .name{display:flex;gap:4px}
.unit.ports .name i{width:12px;height:9px;background:#0f1a22;border:1px solid #3d5466;border-radius:1px}
.unit.ports .name i:nth-child(3n){border-color:var(--accent)}
.unit.ports .name i:nth-child(4n+1){border-color:var(--led)}
.rack-cap{margin-top:10px;color:#8ea0ad;font-family:var(--f-mono);font-size:.72rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.leds s{animation:none!important}}

/* services */
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:36px}
.sec-head p{color:var(--muted);max-width:30em}
.main-services{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.svc-main{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:32px;display:flex;flex-direction:column;gap:16px}
.svc-main .tag{align-self:flex-start;font-family:var(--f-mono);font-size:.74rem;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.svc-main h3{font-size:1.45rem}
.svc-main ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.svc-main li{padding-left:22px;position:relative}
.svc-main li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--accent)}
.svc-main .price{margin-top:auto;padding-top:16px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.svc-main .price b{font-family:var(--f-display);font-size:1.3rem;font-variant-numeric:tabular-nums}
.svc-main .price span{color:var(--muted);font-size:.9rem}
.more-services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.svc{padding:24px;border-top:3px solid var(--ink);background:var(--surface);border-radius:0 0 8px 8px;display:flex;flex-direction:column;gap:10px}
.svc p{color:var(--muted);font-size:.96rem}
.svc .from{margin-top:auto;font-family:var(--f-mono);font-size:.9rem}
@media (max-width:860px){.main-services,.more-services{grid-template-columns:1fr}}

/* asterisk detail */
.pbx{background:var(--rack);color:#e3eaee;border-radius:12px;padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.pbx>*{min-width:0}
.pbx h2{color:#fff}
.pbx p{color:#aebcc5;margin-top:14px}
.pbx pre{margin:0;background:#0b141a;border:1px solid #2f4557;border-radius:8px;padding:18px;font:400 .82rem/1.65 var(--f-mono);color:#cfe0ea;overflow-x:auto}
.pbx pre .c{color:#6f8796}.pbx pre .k{color:#ff9a5c}.pbx pre .g{color:#6fe39a}
@media (max-width:860px){.pbx{grid-template-columns:1fr;padding:28px 22px}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s;border-top:1px solid var(--line)}
.step{padding:24px 18px 0 0;position:relative}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--f-mono);font-size:.8rem;color:var(--accent);display:block;margin-bottom:10px}
.step::after{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.step p{color:var(--muted);font-size:.94rem;margin-top:6px}
@media (max-width:860px){.steps{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--line);padding-left:22px}.step{padding:0 0 22px}.step::after{left:-27px;top:4px}}

/* prices */
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:.98rem}
th,td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--line)}
th{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400}
td:last-child,th:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-family:var(--f-mono)}
tr:last-child td{border-bottom:0}
.note{color:var(--muted);font-size:.88rem;margin-top:12px}

/* area */
.area{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.area>*{min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips span{border:1px solid var(--line);background:var(--surface);padding:7px 14px;border-radius:99px;font-size:.94rem}
.chips span.hot{border-color:var(--accent);color:var(--accent)}
.area .times{display:grid;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.times div{display:flex;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.times div:last-child{border-bottom:0}
.times b{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:860px){.area{grid-template-columns:1fr}}

/* app */
.app{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:36px;background:var(--surface)}
.app>*{min-width:0}
.phone-mock{width:200px;aspect-ratio:9/18;max-width:100%;background:var(--rack);border-radius:28px;padding:12px;display:flex;flex-direction:column;gap:8px}
.phone-mock .scr{flex:1;background:var(--bg);border-radius:18px;padding:14px 12px;display:flex;flex-direction:column;gap:8px;font-size:.72rem}
.scr .t{font-family:var(--f-display);font-size:.8rem}
.scr .row{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px;display:flex;justify-content:space-between;gap:6px}
.scr .st{font-family:var(--f-mono);color:var(--led)}
.scr .st.w{color:var(--accent)}
.scr .b{margin-top:auto;background:var(--accent);color:var(--accent-ink);text-align:center;border-radius:8px;padding:9px;font-weight:600}
.app ul{margin:16px 0 0;padding-left:20px;color:var(--muted)}
.app li{margin-block:4px}
@media (max-width:760px){.app{grid-template-columns:1fr;padding:24px}.phone-mock{margin:0 auto}}

/* faq */
.faq{display:grid;gap:10px;max-width:820px}
details{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:0 20px}
summary{cursor:pointer;padding:18px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::after{content:"+";font-family:var(--f-mono);color:var(--accent);font-size:1.2rem;line-height:1}
details[open] summary::after{content:"−"}
details p{padding-bottom:18px;color:var(--muted)}

/* form */
.order{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.order>*{min-width:0}
form{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px;display:grid;gap:16px}
label{display:grid;gap:6px;font-size:.9rem;font-weight:500}
input,select,textarea{font:inherit;font-size:1rem;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);width:100%}
textarea{min-height:96px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ok{background:color-mix(in srgb,var(--led) 15%,transparent);border:1px solid var(--led);border-radius:8px;padding:14px;font-size:.95rem}
.contact-list{display:grid;gap:14px;margin-top:22px}
.contact-list div{display:flex;flex-direction:column}
.contact-list span{font-size:.85rem;color:var(--muted)}
.contact-list b{font-family:var(--f-mono);font-size:1.1rem}
@media (max-width:860px){.order{grid-template-columns:1fr}.row2{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:32px 96px;color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}

.callbar{display:none}
@media (max-width:760px){
  .callbar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line)}
  .callbar .btn{flex:1;padding:12px}
  .top .phone{display:none}
}