/* =========================
   GLOBAL
========================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(18, 53, 111, 0.35),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #020817 0%,
            #07183d 50%,
            #020817 100%
        );

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


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

.page {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;

    padding:
        22px 14px
        30px;
}


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

.hero {
    text-align: center;
}


/* LIMITED OFFER BADGE */

.badge {
    display: inline-block;

    background: #c71920;

    border: 1px solid #ff5b5b;

    border-radius: 30px;

    padding:
        9px 17px;

    font-size: 13px;

    font-weight: 800;

    color: #ffffff;

    box-shadow:
        0 4px 15px rgba(255, 0, 0, 0.18);
}


/* HERO TITLE */

.hero h1 {
    margin:
        18px 0
        8px;

    font-size:
        clamp(36px, 9vw, 62px);

    line-height: 0.98;

    font-weight: 900;

    letter-spacing: -1px;
}

.hero h1 span {
    color: #ffd21a;
}


/* HERO SUBTITLE */

.hero > p {
    margin: 0;

    color: #dce4f2;

    font-size:
        clamp(16px, 4vw, 20px);

    line-height: 1.4;
}


/* =========================
   MAIN REWARD IMAGE
========================= */

.gift-scene {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin:
        25px auto
        10px;

    overflow: hidden;
}


.main-reward-image {

    display: block;

    width: min(100%, 650px);

    height: auto;

    max-height: 520px;

    object-fit: contain;

    margin: 0 auto;
}


/* =========================
   REWARDS
========================= */

.rewards {
    margin-top: 10px;
}

.rewards h2 {

    text-align: center;

    margin:
        10px 0
        18px;

    color: #ffd21a;

    font-size: 24px;

    font-weight: 900;
}


/* REWARD GRID */

.reward-grid {

    display: grid;

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

    gap: 10px;
}


/* REWARD CARD */

.reward-card {

    background:
        rgba(9, 26, 64, 0.88);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 15px;

    padding: 15px;

    text-align: center;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.15);
}


/* ICON */

.reward-icon {

    font-size: 34px;

    margin-bottom: 7px;
}


/* TITLE */

.reward-card h3 {

    margin:
        5px 0;

    font-size: 16px;

    color: #ffffff;
}


/* VALUE */

.reward-card p {

    margin: 0;

    color: #ffd21a;

    font-size: 13px;

    font-weight: 800;
}


/* =========================
   STATS
========================= */

.stats {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;

    margin:
        18px 0;
}


/* STAT CARD */

.stat-card {

    display: flex;

    align-items: center;

    gap: 12px;

    background:
        rgba(9, 26, 64, 0.92);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 15px;

    padding: 15px;

    text-align: left;
}


/* STAT ICON */

.stat-icon {

    font-size: 31px;

    flex-shrink: 0;
}


/* STAT TITLE */

.stat-card h3 {

    margin:
        0 0 5px;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;
}


/* STAT NUMBER */

.stat-card strong {

    display: block;

    color: #ffd21a;

    font-size: 40px;

    line-height: 1;

    font-weight: 900;
}


/* STAT DESCRIPTION */

.stat-card p {

    margin:
        5px 0 0;

    color: #b9c3d6;

    font-size: 11px;
}


/* =========================
   CTA
========================= */

.cta {

    text-align: center;

    margin-top: 10px;
}


/* CLAIM BUTTON */

.claim-button {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    width: 100%;

    min-height: 70px;

    padding:
        14px 20px;

    background:
        linear-gradient(
            180deg,
            #ffe12e,
            #ffbd00
        );

    color: #050b18;

    text-decoration: none;

    border-radius: 14px;

    font-size:
        clamp(25px, 6vw, 36px);

    font-weight: 900;

    box-shadow:
        0 10px 28px
        rgba(255, 192, 0, 0.27);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


/* BUTTON HOVER */

.claim-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 32px
        rgba(255, 192, 0, 0.38);
}


/* BUTTON ACTIVE */

.claim-button:active {

    transform:
        translateY(1px);
}


/* CTA SMALL TEXT */

