/* KedaiDigi.id - Jasa Pembuatan Website & SEO */
:root {
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --primary-light: #eef2ff;
    --secondary: #0f172a;
    --accent: #06b6d4;
    --green: #10b981;
    --light-bg: #f8fafc;
    --dark-bg: #0f172a;
    --text-dark: #1e293b;
    --text-light: #fff;
    --border: #e2e8f0;
    --grad: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
    --grad-dark: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    --grad-green: linear-gradient(135deg, #6366f1 0%, #10b981 100%);
}
*{box-sizing:border-box;}
*:focus{outline:none!important;box-shadow:none!important;}
body{font-family:'Inter',sans-serif;color:var(--text-dark);background:var(--light-bg);margin:0;}
h1,h2,h3,h4,h5,h6{font-family:'Outfit',sans-serif;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}

/* Top Bar */
.top-bar{background:var(--grad);color:#fff;padding:9px 0;font-size:.82rem;text-align:center;}
.top-bar a{color:#fff!important;font-weight:700;text-decoration:underline;}

/* Navbar */
.agency-navbar{background:rgba(255,255,255,.97);backdrop-filter:blur(12px);box-shadow:0 2px 20px rgba(99,102,241,.08);padding:8px 0;min-height:106px;position:sticky;top:0;z-index:999;transition:padding .3s,min-height .3s,box-shadow .3s;display:flex;align-items:center;}
.agency-navbar>.container,.agency-navbar>.container-fluid{width:100%;}
.agency-navbar.scrolled{padding:4px 0;min-height:76px;box-shadow:0 4px 24px rgba(99,102,241,.13);}
.agency-navbar .nav-link{color:var(--text-dark)!important;font-weight:500;margin:0 6px;transition:color .3s;position:relative;font-size:.92rem;}
.agency-navbar .nav-link:hover,.agency-navbar .nav-link.active{color:var(--primary)!important;}
.agency-navbar .nav-link::after{content:'';position:absolute;width:0;height:2px;background:var(--grad);bottom:-6px;left:0;transition:width .3s;}
.agency-navbar .nav-link:hover::after,.agency-navbar .nav-link.active::after{width:100%;}
.navbar-brand{font-weight:800;font-size:1.5rem;color:var(--secondary)!important;font-family:'Outfit',sans-serif;}
.navbar-brand .accent{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
/* Logo Image in Navbar */
#navLogo{height:90px;width:auto;object-fit:contain;transition:height .3s ease;}
.agency-navbar.scrolled #navLogo{height:64px;}
/* Dark Mode logo */
html.dark-mode #navLogo{filter:brightness(0) invert(1);}
html.dark-mode .agency-navbar{background:rgba(15,23,42,.97)!important;}


/* Buttons */
.btn-primary{background:var(--grad);border:none;border-radius:10px;font-weight:600;color:#fff!important;transition:transform .2s,box-shadow .2s;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(99,102,241,.35);background:var(--grad);color:#fff!important;}
.btn-outline-primary{color:var(--primary);border:2px solid var(--primary);border-radius:10px;font-weight:600;}
.btn-outline-primary:hover{background:var(--grad);border-color:transparent;color:#fff!important;}
.btn-wa{background:#25D366;color:#fff!important;border:none;border-radius:10px;font-weight:600;}
.btn-wa:hover{background:#1fb855;color:#fff!important;transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,211,102,.35);}
.btn-outline-light:hover{background:rgba(255,255,255,.15);border-color:#fff;color:#fff!important;}

/* Hero */
.hero-section{padding:90px 0 70px;background:var(--grad-dark);color:#fff;position:relative;overflow:hidden;}
.hero-section::before{content:'';position:absolute;top:-30%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(99,102,241,.2) 0%,transparent 70%);border-radius:50%;animation:pulse 5s ease-in-out infinite;}
.hero-section::after{content:'';position:absolute;bottom:-20%;left:-5%;width:400px;height:400px;background:radial-gradient(circle,rgba(6,182,212,.15) 0%,transparent 70%);border-radius:50%;animation:pulse 7s ease-in-out infinite reverse;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.2);opacity:1}}
.hero-content{position:relative;z-index:2;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:6px 16px;border-radius:50px;font-size:.82rem;font-weight:600;margin-bottom:20px;backdrop-filter:blur(10px);}
.hero-badge .dot{width:8px;height:8px;background:#10b981;border-radius:50%;animation:blink 1.5s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.hero-title{font-size:3rem;font-weight:800;line-height:1.15;margin-bottom:20px;}
.hero-title .highlight{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-subtitle{font-size:1.1rem;opacity:.85;margin-bottom:32px;line-height:1.75;}
.hero-img{border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.35);position:relative;z-index:2;}
.hero-stats{display:flex;gap:32px;margin-top:36px;}
.hero-stat{text-align:center;flex:1;min-width:80px;}
.hero-stat .num{font-size:2rem;font-weight:800;display:block;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-stat .label{font-size:.78rem;opacity:.7;font-weight:500;}
.floating-card{background:rgba(255,255,255,.1);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:16px 20px;margin-top:16px;display:inline-flex;align-items:center;gap:12px;transition:transform .3s;}
.floating-card:hover{transform:translateY(-5px);}
.floating-card i{font-size:1.5rem;color:#10b981;}
@media(max-width:576px){
    .floating-card{padding:12px 16px;margin-top:12px;}
    .floating-card i{font-size:1.2rem;}
}

/* Section */
.section-title{font-size:2.1rem;font-weight:800;margin-bottom:10px;}
.section-title .highlight{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.section-desc{color:#64748b;max-width:560px;}
.section-label{display:inline-block;background:var(--primary-light);color:var(--primary);padding:4px 14px;border-radius:50px;font-size:.78rem;font-weight:700;letter-spacing:.5px;margin-bottom:12px;text-transform:uppercase;}

/* Feature Cards */
.feature-card{background:#fff;border-radius:20px;padding:32px;text-align:center;border:1px solid var(--border);transition:all .3s;height:100%;position:relative;overflow:hidden;}
.feature-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:var(--grad);transform:scaleX(0);transition:transform .3s;}
.feature-card:hover{transform:translateY(-10px);box-shadow:0 16px 40px rgba(99,102,241,.12);border-color:transparent;}
.feature-card:hover::before{transform:scaleX(1);}
.feature-icon{width:68px;height:68px;background:var(--primary-light);color:var(--primary);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 18px;transition:all .3s;}
.feature-card:hover .feature-icon{background:var(--grad);color:#fff;transform:scale(1.1);}

/* Service Cards */
.service-card{background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--border);transition:all .3s;height:100%;}
.service-card:hover{transform:translateY(-10px);box-shadow:0 20px 50px rgba(99,102,241,.13);border-color:transparent;}
.service-card .service-header{background:var(--grad);padding:28px;position:relative;overflow:hidden;}
.service-card .service-header::after{content:'';position:absolute;top:-20px;right:-20px;width:100px;height:100px;background:rgba(255,255,255,.08);border-radius:50%;}
.service-card .service-icon{width:60px;height:60px;background:rgba(255,255,255,.2);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;}
.service-card .service-body{padding:24px;}
.service-card .service-title{font-size:1.1rem;font-weight:700;margin:0 0 10px;color:#fff;}
.service-card .service-subtitle{color:rgba(255,255,255,.8);font-size:.85rem;}

/* Pricing Cards */
.pricing-card{background:#fff;border-radius:20px;border:2px solid var(--border);padding:36px 28px;text-align:center;transition:all .3s;height:100%;position:relative;overflow:hidden;}
.pricing-card.featured{border-color:var(--primary);box-shadow:0 20px 60px rgba(99,102,241,.2);}
.pricing-card.featured::before{content:'Terpopuler';position:absolute;top:20px;right:-28px;background:var(--grad);color:#fff;padding:4px 40px;font-size:.75rem;font-weight:700;transform:rotate(45deg);}
.pricing-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(99,102,241,.15);border-color:var(--primary);}
.pricing-icon{width:70px;height:70px;background:var(--primary-light);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--primary);margin:0 auto 20px;}
.pricing-card.featured .pricing-icon{background:var(--grad);color:#fff;}
.price-amount{font-size:2.2rem;font-weight:800;color:var(--primary);font-family:'Outfit',sans-serif;}
.price-period{font-size:.85rem;color:#94a3b8;}
.price-features{list-style:none;padding:0;margin:20px 0;text-align:left;}
.price-features li{padding:8px 0;border-bottom:1px solid var(--border);font-size:.88rem;display:flex;align-items:center;gap:8px;}
.price-features li:last-child{border-bottom:none;}
.price-features li i.fa-check{color:var(--green);}
.price-features li i.fa-times{color:#94a3b8;}

/* Portfolio Cards */
.portfolio-card{border-radius:20px;overflow:hidden;position:relative;background:#fff;border:1px solid var(--border);transition:all .3s;height:100%;}
.portfolio-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(99,102,241,.15);}
.portfolio-card .img-wrap{height:220px;overflow:hidden;position:relative;}
.portfolio-card .img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.portfolio-card:hover .img-wrap img{transform:scale(1.08);}
.portfolio-card .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(transparent,rgba(15,23,42,.85));display:flex;align-items:flex-end;padding:20px;opacity:0;transition:opacity .3s;}
.portfolio-card:hover .overlay{opacity:1;}
.portfolio-card .overlay a{color:#fff;background:rgba(255,255,255,.2);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);padding:8px 18px;border-radius:50px;font-size:.8rem;font-weight:600;}
.portfolio-card .portfolio-body{padding:20px;}
.portfolio-tag{display:inline-block;background:var(--primary-light);color:var(--primary);padding:3px 10px;border-radius:50px;font-size:.7rem;font-weight:600;margin-bottom:8px;}

/* Article Cards */
.article-card{background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--border);transition:all .3s;height:100%;}
.article-card:hover{transform:translateY(-8px);box-shadow:0 16px 40px rgba(99,102,241,.12);}
.article-card .img-wrap{height:190px;overflow:hidden;}
.article-card .img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.article-card:hover .img-wrap img{transform:scale(1.06);}
.article-card .body{padding:22px;}
.article-tag{display:inline-block;background:var(--primary-light);color:var(--primary);padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:600;margin-bottom:10px;}
.article-title{font-size:1rem;font-weight:700;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;}
.article-title a:hover{color:var(--primary);}
.article-excerpt{color:#64748b;font-size:.85rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px;}
.article-meta{display:flex;gap:14px;font-size:.75rem;color:#94a3b8;border-top:1px solid var(--border);padding-top:12px;}
.article-meta i{color:var(--primary);margin-right:3px;}

/* Testimonial */
.testimonial-card{background:#fff;border-radius:24px;padding:32px;border:1px solid rgba(99,102,241,.1);transition:all .4s cubic-bezier(0.165, 0.84, 0.44, 1);height:100%;display:flex;flex-direction:column;}
.testimonial-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(99,102,241,.12);border-color:var(--primary);}
.testimonial-card .quote-icon{color:var(--primary);font-size:1.8rem;opacity:.2;}
.stars{color:#fbbf24;font-size:.85rem;margin-bottom:12px;}
.testimonial-text{color:#475569;font-size:.95rem;line-height:1.7;margin-bottom:16px;font-style:italic;flex-grow:1;}
.reviewer-info{display:flex;align-items:center;gap:16px;margin-top:auto;border-top:1px solid rgba(0,0,0,.05);padding-top:20px;}
.reviewer-avatar{width:48px;height:48px;border-radius:12px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;overflow:hidden;font-size:0.9rem;}
.reviewer-avatar img{width:100%;height:100%;object-fit:cover;}
.reviewer-name{font-weight:700;font-size:0.95rem;color:var(--secondary);line-height:1.2;}
.reviewer-role{font-size:0.78rem;color:#64748b;}

/* Sidebar */
.sidebar-widget{background:#fff;border-radius:16px;padding:22px;border:1px solid var(--border);margin-bottom:20px;}
.sidebar-widget h5{font-weight:700;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--primary-light);font-size:1rem;}
.tag-list{display:flex;flex-wrap:wrap;gap:6px;}
.tag-list a{padding:5px 12px;background:var(--light-bg);color:#64748b;border-radius:20px;font-size:.75rem;border:1px solid var(--border);transition:all .2s;}
.tag-list a:hover{background:var(--primary-light);color:var(--primary);border-color:var(--primary);}

/* Page Banner */
.page-banner{background:var(--grad-dark);padding:100px 0 55px;color:#fff;position:relative;overflow:hidden;}
.page-banner::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(99,102,241,.15) 0%,transparent 70%);border-radius:50%;}
.page-banner h1{font-size:2.4rem;font-weight:800;position:relative;z-index:1;}
.page-banner p{opacity:.8;position:relative;z-index:1;}
.breadcrumb-nav{position:relative;z-index:1;}
.breadcrumb-nav a{color:var(--accent);}
.breadcrumb-nav span{color:rgba(255,255,255,.5);}

/* Filter Bar */
.filter-bar{background:#fff;border-radius:16px;padding:16px 20px;border:1px solid var(--border);margin-bottom:24px;}

/* Pagination */
.pagination .page-link{color:var(--primary);border:1px solid var(--border);border-radius:10px!important;margin:0 3px;padding:8px 14px;font-weight:500;}
.pagination .page-link:hover{background:var(--primary-light);border-color:var(--primary);}
.pagination .page-item.active .page-link{background:var(--grad);border-color:transparent;color:#fff;}

/* CTA Section */
.cta-section{background:var(--grad-dark);padding:80px 0;position:relative;overflow:hidden;}
.cta-section::before{content:'';position:absolute;top:-50%;right:-5%;width:500px;height:500px;background:radial-gradient(circle,rgba(99,102,241,.2) 0%,transparent 70%);border-radius:50%;}

/* Footer */
.agency-footer{background:var(--grad-dark);padding-top:56px;padding-bottom:24px;}
.footer-links li{margin-bottom:9px;}
.footer-links a{color:rgba(255,255,255,.6);transition:all .3s;font-size:.88rem;}
.footer-links a:hover{color:var(--accent);padding-left:5px;}
.footer-contact li{color:rgba(255,255,255,.65);font-size:.88rem;}
.social-links a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255,255,255,.08);border-radius:12px;transition:all .3s;color:#fff;}
.social-links a:hover{background:var(--grad);transform:translateY(-4px);}

/* Mobile Bottom Nav - Premium App Style */
.mobile-bottom-nav{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:92%;max-width:450px;background:rgba(255,255,255,.85);backdrop-filter:blur(15px);box-shadow:0 10px 40px rgba(0,0,0,.12);display:flex;justify-content:space-around;align-items:center;padding:12px 0 10px;z-index:1002;border:1px solid rgba(255,255,255,.3);border-radius:24px;transition:all .3s ease-in-out;}
.mobile-bottom-nav .nav-item{display:flex;flex-direction:column;align-items:center;color:#64748b;font-size:.7rem;flex:1;font-weight:600;transition:all .3s;background:none;border:none;cursor:pointer;text-decoration:none;outline:none!important;position:relative;}
.mobile-bottom-nav .nav-item i{font-size:1.25rem;margin-bottom:4px;transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.mobile-bottom-nav .nav-item.active{color:var(--primary);}
.mobile-bottom-nav .nav-item.active i{transform:translateY(-4px);}
.mobile-bottom-nav .nav-item.active::after{content:'';position:absolute;bottom:-6px;width:4px;height:4px;background:var(--primary);border-radius:50%;}
.mobile-bottom-nav .nav-cta{position:relative;top:-30px;margin:0 10px;display:flex;flex-direction:column;align-items:center;background:none;border:none;cursor:pointer;outline:none!important;}
.mobile-bottom-nav .nav-cta .cta-circle{background:var(--grad);width:60px;height:60px;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 12px 30px rgba(99,102,241,.4);border:4px solid #fff;transition:all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.mobile-bottom-nav .nav-cta .cta-circle i{color:#fff;font-size:1.7rem;transition:transform .4s;}
.mobile-bottom-nav .nav-cta.open .cta-circle{background:#ef4444;box-shadow:0 8px 24px rgba(239,68,68,.4);transform:rotate(135deg);}

/* Mobile Popup Menu - Modern Bottom Sheet Style */
.mobile-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,.6);backdrop-filter:blur(4px);z-index:1000;opacity:0;visibility:hidden;transition:all .4s ease;}
.mobile-popup-overlay.open{opacity:1;visibility:visible;}
.mobile-popup-menu{position:fixed;bottom:100px;left:5%;width:90%;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);border-radius:30px;z-index:1001;transform:translateY(120%) scale(.9);transition:all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);box-shadow:0 20px 60px rgba(0,0,0,.2);padding:32px 20px 24px;border:1px solid rgba(255,255,255,.4);}
.mobile-popup-menu.open{transform:translateY(0) scale(1);}
.mobile-popup-menu .popup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.mobile-popup-menu .popup-item{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--text-dark);font-size:.8rem;font-weight:600;padding:16px 8px;border-radius:20px;transition:all .3s;}
.mobile-popup-menu .popup-icon{width:60px;height:60px;border-radius:20px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:10px;transition:all .3s;box-shadow:0 8px 20px rgba(99,102,241,.1);}
.mobile-popup-menu .popup-item:hover .popup-icon{background:var(--grad);color:#fff;transform:translateY(-5px);box-shadow:0 12px 24px rgba(99,102,241,.3);}

/* About Page */
.about-values .value-card{background:#fff;border-radius:20px;padding:32px 24px;text-align:center;border:1px solid var(--border);transition:all .3s;height:100%;}
.about-values .value-card:hover{transform:translateY(-8px);box-shadow:0 16px 40px rgba(99,102,241,.12);}
.about-values .value-icon{width:68px;height:68px;background:var(--primary-light);color:var(--primary);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 18px;transition:all .3s;}
.about-values .value-card:hover .value-icon{background:var(--grad);color:#fff;}

/* Process Steps */
.process-step{text-align:center;position:relative;}
.process-step .step-num{width:56px;height:56px;background:var(--grad);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;margin:0 auto 16px;box-shadow:0 8px 20px rgba(99,102,241,.3);}
.process-step::after{content:'';position:absolute;top:28px;left:60%;width:80%;height:2px;background:var(--border);z-index:0;}
.process-step:last-child::after{display:none;}

/* Tech Stack */
.tech-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:50px;padding:8px 18px;font-size:.82rem;font-weight:600;transition:all .2s;}
.tech-badge:hover{border-color:var(--primary);color:var(--primary);box-shadow:0 4px 12px rgba(99,102,241,.15);}

/* Stats */
.stat-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px 20px;text-align:center;backdrop-filter:blur(10px);}
.stat-card .stat-num{font-size:2.4rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* Dark Mode */
html.dark-mode{color-scheme:dark}
html.dark-mode body{background:#0f172a!important;color:#e2e8f0!important}
html.dark-mode .agency-navbar{background:rgba(30,41,59,.97)!important}
html.dark-mode .agency-navbar .nav-link{color:#cbd5e1!important}
html.dark-mode .dropdown-menu{background:#1e293b!important;border:1px solid #334155!important}
html.dark-mode .dropdown-item{color:#cbd5e1!important}
html.dark-mode .dropdown-item:hover{background:#334155!important;color:#fff!important}
html.dark-mode .card,html.dark-mode .feature-card,html.dark-mode .service-card,html.dark-mode .pricing-card,html.dark-mode .portfolio-card,html.dark-mode .article-card,html.dark-mode .testimonial-card,html.dark-mode .sidebar-widget{background:#1e293b!important;border-color:#334155!important;color:#e2e8f0!important}
html.dark-mode .bg-white{background:#1e293b!important}
html.dark-mode .bg-light{background:#334155!important}
html.dark-mode section,html.dark-mode main{background:#0f172a!important}
html.dark-mode h1,html.dark-mode h2,html.dark-mode h3,html.dark-mode h4,html.dark-mode h5,html.dark-mode h6{color:#f1f5f9!important}
html.dark-mode p,html.dark-mode li{color:#cbd5e1!important}
html.dark-mode .text-muted{color:#94a3b8!important}
html.dark-mode .form-control,html.dark-mode .form-select,html.dark-mode textarea{background:#334155!important;color:#e2e8f0!important;border-color:#475569!important}
html.dark-mode .btn-light{background:#334155!important;color:#e2e8f0!important;border-color:#475569!important}
html.dark-mode .table td,html.dark-mode .table th{color:#e2e8f0!important;border-color:#334155!important}
html.dark-mode .mobile-bottom-nav{background:rgba(30,41,59,.8)!important;border-color:rgba(255,255,255,.1)!important;}
html.dark-mode .mobile-bottom-nav .nav-item{color:#94a3b8!important}
html.dark-mode .mobile-bottom-nav .nav-item.active{color:#818cf8!important}
html.dark-mode .mobile-popup-menu{background:rgba(30,41,59,.9)!important;border-color:rgba(255,255,255,.1)!important;}
html.dark-mode .popup-item{color:#e2e8f0!important}
html.dark-mode .popup-icon{background:#334155!important;color:#818cf8!important}
html.dark-mode .page-link{background:#1e293b!important;border-color:#334155!important;color:#818cf8!important}
html.dark-mode .border{border-color:#334155!important}
html.dark-mode hr{border-color:#334155!important}
html.dark-mode .filter-bar{background:#1e293b!important;border-color:#334155!important}
html.dark-mode .tech-badge{background:#1e293b!important;border-color:#334155!important;color:#cbd5e1!important}

/* Responsive Optimization for High-End Devices */
@media(max-width:991px){
    .hero-title{font-size:2.4rem;line-height:1.2;}
    .hero-section{padding:80px 0 60px;}
    .page-banner{padding:100px 0 60px;}
    .page-banner h1{font-size:2rem;}
    body{padding-bottom:100px;}
    .hero-stats{gap:24px;justify-content:center;}
    .hero-stat .num{font-size:1.8rem;}
}
@media(max-width:576px){
    .hero-title{font-size:2rem;line-height:1.2;margin-bottom:16px;}
    .section-title{font-size:1.75rem;}
    .hero-subtitle{font-size:1rem;margin-bottom:24px;}
    .hero-stats{gap:20px;}
    .stat-card{padding:20px 12px;}
    .stat-card .stat-num{font-size:1.8rem;}
    .feature-card{padding:24px 20px;}
    .btn-lg{padding:12px 24px;font-size:.95rem;}
    /* Prevent content cutting on narrow screens */
    .container{padding-left:20px;padding-right:20px;}
}
/* Safe area for modern bezel-less displays */
@supports(padding: max(0px)) {
    .mobile-bottom-nav {
        bottom: calc(20px + env(safe-area-inset-bottom));
    }
}