:root {
    --bb-plum: #4d155d;
    --bb-plum-dark: #391047;
    --bb-gold: #f4c542;
    --bb-ink: #232336;
    --bb-muted: #606276;
    --bb-bg: #f6f7fb;
    --bb-card: #ffffff;
    --bb-border: #e7e9f1;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    color: var(--bb-ink);
    background: var(--bb-bg);
}

.container {
    width: min(1120px, 94%);
    margin: 0 auto;
}

.site-header {
    background: #fff;
    border-bottom: 1px solid var(--bb-border);
}

.header-top {
    min-height: 68px;
    display: flex;
    align-items: center;
}

.brand img {
    height: 34px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}

.hero-band {
    background: linear-gradient(90deg, #5e0a73 0%, #4d155d 65%, #7e5a8d 100%);
    height: 8px;
}

.hero {
    padding: 40px 0 48px;
}

.hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bb-card);
    border: 1px solid var(--bb-border);
    box-shadow: 0 10px 26px rgba(20, 21, 34, 0.08);
}

.hero-copy-wrap {
    background: linear-gradient(145deg, #f3eff8 0%, #ffffff 100%);
    padding: 40px 36px;
    display: flex;
    align-items: center;
}

.hero-copy { max-width: 500px; }

.kicker {
    margin: 0;
    color: var(--bb-plum);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

h1 {
    margin: 10px 0 12px;
    color: var(--bb-plum-dark);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.2;
}

.lead {
    margin: 0 0 20px;
    color: var(--bb-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-rewards,
.btn-learn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 11px 20px;
    text-decoration: none;
    font-weight: 700;
    border: 1px solid transparent;
    transition: 0.15s ease;
}

.btn-rewards {
    background: var(--bb-gold);
    color: #2b2340;
}

.btn-learn {
    background: #fff;
    color: var(--bb-plum);
    border-color: #d7d1e4;
}

.btn-rewards:hover,
.btn-learn:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}

.hero-visual {
    min-height: 310px;
    background:
        radial-gradient(circle at 75% 20%, rgba(255, 255, 255, 0.28), transparent 40%),
        linear-gradient(130deg, #7c5f89 0%, #bcaec4 55%, #e2dce6 100%);
    position: relative;
}

.hero-visual img {
    width: 100%;
    height: 100%;
    min-height: 310px;
    object-fit: cover;
    display: block;
}

@media (max-width: 980px) {
    .hero-layout {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 180px;
    }

    .hero-visual img {
        min-height: 180px;
    }
}

@media (max-width: 640px) {
    .header-top { min-height: 62px; }

    .brand img {
        height: 30px;
        max-width: 190px;
    }

    .hero {
        padding-top: 22px;
    }

    .hero-copy-wrap {
        padding: 26px 20px;
    }

    h1 {
        font-size: 1.62rem;
    }
}