/* ===================================================
   Airtimly — SHARED SITE STYLESHEET
   Base rules below are unchanged from the original
   mobile build. Do not edit without checking mobile.
   =================================================== */

        :root {
            --qard-primary: #202229;
            --qard-secondary: #E9E9EA;
            --qard-background: #FFFFFF;
        }

        * { box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        body {
            margin: 0;
            min-height: 100vh;
            background: var(--qard-background);
            color: var(--qard-primary);
            font-family: Sora, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

        body, button, a, input, textarea, select {
            font-family: Sora, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        a { text-decoration: none; color: inherit; }

        button { border: 0; outline: none; cursor: pointer; }

        img { max-width: 100%; display: block; }

        ::selection { background: var(--qard-primary); color: #fff; }

        /* ==================================================
           MAIN APPLICATION
        ================================================== */

        #app { width: 100%; min-height: 100vh; overflow: clip; }

        #app-content { width: 100%; min-height: 100vh; }

        /* ==================================================
           COMPONENTS
        ================================================== */

        [data-component] { width: 100%; }

        /* ==================================================
           NAVBAR
        ================================================== */

        #navbar {
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            z-index: 9000;
            width: 100%;
            transform: none !important;
            transition: none !important;
        }

        /* ==================================================
           LANDING SECTIONS
        ================================================== */

        .landing-section { position: relative; width: 100%; }

        .landing-container {
            width: 100%;
            max-width: 1180px;
            margin: 0 auto;
            padding-left: 20px;
            padding-right: 20px;
        }

        @media (min-width: 768px) {
            .landing-container { padding-left: 32px; padding-right: 32px; }
        }

        /* ==================================================
           SERVICES STACKING SECTION
        ================================================== */

        #services { position: relative; width: 100%; }

        .services-sticky {
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            width: 100%;
            height: 100svh;
            min-height: 650px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .service-stack { position: relative; width: 100%; height: 100%; }

        .service-card {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            will-change: transform, opacity;
            transform-origin: center center;
        }

        .service-card-inner {
            position: relative;
            width: 100%;
            max-width: 1180px;
            height: min(78vh, 720px);
            overflow: hidden;
            border-radius: 36px;
            background: #fff;
            box-shadow: 0 20px 60px rgba(15, 23, 42, .10);
        }

        .service-card-content {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            padding: 48px;
        }

        @media (max-width: 767px) {
            .services-sticky { min-height: 620px; }
            .service-card { padding: 16px; }
            .service-card-inner { height: calc(100svh - 32px); max-height: 720px; border-radius: 28px; }
            .service-card-content { padding: 28px 22px; }
        }

        /* ==================================================
           SERVICE PROGRESS
        ================================================== */

        .service-progress {
            position: absolute;
            left: 24px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 5000;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .service-progress-dot {
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: rgba(15, 23, 42, .18);
            transition: all .3s ease;
        }

        .service-progress-dot.active { height: 24px; background: var(--qard-primary); }

        @media (max-width: 767px) {
            .service-progress { left: 18px; }
        }

        /* ==================================================
           SCROLL REVEAL
        ================================================== */

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity .7s ease, transform .7s ease;
        }

        .reveal.visible { opacity: 1; transform: translateY(0); }

        /* ==================================================
           FAQ
        ================================================== */

        .faq-answer {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .3s ease;
        }

        .faq-answer > div { overflow: hidden; }

        .faq-item.open .faq-answer { grid-template-rows: 1fr; }

        .faq-icon { transition: transform .3s ease; }

        .faq-item.open .faq-icon { transform: rotate(45deg); }

        /* ==================================================
           HIDE SCROLLBAR
        ================================================== */

        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        .hide-scrollbar::-webkit-scrollbar { display: none; }

        /* ==================================================
           MOBILE / DESKTOP
           (actual switch lives in the DESKTOP LAYOUT LAYER
           below at the 1024px breakpoint — an old 768px
           version used to be defined here too, which fought
           with it and hid both navbars between 768–1023px)
        ================================================== */

        /* ==================================================
           SKELETON LOADING
           (a plain content wireframe shown per-section while
           it fetches, filling in top to bottom — not a list
           of rows, just soft placeholder shapes for a
           heading / text / buttons, or a nav bar)
        ================================================== */

        .qard-skeleton-shimmer {
            background: linear-gradient(
                90deg,
                var(--qard-secondary) 25%,
                #f5f5f6 37%,
                var(--qard-secondary) 63%
            );
            background-size: 400% 100%;
            animation: qard-shimmer 1.6s ease infinite;
            border-radius: 8px;
        }

        @keyframes qard-shimmer {
            0% { background-position: 100% 50%; }
            100% { background-position: 0 50%; }
        }

        /* Content wireframe (hero, stats, services, about,
           how-to-use, cta, reviews, faq, footer, etc.) */

        .qard-skeleton-content {
            width: 100%;
            padding: 56px 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        @media (min-width: 768px) {
            .qard-skeleton-content { padding: 72px 32px; max-width: 620px; margin: 0 auto; align-items: center; text-align: center; }
        }

        .qard-skeleton-eyebrow { width: 110px; height: 12px; border-radius: 999px; margin-bottom: 20px; }

        .qard-skeleton-heading { height: 30px; width: 85%; border-radius: 8px; margin-bottom: 12px; }

        @media (min-width: 768px) { .qard-skeleton-heading { width: 70%; } }

        .qard-skeleton-heading--sm { width: 55%; }

        @media (min-width: 768px) { .qard-skeleton-heading--sm { width: 40%; } }

        .qard-skeleton-text { height: 11px; width: 100%; border-radius: 999px; margin-top: 18px; }

        .qard-skeleton-text + .qard-skeleton-text { margin-top: 10px; width: 82%; }

        .qard-skeleton-actions { display: flex; gap: 12px; margin-top: 28px; }

        .qard-skeleton-btn { width: 132px; height: 44px; border-radius: 12px; }

        .qard-skeleton-btn--ghost { opacity: .45; }

        /* Slim nav wireframe (navbar only) */

        .qard-skeleton-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 16px 20px;
        }

        @media (min-width: 768px) { .qard-skeleton-nav { padding: 18px 32px; } }

        .qard-skeleton-nav-logo { width: 104px; height: 26px; border-radius: 8px; }

        .qard-skeleton-nav-links { display: flex; gap: 22px; }

        .qard-skeleton-nav-link { width: 52px; height: 10px; border-radius: 999px; }

        .qard-skeleton-nav-cta { width: 96px; height: 36px; border-radius: 10px; }

        /* Thin single-bar wireframe (notice) */

        .qard-skeleton-bar-full { width: 100%; height: 30px; border-radius: 0; }

        /* ==================================================
           GLOBAL WARNING BANNER
           (single notice shown if any section fails to load,
           instead of a broken message per section)
        ================================================== */

        #global-warning {
            display: none;
            position: sticky;
            top: 0;
            z-index: 9500;
            width: 100%;
        }

        #global-warning.show { display: block; }

        #global-warning .gw-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
            padding: 12px 20px;
            background: #FEF2F2;
            border-bottom: 1px solid #FECACA;
            color: #B91C1C;
            font-size: 13px;
            font-weight: 600;
        }

        #global-warning .gw-close {
            flex: 0 0 auto;
            background: transparent;
            color: #B91C1C;
            font-size: 18px;
            line-height: 1;
            padding: 2px 6px;
        }



/* ===================================================================
   DESKTOP LAYOUT LAYER
   Everything below only applies at 1024px and up. Nothing here
   changes anything below that width — the mobile build above is
   untouched. Inline styles in the fragment HTML win on mobile by
   default, so these overrides use !important on the properties
   that need to beat them at desktop widths.
=================================================================== */

@media (max-width: 1023px) {
    .desktop-only { display: none !important; }
}

@media (min-width: 1024px) {

    .mobile-only { display: none !important; }

    body { overflow-x: hidden; }

    /* ---------------------------------------------------------
       NAVBAR
       (desktop bar shown/hidden via the .desktop-only /
       .mobile-only helper classes already defined above)
    --------------------------------------------------------- */

    #navbar {
        position: sticky !important;
    }

    /* ---------------------------------------------------------
       SHARED SECTION WIDTH
       Every top-level section content wrapper is centered and
       widened, with generous side padding replacing the mobile
       24px gutters.
    --------------------------------------------------------- */

    #hero > div,
    #stats > div,
    #services > div,
    #cta > div,
    #cta-footer > div,
    #faq > div,
    #reviews > div,
    #footer > div {
        max-width: 1180px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 64px !important;
        padding-right: 64px !important;
        box-sizing: border-box !important;
    }

    /* ---------------------------------------------------------
       HERO
    --------------------------------------------------------- */

    #hero > div {
        padding-top: 220px !important;
        padding-bottom: 130px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 64px !important;
    }

    #hero > div > div:first-child {
        max-width: 640px !important;
        flex: 0 1 560px !important;
    }

    #hero h1 {
        font-size: 76px !important;
        line-height: 0.98 !important;
    }

    #hero p {
        font-size: 21px !important;
        max-width: 520px !important;
    }

    #hero .mt-6 a {
        transform: scale(1.08);
        transform-origin: left center;
    }

    /* Hero image column */
    #hero-image {
        flex: 1 1 440px !important;
        max-width: 480px !important;
    }

    #hero-image img {
        width: 100% !important;
        height: auto !important;
        border-radius: 28px !important;
        display: block !important;
        object-fit: cover !important;
    }

    /* ---------------------------------------------------------
       STATS
    --------------------------------------------------------- */

    #stats > div {
        padding-top: 40px !important;
        padding-bottom: 80px !important;
        text-align: center !important;
    }

    #stats > div > div {
        max-width: 900px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #stats .flex.items-center {
        justify-content: center !important;
    }

    #stats h2 {
        font-size: 52px !important;
        margin-top: 28px !important;
    }

    #stats > div > div > .mt-5 {
        max-width: 760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ---------------------------------------------------------
       SERVICES — 3-column grid on desktop
    --------------------------------------------------------- */

    #services > div {
        padding-top: 90px !important;
        padding-bottom: 100px !important;
    }

    #services h2 {
        font-size: 46px !important;
        max-width: 640px !important;
    }

    #services p {
        font-size: 16px !important;
        max-width: 480px !important;
    }

    #services .mt-6.flex-col.gap-4 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }

    #services .mt-6.flex-col.gap-4 > div {
        min-height: 420px !important;
    }

    #services .mt-6.flex-col.gap-4 > div > div {
        min-height: 420px !important;
    }

    /* ---------------------------------------------------------
       CTA — VIRTUAL / PHYSICAL CARDS
    --------------------------------------------------------- */

    #cta > div {
        padding-top: 70px !important;
        padding-bottom: 90px !important;
    }

    #cta .w-full.flex.items-center.gap-3 {
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #card-heading {
        font-size: 42px !important;
    }

    #card-description {
        font-size: 15px !important;
        max-width: 460px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #benefits-window {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ---------------------------------------------------------
       CTA-FOOTER — download banner
    --------------------------------------------------------- */

    #cta-footer > div {
        padding-top: 90px !important;
        padding-bottom: 90px !important;
    }

    #cta-footer h2 {
        font-size: 46px !important;
    }

    /* ---------------------------------------------------------
       REVIEWS — fixed-width cards instead of full-bleed scroll
    --------------------------------------------------------- */

    #reviews > div {
        padding-top: 70px !important;
        padding-bottom: 90px !important;
    }

    #reviews h2 {
        font-size: 46px !important;
    }

    #reviews-track {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        gap: 24px !important;
    }

    #reviews-track .review-card {
        width: 340px !important;
        min-height: 380px !important;
        flex-shrink: 0 !important;
    }

    /* ---------------------------------------------------------
       FAQ — 2-column grid
    --------------------------------------------------------- */

    #faq > div {
        padding-top: 90px !important;
        padding-bottom: 100px !important;
    }

    #faq h2 {
        font-size: 46px !important;
    }

    #faq .mt-10.flex-col.gap-4 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    /* ---------------------------------------------------------
       FOOTER — brand + 3 link columns side by side
    --------------------------------------------------------- */

    #footer > div {
        padding-top: 70px !important;
        padding-bottom: 50px !important;
    }

    #footer .footer-top {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 56px !important;
    }

    #footer .footer-top > div:first-child {
        flex: 0 0 260px !important;
    }

    #footer .footer-links-grid {
        flex: 1 1 auto !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 32px !important;
        margin-top: 0 !important;
    }

    #footer .talk-to-us-col {
        grid-column: auto !important;
    }

}