/* ==========================================================================
   Home Premium — homepage-only design system.
   Every rule here is scoped under .home-premium (or targets shared chrome
   via body:has(.home-premium), which only ever matches while this file is
   loaded — i.e. only on Views/Home/Index.cshtml). No other view references
   this file, so nothing here can leak onto another page.
   ========================================================================== */

.home-premium {
    --home-bg: #05080a;
    --home-surface: #0c1512;
    --home-surface-2: #101c18;
    --home-surface-hover: #142621;
    --home-border: rgba(255, 255, 255, .08);
    --home-border-hover: rgba(52, 232, 164, .35);
    --home-text: #f3f8f6;
    --home-muted: #93a5a0;
    --home-muted-2: #6c7c78;
    --home-accent: #34e8a4;
    --home-accent-2: #35d3e6;
    --home-accent-soft: rgba(52, 232, 164, .14);
    --home-lol: #0ac8b9;
    --home-lol-gold: #c8aa6e;
    --home-val: #ff4655;
    --home-radius-sm: 10px;
    --home-radius-md: 18px;
    --home-radius-lg: 28px;
    --home-shadow: 0 30px 90px -24px rgba(0, 0, 0, .65);
    --home-ease: cubic-bezier(.16, 1, .3, 1);

    position: relative;
    display: block;
    background: var(--home-bg);
    color: var(--home-text);
    font-family: "Segoe UI Variable Text", "Segoe UI", sans-serif;
    isolation: isolate;
}

.home-premium * { box-sizing: border-box; }
.home-premium h1, .home-premium h2, .home-premium h3 { font-family: Bahnschrift, "Segoe UI Variable Display", "Segoe UI", sans-serif; letter-spacing: -.03em; margin: 0; }
.home-premium p { margin: 0; }
.home-premium a { text-decoration: none; color: inherit; }
.home-premium ul { margin: 0; padding: 0; list-style: none; }

/* ---------- reveal-on-scroll ---------- */
.home-premium .hp-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--home-ease), transform .7s var(--home-ease); }
.home-premium .hp-reveal.hp-in { opacity: 1; transform: none; }
.home-premium .hp-stagger > * { transition-delay: calc(var(--hp-i, 0) * 70ms); }

/* ---------- section rhythm ---------- */
.home-premium .hp-section { position: relative; padding: 108px 0; }
.home-premium .hp-section-tight { padding: 64px 0; }
.home-premium .hp-container { width: min(1320px, calc(100% - 40px)); margin-inline: auto; position: relative; }
.home-premium .hp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.home-premium .hp-head p { max-width: 480px; color: var(--home-muted); margin-top: 10px; }
.home-premium .hp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; color: var(--home-accent); }
.home-premium .hp-eyebrow:before { content: ""; width: 16px; height: 1px; background: var(--home-accent); }
.home-premium .hp-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.06; margin-top: 12px; }
/* A section heading with no eyebrow above it does not need the eyebrow's gap. */
.home-premium .hp-head h2:first-child { margin-top: 0; }
.home-premium .hp-link { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--home-text); border-bottom: 1px solid var(--home-border-hover); padding-bottom: 2px; transition: gap .25s var(--home-ease), color .2s; white-space: nowrap; }
.home-premium .hp-link:hover { gap: 10px; color: var(--home-accent); }

/* ---------- buttons (scoped reskin of the shared .btn system) ---------- */
.home-premium .btn { border-radius: var(--home-radius-sm); font-weight: 700; letter-spacing: -.01em; }
.home-premium .btn-primary { background: linear-gradient(135deg, var(--home-accent), var(--home-accent-2)); color: #04120c; border: 1px solid transparent; box-shadow: 0 16px 40px -12px rgba(52, 232, 164, .45); transition: transform .25s var(--home-ease), box-shadow .25s var(--home-ease), filter .2s; }
.home-premium .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -14px rgba(52, 232, 164, .58); filter: brightness(1.04); }
.home-premium .btn-ghost { background: rgba(255, 255, 255, .03); border: 1px solid var(--home-border); color: var(--home-text); backdrop-filter: blur(6px); transition: border-color .2s, background .2s, transform .25s var(--home-ease); }
.home-premium .btn-ghost:hover { border-color: var(--home-border-hover); background: rgba(255, 255, 255, .06); transform: translateY(-2px); }
.home-premium .btn-wide { width: 100%; }

/* ==========================================================================
   Header — homepage-only chrome treatment (does not touch _Layout markup;
   pure CSS, only ever active while home-premium.css is loaded)
   ========================================================================== */
body:has(.home-premium) .app-header {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transition: background .35s var(--home-ease, ease), backdrop-filter .35s ease, border-color .35s ease;
}