.cta > p {

    margin:
        10px 0 0;

    color: #c8d0df;

    font-size: 12px;
}


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

footer {

    text-align: center;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.10);

    margin-top: 18px;

    padding-top: 15px;

    color: #c5ccda;

    font-size: 12px;
}


/* TRUST */

.trust {

    font-size: 13px;

    color: #dce3ef;
}


/* FOOTER NAV */

footer nav {

    margin:
        10px 0;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}


footer nav a {

    color: #dce3ef;

    text-decoration: none;
}


footer nav a:hover {

    text-decoration: underline;
}


/* DISCLAIMER */

footer small {

    display: block;

    max-width: 600px;

    margin: 0 auto;

    line-height: 1.45;

    color: #9da7b9;
}


/* =========================================
   GLOBAL
========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(18, 53, 111, 0.35),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #020817 0%,
            #07183d 50%,
            #020817 100%
        );

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}


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

.page {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;

    padding: 22px 14px 30px;
}


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

.hero {
    text-align: center;
}


/* =========================================
   BADGE
========================================= */

.badge {
    display: inline-block;

    background: #c71920;

    border: 1px solid #ff5b5b;

    border-radius: 30px;

    padding: 9px 17px;

    font-size: 13px;

    font-weight: 800;

    color: #ffffff;

    box-shadow:
        0 4px 15px rgba(255, 0, 0, 0.18);
}


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

.hero h1 {
    margin: 18px 0 8px;

    font-size: clamp(36px, 9vw, 62px);

    line-height: 0.98;

    font-weight: 900;

    letter-spacing: -1px;
}

.hero h1 span {
    color: #ffd21a;
}


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

.hero > p {
    margin: 0;

    color: #dce4f2;

    font-size: clamp(16px, 4vw, 20px);

    line-height: 1.4;
}


/* =========================================
   MAIN REWARD IMAGE
========================================= */

.gift-scene {
    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 25px auto 10px;

    overflow: hidden;
}

.main-reward-image {
    display: block;

    width: min(100%, 650px);

    height: auto;

    max-height: 520px;

    object-fit: contain;

    margin: 0 auto;
}


/* =========================================
   REWARDS SECTION
========================================= */

.rewards {
    margin-top: 10px;
}

.rewards h2 {
    text-align: center;

    margin: 10px 0 18px;

    color: #ffd21a;

    font-size: 24px;

    font-weight: 900;
}


/* =========================================
   REWARD GRID
========================================= */

.reward-grid {
    display: grid;

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

    gap: 10px;
}


/* =========================================
   REWARD CARD
========================================= */

.reward-card {
    background:
        rgba(9, 26, 64, 0.88);

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 15px;

    padding: 15px;

    text-align: center;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.15);
}


/* =========================================
   REWARD ICON
========================================= */

.reward-icon {
    font-size: 34px;

    margin-bottom: 7px;
}


/* =========================================
   REWARD TITLE
========================================= */

.reward-card h3 {
    margin: 5px 0;

    font-size: 16px;

    color: #ffffff;
}


/* =========================================
   REWARD VALUE
========================================= */

.reward-card p {
    margin: 0;

    color: #ffd21a;

    font-size: 13px;

    font-weight: 800;
}


/* =========================================
   STATS
========================================= */

.stats {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

    margin: 18px 0;
}


/* =========================================
   STAT CARD
========================================= */

.stat-card {
    display: flex;

    align-items: center;

    gap: 12px;

    background:
        rgba(9, 26, 64, 0.92);

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 15px;

    padding: 15px;

    text-align: left;
}


/* =========================================
   STAT ICON
========================================= */

.stat-icon {
    font-size: 31px;

    flex-shrink: 0;
}


/* =========================================
   STAT TITLE
========================================= */

.stat-card h3 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;
}


/* =========================================
   STAT NUMBER
========================================= */

.stat-card strong {
    display: block;

    color: #ffd21a;

    font-size: 40px;

    line-height: 1;

    font-weight: 900;
}


/* =========================================
   STAT DESCRIPTION
========================================= */

.stat-card p {
    margin: 5px 0 0;

    color: #b9c3d6;

    font-size: 11px;
}


