/* ===== tokens — real corporate colors from Упаковка/Коды корпоративных цветов.txt ===== */
:root{
  --navy:#075483;
  --navy-deep:#053d61;
  --navy-soft:#0c6aa3;
  --accent:#108cfd;
  --accent-ink:#0b6bc4;
  --stone:#5b6469;
  --stone-soft:#8a9298;
  --line:#dfe4e7;
  --line-soft:#eceff1;
  --paper:#f4f6f7;
  --surface:#ffffff;
  --good:#1c8a5b;
  --good-bg:#eaf6f0;
  --on-navy:#c9dcea;
  --on-navy-soft:#6f97b3;
  --radius:3px;
  --container:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:#101a1f;
  font-family:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.56;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{
  font-family:"Unbounded","Golos Text",sans-serif;
  font-weight:700;
  line-height:1.14;
  margin:0;
  text-wrap:balance;
  letter-spacing:-0.01em;
}
p{margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.num{font-variant-numeric:tabular-nums}
button,input,select{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding-inline:24px}
section{padding-block:80px}
@media (max-width:720px){section{padding-block:52px}}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);
}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--accent);display:inline-block}
.eyebrow.on-navy{color:var(--on-navy)}
.eyebrow.on-navy::before{background:var(--accent)}

.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(25px,3vw,34px)}
.sec-head .note{max-width:36ch;color:var(--stone);font-size:15px}

/* ---------- logo mark ---------- */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#101a1f}
.logo-mark{width:22px;height:22px;position:relative;flex:none;transform:rotate(45deg)}
.logo-mark::before,.logo-mark::after{content:"";position:absolute;inset:0}
.logo-mark::before{background:var(--navy);clip-path:polygon(0 0,100% 0,0 100%)}
.logo-mark::after{background:var(--accent);clip-path:polygon(100% 0,100% 100%,0 100%)}
.logo-word{font-family:"Unbounded",sans-serif;font-weight:700;font-size:19px;letter-spacing:.01em;color:#101a1f}
.logo-sub{display:block;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;color:var(--stone-soft);margin-top:2px}

/* ---------- topbar + header ---------- */
.topbar{background:var(--navy-deep);color:var(--on-navy);font-family:"IBM Plex Mono",monospace;font-size:12.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:9px;flex-wrap:wrap}
.topbar a{text-decoration:none}
.topbar a:hover{color:#fff}
.topbar .sep{opacity:.4;margin-inline:10px}

header.site{position:sticky;top:0;z-index:40;background:rgba(244,246,247,.92);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
.navlinks{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.navlinks a{text-decoration:none;font-size:14.5px;color:#101a1f;position:relative;padding-block:4px;white-space:nowrap}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transition:transform .18s ease}
.navlinks a:hover::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-phone{font-family:"IBM Plex Mono",monospace;font-size:13.5px;text-decoration:none;white-space:nowrap}
.burger{display:none;background:none;border:1px solid var(--line);width:40px;height:40px;border-radius:var(--radius)}
.burger span{display:block;width:16px;height:1px;background:#101a1f;margin:4px auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;font-weight:600;font-size:14.5px;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
.btn-ghost{background:transparent;color:#101a1f;border-color:var(--line)}
.btn-ghost:hover{border-color:#101a1f}
.btn-on-navy{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-on-navy:hover{border-color:#fff}
.btn-sm{padding:9px 16px;font-size:13px}

/* ---------- hero card (company snapshot, not tied to one product) ---------- */
.dash{background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 60px -20px rgba(7,84,131,.28)}
.dash-head{padding:14px 18px;border-bottom:1px solid var(--line-soft);font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.dash-list{display:flex;flex-direction:column}
.dash-item{display:flex;gap:16px;padding:20px 18px;border-top:1px solid var(--line-soft)}
.dash-item:first-child{border-top:none}
.dash-item .idx{flex:none;padding-top:3px;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--stone-soft)}
.dash-item h4{font-size:15.5px}
.dash-item p{color:var(--stone);font-size:13.5px;margin-top:5px;line-height:1.48}

/* ---------- hero ---------- */
.hero{padding-top:64px;padding-bottom:72px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(32px,4vw,50px);margin-top:18px}
.hero .lede{max-width:48ch;color:var(--stone);font-size:17px;margin-top:20px}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

/* ---------- stat band ---------- */
.stats{background:var(--navy);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:34px 22px;border-left:1px solid rgba(255,255,255,.16)}
.stat:first-child{border-left:none}
.stat .n{font-family:"Unbounded",sans-serif;font-weight:700;font-size:clamp(24px,2.4vw,32px)}
.stat .l{font-size:13px;color:var(--on-navy);margin-top:8px;line-height:1.4}
@media (max-width:900px){.stats .wrap{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:none}.stat{border-bottom:1px solid rgba(255,255,255,.16)}}

/* ---------- cards / grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{background:var(--surface);padding:26px 24px}
.tile .idx{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--stone-soft)}
.tile h3{font-size:17px;margin-top:16px}
.tile p{color:var(--stone);font-size:14px;margin-top:8px}
@media (max-width:860px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-3,.grid-2{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);padding:28px}

/* ---------- band (dark section) ---------- */
.band{background:var(--navy-deep);color:var(--on-navy)}
.band h2,.band h3{color:#fff}

/* ---------- footer ---------- */
footer{background:var(--navy-deep);color:var(--on-navy)}
.foot-top{display:grid;grid-template-columns:1.3fr .9fr .9fr 1fr;gap:40px;padding-block:60px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand .logo-word{color:#fff}
.foot-brand p{margin-top:16px;color:var(--on-navy);font-size:13.5px;max-width:32ch}
.foot-col h4{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-navy-soft);margin-bottom:16px;font-weight:500}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.foot-col a{text-decoration:none;font-size:14px;color:var(--on-navy)}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-block:20px;flex-wrap:wrap;gap:12px}
.foot-bottom p{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--on-navy)}
@media (max-width:860px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-top{grid-template-columns:1fr}}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);margin-bottom:7px}
.field input{width:100%;padding:12px 13px;border:1px solid var(--line);background:var(--paper);font-size:15px;color:#101a1f;border-radius:var(--radius)}
.field input:focus{border-color:var(--accent);background:var(--surface)}
.consent{font-size:12px;color:var(--stone-soft);margin-top:14px;line-height:1.45}

@media (max-width:900px){
  .navlinks,.nav-phone{display:none}
  .burger{display:block}
  .hero .wrap{grid-template-columns:1fr}
}

/* ---------- lead forms ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.field-check{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--stone);line-height:1.45;margin:2px 0 16px;cursor:pointer}
.field-check input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--accent)}
.field-check a{color:var(--accent-ink)}
.form-status{margin-top:12px;font-size:13.5px;line-height:1.45}
.form-status:empty{display:none}
.form-status.ok{color:var(--good)}
.form-status.err{color:#b3261e}
.field input.invalid{border-color:#b3261e}
.field-check.invalid{color:#b3261e}
button[disabled]{opacity:.6;cursor:default}

/* ---------- prose pages ---------- */
.prose{max-width:780px}
.prose h1{font-size:clamp(28px,3.6vw,40px)}
.prose h2{font-size:20px;margin-top:36px}
.prose p,.prose li{color:var(--stone);font-size:15px;margin-top:12px}
.prose ul{margin:12px 0 0;padding-left:20px}
.prose a{color:var(--accent-ink)}

@media (max-width:480px){.nav{gap:12px}.nav-right{gap:10px}.nav-right .btn-sm{padding:8px 12px;font-size:12.5px}}