:root{--bg:#0b1226;--bg2:#141a34;--bg3:#10152c;--line:#232a4a;--line2:#2e3760;--ink:#c3c8e4;--mut:#8e95bb;--mut2:#aab0d2;--faint:#6b7199;--hi:#e6e6ff;--acc:#ec3700;--acc-d:#c72d00;--link:#ff7a4d;--grass:#7cb33c;--mono:'Roboto Mono','Consolas',monospace;--fs:16px;--shell:1100px;--h1max:46px;--h2max:32px;--port-pb:34px;--port-pb-d:52px;--sec-pad:34px 0;--cif-sm:2;--cif-cols:3;--par-cols:3;--casa-cols:3;--paso-cols:2;--logo-h:34px;--logo-h2:30px;--head:Chivo,'Segoe UI',Arial,sans-serif;--body:'Nunito Sans','Segoe UI',Arial,sans-serif;--nar:Chivo,'Segoe UI',Arial,sans-serif;}
/* ---------- PSO MX/BR: ночной стадион. Первая тёмная вертикаль сети.
     Свёрстано mobile-first: базовые правила — телефон, дальше min-width.
     Обложка приходит двумя файлами через <picture>: вертикальная на телефон,
     горизонтальная от 760px. Демо и видео живут в контейнерах с aspect-ratio,
     чтобы не прыгала вёрстка. Цвета сняты с официального ассет-пака. ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
font-size:var(--fs);line-height:1.62}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--acc)}
.shell{max-width:var(--shell);margin:0 auto;padding:0 18px}
h1,h2,h3{font-family:var(--head);line-height:1.08;margin:0;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(28px,7.4vw,var(--h1max))}
h2{font-size:clamp(23px,5.6vw,var(--h2max))}
h3{font-size:17px;font-weight:700;letter-spacing:0}
p{margin:13px 0 0}
strong{font-weight:700;color:var(--hi)}
.mono,code{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.93em}
.cap{display:block;font-family:var(--nar);font-size:11.5px;font-weight:800;
letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin:0 0 14px;
padding-top:12px;border-top:3px solid var(--acc);width:fit-content;min-width:56px}
/* ---------- шапка: логотип игры плюс своя строка ---------- */
.top{background:var(--bg2);border-bottom:1px solid var(--line);position:relative;z-index:5}
.top-in{display:flex;align-items:center;gap:12px;padding:11px 0}
.top-in>a:first-child{flex:0 0 auto;text-decoration:none;display:flex;align-items:center}
.top-in>a:first-child img{height:var(--logo-h);width:auto}
.top .tag{font-family:var(--nar);font-size:10.5px;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;color:var(--mut);border-left:2px solid var(--acc);padding-left:10px;line-height:1.25}
.top nav{display:none}
.top .btn{margin-left:auto}
/* ---------- обложка ---------- */
.portada{position:relative;background:var(--bg)}
.portada .cover{position:relative}
.portada .cover img{width:100%;display:block}
.portada .cover::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,18,38,0) 42%,var(--bg) 99%)}
.portada>.shell{padding:0 18px var(--port-pb);margin-top:-14vw;position:relative;z-index:2}
.etiq{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;color:var(--grass);
border:2px solid var(--grass);border-radius:6px;padding:4px 10px;margin:0 0 14px}
.dek{color:var(--mut2);font-size:16.5px;max-width:62ch;margin:14px 0 0}
.acciones{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.btn{display:inline-block;text-align:center;font-family:var(--nar);font-weight:800;font-size:15px;
letter-spacing:.02em;padding:14px 22px;border-radius:10px;border:2px solid transparent;
text-decoration:none}
.btn-main,.btn-go{background:var(--acc);color:#fff;box-shadow:0 6px 22px rgba(236,55,0,.28)}
.btn-main:hover,.btn-go:hover{background:var(--acc-d);color:#fff}
.btn-line{background:transparent;color:var(--hi);border-color:var(--line2)}
.btn-line:hover{border-color:var(--acc);color:var(--acc)}
.top .btn{padding:9px 14px;font-size:12.5px;border-radius:8px}
.mini{color:var(--faint);font-size:12px;margin:16px 0 0}
.cifras{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:26px;
background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cifras>div{background:var(--bg2);padding:15px 14px}
.cifras b{display:block;font-family:var(--mono);font-weight:700;font-size:20px;color:var(--acc);
letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cifras span{display:block;margin-top:5px;color:var(--mut);font-size:12.5px;line-height:1.45}
/* ---------- блоки ---------- */
.bloque{padding:var(--sec-pad)}
.bloque.alt{background:var(--bg2)}
.lead{font-size:16.5px;color:var(--mut2);max-width:68ch;margin:12px 0 0}
.figura{margin:24px 0 0}
.figura img{width:100%;border-radius:12px}
.figura figcaption{margin-top:11px;color:var(--mut);font-size:13.5px;max-width:78ch}
.figura .credito{display:block;margin-top:6px;color:var(--faint);font-size:11.5px}
/* ---------- демо в iframe ---------- */
.demo{margin:24px 0 0;border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:#000}
.demo .marco{position:relative;width:100%;aspect-ratio:3/4;background:#000}
.demo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.demo .pie{padding:12px 15px;background:var(--bg2);color:var(--mut);font-size:12.5px;
border-top:1px solid var(--line)}
.demo .pie b{color:var(--hi);font-weight:700}
/* ---------- видео ---------- */
.video{margin:24px 0 0;border-radius:14px;overflow:hidden;border:1px solid var(--line2)}
.video .marco{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video figcaption{padding:11px 15px;background:var(--bg2);color:var(--mut);font-size:12.5px}
/* ---------- таблицы и карточки ---------- */
.tabla{margin-top:24px;overflow-x:auto;border:1px solid var(--line2);border-radius:12px;background:var(--bg2)}
.tabla table{border-collapse:collapse;width:100%;font-size:14.5px}
.tabla.ancha table{min-width:560px}
.tabla td:first-child{color:var(--mut2)}
.tabla th{text-align:left;font-family:var(--nar);font-size:11px;font-weight:800;
letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding:12px 14px;
border-bottom:2px solid var(--acc);white-space:nowrap}
.tabla td{padding:12px 14px;border-top:1px solid var(--line)}
.tabla td.v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;
white-space:nowrap;color:var(--hi)}
.tabla tr.destaca td{background:rgba(236,55,0,.08)}
.rol{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.rol li{padding:17px 18px;background:var(--bg2);border:1px solid var(--line2);border-radius:12px}
.rol li.ok{border-left:4px solid var(--grass)}
.rol li.no{border-left:4px solid var(--acc)}
.rol b{display:block;font-family:var(--head);font-size:16.5px;font-weight:800}
.rol p{margin:6px 0 0;color:var(--mut);font-size:14.5px}
.pasos{list-style:none;counter-reset:ps;margin:24px 0 0;padding:0;display:grid;gap:12px}
.pasos li{counter-increment:ps;padding:17px 18px 17px 62px;position:relative;
background:var(--bg2);border:1px solid var(--line2);border-radius:12px}
.pasos li::before{content:counter(ps);position:absolute;left:16px;top:16px;
width:34px;height:34px;border-radius:50%;border:2px solid var(--acc);color:var(--acc);
font-family:var(--mono);font-weight:700;font-size:14px;display:grid;place-items:center}
.pasos b{display:block;font-family:var(--head);font-size:16.5px;font-weight:800}
.pasos p{margin:5px 0 0;color:var(--mut);font-size:14.5px}
.cita{margin-top:24px;padding:18px 18px 18px 20px;background:var(--bg2);
border-left:5px solid var(--acc);border-radius:0 12px 12px 0}
.cita p{margin:0;font-size:17px;font-family:var(--head);font-weight:600;line-height:1.35;color:var(--hi)}
.cita cite{display:block;margin-top:12px;font-style:normal;color:var(--mut);
font-family:var(--mono);font-size:12px}
.aviso{margin-top:26px;background:linear-gradient(160deg,var(--bg3),var(--bg2));
border:1px solid var(--line2);border-radius:14px;padding:20px 18px}
.aviso h3{font-size:17.5px;color:var(--hi);font-family:var(--head);font-weight:800}
.aviso p{margin:9px 0 0;font-size:15px;color:var(--mut2)}
.aviso .par{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.aviso .par>div{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.1em;
font-family:var(--nar);font-weight:800;border-top:1px solid var(--line2);padding-top:10px}
.aviso .par strong{display:block;margin-top:5px;font-family:var(--mono);font-size:18px;
color:var(--acc);text-transform:none;letter-spacing:-.02em}
/* ---------- витрина операторов ---------- */
.casas{background:var(--bg3);padding:var(--sec-pad)}
.casas h2,.casas h3{color:var(--hi)}
.casas .lead{color:var(--mut2)}
.casas .aclara{margin-top:20px;color:var(--faint);font-size:12.5px}
.casa{margin-top:14px;background:var(--bg2);border:1px solid var(--line2);border-radius:14px;
padding:17px 18px}
.casa .fila1{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.casa .num{font-family:var(--mono);font-size:12px;color:var(--faint)}
.casa b{font-family:var(--head);font-size:19px;font-weight:800;color:var(--hi)}
.casa .geo{font-family:var(--nar);font-size:11px;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;color:var(--mut)}
.casa ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.casa li{color:var(--mut2);font-size:14px;padding-left:16px;position:relative}
.casa li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
border-radius:50%;background:var(--grass)}
.casa li.sin::before{background:var(--faint)}
.casa .btn{margin-top:14px;width:100%}
.accion{margin-top:24px;display:grid;gap:10px}
.accion small{color:var(--faint);font-size:12px}
/* ---------- FAQ ---------- */
.preg{margin-top:24px;display:grid;gap:9px}
.preg details{background:var(--bg2);border:1px solid var(--line2);border-radius:11px}
.preg summary{cursor:pointer;list-style:none;padding:15px 16px;display:flex;
align-items:baseline;justify-content:space-between;gap:12px}
.preg summary::-webkit-details-marker{display:none}
.preg summary h3{font-size:16px;font-weight:700;color:var(--hi)}
.preg summary::after{content:"+";font-family:var(--head);font-weight:800;color:var(--acc);font-size:21px;line-height:1}
.preg details[open] summary::after{content:"\2013"}
.preg details>p{margin:0;padding:0 16px 17px;color:var(--mut);font-size:14.5px}
/* ---------- закрытие и подвал ---------- */
.cierre{background:var(--bg3);padding:30px 0;border-top:1px solid var(--line)}
.cierre h2{font-size:22px;color:var(--hi)}
.cierre p{margin:8px 0 0;color:var(--mut);font-size:14.5px}
.cierre .btn{margin-top:18px;width:100%}
.docs .shell{max-width:760px}
.docs h2{font-size:20px;margin-top:30px}
.docs p{font-size:15.5px}
.indice{margin-top:20px;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:16px 18px}
.indice b{display:block;font-family:var(--nar);font-size:11px;font-weight:800;
letter-spacing:.11em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.indice ol{margin:0;padding-left:18px;color:var(--mut);font-size:14.5px}
.indice li{margin:4px 0}
.foot{padding:26px 0 36px;background:var(--bg2);color:var(--mut);border-top:1px solid var(--line)}
.foot-top{display:flex;flex-direction:column;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.foot-top img{height:var(--logo-h2);width:auto}
.foot nav{display:flex;gap:14px;flex-wrap:wrap}
.foot nav a{color:var(--mut2);font-family:var(--body);font-size:13.5px;font-weight:600;text-decoration:none}
.foot nav a:hover{color:var(--acc)}
.foot p{color:var(--faint);font-size:12px}
/* =========================== 560px =========================== */
@media (min-width:560px){
 .shell{padding:0 24px}
 .acciones{flex-direction:row;flex-wrap:wrap}
 .btn{padding:14px 26px}
 .cifras{grid-template-columns:repeat(var(--cif-sm),1fr)}
 .casa .btn{width:auto}
 .cierre .btn{width:auto}
 .accion{grid-auto-flow:column;justify-content:start;align-items:center;gap:14px}
}
/* =========================== 760px =========================== */
@media (min-width:760px){
 .top nav{display:flex;gap:18px;align-items:center;margin-left:24px}
 .top nav a{color:var(--mut);font-family:var(--body);font-size:14px;font-weight:600;text-decoration:none}
 .top nav a:hover{color:var(--acc)}
 .portada>.shell{margin-top:-90px;padding-bottom:var(--port-pb-d)}
 .demo .marco{aspect-ratio:16/10}
 .rol{grid-template-columns:1fr 1fr}
 .aviso .par{grid-template-columns:repeat(var(--par-cols),1fr)}
 .foot-top{flex-direction:row;align-items:center;justify-content:space-between}
 .casas .lista{display:grid;grid-template-columns:1fr 1fr;gap:14px}
 .casa{margin-top:0}
}
/* =========================== 1040px =========================== */
@media (min-width:1040px){
 .shell{padding:0 28px}
 .cifras{grid-template-columns:repeat(var(--cif-cols),1fr)}
 .portada>.shell{margin-top:-120px}
 .demo .marco{aspect-ratio:16/9}
 .casas .lista{grid-template-columns:repeat(var(--casa-cols),1fr)}
 .pasos{grid-template-columns:repeat(var(--paso-cols),1fr)}
 .figura.lado{display:grid;grid-template-columns:1.5fr .85fr;gap:26px;align-items:start}
 .figura.lado figcaption{margin-top:0}
}