/* =========================================
   CTA
========================================= */

.cta {
    text-align: center;

    margin-top: 10px;
}


/* =========================================
   CLAIM BUTTON
========================================= */

.claim-button {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    width: 100%;

    min-height: 70px;

    padding: 14px 20px;

    background:
        linear-gradient(
            180deg,
            #ffe12e,
            #ffbd00
        );

    color: #050b18;

    text-decoration: none;

    border-radius: 14px;

    font-size: clamp(25px, 6vw, 36px);

    font-weight: 900;

    box-shadow:
        0 10px 28px rgba(255, 192, 0, 0.27);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


/* =========================================
   BUTTON HOVER
========================================= */

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

    box-shadow:
        0 13px 32px rgba(255, 192, 0, 0.38);
}


/* =========================================
   BUTTON ACTIVE
========================================= */

.claim-button:active {
    transform: translateY(1px);
}


/* =========================================
   CTA SMALL TEXT
========================================= */

.cta > p {
    margin: 10px 0 0;

    color: #c8d0df;

    font-size: 12px;
}


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

footer {
    text-align: center;

    border-top:
        1px solid rgba(255, 255, 255, 0.10);

    margin-top: 18px;

    padding-top: 15px;

    color: #c5ccda;

    font-size: 12px;
}


/* =========================================
   TRUST
========================================= */

.trust {
    font-size: 13px;

    color: #dce3ef;
}


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

footer nav {
    margin: 10px 0;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}

footer nav a {
    color: #dce3ef;

    text-decoration: none;
}

footer nav a:hover {
    text-decoration: underline;
}


/* =========================================
   DISCLAIMER
========================================= */

footer small {
    display: block;

    max-width: 600px;

    margin: 0 auto;

    line-height: 1.45;

    color: #9da7b9;
}


/* =========================================
   MOBILE
   360px - 560px
========================================= */

