/* ============================================================
   «Иней» — сайт, общие куски страниц site-party / site-review / site-premium.
   Только сайт: шрифты Valve не используются, арт Valve — виды карт фоном (приглушены) и мелкие подписи данных.
   Стекло — только шапка и элементы управления; контент — твёрдые листы.
   ============================================================ */
/* ---------- первый экран страницы: вид карты фоном ---------- */
.phero{position:relative;padding:132px 0 72px}
.phero .h-emoji{top:-14px}
.bgart{position:absolute;left:0;right:0;top:0;height:760px;overflow:hidden;z-index:0;pointer-events:none}
.bgart img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
/* слева — под текстом темнее, снизу — уход в #0d1421 */
.bgart .fade{position:absolute;left:0;right:0;top:0;bottom:0;background:
  linear-gradient(180deg,rgba(13,20,33,.38) 0%,rgba(13,20,33,0) 22%,rgba(13,20,33,.12) 55%,rgba(13,20,33,.7) 82%,#0d1421 100%),
  linear-gradient(90deg,rgba(13,20,33,.84) 0%,rgba(13,20,33,.6) 30%,rgba(13,20,33,.08) 62%,rgba(13,20,33,0) 100%)}
.phero > .wrap{z-index:2}
.phero h1{font-size:56px;line-height:1.02;font-weight:700;letter-spacing:-.04em;margin-top:18px;max-width:640px;text-shadow:0 2px 24px rgba(13,20,33,.6)}
.lead{font:400 19px/1.55 var(--f-ui);color:rgba(231,235,242,.82);margin-top:20px;max-width:520px;text-shadow:0 1px 12px rgba(13,20,33,.7)}
.cta{display:flex;align-items:center;gap:18px;margin-top:32px;flex-wrap:wrap}
.cta .btn{width:auto;height:56px;padding:0 24px 0 20px;font-size:17px;border-radius:17px}
.cta .btn .i{width:22px;height:22px}
.cta .note{font:400 14.5px/1.4 var(--f-ui);color:rgba(231,235,242,.78)}

/* подпись капсом + эмодзи-акцент (одно на раздел) */
.ek{display:flex;align-items:center;gap:12px}
.ek .fe{width:56px;height:56px}
.ek .kick{color:var(--text)}
.page-s .fe{-webkit-filter:drop-shadow(0 8px 14px rgba(2,6,14,.45));filter:drop-shadow(0 8px 14px rgba(2,6,14,.45))}

/* ---------- разделы ---------- */
.sec{padding:80px 0;border-top:1px solid var(--hair);position:relative}
.sec.flush{border-top:0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:36px}
.sec-head h2{font-size:44px;line-height:1.05;letter-spacing:-.03em;font-weight:700;margin-top:16px;max-width:680px}
.sec-head p{font:400 17px/1.55 var(--f-ui);color:var(--text2);max-width:440px}
h3.h3{font-size:24px;line-height:1.15;letter-spacing:-.02em;font-weight:700}

/* твёрдые поверхности сайта */
.panel{background:var(--sheet);border-radius:28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 40px 80px -40px rgba(0,0,0,.9)}
.tile{background:var(--cell);border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 24px -14px rgba(0,0,0,.6)}

/* финальная полоса с действием */
.band{position:relative;border-radius:32px;overflow:hidden;padding:56px 56px;display:flex;align-items:center;gap:40px}
.band .bgimg{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;z-index:0}
.band .bgfade{position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;background:linear-gradient(90deg,rgba(13,20,33,.94) 0%,rgba(13,20,33,.78) 45%,rgba(13,20,33,.3) 100%)}
.band > *:not(.bgimg):not(.bgfade){position:relative;z-index:2}
.band .fe{width:96px;height:96px}
.band h2{font-size:38px;line-height:1.08;letter-spacing:-.03em;font-weight:700}
.band p{font:400 17px/1.5 var(--f-ui);color:rgba(231,235,242,.82);margin-top:10px;max-width:560px}
.band .btn{width:auto;height:56px;padding:0 24px 0 20px;font-size:17px;border-radius:17px;margin-left:auto;flex:none}
.band .btn .i{width:22px;height:22px}

.cmd{font:600 0.92em/1 ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:var(--text);background:rgba(231,235,242,.09);padding:3px 7px;border-radius:6px;white-space:nowrap}
.sfoot-note{font:400 13px/1.4 var(--f-ui);color:var(--text2);margin-top:28px}

/* ---------- адаптив: 1100 / 900 / 760 / 480 ---------- */
@media (max-width:1080px){
  .phero{padding-top:176px}
  .phero .h-emoji{top:-10px}
}
@media (max-width:980px){
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:760px){
  .phero{padding:150px 0 48px}
  .phero .h-emoji{top:-16px;right:16px}
  .phero h1{padding-right:62px}
  .bgart{height:640px}
  .bgart .fade{background:linear-gradient(180deg,rgba(13,20,33,.5) 0%,rgba(13,20,33,.45) 40%,rgba(13,20,33,.8) 75%,#0d1421 100%)}
  .phero h1{font-size:40px}
  .lead{font-size:17px}
  .cta .btn{width:100%}
  .sec{padding:64px 0}
  .sec-head h2{font-size:32px}
  .sec-head p{font-size:16px}
  .band{flex-direction:column;align-items:flex-start;padding:32px 22px;gap:18px;border-radius:26px}
  .band .bgfade{background:linear-gradient(180deg,rgba(13,20,33,.9) 0%,rgba(13,20,33,.8) 60%,rgba(13,20,33,.6) 100%)}
  .band .fe{width:64px;height:64px}
  .band h2{font-size:28px}
  .band .btn{margin-left:0;width:100%}
}
@media (max-width:480px){
  .phero h1{font-size:36px}
}


/* ---------- Premium ---------- */
.ph-grid{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:56px;align-items:start}
/* справа вверху — эмодзи раздела, замок под ним */
.ph-grid .lock{margin-top:140px}

/* замок: «Главное» открыто, «что с этим делать» — под замком (сервер не отдаёт урок до оплаты) */
.lock{padding:22px 22px 20px}
.kick.amber{color:var(--amber)} .kick.amber .d{background:var(--amber)}
.lock .kick .ready{margin-left:auto;font:500 13px/1 var(--f-ui);letter-spacing:0;text-transform:none;color:var(--text2)}
.lock .quote{font:500 21px/1.32 var(--f-display);letter-spacing:-.015em;margin:14px 0 16px}
.lock .quote em{font-style:normal;color:var(--amber)}
.locked{position:relative;border-radius:18px;background:var(--well);overflow:hidden;padding:14px;display:flex;gap:14px;min-height:178px}
.locked .mm{width:120px;height:120px;flex:none;border-radius:14px;overflow:hidden;position:relative;-webkit-filter:blur(2.5px);filter:blur(2.5px)}
.locked .mm img{width:112%;height:112%;margin:-6% 0 0 -6%;max-width:none;object-fit:cover;-webkit-filter:saturate(.75) brightness(.78);filter:saturate(.75) brightness(.78)}
.locked .mm i{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:6px}
.locked .tx{flex:1;min-width:0;padding-top:2px}
.locked .tx .kick{font-size:11px;color:var(--text2)} .locked .tx .kick .d{background:var(--cyan)}
.locked .tx .bl{margin-top:10px;font:500 16px/1.35 var(--f-display);color:var(--text);-webkit-filter:blur(4px);filter:blur(4px);opacity:.85;-webkit-user-select:none;user-select:none}
.lockpill{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 14px 8px 10px;border-radius:23px;background:#1f2a3f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 24px -8px rgba(2,6,14,.8);font:600 14.5px/1.25 var(--f-ui)}
.lockpill .lk{flex:none;width:26px;height:26px;border-radius:13px;background:var(--text);color:#0d1421;display:flex;align-items:center;justify-content:center}
.lockpill .lk .i{width:14px;height:14px}
.lock .note{font:400 13.5px/1.4 var(--f-ui);color:var(--text2);margin-top:12px}

/* что входит */
.inc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:14px}
.ben{padding:22px 22px 24px}
.ben .item{width:52px;height:52px;border-radius:14px;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ben h3{font:600 19px/1.25 var(--f-display);letter-spacing:-.012em;margin-top:16px}
.ben p{font:400 15px/1.5 var(--f-ui);color:var(--text2);margin-top:6px}
.ben{display:flex;flex-direction:column}
.ben > .item{flex:none}
/* маленькие примеры внизу плиток — данные-примеры, не обещания */
.dm{margin-top:auto;padding-top:18px}
.games{display:flex;gap:6px}
.games span{position:relative;width:44px;height:44px;flex:none}
.games img{width:44px;height:44px;border-radius:12px;object-fit:cover}
.games i{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:9px;background:var(--green);color:#06111f;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2.5px var(--cell)}
.games i .i{width:11px;height:11px}
.dm small{display:block;font:400 13px/1.4 var(--f-ui);color:var(--text2);margin-top:10px}
.push{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:16px;background:var(--well)}
.push .mark-plate{width:36px;height:36px;border-radius:18px}
.push .mark-plate .svit-mark{width:24px;height:24px}
.push div{flex:1;min-width:0}
.push b{display:block;font:600 14px/1.25 var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.push div small{margin-top:2px;color:var(--green);font-weight:500}
.push em{font-style:normal;font:400 12px/1 var(--f-ui);color:var(--text2);align-self:flex-start;margin-top:3px}
.goal{padding:12px 14px;border-radius:16px;background:var(--well)}
.goal b{display:block;font:600 14px/1.3 var(--f-ui)}
.gbar{display:flex;gap:4px;margin-top:10px}
.gbar i{flex:1;height:6px;border-radius:3px;background:rgba(231,235,242,.12)}
.gbar i.on{background:var(--cyan)}
.goal small{margin-top:8px}
.hist{display:flex;align-items:center;gap:14px}
.hist b{font:600 46px/.9 var(--f-display);letter-spacing:-.04em;color:var(--text)}
.hist small{margin-top:0}
.ward{grid-row:span 2;display:flex;flex-direction:column}
.ward .top{display:flex;align-items:center;gap:14px}
.ward .top h3{margin-top:0}
.wmap{position:relative;width:100%;padding-top:100%;border-radius:18px;overflow:hidden;background:var(--well);margin-top:18px}
.wmap > img{position:absolute;left:0;top:0;width:100%;height:100%;-webkit-filter:saturate(.75) brightness(.72);filter:saturate(.75) brightness(.72)}
.wmap svg{position:absolute;left:0;top:0;width:100%;height:100%}
.wd{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:8px;background:#0d1421;box-shadow:0 0 0 2.5px var(--orange)}
.wd.n{box-shadow:0 0 0 2.5px #7c8598}
.wd:after{content:'';position:absolute;left:4px;top:4px;width:8px;height:8px;border-radius:4px;background:var(--orange)}
.wd.n:after{background:#7c8598}
.wv{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:7px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,122,110,.85),0 3px 8px rgba(0,0,0,.6)}
.wv img{width:100%;height:100%;object-fit:cover}
.wkey{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font:400 13px/1.3 var(--f-ui);color:var(--text2)}
.wkey span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.wkey i{width:9px;height:9px;border-radius:5px;flex:none}
.wkey img{width:16px;height:16px;border-radius:4px}
.ward .cap{font:500 16px/1.45 var(--f-ui);color:var(--text);margin-top:14px}
.ward .cap b{color:var(--orange);font-weight:600}

/* розыгрыш — веер аркан */
.raffle{grid-column:1 / -1;display:flex;align-items:center;gap:28px;padding:24px 28px;overflow:hidden;position:relative}
.raffle .g-plus{width:64px;height:64px;border-radius:18px;background:rgba(34,197,94,.12);display:flex;align-items:center;justify-content:center;flex:none;font:600 24px/1 var(--f-display);color:var(--green);letter-spacing:-.02em}
.raffle .grow{flex:1;min-width:0}
.raffle h3{margin-top:0}
.fan{position:relative;width:420px;height:150px;flex:none}
.fan img{position:absolute;top:10px;width:190px;height:126px;border-radius:14px;object-fit:cover;box-shadow:0 14px 30px -10px rgba(0,0,0,.8),0 0 0 2px rgba(231,235,242,.08)}
.fan img:nth-child(1){left:0;-webkit-transform:rotate(-9deg);transform:rotate(-9deg);top:20px}
.fan img:nth-child(2){left:110px;-webkit-transform:rotate(-3deg);transform:rotate(-3deg)}
.fan img:nth-child(3){left:220px;-webkit-transform:rotate(4deg);transform:rotate(4deg);top:16px}

/* сравнение */
.cmp{overflow:hidden}
.cmp-r{display:grid;grid-template-columns:minmax(0,1fr) 220px 260px;align-items:center;min-height:62px;padding:0 26px;position:relative}
.cmp-r + .cmp-r:before{content:'';position:absolute;left:26px;right:26px;top:0;height:1px;background:var(--hair)}
.cmp-r span{font:400 15.5px/1.35 var(--f-ui);color:var(--text2)}
.cmp-r span:first-child{font:600 16px/1.3 var(--f-ui);color:var(--text)}
.cmp-r .p{color:var(--text);font-weight:600}
.cmp-r .i{width:20px;height:20px}
.cmp-r .ok{color:var(--green)}
.cmp-h{min-height:56px;background:rgba(231,235,242,.03)}
.cmp-h span,.cmp-h span:first-child{font:600 12px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text2)}
.cmp-h span.p{color:var(--cyan)}
.dash{display:block;width:14px;height:2px;border-radius:1px;background:var(--muted)}

/* срок */
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.term{padding:24px 24px 22px;display:flex;flex-direction:column;position:relative}
.term .lb{font:600 16px/1.2 var(--f-ui);color:var(--text)}
.term .pr{font:600 44px/1 var(--f-display);letter-spacing:-.035em;margin-top:18px;white-space:nowrap}
.term .pr small{font:600 26px/1 var(--f-display);margin-left:4px}
.term .pm{font:400 15px/1.4 var(--f-ui);color:var(--text2);margin-top:8px}
.term .off{position:absolute;right:20px;top:20px;height:26px;padding:0 9px;border-radius:8px;background:rgba(34,197,94,.15);color:var(--green);font:600 13px/26px var(--f-ui)}
.term .stars{margin-top:auto;padding-top:16px;border-top:1px solid var(--hair);margin-top:20px;display:flex;align-items:center;justify-content:space-between;font:500 14.5px/1.3 var(--f-ui);color:var(--text2)}
.term .stars b{color:var(--text);font-weight:600}
.term.best{box-shadow:inset 0 0 0 2px rgba(34,211,238,.55),0 10px 24px -14px rgba(0,0,0,.6)}
.terms-note{font:400 14px/1.45 var(--f-ui);color:var(--text2);margin-top:14px}

/* как оплатить */
.pay-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.steps{margin:0;padding:0;counter-reset:st}
.steps li{list-style:none;display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--hair);font:400 16px/1.5 var(--f-ui);color:var(--text2)}
.steps li:first-child{border-top:0;padding-top:4px}
.steps li:before{counter-increment:st;content:counter(st);flex:none;width:30px;height:30px;border-radius:15px;background:var(--well);color:var(--text);font:600 14px/30px var(--f-display);text-align:center}
.steps li b{color:var(--text);font-weight:600}
.method{display:flex;gap:16px;padding:20px 22px}
.method + .method{margin-top:14px}
.method .gl{width:48px;height:48px;border-radius:14px;background:var(--well);display:flex;align-items:center;justify-content:center;flex:none;color:var(--text)}
.method .gl .i{width:24px;height:24px}
.method .gl.tg{color:#5fb6f0}
.method h3{font:600 18px/1.25 var(--f-display);letter-spacing:-.01em}
.method p{font:400 15px/1.5 var(--f-ui);color:var(--text2);margin-top:5px}
.box{padding:24px 26px}
.box .h3{margin-bottom:14px}

/* отмена */
.cancel{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;padding:30px 34px}
.cancel .fe{width:80px;height:80px}
.cancel h3{font-size:26px;line-height:1.15;letter-spacing:-.02em;font-weight:700}
.cancel h3 + p{font:400 15.5px/1.5 var(--f-ui);color:var(--text2);margin-top:8px}
.cancel ul{margin:0;padding:0;list-style:none}
.cancel li{display:flex;gap:10px;font:400 15px/1.5 var(--f-ui);color:var(--text2);padding:7px 0}
.cancel li .i{width:18px;height:18px;color:var(--text);flex:none;margin-top:2px}
.cancel li b{color:var(--text);font-weight:600}

/* вопросы */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.qa{padding:22px 24px}
.qa h3{font:600 17.5px/1.3 var(--f-ui);letter-spacing:-.005em}
.qa p{font:400 15px/1.55 var(--f-ui);color:var(--text2);margin-top:8px}
.qa p b{color:var(--text);font-weight:600}
.fine{font:400 13.5px/1.5 var(--f-ui);color:var(--text2);margin-top:16px}
.fine u{text-decoration:none;color:var(--text);box-shadow:inset 0 -1px 0 var(--border-hi)}

@media (max-width:1100px){
  .ph-grid{grid-template-columns:1fr;gap:36px}
  .ph-grid .lock{margin-top:0}
  .lock{max-width:560px}
  .inc{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 761–1100: карта вардов справа квадратом 380 px, подпись слева (иначе квадрат через padding-top вытягивался в столбик) */
  .ward{grid-row:auto;grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:28px;align-items:start}
  .ward > .top,.ward > .wkey,.ward > .cap{grid-column:1}
  .ward > .wmap{grid-column:2;grid-row:1 / span 4;margin-top:0}
  .fan{width:320px}
  .fan img{width:150px;height:100px}
  .fan img:nth-child(2){left:85px} .fan img:nth-child(3){left:170px}
  .cancel{grid-template-columns:auto 1fr}
  .cancel ul{grid-column:1 / -1}
}
@media (max-width:900px){
  .terms{grid-template-columns:1fr}
  .pay-grid{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .cmp-r{grid-template-columns:minmax(0,1fr) 110px 130px;padding:0 16px;column-gap:10px}
  .cmp-r + .cmp-r:before{left:16px;right:16px}
}
@media (max-width:760px){
  .lock{padding:16px 14px}
  .lock .quote{font-size:19px}
  .locked .mm{width:96px;height:96px}
  .inc{grid-template-columns:1fr}
  .ward{display:flex;flex-direction:column}
  .ward > .wmap{margin-top:18px}
  .raffle{flex-direction:column;align-items:flex-start;padding:22px 20px 0;gap:14px}
  .fan{width:100%;max-width:330px;height:132px}
  .fan img{width:150px;height:100px}
  .fan img:nth-child(2){left:90px} .fan img:nth-child(3){left:180px}
  .cmp-r{grid-template-columns:minmax(0,1fr) 84px 104px;min-height:58px;padding:10px 14px}
  .cmp-r span,.cmp-r span:first-child{font-size:14px}
  .cmp-h span,.cmp-h span:first-child{font-size:11px;letter-spacing:.05em}
  .term .pr{font-size:38px}
  .cancel{grid-template-columns:1fr;gap:14px;padding:24px 20px}
  .cancel .fe{width:60px;height:60px}
  .cancel h3{font-size:23px}
  .box,.method,.qa{padding:18px 18px}
}
/* ---------- 21.10, проход «чего не хватает» (ничего не убрано) ---------- */
.gbar i.ok{background:var(--green)}
.gbar i.miss{background:var(--coral)}
.gbar i.next{background:none;border:1.5px dashed rgba(231,235,242,.34)}
.raffle .go-r{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:600 14.5px/1 var(--f-ui);color:var(--cta)}
.raffle .go-r .i{width:14px;height:14px}
.method .gl.us{color:#9ad1ff}
.fine a{color:var(--text);box-shadow:inset 0 -1px 0 var(--border-hi)}

/* style="" из макета → классы (inline-стиль сильнее любого правила — отсюда !important) */
.u-0d201587{font:400 15.5px/1.5 var(--f-ui) !important;color:var(--text2) !important;margin-top:6px !important}
.u-0ee7f66a{margin-top:12px !important}
.u-191801a5{left:70% !important;top:44% !important;background:var(--coral) !important}
.u-24b2fbe3{left:67.2% !important;top:59.4% !important}
.u-26d13ce5{left:7.8% !important;top:78.1% !important}
.u-29ab00cb{object-position:56% 30% !important}
.u-2ec2b3ea{object-position:42% 30% !important}
.u-2eeb30cb{background:var(--green) !important}
.u-3a39a2cf{left:46.9% !important;top:46.9% !important}
.u-3d494aad{margin-top:3px !important}
.u-4a88a062{left:7.8% !important;top:89.1% !important}
.u-5306f18f{font-size:22px !important}
.u-54069065{left:10.9% !important;top:70.3% !important}
.u-55895637{left:51.6% !important;top:51.6% !important}
.u-6c8dbcfc{left:28.1% !important;top:78.1% !important}
.u-6d15de34{left:42% !important;top:52% !important;background:var(--cyan) !important}
.u-79239913{left:23.4% !important;top:56.2% !important}
.u-7d65536c{left:9.4% !important;top:18.8% !important}
.u-811a1309{padding-top:0 !important}
.u-8fa86b64{background:#7c8598 !important}
.u-92397b96{left:78% !important;top:60% !important;background:var(--amber) !important}
.u-95e3a863{object-position:44% 25% !important}
.u-9bad4bbc{background:var(--orange) !important}
.u-9ddaa824{left:86% !important;top:38% !important;background:var(--coral) !important}
.u-a0c122dc{left:30% !important;top:66% !important;background:var(--cyan) !important}
.u-a9677ac5{left:35.9% !important;top:25% !important}
.u-b533e737{left:39.1% !important;top:37.5% !important}
.u-b635f3ea{left:43.8% !important;top:34.4% !important}
.u-ed2d26e0{background:var(--cyan) !important}
.u-f308dcba{color:var(--text2) !important}
.u-fe5d9e7a{object-position:28% 30% !important}