/* CS2DM - cs2dm.com */
:root{
  --bg:#08080a;
  --s1:#101014;
  --s2:#16161c;
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);
  --ink:#fff;
  --dim:#8b8b96;
  --dim-2:#85858f;      /* был #5f5f6a - не дотягивал по контрасту до 4.5 */
  --acc:#ff2d55;        /* декоративный: свечение, градиенты, полосы, точки */
  --acc-b:#e30a43;      /* под белый текст: контраст 4.8 против 3.6 у яркого */
  --acc-bh:#ef1049;
  --acc-d:#b8062f;
  --ok:#33d17a;
  --r:16px;
  --wrap:1240px;
  --hdr-h:70px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.6 'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-family:'Oswald',Impact,sans-serif;font-weight:700;
  text-transform:uppercase;line-height:1.02;letter-spacing:.005em}
p{margin:0}
kbd{font:600 .85em/1 'Inter',monospace;background:#25252d;border:1px solid var(--line-2);
  border-bottom-width:2px;border-radius:5px;padding:.18em .45em;color:#e6e6ee}
code{font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:.92em}
::selection{background:var(--acc);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* дежурная точка-индикатор */
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;display:inline-block;
  box-shadow:0 0 0 3px rgba(51,209,122,.16)}
.dot.is-off{background:#6b6b76;box-shadow:0 0 0 3px rgba(255,255,255,.06)}

/* ---------- КНОПКИ ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  height:48px;padding:0 22px;border-radius:11px;font-weight:600;font-size:14.5px;
  letter-spacing:.02em;transition:.18s ease;white-space:nowrap;border:1px solid transparent}
.btn-acc{background:var(--acc-b);color:#fff;box-shadow:0 10px 24px -12px rgba(255,45,85,.9)}
.btn-acc:hover{background:var(--acc-bh);transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(255,45,85,1)}
.btn-acc:active{transform:translateY(0)}
.btn-gh{background:var(--s2);border-color:var(--line);color:#cfcfd8}
.btn-gh:hover{border-color:var(--line-2);color:#fff;background:#1d1d24}
.btn-sm{height:40px;padding:0 16px;font-size:13.5px;border-radius:9px}
.btn-lg{height:58px;padding:0 30px;font-size:16px;border-radius:13px}
.btn-full{flex:1}

/* ---------- ШАПКА ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:60;height:var(--hdr-h);
  transition:background .25s,border-color .25s,backdrop-filter .25s;
  border-bottom:1px solid transparent}
.hdr.is-stuck{background:rgba(8,8,10,.86);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.hdr-in{height:100%;display:flex;align-items:center;gap:26px}
.logo{display:inline-flex;align-items:center;gap:9px;font-family:'Oswald',sans-serif;
  font-weight:700;font-size:22px;letter-spacing:.04em;text-transform:uppercase;flex:none}
.logo b{color:var(--acc)}
.logo-m{width:22px;height:22px;fill:var(--acc)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:9px 14px;border-radius:9px;font-size:14.5px;color:var(--dim);font-weight:500;transition:.16s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.hdr-r{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav+.hdr-r{margin-left:0}
.pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;
  border:1px solid var(--line);border-radius:10px;background:var(--s1);font-size:14px;color:var(--dim)}
.pill b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.burger{display:none;width:42px;height:42px;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:10px;background:var(--s1)}
.burger svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}

/* ---------- ГЕРОЙ ---------- */
.hero{position:relative;padding:calc(var(--hdr-h) + 34px) 0 60px;overflow:hidden}
.hero-glow{position:absolute;left:50%;top:-14%;width:min(1180px,132vw);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,45,85,.19),rgba(255,45,85,.05) 55%,transparent 72%)}
.hero-in{position:relative}
.hero-h1{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;
  font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hero-h1 .word{
  display:block;margin:14px 0 -.14em;font-family:'Oswald',Impact,sans-serif;font-weight:700;
  font-size:clamp(4.6rem,17.5vw,15.5rem);line-height:.84;letter-spacing:-.005em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.055),transparent 72%);
  -webkit-background-clip:text;background-clip:text;user-select:none}
