*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --purple: #6d28d9;
    --purple-light: #8b5cf6;
    --purple-dark: #2e1065;
    --purple-glow: rgba(109, 40, 217, .35);

    --bg: #040306;
    --panel: #0b0910;
    --white: #ffffff;
    --muted: #85808f;

    --heading: "Rajdhani", sans-serif;
    --body: "Inter", sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(109,40,217,.09),
            transparent 36%
        ),
        #040306;

    color: var(--white);
    font-family: var(--body);

    overflow-x: hidden;
}

body.modal-open {
    overflow: hidden;
}

.container {
    width: min(1140px, calc(100% - 40px));
    margin: 0 auto;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input {
    font: inherit;
}


/* =========================================
   RAIN
========================================= */

#stormCanvas {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: -3;
    pointer-events: none;
}

.storm-overlay {
    position: fixed;
    inset: 0;

    z-index: -2;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(109,40,217,.075),
            transparent 35%
        ),
        linear-gradient(
            rgba(0,0,0,.08),
            rgba(0,0,0,.76)
        );
}


/* =========================================
   NAV
========================================= */

.site-header {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: 68px;

    z-index: 1000;

    background:
        rgba(4,3,6,.78);

    backdrop-filter:
        blur(16px);

    border-bottom:
        1px solid
        rgba(255,255,255,.05);

    transition: .25s;
}

.site-header.scrolled {
    background:
        rgba(4,3,6,.94);

    box-shadow:
        0 15px 55px
        rgba(0,0,0,.5);

    border-bottom-color:
        rgba(109,40,217,.18);
}

.nav {
    height: 100%;

    display: flex;
    align-items: center;
}



.logo span {
    color: var(--purple-light);
}

.nav-links {
    display: flex;
    align-items: center;

    gap: 4px;

    margin-left: auto;
}

.nav-link {
    padding: 8px 13px;

    color: #807b87;

    border-radius: 7px;

    font-family: var(--heading);
    font-size: 13px;
    font-weight: 600;

    transition: .2s;
}

.nav-link:hover {
    color: white;

    background:
        rgba(109,40,217,.09);
}

.nav-shop {
    margin-left: 13px;

    padding: 9px 16px;

    border-radius: 7px;

    background: var(--purple);

    color: white;

    font-family: var(--heading);
    font-size: 12px;
    font-weight: 700;

    transition: .2s;

    box-shadow:
        0 0 20px
        rgba(109,40,217,.15);
}

.nav-shop:hover {
    transform: translateY(-2px);

    background: var(--purple-light);

    box-shadow:
        0 8px 30px
        rgba(109,40,217,.28);
}

.hamburger {
    display: none;

    margin-left: auto;

    width: 40px;
    height: 40px;

    border: 0;
    background: transparent;
}

.hamburger span {
    display: block;

    width: 24px;
    height: 2px;

    margin: 5px auto;

    background: var(--purple-light);
}

.mobile-menu {
    display: none;
}


/* =========================================
   HERO
========================================= */

.hero {
    position: relative;

    min-height: 445px;

    padding:
        118px 20px 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.hero-glow {
    position: absolute;

    width: 600px;
    height: 600px;

    left: 50%;
    top: 45%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(109,40,217,.13),
            transparent 70%
        );

    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.online-badge {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 6px 12px;

    border:
        1px solid
        rgba(109,40,217,.28);

    border-radius: 999px;

    background:
        rgba(109,40,217,.055);

    color:
        var(--purple-light);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .15em;
}

.online-badge span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #56dd87;

    box-shadow:
        0 0 10px
        rgba(86,221,135,.7);
}

.hero h1 {
    margin-top: 25px;

    font-family: var(--heading);

    font-size:
        clamp(50px, 8vw, 84px);

    line-height: .88;

    letter-spacing: -.04em;
}

.hero h1 em {
    color: white;
    font-style: normal;

    text-shadow:
        0 0 20px
        rgba(139,92,246,.28);
}

.hero p {
    max-width: 520px;

    margin: 22px auto 0;

    color:
        var(--muted);

    font-size: 13px;
}

.hero-buttons {
    margin-top: 24px;

    display: flex;
    justify-content: center;

    gap: 10px;
}

.button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 43px;

    padding: 0 19px;

    border-radius: 7px;

    font-family: var(--heading);

    font-size: 12px;
    font-weight: 700;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.button-primary {
    background: var(--purple);
    color: white;

    box-shadow:
        0 0 18px
        rgba(109,40,217,.17);
}

.button-secondary {
    background:
        rgba(255,255,255,.025);

    color: white;

    border:
        1px solid
        rgba(255,255,255,.09);
}

.button-hover:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.06);

    box-shadow:
        0 9px 30px
        rgba(109,40,217,.20);
}


/* =========================================
   STORE
========================================= */