/* The header must out-stack the mega-menu backdrop (z-index 55) on EVERY page that
   has the menu, not just the homepage. site.css gives it z-index 50, so without this
   the backdrop paints over the open panel and swallows the pointer — the menu then
   closes as soon as you move down into it. This file only loads on public pages. */
.app-header { position: sticky; z-index: 70; }
body:has(.home-premium).hp-scrolled .app-header {
    background: rgba(5, 8, 10, .78);
    backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
body:has(.home-premium) .app-header .brand-mark { background: linear-gradient(135deg, #34e8a4, #1c8f6c 62%, #35d3e6); box-shadow: 0 0 22px rgba(52, 232, 164, .38); }
body:has(.home-premium) .app-header .accent { color: #34e8a4; }
body:has(.home-premium) .app-header .main-nav a:after { background: linear-gradient(90deg, #34e8a4, #35d3e6); }
body:has(.home-premium) .app-header .header-actions .btn-primary { background: linear-gradient(135deg, #34e8a4, #35d3e6); color: #04120c; border-color: transparent; box-shadow: 0 0 22px rgba(52, 232, 164, .3); }
body:has(.home-premium) .app-header .header-actions .btn-secondary:hover { border-color: rgba(52, 232, 164, .35); }
body:has(.home-premium) .app-header .notification-button span { background: #35d3e6; }

/* ==========================================================================
   Hero
   ========================================================================== */
.home-premium .hp-hero { position: relative; min-height: min(58vh, 560px); display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--home-border); }
.home-premium .hp-hero-bg {
    position: absolute; inset: 0;
    /* The image itself is set inline from the admin-managed banner record. */
    background-position: 64% 2%;
    background-size: cover;
    background-repeat: no-repeat;
    /* Light pastel artwork: graded only lightly here — legibility comes from
       the scrim below rather than from crushing the image to near-black. */
    filter: saturate(1.02) brightness(.94) contrast(1.02);
    transform: scale(1.04);
    transition: transform 1.4s var(--home-ease);
    will-change: transform;
}
.home-premium .hp-hero-scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(100deg, #05080a 0%, #05080a 26%, rgba(5, 8, 10, .84) 40%, rgba(5, 8, 10, .38) 56%, rgba(5, 8, 10, .10) 74%, rgba(5, 8, 10, .32) 100%),
        linear-gradient(to bottom, rgba(5, 8, 10, .30) 0%, transparent 24%, transparent 60%, #05080a 100%);
}
.home-premium .hp-hero-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 200px 54px rgba(0, 0, 0, .34); pointer-events: none; }
.home-premium .hp-glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .32; pointer-events: none; transition: transform .6s ease-out; }
.home-premium .hp-glow-a { width: 560px; height: 560px; left: -140px; top: -120px; background: radial-gradient(circle, var(--home-accent), transparent 70%); animation: hp-drift 16s ease-in-out infinite; }
.home-premium .hp-glow-b { width: 480px; height: 480px; right: -100px; bottom: -160px; opacity: .22; background: radial-gradient(circle, var(--home-accent-2), transparent 70%); animation: hp-drift 19s ease-in-out infinite reverse; }
@keyframes hp-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -24px); } }

.home-premium .hp-hero-grid { position: relative; z-index: 2; width: 100%; }
.home-premium .hp-hero-copy { max-width: 760px; padding: 34px 0 26px 48px; }
.home-premium .hp-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border-radius: 100px; border: 1px solid var(--home-border); background: rgba(255, 255, 255, .04); backdrop-filter: blur(8px); font-size: .74rem; font-weight: 650; color: #d7e7e2; }
.home-premium .hp-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--home-accent); box-shadow: 0 0 12px var(--home-accent); }
.home-premium .hp-hero h1 { font-size: clamp(1.9rem, 2.9vw, 2.9rem); line-height: 1.08; letter-spacing: -.04em; margin: 12px 0 12px; }
.home-premium .hp-hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--home-accent), var(--home-accent-2) 70%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.home-premium .hp-hero-copy > p { font-size: 1.08rem; line-height: 1.7; color: #c3d1cc; max-width: 540px; }
.home-premium .hp-cta-row { display: flex; gap: 14px; margin: 22px 0 28px; flex-wrap: wrap; }
.home-premium .hp-cta-row .btn { min-height: 52px; padding: 0 26px; font-size: .95rem; }
.home-premium .hp-cta-row .btn-primary { display: inline-flex; align-items: center; gap: 10px; }
.home-premium .hp-cta-row .btn-primary svg { width: 16px; height: 16px; transition: transform .25s var(--home-ease); }
.home-premium .hp-cta-row .btn-primary:hover svg { transform: translateX(4px); }

.home-premium .hp-trust-row { display: flex; gap: 34px; flex-wrap: wrap; }
.home-premium .hp-trust-row > div { display: flex; flex-direction: column; gap: 3px; }
.home-premium .hp-trust-row strong { font-size: 1.3rem; letter-spacing: -.03em; }
.home-premium .hp-trust-row small { color: var(--home-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }

.home-premium .hp-scroll-cue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--home-muted); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.home-premium .hp-scroll-cue i { width: 1px; height: 30px; background: linear-gradient(var(--home-accent), transparent); animation: hp-cue 2.2s ease-in-out infinite; }
@keyframes hp-cue { 0% { transform: scaleY(.3); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ==========================================================================
   Game discovery
   ========================================================================== */
/* The game cards take the room; the live-activity rail is a fixed narrow column beside them, so
   adding a game widens nothing and the cards stay on one row. */
.home-premium .hp-game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 20px; align-items: stretch; }
/* Every game sits side by side rather than wrapping the last one onto a row of its own; the count
   comes from the catalog so the row stays full as games are added. */
.home-premium .hp-game-grid { display: grid; grid-template-columns: repeat(var(--hp-game-cols, 3), minmax(0, 1fr)); gap: 12px; align-content: start; }

.home-premium .hp-game-card {
    position: relative; min-height: 372px; border-radius: var(--home-radius-lg); overflow: hidden;
    border: 1px solid var(--home-border); background: var(--home-surface);
    display: flex; flex-direction: column; justify-content: flex-end;
    transition: transform .4s var(--home-ease), border-color .3s, box-shadow .4s var(--home-ease);
}
.home-premium .hp-game-card:hover { transform: translateY(-6px); box-shadow: var(--home-shadow); }
.home-premium .hp-game-art { position: absolute; inset: 0; overflow: hidden; }
/* Scrim over the key art. Heavier than the old one because the wordmark, service tags and CTA now
   sit on top of a full photograph rather than a flat gradient panel. */
.home-premium .hp-game-art:after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(4, 7, 6, .34) 0%, rgba(4, 7, 6, .05) 26%, rgba(4, 7, 6, .62) 50%, var(--home-surface) 78%),
        linear-gradient(90deg, rgba(4, 7, 6, .34), transparent 46%);
}

.home-premium .hp-game-card-lol { border-color: rgba(10, 200, 185, .22); }
.home-premium .hp-game-card-lol .hp-game-art { background: radial-gradient(circle at 78% 10%, rgba(10, 200, 185, .32), transparent 46%), radial-gradient(circle at 15% 90%, rgba(200, 170, 110, .18), transparent 50%), linear-gradient(150deg, #0d1a17, #0a1210); }
.home-premium .hp-game-card-lol:hover { border-color: rgba(10, 200, 185, .5); }
/* The art is a single full-bleed key-art image per game, the way a game tile is normally sold:
   the character fills the card and the scrim above carries the wordmark, tags and CTA. It replaced
   a stack of small floating tiles, which read as a collage rather than a product card. One rule
   serves every game because each hero is composed to the same 2:3 frame. */
.home-premium .hp-game-hero {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 8%;
    transition: transform .7s var(--home-ease);
    will-change: transform;
}
.home-premium .hp-game-card:hover .hp-game-hero { transform: scale(1.055); }

.home-premium .hp-game-card-cs2 { border-color: rgba(120, 158, 214, .22); }
.home-premium .hp-game-card-cs2 .hp-game-art { background: radial-gradient(circle at 80% 8%, rgba(96, 132, 200, .3), transparent 48%), radial-gradient(circle at 12% 92%, rgba(214, 178, 94, .16), transparent 52%), linear-gradient(150deg, #101725, #0a0d14); }
.home-premium .hp-game-card-cs2:hover { border-color: rgba(120, 158, 214, .5); }

.home-premium .hp-game-card-tft { border-color: rgba(176, 146, 224, .22); }
.home-premium .hp-game-card-tft .hp-game-art { background: radial-gradient(circle at 79% 9%, rgba(150, 116, 208, .3), transparent 47%), radial-gradient(circle at 14% 90%, rgba(206, 168, 96, .16), transparent 52%), linear-gradient(150deg, #14101f, #0a0910); }
.home-premium .hp-game-card-tft:hover { border-color: rgba(176, 146, 224, .5); }

/* A game shipped without bespoke card art still gets a finished panel, never another game's ranks. */
.home-premium .hp-game-card-generic { border-color: var(--home-border); }
.home-premium .hp-game-card-generic .hp-game-art { background: radial-gradient(circle at 78% 10%, rgba(255, 255, 255, .07), transparent 48%), linear-gradient(150deg, #12161c, #0a0d11); }

.home-premium .hp-game-card-valorant { border-color: rgba(255, 70, 85, .22); }
.home-premium .hp-game-card-valorant .hp-game-art { background: radial-gradient(circle at 80% 8%, rgba(255, 70, 85, .3), transparent 46%), linear-gradient(150deg, #1a0e10, #0a0d10); }
.home-premium .hp-game-card-valorant:hover { border-color: rgba(255, 70, 85, .5); }

.home-premium .hp-game-code { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; font-weight: 800; font-size: .85rem; margin-bottom: 14px; }
.home-premium .hp-game-card-lol .hp-game-code { background: rgba(10, 200, 185, .16); color: var(--home-lol); border: 1px solid rgba(10, 200, 185, .3); }
.home-premium .hp-game-card-valorant .hp-game-code { background: rgba(255, 70, 85, .16); color: var(--home-val); border: 1px solid rgba(255, 70, 85, .3); }

.home-premium .hp-game-body { position: relative; z-index: 1; padding: 26px 20px 18px; }
.home-premium .hp-game-body small { text-transform: uppercase; letter-spacing: .14em; font-size: .62rem; color: var(--home-muted); }
.home-premium .hp-game-body h3 { font-size: 1.7rem; margin: 6px 0 14px; }
/* The heading is the official wordmark. The two logos have very different aspect ratios
   (League ~2.6:1, VALORANT ~7:1), so each is capped on height rather than width and tuned
   per game — matching widths would leave one mark tiny and the other overbearing. */
.home-premium .hp-game-title { display: flex; align-items: center; min-height: 42px; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--home-border); }
.home-premium .hp-game-logo { display: block; width: auto; max-width: 100%; height: auto; }
.home-premium .hp-game-card-lol .hp-game-logo { max-height: 38px; filter: drop-shadow(0 2px 10px rgba(200, 170, 110, .28)); }
.home-premium .hp-game-card-valorant .hp-game-logo { max-height: 22px; filter: drop-shadow(0 2px 10px rgba(255, 70, 85, .3)); }
/* The Counter-Strike wordmark is one line at ~4.8:1 — between the other two optically. */
.home-premium .hp-game-card-cs2 .hp-game-logo { max-height: 27px; filter: drop-shadow(0 2px 10px rgba(120, 158, 214, .32)); }
.home-premium .hp-game-card-tft .hp-game-logo { max-height: 34px; filter: drop-shadow(0 2px 10px rgba(176, 146, 224, .3)); }
.home-premium .hp-game-card-generic .hp-game-logo { max-height: 34px; }
.home-premium .hp-game-services { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.home-premium .hp-game-services span { font-size: .64rem; font-weight: 650; padding: 5px 9px; border-radius: 100px; background: rgba(255, 255, 255, .05); border: 1px solid var(--home-border); color: #d3ded9; }
.home-premium .hp-game-cta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-top: 1px solid var(--home-border); font-size: .74rem; font-weight: 750; gap: 10px; }
.home-premium .hp-game-cta svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .3s var(--home-ease); }
.home-premium .hp-game-card:hover .hp-game-cta svg { transform: translateX(5px); }
/* Full-card hit area. Sits above the art and body (which are z-index 1) but paints nothing, so the
   card looks identical — it only makes the whole surface clickable. */
.home-premium .hp-card-overlay { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.home-premium .hp-game-card { cursor: pointer; }

/* activity panel */
.home-premium .hp-activity { border-radius: var(--home-radius-lg); border: 1px solid var(--home-border); background: linear-gradient(165deg, rgba(16, 28, 24, .9), rgba(8, 13, 11, .96)); padding: 22px 18px; display: flex; flex-direction: column; }
.home-premium .hp-activity-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.home-premium .hp-live-dot { display: inline-flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--home-accent); }
.home-premium .hp-live-dot:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--home-accent); box-shadow: 0 0 10px var(--home-accent); animation: hp-pulse 1.8s ease-in-out infinite; }
@keyframes hp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.home-premium .hp-activity-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--home-border); }
.home-premium .hp-activity-row:first-of-type { border-top: 0; }
.home-premium .hp-activity-rank { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: .8rem; background: var(--home-accent-soft); color: var(--home-accent); flex-shrink: 0; }
.home-premium .hp-activity-row div { flex: 1; min-width: 0; }
.home-premium .hp-activity-row small { display: block; color: var(--home-muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-premium .hp-activity-row strong { display: block; font-size: .78rem; margin: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-premium .hp-activity-row em { display: block; font-style: normal; color: var(--home-muted-2); font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-premium .hp-activity-status { flex-shrink: 0; font-size: .58rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--home-accent); }
.home-premium .hp-activity-empty { color: var(--home-muted); font-size: .82rem; padding: 30px 0; text-align: center; }

/* ==========================================================================
   Calculator reskin (structure/markup untouched — visual frame only)
   ========================================================================== */
.home-premium .hp-calculator-frame { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
.home-premium .hp-calculator-intro { display: none; }
.home-premium .hp-calculator-intro ul { display: grid; gap: 12px; margin-top: 22px; }
.home-premium .hp-calculator-intro li { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: #d3ded9; }

/* ==========================================================================
   How it works
   ========================================================================== */
.home-premium .hp-process { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.home-premium .hp-process:before { content: ""; position: absolute; top: 26px; left: 6%; right: 6%; height: 1px; background: linear-gradient(90deg, transparent, var(--home-border-hover) 20%, var(--home-border-hover) 80%, transparent); z-index: 0; }
.home-premium .hp-process article { position: relative; z-index: 1; padding: 24px 4px 0; }
.home-premium .hp-process span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; margin-bottom: 20px; background: var(--home-surface); border: 1px solid var(--home-border); font-weight: 800; font-size: .9rem; color: var(--home-accent); transition: border-color .3s, box-shadow .3s; }
.home-premium .hp-process article:hover span { border-color: var(--home-accent); box-shadow: 0 0 24px var(--home-accent-soft); }
.home-premium .hp-process h3 { font-size: 1.02rem; margin-bottom: 8px; }
.home-premium .hp-process p { color: var(--home-muted); font-size: .84rem; line-height: 1.6; }

/* ==========================================================================
   Why EloBoostEU
   ========================================================================== */
.home-premium .hp-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.home-premium .hp-why-card { padding: 26px 22px; border-radius: var(--home-radius-md); border: 1px solid var(--home-border); background: var(--home-surface); transition: transform .3s var(--home-ease), border-color .3s; }
.home-premium .hp-why-card:hover { transform: translateY(-4px); border-color: var(--home-border-hover); }
.home-premium .hp-why-card span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--home-accent-soft); color: var(--home-accent); font-size: 1.1rem; margin-bottom: 18px; }
.home-premium .hp-why-card h3 { font-size: 1.02rem; margin-bottom: 8px; }
.home-premium .hp-why-card p { color: var(--home-muted); font-size: .84rem; line-height: 1.6; }

/* ==========================================================================
   Social proof
   ========================================================================== */
.home-premium .hp-social-grid { display: grid; grid-template-columns: 1.15fr 1fr .9fr; gap: 18px; align-items: stretch; }
.home-premium .hp-panel { border-radius: var(--home-radius-lg); border: 1px solid var(--home-border); background: linear-gradient(165deg, rgba(16, 28, 24, .9), rgba(8, 13, 11, .96)); padding: 26px 24px; display: flex; flex-direction: column; }
.home-premium .hp-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.home-premium .hp-booster-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-premium .hp-booster-card { padding: 16px; border-radius: var(--home-radius-sm); background: rgba(255, 255, 255, .03); border: 1px solid var(--home-border); }
.home-premium .hp-booster-avatar { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--home-accent-soft); color: var(--home-accent); font-weight: 800; font-size: .78rem; margin-bottom: 10px; overflow: hidden; }
.home-premium .hp-booster-avatar img { width: 100%; height: 100%; object-fit: cover; }
.home-premium .hp-booster-card strong { display: block; font-size: .84rem; }
.home-premium .hp-booster-card small { display: block; color: var(--home-muted); font-size: .68rem; margin: 3px 0 10px; }
.home-premium .hp-booster-stats { display: flex; gap: 12px; font-size: .68rem; color: var(--home-muted); }
.home-premium .hp-booster-stats b { color: var(--home-text); }
.home-premium .hp-review-card { padding: 16px 0; border-top: 1px solid var(--home-border); }
.home-premium .hp-review-card:first-of-type { border-top: 0; padding-top: 0; }
.home-premium .hp-review-stars { color: #f2c464; letter-spacing: 2px; font-size: .78rem; }
.home-premium .hp-review-card p { margin: 8px 0; font-size: .84rem; color: #d6e2dd; line-height: 1.6; }
.home-premium .hp-review-card small { color: var(--home-muted); font-size: .68rem; }
.home-premium .hp-workspace-list { display: grid; gap: 14px; margin-top: 6px; }
.home-premium .hp-workspace-list li { display: flex; align-items: center; gap: 12px; font-size: .82rem; color: #d3ded9; }
.home-premium .hp-workspace-list svg { width: 17px; height: 17px; color: var(--home-accent); flex-shrink: 0; }
.home-premium .hp-workspace-note { margin-top: auto; padding-top: 18px; color: var(--home-muted); font-size: .74rem; line-height: 1.6; }

/* ==========================================================================
   Security
   ========================================================================== */
.home-premium .hp-security-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: center; }
.home-premium .hp-security-points { display: grid; gap: 18px; }
.home-premium .hp-security-points article { display: flex; gap: 16px; padding: 18px; border-radius: var(--home-radius-md); border: 1px solid var(--home-border); background: var(--home-surface); }
.home-premium .hp-security-points span { font-weight: 800; color: var(--home-accent); font-size: .78rem; flex-shrink: 0; }
.home-premium .hp-security-points h3 { font-size: .92rem; margin-bottom: 4px; }
.home-premium .hp-security-points p { color: var(--home-muted); font-size: .8rem; }

/* ==========================================================================
   FAQ + final CTA
   ========================================================================== */
.home-premium .hp-faq-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.home-premium .hp-faq-item { border: 1px solid var(--home-border); border-radius: var(--home-radius-sm); background: var(--home-surface); margin-bottom: 10px; }
.home-premium .hp-faq-item summary { padding: 17px 20px; cursor: pointer; font-weight: 650; font-size: .88rem; list-style: none; display: flex; justify-content: space-between; }
.home-premium .hp-faq-item summary:after { content: "+"; color: var(--home-accent); }
.home-premium .hp-faq-item[open] summary:after { content: "\2212"; }
.home-premium .hp-faq-item p { margin: 0; padding: 0 20px 18px; color: var(--home-muted); font-size: .85rem; }

.home-premium .hp-final-cta { position: relative; padding: 54px 48px; border-radius: var(--home-radius-lg); overflow: hidden; border: 1px solid var(--home-border-hover); background: linear-gradient(150deg, rgba(20, 34, 29, .96), rgba(6, 10, 9, .99)); }
.home-premium .hp-final-cta:before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -140px; border-radius: 50%; background: radial-gradient(circle, var(--home-accent), transparent 70%); opacity: .25; filter: blur(60px); }
.home-premium .hp-final-cta h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 14px 0 10px; position: relative; }
.home-premium .hp-final-cta p { color: var(--home-muted); max-width: 480px; margin-bottom: 26px; position: relative; }
.home-premium .hp-final-cta .hp-cta-row { margin: 0; position: relative; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
    .home-premium .hp-game-layout { grid-template-columns: minmax(0, 1fr); }
    .home-premium .hp-social-grid { grid-template-columns: 1fr 1fr; }
    .home-premium .hp-social-grid > *:last-child { grid-column: 1 / -1; }
    .home-premium .hp-calculator-frame { grid-template-columns: minmax(0, 1fr); }
    .home-premium .hp-security-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .home-premium .hp-section { padding: 76px 0; }
    .home-premium .hp-hero { min-height: auto; }
    .home-premium .hp-hero-copy { padding: 108px 20px 44px; }
    /* No room for it once the hero collapses — it lands on the trust row. */
    .home-premium .hp-scroll-cue { display: none; }
    /* Narrow viewports put the copy straight over the artwork, so the diagonal
       desktop scrim no longer separates them — swap in a vertical one and grade
       the image down far enough for the headline and body copy to hold up. */
    .home-premium .hp-hero-bg { filter: saturate(.98) brightness(.6) contrast(1.04); }
    .home-premium .hp-hero-scrim {
        background: linear-gradient(to bottom, rgba(5, 8, 10, .78) 0%, rgba(5, 8, 10, .6) 34%, rgba(5, 8, 10, .74) 76%, #05080a 100%);
    }
    .home-premium .hp-game-grid, .home-premium .hp-service-grid, .home-premium .hp-why-grid, .home-premium .hp-process { grid-template-columns: 1fr 1fr; }
    .home-premium .hp-faq-grid { grid-template-columns: 1fr; }
    .home-premium .hp-process:before { display: none; }
    .home-premium .hp-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
    .home-premium .hp-hero-bg { background-position: 70% top; }
    .home-premium .hp-hero-copy { padding: 96px 20px 36px; }
    .home-premium .hp-hero h1 { font-size: 2.1rem; }
    .home-premium .hp-cta-row .btn, .home-premium .hp-cta-row { width: 100%; }
    .home-premium .hp-cta-row { flex-direction: column; }
    .home-premium .hp-trust-row { gap: 22px; }
    .home-premium .hp-game-grid, .home-premium .hp-service-grid, .home-premium .hp-why-grid, .home-premium .hp-process, .home-premium .hp-social-grid, .home-premium .hp-booster-grid { grid-template-columns: 1fr; }
    .home-premium .hp-social-grid > *:last-child { grid-column: auto; }
    .home-premium .hp-final-cta { padding: 40px 26px; }

}

/* ==========================================================================
   Premium Mega Navigation
   (targets shared header chrome outside .home-premium — safe because this
   file only ever loads on the homepage, same reasoning as the header
   overrides above)
   ========================================================================== */

/* ---- Menu Shell ---- */
.nav-mega-item { position: relative; display: flex; align-items: center; }
.nav-mega-trigger {
    display: flex; align-items: center; gap: 6px;
    background: none; border: 0; cursor: pointer;
    font: inherit; font-size: .79rem; font-weight: 650; color: #b6b7c9;
    padding: 8px 0; position: relative;
}
.nav-mega-trigger:after { content: ""; position: absolute; left: 0; right: 100%; bottom: -9px; height: 2px; background: linear-gradient(90deg, #34e8a4, #35d3e6); transition: right .2s var(--home-ease); }
.nav-mega-trigger:hover, .nav-mega-trigger:focus-visible { color: #f3f8f6; }
.nav-mega-trigger:hover:after, .nav-mega-item.is-open .nav-mega-trigger:after { right: 0; }
.nav-mega-item.is-open .nav-mega-trigger { color: #f3f8f6; }
.nav-chevron { width: 12px; height: 12px; transition: transform .25s var(--home-ease); }
.nav-mega-item.is-open .nav-chevron { transform: rotate(180deg); }

/* Anchored to the trigger's left edge (not centred on it): a centred 1080px panel
   pushed the Games menu ~60px off the left edge of the viewport. The small
   negative offset keeps it visually tied to the nav item, and the width clamp
   keeps the right edge inside the viewport down to 1366px. */
.nav-mega-panel {
    position: absolute; top: 100%; left: 0;
    --hp-mega-offset: clamp(-56px, -2.5vw, -24px);
    padding-top: 14px;
    width: clamp(680px, 58vw, 1020px); max-width: calc(100vw - 48px);
    opacity: 0; pointer-events: none;
    transform: translateX(var(--hp-mega-offset)) translateY(-8px) scale(.985);
    transition: opacity .22s var(--home-ease), transform .22s var(--home-ease);
    z-index: 60;
}
.nav-mega-panel-services { width: clamp(540px, 40vw, 660px); }
.nav-mega-item.is-open .nav-mega-panel { opacity: 1; pointer-events: auto; transform: translateX(var(--hp-mega-offset)) translateY(0) scale(1); }
.nav-mega-inner {
    padding: 26px;
    background: linear-gradient(170deg, rgba(16, 28, 24, .97), rgba(6, 10, 9, .99));
    border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px;
    box-shadow: 0 40px 100px -24px rgba(0, 0, 0, .7);
    backdrop-filter: blur(20px) saturate(1.3);
}
.nav-mega-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.nav-mega-head > span { font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; color: #93a5a0; }
.nav-mega-viewall { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: #34e8a4; }
.nav-mega-viewall svg { width: 14px; height: 14px; transition: transform .25s var(--home-ease); }
.nav-mega-viewall:hover svg { transform: translateX(3px); }

.nav-mega-backdrop {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(3, 5, 5, .28);
    opacity: 0; pointer-events: none; transition: opacity .25s var(--home-ease);
}
.nav-mega-backdrop.is-visible { opacity: 1; pointer-events: auto; }

/* ---- Game Cards ---- */
/* 170px rather than 230px: at 230 the panel fitted only three tiles, so a fourth game dropped onto
   a row of its own. auto-fit still stretches the tiles when the catalog holds fewer. */
.nav-mega-games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.nav-game-card {
    position: relative; display: flex; align-items: center; gap: 16px;
    min-height: 96px; padding: 16px 18px; border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    transition: transform .3s var(--home-ease), border-color .3s, box-shadow .3s var(--home-ease);
}
.nav-game-card:hover, .nav-game-card:focus-visible { transform: translateY(-3px); box-shadow: 0 20px 46px -18px rgba(0, 0, 0, .6); }
/* One neutral surface for every game. The wordmark carries the identity; a tinted panel behind it
   only muddied the mark and had to be extended by hand for each new game. */
.nav-game-card { background: rgba(255, 255, 255, .025); }
.nav-game-card:hover, .nav-game-card:focus-visible { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .18); }
.nav-game-body { flex: 1; min-width: 0; display: flex; align-items: center; }
/* Same reasoning as the homepage cards: the wordmark is the identity, so it stands alone.
   Capped per game because the two marks have very different aspect ratios. */
.nav-game-logo { display: block; width: auto; height: auto; max-width: 100%; }
.nav-game-card-lol .nav-game-logo { max-height: 34px; }
.nav-game-card-valorant .nav-game-logo { max-height: 19px; }
.nav-game-card-cs2 .nav-game-logo, .nav-game-card-generic .nav-game-logo { max-height: 24px; }
/* The TFT lockup is a two-line mark at ~3.1:1 — a touch shorter than League's at the same width. */
.nav-game-card-tft .nav-game-logo { max-height: 31px; }
.nav-game-arrow { width: 16px; height: 16px; flex-shrink: 0; color: #93a5a0; transition: transform .25s var(--home-ease), color .25s; }
.nav-game-card:hover .nav-game-arrow { transform: translateX(4px); color: #f3f8f6; }

/* ---- Services Grid ---- */
.nav-mega-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
/* min-height keeps the divider on the same line across columns: the League wordmark is two
   lines tall and VALORANT is one, so without it the two groups sit at different heights. */
.nav-service-group-head { display: flex; align-items: center; gap: 10px; min-height: 46px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.nav-service-icon { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; }
.nav-service-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.nav-service-group-lol .nav-service-icon { color: #0ac8b9; }
.nav-service-group-valorant .nav-service-icon { color: #ff4655; }
.nav-service-group-cs2 .nav-service-icon { color: #789ed6; }
.nav-service-group-generic .nav-service-icon { color: #93a5a0; }
.nav-service-group-head strong { font-size: .84rem; color: #f3f8f6; }
.nav-service-list { display: grid; gap: 2px; }
.nav-service-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: .82rem; color: #d3ded9; transition: background .18s, color .18s; }
.nav-service-list a:hover, .nav-service-list a:focus-visible { background: rgba(52, 232, 164, .1); color: #f3f8f6; }
.nav-service-list a svg { width: 13px; height: 13px; opacity: 0; transform: translateX(-3px); transition: opacity .18s, transform .18s; color: #34e8a4; flex-shrink: 0; }
.nav-service-list a:hover svg, .nav-service-list a:focus-visible svg { opacity: 1; transform: translateX(0); }

/* ---- Responsive ---- */
@media (max-width: 1180px) {
    .nav-mega-panel { width: min(640px, calc(100vw - 40px)); }
    .nav-mega-panel-services { width: min(640px, calc(100vw - 40px)); }
    .nav-mega-games-grid, .nav-mega-services-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .nav-mega-item { flex-direction: column; align-items: stretch; width: 100%; }
    .nav-mega-trigger { width: 100%; justify-content: space-between; padding: 15px 4px; font-size: .85rem; }
    .nav-mega-trigger:after { display: none; }
    .nav-mega-panel {
        position: static; width: 100%; max-width: none; opacity: 1; pointer-events: auto; transform: none; padding-top: 0;
        display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--home-ease);
    }
    .nav-mega-item.is-open .nav-mega-panel { grid-template-rows: 1fr; }
    .nav-mega-inner {
        min-height: 0; overflow: hidden; padding: 0 4px 14px;
        background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
    }
    .nav-mega-games-grid, .nav-mega-services-grid { grid-template-columns: 1fr; gap: 8px; }
    .nav-game-card { min-height: 0; padding: 12px; }
    .nav-game-art { display: none; }
    .nav-mega-backdrop { display: none; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .home-premium .hp-reveal { opacity: 1; transform: none; transition: none; }
    .home-premium .hp-glow-a, .home-premium .hp-glow-b, .home-premium .hp-live-dot:before, .home-premium .hp-scroll-cue i { animation: none; }
    .home-premium .hp-hero-bg { transition: none; }
    .home-premium * { scroll-behavior: auto; }
    .nav-mega-panel, .nav-mega-trigger:after, .nav-chevron, .nav-mega-backdrop { transition: none; }
}

/* The live-activity panel became a full-width band under the card grid when the grid grew to the
   whole catalog. Its rows lay out horizontally so the panel stays shallow instead of becoming a
   tall column of four. */
.home-premium .hp-activity-wide { margin-top: 22px; }
.home-premium .hp-activity-wide .hp-activity-row { border-top: 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); }
@media (min-width: 780px) {
    .home-premium .hp-activity-wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; align-items: start; }
    .home-premium .hp-activity-wide .hp-activity-head { grid-column: 1 / -1; margin-bottom: 4px; }
    .home-premium .hp-activity-wide .hp-activity-empty { grid-column: 1 / -1; }
}
@media (min-width: 1120px) {
    .home-premium .hp-activity-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}