/* =============================================
   VERTEX RP — Responsive Breakpoints
   ============================================= */

@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .stat-item:nth-child(2)::after {
        display: none;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .about-text .section-label { justify-content: center; }
    .about-text .section-title { text-align: center; }
    .about-text > p { text-align: center; }
    .about-list { align-items: center; }
    .about-text { display: flex; flex-direction: column; align-items: center; }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 90px;
    }

    section {
        padding: var(--section-padding) 20px;
    }

    /* Navbar mobile */
    .navbar {
        padding: 0 20px;
    }

    .nav-links {
        display: none;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: rgba(8, 11, 16, 0.97);
        backdrop-filter: blur(24px);
        flex-direction: column;
        padding: 20px;
        border-bottom: 1px solid var(--border-default);
        gap: 4px;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        padding: 14px 16px;
        font-size: 0.95rem;
    }

    .hamburger {
        display: flex;
    }

    .nav-cta {
        display: none;
    }

    /* Hero */
    .hero-title {
        letter-spacing: -1px;
    }

    /* Features */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .feature-card {
        padding: 28px 24px;
    }

    /* Stats */
    .stats {
        padding: 70px 20px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-item {
        padding: 24px 12px;
    }

    .stat-item:not(:last-child)::after {
        display: none;
    }

    /* Rules */
    .rule-item {
        padding: 18px 20px;
    }

    .rule-content p {
        padding-left: 0;
    }

    /* Footer */
    .footer {
        padding: 36px 20px 24px;
    }

    .footer-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-links {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .cta-actions {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .cta-actions .btn-primary,
    .cta-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}