.store-section {
    padding: 18px 0 65px;
}

.store-header {
    display: flex;

    align-items: end;
    justify-content: space-between;

    margin-bottom: 18px;
}

.eyebrow {
    color: var(--purple-light);

    font-family: var(--heading);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .15em;
}

.store-header h2,
.product-page-header h2 {
    margin-top: 5px;

    font-family: var(--heading);
    font-size: 30px;
}

.store-header p,
.product-page-header p {
    margin-top: 4px;

    color: var(--muted);
    font-size: 11px;
}

.store-count {
    padding: 8px 10px;

    border:
        1px solid
        rgba(109,40,217,.18);

    border-radius: 7px;

    color: #77727e;

    font-family: var(--heading);
    font-size: 9px;
}


/* =========================================
   PRODUCT GRID
========================================= */

.product-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.product-card {
    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius: 11px;

    background:
        var(--panel);

    cursor:
        pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

.product-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(109,40,217,.38);

    box-shadow:
        0 18px 55px
        rgba(0,0,0,.5),
        0 0 32px
        rgba(109,40,217,.10);

    filter:
        brightness(1.07);
}


/* =========================================
   IMAGES
========================================= */

.product-image {
    height: 185px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #120b1c,
            #2a1748,
            #080509
        );
}

.product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transform: scale(1.03);

    transition:
        transform .55s ease,
        filter .4s ease;
}

.product-card:hover
.product-image img {
    transform:
        scale(1.09);

    filter:
        saturate(.85)
        brightness(.88);
}

.product-image img.image-error {
    opacity: 0;
}

.image-vignette {
    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.10),
            rgba(0,0,0,.02) 35%,
            rgba(3,2,6,.90)
        );
}

.image-purple {
    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(23,6,44,.36),
            rgba(109,40,217,.12),
            rgba(0,0,0,.30)
        );

    mix-blend-mode: screen;
}

.product-badge {
    position: absolute;

    top: 11px;
    right: 11px;

    z-index: 5;

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        rgba(47,22,82,.92);

    color:
        white;

    border:
        1px solid
        rgba(167,139,250,.25);

    font-family:
        var(--heading);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    box-shadow:
        0 0 18px
        rgba(109,40,217,.22);
}


/* =========================================
   3D GAME TITLE
========================================= */

.product-title {
    position: absolute;

    left: 15px;
    bottom: 13px;

    z-index: 5;

    color: white;

    font-family:
        var(--heading);

    font-size:
        clamp(19px, 2vw, 25px);

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        .035em;

    text-transform:
        uppercase;

    text-shadow:
        0 2px 0 rgba(0,0,0,.9),
        1px 2px 0 rgba(0,0,0,.70),
        2px 3px 0 rgba(0,0,0,.50),
        0 0 18px rgba(139,92,246,.28);

    transition:
        transform .3s ease,
        text-shadow .3s ease;
}

.product-card:hover
.product-title {
    transform:
        translateY(-2px);

    text-shadow:
        0 2px 0 rgba(0,0,0,.95),
        2px 3px 0 rgba(0,0,0,.6),
        0 0 23px rgba(139,92,246,.46);
}


/* =========================================
   CARD FOOTER
========================================= */

.product-card-bottom {
    min-height:
        68px;

    padding:
        11px 13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    background:
        rgba(7,5,9,.98);

    border-top:
        1px solid
        rgba(255,255,255,.05);
}

.product-card-bottom strong {
    display:
        block;

    font-family:
        var(--heading);

    font-size:
        13px;
}

.product-card-bottom span {
    display:
        block;

    margin-top:
        1px;

    color:
        #5f5965;

    font-size:
        9px;
}

.product-card-bottom small {
    display:
        block;

    margin-top:
        1px;

    color:
        var(--purple-light);

    font-size:
        9px;
}

.product-open {
    width:
        39px;

    height:
        39px;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--purple);

    color:
        white;

    font-size:
        17px;

    cursor:
        pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.product-open:hover {
    transform:
        scale(1.10);

    background:
        var(--purple-light);

    box-shadow:
        0 0 23px
        rgba(109,40,217,.4);
}


/* =========================================
   PRODUCT PAGE
========================================= */

.product-page {
    min-height:
        650px;

    padding:
        105px 0 80px;
}

.product-page[hidden] {
    display:
        none !important;
}

.back-button {
    border:
        0;

    background:
        transparent;

    color:
        #7f7888;

    font-family:
        var(--heading);

    font-size:
        12px;

    cursor:
        pointer;

    transition:
        color .2s;
}

.back-button:hover {
    color:
        var(--purple-light);
}

.product-page-header {
    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        22px;

    padding-bottom:
        22px;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}

.product-status {
    padding:
        7px 10px;

    border:
        1px solid
        rgba(103,76,170,.30);

    border-radius:
        999px;

    color:
        #bca8e9;

    background:
        rgba(109,40,217,.07);

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .08em;
}

