/* ============================================
   RESPONSIVE — TABLET (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    :root {
        --space-section: 80px;
    }

    .container {
        padding: 0 var(--space-lg);
    }

    /* Header */
    .main-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .btn-header {
        display: none;
    }

    /* Hero */
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-2xl);
    }

    .hero-text {
        max-width: 100%;
    }

    .hero-cta-group {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-visual {
        order: -1;
    }

    .hero-image {
        max-width: 420px;
        margin: 0 auto;
    }

    .floating-element {
        display: none;
    }

    .hero-scroll-indicator {
        display: none;
    }

    /* Experience Grid */
    .experience-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }

    /* Steps */
    .steps-grid {
        flex-direction: column;
        align-items: center;
    }

    .step-connector {
        transform: rotate(90deg);
        padding-top: 0;
    }

    .step-card {
        max-width: 100%;
    }

    /* Courses */
    .courses-layout {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .courses-info .section-title,
    .courses-info .section-description {
        text-align: center;
    }

    .feature-list {
        max-width: 400px;
        margin: 0 auto var(--space-xl);
    }

    .courses-info {
        text-align: center;
    }

    /* VR */
    .vr-worlds-carousel {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Promo */
    .promo-card {
        flex-direction: column;
        text-align: center;
        padding: var(--space-2xl);
    }

    .promo-description {
        margin: 0 auto var(--space-xl);
    }

    .countdown {
        justify-content: center;
    }

    /* Leaderboard */
    .leaderboard-table {
        font-size: 0.85rem;
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }

    /* Newsletter */
    .newsletter-card {
        flex-direction: column;
        text-align: center;
        padding: var(--space-2xl);
    }

    .newsletter-form .form-group {
        flex-direction: column;
        align-items: center;
    }

    .newsletter-form input[type="email"] {
        min-width: unset;
        width: 100%;
        max-width: 400px;
    }

    /* Location */
    .location-layout {
        grid-template-columns: 1fr;
    }

    .location-info .section-title {
        text-align: center;
    }

    .location-info {
        text-align: center;
    }

    .location-hours li {
        max-width: 300px;
        margin: 0 auto;
    }

    .location-contact-links {
        align-items: center;
    }

    /* About */
    .about-story-layout {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .about-story-content .section-title {
        text-align: center;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xl);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Pricing */
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .pricing-featured {
        transform: none;
    }

    .pricing-featured:hover {
        transform: translateY(-6px);
    }

    .group-package-card {
        flex-direction: column;
        text-align: center;
    }

    /* Booking Form */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Contact */
    .contact-layout {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

/* ============================================
   RESPONSIVE — MOBILE (max-width: 640px)
   ============================================ */
@media (max-width: 640px) {
    :root {
        --space-section: 60px;
    }

    .container {
        padding: 0 var(--space-md);
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding-top: calc(var(--header-height) + var(--space-xl));
        padding-bottom: var(--space-2xl);
    }

    .hero-badge {
        font-size: 0.78rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-cta-group {
        flex-direction: column;
        align-items: center;
    }

    .hero-cta-group .btn {
        width: 100%;
        max-width: 300px;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--space-md);
    }

    .stat-divider {
        width: 40px;
        height: 1px;
    }

    .hero-image {
        max-width: 100%;
    }

    /* VR */
    .vr-worlds-carousel {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Countdown */
    .countdown {
        flex-wrap: wrap;
    }

    .countdown-number {
        font-size: 1.6rem;
        min-width: 50px;
    }

    /* Values */
    .values-grid {
        grid-template-columns: 1fr;
    }

    /* Stats */
    .about-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Team */
    .team-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin: 0 auto;
    }

    .team-photo {
        height: 280px;
    }

    /* Gallery */
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-large,
    .gallery-item:not(.gallery-large) {
        height: 200px;
    }

    .gallery-overlay {
        opacity: 1;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Promo */
    .promo-card {
        padding: var(--space-lg);
    }

    .promo-visual {
        display: none;
    }

    /* Newsletter */
    .newsletter-card {
        padding: var(--space-lg);
    }

    .newsletter-visual {
        display: none;
    }

    /* Leaderboard */
    .leaderboard-table td,
    .leaderboard-table th {
        padding: var(--space-sm);
        font-size: 0.82rem;
    }

    /* Booking form */
    .booking-form-wrapper {
        padding: var(--space-lg);
    }

    /* Contact */
    .contact-form {
        padding: var(--space-lg);
    }
}

/* ============================================
   RESPONSIVE — SMALL MOBILE (max-width: 400px)
   ============================================ */
@media (max-width: 400px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }

    .btn-large {
        padding: 14px 24px;
        font-size: 0.95rem;
    }

    .countdown-number {
        font-size: 1.3rem;
        padding: var(--space-xs) var(--space-sm);
        min-width: 40px;
    }

    .countdown-separator {
        font-size: 1.2rem;
    }
}