@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --bg: #070707;
    --card: #101010;
    --card2: #151515;
    --text: #ffffff;
    --muted: #8d8d8d;
    --border: rgba(255,255,255,.08);
    --purple: #a652ff;
    --purple-light: #c985ff;
    --gold: #ffb632;
    --green: #25d366;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Inter, Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(166,82,255,.08),
            transparent 25%
        ),
        var(--bg);
    overflow-x: hidden;
}

body.no-scroll {
    overflow: hidden;
}

button,
input,
select {
    font: inherit;
}

button {
    border: 0;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

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

img {
    display: block;
    max-width: 100%;
}

/* HEADER */

.header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;

    height: 78px;
    padding: 0 6%;

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

    border-bottom: 1px solid var(--border);

    background: rgba(5,5,5,.78);
    backdrop-filter: blur(20px);
}

.logo img {
    width: 145px;
    max-height: 60px;
    object-fit: contain;
}

.menu {
    display: flex;
    gap: 28px;
}

.menu a {
    color: #aaa;
    font-size: 13px;
    font-weight: 700;
    transition: .2s;
}

.menu a:hover {
    color: white;
}

.cart-button {
    width: 46px;
    height: 46px;

    position: relative;

    border-radius: 14px;

    background: rgba(255,255,255,.08);
    color: white;

    font-size: 19px;
    cursor: pointer;
}

.cart-button span {
    position: absolute;
    top: -6px;
    right: -6px;

    min-width: 21px;
    height: 21px;
    padding: 0 5px;

    display: grid;
    place-items: center;

    border-radius: 999px;

    background: var(--purple);

    font-size: 10px;
    font-weight: 900;
}

/* HERO */

.hero {
    min-height: 780px;
    height: 94vh;
    max-height: 1000px;

    position: relative;

    display: flex;
    align-items: center;

    padding: 120px 7% 70px;

    background-image:
        url("/assets/images/banner-mahau.webp");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.96),
            rgba(0,0,0,.74) 48%,
            rgba(0,0,0,.18)
        ),
        linear-gradient(
            0deg,
            var(--bg),
            transparent 35%
        );
}

.hero-content {
    width: min(720px,100%);
    position: relative;
    z-index: 2;
}

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

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 2px;
}

.hero h1 {
    margin: 22px 0;

    font-size: clamp(55px,7.5vw,110px);
    line-height: .88;
    letter-spacing: -6px;

    font-weight: 900;
}

.hero h1 span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            white,
            var(--purple-light),
            var(--gold)
        );

    -webkit-background-clip: text;
    background-clip: text;
}

.hero p {
    max-width: 570px;

    color: #aaa;

    font-size: 16px;
    line-height: 1.7;
}

.hero-actions {
    margin-top: 30px;

    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    min-height: 48px;
    padding: 0 22px;

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

    border-radius: 13px;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition: .2s;
}

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

.btn-primary {
    background: white;
    color: #050505;
}

.btn-glass {
    color: white;

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

    background: rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
}

/* BENEFÍCIOS */

.benefits {
    width: min(1180px,90%);

    position: relative;
    z-index: 10;

    margin: -28px auto 60px;

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

    border: 1px solid var(--border);
    border-radius: 22px;

    overflow: hidden;

    background: rgba(16,16,16,.94);
    backdrop-filter: blur(20px);
}

.benefits article {
    padding: 23px;

    display: flex;
    align-items: center;
    gap: 13px;

    border-right: 1px solid var(--border);
}

.benefits article:last-child {
    border-right: 0;
}

.benefits article > span {
    font-size: 25px;
}

.benefits strong {
    display: block;
    font-size: 12px;
}

.benefits small {
    color: #777;
    font-size: 10px;
}

/* SEÇÕES */

.section {
    padding: 90px 7%;
}

.section-title {
    margin-bottom: 40px;
}

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

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.section-title h2 {
    margin: 8px 0;

    font-size: clamp(38px,5vw,67px);

    letter-spacing: -4px;
}

.section-title p {
    color: var(--muted);
}

/* SORTEIO */

.raffle-callout {
    padding: 60px;

    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;

    border: 1px solid var(--border);
    border-radius: 32px;

    background:
        radial-gradient(
            circle at top left,
            rgba(166,82,255,.20),
            transparent 40%
        ),
        #101010;
}

.raffle-callout h2 {
    max-width: 650px;

    margin: 12px 0;

    font-size: clamp(42px,6vw,75px);

    line-height: .95;
    letter-spacing: -5px;
}

.raffle-callout p {
    color: var(--muted);
}

/* INSTAGRAM */

.instagram-card {
    padding: 80px 25px;

    text-align: center;

    border: 1px solid var(--border);
    border-radius: 32px;

    background:
        radial-gradient(
            circle at top center,
            rgba(185,64,255,.18),
            transparent 50%
        ),
        #101010;
}

.instagram-card > span {
    color: var(--purple-light);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.instagram-card h2 {
    margin: 12px 0;

    font-size: clamp(40px,6vw,75px);

    letter-spacing: -4px;
}

.instagram-card p {
    color: var(--muted);
    margin-bottom: 27px;
}

/* WHATSAPP */

.floating-whatsapp {
    position: fixed;

    right: 20px;
    bottom: 20px;

    z-index: 1200;

    width: 58px;
    height: 58px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 10px 40px rgba(37,211,102,.35);

    font-size: 24px;

    cursor: pointer;
}

/* FOOTER */

.site-footer {
    padding: 45px 7%;

    display: grid;
    grid-template-columns: 160px 1fr 1fr auto;
    gap: 30px;
    align-items: center;

    border-top: 1px solid var(--border);

    color: #777;
    font-size: 11px;
}

.site-footer img {
    width: 125px;
}

.site-footer strong {
    color: white;
}

/* MOBILE */

@media (max-width: 800px) {

    .header {
        height: 68px;
        padding: 0 5%;
    }

    .logo img {
        width: 110px;
        max-height: 48px;
    }

    .menu {
        display: none;
    }

    .hero {
        min-height: 730px;
        height: 93vh;

        padding: 110px 6% 60px;

        align-items: flex-end;

        background-image:
            url("/assets/images/banner-mahau-mobile.webp");
    }

    .hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(5,5,5,.99),
                rgba(5,5,5,.74) 48%,
                rgba(5,5,5,.05)
            );
    }

    .hero h1 {
        font-size: clamp(48px,16vw,75px);
        letter-spacing: -4px;
    }

    .hero p {
        font-size: 14px;
    }

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

    .hero-actions .btn {
        width: 100%;
    }

    .benefits {
        grid-template-columns: 1fr 1fr;
    }

    .benefits article {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .section {
        padding: 70px 5%;
    }

    .raffle-callout {
        padding: 35px 22px;

        flex-direction: column;
        align-items: stretch;
    }

    .raffle-callout h2 {
        letter-spacing: -3px;
    }

    .site-footer {
        grid-template-columns: 1fr;

        text-align: center;
        justify-items: center;
    }

}

/* Mahau — banner mobile sem cortar a arte */
@media (max-width: 768px) {
    .hero {
        background-image: url("/assets/images/banner-mahau-mobile.webp");
        background-size: 100% auto;
        background-position: center top;
        background-repeat: no-repeat;
        background-color: #050505;
    }
}