:root{
    --bg:#0b0c0e;--panel:#121417;--panel-2:#161a1f;--text:#e8eaed;--muted:#9aa0a6;--border:#1f2735;
    --accent:#8ab4f8;--accent-2:#a78bfa;--radius:14px;--shadow:0 6px 20px rgba(0,0,0,.35);
    --hero-vgap:98px;
    --hero-height-scale:.6667; /* ~уменьшено в 1.5 раза */
    /* Глобальный переключаемый шрифт */
    --font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--font-family)}
a{color:inherit}

/* A11y helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.container{width:70vw;margin:0 auto;padding:24px 0}
.header{display:flex;align-items:center;gap:16px;justify-content:flex-start;position:relative;margin-bottom:16px}
.brand{margin:0;font-weight:800;letter-spacing:.3px}

/* Font switcher */
.font-switcher{margin-left:auto}
.font-switcher select{appearance:none;background:var(--panel-2);color:var(--text);border:1px solid var(--border);padding:10px 12px;border-radius:10px;font-weight:700;box-shadow:var(--shadow);min-width:180px}
.font-switcher select:hover{outline:2px solid var(--accent);outline-offset:2px}

.btn{appearance:none;border:1px solid var(--border);background:var(--panel-2);color:var(--text);
    padding:10px 14px;border-radius:10px;cursor:pointer;text-decoration:none;font-weight:700;box-shadow:var(--shadow)}
.btn:hover{outline:2px solid var(--accent);outline-offset:2px}
.btn-icon{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:10px}
.btn-icon i{font-size:18px}

