/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
    .hero .container{grid-template-columns:1fr;gap:40px}
    .services-grid{grid-template-columns:repeat(2,1fr)}
    .projects-grid{grid-template-columns:repeat(2,1fr)}
    .project-card-lg{grid-column:1 / -1;grid-template-columns:1fr 1fr}
    .about-layout,.contact-layout{grid-template-columns:1fr;gap:40px}
    .footer-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
    /* Container & Spacing */
    .container{padding:0 20px}
    
    /* Typography */
    .hero h1{font-size:clamp(32px,8vw,42px);line-height:1.15}
    .hero-desc{font-size:16px}
    .section-intro h2{font-size:clamp(24px,6vw,32px)}
    
    /* Hero */
    .hero{padding:100px 0 50px}
    .hero-actions{flex-direction:column;width:100%;gap:10px}
    .hero-actions .btn{width:100%;justify-content:center;padding:14px 20px;font-size:15px;border-radius:12px}
    .hero-pill{font-size:12px;padding:4px 12px 4px 6px;margin-bottom:20px}
    .pill-dot{width:6px;height:6px}
    .hero h1{margin-bottom:16px}
    .hero-desc{margin-bottom:24px}
    .hero-cards{gap:10px;padding:16px 0;margin-top:24px}
    .hero-card{padding:14px 16px;border-radius:10px}
    .hc-icon{width:36px;height:36px}
    .hc-title{font-size:13px}
    .hc-sub{font-size:12px}
    .hc-badge{font-size:11px;padding:2px 8px}
    
    /* Trust Section */
    .trust{padding:32px 0}
    .trust-logos{gap:20px;font-size:13px}
    
    /* Services */
    .services{padding:64px 0}
    .services-grid{grid-template-columns:1fr;gap:10px}
    .svc-card{padding:22px;border-radius:14px}
    .svc-emoji{font-size:24px;margin-bottom:10px}
    .svc-card h3{font-size:15px}
    .svc-card p{font-size:13px}
    
    /* Stats */
    .stats-banner{padding:40px 0}
    .stats-row{grid-template-columns:repeat(2,1fr);gap:20px}
    .stat-value{font-size:clamp(28px,8vw,34px)}
    .stat-suffix{font-size:clamp(18px,5vw,22px)}
    .stat-desc{font-size:12px}
    
    /* Process */
    .process{padding:64px 0}
    .proc-item{padding:18px 0;gap:14px}
    .proc-num{width:28px;height:28px;font-size:13px}
    .proc-body h3{font-size:15px}
    .proc-body p{font-size:13px;line-height:1.6}
    
    /* Projects */
    .projects{padding:64px 0}
    .projects-grid{grid-template-columns:1fr;gap:10px}
    .project-card{border-radius:14px}
    .project-card-lg{grid-template-columns:1fr;border-radius:14px}
    .project-card-lg .project-img{border-radius:14px 14px 0 0;min-height:180px}
    .project-card-lg .project-info{padding:22px}
    .project-info{padding:18px}
    .project-card h3{font-size:15px}
    .project-card-lg h3{font-size:17px}
    .project-card p{font-size:13px;line-height:1.6}
    
    /* About */
    .about{padding:64px 0}
    .about-layout{gap:32px}
    .about-left h2{font-size:clamp(24px,6vw,30px)}
    .about-left p{font-size:14px}
    .about-checks{grid-template-columns:1fr;gap:8px}
    .check-item{font-size:13px}
    .notion-block{border-radius:14px}
    
    /* Contact */
    .contact{padding:60px 0}
    .contact-layout{gap:32px}
    .contact-left{margin-bottom:0}
    .contact-left h2{margin-bottom:12px}
    .contact-left p{font-size:14px;line-height:1.6}
    .form-row{grid-template-columns:1fr}
    .form-group{gap:8px}
    .form-group label{font-size:13px;font-weight:600}
    .contact-form{gap:18px}
    .contact-form input,.contact-form select,.contact-form textarea{font-size:16px;padding:12px 14px;border-width:1px}
    .contact-form select{padding-right:40px}
    .contact-form textarea{min-height:120px;line-height:1.5}
    
    /* Footer */
    .footer{padding:48px 0 24px}
    .footer-top{flex-direction:column;gap:20px;padding-bottom:28px;margin-bottom:28px}
    .footer-cta{width:100%}
    .footer-email{width:100%;justify-content:center;padding:12px 16px;font-size:15px}
    .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
    .footer-brand{margin-bottom:0}
    .footer-brand p{font-size:13px}
    .footer-col h4{font-size:10px;margin-bottom:12px}
    .footer-col a{font-size:13px;padding:3px 0}
    .footer-bottom{padding-top:16px;font-size:12px;text-align:center}
    
    /* Navigation - Mobile */
    .nav{padding:8px 0}
    .nav-inner{height:44px;border-radius:12px;padding:0 8px 0 14px;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--border)}
    .nav.scrolled{padding:6px 0}
    .nav-right{display:none}
    .nav-links{display:none}
    .menu-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;transition:background .2s;flex-shrink:0}
    .menu-toggle:active{background:rgba(0,0,0,.05)}
    
    /* Slide-in panel */
    .nav-links{
        display:flex;
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        width:min(300px, 80vw);
        background:rgba(255,255,255,.82);
        backdrop-filter:blur(24px) saturate(180%);
        -webkit-backdrop-filter:blur(24px) saturate(180%);
        border-left:1px solid rgba(0,0,0,.06);
        flex-direction:column;
        padding:0;
        gap:0;
        box-shadow:-12px 0 48px rgba(0,0,0,.1);
        z-index:998;
        transform:translateX(100%);
        transition:transform .35s cubic-bezier(.32,.72,0,1),visibility .35s;
        visibility:hidden;
    }
    .nav-links.open{
        transform:translateX(0);
        visibility:visible;
    }
    
    /* Menu header area */
    .nav-links::before{
        content:'Menu';
        display:block;
        padding:40px 24px 16px;
        font-size:11px;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:1.5px;
        color:var(--text-tertiary);
        border-bottom:1px solid rgba(0,0,0,.06);
    }
    
    .nav-links li{padding:0 12px}
    .nav-link{
        padding:13px 14px;
        font-size:15px;
        font-weight:500;
        width:100%;
        text-align:left;
        border-radius:10px;
        transition:background .15s;
        color:var(--text);
        background:transparent;
        box-shadow:none;
    }
    .nav-link:hover,.nav-link:active{background:rgba(0,0,0,.04)}
    .nav-link.active{background:rgba(46,160,67,.08);color:var(--green-dark);font-weight:600;box-shadow:none}
    
    /* Overlay backdrop */
    .nav-overlay{
        display:none;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.35);
        z-index:997;
        opacity:0;
        transition:opacity .3s ease;
        backdrop-filter:blur(6px);
        -webkit-backdrop-filter:blur(6px);
    }
    .nav-overlay.visible{
        display:block;
        opacity:1;
    }
    
    /* CTA inside mobile menu */
    .nav-links.open~.nav-right{display:none}
    .mobile-menu-cta{
        display:block;
        list-style:none;
        margin-top:16px;
        padding:16px 16px 40px;
        border-top:1px solid rgba(0,0,0,.06);
    }
    .mobile-menu-cta .btn{width:100%;justify-content:center;border-radius:10px;font-size:15px;padding:13px 20px}
    
    /* Hide desktop theme toggle on mobile, show mobile version inside slide-in menu */
    #themeToggle{display:none}
    .mobile-theme-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;margin:4px 12px 0;border-radius:10px;background:rgba(0,0,0,.03)}
    .mobile-theme-label{font-size:14px;font-weight:500;color:var(--text-secondary)}
    .theme-toggle-mobile{display:flex;width:40px;height:40px;border-radius:10px}
    
    /* Hamburger z-index */
    .menu-toggle{z-index:1001}
    
    /* Buttons */
    .btn{font-size:15px;padding:12px 20px}
    .btn-lg{font-size:16px;padding:14px 24px}
}

