/* ========================================
   RESPONSIVE - GRID
   ======================================== */
@media (min-width: 601px) and (max-width: 1024px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (min-width: 1025px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* ========================================
   RESPONSIVE - HERO & SECTION SIZING
   ======================================== */
@media (min-width: 601px) and (max-width: 1024px) {
    .hero {
        padding: 64px 40px 48px;
    }
    .hero h1 {
        font-size: 48px;
    }
    .hero p {
        font-size: 20px;
    }
    .hero-stats {
        gap: 24px;
    }
    .hero-stat .number {
        font-size: 32px;
    }
    .section {
        padding: 36px 40px;
    }
    .cta {
        padding: 48px 40px;
    }
    .cta h2 {
        font-size: 34px;
    }
    .header {
        padding: 20px 40px;
    }
}

@media (min-width: 1025px) {
    .hero {
        padding: 80px 60px 56px;
    }
    .hero h1 {
        font-size: 58px;
    }
    .hero p {
        font-size: 22px;
    }
    .hero-stats {
        gap: 40px;
    }
    .hero-stat .number {
        font-size: 36px;
    }
    .section {
        padding: 48px 60px;
    }
    .cta {
        padding: 60px 60px;
    }
    .cta h2 {
        font-size: 40px;
    }
    .header {
        padding: 24px 60px;
    }
    .hero-buttons {
        flex-direction: row;
        max-width: 600px;
    }
    .btn {
        width: auto;
        padding: 16px 36px;
    }
}

/* ========================================
   RESPONSIVE - MOBILE NAV
   ======================================== */
@media (max-width: 480px) {
    :root {
        --sidebar-width: 48px;
    }
    body {
        padding-left: var(--sidebar-width);
    }
    .sidebar {
        width: var(--sidebar-width);
        padding: 12px 0 8px;
    }
    .sidebar-brand {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .sidebar-nav .nav-item,
    .sidebar-bottom .nav-item {
        padding: 8px 0;
    }
    .sidebar-nav .nav-item i {
        font-size: 16px;
    }
    .sidebar-bottom .nav-item i {
        font-size: 15px;
    }
    .sidebar-nav .nav-item span,
    .sidebar-bottom .nav-item span {
        font-size: 7px;
    }
    .sidebar-nav .nav-item .tooltip,
    .sidebar-bottom .nav-item .tooltip {
        display: none;
    }

    .hero {
        padding: 32px 16px 24px;
    }
    .hero h1 {
        font-size: 28px;
    }
    .hero p {
        font-size: 16px;
    }
    .hero-stats {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }
    .hero-stat .number {
        font-size: 24px;
    }
    .section {
        padding: 20px 16px;
    }
    .cta {
        padding: 28px 16px;
    }
    .cta h2 {
        font-size: 24px;
    }
    .header {
        padding: 12px 16px;
    }
    .header-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    .header-privacy span {
        display: none;
    }
    .header-privacy {
        padding: 4px 10px;
        font-size: 9px;
    }
    .header-privacy i {
        font-size: 14px;
    }
    .modal-header h2 {
        font-size: 18px;
    }
    .modal-body {
        font-size: 15px;
    }
    .modal-body h3 {
        font-size: 18px;
    }
    .btn {
        font-size: 15px;
        padding: 12px 18px;
    }
    .card {
        padding: 16px;
    }
    .card h3 {
        font-size: 16px;
    }
    .card p {
        font-size: 14px;
    }
    .card-skill {
        padding: 18px 14px;
    }
    .card-skill .icon {
        font-size: 28px;
    }
    .card-faq {
        padding: 14px 16px;
    }
    .card-faq .question {
        font-size: 15px;
    }
    .modal-related .related-grid {
        grid-template-columns: 1fr;
    }
    .ai-content .ai-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 360px) {
    :root {
        --sidebar-width: 40px;
    }
    body {
        padding-left: var(--sidebar-width);
    }
    .sidebar {
        width: var(--sidebar-width);
        padding: 8px 0 6px;
    }
    .sidebar-brand {
        font-size: 13px;
        margin-bottom: 8px;
    }
    .sidebar-nav .nav-item,
    .sidebar-bottom .nav-item {
        padding: 6px 0;
    }
    .sidebar-nav .nav-item i {
        font-size: 14px;
    }
    .sidebar-bottom .nav-item i {
        font-size: 13px;
    }
    .sidebar-nav .nav-item span,
    .sidebar-bottom .nav-item span {
        display: none;
    }

    .hero h1 {
        font-size: 24px;
    }
    .hero-stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .hero-stat .number {
        font-size: 22px;
    }
    .modal-body {
        font-size: 14px;
    }
    .modal-body h3 {
        font-size: 16px;
    }
    .btn {
        font-size: 14px;
        padding: 10px 16px;
    }
    .form-disclaimer {
        font-size: 12px;
    }
    .modal-related .related-item {
        font-size: 13px;
        padding: 8px 12px;
    }
}