/* ═══════════════════════════════════════════════════════════
   HisaabKitaab — Responsive Styles
   Path: /public_html/assets/css/responsive.css
   ═══════════════════════════════════════════════════════════ */

/* ─── Tablet: 768px ─── */
@media (max-width: 768px) {

    h1 { font-size: 2.4rem; }
    h2 { font-size: 1.9rem; }
    h3 { font-size: 1.3rem; }

    /* ─── Navbar Hamburger ─── */
    .nav-toggle {
        display: flex;
    }

    .nav-menu,
    .nav-actions {
        display: none;
    }

    body.nav-open .nav-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(11, 13, 23, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 999;
        padding: 100px 32px 32px;
        gap: 4px;
        animation: fadeIn 0.3s ease;
    }

    body.nav-open .nav-menu a {
        font-size: 1.2rem;
        padding: 14px 20px;
        border-radius: var(--radius-sm);
        color: var(--text);
    }

    body.nav-open .nav-actions {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-card);
        border-top: 1px solid var(--border);
        padding: 20px 32px;
        gap: 12px;
        z-index: 999;
    }

    body.nav-open .nav-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Hamburger X animation */
    body.nav-open .nav-toggle span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    body.nav-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }
    body.nav-open .nav-toggle span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* ─── Hero ─── */
    .hero-section {
        min-height: auto;
        padding: 120px 0 60px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

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

    .hero-heading {
        font-size: 2.6rem;
    }

    .hero-subtext {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

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

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

    .hero-right {
        min-height: 280px;
    }

    .hero-float-card {
        display: none;
    }

    /* ─── Features ─── */
    .features-section {
        padding: 70px 0;
    }

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

    /* ─── Plans ─── */
    .plans-section {
        padding: 70px 0;
    }

    .plans-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    /* ─── Steps ─── */
    .how-section {
        padding: 70px 0;
    }

    .steps-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .steps-grid::before {
        display: none;
    }

    .step-card {
        text-align: center;
    }

    /* ─── CTA ─── */
    .cta-section {
        padding: 70px 0;
    }

    .cta-section h2 {
        font-size: 2rem;
    }

    /* ─── Footer ─── */
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

/* ─── Mobile: 480px ─── */
@media (max-width: 480px) {

    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.15rem; }

    .container {
        padding: 0 16px;
    }

    .nav-inner {
        padding: 0 16px;
    }

    .logo-text {
        font-size: 1.25rem;
    }

    /* ─── Hero ─── */
    .hero-heading {
        font-size: 2rem;
    }

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

    .hero-cta .btn {
        width: 100%;
        min-width: unset;
    }

    .hero-cta {
        flex-direction: column;
        gap: 12px;
    }

    .hero-stats {
        flex-direction: column;
        gap: 20px;
        align-items: center;
        text-align: center;
    }

    .stat-item {
        text-align: center;
    }

    .hero-right {
        min-height: 200px;
    }

    /* ─── Features ─── */
    .features-grid {
        grid-template-columns: 1fr;
    }

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

    /* ─── Plans ─── */
    .plan-card {
        padding: 32px 24px;
    }

    .plan-price {
        font-size: 2.2rem;
    }

    /* ─── CTA ─── */
    .cta-section h2 {
        font-size: 1.6rem;
    }

    .cta-buttons .btn {
        width: 100%;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    /* ─── Footer ─── */
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* ─── Fade-in animation for mobile menu ─── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}