:root {
    --upcoming-accent: #ec4899;
}

/* Responsive Adjustments */
@media (max-width: 768px) {

    html,
    body {
        width: 100vw;
        overflow-x: hidden !important;
        margin: 0;
        padding: 0;
    }

    .hero-premium {
        padding: 4rem 1rem !important;
        min-height: auto !important;
    }

    .hero-title {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
    }

    .hero-subtitle {
        font-size: 0.95rem !important;
        padding: 0 0.5rem !important;
        line-height: 1.4 !important;
        width: 100%;
        box-sizing: border-box;
    }

    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .registration-grid,
    .analytics-grid,
    .vision-grid,
    .prerequisites-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
    }

    .phase-header {
        padding: 1.5rem !important;
        border-radius: 12px 12px 0 0 !important;
    }

        .phase-header h3 {
            font-size: 1.4rem !important;
        }

    .phase-content {
        padding: 2rem 1.5rem !important;
        width: 100%;
        box-sizing: border-box;
        grid-template-columns: 1fr !important;
    }

        .phase-content h4 {
            font-size: 1.1rem !important;
            word-break: break-word;
            line-height: 1.4 !important;
            margin-bottom: 0.75rem !important;
        }

    .hero-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
        padding: 0 1rem !important;
        box-sizing: border-box;
    }

    .btn-premium,
    .btn-glass,
    .btn-primary,
    .btn-secondary-outline {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        text-align: center;
    }

    .price-card {
        padding: 2.5rem 1.5rem !important;
    }

    .hero-badge {
        font-size: 0.7rem !important;
        padding: 0.4rem 0.8rem !important;
        margin-bottom: 1rem !important;
    }

    .badges-container {
        max-width: 100% !important;
        padding: 0 1rem;
    }
}