@media (max-width: 1200px){
    .hero-character{
        height:52%;
    }

    .hero-character-left{
        left:-30px;
    }

    .hero-character-right{
        right:-30px;
    }

    .cinematic-section{
        gap:50px;
        padding:115px 7vw;
    }
}

@media (max-width: 1000px){
    .navbar{
        padding:14px 18px;
        grid-template-columns:1fr auto;
        gap:12px;
    }

    .logo{
        font-size:1.55rem;
        gap:10px;
        min-width:0;
    }

    .logo img{
        width:34px;
        height:34px;
    }

    .nav-links{
        grid-column:1 / -1;
        order:3;
        justify-content:flex-start;
        gap:10px;
        overflow-x:auto;
        overscroll-behavior-x:contain;
        padding:4px 2px 2px;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .nav-links::-webkit-scrollbar{
        display:none;
    }

    .nav-links a{
        flex:0 0 auto;
        padding:8px 12px;
        border-radius:999px;
        background:rgba(255,255,255,.045);
        border:1px solid rgba(255,255,255,.07);
        font-size:.88rem;
        line-height:1;
        white-space:nowrap;
    }

    .nav-btn{
        padding:10px 15px;
        font-size:.86rem;
        white-space:nowrap;
    }

    .hero{
        min-height:100vh;
        padding:168px 16px 80px;
    }

    .hero-card{
        width:min(900px, 100%);
        padding:70px 42px;
        border-radius:30px;
    }

    .hero h1{
        font-size:clamp(3.4rem, 12vw, 6.2rem);
    }

    .hero p{
        font-size:1rem;
        line-height:1.7;
    }

    .hero-character{
        height:56%;
        opacity:.18;
        z-index:2;
    }

    .hero-character-left{
        left:-145px;
    }

    .hero-character-right{
        right:-145px;
    }

    .hero-stats{
        grid-template-columns:1fr;
        gap:16px;
        margin-top:44px;
    }

    .cinematic-section,
    .split-section{
        min-height:auto;
        grid-template-columns:1fr;
        padding:100px 6vw;
    }

    .scene-content.right{
        justify-self:start;
    }

    .scene-number{
        top:50px;
        left:6vw;
    }

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

@media (max-width: 768px){
    .hero{
        padding:120px 14px 70px;
    }

    .hero-card{
        width:100%;
        padding:54px 24px;
    }

    .hero h1{
        letter-spacing:1px;
    }

    .eyebrow{
        font-size:.68rem;
        letter-spacing:2px;
        padding:9px 16px;
    }

    .btn{
        width:100%;
        padding:15px 24px;
    }

    .hero-buttons,
    .scene-actions{
        flex-direction:column;
    }

    .hero-buttons{
        gap:12px;
        margin-top:30px;
    }

    .hero-buttons a,
    .hero-buttons .btn{
        width:100%;
        min-width:0;
        max-width:100%;
        height:auto;
        min-height:54px;
        padding:15px 18px;
        font-size:.98rem;
        text-align:center;
    }

    .page-hero{
        min-height:auto;
        grid-template-columns:1fr;
        gap:34px;
        padding:154px 20px 58px;
    }

    .page-hero::before{
        inset:110px 12px 24px;
        border-radius:26px;
    }

    .page-hero::after{
        right:-120px;
        bottom:10px;
        width:360px;
        height:360px;
        opacity:.45;
    }

    .page-hero > .eyebrow,
    .page-hero > h1,
    .page-hero > p{
        grid-column:1;
    }

    .page-hero h1{
        font-size:clamp(3rem, 14vw, 5.2rem);
        line-height:.92;
        letter-spacing:0;
        margin-bottom:18px;
        overflow-wrap:anywhere;
    }

    .page-hero p{
        font-size:1rem;
        line-height:1.7;
    }

    .page-hero-art{
        grid-column:1;
        grid-row:auto;
        min-height:0;
        height:clamp(230px, 62vw, 430px);
        width:100%;
        max-width:520px;
        justify-self:center;
    }

    .page-hero-art picture,
    .page-hero-art img{
        position:absolute;
        inset:0;
    }

    .scroll-indicator{
        display:none;
    }

    .cinematic-section{
        padding:85px 20px;
    }

    .scene-content h2,
    .final-card h2{
        font-size:clamp(3rem, 13vw, 5rem);
        letter-spacing:0;
        overflow-wrap:anywhere;
    }

    .scene-content p,
    .final-card p,
    .scene-panel p,
    .terminal-lines p,
    .info-card p,
    .feature-list p,
    .highlight-box p,
    .section-header p{
        font-size:1rem;
        line-height:1.68;
    }

    .section{
        width:min(100% - 32px, 1240px);
        padding:76px 0;
    }

    .section-header{
        margin-bottom:36px;
    }

    .section-header h2,
    .highlight-box h2{
        font-size:clamp(2.45rem, 12vw, 4.2rem);
        line-height:1;
        letter-spacing:0;
        overflow-wrap:anywhere;
    }

    .card-grid,
    .feature-list,
    .progress-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .info-card,
    .feature-list div{
        min-height:0;
        padding:24px;
        border-radius:20px;
    }

    .scene-panel,
    .feature-terminal,
    .progress-dashboard,
    .final-card{
        border-radius:26px;
    }

    .scene-panel,
    .final-card{
        padding:42px 24px;
    }

    .terminal-lines{
        padding:30px 22px;
    }

    .quote-cinematic{
        padding:90px 20px;
    }

    .quote-box{
        padding:52px 24px;
        border-radius:26px;
    }

    .quote-box h2{
        font-size:clamp(2.4rem, 10vw, 4rem);
        letter-spacing:0;
    }

    .footer{
        padding:34px 18px;
        text-align:center;
    }

    .footer-links{
        flex-wrap:wrap;
        justify-content:center;
        gap:14px;
    }
}

@media (max-width: 600px){
    .hero-character{
        display:none;
    }

    .hero{
        min-height:100vh;
        padding-top:164px;
    }

    .hero-card{
        padding:46px 20px;
        border-radius:26px;
    }

    .hero h1{
        font-size:clamp(3rem, 18vw, 4.8rem);
        letter-spacing:0;
    }

    .hero p{
        font-size:.96rem;
    }

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

    .highlight-box{
        padding:42px 22px;
        border-radius:24px;
    }

    .quote-bg-word{
        font-size:22vw;
    }

    .scene-number{
        font-size:7rem;
    }

    .bg-grid{
        background-size:55px 55px;
    }
}

@media (max-width: 420px){
    .navbar{
        padding:12px 12px;
    }

    .logo{
        font-size:1.32rem;
    }

    .logo img{
        width:30px;
        height:30px;
    }

    .nav-btn{
        padding:9px 12px;
        font-size:.78rem;
    }

    .nav-links a{
        font-size:.8rem;
        padding:8px 10px;
    }

    .hero-card{
        padding:40px 16px;
    }

    .hero h1{
        font-size:3.2rem;
    }

    .page-hero{
        padding:154px 16px 50px;
    }

    .page-hero h1{
        font-size:clamp(2.55rem, 15vw, 3.65rem);
    }

    .page-hero-art{
        height:230px;
    }

    .hero-stats strong{
        font-size:1.8rem;
    }

    .scroll-top{
        right:16px;
        bottom:16px;
        width:44px;
        height:44px;
    }
}
/* ==========================================
   LARGE SCREEN FIX
========================================== */

@media (min-width: 1400px){

    .hero{
        min-height:100vh;
        padding:120px 20px 70px;
    }

    .hero-card{
        width:min(980px, 68vw);
        padding:64px 58px;
    }

    .hero h1{
        font-size:clamp(5rem, 6.4vw, 7.3rem);
    }

    .hero p{
        font-size:1.05rem;
        max-width:760px;
    }

    .hero-character{
        height:52vh;
        max-height:560px;
    }

    .hero-character-left{
        left:55px;
    }

    .hero-character-right{
        right:55px;
    }
}