:root { color-scheme: dark; --bg:#070809; --panel:#0d0f11; --panel-2:#121518; --line:#292d31; --line-hi:#454b51; --text:#f1f3f4; --muted:#969da4; --silver:#cfd4d8; --accent:#e6eaed; --danger:#e6b7ad; --success:#b8d5c4; --radius:2px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; line-height:1.5; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:20; padding:10px 14px; background:var(--text); color:var(--bg); }
.skip-link:focus { top:16px; }
.topbar { position:sticky; top:0; z-index:10; min-height:68px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:0 4vw; background:rgba(7,8,9,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:10px; font-size:14px; text-decoration:none; font-weight:650; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--line-hi); font-size:10px; letter-spacing:.08em; }
nav { display:flex; gap:26px; }
nav a { color:var(--muted); text-decoration:none; font-size:13px; }
nav a:hover,nav a:focus-visible { color:var(--text); }
.disclosure { justify-self:end; color:var(--muted); font-size:11px; letter-spacing:.04em; }
main { overflow:hidden; }
.hero { min-height:calc(100dvh - 68px); display:grid; grid-template-columns:minmax(0,1fr) minmax(480px,.9fr); gap:7vw; align-items:center; padding:9vh 7vw; border-bottom:1px solid var(--line); background:radial-gradient(circle at 83% 35%,rgba(207,212,216,.08),transparent 30%); }
.eyebrow { margin:0 0 28px; color:var(--muted); font:11px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:28px; max-width:900px; font-size:clamp(48px,6.6vw,104px); line-height:.93; letter-spacing:-.062em; font-weight:550; }
h1 span { color:#92989e; }
.lede { max-width:590px; margin-bottom:34px; color:var(--muted); font-size:18px; }
.hero-actions,.form-actions,.incident-actions { display:flex; gap:10px; }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 18px; border:1px solid var(--line-hi); border-radius:var(--radius); text-decoration:none; cursor:pointer; transition:transform .16s ease,background .16s ease,color .16s ease; white-space:nowrap; }
.button:active { transform:translateY(1px); }
.button.primary { background:var(--accent); color:#090a0b; border-color:var(--accent); font-weight:650; }
.button.primary:hover { background:#fff; }
.button.secondary { background:transparent; color:var(--silver); }
.button.secondary:hover { background:var(--panel-2); }
.button:disabled { opacity:.38; cursor:not-allowed; }
.hero-visual,.booking-panel,.operator-panel,.health-panel { border:1px solid var(--line-hi); background:linear-gradient(145deg,rgba(255,255,255,.025),transparent 40%),var(--panel); box-shadow:0 24px 70px rgba(0,0,0,.3); }
.hero-visual { min-height:430px; padding:26px; display:flex; flex-direction:column; }
.signal-header,.panel-title,.hero-foot,.operator-foot { display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font:11px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; }
.signal-ok,.health-ok { color:var(--success); }
.hero-metric { margin:auto 0 20px; display:flex; align-items:flex-end; gap:18px; }
.hero-metric strong { font-size:92px; line-height:.8; font-weight:500; letter-spacing:-.07em; }
.hero-metric span { max-width:140px; color:var(--muted); font-size:13px; }
.pulse-grid { height:120px; display:grid; grid-template-columns:repeat(12,1fr); align-items:end; gap:5px; border-bottom:1px solid var(--line-hi); }
.pulse-grid i { height:var(--h); background:linear-gradient(#e8ecef,#42474c); opacity:.8; transform-origin:bottom; animation:rise .8s cubic-bezier(.2,.8,.2,1) both; }
.pulse-grid i:nth-child(3n) { animation-delay:.12s; }
.hero-foot { margin-top:18px; }
@keyframes rise { from { transform:scaleY(0); opacity:0; } }
.management,.workspace,.reliability,.architecture { padding:110px 7vw; border-bottom:1px solid var(--line); }
.management { display:grid; grid-template-columns:.7fr 1.3fr; gap:8vw; background:#0a0c0e; }
.management-lead>p { max-width:480px; color:var(--muted); }
.management-lead .ru-note { margin-top:34px; padding-left:18px; border-left:2px solid var(--silver); font-size:13px; }
.management-lead .ru-note strong { color:var(--text); }
.management-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.management-grid article { min-height:300px; padding:24px; background:var(--panel); }
.management-grid article>span { color:var(--muted); font:11px ui-monospace,SFMono-Regular,Menlo,monospace; }
.management-grid h3 { margin:100px 0 12px; font-size:20px; letter-spacing:-.025em; }
.management-grid p { color:var(--muted); font-size:13px; }
.section-heading { max-width:720px; margin-bottom:50px; }
h2 { margin-bottom:18px; font-size:clamp(36px,5vw,68px); line-height:1; letter-spacing:-.05em; font-weight:550; }
.section-heading p,.architecture>p,.reliability-copy>p { max-width:620px; color:var(--muted); font-size:17px; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:20px; }
.booking-panel,.operator-panel,.health-panel { min-height:540px; padding:26px; }
.panel-title { padding-bottom:20px; border-bottom:1px solid var(--line); color:var(--silver); }
.step { display:none; min-height:365px; padding:30px 0; }
.step.active { display:block; animation:fade .22s ease; }
@keyframes fade { from { opacity:0; transform:translateY(4px); } }
fieldset { display:grid; gap:18px; margin:0; padding:0; border:0; }
legend { margin-bottom:28px; font-size:28px; letter-spacing:-.03em; }
label { display:grid; gap:7px; color:var(--muted); font-size:12px; }
input,select { width:100%; min-height:48px; padding:0 13px; border:1px solid var(--line); border-radius:var(--radius); background:#090b0d; color:var(--text); }
input:focus,select:focus,button:focus-visible,a:focus-visible { outline:2px solid #d8dde1; outline-offset:3px; }
.room-choice { grid-template-columns:auto 1fr auto; align-items:center; padding:15px; border:1px solid var(--line); cursor:pointer; }
.room-choice:has(input:checked) { border-color:#9ba2a8; background:rgba(255,255,255,.035); }
.room-choice input { width:16px; min-height:auto; accent-color:#e6eaed; }
.room-choice span { display:grid; }
.room-choice strong { color:var(--text); font-size:14px; }
.room-choice small { margin-top:2px; color:var(--muted); }
.room-choice b { color:var(--silver); font-size:14px; font-weight:550; }
.form-actions { justify-content:space-between; }
.booking-summary { padding:16px; border-left:2px solid var(--silver); background:var(--panel-2); color:var(--muted); font-size:13px; }
.success-state { display:none; min-height:430px; place-content:center; text-align:center; }
.success-state.visible { display:grid; }
.success-state .checkmark { width:44px; height:44px; display:grid; place-items:center; margin:0 auto 18px; border:1px solid var(--success); color:var(--success); }
.success-state h3 { margin-bottom:8px; font-size:28px; }
.success-state p { color:var(--muted); }
.success-state .button { margin:20px auto 0; }
.text-button,.filter { padding:0; border:0; background:none; color:var(--muted); cursor:pointer; }
.text-button:hover { color:var(--text); }
.queue-filters { display:flex; gap:8px; margin:24px 0; }
.filter { padding:8px 11px; border:1px solid var(--line); border-radius:var(--radius); font-size:11px; }
.filter.active { background:var(--silver); border-color:var(--silver); color:#090a0b; }
.queue { min-height:350px; }
.queue-item { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:20px 4px; border-bottom:1px solid var(--line); }
.queue-item div { display:grid; gap:4px; }
.queue-item strong { font:13px ui-monospace,SFMono-Regular,Menlo,monospace; }
.queue-item span:not(.status) { color:var(--muted); font-size:13px; }
.status { padding:6px 8px; border:1px solid currentColor; font-size:10px; }
.status.attention { color:var(--danger); }
.status.ready { color:var(--success); }
.operator-foot { margin-top:18px; }
.reliability { display:grid; grid-template-columns:minmax(0,.8fr) minmax(460px,1fr); align-items:center; gap:8vw; background:#090b0c; }
.principles { margin-top:46px; }
.principles div { display:grid; grid-template-columns:160px 1fr; gap:24px; padding:18px 0; border-bottom:1px solid var(--line); }
.principles strong { font-size:13px; }
.principles span { color:var(--muted); font-size:13px; }
.health-panel { min-height:auto; }
.health-list { padding:18px 0; }
.health-list div { display:flex; justify-content:space-between; gap:20px; padding:14px 0; color:var(--muted); font-size:13px; }
.health-list b { color:var(--silver); font-weight:550; }
.health-list .health-ok { color:var(--success); }
.health-list .health-warn { color:var(--danger); }
.timeline { min-height:95px; margin-top:22px; padding:14px; background:#080a0b; border:1px solid var(--line); font:11px ui-monospace,SFMono-Regular,Menlo,monospace; }
.timeline p { display:grid; grid-template-columns:72px 1fr; margin-bottom:8px; color:var(--muted); }
.timeline p:last-child { margin-bottom:0; }
.timeline time { color:var(--silver); }
.architecture { text-align:center; }
.architecture>p { margin:0 auto 50px; }
.arch-flow { max-width:1160px; margin:0 auto 30px; display:grid; grid-template-columns:1fr auto 1.2fr auto 1fr auto 1fr; align-items:center; gap:16px; }
.arch-flow i { color:var(--muted); font-style:normal; }
.arch-column { display:grid; gap:10px; }
.arch-column span,.arch-core { min-height:76px; display:grid; place-content:center; padding:14px; border:1px solid var(--line-hi); background:var(--panel); font-size:13px; }
.arch-core { min-height:120px; background:#dce0e3; color:#0a0b0c; font-weight:650; }
.arch-core small { margin-top:6px; font-weight:400; }
.text-link { color:var(--silver); font-size:13px; text-underline-offset:4px; }
footer { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 7vw; color:var(--muted); font-size:11px; }
@media (max-width: 900px) {
  .topbar { grid-template-columns:1fr auto; }
  nav { display:none; }
  .disclosure { max-width:160px; text-align:right; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:90px; }
  .hero-visual { min-height:380px; }
  .management,.workspace-grid,.reliability { grid-template-columns:1fr; }
  .management-grid { grid-template-columns:repeat(3,1fr); }
  .arch-flow { grid-template-columns:1fr; }
  .arch-flow i { transform:rotate(90deg); }
}
@media (max-width: 600px) {
  .topbar { min-height:60px; padding:0 18px; }
  .brand>span:last-child { display:none; }
  .disclosure { font-size:9px; line-height:1.25; }
  .hero,.management,.workspace,.reliability,.architecture { padding:72px 20px; }
  h1 { font-size:48px; }
  .lede { font-size:16px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-visual { min-height:330px; padding:18px; }
  .hero-metric strong { font-size:72px; }
  .hero-foot { align-items:flex-start; flex-direction:column; gap:4px; }
  .management-grid { grid-template-columns:1fr; }
  .management-grid article { min-height:auto; }
  .management-grid h3 { margin-top:48px; }
  .booking-panel,.operator-panel,.health-panel { min-height:auto; padding:18px; }
  .step { min-height:390px; }
  .queue-item { grid-template-columns:1fr; gap:10px; }
  .status { justify-self:start; }
  .reliability { gap:50px; }
  .principles div { grid-template-columns:1fr; gap:6px; }
  .incident-actions { flex-direction:column; }
  footer { min-height:150px; align-items:flex-start; justify-content:center; flex-direction:column; padding:32px 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }