/* ARGR - Premium Responsive System */

/* ------------------------------------------
   1. TABLET LAYOUTS & SCALING (Under 1200px)
   ------------------------------------------ */
@media (max-width: 1200px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        padding: var(--space-xl) var(--space-lg);
        max-width: 680px; /* Centered narrow stack for elegant reading */
    }

    /* Remove asymmetric offsets for standard stack */
    .card-offline, .card-online, .card-supreme {
        transform: none !important;
        opacity: 1 !important;
    }

    .card-offline:hover, .card-online:hover, .card-supreme:hover {
        transform: translateY(-8px) !important;
    }

    .custom-solution-card {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        padding: var(--space-2xl);
    }

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

    .clarity-panel {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-xl);
    }

    .clarity-header {
        margin-bottom: var(--space-md);
    }

    .clarity-items {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--border-color);
        padding-top: var(--space-xl);
        width: 100%;
    }
}


/* ------------------------------------------
   2. MOBILE LANDSCAPE & SMALL TABLETS (Under 768px)
   ------------------------------------------ */
@media (max-width: 768px) {
    :root {
        --space-section: 5rem;
    }

    .brand-header {
        height: 70px;
    }

    .pricing-hero {
        padding-top: var(--space-section);
        padding-bottom: var(--space-xl);
    }

    .capabilities-grid {
        grid-template-columns: 1fr;
    }

    .footer-container {
        flex-direction: column;
        gap: var(--space-2xl);
    }

    .footer-links-column {
        width: 100%;
        justify-content: space-between;
        gap: var(--space-xl);
    }
}


/* ------------------------------------------
   3. DESIGNED SPECIFICALLY FOR MOBILE DEVICES (Under 480px)
   ------------------------------------------ */
/* Handheld viewports (e.g., 360px, 390px, 430px) */
@media (max-width: 480px) {
    :root {
        --space-section: 4rem;
        --space-2xl: 1.5rem;
        --space-3xl: 2.25rem;
    }

    .pricing-grid {
        padding: var(--space-md);
        gap: var(--space-lg);
    }

    .pricing-card {
        padding: var(--space-xl);
    }

    .header-nav-link {
        padding: var(--space-2xs) var(--space-sm);
        font-size: 0.78125rem;
    }

    .price-amount {
        font-size: 2.75rem; /* Rescaled for small screens */
    }

    .custom-solution-card {
        padding: var(--space-lg);
    }

    .custom-info h2 {
        font-size: 1.75rem;
    }

    .footer-links-column {
        flex-direction: column;
        gap: var(--space-xl);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }
}


/* ------------------------------------------
   4. ULTRA WIDE MONITORS (1920px & Beyond)
   ------------------------------------------ */
@media (min-width: 1920px) {
    :root {
        --grid-size: 80px;
        --space-section: 10rem;
    }

    .pricing-grid {
        max-width: 1600px;
        gap: var(--space-2xl);
    }

    .card-offline {
        transform: translateY(30px);
    }
    
    .card-supreme {
        transform: translateY(-25px);
    }

    .card-supreme:hover {
        transform: translateY(-32px);
    }
    
    .hero-title {
        font-size: 5rem;
    }
}