/* ВИРТУАЛЬНЫЙ СЛОН — дизайн-система «матовое стекло» (канон С151, рецепт B-dark исправленный).
Пять принципов: плотность через background-color (0.5–0.72), saturate обязателен, объём через
inset-тени (не border), скругление 16–20px, grain-зерно. Типографика 300–400, жирного НЕТ. */
:root{
--i-wa:url("data:image/svg+xml;utf8,");
--i-tg:url("data:image/svg+xml;utf8,");
--i-yt:url("data:image/svg+xml;utf8,");
--bg0:#0b0d14; --bg1:#10131d;
--text:#eef0f6; --dim:#9aa2b5; --dim2:#6b7488;
--accent:#ff9a4d; --accent2:#7aa2ff; --ok:#5fbf72; --bad:#f4544e; --warn:#e8b64c;
--panel-bg:rgba(18,18,24,.55);
--panel-bg-dense:rgba(18,18,21,.72);
--panel-img:linear-gradient(160deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 40%, rgba(255,255,255,0) 100%);
--panel-blur:blur(28px) saturate(150%) brightness(1.02);
--panel-sh:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.32);
--r:18px;
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
background:var(--bg0); color:var(--text);
font:300 16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
-webkit-text-size-adjust:100%;
min-height:100vh; overflow-x:hidden;
}
b,strong,h1,h2,h3,h4{font-weight:400}
a{color:var(--accent);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
/* ── Цветная сцена под стеклом: медленно дрейфующие пятна ──
⭐ Канон стекла: стекло читается ТОЛЬКО когда под ним есть ЦВЕТНАЯ сцена. На плоском тёмном
фоне панель выглядит просто тёмным прямоугольником. Пятна закреплены к документу (не к вьюпорту)
и тянутся на всю высоту страницы — иначе при скролле низ сайта остаётся без сцены. */
.scene{position:fixed;inset:0;z-index:-2;background:
radial-gradient(120% 80% at 50% 0%, #1b1c2b 0%, #10121c 45%, #0b0d14 100%)}
.scene::before,.scene::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.85}
.scene::before{
width:58vmax;height:58vmax;left:-14vmax;top:-20vmax;
background:radial-gradient(circle at 40% 40%, rgba(255,140,56,.75), rgba(255,110,40,.16) 55%, rgba(255,110,40,0) 72%);
animation:drift1 26s ease-in-out infinite alternate;
}
.scene::after{
width:52vmax;height:52vmax;right:-16vmax;top:10vh;
background:radial-gradient(circle at 60% 40%, rgba(96,132,255,.7), rgba(96,132,255,.14) 55%, rgba(96,132,255,0) 72%);
animation:drift2 32s ease-in-out infinite alternate;
}
.scene .blob3{
position:absolute;width:46vmax;height:46vmax;left:26vw;bottom:-22vmax;border-radius:50%;
background:radial-gradient(circle at 50% 50%, rgba(180,92,255,.6), rgba(180,92,255,.12) 55%, rgba(180,92,255,0) 72%);
filter:blur(90px);opacity:.8;animation:drift3 38s ease-in-out infinite alternate;
}
/* ⛔ Пятна живут ВНУТРИ фиксированной сцены и смещаются параллаксом (--sy из JS).
Раньше был второй, прокручиваемый слой с overflow:hidden — он получал высоту ЭКРАНА
(position:absolute при непозиционированном body), и пятна обрезались по нижней границе
ровной горизонтальной линией. Именно это выглядело как «странная полоса перехода». */
.scene i{
position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.6;
will-change:transform;
}
.scene i:nth-of-type(1){width:44vmax;height:44vmax;left:-12vmax;top:52vh;
background:radial-gradient(circle,rgba(255,138,46,.5),rgba(255,138,46,0) 68%);
transform:translateY(calc(var(--sy,0) * -.10px))}
.scene i:nth-of-type(2){width:40vmax;height:40vmax;right:-10vmax;top:74vh;
background:radial-gradient(circle,rgba(122,162,255,.5),rgba(122,162,255,0) 68%);
transform:translateY(calc(var(--sy,0) * -.16px))}
.scene i:nth-of-type(3){width:42vmax;height:42vmax;left:16vw;top:96vh;
background:radial-gradient(circle,rgba(255,120,90,.42),rgba(255,120,90,0) 68%);
transform:translateY(calc(var(--sy,0) * -.22px))}
.scene i:nth-of-type(4){width:38vmax;height:38vmax;right:4vw;top:120vh;
background:radial-gradient(circle,rgba(150,110,255,.45),rgba(150,110,255,0) 68%);
transform:translateY(calc(var(--sy,0) * -.28px))}
@keyframes drift1{to{transform:translate(9vmax,7vmax) scale(1.12)}}
@keyframes drift2{to{transform:translate(-7vmax,9vmax) scale(.94)}}
@keyframes drift3{to{transform:translate(-9vmax,-6vmax) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.scene::before,.scene::after,.scene .blob3{animation:none}}
/* ── Стекло ── */
.glass{
position:relative;border-radius:var(--r);
background-color:var(--panel-bg);
background-image:var(--panel-img);
-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
box-shadow:var(--panel-sh);
}
.glass.dense{background-color:var(--panel-bg-dense)}
.grain::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
opacity:.025;mix-blend-mode:overlay;background-image:var(--grain);
}
/* ── Каркас ── */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
main{padding-top:86px;min-height:100vh}
section{padding:56px 0}
/* ── Шапка ── */
.hdr{
position:fixed;top:0;left:0;right:0;z-index:50;
background:rgba(11,13,20,.55);
-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
}
.hdr-in{display:flex;align-items:center;gap:26px;height:66px;max-width:1180px;margin:0 auto;padding:0 20px}
.logo{font-size:17px;letter-spacing:.14em;color:var(--text);white-space:nowrap}
.logo em{font-style:normal;color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{color:var(--dim);padding:9px 13px;border-radius:11px;font-size:14.5px;transition:color .2s, background .2s;white-space:nowrap}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav a.on{color:var(--text);background:rgba(255,255,255,.08)}
.cart-btn{
position:relative;display:flex;align-items:center;gap:8px;color:var(--text);
background:rgba(255,255,255,.08);border:0;border-radius:12px;padding:9px 15px;cursor:pointer;
font-size:14.5px;transition:background .2s;
}
.cart-btn:hover{background:rgba(255,255,255,.13)}
.cart-n{
min-width:19px;height:19px;border-radius:10px;background:var(--accent);color:#1a1206;
font-size:12px;display:flex;align-items:center;justify-content:center;padding:0 5px;
transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.cart-n.bump{transform:scale(1.35)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.burger span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;border-radius:2px;transition:.25s}
/* мобильное меню */
.mnav{
display:none;position:fixed;top:66px;left:12px;right:12px;z-index:49;padding:10px;
border-radius:var(--r);flex-direction:column;
}
.mnav.open{display:flex}
.mnav a{color:var(--text);padding:13px 16px;border-radius:12px;font-size:16px}
.mnav a:active{background:rgba(255,255,255,.08)}
/* ── Hero ── */
.hero{padding:72px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-art img{width:100%;height:auto;animation:float 7s ease-in-out infinite;filter:drop-shadow(0 24px 60px rgba(0,0,0,.45))}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(-.4deg)}}
@media (prefers-reduced-motion:reduce){.hero-art img{animation:none}}
.hero-stats{display:flex;gap:30px;margin-top:34px;flex-wrap:wrap}
.hero-stats b{display:block;font-size:26px;font-weight:400;letter-spacing:-.01em}
.hero-stats span{color:var(--dim);font-size:13px}
.hero h1{font-size:clamp(34px,6vw,64px);line-height:1.08;margin:0 0 18px;letter-spacing:-.015em}
.hero h1 .grad{
background:linear-gradient(92deg,#ffb37a 0%,#ff9a4d 38%,#b28aff 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{color:var(--dim);font-size:clamp(16px,2.2vw,19px);max-width:560px;margin:0 0 30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
/* ── Кнопки ── */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:linear-gradient(135deg,#ffab68,#ff8d33);color:#221204;border:0;border-radius:14px;
padding:13px 26px;font-size:15.5px;cursor:pointer;letter-spacing:.01em;
box-shadow:0 6px 22px rgba(255,138,46,.28), inset 0 1px 0 rgba(255,255,255,.35);
transition:transform .18s, box-shadow .18s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(255,138,46,.36), inset 0 1px 0 rgba(255,255,255,.35)}
.btn:active{transform:translateY(0)}
.btn.ghost{
background:rgba(255,255,255,.07);color:var(--text);
box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 0 transparent;
}
.btn.ghost:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.btn.yt{
background:linear-gradient(135deg,#ff4a3d,#e00016);color:#fff;
box-shadow:0 6px 22px rgba(224,0,22,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn.yt:hover{box-shadow:0 10px 28px rgba(224,0,22,.42), inset 0 1px 0 rgba(255,255,255,.28)}
.btn.wa{
background:linear-gradient(135deg,#2ec269,#128c4a);color:#fff;
box-shadow:0 6px 22px rgba(37,211,102,.28), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.wa:hover{box-shadow:0 10px 28px rgba(37,211,102,.42), inset 0 1px 0 rgba(255,255,255,.22)}
.btn.tg{
background:linear-gradient(135deg,#2facea,#1a82c4);color:#fff;
box-shadow:0 6px 22px rgba(42,171,238,.28), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.tg:hover{box-shadow:0 10px 28px rgba(42,171,238,.42), inset 0 1px 0 rgba(255,255,255,.22)}
.btn.wa::before,.btn.tg::before{-webkit-mask-image:var(--i-tg);mask-image:var(--i-tg)}
.btn.wa::before{-webkit-mask-image:var(--i-wa);mask-image:var(--i-wa)}
.btn.tg::before{-webkit-mask-image:var(--i-tg);mask-image:var(--i-tg)}
.btn.sm.wa::before,.btn.sm.tg::before{width:16px;height:16px}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
.btn.sm{padding:9px 16px;font-size:14px;border-radius:11px}
/* ── Заголовки секций ── */
.sec-t{font-size:clamp(24px,3.6vw,36px);margin:0 0 8px;letter-spacing:-.01em}
.sec-s{color:var(--dim);margin:0 0 30px;font-size:16px}
/* ── Сетки карточек ── */
.grid{display:grid;gap:16px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
/* Категорийные плитки на главной */
.cat-tile{
padding:26px 24px;display:flex;flex-direction:column;gap:8px;color:var(--text);
transition:transform .22s, background-color .22s;overflow:hidden;
}
.cat-tile:hover{transform:translateY(-4px);background-color:rgba(24,24,32,.62)}
.cat-tile .ic{font-size:30px;line-height:1;margin-bottom:6px}
.cat-tile .t{font-size:19px}
.cat-tile .d{color:var(--dim);font-size:14px}
.cat-tile .n{margin-top:auto;padding-top:12px;color:var(--accent);font-size:14px}
/* ── Карточка товара ── */
.pcard{
display:flex;flex-direction:column;overflow:hidden;cursor:pointer;
transition:transform .22s, background-color .22s;
}
.pcard:hover{transform:translateY(-4px);background-color:rgba(24,24,32,.62)}
.pcard .ph{
aspect-ratio:1/1;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;
border-radius:calc(var(--r) - 6px);margin:10px 10px 0;overflow:hidden;
}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.pcard:hover .ph img{transform:scale(1.045)}
.pcard .ph .noimg{font-size:34px;opacity:.32}
.noimg-box{
width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
background:linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
}
.noimg-ic{font-size:32px;opacity:.5}
.noimg-t{font-size:11.5px;letter-spacing:.09em;color:var(--dim2);text-transform:uppercase;text-align:center;padding:0 10px}
.pcard .in{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard .nm{font-size:14.5px;line-height:1.35;min-height:2.7em}
.pcard .meta{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:6px}
.pcard .price{font-size:17px;letter-spacing:.01em}
.pcard .stock{font-size:12.5px;color:var(--dim)}
.pcard .stock.zero{color:var(--bad)}
.pcard .add{
margin-top:10px;width:100%;border:0;border-radius:11px;padding:10px;cursor:pointer;font-size:14px;
background:rgba(255,255,255,.08);color:var(--text);transition:background .2s;
}
.pcard .add:hover{background:rgba(255,154,77,.22)}
.pcard .add[disabled]{opacity:.4;cursor:default;background:rgba(255,255,255,.05)}
/* чипсы фильтров */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
flex:0 0 auto;border:0;border-radius:999px;padding:9px 16px;font-size:14px;cursor:pointer;
background:rgba(255,255,255,.07);color:var(--dim);transition:background .2s,color .2s;white-space:nowrap;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.chip:hover{color:var(--text)}
.chip.on{background:rgba(255,154,77,.2);color:var(--text);box-shadow:inset 0 0 0 1px rgba(255,154,77,.35)}
.chip .n{opacity:.55;margin-left:5px;font-size:12.5px}
.search{
width:100%;background:rgba(255,255,255,.06);border:0;border-radius:14px;padding:14px 18px;
outline:none;font-size:16px;color:var(--text);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.search::placeholder{color:var(--dim2)}
.search:focus{box-shadow:inset 0 0 0 1px rgba(255,154,77,.4)}
/* ── Модалка товара / корзина ── */
.ov{position:fixed;inset:0;z-index:80;background:rgba(8,9,16,.18);display:flex;align-items:flex-end;justify-content:center}
.sheet{
width:100%;max-width:680px;max-height:92vh;overflow:auto;
border-radius:22px 22px 0 0;padding:22px;
background-color:var(--panel-bg-dense);
background-image:var(--panel-img);
-webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 -12px 40px rgba(0,0,0,.4);
animation:sheetup .28s cubic-bezier(.32,.9,.35,1);
}
@keyframes sheetup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet h3{margin:0 0 14px;font-size:19px;padding-right:44px}
.sheet .close{position:absolute;right:16px;top:12px;background:none;border:0;color:var(--dim);font-size:26px;cursor:pointer;padding:6px;line-height:1}
.sheet-head{position:relative}
.pph{border-radius:14px;overflow:hidden;margin-bottom:10px;background:rgba(255,255,255,.04)}
.pph img{width:100%;max-height:340px;object-fit:contain}
.thumbs{display:flex;gap:8px;margin-bottom:14px}
.thumb{
width:62px;height:62px;padding:0;border:0;border-radius:11px;overflow:hidden;cursor:pointer;
background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);opacity:.65;transition:opacity .2s,box-shadow .2s;
}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover{opacity:.9}
.thumb.on{opacity:1;box-shadow:inset 0 0 0 2px var(--accent)}
/* Просмотр фото во весь экран */
.pph img{cursor:zoom-in}
.lb{
position:fixed;inset:0;z-index:120;background:rgba(6,7,13,.92);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
display:flex;align-items:center;justify-content:center;animation:lbin .18s ease-out;
}
@keyframes lbin{from{opacity:0}to{opacity:1}}
.lb-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:56px 16px}
.lb-stage img{
max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;
transition:transform .12s ease-out;touch-action:none;user-select:none;-webkit-user-drag:none;
}
.lb-close{
position:absolute;top:14px;right:16px;z-index:2;width:42px;height:42px;border:0;border-radius:12px;
background:rgba(255,255,255,.08);color:#fff;font-size:26px;line-height:1;cursor:pointer;
}
.lb-close:hover{background:rgba(255,255,255,.16)}
.lb-nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:64px;border:0;border-radius:14px;
background:rgba(255,255,255,.07);color:#fff;font-size:30px;line-height:1;cursor:pointer;
}
.lb-nav:hover{background:rgba(255,255,255,.15)}
.lb-nav.prev{left:14px}
.lb-nav.next{right:14px}
.lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:var(--dim);font-size:13.5px}
@media (max-width:640px){
.lb-stage{padding:64px 8px}
.lb-nav{width:40px;height:56px;font-size:26px}
}
.pdesc{color:var(--dim);font-size:14.5px;line-height:1.6}
.pdesc strong{color:var(--warn)}
/* поля форм */
label{display:block;font-size:13px;color:var(--dim);margin:0 0 5px}
.inp{
width:100%;background:rgba(255,255,255,.06);border:0;border-radius:12px;padding:13px 15px;outline:none;
font-size:16px;color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.inp:focus{box-shadow:inset 0 0 0 1px rgba(255,154,77,.4)}
textarea.inp{min-height:74px;resize:vertical}
.field{margin-bottom:14px}
.frow{display:flex;gap:12px}
.frow .field{flex:1}
/* корзина: строки */
.cl{display:flex;gap:12px;align-items:center;padding:12px 0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
.cl:last-of-type{box-shadow:none}
.cl .im{width:52px;height:52px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.05);flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.cl .im img{width:100%;height:100%;object-fit:cover}
.cl .nm{flex:1;min-width:0;font-size:14px;line-height:1.35}
.cl .qty-c{display:flex;align-items:center;gap:2px}
.cl .qb{width:30px;height:30px;border:0;border-radius:9px;background:rgba(255,255,255,.08);color:var(--text);cursor:pointer;font-size:16px}
.cl .qv{min-width:30px;text-align:center;font-size:14.5px}
.cl .pr{width:86px;text-align:right;font-size:14.5px;white-space:nowrap}
.cl .rm{background:none;border:0;color:var(--dim2);cursor:pointer;font-size:17px;padding:4px}
.total-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0 4px;font-size:19px}
/* ── Услуги / прайсы ── */
.svc{padding:26px}
.svc h3{margin:0 0 6px;font-size:20px}
.svc .sub{color:var(--dim);font-size:14px;margin:0 0 16px}
.price-list{margin:0;padding:0;list-style:none}
.price-list li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:14.5px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.05)}
.price-list li:last-child{box-shadow:none}
.price-list .v{color:var(--accent);white-space:nowrap}
.game-list{margin:0;padding:0;list-style:none;columns:2;column-gap:22px;font-size:13.5px;color:var(--dim)}
.game-list li{padding:3px 0;break-inside:avoid}
.svc .big-price{font-size:26px;margin:16px 0 4px;color:var(--accent)}
/* ── Отзывы ── */
.rev-strip{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rev-strip::-webkit-scrollbar{display:none}
.rev-strip img{
height:330px;width:auto;border-radius:16px;scroll-snap-align:start;flex:0 0 auto;
box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1);
}
/* ── Шаги (как заказать) ── */
.steps{counter-reset:s}
.step{display:flex;gap:16px;padding:13px 0;align-items:flex-start}
.step::before{
counter-increment:s;content:counter(s);
flex:0 0 34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:rgba(255,154,77,.16);color:var(--accent);font-size:15px;
}
.step p{margin:4px 0 0;color:var(--dim);font-size:14.5px}
.step .t{color:var(--text);font-size:15.5px}
/* ── Футер ── */
footer{padding:44px 0 110px;color:var(--dim);font-size:14px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;padding:30px}
.f-grid h4{margin:0 0 12px;color:var(--text);font-size:15px}
.f-grid a{display:block;color:var(--dim);padding:4px 0;font-size:14px}
.f-grid a:hover{color:var(--text)}
.f-note{margin-top:18px;font-size:12px;color:var(--dim2);line-height:1.5}
.soc{display:flex;gap:10px;margin-top:12px}
.soc a{
width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.07);display:flex;
align-items:center;justify-content:center;font-size:18px;transition:background .2s;padding:0;
}
.soc a:hover{background:rgba(255,255,255,.13)}
.soc a::before{
content:"";width:20px;height:20px;background:currentColor;
-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
}
.soc a.wa{color:#3ec46f}
.soc a.tg{color:#3fb0ea}
.soc a.yt{color:#ff4034}
.soc a.wa::before{-webkit-mask-image:var(--i-wa);mask-image:var(--i-wa)}
.soc a.tg::before{-webkit-mask-image:var(--i-tg);mask-image:var(--i-tg)}
.soc a.yt::before{-webkit-mask-image:var(--i-yt);mask-image:var(--i-yt)}
/* ── Reveal-анимации при скролле ── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* ── Тосты ── */
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:99;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
border-radius:13px;padding:12px 18px;font-size:14.5px;
background:rgba(14,15,22,.85);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.45);
animation:sheetup .25s ease;
}
.toast.bad{color:#ffb3b0}
/* ── Планшет ── */
@media (max-width:1024px){
.grid.c4{grid-template-columns:repeat(3,1fr)}
.grid.c3{grid-template-columns:repeat(2,1fr)}
.f-grid{grid-template-columns:1fr 1fr}
}
/* ── Мобильный ── */
@media (max-width:960px){
.hero-grid{grid-template-columns:1fr;gap:22px}
.hero-art{order:-1;max-width:460px;margin:0 auto}
}
@media (max-width:720px){
.nav{display:none}
.burger{display:block}
.hdr-in{gap:14px}
section{padding:38px 0}
.hero{padding:30px 0 26px}
.hero-art{max-width:340px}
.hero-stats{gap:20px;margin-top:26px}
.hero-stats b{font-size:22px}
.grid.c4{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:1fr}
.grid{gap:11px}
.pcard .in{padding:11px 12px 13px}
.pcard .nm{font-size:13.5px}
.game-list{columns:1}
.f-grid{grid-template-columns:1fr;padding:24px}
.rev-strip img{height:260px}
.frow{flex-direction:column;gap:0}
.wrap{padding:0 14px}
.sheet{padding:18px}
}
@media (min-width:721px){
.ov{align-items:center;padding:20px}
.sheet{border-radius:22px}
}