/* =========================================================
   POPUP.AI — GLOBAL RESPONSIVE FOUNDATION
   Desktop · Tablet · Mobile
   ========================================================= */

/* =========================================================
   1. RESPONSIVE VARIABLES
   ========================================================= */

:root{
    --popup-safe-top:
        max(16px, env(safe-area-inset-top));

    --popup-safe-right:
        max(16px, env(safe-area-inset-right));

    --popup-safe-bottom:
        max(16px, env(safe-area-inset-bottom));

    --popup-safe-left:
        max(16px, env(safe-area-inset-left));

    --popup-mobile-gutter:20px;
    --popup-tablet-gutter:28px;
    --popup-desktop-gutter:40px;

    --popup-mobile-header-height:68px;
    --popup-tablet-header-height:76px;

    --popup-content-width:1440px;
}


/* =========================================================
   2. GLOBAL BOX MODEL
   ========================================================= */

html{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body{
    width:100%;
    min-width:0;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

img,
video,
canvas,
svg,
iframe{
    max-width:100%;
}

img,
svg{
    height:auto;
}

button,
input,
textarea,
select{
    max-width:100%;
}

button,
a{
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}


/* =========================================================
   3. SAFE WIDTH PROTECTION
   ========================================================= */

main,
section,
header,
footer,
nav,
article,
aside,
div{
    min-width:0;
}

pre,
code{
    max-width:100%;
    overflow-x:auto;
}

table{
    max-width:100%;
}

.popup-responsive-table,
.table-responsive{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}


/* =========================================================
   4. GLOBAL CONTAINER HELPERS
   ========================================================= */

.popup-container{
    width:min(
        var(--popup-content-width),
        calc(100% - 80px)
    );

    margin-inline:auto;
}

.popup-page{
    width:100%;
    min-height:100dvh;
}

.popup-section{
    width:100%;
}


/* =========================================================
   5. BACKGROUND VIDEO FOUNDATION
   ========================================================= */

#bg-video,
.bg-video,
.gate-bg-video{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center;
    pointer-events:none;
    transform:translateZ(0);
    backface-visibility:hidden;
}


/* =========================================================
   6. FORM FOUNDATION
   ========================================================= */

input,
textarea,
select{
    font-size:16px;
}

/*
 Prevents automatic zoom when focusing form fields
 on mobile Safari and some Android browsers.
*/

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select{
    min-height:48px;
}

textarea{
    resize:vertical;
}


/* =========================================================
   7. BUTTON FOUNDATION
   ========================================================= */

button,
.btn,
.plan-btn,
.nav-btn,
.btn-launch,
.gate-button,
.choose-orbit{
    min-height:46px;
}

button:disabled{
    cursor:not-allowed;
}


/* =========================================================
   8. FLOATING ACCESS FOUNDATION
   ========================================================= */

.lumia-floating-access{
    max-width:calc(
        100vw -
        var(--popup-safe-left) -
        var(--popup-safe-right)
    );
}


/* =========================================================
   9. TABLET
   768px — 1199px
   ========================================================= */

@media
(min-width:768px)
and
(max-width:1199px){

    body{
        overflow-x:hidden;
        overflow-y:auto;
    }

    .popup-container{
        width:calc(
            100% -
            (var(--popup-tablet-gutter) * 2)
        );
    }

    main{
        max-width:100%;
    }

    header{
        max-width:100%;
    }

    nav{
        max-width:100%;
    }

    .page,
    .hero,
    .content,
    .main-content{
        max-width:100%;
    }

    .grid,
    .cards-grid,
    .plan-grid{
        min-width:0;
    }

    .title,
    .title-main,
    .hero-title{
        overflow-wrap:anywhere;
    }

    .lumia-floating-access{
        right:var(--popup-tablet-gutter);
        bottom:calc(
            var(--popup-safe-bottom) + 8px
        );
    }

    #bg-video,
    .bg-video,
    .gate-bg-video{
        transform:none;
    }
}


/* =========================================================
   10. MOBILE
   0px — 767px
   ========================================================= */

@media (max-width:767px){

    html{
        scroll-behavior:auto;
    }

    body{
        width:100%;
        min-height:100dvh;
        overflow-x:hidden !important;
        overflow-y:auto !important;
    }

    .popup-container{
        width:calc(
            100% -
            (var(--popup-mobile-gutter) * 2)
        );
    }

    main{
        width:100%;
        min-height:auto;
        max-width:100%;
    }

    section{
        width:100%;
        max-width:100%;
    }

    /* -----------------------------------------
       Header
       ----------------------------------------- */

    header{
        width:100%;
        max-width:100vw;
        padding-left:
            var(--popup-mobile-gutter);

        padding-right:
            var(--popup-mobile-gutter);
    }

    header img,
    .site-logo img,
    .brand-logo img{
        max-width:min(42vw,180px);
        height:auto;
    }

    nav{
        max-width:100%;
    }

    nav ul{
        max-width:100%;
    }

    /*
    Horizontal navigation remains usable
    without forcing all legacy headers
    into a hamburger system.
    */

    .category-nav,
    .nav-scroll,
    .horizontal-nav,
    .tabs,
    .category-tabs{
        width:100%;
        max-width:100%;
        overflow-x:auto;
        overflow-y:hidden;
        white-space:nowrap;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .category-nav::-webkit-scrollbar,
    .nav-scroll::-webkit-scrollbar,
    .horizontal-nav::-webkit-scrollbar,
    .tabs::-webkit-scrollbar,
    .category-tabs::-webkit-scrollbar{
        display:none;
    }

    /* -----------------------------------------
       Hero
       ----------------------------------------- */

    .hero,
    .hero-section,
    .hero-content{
        width:100%;
        max-width:100%;
    }

    .hero{
        padding-left:
            var(--popup-mobile-gutter);

        padding-right:
            var(--popup-mobile-gutter);
    }

    .hero-content{
        grid-template-columns:1fr !important;
    }

    .title,
    .title-main,
    .hero-title{
        max-width:100%;
        overflow-wrap:anywhere;
        word-break:normal;
        hyphens:auto;
    }

    h1,
    .title,
    .title-main,
    .hero-title{
        font-size:clamp(
            38px,
            12vw,
            68px
        );
    }

    h2{
        font-size:clamp(
            26px,
            8vw,
            42px
        );
    }

    h3{
        font-size:clamp(
            20px,
            6vw,
            30px
        );
    }

    p,
    .desc,
    .plan-desc{
        max-width:100%;
        overflow-wrap:break-word;
    }

    /* -----------------------------------------
       Grid and Cards
       ----------------------------------------- */

    .grid,
    .cards-grid,
    .plan-grid,
    .hero-grid,
    .compare-grid{
        grid-template-columns:1fr !important;
    }

    .card,
    .plan-card,
    .orbit-card,
    .glass-card{
        width:100%;
        max-width:100%;
    }

    .plan-card{
        min-height:auto !important;
    }

    /* -----------------------------------------
       Buttons
       ----------------------------------------- */

    button,
    .btn,
    .plan-btn,
    .btn-launch,
    .gate-button,
    .choose-orbit{
        min-height:50px;
    }

    .btn-launch,
    .gate-button,
    .choose-orbit{
        width:100%;
        max-width:360px;
    }

    /* -----------------------------------------
       Forms
       ----------------------------------------- */

    form{
        width:100%;
        max-width:100%;
    }

    input,
    textarea,
    select,
    .gate-input{
        width:100%;
        max-width:100%;
    }

    /* -----------------------------------------
       Footer
       ----------------------------------------- */

    footer{
        width:100%;
        max-width:100%;
        padding-left:
            var(--popup-mobile-gutter);

        padding-right:
            var(--popup-mobile-gutter);

        text-align:center;
    }

    /* -----------------------------------------
       Background Video
       Keep visual identity, reduce unnecessary
       mobile rendering transformations.
       ----------------------------------------- */

    #bg-video,
    .bg-video,
    .gate-bg-video{
        width:100vw;
        height:100dvh;
        min-height:100%;
        object-fit:cover;
        transform:none !important;
        backface-visibility:hidden;
    }

    /* -----------------------------------------
       Fixed and Fullscreen Layers
       ----------------------------------------- */

    .fullscreen,
    .full-screen,
    .viewport-screen{
        min-height:100dvh;
    }

    /* -----------------------------------------
       Modal
       ----------------------------------------- */

    .modal,
    .dialog,
    .popup-modal{
        max-width:calc(
            100vw -
            (var(--popup-mobile-gutter) * 2)
        );

        max-height:calc(
            100dvh -
            var(--popup-safe-top) -
            var(--popup-safe-bottom) -
            24px
        );

        overflow-y:auto;
    }
}


/* =========================================================
   11. SMALL MOBILE
   0px — 479px
   ========================================================= */

@media (max-width:479px){

    :root{
        --popup-mobile-gutter:16px;
    }

    h1,
    .title,
    .title-main,
    .hero-title{
        font-size:clamp(
            34px,
            13vw,
            56px
        );
    }

    .hero{
        padding-left:16px;
        padding-right:16px;
    }

    .lumia-floating-access{
        width:52px;
        min-width:52px;
        padding:7px;
        justify-content:center;
    }

    .lumia-floating-label{
        display:none;
    }

    .lumia-floating-core{
        width:38px;
        height:38px;
    }

    footer{
        padding-left:16px;
        padding-right:16px;
    }
}


/* =========================================================
   12. LANDSCAPE MOBILE
   ========================================================= */

@media
(max-width:920px)
and
(orientation:landscape){

    body{
        overflow-y:auto !important;
    }

    main{
        min-height:auto;
    }

    .hero{
        min-height:auto;
    }

    .lumia-floating-access{
        bottom:12px;
    }
}


/* =========================================================
   13. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}


/* =========================================================
   14. TOUCH DEVICE PERFORMANCE
   ========================================================= */

@media (hover:none) and (pointer:coarse){

    button:hover,
    a:hover,
    .card:hover,
    .plan-card:hover{
        transform:none;
    }
}