/* ============================================================
   Responsive Design - Breakpoints: 1280px, 900px, 600px
   ============================================================ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1280px - Tablet / Small Desktop
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1280px) {
    :root {
        --section-py: 4rem;
        --section-py-lg: 5rem;
    }

    .hero-title {
        font-size: var(--fs-4xl);
    }

    .hero-content {
        gap: var(--sp-8);
    }

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

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

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

    .other-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .section-title h2 {
        font-size: var(--fs-3xl);
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   900px - Mobile Landscape / Tablet Portrait
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 900px) {
    :root {
        --section-py: 3.5rem;
        --container-padding: 1.25rem;
        --header-height: 60px;
    }

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

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

    .mobile-nav {
        display: block;
    }

    .header-cta span {
        display: none;
    }

    .header-cta {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
    }

    /* ─── Hero ─── */
    .hero {
        min-height: auto;
    }

    .hero-content {
        grid-template-columns: 1fr;
        padding: var(--sp-10) 0;
        text-align: center;
    }

    .hero-title {
        font-size: var(--fs-3xl);
    }

    .hero-subtitle {
        font-size: var(--fs-lg);
    }

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

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

    .hero-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-3);
    }

    .hero-card {
        padding: var(--sp-4);
    }

    .hero-card h3 {
        font-size: var(--fs-base);
    }

    .hero-card p {
        font-size: var(--fs-xs);
    }

    .hero-product .hero-title {
        font-size: var(--fs-3xl);
    }

    /* ─── Sections ─── */
    .section-title h2 {
        font-size: var(--fs-2xl);
    }

    .section-title .desc {
        font-size: var(--fs-base);
    }

    /* ─── Product Overview ─── */
    .product-overview-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-4);
    }

    /* ─── Process Steps ─── */
    .process-steps {
        flex-direction: column;
        gap: var(--sp-4);
    }

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

    .process-arrow {
        display: none;
    }

    /* ─── Product Detail ─── */
    .product-detail-grid {
        grid-template-columns: 1fr;
    }

    .product-benefits-list {
        grid-template-columns: 1fr;
    }

    .other-products-grid {
        grid-template-columns: 1fr;
    }

    /* ─── Forms ─── */
    .form-fields {
        grid-template-columns: 1fr;
    }

    .cta-block {
        padding: var(--sp-8) var(--sp-5);
    }

    .cta-block h2 {
        font-size: var(--fs-2xl);
    }

    /* ─── Feature Cards ─── */
    .card-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-4);
    }

    .feature-card {
        padding: var(--sp-6);
    }

    /* ─── Two Column ─── */
    .two-col {
        grid-template-columns: 1fr;
    }

    /* ─── Floating Buttons ─── */
    .floating-btn-label {
        display: none;
    }

    .floating-buttons {
        right: var(--sp-4);
        bottom: var(--sp-5);
    }

    .floating-btn {
        width: 50px;
        height: 50px;
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   600px - Mobile Portrait
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 600px) {
    :root {
        --section-py: 3rem;
        --container-padding: 1rem;
    }

    .hero-content {
        padding: var(--sp-8) 0;
    }

    .hero-title {
        font-size: var(--fs-2xl);
    }

    .hero-subtitle {
        font-size: var(--fs-base);
    }

    .hero-badge {
        font-size: var(--fs-xs);
        padding: var(--sp-1) var(--sp-3);
    }

    .hero-cards {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-2);
    }

    .hero-card {
        padding: var(--sp-3);
    }

    .hero-card-icon {
        width: 40px;
        height: 40px;
        margin-bottom: var(--sp-2);
    }

    .hero-card h3 {
        font-size: var(--fs-sm);
    }

    .hero-card p {
        display: none;
    }

    .hero-card .card-tag {
        font-size: 10px;
        margin-top: var(--sp-2);
    }

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

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

    .hero-feature-tag {
        font-size: var(--fs-xs);
        padding: var(--sp-1) var(--sp-3);
    }

    .hero-product .hero-title {
        font-size: var(--fs-2xl);
    }

    .hero-product .hero-subtitle {
        font-size: var(--fs-base);
    }

    /* ─── Sections ─── */
    .section-title h2 {
        font-size: var(--fs-xl);
    }

    .section-title .subtitle {
        font-size: var(--fs-sm);
    }

    .section-title .desc {
        font-size: var(--fs-sm);
    }

    .divider {
        width: 40px;
    }

    /* ─── Cards ─── */
    .card-grid-4 {
        grid-template-columns: 1fr;
    }

    .product-overview-grid {
        grid-template-columns: 1fr;
    }

    .feature-card {
        padding: var(--sp-5);
    }

    .feature-card-icon {
        width: 56px;
        height: 56px;
    }

    /* ─── CTA Block ─── */
    .cta-block {
        padding: var(--sp-6) var(--sp-4);
        border-radius: var(--radius-xl);
    }

    .cta-block h2 {
        font-size: var(--fs-xl);
    }

    .cta-block p {
        font-size: var(--fs-sm);
    }

    /* ─── Product Page ─── */
    .product-description p {
        font-size: var(--fs-base);
    }

    .info-card {
        padding: var(--sp-4);
    }

    .product-benefits {
        padding: var(--sp-6) var(--sp-4);
    }

    .product-benefit-item {
        padding: var(--sp-3) var(--sp-4);
    }

    /* ─── Footer ─── */
    .footer-disclaimer li,
    .footer-loan-info li {
        font-size: 11px;
    }

    .footer-company-info p {
        font-size: 11px;
    }

    /* ─── Floating ─── */
    .floating-buttons {
        right: var(--sp-3);
        bottom: var(--sp-4);
        gap: var(--sp-2);
    }

    .floating-btn {
        width: 46px;
        height: 46px;
    }

    .floating-btn-top {
        width: 38px;
        height: 38px;
    }

    .floating-btn svg {
        width: 20px;
        height: 20px;
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Landscape Mobile
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (orientation: landscape) and (max-width: 900px) {
    .hero {
        min-height: auto;
    }

    .hero-content {
        padding: var(--sp-6) 0;
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Print Styles
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media print {
    .site-header,
    .floating-buttons,
    .mobile-form-overlay,
    .mobile-nav {
        display: none !important;
    }

    .main-content {
        padding-top: 0;
    }

    .hero {
        background: none;
        color: var(--color-text-dark);
        min-height: auto;
        padding: 20px 0;
    }

    .hero-title,
    .hero-subtitle {
        color: var(--color-text-dark);
    }
}