.section{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow);margin-top:0}
.section>h2{margin:0 0 10px}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1400px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.card{display:flex;flex-direction:column;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.card .imgwrap{height:180px;background:#0f1216;border-radius:12px;overflow:hidden;contain:paint}
.card .imgwrap img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{padding:12px}
.card .title{font-weight:700;margin-bottom:6px}
.price{font-weight:800}

.title-xl{font-size:28px;margin:0 0 6px}
.rich p{margin:0 0 10px}
.rich a{color:var(--accent)}

.muted{color:var(--muted)}
.error{background:#3a1111;border:1px solid #612020;color:#ffd2d2;padding:10px;border-radius:10px}

/* floating menu */
.floating-menu{position:fixed;right:5vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;z-index:50}
.fm-btn{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--text);background:var(--panel-2);border:1px solid var(--border);box-shadow:var(--shadow);cursor:pointer}
.fm-btn i{font-size:24px}
.fm-btn.active,.fm-btn:hover{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:1100px){.container{width:86vw}.floating-menu{position:fixed;left:50%;transform:translate(-50%,0);top:24px;bottom:auto;right:auto;flex-direction:row}}
@media (max-width:860px){.container{width:92vw}.fm-btn{width:64px;height:64px}.fm-btn i{font-size:20px}}

.hidden{display:none!important}

/* product detail */
.product-wrap{position:relative;margin-top:0}
.product-layout{display:grid;grid-template-columns:11fr 3fr;gap:20px;align-items:start}
@media (max-width:1100px){.product-layout{grid-template-columns:1fr}}
.left-col{min-width:0}
.right-col{background:transparent;border:none;border-radius:0;padding:0;position:sticky;top:24px;min-width:0;display:flex;flex-direction:column;gap:16px}
.side-panel{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:16px}
.srv-section .srv-title{font-weight:800;margin:0 0 8px;font-size:14px}
.srv-grid{display:flex;flex-wrap:wrap;gap:8px}
.srv-grid img{width:72px;height:72px;object-fit:cover;object-position:center;display:block;border-radius:8px;background:#0f1216;border:1px solid var(--border);padding:6px;box-sizing:border-box}
#pSrvSupport{border-color:rgba(134,239,172,0.25);border-width:1px}
#pSrvNotSupport{border-color:rgba(252,165,165,0.25);border-width:1px}

.btn-side-back{position:absolute;left:-74px;top:0;transform:translateY(0)}
@media (max-width:860px){.btn-side-back{left:-44px}}

.paylist{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.pay-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;text-align:center;padding:12px 16px;border-radius:10px;background:var(--panel-2);color:var(--text);text-decoration:none;font-weight:700;word-break:break-word;border:1px solid var(--border);box-shadow:var(--shadow);min-height:40px}
.pay-btn:hover{outline:2px solid var(--accent);outline-offset:2px;filter:brightness(1.05)}
.pay-btn .pay-label{line-height:1}
.pay-btn.with-logo .pay-label{display:none}
.pay-logo{height:16px;width:auto;display:block;image-rendering:-webkit-optimize-contrast;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.pay-btn[data-type="funpay"]{background:var(--panel-2);color:var(--text);border-color:var(--border)}
.pay-btn[data-type="plati"],.pay-btn[data-type="plati.ru"]{background:#111927;color:var(--text);border-color:#1a2432}
.pay-btn[data-type="crypto"],.pay-btn[data-type="cryptocurrency"]{background:var(--panel-2);color:var(--text)}

/* gallery */
.gallery{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:10px}
.slider{position:relative;overflow:hidden;border-radius:10px}
.track{display:flex;transition:transform .25s ease;will-change:transform}
.slide{flex:0 0 100%;height:460px;background:#0f1216;border-radius:12px;overflow:hidden;contain:paint;display:flex;align-items:center;justify-content:center}
/* Scale main image by height, keep aspect ratio */
.slide img{height:100%;width:auto;object-fit:contain;display:block}
.nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);border:1px solid var(--border);width:42px;height:42px;border-radius:50%;color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.nav.prev{left:10px}
.nav.next{right:10px}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow:auto}
/* Scale thumbs by height */
.thumbs img{height:60px;width:auto;object-fit:contain;border:2px solid transparent;border-radius:8px;cursor:pointer;flex:0 0 auto;background:#0f1216}
.thumbs img.active{border-color:var(--accent)}
@media (max-width:860px){.slide{height:320px}.thumbs img{height:50px;width:auto}}

/* Lightbox (fullscreen image viewer) */
body.lb-open{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,0);--lb-pad:24px;--lb-safe-top:env(safe-area-inset-top,0px);--lb-safe-bottom:env(safe-area-inset-bottom,0px);--lb-safe-left:env(safe-area-inset-left,0px);--lb-safe-right:env(safe-area-inset-right,0px);--lb-pad-t:calc(var(--lb-pad) + var(--lb-safe-top));--lb-pad-b:calc(var(--lb-pad) + var(--lb-safe-bottom));--lb-pad-l:calc(var(--lb-pad) + var(--lb-safe-left));--lb-pad-r:calc(var(--lb-pad) + var(--lb-safe-right));padding:var(--lb-pad-t) var(--lb-pad-r) var(--lb-pad-b) var(--lb-pad-l);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease, visibility .22s ease, background-color .22s ease}
.lightbox.open{opacity:1;visibility:visible;pointer-events:auto;background-color:rgba(0,0,0,.9)}
.lightbox .lb-img-wrap{position:relative;z-index:1;max-width:calc(100vw - var(--lb-pad-l) - var(--lb-pad-r));display:flex;align-items:center;justify-content:center;transform:scale(.985);opacity:.001;transition:transform .22s ease, opacity .22s ease}
.lightbox.open .lb-img-wrap{transform:scale(1);opacity:1}
.lightbox img{max-width:calc(100vw - var(--lb-pad-l) - var(--lb-pad-r));max-height:calc(var(--vvh, 100vh) - var(--lb-pad-t) - var(--lb-pad-b));width:auto;height:auto;object-fit:contain;display:block;box-shadow:0 10px 40px rgba(0,0,0,.6);border-radius:10px;cursor:zoom-out}
.lightbox .lb-close{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;z-index:3}
.lightbox .lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:26px;z-index:3}
.lightbox .lb-prev{left:18px}
.lightbox .lb-next{right:18px}
.lightbox .lb-counter{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(0,0,0,.4);padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-weight:700;font-size:12px;z-index:3}

/* bg */
.container{position:relative;z-index:1}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
        radial-gradient(60% 80% at 20% 10%, rgba(138,180,248,0.18) 0%, rgba(138,180,248,0) 50%),
        radial-gradient(50% 60% at 80% 30%, rgba(167,139,250,0.18) 0%, rgba(167,139,250,0) 55%),
        radial-gradient(60% 80% at 50% 90%, rgba(110,231,183,0.12) 0%, rgba(110,231,183,0) 55%);filter:saturate(115%);animation:bgMove 24s linear infinite alternate;will-change:transform}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.035) 1px, transparent 0),
        linear-gradient(to bottom, rgba(255,255,255,0.03), rgba(255,255,255,0));background-size:22px 22px,100% 100%;opacity:.6}
@keyframes bgMove{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-2%,0) scale(1.05)}}
@media (prefers-reduced-motion:no-preference){
    :root::view-transition-old(root),:root::view-transition-new(root){animation-duration:.22s}
}
.floating-menu{view-transition-name:none}

/* ===== HERO: caption над видео, единый «кадр» ===== */
.landing-hero{
    position:relative;
    min-height:calc(100dvh - var(--hero-vgap)); /* вернули прежнюю высоту героя */
    display:flex;
    flex-direction:column;
    gap:0;
    align-items:stretch;
    justify-content:stretch;
    background:transparent;
    border:none;
    padding:0;
    text-align:left;
}

