.hero-section { position: relative; overflow: hidden; padding: 86px 0 92px; background: radial-gradient(circle at 82% 8%, var(--primary-soft), transparent 27%), var(--bg); }.hero-orb { position: absolute; border-radius: 50%; filter: blur(10px); opacity: .55; }.hero-orb-one { width: 410px; height: 410px; top: -260px; right: 12%; background: var(--primary); }.hero-orb-two { width: 300px; height: 300px; bottom: -210px; left: -80px; background: var(--accent); }.eyebrow, .section-kicker { color: var(--primary); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; }.eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }.hero-section h1 { max-width: 680px; margin: 0; color: var(--text); font-size: clamp(44px, 5vw, 70px); font-weight: 850; letter-spacing: -.065em; line-height: 1.05; }.hero-section h1 em { color: var(--primary); font-style: normal; }.hero-copy { max-width: 540px; margin: 23px 0 0; color: var(--muted); font-size: 17px; line-height: 1.7; }.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }.trust-list { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 46px; }.trust-list div { display: grid; gap: 3px; }.trust-list strong { color: var(--text); font-size: 15px; }.trust-list span { color: var(--muted); font-size: 12px; }.hero-visual { position: relative; min-height: 390px; max-width: 450px; margin-left: auto; }.hero-grid { position: absolute; inset: 25px 0 0 28px; border: 1px solid var(--border); border-radius: 30px; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 28px 28px; opacity: .7; transform: rotate(5deg); }.game-card { position: absolute; box-shadow: var(--shadow-md); }.game-card-main { display: flex; flex-direction: column; justify-content: end; width: 285px; height: 340px; padding: 23px; overflow: hidden; border-radius: 28px; background: linear-gradient(145deg, #4625a5, var(--primary)); color: #fff; transform: rotate(-5deg); }.game-art { position: absolute; top: 40px; left: 32px; display: grid; width: 88px; height: 88px; place-items: center; border-radius: 25px; background: rgba(255,255,255,.16); font-size: 39px; font-weight: 900; }.game-card-main strong { font-size: 23px; }.game-card-main p, .game-card-main small { opacity: .82; font-size: 12px; }.game-card-small, .success-badge { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }.game-card-small { padding: 12px 15px; font-size: 11px; }.card-one { top: 20px; right: 3px; }.card-two { right: -5px; bottom: 40px; }.success-badge { right: 48px; bottom: 4px; padding: 10px 13px; color: var(--muted); font-size: 11px; }.success-badge span { color: var(--success); font-weight: 900; }.games-section { padding: 88px 0; background: var(--surface); }.games-section-all { background: var(--bg-subtle); }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }.section-heading h2 { margin: 7px 0 0; color: var(--text); font-size: clamp(28px, 3vw, 38px); font-weight: 850; letter-spacing: -.055em; }.text-link { color: var(--primary); font-size: 14px; font-weight: 800; }.game-item { display: block; }.game-cover { position: relative; display: grid; height: 184px; place-items: center; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }.game-item:hover .game-cover { transform: translateY(-4px); box-shadow: var(--shadow-md); }.theme-violet { background: linear-gradient(135deg, #38217c, #906cf4); }.theme-blue { background: linear-gradient(135deg, #102b65, #28a9e8); }.theme-orange { background: linear-gradient(135deg, #7b361c, #ff9e45); }.theme-red { background: linear-gradient(135deg, #6b1d3b, #ed6681); }.theme-green { background: linear-gradient(135deg, #095744, #2ec497); }.theme-dark { background: linear-gradient(135deg, #25233a, #636b89); }.game-icon { display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 24px; background: rgba(255,255,255,.16); color: #fff; font-size: 26px; font-weight: 900; }.game-badge { position: absolute; top: 12px; left: 12px; padding: 5px 8px; border-radius: 7px; background: var(--accent); color: #24300b; font-size: 9px; font-weight: 900; }.game-info { padding: 13px 2px 0; }.game-info h3, .compact-game strong { margin: 0; color: var(--text); font-size: 15px; font-weight: 800; }.game-info p, .compact-game small { margin: 4px 0 0; color: var(--muted); font-size: 12px; }.game-count { padding: 8px 11px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 750; }.compact-game { display: flex; align-items: center; gap: 11px; min-height: 76px; padding: 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .2s ease, border-color .2s ease; }.compact-game:hover { border-color: var(--primary); transform: translateY(-2px); }.compact-game-icon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 13px; color: #fff; font-size: 16px; font-weight: 900; }.compact-game strong, .compact-game small { display: block; }.compact-arrow { margin-left: auto; color: var(--primary); font-size: 18px; }.empty-games, .selection-empty { padding: 22px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); text-align: center; } @media (max-width: 991.98px) { .hero-visual { margin: 0 auto; } } @media (max-width: 575.98px) { .hero-section, .games-section { padding: 60px 0; }.hero-section h1 { font-size: 43px; }.hero-visual { min-height: 330px; transform: scale(.86); transform-origin: top center; margin-bottom: -45px; }.text-link { display: none; }.game-cover { height: 140px; }.section-heading { margin-bottom: 23px; } }

.hero-banner-carousel { width: min(100%, 480px); margin-left: auto; outline: none; }.hero-banner-carousel__viewport { position: relative; aspect-ratio: 16 / 7; min-height: 196px; overflow: hidden; border: 1px solid rgba(194, 164, 255, .26); border-radius: 24px; background: linear-gradient(145deg, #211044, #110923); box-shadow: 0 22px 44px rgba(5, 1, 17, .3), inset 0 1px 0 rgba(255, 255, 255, .09); }.hero-banner-carousel__slides,.hero-banner-carousel__slide,.hero-banner-carousel__link,.hero-banner-carousel__link img,.hero-banner-carousel__overlay { position: absolute; inset: 0; }.hero-banner-carousel__slide { opacity: 0; pointer-events: none; transform: scale(1.025); transition: opacity .48s ease, transform .7s ease; }.hero-banner-carousel__slide.is-active { opacity: 1; pointer-events: auto; transform: scale(1); z-index: 1; }.hero-banner-carousel__link { display: block; color: #fff; }.hero-banner-carousel__link img { display: block; width: 100%; height: 100%; object-fit: cover; }.hero-banner-carousel__overlay { background: linear-gradient(90deg, rgba(12, 7, 28, .8) 0%, rgba(18, 10, 41, .25) 65%, rgba(11, 7, 27, .55) 100%), linear-gradient(0deg, rgba(8, 5, 19, .7), transparent 60%); }.hero-banner-carousel__copy { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; display: grid; gap: 5px; max-width: 74%; text-shadow: 0 2px 12px rgba(3, 1, 12, .62); }.hero-banner-carousel__eyebrow { color: #d4bcff; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.hero-banner-carousel__copy strong { color: #fff; font-size: clamp(19px, 2vw, 27px); font-weight: 850; letter-spacing: -.04em; line-height: 1.08; }.hero-banner-carousel__cta { color: #f2ecff; font-size: 11px; font-weight: 750; }.hero-banner-carousel__control { position: absolute; z-index: 3; top: 50%; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%; background: rgba(14, 8, 31, .66); box-shadow: 0 5px 14px rgba(3, 1, 12, .28); color: #fff; cursor: pointer; opacity: 0; transform: translateY(-50%) scale(.9); transition: opacity .18s ease, background .18s ease, transform .18s ease; }.hero-banner-carousel__control--previous { left: 12px; }.hero-banner-carousel__control--next { right: 12px; }.hero-banner-carousel:hover .hero-banner-carousel__control,.hero-banner-carousel:focus-within .hero-banner-carousel__control { opacity: 1; transform: translateY(-50%) scale(1); }.hero-banner-carousel__control:hover { background: var(--primary); }.hero-banner-carousel__control:focus-visible,.hero-banner-carousel__dot:focus-visible,.hero-banner-carousel:focus-visible { outline: 3px solid rgba(185, 146, 255, .85); outline-offset: 3px; }.hero-banner-carousel__dots { position: absolute; z-index: 3; right: 20px; bottom: 17px; display: flex; align-items: center; gap: 6px; }.hero-banner-carousel__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .46); cursor: pointer; transition: width .22s ease, background .22s ease; }.hero-banner-carousel__dot.is-active { width: 22px; background: #fff; }.hero-banner-carousel__dot:hover { background: #d6bdff; }.hero-banner-carousel__link:focus-visible { outline: 3px solid #d8c0ff; outline-offset: -4px; }
@media (max-width: 991.98px) { .hero-banner-carousel { margin: 0 auto; } }
@media (max-width: 575.98px) { .hero-banner-carousel { width: 100%; }.hero-banner-carousel__viewport { min-height: 0; border-radius: 19px; }.hero-banner-carousel__copy { bottom: 17px; left: 18px; right: 18px; }.hero-banner-carousel__copy strong { font-size: 18px; }.hero-banner-carousel__dots { right: 16px; bottom: 14px; }.hero-banner-carousel__control { width: 33px; height: 33px; opacity: 1; }.hero-banner-carousel__control--previous { left: 9px; }.hero-banner-carousel__control--next { right: 9px; } }
@media (prefers-reduced-motion: reduce) { .hero-banner-carousel__slide,.hero-banner-carousel__control,.hero-banner-carousel__dot { transition: none; } }
.hero-banner-carousel { touch-action: pan-y; }

/* Homepage hero: keep the existing content, while giving promotional banners visual priority. */
.hero-layout {
    --bs-gutter-x: clamp(28px, 4vw, 56px);
}

.hero-copy-column,
.hero-banner-column {
    position: relative;
    z-index: 1;
}

.hero-banner-column {
    display: flex;
    align-items: center;
}

.hero-banner-carousel {
    width: 100%;
    max-width: none;
    margin-left: 0;
}

.hero-banner-carousel__viewport {
    min-height: 0;
    border-radius: 28px;
    box-shadow: 0 26px 56px rgba(4, 1, 16, .44), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.hero-banner-carousel__control {
    width: 44px;
    height: 44px;
    border-color: rgba(211, 190, 255, .42);
    background: rgba(12, 7, 28, .88);
    opacity: 1;
    transform: translateY(-50%);
}

.hero-banner-carousel__control--previous {
    left: 16px;
}

.hero-banner-carousel__control--next {
    right: 16px;
}

.hero-banner-carousel__control:hover {
    background: var(--primary);
    box-shadow: 0 10px 22px rgba(80, 42, 174, .42);
    transform: translateY(-50%) scale(1.06);
}

.hero-banner-carousel:hover .hero-banner-carousel__control:hover,
.hero-banner-carousel:focus-within .hero-banner-carousel__control:hover {
    transform: translateY(-50%) scale(1.06);
}

.hero-banner-carousel__dots {
    right: auto;
    bottom: 18px;
    left: 50%;
    gap: 8px;
    transform: translateX(-50%);
}

.hero-banner-carousel__dot {
    width: 8px;
    height: 8px;
    border: 1px solid rgba(255, 255, 255, .5);
    background: rgba(17, 10, 38, .68);
}

.hero-banner-carousel__dot.is-active {
    width: 26px;
    border-color: var(--primary-strong, #b992ff);
    background: var(--primary);
    box-shadow: 0 3px 10px rgba(130, 75, 239, .54);
}

@media (min-width: 992px) {
    .hero-section {
        padding: 68px 0 76px;
    }

    .hero-section h1 {
        max-width: 400px;
        font-size: clamp(38px, 3.65vw, 56px);
        letter-spacing: -.06em;
    }

    .hero-copy {
        max-width: 390px;
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.65;
    }

    .hero-actions {
        margin-top: 26px;
    }

    .trust-list {
        gap: 18px;
        margin-top: 34px;
    }
}

@media (max-width: 991.98px) {
    .hero-section {
        padding: 68px 0 72px;
    }

    .hero-banner-carousel {
        margin-top: 4px;
    }

    .hero-banner-carousel__viewport {
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    .hero-section h1 {
        font-size: clamp(37px, 11vw, 44px);
    }

    .hero-copy {
        margin-top: 17px;
        font-size: 15px;
    }

    .hero-actions {
        margin-top: 25px;
    }

    .trust-list {
        gap: 16px;
        margin-top: 32px;
    }

    .hero-banner-carousel__viewport {
        border-radius: 20px;
    }

    .hero-banner-carousel__control {
        width: 38px;
        height: 38px;
    }

    .hero-banner-carousel__control--previous {
        left: 10px;
    }

    .hero-banner-carousel__control--next {
        right: 10px;
    }

    .hero-banner-carousel__dots {
        bottom: 14px;
    }
}

/* Hero banner focus: wider composition with no visual layer over uploaded artwork. */
.hero-banner-carousel__overlay,
.hero-banner-carousel__copy,
.hero-banner-carousel__eyebrow,
.hero-banner-carousel__cta {
    display: none !important;
}

.hero-banner-carousel__viewport {
    background: #160d2a;
}

.hero-banner-carousel__slide {
    opacity: 1;
    visibility: hidden;
}

.hero-banner-carousel__slide.is-active {
    visibility: visible;
}

.hero-banner-carousel__link img {
    filter: none;
    mix-blend-mode: normal;
}

@media (min-width: 992px) {
    .homepage-content {
        width: min(calc(100% - 80px), 1270px);
        max-width: 1270px;
    }

    .hero-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 823px;
        gap: clamp(16px, 1.6vw, 28px);
        margin: 0;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }

    .hero-layout > .hero-copy-column,
    .hero-layout > .hero-banner-column {
        width: auto;
        max-width: none;
        flex: none;
        padding-inline: 0;
        margin-top: 0;
    }

    .hero-section {
        padding: 48px 0 54px;
    }

    .hero-section h1 {
        max-width: 330px;
        font-size: clamp(36px, 3vw, 52px);
    }

    .hero-copy {
        max-width: 310px;
        margin-top: 15px;
        font-size: 14px;
        line-height: 1.6;
    }

    .hero-actions {
        margin-top: 22px;
    }

    .trust-list {
        gap: 14px;
        margin-top: 28px;
    }

    .hero-banner-column {
        justify-content: flex-end;
    }
}

/* Homepage game search shares the global search module while filtering local cards. */
.section-heading__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.section-game-search {
    position: relative;
    width: 254px;
}

.section-game-search__input {
    display: block;
    width: 100%;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg) 58%, var(--surface));
    color: var(--text);
    font: inherit;
    font-size: 13px;
    outline: none;
    padding: 0 14px 0 42px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.section-game-search__input::placeholder {
    color: var(--muted);
    opacity: .82;
}

.section-game-search:focus-within .section-game-search__icon {
    stroke: var(--primary);
}

.section-game-search__input:hover {
    border-color: color-mix(in srgb, var(--primary) 54%, var(--border));
}

.section-game-search__input:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

@media (max-width: 767.98px) {
    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-heading__actions {
        width: 100%;
    }

    .section-game-search {
        flex: 1 1 auto;
        width: auto;
    }
}

@media (max-width: 575.98px) {
    .section-heading__actions {
        display: block;
    }

    .section-game-search {
        width: 100%;
    }
}