.hero-sub{margin-top:30px;text-align:center;font-family:'Oswald',sans-serif;font-weight:500;
  font-size:clamp(1.05rem,2.4vw,1.6rem);text-transform:uppercase;letter-spacing:.06em;color:#d8d8e0}
.hero-sub em{font-style:normal;color:var(--acc)}

/* карточки агентов */
.cards{display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(6px,1vw,14px);margin-top:clamp(-118px,-9vw,-44px);width:100%}
.card{
  position:relative;flex:none;
  width:clamp(74px,10.6vw,164px);height:clamp(196px,29vw,404px);
  border-radius:clamp(10px,1.2vw,18px);overflow:hidden;
  background:linear-gradient(180deg,#1b1b22,#0c0c10);
  border:1px solid var(--line);
  transition:height .3s,transform .3s,border-color .3s,box-shadow .3s}
/* серим саму картинку, а не карточку: фильтр на всём слое иногда схлопывает
   композицию в Chrome, да и фон карточки серить незачем */
.card img{position:absolute;left:50%;bottom:0;height:106%;width:auto;max-width:none;
  transform:translateX(-50%);object-fit:contain;
  filter:grayscale(1) brightness(.78) contrast(1.04);transition:filter .3s}
.card::after{content:'';position:absolute;inset:auto 0 0;height:45%;
  background:linear-gradient(transparent,rgba(6,6,8,.85))}
.card:hover{transform:translateY(-10px);border-color:var(--line-2)}
.card:hover img{filter:grayscale(.3) brightness(.95)}
.card.is-on{
  width:clamp(120px,16vw,246px);height:clamp(268px,38vw,516px);
  border-color:rgba(255,255,255,.22);
  background:linear-gradient(178deg,var(--acc) 0%,#8d0126 62%,#3d0011 100%);
  box-shadow:0 34px 70px -26px rgba(255,45,85,.75),0 0 0 1px rgba(255,45,85,.5)}
.card.is-on img{filter:none}
.card.is-on::after{background:linear-gradient(transparent,rgba(61,0,17,.9))}
.card.is-on:hover{transform:translateY(-10px)}
.card-cta{position:absolute;inset:auto 0 0;z-index:2;display:flex;flex-direction:column;
  align-items:center;gap:12px;padding:0 10px clamp(14px,2vw,26px)}
.play{display:grid;place-items:center;width:clamp(44px,5.2vw,62px);aspect-ratio:1;border-radius:50%;
  background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.4);transition:.2s}
.play svg{width:44%;height:44%;fill:#12121a;margin-left:8%}
.card-cta:hover .play{transform:scale(1.08)}
.card-cta-t{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(11px,1.15vw,15px);letter-spacing:.06em;color:#fff;text-align:center;line-height:1.1}
.play-sm{width:26px;background:rgba(255,255,255,.2);box-shadow:none}
.play-sm svg{fill:#fff}

/* цифры под героем */
.hstats{order:4;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin:56px 0 0;padding:0;list-style:none;width:100%;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hstats li{display:flex;flex-direction:column;gap:4px;padding:22px 20px;background:var(--s1);text-align:left}
.hstats b{font-family:'Oswald',sans-serif;font-size:34px;line-height:1;font-weight:700;
  font-variant-numeric:tabular-nums}
.hstats b i{font-style:normal;font-size:.5em;color:var(--dim)}
.hstats span{font-size:13px;color:var(--dim)}

/* ---------- СЕКЦИИ ---------- */
.sec{padding:clamp(64px,8vw,110px) 0}
.shead{max-width:620px;margin:0 0 clamp(32px,4vw,52px)}
.shead h2{margin:14px 0 12px;font-size:clamp(2rem,4.6vw,3.4rem)}
.shead p{color:var(--dim);font-size:16px}
.shead-row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;max-width:none}

/* режимы */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mode{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:440px;padding:30px;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 90% at 82% 8%,#22222b,#0d0d11 62%);transition:.28s}
.mode:hover{border-color:rgba(255,45,85,.4)}
.mode::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:.28s;
  background:radial-gradient(90% 70% at 80% 10%,rgba(255,45,85,.22),transparent 65%)}
.mode:hover::before{opacity:1}
.mode-fig{position:absolute;right:-6%;top:0;height:88%;width:auto;max-width:none;
  filter:grayscale(1) brightness(.72);transition:.35s;
  -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent);
  mask-image:linear-gradient(180deg,#000 66%,transparent)}
.mode:hover .mode-fig{filter:grayscale(0) brightness(.95);transform:translateY(-6px)}
.mode-body{position:relative;max-width:330px}
.mode-tag{display:inline-block;padding:5px 11px;border-radius:7px;background:rgba(255,45,85,.14);
  border:1px solid rgba(255,45,85,.35);color:#ff7c99;font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase}
.mode h3{margin:16px 0 12px;font-size:clamp(1.7rem,3.2vw,2.4rem)}
.mode p{color:var(--dim);font-size:15px}
.ticks{list-style:none;margin:18px 0 24px;padding:0;display:flex;flex-direction:column;gap:9px}
.ticks li{position:relative;padding-left:26px;font-size:14.5px;color:#c3c3cd}
.ticks li::before{content:'';position:absolute;left:0;top:7px;width:14px;height:8px;
  border:2px solid var(--acc);border-top:0;border-right:0;transform:rotate(-45deg)}

/* сервера */
.sec-srv{background:
  linear-gradient(180deg,transparent,rgba(255,45,85,.045) 40%,transparent),
  var(--bg)}
.tabs{display:inline-flex;gap:4px;padding:5px;background:var(--s1);
  border:1px solid var(--line);border-radius:12px;flex:none}
.tab{padding:9px 18px;border-radius:8px;font-size:14px;font-weight:500;color:var(--dim);transition:.16s}
.tab:hover{color:#fff}
.tab.is-on{background:var(--acc-b);color:#fff;font-weight:600}
.srv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.srv{display:flex;flex-direction:column;gap:18px;padding:22px;border:1px solid var(--line);
  border-radius:var(--r);background:linear-gradient(180deg,var(--s2),var(--s1));transition:.22s}
.srv:hover{border-color:var(--line-2);transform:translateY(-3px)}
.srv.is-hide{display:none}
.srv-h{display:flex;align-items:center;gap:9px}
.srv-h h3{font-size:19px;letter-spacing:.03em}
.tag{margin-left:auto;padding:4px 9px;border-radius:6px;font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-family:'Inter',sans-serif}
.tag-dm{background:rgba(255,45,85,.13);color:#ff7c99}
.tag-du{background:rgba(120,150,255,.13);color:#93a8ff}
.srv-map{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.028);border:1px solid var(--line)}
.srv-map-l{font-size:12px;color:var(--dim-2);letter-spacing:.08em;text-transform:uppercase}
.srv-map b{font-size:14.5px;font-weight:600;color:#dcdce6;font-family:ui-monospace,Consolas,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:62%}
.srv-load{display:flex;flex-direction:column;gap:9px}
.bar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--acc-d),var(--acc));transition:width .5s ease}
.srv-n{display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--dim)}
.srv-n b{font-family:'Oswald',sans-serif;font-size:26px;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1}
.srv-a{display:flex;gap:9px;margin-top:auto}
.srv-a .btn-gh{width:48px;padding:0;flex:none}
.srv-a .btn-gh svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* шаги */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{position:relative;padding:28px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--s1);overflow:hidden}
.step-n{font-family:'Oswald',sans-serif;font-weight:700;font-size:15px;letter-spacing:.1em;
  color:var(--acc)}
.step h3{margin:14px 0 10px;font-size:1.25rem}
.step p{color:var(--dim);font-size:14.5px}
.cmd{display:flex;align-items:center;gap:10px;margin-top:16px;padding:10px 10px 10px 14px;
  border-radius:10px;background:#08080b;border:1px solid var(--line);flex-wrap:wrap}
.cmd code{flex:1 1 100%;min-width:0;color:#8affc4;font-size:13px;word-break:break-all}
.cmd .btn{margin-left:auto}
.note{display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:18px 22px;
  border:1px solid rgba(255,45,85,.25);border-radius:var(--r);background:rgba(255,45,85,.055)}
.note svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--acc);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.note p{font-size:14.5px;color:#c8c8d2}
.note b{color:#fff}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.q{border:1px solid var(--line);border-radius:var(--r);background:var(--s1);transition:.2s}
.q[open]{border-color:var(--line-2);background:var(--s2)}
.q summary{display:flex;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;
  font-family:'Oswald',sans-serif;font-weight:500;font-size:17px;text-transform:uppercase;
  letter-spacing:.02em;list-style:none}
.q summary::-webkit-details-marker{display:none}
.q summary i{margin-left:auto;position:relative;width:16px;height:16px;flex:none}
.q summary i::before,.q summary i::after{content:'';position:absolute;inset:50% 0 auto;
  height:2px;background:var(--acc);border-radius:2px;transition:.22s}
.q summary i::after{transform:rotate(90deg)}
.q[open] summary i::after{transform:rotate(0)}
.q p{padding:0 22px 22px;color:var(--dim);font-size:15px}

/* финальный призыв */
.cta{padding:0 0 clamp(64px,7vw,100px)}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  padding:clamp(30px,4vw,50px);border-radius:24px;
  background:radial-gradient(120% 160% at 0% 0%,#ff2d55,#8d0126 52%,#2a0410 100%)}
.cta h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
.cta p{margin-top:10px;color:rgba(255,255,255,.72);font-size:15.5px}
.cta .btn-acc{background:#fff;color:#12121a;box-shadow:0 14px 34px -14px rgba(0,0,0,.7)}
.cta .btn-acc:hover{background:#fff;transform:translateY(-2px)}
.cta .play-sm{background:rgba(0,0,0,.1)}
.cta .play-sm svg{fill:#12121a}

/* подвал */
.ftr{border-top:1px solid var(--line);background:#0b0b0e}
.ftr-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-top:54px;padding-bottom:40px}
.ftr-d{margin:16px 0 18px;color:var(--dim);font-size:14.5px;max-width:340px}
.status{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:#9fe7c0}
.ftr-n{display:flex;flex-direction:column;gap:11px}
.ftr-n b{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.1em;font-size:13px;color:#fff;margin-bottom:4px}
.ftr-n a{font-size:14.5px;color:var(--dim);transition:.16s}
.ftr-n a:hover{color:#fff}
.ftr-b{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:22px;padding-bottom:34px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--dim-2)}

/* тост */
.toast{position:fixed;left:50%;bottom:26px;z-index:90;transform:translate(-50%,26px);
  padding:13px 22px;border-radius:11px;background:#fff;color:#101014;font-size:14px;font-weight:600;
  opacity:0;pointer-events:none;transition:.24s;box-shadow:0 16px 40px -12px rgba(0,0,0,.6)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- страница 404 ---------- */
.e404{min-height:100vh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden}
.e404 .word{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(6rem,26vw,20rem);
  line-height:.85;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.13);user-select:none}
.e404 h1{margin:22px 0 12px;font-size:clamp(1.6rem,4vw,2.6rem)}
.e404 p{color:var(--dim);margin-bottom:28px}

/* ---------- АДАПТИВ ---------- */
@media (max-width:1080px){
  .srv-grid{grid-template-columns:1fr 1fr}
  .hstats{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav{display:none;position:absolute;top:var(--hdr-h);left:12px;right:12px;flex-direction:column;
    gap:2px;padding:10px;background:rgba(14,14,18,.97);backdrop-filter:blur(14px);
    border:1px solid var(--line);border-radius:14px}
  .nav.is-open{display:flex}
  .burger{display:flex}
  .hdr-r{margin-left:auto}
  .pill-t{display:none}
  .modes{grid-template-columns:1fr}
  .mode{min-height:360px}
  /* на узком экране фигура только фон: уводим вправо, гасим и растворяем к левому краю */
  .mode-fig{height:70%;right:-20%;opacity:.4;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);
    mask-image:linear-gradient(90deg,transparent,#000 55%)}
  .mode-body{max-width:none}
  .steps{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .shead-row{flex-direction:column;align-items:flex-start}
  .ftr-in{grid-template-columns:1fr 1fr;gap:32px}
  .ftr-c{grid-column:1/-1}
}
@media (max-width:620px){
  .wrap{padding:0 16px}
  .hero{padding-top:calc(var(--hdr-h) + 22px)}
  .cards{gap:5px;margin-top:-28px;overflow:visible}
  .card{width:clamp(38px,9.6vw,60px);height:clamp(112px,28vw,170px);border-radius:8px}
  .card.is-on{width:clamp(112px,32vw,170px);height:clamp(180px,46vw,260px)}
  .card:nth-child(1),.card:nth-child(7){display:none}
  .hero-h1 .word{font-size:clamp(3.6rem,20vw,7rem)}
  .hstats li{padding:16px 15px}
  .hstats b{font-size:26px}
  .srv-grid{grid-template-columns:1fr}
  .tabs{width:100%}
  .tab{flex:1;text-align:center;padding:9px 6px}
  .ftr-in{grid-template-columns:1fr}
  .cta-in{flex-direction:column;align-items:stretch;text-align:center}
  .cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}