.plan-grid {
    margin-top:
        22px;

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap:
        12px;
}

.plan-card {
    padding:
        23px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            #0a080d,
            #110d16
        );

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.plan-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(109,40,217,.35);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.42),
        0 0 28px
        rgba(109,40,217,.08);
}

.plan-card.featured {
    border-color:
        rgba(109,40,217,.35);
}

.plan-label {
    color:
        var(--purple-light);

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .14em;
}

.plan-card h3 {
    margin-top:
        8px;

    font-family:
        var(--heading);

    font-size:
        25px;
}

.plan-description {
    min-height:
        52px;

    margin-top:
        6px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.65;
}

.plan-price {
    margin-top:
        20px;

    font-family:
        var(--heading);

    font-size:
        38px;

    font-weight:
        700;
}

.plan-button {
    width:
        100%;

    margin-top:
        18px;

    min-height:
        42px;

    border:
        0;

    border-radius:
        7px;

    background:
        var(--purple);

    color:
        white;

    font-family:
        var(--heading);

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        .2s;
}

.plan-button:hover {
    background:
        var(--purple-light);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 28px
        rgba(109,40,217,.22);
}

.plan-features {
    margin-top:
        18px;

    list-style:
        none;

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}

.plan-features li {
    color:
        #78717f;

    font-size:
        10px;
}

.plan-features li::before {
    content:
        "✓";

    margin-right:
        7px;

    color:
        var(--purple-light);
}


/* =========================================
   COMMUNITY
========================================= */

.community-section {
    padding-bottom:
        55px;
}

.community-card {
    padding:
        27px 29px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border:
        1px solid
        rgba(109,40,217,.15);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #0a080d,
            #160c1d
        );
}

.community-card h2 {
    margin-top:
        5px;

    font-family:
        var(--heading);

    font-size:
        27px;
}

.community-card p {
    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        11px;
}


/* =========================================
   FAQ
========================================= */

.faq-section {
    padding:
        10px 0 60px;
}

.section-heading {
    text-align:
        center;

    margin-bottom:
        22px;
}

.section-heading > span {
    color:
        var(--purple-light);

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .14em;
}

.section-heading h2 {
    margin-top:
        5px;

    font-family:
        var(--heading);

    font-size:
        29px;
}

.faq-list {
    max-width:
        760px;

    margin:
        0 auto;
}

.faq-item {
    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}

.faq-question {
    width:
        100%;

    padding:
        17px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border:
        0;

    background:
        transparent;

    color:
        white;

    font-family:
        var(--heading);

    font-size:
        14px;

    font-weight:
        600;

    text-align:
        left;

    cursor:
        pointer;
}

.faq-question b {
    color:
        var(--purple-light);

    font-size:
        18px;

    transition:
        transform .2s;
}

.faq-item.open
.faq-question b {
    transform:
        rotate(45deg);
}

.faq-answer {
    display:
        none;

    padding:
        0 0 17px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.7;
}

.faq-item.open
.faq-answer {
    display:
        block;
}


/* =========================================
   FOOTER
========================================= */

footer {
    padding:
        20px 0;

    border-top:
        1px solid
        rgba(255,255,255,.05);
}

.footer-inner {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}

.footer-inner > span {
    color:
        #4f4a55;

    font-size:
        9px;
}

.footer-inner > a:last-child {
    color:
        #6f6878;

    font-size:
        10px;
}


/* =========================================
   CHECKOUT
========================================= */

.modal-overlay {
    position:
        fixed;

    inset:
        0;

    z-index:
        3000;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(0,0,0,.86);

    backdrop-filter:
        blur(11px);
}

.modal-overlay.active {
    display:
        flex;
}

.modal {
    width:
        min(520px,100%);

    max-height:
        90vh;

    overflow:
        auto;

    position:
        relative;

    padding:
        28px;

    border:
        1px solid
        rgba(109,40,217,.22);

    border-radius:
        13px;

    background:
        #0b080f;

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.68);
}

.modal-close {
    position:
        absolute;

    top:
        13px;

    right:
        14px;

    width:
        32px;

    height:
        32px;

    border:
        0;

    border-radius:
        7px;

    background:
        rgba(255,255,255,.04);

    color:
        #8c8594;

    font-size:
        21px;

    cursor:
        pointer;
}

.modal-close:hover {
    color:
        white;
}

.modal-header > span {
    color:
        var(--purple-light);

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .14em;
}

.modal-header h2 {
    margin-top:
        4px;

    font-family:
        var(--heading);

    font-size:
        28px;
}

.modal-header p {
    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        11px;
}

