
:root{
  --red:#d10b0b; --bright-red:#ef1515; --orange:#f66a00; --yellow:#ffca08;
  --black:#060606; --charcoal:#151515; --white:#fff; --soft:#f6f6f6; --gray:#666;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#151515;background:#fff;line-height:1.45}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.topbar{background:linear-gradient(90deg,#c90000,#ef2c00,#ff9b00);color:#fff}
.topbar .inner{max-width:1380px;margin:auto;padding:8px 18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;font-weight:800}
header{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.12);position:sticky;top:0;z-index:50}
.nav{max-width:1380px;margin:auto;display:grid;grid-template-columns:330px 1fr 290px;align-items:center;gap:18px;padding:8px 18px}
.logo img{width:315px;height:108px;object-fit:contain}
.menu{display:flex;justify-content:center;gap:18px;align-items:center;flex-wrap:wrap;font-weight:900;font-size:13px;text-transform:uppercase}
.menu a:hover{color:var(--red)}
.header-phone{text-align:right}
.header-phone .small{font-size:13px;font-weight:900;text-transform:uppercase}
.header-phone .number{font-size:30px;font-weight:900;color:var(--red);line-height:1.1}
.header-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:7px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:6px;font-weight:900;text-transform:uppercase;border:0;cursor:pointer}
.btn-red{background:linear-gradient(#f52222,#c90000);color:#fff}
.btn-yellow{background:linear-gradient(#ffdc30,#f7b900);color:#111}
.hero{
 background:
 linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.84) 40%,rgba(0,0,0,.58) 68%,rgba(0,0,0,.76) 100%),
 url('agx-hero-technician-van-b2.jpg') center center/cover no-repeat;
 color:#fff;
 border-top:4px solid var(--red);
 border-bottom:4px solid #111;
}
.hero-inner{max-width:1380px;margin:auto;display:grid;grid-template-columns:1.08fr .72fr;gap:32px;padding:50px 22px}
.hero-copy{padding:28px 0}
.hero-copy h1{font-size:62px;line-height:.98;text-transform:uppercase;margin:0 0 8px;letter-spacing:-1.6px}
.hero-copy h2{font-size:35px;text-transform:uppercase;margin:0 0 18px}
.hero-copy h2 span{color:var(--yellow)}
.hero-copy p{font-size:20px;max-width:760px;margin:0 0 20px}
.hero-points{display:flex;gap:20px;flex-wrap:wrap;font-weight:900;margin:20px 0 25px}
.hero-points span::before{content:"✓";color:var(--yellow);margin-right:6px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.quote{background:#fff;color:#111;border:3px solid var(--yellow);border-radius:10px;overflow:hidden;box-shadow:0 12px 35px rgba(0,0,0,.35)}
.quote-head{background:linear-gradient(#e71414,#b60000);color:#fff;text-align:center;padding:11px 16px}
.quote-head h3{font-size:24px;text-transform:uppercase;margin:0}.quote-head p{margin:2px 0 0;font-size:13px}
.quote form{padding:16px}
.quote label{display:block;font-size:12px;font-weight:900;margin:5px 0 3px}
.quote input,.quote select,.quote textarea{width:100%;padding:10px;border:1px solid #ccc;border-radius:4px;font:inherit}
.quote textarea{min-height:65px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:9px}.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.trust{background:#050505;color:#fff}
.trust .inner{max-width:1380px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr)}
.trust div{text-align:center;padding:13px;border-right:1px solid #444;font-weight:900}
.section{padding:48px 20px}.wrap{max-width:1380px;margin:auto}
.title{text-align:center;font-size:34px;text-transform:uppercase;margin:0 0 28px}.title span{color:var(--red)}
.services{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.service{border:1px solid #ddd;border-radius:8px;overflow:hidden;text-align:center;background:#fff;box-shadow:0 5px 16px rgba(0,0,0,.08)}
.service-visual{height:120px;background:linear-gradient(135deg,#111,#464646);display:grid;place-items:center}
.service-icon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff;font-size:30px;border:4px solid #fff}
.service-body{padding:15px 10px 18px}.service-body h3{font-size:15px;text-transform:uppercase;line-height:1.12;margin:0 0 7px}.service-body p{font-size:12.5px;color:#555;margin:0}
.adas{background:linear-gradient(100deg,#050505,#181818);color:#fff}
.adas-inner{max-width:1380px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center;padding:48px 22px}
.adas h2{font-size:38px;text-transform:uppercase;margin:0 0 8px}.adas h2 span{color:var(--yellow)}
.adas p{font-size:17px;color:#e5e5e5}
.adas-box{min-height:290px;border:2px solid #444;border-radius:12px;background:radial-gradient(circle,#4a4a4a,#111 65%);display:grid;place-items:center}
.cal-target{width:250px;height:165px;border:9px solid #777;background:radial-gradient(circle,#fff 0 4px,transparent 5px) 0 0/34px 34px,#222;box-shadow:0 10px 30px #000}
.benefits{background:linear-gradient(90deg,#ce0505,#ff3100,#ff9900);color:#fff}
.benefits .inner{max-width:1380px;margin:auto;display:grid;grid-template-columns:repeat(6,1fr)}
.benefit{padding:22px 14px;text-align:center;border-right:1px solid rgba(255,255,255,.35)}.benefit .i{font-size:30px}.benefit b{display:block;text-transform:uppercase;font-size:14px}.benefit span{font-size:12px}
.bottom{background:#060606;color:#fff}.bottom-inner{max-width:1380px;margin:auto;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:36px;padding:38px 22px}
.bottom h3{color:var(--yellow);text-transform:uppercase;margin-top:0}.areas{columns:2;list-style:none;padding:0;margin:0}.areas li{padding:4px 0;font-size:14px}
.contact p{margin:8px 0}
.final-cta{background:#fff;padding:22px}.final-cta .inner{max-width:1380px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:20px}.final-cta strong{font-size:28px}
footer{background:#fff;border-top:1px solid #ddd;text-align:center;padding:18px;font-size:13px}
.pagehero{background:linear-gradient(100deg,#070707,#421500);color:#fff;border-bottom:5px solid var(--orange);padding:48px 20px}
.pagehero .wrap{max-width:1100px}.pagehero h1{font-size:44px;text-transform:uppercase;margin:0}
.content{max-width:1100px;margin:auto;padding:44px 20px}.content h2{font-size:29px;text-transform:uppercase;margin-top:36px}
.notice{background:#fff3d2;border-left:5px solid var(--orange);padding:16px;margin:25px 0}
.mobile-call{display:none}
@media(max-width:1100px){
 .nav{grid-template-columns:260px 1fr}.logo img{width:250px;height:90px}.header-phone{grid-column:2}.menu{grid-column:1/-1;grid-row:2}
 .hero-inner{grid-template-columns:1fr}.services{grid-template-columns:repeat(3,1fr)}.adas-inner{grid-template-columns:1fr}
 .benefits .inner{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
 .nav{display:flex;flex-wrap:wrap;justify-content:center}.logo img{width:260px;height:auto}.menu{display:none}.header-phone{text-align:center}
 .hero-inner{padding:30px 14px}.hero-copy h1{font-size:40px}.hero-copy h2{font-size:26px}
 .services{grid-template-columns:1fr 1fr}.benefits .inner{grid-template-columns:1fr 1fr}.bottom-inner{grid-template-columns:1fr}
 .trust .inner{grid-template-columns:1fr}.trust div{border-right:0;border-bottom:1px solid #444}
 .f2,.f3{grid-template-columns:1fr}.final-cta .inner{display:block;text-align:center}.final-cta .btn{margin-top:12px}
 .mobile-call{display:block;position:fixed;left:10px;right:10px;bottom:10px;z-index:100;background:var(--red);color:#fff;text-align:center;padding:15px;border-radius:8px;font-weight:900;box-shadow:0 5px 20px rgba(0,0,0,.45)}
}

.adas-photo{width:100%;height:auto;border-radius:12px;display:block;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.adas-box{background:#fff;padding:8px;border-color:#444}
@media(max-width:700px){.adas-box{min-height:auto}}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.blog-card{background:#fff;border:1px solid #ddd;border-radius:9px;padding:22px;box-shadow:0 5px 15px rgba(0,0,0,.06)}
.blog-card h2,.blog-card h3{margin-top:0;line-height:1.2}
.blog-card p{color:#555}
.article-meta{font-size:13px;color:#777;margin-bottom:20px}
.breadcrumb{font-size:13px;color:#ddd;margin-bottom:10px}
.breadcrumb a{text-decoration:underline}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}
