/*
Theme Name: Safer Drive
Theme URI: https://saferdrive.co.za/
Author: Safer Drive
Description: Custom responsive WordPress theme for Safer Drive.
Version: 1.0.0
Requires at least: 6.0
*/
:root{--navy:#06131f;--navy2:#0b2233;--orange:#ff642b;--orange2:#ff8a52;--white:#f8fafc;--muted:#aebcc6;--line:rgba(255,255,255,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--navy);color:var(--white);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.container{max-width:1180px;margin:auto;padding:0 24px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(6,19,31,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{font-size:23px;font-weight:900;letter-spacing:-.6px}.brand span{color:var(--orange)}.tag{display:block;color:#aebcc6;font-size:9px;letter-spacing:.4px;font-weight:600;margin-top:-4px}.menu{display:flex;gap:24px;align-items:center;font-size:13px;font-weight:750}.menu a:hover,.current-menu-item a{color:var(--orange)}.menu-toggle{display:none;background:none;border:1px solid var(--line);color:#fff;padding:9px;border-radius:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:9px;background:var(--orange);color:#111;font-weight:850;border:1px solid transparent}.btn:hover{background:var(--orange2)}.btn.alt{background:transparent;color:#fff;border-color:var(--orange)}
.hero{min-height:680px;display:flex;align-items:center;background:radial-gradient(circle at 76% 42%,rgba(255,100,43,.2),transparent 28%),linear-gradient(120deg,#06131f 20%,#0a2435 100%);position:relative;overflow:hidden}.hero:after{content:"";position:absolute;right:-100px;bottom:-150px;width:720px;height:500px;background:radial-gradient(ellipse,rgba(255,100,43,.16),transparent 62%);pointer-events:none}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.eyebrow{font-size:12px;color:var(--orange2);letter-spacing:2px;text-transform:uppercase;font-weight:900}.hero h1{font-size:clamp(44px,6vw,72px);line-height:1.02;letter-spacing:-3px;margin:16px 0 20px}.hero h1 span{color:var(--orange)}.hero p{font-size:18px;color:var(--muted);max-width:650px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.radar{height:450px;position:relative;display:flex;align-items:center;justify-content:center}.ring{position:absolute;border:2px solid rgba(255,100,43,.8);border-radius:50%;width:390px;height:390px;box-shadow:0 0 0 50px rgba(255,100,43,.04),0 0 0 100px rgba(255,100,43,.025)}.alert{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#ff5d45,#bd2636);font-size:38px;box-shadow:0 0 35px rgba(255,60,50,.35);z-index:2}.radius{position:absolute;bottom:15px;font-size:16px;font-weight:900;letter-spacing:1px}.car{position:absolute;font-size:44px;filter:drop-shadow(0 10px 15px rgba(0,0,0,.4));z-index:3}.c1{top:42px;left:28px}.c2{top:62px;right:25px}.c3{bottom:65px;left:80px}.c4{bottom:45px;right:75px}
section{padding:88px 0}.light{background:#f5f7f9;color:#0a1a28}.section-title{text-align:center;max-width:760px;margin:0 auto 45px}.section-title h2{font-size:40px;line-height:1.1;margin:10px 0}.section-title p{color:#687985;font-size:17px}.eyebrow.dark{color:#e94f1f}.steps,.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.step,.card{padding:28px;border:1px solid var(--line);border-radius:18px;background:#0b2030}.light .step,.light .card{background:#fff;border-color:#e3e8ec}.number{display:inline-flex;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;background:var(--orange);color:#111;font-weight:900}.step h3,.card h3{font-size:21px;margin:15px 0 7px}.step p,.card p{color:var(--muted)}.light .step p,.light .card p{color:#657783}
.feature{background:#071723}.feature-grid{display:grid;grid-template-columns:1fr 300px 1fr;gap:35px;align-items:center}.feature h2{font-size:38px;line-height:1.1}.feature-list{display:grid;gap:18px}.feature-item{display:flex;gap:14px}.feature-icon{min-width:42px;height:42px;border-radius:50%;background:var(--orange);color:#111;display:flex;align-items:center;justify-content:center;font-weight:900}.phone{width:280px;height:540px;border:8px solid #1a3344;border-radius:38px;background:#0a1d2c;margin:auto;padding:20px;box-shadow:0 25px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;justify-content:space-between}.phone-title{font-weight:900}.panic{width:145px;height:145px;border-radius:50%;background:#d82d39;display:flex;align-items:center;justify-content:center;margin:20px auto;font-weight:900;box-shadow:0 0 0 14px rgba(216,45,57,.12)}
.band{background:linear-gradient(100deg,#ff642b,#df354b);color:#111;border-radius:24px;padding:50px}.band h2{font-size:38px;line-height:1.1;margin:0 0 10px}.band p{max-width:760px}.band .btn{background:#111;color:#fff;margin-top:10px}
.page-hero{padding:80px 0 60px;background:linear-gradient(120deg,#071520,#0c293b)}.page-hero h1{font-size:52px;line-height:1.05;margin:10px 0}.page-hero p{color:var(--muted);max-width:760px;font-size:18px}.content{max-width:900px;margin:auto}.content h2{font-size:32px}.content p,.content li{color:#b6c3cb}.faq{max-width:900px;margin:auto}.faq details{border-bottom:1px solid var(--line);padding:20px 0}.faq summary{cursor:pointer;font-weight:800;font-size:18px}.contact-box{max-width:760px;margin:auto;text-align:center;background:#0c2333;padding:45px;border:1px solid var(--line);border-radius:20px}.contact-email{display:inline-block;color:var(--orange2);font-size:22px;font-weight:850;margin:15px 0}
footer{border-top:1px solid var(--line);padding:32px 0;color:#8ea1ae;font-size:13px}.footer-grid{display:flex;justify-content:space-between;gap:30px}.footer-brand{color:#fff;font-weight:900;font-size:20px}
@media(max-width:850px){.menu{display:none;position:absolute;left:0;right:0;top:76px;background:#071520;padding:20px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}.menu.open{display:flex}.menu-toggle{display:block}.hero{padding:65px 0}.hero-grid,.feature-grid,.steps,.cards{grid-template-columns:1fr}.radar{margin-top:20px;height:380px}.ring{width:300px;height:300px}.feature-grid{gap:45px}.footer-grid{flex-direction:column}.page-hero h1{font-size:42px}}