/* Кейс cosmomap — общий стиль страницы. Секции красят себя сами, но только этими токенами. */
:root{
  --bg:#080b12; --bg2:#0b111d; --panel:#0e1524; --panel2:#121b2d;
  --line:#1d2739; --line2:#2a3852;
  --ink:#e8edf7; --ink2:#9aa6bd; --ink3:#66718a;
  --acc:#74a6ff; --ok:#6edca0; --warn:#f0be6e; --bad:#ff7a7a;
  /* цвета сфер — одни и те же на карте, в сферах и в аналитике */
  --s-sales:#f59e5b; --s-clients:#ff7f93; --s-fin:#f2c14e;
  --s-ops:#5fd4c8; --s-site:#a58bff; --s-an:#74a6ff;
  /* сферы кейса cosmomap */
  --s-product:#ff7f93; --s-code:#a58bff; --s-pipe:#5fd4c8; --s-prod:#f2c14e;
  --display:"Inter",ui-sans-serif,-apple-system,"SF Pro Text",system-ui,sans-serif;
  --sans:"Inter",ui-sans-serif,-apple-system,"SF Pro Text",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:14px; --wrap:1180px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:
    radial-gradient(1px 1px at 7% 12%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 23% 67%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 41% 31%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 58% 84%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 76% 22%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 89% 58%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 33% 90%,#cfe0ff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 67% 48%,#cfe0ff 50%,transparent 51%),
    radial-gradient(1px 1px at 95% 8%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 14% 44%,#fff 50%,transparent 51%);
  background-size:620px 620px}
main{position:relative;z-index:1}
img,video,svg{max-width:100%}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.blk{padding:110px 0;border-top:1px solid var(--line)}
.blk-head{max-width:var(--wrap);margin:0 auto 48px;padding:0 28px}
.blk-body{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:18px}
.blk-title{font:400 clamp(30px,4.2vw,50px)/1.1 var(--display);letter-spacing:-.01em;
  text-transform:uppercase;margin:0 0 16px;color:var(--ink)}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--ink2);max-width:760px;margin:0}

.card{background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);padding:22px}
.caps{font-family:var(--display);letter-spacing:.14em;text-transform:uppercase}
.muted{color:var(--ink2)}
.faint{color:var(--ink3)}
.num{font-variant-numeric:tabular-nums}
.demo{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--sans);
  letter-spacing:.08em;text-transform:uppercase;color:var(--warn);
  border:1px solid #f0be6e44;background:#f0be6e10;padding:5px 9px;border-radius:999px}
.draft{border:1px dashed #f0be6e66;border-radius:var(--r);padding:22px;background:#f0be6e08}
.draft-note{font:500 12px/1.4 var(--sans);color:var(--warn);letter-spacing:.04em;margin-bottom:10px}

@media (max-width:720px){
  .blk{padding:72px 0}
  .wrap,.blk-head,.blk-body{padding:0 18px}
}