:root {
    color-scheme: dark;
    --page: #090b11;
    --surface: #131722;
    --surface-raised: #1b2030;
    --line: #ffffff12;
    --text: #eef1fa;
    --muted: #9aa5ba;
    --accent: #8ba4ff;
}

html { background: var(--page); scroll-padding-top: 122px; }
body {
    min-height: 100vh;
    box-sizing: border-box;
    padding-top: 140px;
    background: radial-gradient(ellipse at 12% 0%, #30458626, transparent 44%),
                radial-gradient(ellipse at 95% 38%, #56407e1c, transparent 42%), var(--page);
    background-attachment: fixed;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
::selection { background: #738ff54d; color: white; }
* { scrollbar-width: thin; scrollbar-color: #3c455b var(--page); }
a { color: var(--accent); }

/* One viewport-fixed capsule; only the backdrop is filtered, never the page. */
header.site-header {
    position: fixed;
    z-index: 50;
    top: max(20px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    width: min(940px, calc(100% - 48px));
    height: 68px;
    box-sizing: border-box;
    border: 1px solid #ffffff24;
    border-radius: 999px;
    background: linear-gradient(125deg, #ffffff12, #ffffff04 46%, #ffffff0a), #141a298c;
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    box-shadow: inset 0 1px 0 #ffffff2b, inset 0 -1px 0 #ffffff08,
                0 12px 40px #00000040, 0 2px 8px #00000024;
    isolation: isolate;
}
.site-header::before {
    content: '';
    position: absolute;
    inset: -1px 12% auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, #dfe8ff80, transparent);
    pointer-events: none;
}
.site-header::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 230px 90px at var(--glass-x, 24%) var(--glass-y, 0%), #e7eeff12, transparent 78%);
    pointer-events: none;
}
.glass-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 36px;
    height: 100%;
    padding: 0 26px;
    border-radius: inherit;
}
.site-brand {
    flex-shrink: 0;
    color: #f6f8ff;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -.8px;
    text-decoration: none;
    text-shadow: 0 1px 10px #bbcaff16;
}
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a, .site-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    box-sizing: border-box;
    padding: 0 16px;
    border-radius: 999px;
    color: #c3ccde;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: background-color .18s ease, color .18s ease;
}
.site-nav a:hover, .site-account:hover { color: white; background: #ffffff0c; }
.site-nav a[aria-current="page"], .site-account[aria-current="page"] {
    color: white;
    background: linear-gradient(180deg, #ffffff13, #ffffff08);
    box-shadow: inset 0 1px 0 #ffffff14;
}
.site-account { margin-left: auto; gap: 9px; color: #e1e7f6; }
.site-account svg { width: 18px; height: 18px; opacity: .75; }
.account-short { display: none; }
.site-header a:focus-visible { outline: 2px solid #a9baff; outline-offset: 2px; }
@supports not (backdrop-filter: blur(1px)) {
    header.site-header { background: #171d2bf2; }
}

/* Landing page */
.index { gap: 76px; }
.index > .first.hero {
    position: relative;
    justify-content: center;
    align-items: center;
    min-height: 550px;
    padding: 64px 0 84px;
    box-sizing: border-box;
    text-align: center;
}
.index > .first.hero > .left { width: 100%; align-items: center; gap: 28px; }
.hero-eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; color: #9aaaff; font-size: 12px; font-weight: 800; letter-spacing: 2px; }
.hero-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: #99adff; box-shadow: 0 0 12px #99adff50; }
.index > .first.hero > .left > .title { margin: 0; font-size: clamp(42px, 5vw, 74px); font-weight: 800; letter-spacing: -2.6px; line-height: 1.13; }
.hero h1 span { color: #a9b7ff; }
.index > .first.hero > .left > .subtitle { max-width: 760px; justify-content: center; gap: 10px; }
.hero .subtitle > .item { padding: 7px 14px; border: 1px solid #ffffff10; border-radius: 999px; background: #ffffff03; }
.index > .first.hero > .left > .subtitle > .item > .text { font-size: 14px; font-weight: 600; }
.index > .first.hero > .left > .buttons { justify-content: center; gap: 14px; margin-top: 6px; }
.index > .first.hero > .left > .buttons > a { width: auto; min-width: 148px; padding: 13px 24px; text-decoration: none; gap: 16px; border-radius: 10px; }
.hero-caption { color: #717e96; font-size: 13px; }
.site-brand { font-size: 25px; letter-spacing: -.7px; }
.stats-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.stats-heading .hero-eyebrow { justify-content: flex-start; }
.stats-heading .main-title { margin: 10px 0 0; font-size: 40px; letter-spacing: -1px; }
.stats-live-label { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; color: #99a7ba; font-size: 13px; padding-bottom: 9px; }
.stats-live-label i { width: 6px; height: 6px; border-radius: 50%; background: #80d7b5; box-shadow: 0 0 10px #80d7b526; }
.stats-live-label.is-offline i { background: #7e8798; box-shadow: none; }
.index > .live-stats > .boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.index > .live-stats > .boxes > .box { width: auto; min-width: 0; padding: 26px; box-sizing: border-box; }
.index > .live-stats > .boxes > .box > .text > .description { font-size: 44px; line-height: 1.2; margin: 12px 0; font-variant-numeric: tabular-nums; }
.stat-note { color: #69788f; font-size: 12px; }
.stats-status { margin: -6px 0 0; color: #75829b; font-size: 12px; }
.site-footer { align-items: center; gap: 24px; padding-bottom: 24px; }
.footer-brand { display: block; color: #e7ecfa; text-decoration: none; font-size: 22px; font-weight: 900; }
.footer-caption { color: #75829b; font-size: 12px; }
.site-footer nav { display: flex; gap: 24px; }
.site-footer nav a { color: #9aa5ba; text-decoration: none; font-size: 14px; }
.site-footer nav a:hover { color: white; }
.index > .first > .left > .title { color: var(--text); letter-spacing: -1.6px; line-height: 1.17; }
.index > .first > .left > .subtitle > .item > .text { color: #aab5ca; }
.index > .first > .left > .buttons > .buy-btn {
    background: #647ff1;
    border-color: #8da2ff55;
    box-shadow: inset 0 1px 0 #ffffff20, 0 6px 24px #536fea1a;
}
.index > .first > .left > .buttons > .buy-btn:hover { background: #7891ff; }
.index > .first > .left > .buttons > .more-info-btn { color: #d1d9e9; border-color: #ffffff22; background: #ffffff03; }
.index > .first > .left > .buttons > .more-info-btn:hover { color: white; border-color: #ffffff50; background: #ffffff08; }
.index > .advantages > .main-title, .index > .join-us > .main-title { color: var(--text); letter-spacing: -.8px; }
.index > .advantages > .boxes > .box, .index > .join-us > .boxes > .box {
    background: linear-gradient(135deg, #ffffff05, transparent), var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px #00000020;
    border-radius: 12px;
}
.index > .advantages > .boxes > .box > .text > .description,
.index > .join-us > .boxes > .box > .text > .title { color: var(--muted); }
.index > .join-us > .boxes > .box > .text > .description { color: #d9e2ff; }
.footer { border-top-color: var(--line); color: var(--muted); }
.contacts__email a { color: #becbff; }
.contacts__item { filter: brightness(1.4); }

/* Account forms and local dialogs */
.box-with-header { background: var(--surface); box-shadow: 0 16px 50px #00000030; border: 1px solid var(--line); border-radius: 12px; }
.box-with-header > .body:after { background: var(--line); }
.auth { min-height: calc(100vh - 180px); }
.auth > .box-with-header .links a { color: #b3bfd5; }
.auth > .box-with-header .links a:hover { color: var(--accent); }
input, select { color: var(--text); background: #080c1480; border-color: #ffffff19; }
input::placeholder { color: #75829b; }
input:focus { border-color: #8ba4ff80; }
.simple-btn { background: #647ff1; color: white; font-weight: 700; }
.simple-btn:not(:disabled):hover { background: #7891ff; }
.local-captcha { background: #0e121c; color: #d5dcea; border-color: #ffffff19; box-shadow: none; }
.captcha-brand small { color: #939eb3; }
.local-notice { color: var(--text); background: var(--surface); border: 1px solid #ffffff1f; border-radius: 16px; }
.local-notice h2 { border-bottom-color: var(--line); }
.local-notice p { color: var(--muted); }
.local-notice button { background: #647ff1; }
.local-notice::backdrop { background: #03050ba6; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.auth > .box-with-header .error-text { color: #f5a5b0; }

/* Product cards and product details */
.market-neo { flex-wrap: wrap; padding-bottom: 40px; }
.market-neo__item { background: var(--surface); border-color: var(--line); box-shadow: 0 12px 32px #00000030; border-radius: 14px; }
.market-neo__item__name, .market-neo__item__price { color: var(--text); }
.market-neo__item__picture { border-radius: 8px; }
.market-neo__item__option--inactive { background: #1e2535; border-color: #ffffff17; color: #acb7cb; }
.market-neo__item__option--inactive:hover { background: #2a3348; }
.market-neo__item__option--active { background: #5266c6; border-color: #8b9cff66; }
.market-neo__item__btn--buy, .market-neo__product__purchase__btn { background: #647ff1; }
.market-neo__item__btn--buy:hover, .market-neo__product__purchase__btn:hover { background: #7891ff; }
.market-neo__item__btn--funpay { background: #647ff12e; color: #becbff; }
.market-neo__item__btn--funpay:hover { background: #647ff14d; }
.market-neo__item__btn--details { background: #ffffff06; color: #acbcff; }
.market-neo__item__btn--details:hover { background: #ffffff0f; }
.market-neo__product { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.market-neo__product__info { background: var(--surface); }
.market-neo__product__spiel { color: #aab5ca; }
.market-neo__product__spiel strong { color: #e1e7f4; }
.market-neo__product__imgs:before { background-blend-mode: normal; opacity: .3; }
.market-neo__product__purchase__option--inactive { color: #b4bfd4; background: #202738; }
.market-neo__product__purchase__option--inactive:hover { background: #2c3650; }
.market-neo__product__purchase__option--active { color: #d3dcff; background: #647ff12b; border-color: #8ba4ff; }
.market-neo__product__close { filter: invert(1); }
.market-neo__popup--active { background: #03050bbd; z-index: 100; }

@media (max-width: 760px) {
    body { padding-top: 118px; }
    header.site-header { width: calc(100% - 28px); top: max(14px, env(safe-area-inset-top)); height: 62px; }
    .glass-nav { padding: 0 18px; gap: 16px; }
    .site-brand { font-size: 22px; }
    .site-nav { gap: 2px; }
    .site-nav a, .site-account { font-size: 14px; padding: 0 12px; }
    .account-full { display: none; }
    .account-short { display: inline; }
    .site-account { gap: 6px; }
    .index { gap: 52px; }
    .index > .first[style] { flex-wrap: wrap !important; }
    .index > .first > .left[style] { width: 100% !important; }
    .index > .first > .left > .title { letter-spacing: -1px; font-size: clamp(30px, 7vw, 46px); }
    .index > .first > .left > .buttons { flex-wrap: wrap; gap: 12px; }
    .index > .advantages > .boxes > .box, .index > .join-us > .boxes > .box { width: 100%; box-sizing: border-box; }
    .auth { min-height: calc(100dvh - 158px); }
    .index > .first.hero { padding: 54px 0 60px; min-height: 500px; }
    .index > .first.hero > .left > .title { font-size: clamp(34px, 7vw, 54px); letter-spacing: -1.5px; }
    .hero-eyebrow { font-size: 10px; letter-spacing: 1.4px; }
    .stats-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
    .stats-heading .main-title { font-size: 32px; }
    .index > .live-stats > .boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .index > .live-stats > .boxes > .box { padding: 20px 16px; }
    .index > .live-stats > .boxes > .box > .text > .description { font-size: 36px; }
    .site-footer { flex-wrap: wrap; }
}
@media (max-width: 440px) {
    header.site-header { width: calc(100% - 24px); height: 58px; }
    .glass-nav { padding: 0 14px; gap: 8px; }
    .site-brand { font-size: 17px; letter-spacing: -.6px; }
    .site-nav a, .site-account { font-size: 12px; padding: 0 9px; min-height: 34px; }
    .site-account { gap: 0; padding-right: 4px; }
    .site-account svg { display: none; }
}

.market-neo__item__picture--main { background-image: url("/assets/img/products/killsquad-main-beta.png"); }

.market-neo__item__picture--beta { background-image: url("/assets/img/products/killsquad-main-beta.png"); }

.market-neo__item__picture--lite { background-image: url("/assets/img/products/killsquad-lite.svg"); }

.market-neo__item__picture--hwid-reset {
    background-image: url('/assets/img/products/killsquad-hwid-landscape.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 1 / 1;
}

.market-neo__item__picture--legacy {
    background: url('/assets/img/products/killsquad-legacy.png') center / contain no-repeat;
}
.market-neo__item__picture--main,
.market-neo__item__picture--beta,
.market-neo__item__picture--legacy {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Product gallery uses the real image proportions instead of a 16:9 crop. */
.market-neo__product {
    width: min(1200px, calc(100vw - 48px));
    height: min(700px, calc(100dvh - 64px));
    border-radius: 16px;
}
.market-neo__product__imgs {
    min-width: 0;
    box-sizing: border-box;
    padding: 24px;
    overflow: hidden;
    background: #0b0f18;
}
.market-neo__product__imgs::before { content: none; }
.market-neo__product__img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    background-image: none;
}
.market-neo__product__screenshot {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 9px;
    box-shadow: 0 10px 32px #00000040;
}
.gallery-single .market-neo__product__img-overlay { display: none; }
.market-neo__popup[data-product='hwidReset'] .market-neo__product__imgs {
    padding: 0;
}
.market-neo__popup[data-product='hwidReset'] .market-neo__product__screenshot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    box-shadow: none;
}
@media (min-width: 768px) {
    .market-neo__popup[data-product='hwidReset'] .market-neo__product {
        width: min(1090px, calc(100vw - 48px));
        height: min(700px, calc(100dvh - 64px), calc(100vw - 438px));
    }
}
.market-neo__product__info { flex-shrink: 0; box-sizing: border-box; }
.market-neo__product__title { flex-wrap: wrap; align-items: center; font-size: 26px; padding-right: 44px; }
.market-neo__product__advantages li {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ba4ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
}
@media (max-width: 767px) {
    .market-neo__product { width: calc(100vw - 24px); height: calc(100dvh - 32px); }
    .market-neo__product__imgs--mobile { height: clamp(190px, 62vw, 350px); margin: 16px 20px; padding: 12px; flex-shrink: 0; border-radius: 10px; }
    .market-neo__product__info { min-width: 0; }
    .market-neo__product__title { font-size: 24px; }
    .market-neo__popup[data-product='hwidReset'] .market-neo__product__imgs--mobile {
        height: auto;
        aspect-ratio: 1 / 1;
    }
}
