/* ==========================================
   Hero
========================================== */

.hero {

    min-height: 75vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

}

.hero-content {

    max-width: 800px;

}

.hero-badge {

    display: inline-block;

    background: rgba(59,130,246,.15);

    color: var(--primary);

    border: 1px solid rgba(59,130,246,.25);

    padding: .5rem 1rem;

    border-radius: 999px;

    font-size: .9rem;

    margin-bottom: 2rem;

}
.hero h1 {

    font-size: clamp(3rem, 8vw, 5rem);

    line-height: 1.1;

    margin-bottom: 1.5rem;

}
.hero-description {

    font-size: 1.25rem;

    color: var(--text-secondary);

    max-width: 700px;

    margin: 0 auto 2.5rem;

}
.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 1rem;

    flex-wrap: wrap;

}
.btn-primary-custom,
.btn-secondary-custom {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: .9rem 1.8rem;

    border-radius: var(--radius);

    text-decoration: none;

    font-weight: 600;

    transition: var(--transition-normal);

}
.btn-primary-custom {

    background: var(--primary);

    color: white;

}
.btn-secondary-custom {

    background: transparent;

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

    color: white;

}
.btn-primary-custom:hover,
.btn-secondary-custom:hover {

    transform: translateY(-3px);

}
/* ==========================================
   Feature Section
========================================== */

.section-header {

    text-align: center;

    max-width: 700px;

    margin: 0 auto 3rem;

}

.section-header h2 {

    margin-bottom: 1rem;

}

.section-header p {

    font-size: 1.1rem;

}
.season-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    gap: 1.5rem;

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

.cta-section {

    margin-top: 5rem;

}

.cta-card {

    text-align: center;

    padding: 4rem 2rem;

    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.12),
            rgba(17,24,39,1)
        );

}

.cta-card p {

    max-width: 700px;

    margin: 1rem auto 2rem;

}