@media(max-width:480px){
    /* Extra small screens */
    .container{padding:0 16px}
    
    /* Hero */
    .hero{padding:90px 0 40px}
    .hero-pill{font-size:12px;padding:5px 14px 5px 8px;margin-bottom:16px}
    .pill-dot{width:7px;height:7px}
    .hero h1{font-size:clamp(28px,9vw,36px);margin-bottom:16px}
    .hero-desc{font-size:15px;margin-bottom:20px;line-height:1.6}
    .hero-actions{gap:10px}
    .hero-cards{gap:10px;padding:16px 0;margin-top:24px}
    
    /* Sections */
    .services,.process,.projects,.about{padding:50px 0}
    .section-intro{margin-bottom:32px}
    .section-intro h2{font-size:clamp(22px,7vw,28px);margin-bottom:10px}
    .section-intro p{font-size:14px;line-height:1.6}
    .section-label{margin-bottom:10px;font-size:11px}
    
    /* Stats */
    .stats-banner{padding:40px 0}
    .stats-row{grid-template-columns:1fr;gap:28px}
    .stat-item{padding:12px 0}
    
    /* Trust */
    .trust{padding:28px 0}
    .trust-logos{gap:16px;font-size:12px}
    
    /* Services */
    .services-grid{gap:10px}
    .svc-card{padding:18px}
    .svc-card h3{font-size:15px;margin-bottom:6px}
    .svc-card p{font-size:13px;line-height:1.6;margin-bottom:12px}
    .svc-emoji{font-size:22px;margin-bottom:10px}
    
    /* Projects */
    .projects-grid{gap:10px}
    .project-card{margin-bottom:0}
    .project-card-lg .project-img{min-height:180px;padding:20px}
    .project-card-lg .project-info{padding:18px}
    .project-info{padding:16px}
    .project-card h3{margin-bottom:6px}
    .project-card p{margin-bottom:10px}
    .project-mockup{max-width:280px}
    .mockup-sm{max-width:220px}
    
    /* Process */
    .proc-item{padding:16px 0;gap:12px}
    .proc-item:hover{padding-left:4px}
    
    /* About */
    .nb-header{padding:14px 16px;font-size:13px}
    .nb-prop{padding:7px 16px;font-size:12px}
    .nb-content{padding:10px 16px}
    .nb-list{padding:6px 0 0 16px}
    
    /* Contact Form */
    .contact{padding:50px 0}
    .contact-layout{gap:24px}
    .contact-left h2{font-size:clamp(20px,6vw,26px);margin-bottom:10px}
    .contact-left p{font-size:14px}
    .contact-form{gap:16px}
    .form-group{gap:6px}
    .form-group label{font-size:12px;font-weight:600}
    .contact-form input,.contact-form select,.contact-form textarea{font-size:16px;padding:11px 13px}
    .contact-form textarea{min-height:100px}
    .btn-full{font-size:15px;padding:13px 20px}
    
    /* Footer */
    .footer{padding:40px 0 20px}
    .footer-top{gap:16px;padding-bottom:24px;margin-bottom:24px}
    .footer-email{font-size:14px;padding:11px 14px}
    .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
    .footer-col:nth-child(3){grid-column:1 / -1}
    .footer-col h4{font-size:10px;margin-bottom:10px}
    .footer-col a{font-size:13px}
    .footer-bottom{font-size:11px}
    
    /* Mobile Menu */
    .nav-inner{height:52px}
    .logo-mark{width:26px;height:26px;font-size:13px}
    .logo-text{font-size:14px}
    .theme-toggle{width:34px;height:34px;right:56px}
}