/* Reset & Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:#0f172a;line-height:1.6;background:#fff}

/* Animations */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(37,211,102,0.4)}50%{box-shadow:0 0 30px rgba(37,211,102,0.7)}}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}

/* Button System */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;font-size:15px;font-weight:700;border-radius:12px;border:none;cursor:pointer;transition:all 0.2s;font-family:inherit;text-decoration:none}
.btn:active{transform:scale(0.98)}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1da851}
.btn-wa-glow{animation:glow 2s infinite}
.btn-dark{background:#0f172a;color:#fff}
.btn-dark:hover{background:#1e293b}
.btn-outline{background:transparent;border:2px solid #e2e8f0;color:#0f172a}
.btn-outline:hover{border-color:#0f172a;background:#f8fafc}
.btn-green{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}
.btn-green:hover{box-shadow:0 8px 24px rgba(34,197,94,0.35)}
.btn-ghost{background:transparent;color:#64748b;padding:10px 16px}
.btn-ghost:hover{color:#0f172a;background:#f1f5f9}
.btn-lg{padding:18px 36px;font-size:17px;border-radius:14px}
.btn-sm{padding:10px 20px;font-size:13px}
.btn-full{width:100%}
.btn-icon{width:52px;height:52px;padding:0;border-radius:50%}

/* Inputs */
.input{width:100%;padding:14px 16px;font-size:15px;border:2px solid #e2e8f0;border-radius:12px;background:#f8fafc;transition:all 0.2s;font-family:inherit}
.input:focus{outline:none;border-color:#25D366;background:#fff;box-shadow:0 0 0 4px rgba(37,211,102,0.1)}
.input::placeholder{color:#94a3b8}
select.input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
textarea.input{resize:vertical;min-height:120px}

/* Cards */
.card{background:#fff;border:2px solid #e2e8f0;border-radius:16px;transition:all 0.25s}
.card:hover{border-color:#cbd5e1}
.card-highlight{border-color:#25D366;box-shadow:0 0 0 4px rgba(37,211,102,0.1)}
.card-hover:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.08)}

/* Tags */
.tag{display:inline-flex;align-items:center;padding:5px 10px;font-size:11px;font-weight:700;border-radius:6px;letter-spacing:0.3px}
.tag-green{background:#dcfce7;color:#166534}
.tag-red{background:#fee2e2;color:#991b1b}
.tag-blue{background:#dbeafe;color:#1e40af}
.tag-yellow{background:#fef3c7;color:#92400e}
.tag-purple{background:#f3e8ff;color:#7c3aed}
.tag-gray{background:#f1f5f9;color:#475569}

/* Layout */
.container{max-width:1140px;margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section-sm{padding:48px 0}
.section-gray{background:#f8fafc}
.section-dark{background:#0f172a;color:#fff}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
@media(max-width:600px){.section{padding:48px 0}.container{padding:0 16px}}

/* Text */
.text-center{text-align:center}
.text-gray{color:#64748b}
.text-green{color:#16a34a}
.text-sm{font-size:14px}
.text-xs{font-size:12px}
.font-bold{font-weight:700}
.font-black{font-weight:900}

/* Special */
.gradient-text{background:linear-gradient(135deg,#22c55e,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.highlight{background:linear-gradient(120deg,#dcfce7 0%,#dcfce7 100%);background-repeat:no-repeat;background-size:100% 40%;background-position:0 90%}
.shadow-soft{box-shadow:0 4px 24px rgba(0,0,0,0.06)}
.shadow-medium{box-shadow:0 8px 32px rgba(0,0,0,0.1)}
.shadow-strong{box-shadow:0 16px 48px rgba(0,0,0,0.15)}
.live-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;animation:pulse 1.5s infinite}

/* Header */
.site-header{padding:12px 20px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#fff;z-index:50}
.logo-wrap{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo-icon{width:42px;height:42px;background:#0f172a;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:18px}
.logo-text{font-weight:800;font-size:18px;line-height:1.1}
.logo-tagline{font-size:10px;color:#64748b;letter-spacing:1px}
.rating-badge{display:flex;align-items:center;gap:6px;background:#fef3c7;padding:6px 12px;border-radius:100px;font-size:13px}
.header-actions{display:flex;align-items:center;gap:16px}
.viewing-badge{display:flex;align-items:center;gap:6px;font-size:13px}
.viewing-badge span{font-weight:600;color:#16a34a}

/* Top Bar */
.top-bar{background:#dc2626;color:#fff;padding:10px 16px;text-align:center;font-size:14px;font-weight:600}
.countdown-badge{background:rgba(0,0,0,0.2);padding:3px 8px;border-radius:4px;font-variant-numeric:tabular-nums}

/* Footer */
.site-footer{background:#0f172a;color:#94a3b8;padding:48px 20px 100px}
.footer-content{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.footer-brand-icon{width:36px;height:36px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#0f172a;font-weight:900}
.footer-links h4{color:#fff;font-weight:700;margin-bottom:14px}
.footer-links p{font-size:14px;line-height:2.2}
.footer-bottom{max-width:1140px;margin:32px auto 0;padding:24px 0 0;border-top:1px solid #1e293b;font-size:13px;text-align:center}

/* Floating Buttons */
.float-buttons{position:fixed;right:16px;bottom:84px;display:flex;flex-direction:column;gap:10px;z-index:90}

/* Sticky Bottom */
.sticky-bottom{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e2e8f0;padding:12px 16px;display:flex;gap:12px;z-index:100;box-shadow:0 -4px 16px rgba(0,0,0,0.06)}

/* Toast */
.toast{position:fixed;bottom:90px;left:16px;right:16px;max-width:360px;background:#fff;border-radius:16px;padding:14px 18px;box-shadow:0 8px 32px rgba(0,0,0,0.15);z-index:90;display:flex;align-items:center;gap:14px;animation:slideRight 0.4s ease-out;border-left:4px solid #22c55e}
.toast-icon{width:42px;height:42px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.6);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fadeIn 0.2s}
@media(min-width:600px){.modal-overlay{align-items:center;padding:24px}}
.modal{background:#fff;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;animation:slideUp 0.3s ease-out;border-radius:24px 24px 0 0}
@media(min-width:600px){.modal{border-radius:24px}}
.modal-header{padding:20px 24px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#fff;z-index:1}
.modal-body{padding:24px}
.modal-close{width:36px;height:36px;border-radius:50%;border:none;background:#f1f5f9;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.modal-close:hover{background:#e2e8f0}

/* Service Cards */
.service-card{padding:24px 20px;text-align:center;position:relative;cursor:pointer}
.service-card .tag{position:absolute;top:-8px;right:12px}
.service-icon{font-size:36px;margin-bottom:12px}
.service-name{font-weight:700;margin-bottom:4px}
.service-desc{font-size:14px;color:#64748b}

/* Service Option */
.service-opt{display:flex;justify-content:space-between;align-items:center;padding:16px;background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;cursor:pointer;transition:all 0.2s}
.service-opt:hover,.service-opt.selected{border-color:#22c55e;background:#f0fdf4}
.service-opt.selected{position:relative}
.service-opt.selected::after{content:'✓';position:absolute;top:12px;right:12px;width:22px;height:22px;background:#22c55e;color:#fff;border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center}

/* Process Steps */
.process-step{text-align:center}
.process-icon{width:72px;height:72px;margin:0 auto 20px;background:#f0fdf4;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;position:relative}
.process-num{position:absolute;top:-4px;right:-4px;width:26px;height:26px;background:#0f172a;color:#fff;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* Reviews */
.review-card{padding:24px}
.review-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:14px}
.review-avatar{width:48px;height:48px;background:linear-gradient(135deg,#22c55e,#16a34a);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px}
.review-stars{color:#f59e0b;margin-bottom:10px}
.review-text{color:#334155;line-height:1.7;margin-bottom:10px}

/* FAQ */
.faq{border-bottom:1px solid #e2e8f0}
.faq-q{padding:20px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:600}
.faq-q:hover{color:#22c55e}
.faq-icon{width:28px;height:28px;border-radius:50%;background:#f1f5f9;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.faq-icon.open{background:#22c55e;color:#fff;transform:rotate(45deg)}
.faq-a{padding-bottom:20px;color:#64748b;line-height:1.7}

/* Compare Table */
.compare-table{width:100%;border-collapse:collapse}
.compare-table th,.compare-table td{padding:12px 8px;text-align:center;border-bottom:1px solid #e2e8f0;font-size:14px}
.compare-table th{background:#f8fafc;font-weight:700}
.compare-table td:first-child{text-align:left;font-weight:500}
.compare-table .check{color:#22c55e;font-size:18px}
.compare-table .cross{color:#e2e8f0;font-size:18px}

/* Progress Bar */
.progress{display:flex;gap:8px;margin-bottom:24px}
.progress-step{flex:1;height:4px;background:#e2e8f0;border-radius:2px;transition:all 0.3s}
.progress-step.active{background:#22c55e}

/* Area Tag */
.area-tag{display:inline-block;padding:8px 16px;font-size:14px;background:#f8fafc;border-radius:8px;margin:4px}

/* Blog Card */
.blog-card{cursor:pointer}
.blog-card:hover{border-color:#22c55e;box-shadow:0 8px 24px rgba(0,0,0,0.06);transform:translateY(-4px)}
.blog-image{background:#f8fafc;height:160px;display:flex;align-items:center;justify-content:center;font-size:48px}
.blog-content{padding:20px}

/* Job Card */
.job-card{cursor:pointer}
.job-card:hover{border-color:#22c55e;box-shadow:0 8px 24px rgba(0,0,0,0.06)}

/* Responsive Navigation */
.nav-links{display:none}
@media(min-width:900px){.nav-links{display:flex;gap:24px}.nav-links a{color:#64748b;text-decoration:none;font-weight:500;font-size:14px}.nav-links a:hover{color:#0f172a}}
.mobile-menu-btn{display:block;background:none;border:none;font-size:24px;cursor:pointer}
@media(min-width:900px){.mobile-menu-btn{display:none}}

/* Hero Section */
.hero{padding:40px 0 56px;background:linear-gradient(180deg,#f0fdf4 0%,#fff 100%)}
.hero-title{font-size:clamp(32px,5vw,46px);font-weight:900;line-height:1.1;margin-bottom:18px}
.hero-subtitle{font-size:18px;color:#475569;line-height:1.7;margin-bottom:28px}

/* Stats Row */
.stats-row{display:flex;gap:24px;padding:20px;background:#fff;border-radius:16px;border:1px solid #e2e8f0}
.stat-item{text-align:center}
.stat-value{font-size:24px;font-weight:800;color:#0f172a}
.stat-label{font-size:14px;color:#64748b}

/* Trust Points */
.trust-points{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.trust-item{display:flex;align-items:center;gap:8px;font-size:14px}
.trust-item span:first-child{font-size:16px}
.trust-item span:last-child{font-weight:500}

/* Calculator Card */
.calculator-card{padding:0;overflow:hidden}
.calculator-header{background:#0f172a;color:#fff;padding:18px 24px;text-align:center}
.calculator-body{padding:24px}

/* Price Display */
.price-display{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:2px solid #86efac;border-radius:16px;padding:20px;margin-bottom:20px}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.dealer-price{background:#fee2e2;padding:14px;border-radius:10px;text-align:center}
.your-price{background:#dcfce7;padding:14px;border-radius:10px;text-align:center;border:2px solid #22c55e}
.savings-bar{background:#22c55e;color:#fff;padding:12px;border-radius:10px;text-align:center;font-weight:700}

/* Coverage Tags */
.coverage-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:800px;margin:0 auto}

/* Mobile Responsive Fixes */
@media(max-width:768px){
    .trust-points{grid-template-columns:repeat(2,1fr);gap:10px}
    .trust-item{font-size:13px;justify-content:flex-start}
    .trust-item span:first-child{font-size:18px;width:24px;text-align:center}
    
    .stats-row{flex-wrap:wrap;justify-content:center;gap:16px;padding:16px}
    .stat-item{flex:0 0 calc(50% - 8px);min-width:120px}
    .stat-value{font-size:20px}
    .stat-label{font-size:12px}
    
    .hero-title{font-size:28px}
    .hero-subtitle{font-size:16px}
    
    .grid-2,.grid-4{grid-template-columns:1fr}
    
    .calculator-card{margin-top:32px}
    
    .header-actions .btn{padding:10px 16px;font-size:13px}
}

@media(max-width:480px){
    .trust-points{grid-template-columns:1fr 1fr;gap:8px}
    .trust-item{padding:8px 0}
    
    .stats-row{gap:12px;padding:12px}
    .stat-item{flex:0 0 calc(50% - 6px)}
    .stat-value{font-size:18px}
    .stat-label{font-size:11px}
}

/* ===== MOBILE MENU ===== */
.hamburger{display:flex;flex-direction:column;justify-content:space-between;width:24px;height:18px;cursor:pointer}
.hamburger span{display:block;height:2px;width:100%;background:#0f172a;border-radius:2px;transition:all 0.3s}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.mobile-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:998;opacity:0;visibility:hidden;transition:all 0.3s}
.mobile-menu-overlay.active{opacity:1;visibility:visible}

.mobile-menu{position:fixed;top:0;right:-300px;width:300px;height:100vh;background:#fff;z-index:999;transition:right 0.3s ease;display:flex;flex-direction:column;box-shadow:-4px 0 20px rgba(0,0,0,0.1)}
.mobile-menu.active{right:0}

.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e2e8f0}
.mobile-menu-close{width:36px;height:36px;border:none;background:#f1f5f9;border-radius:50%;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center}

.mobile-menu-links{flex:1;overflow-y:auto;padding:16px 0}
.mobile-menu-links a{display:block;padding:14px 24px;color:#0f172a;text-decoration:none;font-weight:500;border-bottom:1px solid #f1f5f9;transition:all 0.2s}
.mobile-menu-links a:hover{background:#f8fafc;color:#22c55e}

.mobile-menu-cta{padding:20px}
.mobile-menu-footer{padding:16px 20px;border-top:1px solid #e2e8f0;background:#f8fafc}

.desktop-only{display:none}
@media(min-width:900px){.desktop-only{display:flex}}
@media(max-width:900px){.header-wa-btn .btn-text{display:none}.header-wa-btn{padding:10px 14px}}

/* ===== WHATSAPP WIDGET ===== */
.wa-widget{position:fixed;bottom:100px;right:20px;z-index:95}

.wa-widget-button{width:60px;height:60px;border-radius:50%;background:#25D366;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,0.4);transition:all 0.3s;position:relative}
.wa-widget-button:hover{transform:scale(1.1);box-shadow:0 6px 30px rgba(37,211,102,0.5)}

.wa-button-badge{position:absolute;top:-4px;right:-4px;width:22px;height:22px;background:#dc2626;color:#fff;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff}

.wa-widget-popup{position:absolute;bottom:75px;right:0;width:320px;background:#fff;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,0.15);opacity:0;visibility:hidden;transform:translateY(20px) scale(0.95);transition:all 0.3s;overflow:hidden}
.wa-widget-popup.active{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

.wa-popup-header{background:#075E54;color:#fff;padding:16px;display:flex;align-items:center;gap:12px}
.wa-popup-avatar{width:44px;height:44px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}
.wa-popup-name{font-weight:600}
.wa-popup-status{font-size:12px;opacity:0.9;display:flex;align-items:center;gap:6px}
.wa-online-dot{width:8px;height:8px;background:#25D366;border-radius:50%}
.wa-popup-close{position:absolute;top:12px;right:12px;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;opacity:0.8}
.wa-popup-close:hover{opacity:1}

.wa-popup-body{padding:16px;background:#e5ddd5;min-height:120px}
.wa-message{background:#fff;padding:12px 14px;border-radius:8px;max-width:85%;box-shadow:0 1px 2px rgba(0,0,0,0.1);position:relative}
.wa-message p{margin:0 0 6px;font-size:14px;line-height:1.5}
.wa-message p:last-of-type{margin-bottom:0}
.wa-message-time{font-size:11px;color:#999;display:block;text-align:right;margin-top:6px}

.wa-popup-footer{padding:12px 16px;background:#f0f0f0}

/* ===== EXIT POPUP ===== */
.exit-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);z-index:1001;display:none;align-items:center;justify-content:center;padding:20px}
.exit-popup-overlay.active{display:flex}

.exit-popup{background:#fff;border-radius:24px;max-width:440px;width:100%;position:relative;animation:scaleIn 0.3s ease-out;overflow:hidden}
.exit-popup-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border:none;background:#f1f5f9;border-radius:50%;font-size:24px;cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center}
.exit-popup-close:hover{background:#e2e8f0}

.exit-popup-content{padding:40px 32px 32px;text-align:center}
.exit-popup-badge{display:inline-block;background:#dc2626;color:#fff;padding:6px 16px;border-radius:100px;font-size:12px;font-weight:700;margin-bottom:20px;animation:pulse 1.5s infinite}
.exit-popup-title{font-size:32px;font-weight:800;margin-bottom:12px}
.exit-popup-subtitle{color:#64748b;margin-bottom:24px}

.exit-popup-offer{background:#f8fafc;border-radius:16px;padding:20px;margin-bottom:24px;text-align:left}
.exit-offer-item{display:flex;align-items:start;gap:14px;padding:12px 0;border-bottom:1px solid #e2e8f0}
.exit-offer-item:last-child{border-bottom:none}
.exit-offer-icon{font-size:24px}
.exit-offer-item strong{display:block;font-weight:600}
.exit-offer-item p{font-size:13px;color:#64748b;margin:2px 0 0}

.exit-popup-timer{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px;font-size:14px;color:#64748b}
.exit-timer{background:#0f172a;color:#fff;padding:6px 14px;border-radius:8px;font-weight:700;font-variant-numeric:tabular-nums}

/* ===== SCROLL ANIMATIONS ===== */
.fade-in{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
.fade-in-left{opacity:0;transform:translateX(-30px);transition:opacity 0.6s ease,transform 0.6s ease}
.fade-in-left.visible{opacity:1;transform:translateX(0)}
.fade-in-right{opacity:0;transform:translateX(30px);transition:opacity 0.6s ease,transform 0.6s ease}
.fade-in-right.visible{opacity:1;transform:translateX(0)}
.scale-in{opacity:0;transform:scale(0.9);transition:opacity 0.5s ease,transform 0.5s ease}
.scale-in.visible{opacity:1;transform:scale(1)}

.delay-1{transition-delay:0.1s}
.delay-2{transition-delay:0.2s}
.delay-3{transition-delay:0.3s}
.delay-4{transition-delay:0.4s}

/* ===== BRAND LOGOS ===== */
.brands-section{padding:48px 0;background:#fff;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0}
.brands-title{text-align:center;font-size:14px;color:#94a3b8;text-transform:uppercase;letter-spacing:2px;margin-bottom:32px}
.brands-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px}
.brand-logo{display:flex;align-items:center;justify-content:center;padding:16px 24px;background:#f8fafc;border-radius:12px;min-width:120px;font-weight:700;font-size:18px;color:#64748b;transition:all 0.3s;border:2px solid transparent}
.brand-logo:hover{border-color:#22c55e;background:#f0fdf4;color:#0f172a;transform:translateY(-2px)}
.brand-logo span{font-size:24px;margin-right:8px}

@media(max-width:768px){
    .brands-grid{gap:16px}
    .brand-logo{padding:12px 16px;min-width:100px;font-size:14px}
    .brand-logo span{font-size:20px}
    .exit-popup-content{padding:32px 20px 24px}
    .exit-popup-title{font-size:24px}
    .wa-widget{bottom:80px;right:16px}
    .wa-widget-popup{width:290px}
}

/* ===== SERVICE PAGES ===== */
.service-hero{padding:60px 0;background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);text-align:center}
.service-hero-content{max-width:700px;margin:0 auto}
.service-hero h1{font-size:42px;font-weight:900;margin:16px 0}
.service-hero-subtitle{font-size:18px;color:#475569;margin-bottom:24px}
.service-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.service-hero-trust{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;font-size:14px;color:#64748b}

.section-title{font-size:32px;font-weight:800;text-align:center;margin-bottom:12px}
.section-subtitle{text-align:center;color:#64748b;margin-bottom:40px}
.container-sm{max-width:720px}

/* Pricing Grid */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pricing-card{background:#fff;border:2px solid #e2e8f0;border-radius:20px;padding:32px;text-align:center;position:relative;transition:all 0.3s}
.pricing-card:hover{border-color:#22c55e;box-shadow:0 12px 40px rgba(0,0,0,0.1)}
.pricing-card-featured{border-color:#22c55e;box-shadow:0 8px 32px rgba(34,197,94,0.15)}
.pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#22c55e;color:#fff;padding:6px 16px;border-radius:100px;font-size:11px;font-weight:700}
.pricing-header h3{font-size:24px;font-weight:700;margin-bottom:4px}
.pricing-header p{color:#64748b;font-size:14px}
.pricing-price{padding:24px 0;border-bottom:1px solid #e2e8f0;margin-bottom:24px}
.price-old{font-size:18px;color:#94a3b8;text-decoration:line-through;display:block}
.price-new{font-size:42px;font-weight:800;color:#22c55e}
.pricing-features{list-style:none;text-align:left;margin-bottom:24px}
.pricing-features li{padding:10px 0;border-bottom:1px solid #f1f5f9;font-size:14px}
.pricing-footer{display:flex;justify-content:center;gap:16px;font-size:13px;color:#64748b;margin-bottom:20px}

/* Services Grid */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service-item{background:#fff;border:2px solid #e2e8f0;border-radius:16px;padding:24px;text-align:center;transition:all 0.3s}
.service-item:hover{border-color:#22c55e;transform:translateY(-4px)}
.service-item-icon{font-size:40px;margin-bottom:12px}
.service-item h3{font-weight:700;margin-bottom:8px}
.service-item p{font-size:14px;color:#64748b;margin-bottom:12px}
.service-item-price{font-size:18px;font-weight:700;color:#22c55e;margin-bottom:16px}

/* Features Grid */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{background:#fff;border:2px solid #e2e8f0;border-radius:16px;padding:28px;text-align:center;transition:all 0.3s}
.feature-card:hover{border-color:#22c55e}
.feature-icon{font-size:40px;margin-bottom:16px}
.feature-card h3{font-weight:700;margin-bottom:8px}
.feature-card p{font-size:14px;color:#64748b}

/* Problems Grid */
.problems-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.problem-item{background:#fff;border-radius:12px;padding:20px;border:1px solid #e2e8f0}
.problem-item h4{font-size:15px;font-weight:600;margin-bottom:6px}
.problem-item p{font-size:13px;color:#64748b}

/* Signs List */
.signs-list{display:flex;flex-direction:column;gap:16px}
.sign-item{display:flex;align-items:start;gap:16px;background:#fff;border:2px solid #e2e8f0;border-radius:12px;padding:20px}
.sign-icon{font-size:28px;flex-shrink:0}
.sign-item h4{font-weight:600;margin-bottom:4px}
.sign-item p{font-size:14px;color:#64748b}

/* Check Grid */
.check-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.check-item{background:#fff;border:2px solid #e2e8f0;border-radius:10px;padding:16px;text-align:center;font-size:14px;font-weight:500}

/* FAQ List */
.faq-list{display:flex;flex-direction:column}

/* Tag Colors for Services */
.tag-red{background:#fee2e2;color:#dc2626}
.tag-purple{background:#f3e8ff;color:#7c3aed}

/* ===== ENHANCED MOBILE RESPONSIVENESS ===== */
@media(max-width:1024px){
    .pricing-grid,.services-grid,.features-grid{grid-template-columns:repeat(2,1fr)}
    .problems-grid,.check-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){
    /* Hero */
    .hero{padding:32px 0 40px}
    .hero-title{font-size:28px}
    .hero-subtitle{font-size:15px}
    
    /* Service Hero */
    .service-hero{padding:40px 0}
    .service-hero h1{font-size:28px}
    .service-hero-subtitle{font-size:15px}
    .service-hero-trust{gap:12px;font-size:12px}
    
    /* Grid layouts */
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important}
    .pricing-grid,.services-grid,.features-grid{grid-template-columns:1fr}
    .problems-grid{grid-template-columns:1fr}
    .check-grid{grid-template-columns:repeat(2,1fr)}
    
    /* Section titles */
    .section-title{font-size:24px}
    .section{padding:48px 0}
    
    /* Pricing cards */
    .pricing-card{padding:24px}
    .price-new{font-size:32px}
    
    /* Header */
    .site-header{padding:10px 16px}
    .logo-text{font-size:16px}
    .logo-tagline{display:none}
    .nav-links{display:none}
    .rating-badge{display:none !important}
    
    /* Top bar */
    .top-bar{font-size:12px;padding:8px 12px}
    
    /* Calculator */
    .calculator-card{margin-top:24px}
    .calculator-header{padding:14px 18px}
    .calculator-body{padding:18px}
    
    /* Trust points */
    .trust-points{grid-template-columns:repeat(2,1fr) !important;gap:8px}
    .trust-item{font-size:12px}
    
    /* Stats row */
    .stats-row{flex-wrap:wrap;padding:16px;gap:0}
    .stat-item{flex:0 0 50%;padding:12px 0;border-bottom:1px solid #e2e8f0}
    .stat-item:nth-child(odd){border-right:1px solid #e2e8f0}
    .stat-item:nth-last-child(-n+2){border-bottom:none}
    .stat-value{font-size:20px}
    .stat-label{font-size:11px}
    
    /* Process steps */
    .process-step{margin-bottom:24px}
    
    /* Review cards */
    .review-card{padding:20px}
    
    /* Footer */
    .footer-content{flex-direction:column;gap:24px}
    .footer-links{text-align:center}
    .site-footer{padding:40px 16px 120px}
    
    /* Floating elements */
    .float-buttons{right:12px;bottom:90px}
    .sticky-bottom{padding:10px 12px}
    .sticky-bottom .btn{padding:12px 16px;font-size:13px}
    
    /* Buttons */
    .btn-lg{padding:14px 24px;font-size:15px}
    
    /* Coverage tags */
    .coverage-tags{gap:8px}
    .coverage-tags .tag{font-size:12px !important;padding:6px 12px !important}
    
    /* Brand logos */
    .brands-grid{gap:12px}
    .brand-logo{padding:10px 14px;min-width:90px;font-size:13px}
    
    /* FAQ */
    .faq-q{font-size:15px;padding:16px 0}
    .faq-a{font-size:14px}
    
    /* Cards */
    .card{border-radius:12px}
    .service-card{padding:20px 16px}
    .service-icon{font-size:28px}
    .service-name{font-size:14px}
    .service-desc{font-size:12px}
}

@media(max-width:480px){
    .container{padding:0 12px}
    
    .hero-title{font-size:24px}
    .service-hero h1{font-size:24px}
    
    .pricing-card{padding:20px}
    .price-new{font-size:28px}
    .pricing-features li{font-size:13px;padding:8px 0}
    
    .service-item{padding:18px}
    .service-item-icon{font-size:32px}
    
    .feature-card{padding:20px}
    .feature-icon{font-size:32px}
    
    .check-grid{grid-template-columns:1fr 1fr;gap:8px}
    .check-item{padding:12px;font-size:12px}
    
    .btn{padding:12px 20px;font-size:14px}
    .btn-lg{padding:14px 20px;font-size:14px}
    
    .service-hero-cta .btn{width:100%}
}

/* Services Main Page Grid */
.services-grid-main{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.service-card-link{text-decoration:none;color:inherit}
.service-card-main{background:#fff;border:2px solid #e2e8f0;border-radius:16px;padding:28px 24px;text-align:center;position:relative;transition:all 0.3s;height:100%}
.service-card-main:hover{border-color:#22c55e;transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,0.1)}
.service-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);color:#fff;padding:5px 14px;border-radius:100px;font-size:10px;font-weight:700;white-space:nowrap}
.service-card-icon{font-size:48px;margin-bottom:16px}
.service-card-main h3{font-size:18px;font-weight:700;margin-bottom:8px}
.service-card-main p{font-size:13px;color:#64748b;margin-bottom:12px;line-height:1.5}
.service-card-price{font-size:16px;font-weight:700;color:#22c55e;margin-bottom:16px}
.service-card-cta{display:inline-block;color:#0f172a;font-size:13px;font-weight:600;padding:8px 16px;background:#f8fafc;border-radius:8px;transition:all 0.2s}
.service-card-main:hover .service-card-cta{background:#22c55e;color:#fff}

@media(max-width:1024px){
    .services-grid-main{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
    .services-grid-main{grid-template-columns:1fr;gap:16px}
    .service-card-main{padding:24px 20px}
    .service-card-icon{font-size:40px}
}

/* Footer Links Styling */
.footer-links a{color:#94a3b8;text-decoration:none;transition:color 0.2s}
.footer-links a:hover{color:#22c55e}
.footer-bottom{text-align:center;padding-top:24px;border-top:1px solid #1e293b;margin-top:32px}

/* Breadcrumbs */
.breadcrumbs{background:#f8fafc;padding:12px 0;border-bottom:1px solid #e2e8f0}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.breadcrumbs li{display:flex;align-items:center;gap:8px}
.breadcrumbs li:not(:last-child)::after{content:"›";color:#94a3b8}
.breadcrumbs a{color:#64748b;text-decoration:none}
.breadcrumbs a:hover{color:#22c55e}
.breadcrumbs li:last-child span{color:#0f172a;font-weight:500}
@media(max-width:768px){.breadcrumbs{padding:10px 0}.breadcrumbs ol{font-size:12px}}

/* FAQ Styles for Service Pages */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
}

.faq-question {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.faq-answer {
    font-size: 14px;
    color: #64748b;
    line-height: 1.7;
}

/* Breadcrumbs Styles */
.breadcrumbs {
    background: #f8fafc;
    padding: 12px 20px;
    font-size: 13px;
    border-bottom: 1px solid #e2e8f0;
}

.breadcrumbs .container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumbs a {
    color: #64748b;
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: #0f172a;
}

.breadcrumbs span {
    color: #94a3b8;
}

.breadcrumbs span:last-child {
    color: #0f172a;
    font-weight: 500;
}

/* Sign Item Styles for Brakes page */
.signs-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sign-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.sign-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.sign-item h4 {
    font-weight: 700;
    margin-bottom: 4px;
    color: #0f172a;
}

.sign-item p {
    font-size: 14px;
    color: #64748b;
}

/* Mobile Responsive for FAQ */
@media (max-width: 768px) {
    .faq-item {
        padding: 16px 18px;
    }
    
    .faq-question {
        font-size: 15px;
    }
    
    .check-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .brands-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .check-grid {
        grid-template-columns: 1fr !important;
    }
    
    .brands-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Updated Brand Logos Styles for Images */
.brands-section {
    padding: 40px 0;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.brands-title {
    text-align: center;
    font-size: 14px;
    color: #64748b;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.brands-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
}

.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}

.brand-logo:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.brand-logo img {
    max-width: 100%;
    height: auto;
    filter: grayscale(0%);
    opacity: 1;
    transition: all 0.2s ease;
}

.brand-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Mobile responsive for brand logos */
@media (max-width: 768px) {
    .brands-grid {
        gap: 16px;
    }
    
    .brand-logo {
        padding: 8px;
    }
    
    .brand-logo img {
        width: 50px !important;
        height: 50px !important;
    }
}

/* Service Icons with Images */
.service-icon img,
.service-card-icon img {
    transition: transform 0.3s ease;
}

.service-card:hover .service-icon img,
.service-card-main:hover .service-card-icon img {
    transform: scale(1.1);
}

.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.service-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* Ensure consistent sizing */
.service-icon img {
    width: 60px;
    height: 60px;
}

.service-card-icon img {
    width: 70px;
    height: 70px;
}

@media (max-width: 768px) {
    .service-icon img {
        width: 50px;
        height: 50px;
    }
    
    .service-card-icon img {
        width: 60px;
        height: 60px;
    }
}