/* «шапка» стала ниже ≈ в 1.5 раза (уменьшили вертикальные отступы и зазоры) */
.hero-caption{
    position:relative;
    z-index:2;
    margin:0;
    padding:9px 16px;                /* было 14px 16px */
    /* Полупрозрачный градиент в стилистике сайта + лёгкий акцентовый блик сверху */
    background:
            linear-gradient(180deg, rgba(17,19,23,0.88) 0%, rgba(18,20,24,0.80) 100%),
            linear-gradient( to bottom, rgba(138,180,248,0.10), rgba(167,139,250,0.08) 40%, rgba(0,0,0,0) 100%);
    backdrop-filter: blur(6px) saturate(120%);
    border:1px solid var(--border);
    border-bottom:0;
    border-top-left-radius:12px;
    border-top-right-radius:12px;
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.05);

    display:flex;
    align-items:baseline;
    gap:8px;                         /* было 10px */
    flex-wrap:nowrap;
    overflow:hidden;
}

/* title и subtitle в одной строке через тире */
.hero-title{
    font-size:20px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.2px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration:none;
    display:inline-block;
    padding:2px 0;                   /* было 6px 0 — ещё минус высота */
    outline:none;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:0 0 auto;
    min-width:0;
}
.hero-title:hover{ filter:brightness(1.06); }
.hero-title:active{ transform:translateY(1px); }
.hero-title:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.hero-sep{opacity:.75; user-select:none}

.hero-subtitle{
    font-size:14px;                  /* оставляем увеличенный шрифт */
    line-height:1.2;
    color: rgba(232,234,237,0.96);
    margin:2px 0 0;                  /* было 6px 0 2px — строка стала компактнее */
    font-weight:800;
    letter-spacing:.1px;
    text-shadow:0 2px 10px rgba(0,0,0,.45);
    -webkit-text-stroke:.35px rgba(0,0,0,.65);
    text-stroke:.35px rgba(0,0,0,.65);
    paint-order:stroke fill;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:1 1 auto;
    min-width:0;
}

/* нижняя часть (видео) без изменений — сшита с caption */
.hero-media{
    position:relative;
    isolation:isolate;
    background:var(--panel-2);
    border:1px solid var(--border);
    border-top:0;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
    overflow:hidden;
    flex:1 1 auto;
    min-height:0;
    box-shadow: var(--shadow);
}
.video-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.video-el{
    position:absolute; inset:0; /* fill parent */
    width:100%; height:100%;
    object-fit:cover; /* always cover container without distortions */
    contain:paint;
}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55))}

/* clickable overlay to open product when clicking the video */
.hero-link{
    position:absolute; inset:0; z-index:1; display:block;
}
.hero-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.hero-buy{
    position:absolute; right:24px; bottom:24px; z-index:2;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:20px; font-weight:800; letter-spacing:.2px;
    padding:14px 20px; border-radius:12px; text-decoration:none;
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
    -webkit-text-stroke:.35px rgba(0,0,0,.55);
    text-stroke:.35px rgba(0,0,0,.55);
    paint-order:stroke fill;
    background-color: rgba(220, 146, 30, 0.96);
    background-image: linear-gradient(135deg, rgba(222,116,30,1) 0%, rgba(236,184,50,0.98) 100%);
    backdrop-filter: blur(6px) saturate(130%);
    border:1px solid rgba(255, 210, 77, 0.65); cursor:pointer;
    box-shadow:
            0 10px 26px rgba(0,0,0,.55),
            0 0 0 1px rgba(0,0,0,.35),
            inset 0 1px 0 rgba(255,255,255,.15);
}
.hero-buy:hover{ filter:brightness(1.04) }
.hero-buy:active{ transform:translateY(1px) }
.hero-buy:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.landing-hero + .grid{ margin-top:16px }

@media (max-width:1100px){
    .hero-title{font-size:18px}
    .hero-subtitle{font-size:14px}
}
@media (max-width:860px){
    .hero-buy{ right:18px; bottom:18px; font-size:16px; padding:10px 14px; }
}


/* scrollbars */
*{scrollbar-width:none;scrollbar-color:transparent transparent}
body{-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0}
*::-webkit-scrollbar-thumb{background:transparent}
*::-webkit-scrollbar-track{background:transparent}

/* Ambilight overlay */
.ambilight-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:visible}
.ambilight-video{
    position:absolute;left:0;top:0;
    width:0;height:0; /* set from JS each frame */
    object-fit:cover;
    filter:blur(110px) saturate(140%) brightness(115%);
    opacity:.9;
    transform-origin:center center;
    will-change:transform, filter, opacity;
}


/* Use dynamic viewport units when supported to prevent overflow under browser UI */
@supports (height: 1dvh){
    .lightbox img{
        max-height:calc(100dvh - var(--lb-pad-t) - var(--lb-pad-b));
        max-width:calc(100vw - var(--lb-pad-l) - var(--lb-pad-r));
    }
}