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

body {
    font-family: var(--font);
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.65;
    overflow-x: hidden;
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 30px;
    border-radius: var(--radius-xl);
    font-weight: 700;
    font-size: .97rem;
    letter-spacing: .02em;
    border: none;
    transition: all .25s ease;
    white-space: nowrap;
}

.btn-primary {
    background: var(--grad-accent);
    color: #fff;
    box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px var(--accent-glow);
}

.btn-outline {
    background: transparent;
    color: var(--accent-light);
    border: 2px solid var(--accent);
}
.btn-outline:hover {
    background: var(--accent-subtle);
    transform: translateY(-2px);
}

.btn-gold {
    background: var(--grad-gold);
    color: #1a1000;
    font-weight: 800;
    box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(245, 158, 11, 0.4);
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--accent-light);
    background: var(--accent-subtle);
    padding: 6px 16px;
    border-radius: 99px;
    border: 1px solid var(--border);
    margin-bottom: 20px;
}
.section-label.center { display: flex; justify-content: center; }

.section-title {
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: 18px;
}
.section-title span {
    background: var(--grad-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.section-title.center { text-align: center; }

.section-sub {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 620px;
    margin-bottom: 52px;
}
.section-sub.center { text-align: center; margin-left: auto; margin-right: auto; }

.badge-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gold-subtle);
    color: var(--gold-light);
    font-weight: 700;
    font-size: .9rem;
    padding: 5px 12px;
    border-radius: 99px;
    border: 1px solid rgba(245, 158, 11, .25);
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 600;
    background: var(--accent-subtle);
    color: var(--accent-light);
    border: 1px solid var(--border);
}
.tag-gold {
    background: var(--gold-subtle);
    color: var(--gold-light);
    border-color: rgba(245, 158, 11, .2);
}

.divider { height: 1px; background: var(--border-subtle); margin: 48px 0; }

.text-accent  { color: var(--accent-light); }
.text-gold    { color: var(--gold-light); }
.text-muted   { color: var(--text-secondary); }
.fw-800       { font-weight: 800; }
.mt-auto      { margin-top: auto; }
.text-center  { text-align: center; }

.page-hero {
    padding: 72px 0 56px;
    background: linear-gradient(160deg, #0d0d14 0%, #1a0a2e 100%);
    border-bottom: 1px solid var(--border-subtle);
}