.selected-plan {
    margin-top:
        18px;

    padding:
        13px;

    display:
        grid;

    grid-template-columns:
        1.5fr 1fr .8fr;

    gap:
        12px;

    border:
        1px solid
        rgba(109,40,217,.16);

    border-radius:
        8px;

    background:
        rgba(109,40,217,.045);
}

.selected-plan small {
    display:
        block;

    color:
        #605967;

    font-size:
        8px;

    letter-spacing:
        .08em;
}

.selected-plan strong {
    display:
        block;

    margin-top:
        4px;

    color:
        white;

    font-family:
        var(--heading);

    font-size:
        13px;
}

.selected-price {
    text-align:
        right;
}

.selected-price strong {
    color:
        var(--purple-light);

    font-size:
        17px;
}

.modal-form {
    margin-top:
        17px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;
}

.form-group {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}

.form-group label {
    color:
        #7c7485;

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}

.form-control {
    width:
        100%;

    padding:
        11px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        7px;

    outline:
        none;

    background:
        #07050a;

    color:
        white;

    font-size:
        12px;
}

.form-control:focus {
    border-color:
        rgba(139,92,246,.5);

    box-shadow:
        0 0 0 3px
        rgba(109,40,217,.08);
}

.verify-box {
    padding:
        10px;

    border:
        1px solid
        rgba(109,40,217,.17);

    border-radius:
        7px;

    background:
        rgba(109,40,217,.045);
}

.verify-box small {
    display:
        block;

    color:
        #5c5663;

    font-size:
        8px;
}

.verify-box strong {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--purple-light);

    font-family:
        monospace;

    font-size:
        12px;
}

.cashapp-hint {
    padding:
        9px 10px;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius:
        7px;

    color:
        #6a6371;

    font-size:
        10px;
}

.cashapp-hint strong {
    color:
        white;
}

.form-error {
    display:
        none;

    padding:
        9px 10px;

    border:
        1px solid
        rgba(255,80,80,.2);

    border-radius:
        7px;

    background:
        rgba(255,80,80,.06);

    color:
        #ff9f9f;

    font-size:
        10px;
}

.submit-button {
    width:
        100%;

    min-height:
        42px;

    border:
        0;

    border-radius:
        7px;

    background:
        var(--purple);

    color:
        white;

    font-family:
        var(--heading);

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        .2s;
}

.submit-button:hover {
    background:
        var(--purple-light);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px
        rgba(109,40,217,.2);
}

.submit-button:disabled {
    opacity:
        .7;

    cursor:
        wait;
}

.modal-success {
    display:
        none;

    text-align:
        center;

    padding:
        34px 0 10px;
}

.success-icon {
    width:
        54px;

    height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 14px;

    border-radius:
        50%;

    background:
        rgba(109,40,217,.12);

    color:
        #a78bfa;

    font-size:
        23px;
}

.modal-success h3 {
    font-family:
        var(--heading);

    color:
        var(--purple-light);

    font-size:
        27px;
}

.modal-success p {
    margin-top:
        8px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.6;
}

#orderIdBox {
    margin-top:
        14px;

    padding:
        12px;

    border:
        1px solid
        rgba(109,40,217,.16);

    border-radius:
        7px;

    background:
        rgba(109,40,217,.045);
}

#orderIdBox small {
    display:
        block;

    color:
        #595360;

    font-size:
        8px;
}

#orderIdBox code {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--purple-light);

    font-size:
        13px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .product-grid,
    .plan-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}

@media (max-width: 700px) {

    .nav-links,
    .nav-shop {
        display:
            none;
    }

    .hamburger {
        display:
            block;

        margin-left:
            auto;
    }

    .mobile-menu {
        position:
            fixed;

        top:
            68px;

        left:
            0;

        right:
            0;

        display:
            flex;

        flex-direction:
            column;

        padding:
            12px;

        background:
            rgba(4,3,6,.97);

        border-bottom:
            1px solid
            rgba(109,40,217,.14);

        transform:
            translateY(-120%);

        transition:
            transform .25s;
    }

    .mobile-menu.open {
        transform:
            translateY(0);
    }

    .mobile-menu a {
        padding:
            12px;

        color:
            #85808f;

        font-family:
            var(--heading);

        font-size:
            14px;
    }

    .store-header,
    .product-page-header,
    .community-card {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .selected-plan {
        grid-template-columns:
            1fr;
    }

    .selected-price {
        text-align:
            left;
    }

}

@media (max-width: 560px) {

    .product-grid,
    .plan-grid {
        grid-template-columns:
            1fr;
    }

    .hero {
        min-height:
            420px;
    }

    .hero h1 {
        font-size:
            48px;
    }

    .hero-buttons {
        flex-direction:
            column;
    }

    .hero-buttons a {
        width:
            100%;
    }

    .footer-inner {
        flex-direction:
            column;
    }

    .product-image {
        height:
            195px;
    }

}