@media (max-width: 560px) {

    body {
        overflow-x: hidden;
    }


    /* PAGE */

    .page {
        width: 100%;

        max-width: 430px;

        margin: 0 auto;

        padding: 10px 8px 18px;
    }


    /* HERO */

    .hero {
        padding: 0;
    }


    /* BADGE */

    .badge {
        padding: 6px 12px;

        font-size: 10px;

        border-radius: 20px;
    }


    /* TITLE */

    .hero h1 {
        margin: 8px 0 4px;

        font-size:
            clamp(25px, 8vw, 34px);

        line-height: 0.98;

        letter-spacing: -0.5px;
    }


    /* SUBTITLE */

    .hero > p {
        margin: 0 auto;

        max-width: 330px;

        font-size: 12px;

        line-height: 1.25;
    }


    /* IMAGE CONTAINER */

    .gift-scene {
        width: 100%;

        margin: 8px auto 2px;

        height: auto;
    }


    /* MAIN IMAGE */

    .main-reward-image {
        width: 100%;

        max-width: 360px;

        height: auto;

        max-height: 300px;

        object-fit: contain;

        display: block;

        margin: 0 auto;
    }


    /* REWARDS */

    .rewards {
        margin-top: 0;
    }


    /* REWARDS TITLE */

    .rewards h2 {
        margin: 3px 0 8px;

        font-size: 17px;

        line-height: 1;
    }


    /* THREE CARDS ON MOBILE */

    .reward-grid {
        display: grid;

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

        gap: 5px;

        width: 100%;
    }


    /* REWARD CARD */

    .reward-card {
        min-width: 0;

        padding: 7px 3px;

        border-radius: 8px;

        text-align: center;

        background:
            rgba(9, 26, 64, 0.9);

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


    /* ICON */

    .reward-icon {
        font-size: 20px;

        margin: 0 0 3px;
    }


    /* TITLE */

    .reward-card h3 {
        margin: 0 0 2px;

        font-size: 9px;

        line-height: 1.1;

        white-space: nowrap;
    }


    /* VALUE */

    .reward-card p {
        margin: 0;

        font-size: 7px;

        line-height: 1.1;

        white-space: nowrap;
    }


    /* STATS */

    .stats {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 5px;

        margin: 7px 0;
    }


    /* STAT CARD */

    .stat-card {
        min-width: 0;

        min-height: 66px;

        padding: 7px 6px;

        border-radius: 9px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 5px;

        text-align: left;
    }


    /* STAT ICON */

    .stat-icon {
        font-size: 21px;

        flex-shrink: 0;
    }


    /* STAT TITLE */

    .stat-card h3 {
        margin: 0 0 1px;

        font-size: 7px;

        line-height: 1.1;

        white-space: nowrap;
    }


    /* STAT NUMBER */

    .stat-card strong {
        font-size: 25px;

        line-height: 1;
    }


    /* STAT DESCRIPTION */

    .stat-card p {
        margin: 2px 0 0;

        font-size: 6px;

        white-space: nowrap;
    }


    /* CTA */

    .cta {
        margin-top: 5px;
    }


    /* CLAIM BUTTON */

    .claim-button {
        width: 100%;

        min-height: 48px;

        padding: 8px 12px;

        gap: 8px;

        border-radius: 9px;

        font-size: 22px;

        line-height: 1;

        box-shadow:
            0 5px 15px
            rgba(255, 192, 0, 0.25);
    }


    /* CTA TEXT */

    .cta > p {
        margin: 5px 0 0;

        font-size: 8px;
    }


    /* FOOTER */

    footer {
        margin-top: 7px;

        padding-top: 7px;

        font-size: 8px;
    }


    /* TRUST */

    .trust {
        font-size: 8px;
    }


    /* FOOTER LINKS */

    footer nav {
        margin: 5px 0;

        gap: 5px;
    }


    /* DISCLAIMER */

    footer small {
        font-size: 7px;

        line-height: 1.3;

        max-width: 330px;
    }

}


/* =========================================
   VERY SMALL PHONES
   360px - 390px
========================================= */

@media (max-width: 390px) {

    .page {
        padding:
            8px 6px
            15px;
    }


    /* HERO TITLE */

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


    /* SUBTITLE */

    .hero > p {
        font-size: 11px;
    }


    /* IMAGE */

    .main-reward-image {
        max-width: 330px;

        max-height: 270px;
    }


    /* YOU CAN WIN */

    .rewards h2 {
        font-size: 16px;

        margin-bottom: 6px;
    }


    /* REWARD GRID */

    .reward-grid {
        gap: 4px;
    }


    /* REWARD CARD */

    .reward-card {
        padding: 6px 2px;
    }


    /* REWARD ICON */

    .reward-icon {
        font-size: 18px;
    }


    /* REWARD TITLE */

    .reward-card h3 {
        font-size: 8px;
    }


    /* REWARD VALUE */

    .reward-card p {
        font-size: 6.5px;
    }


    /* STATS */

    .stats {
        gap: 4px;

        margin: 6px 0;
    }


    /* STAT CARD */

    .stat-card {
        min-height: 60px;

        padding: 5px;
    }


    /* STAT ICON */

    .stat-icon {
        font-size: 18px;
    }


    /* STAT TITLE */

    .stat-card h3 {
        font-size: 6.5px;
    }


    /* STAT NUMBER */

    .stat-card strong {
        font-size: 23px;
    }


    /* STAT DESCRIPTION */

    .stat-card p {
        font-size: 5.5px;
    }


    /* CTA */

    .claim-button {
        min-height: 45px;

        font-size: 20px;

        gap: 6px;
    }

}


/* =========================================
   EXTRA SMALL PHONES
   360px
========================================= */

@media (max-width: 360px) {

    .page {
        padding-left: 5px;

        padding-right: 5px;
    }


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


    .hero > p {
        font-size: 10px;
    }


    .main-reward-image {
        max-width: 315px;

        max-height: 250px;
    }


    .reward-card h3 {
        font-size: 7.5px;
    }


    .reward-card p {
        font-size: 6px;
    }


    .stat-card strong {
        font-size: 21px;
    }


    .claim-button {
        min-height: 43px;

        font-size: 19px;
    }

}