/* ============================================================
   TGSS TrackerShop - Master Stylesheet
   Trak Global Security Solutions
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#00b4d8;--primary-dark:#0096b7;--primary-light:#48cae4;
  --accent:#ff6b35;--accent-dark:#e55a2b;
  --green:#22c55e;--green-dark:#16a34a;
  --dark:#0b1120;--dark-2:#0f172a;--dark-3:#1e293b;--dark-4:#334155;
  --text:#f1f5f9;--text-dim:#94a3b8;--text-muted:#64748b;
  --white:#ffffff;--border:rgba(255,255,255,0.06);
  --radius:12px;--radius-lg:20px;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--dark);color:var(--text);line-height:1.6;overflow-x:hidden;position:relative}

/* ===== CIRCUIT BOARD WIREFRAME BACKGROUND ===== */
.circuit-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.38;will-change:opacity;contain:strict}
.circuit-bg svg{width:100%;height:100%}
.circuit-bg .node{fill:rgba(0,235,255,1)}
.circuit-bg .trace{stroke:rgba(0,215,240,.9);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.circuit-bg .trace-thin{stroke:rgba(0,195,225,.65);stroke-width:.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.circuit-bg .trace-glow{stroke:rgba(0,220,245,.3);stroke-width:7;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes circuitPulse1{0%,100%{opacity:.1}50%{opacity:.3}}
@keyframes traceDash{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}
.circuit-bg .trace-anim{stroke-dasharray:12 8;animation:traceDash 15s linear infinite}
.circuit-bg .trace-anim2{stroke-dasharray:8 16;animation:traceDash 22s linear infinite reverse}
.circuit-bg .pulse-node{animation:circuitPulse1 4s ease-in-out infinite}

.product-images {max-height: 100%;}

/* Glow hotspot zones */
.circuit-bg::before{content:'';position:absolute;top:0;left:40%;width:50%;height:35%;background:radial-gradient(ellipse at center,rgba(0,210,240,.18) 0%,transparent 70%);pointer-events:none}
.circuit-bg::after{content:'';position:absolute;top:55%;left:10%;width:45%;height:30%;background:radial-gradient(ellipse at center,rgba(0,195,225,.12) 0%,transparent 65%);pointer-events:none}

/* Hero circuit wrapping around the phone */
.hero-circuit-wrap{position:absolute;inset:-80px -120px;z-index:1;pointer-events:none;overflow:visible;opacity:.55;will-change:opacity}
.hero-circuit-wrap svg{width:100%;height:100%;overflow:visible}

nav,.hero,section,.trust-bar,.cta-section,footer,.shop-section{position:relative;z-index:1}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 2rem}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1rem 2rem;transition:all .3s;background:transparent}
.nav.scrolled{background:rgba(11,17,32,0.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:.7rem 2rem}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-size:1.4rem;font-weight:800;letter-spacing:-.5px}
.nav-logo span{color:var(--primary)}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{color:var(--text-dim);font-size:.88rem;font-weight:500;transition:color .3s;position:relative}
.nav-links a:hover{color:var(--white)}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--primary);transition:width .3s}
.nav-links a:hover::after{width:100%}
.nav-cta{background:var(--primary);color:var(--dark);border:none;padding:.55rem 1.4rem;border-radius:8px;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .3s}
.nav-cta:hover{background:var(--primary-light);transform:translateY(-1px)}
.mobile-menu{display:none;background:none;border:none;color:var(--white);font-size:1.5rem;cursor:pointer}

/* ===== HERO VIDEO SIGNAL OVERLAY ===== */
#heroSignalCanvas{image-rendering:auto}
@media(max-width:768px){#heroSignalCanvas{opacity:.4}}

/* ===== HERO ===== */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--dark) 0%,#0d1b2a 50%,var(--dark) 100%)}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 40%,rgba(0,180,216,.08) 0%,transparent 60%)}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,180,216,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,180,216,.02) 1px,transparent 1px);background-size:50px 50px}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:100vh;padding:6rem 0}
.hero-text h1{font-size:3.5rem;font-weight:900;line-height:1.05;letter-spacing:-2px;margin-bottom:1.2rem}
.hero-text h1 .hl{background:linear-gradient(135deg,var(--primary),var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-text p{font-size:1.1rem;color:var(--text-dim);line-height:1.7;margin-bottom:2rem;max-width:640px;margin-left:auto;margin-right:auto}
.hero-btns{display:flex;gap:1rem;margin-bottom:3rem;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;border-radius:10px;font-weight:700;font-size:.95rem;cursor:pointer;transition:all .3s;border:none}
.btn-primary{background:var(--primary);color:var(--dark)}
.btn-primary:hover{background:var(--primary-light);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,180,216,.3)}
.btn-outline{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.2)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.hero-stats{display:flex;gap:3rem;justify-content:center}
.stat h3{font-size:2rem;font-weight:800;color:var(--primary)}
.stat p{font-size:.78rem;color:var(--text-muted);margin-top:.1rem;text-transform:uppercase;letter-spacing:1px}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
.hero-device{width:380px;height:520px;position:relative}
.device-phone{position:relative;z-index:2;width:280px;height:540px;border:2px solid rgba(0,180,216,.3);border-radius:36px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,180,216,.03);overflow:hidden;box-shadow:0 0 60px rgba(0,180,216,.06),inset 0 0 30px rgba(0,180,216,.02)}
.device-screen{position:absolute;top:18px;left:12px;right:12px;bottom:18px;border-radius:24px;background:linear-gradient(180deg,#0a1628,#0d2137);overflow:hidden;padding:1rem}
.device-map{width:100%;height:65%;border-radius:12px;background:linear-gradient(135deg,#0a2540,#0d3050);position:relative;margin-bottom:.6rem;overflow:hidden}
/* Vehicle tracker dots - no CSS animation, JS controls flash timing */
.vdot{position:absolute;width:8px;height:8px;border-radius:50%;opacity:0;transition:opacity .3s;z-index:2}
.vdot.on{opacity:1}
.vdot-ring{position:absolute;border-radius:50%;opacity:0;pointer-events:none}
.vdot-ring.pulse{animation:vdotRing 1.2s ease-out forwards}
@keyframes vdotRing{0%{transform:scale(1);opacity:.5}100%{transform:scale(3);opacity:0}}
.vdot.glow{filter:brightness(1.8);transform:scale(1.5);transition:filter .4s,transform .4s}
.vdot:not(.glow){filter:brightness(.6);transform:scale(1);transition:filter .4s,transform .4s}
/* Vehicle data popup on maps */
.vdot-popup{position:absolute;z-index:10;pointer-events:none;opacity:0;transition:opacity .35s,transform .35s;transform:translateY(4px);white-space:nowrap}
.vdot-popup.show{opacity:1;transform:translateY(0)}
.vdot-popup-inner{background:rgba(8,14,28,.92);backdrop-filter:blur(10px);border:1px solid rgba(0,180,216,.12);border-radius:8px;padding:.3rem .55rem;font-size:.52rem;line-height:1.5;color:var(--text-dim);letter-spacing:.2px}
.vdot-popup-inner .vp-reg{font-weight:700;color:var(--text);font-size:.58rem;display:block}
.vdot-popup-inner .vp-coords{color:rgba(0,160,210,.8);font-family:'Inter',monospace}
.vdot-popup-inner .vp-status{font-weight:600;display:flex;align-items:center;gap:3px;margin-top:1px}
.vdot-popup-inner .vp-status-dot{width:4px;height:4px;border-radius:50%;display:inline-block}
.vdot-popup-inner .vp-meta{color:var(--text-muted);font-size:.48rem}
.map-road{position:absolute;height:1px;background:rgba(0,180,216,.12);transform-origin:left}
.map-road.r1{top:40%;left:20%;width:60%;transform:rotate(15deg)}
.map-road.r2{top:60%;left:10%;width:80%;transform:rotate(-8deg)}
.map-road.r3{top:25%;left:30%;width:40%;transform:rotate(45deg)}
.device-info{display:flex;flex-direction:column;gap:.2rem}
.device-info-row{display:flex;justify-content:space-between;align-items:center;padding:.2rem 0;font-size:.58rem}
.device-info-row span:first-child{color:var(--text-muted)}
.device-info-row span:last-child{color:var(--primary);font-weight:600}
.device-notch{width:80px;height:6px;background:rgba(255,255,255,.08);border-radius:3px;position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:2}
.float-card{position:absolute;z-index:3;background:rgba(12,20,36,.92);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:12px;padding:.8rem 1rem;font-size:.75rem;animation:floatCard 4s ease-in-out infinite}
.float-card.fc1{top:5%;right:-40px;animation-delay:0s}
.float-card.fc2{bottom:15%;left:-50px;animation-delay:1.5s}
.float-card .fc-label{color:var(--text-muted);margin-bottom:.2rem}
.float-card .fc-value{color:var(--green);font-weight:700;font-size:.9rem}
.float-card .fc-value.red{color:var(--accent)}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ===== TRUST BAR ===== */
.trust-bar{background:var(--dark-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:2rem 0}
.trust-inner{display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:.6rem;color:var(--text-muted);font-size:.85rem;font-weight:500}
.trust-icon{width:36px;height:36px;border-radius:8px;background:rgba(0,180,216,.08);display:flex;align-items:center;justify-content:center;color:var(--primary)}
.trust-icon svg,.sol-icon svg,.feat-item-icon svg,.explore-card-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sol-icon svg,.explore-card-icon svg{width:28px;height:28px}
.feat-item-icon svg{width:22px;height:22px}

/* ===== SECTION BASE ===== */
section{padding:6rem 0;position:relative}
.section-badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(0,180,216,.08);border:1px solid rgba(0,180,216,.15);padding:.3rem .9rem;border-radius:50px;font-size:.75rem;color:var(--primary);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:1rem}
.section-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--primary);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.section-title{font-size:2.6rem;font-weight:800;letter-spacing:-1.5px;line-height:1.1;margin-bottom:.8rem}
.section-subtitle{font-size:1.05rem;color:var(--text-dim);max-width:550px;line-height:1.7}
.section-header{margin-bottom:3.5rem}
.section-header.center{text-align:center}
.section-header.center .section-subtitle{margin:0 auto}

/* ===== SOLUTIONS GRID ===== */
.solutions{background:var(--dark-2)}
.solutions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.solution-card{background:var(--dark-3);border-radius:var(--radius-lg);padding:0;border:1px solid var(--border);transition:all .4s;position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.solution-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(to right,var(--primary),var(--primary-light));transform:scaleX(0);transition:transform .4s;transform-origin:left}
.solution-card:hover::before{transform:scaleX(1)}
.solution-card:hover{transform:translateY(-6px);border-color:rgba(0,180,216,.2);box-shadow:0 20px 60px rgba(0,0,0,.3)}
/* Screen mockup inside solution card */
.sol-screen{background:linear-gradient(180deg,#0a1628,#0d2137);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:1.2rem 1rem;border-bottom:2px solid rgba(0,180,216,.15);position:relative;min-height:160px;display:flex;flex-direction:column;justify-content:center}
.sol-screen::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:40px;height:3px;border-radius:2px;background:rgba(0,180,216,.25)}
.sol-screen-rows{display:flex;flex-direction:column;gap:.55rem;margin-top:.5rem}
.sol-screen-row{display:flex;align-items:center;gap:.6rem;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.45);letter-spacing:.3px;transition:color .4s}
.sol-screen-row.active{color:rgba(255,255,255,.95)}
.sol-screen-dot{width:7px;height:7px;border-radius:50%;background:rgba(0,180,216,.2);flex-shrink:0;transition:background .4s,box-shadow .4s}
.sol-screen-row.active .sol-screen-dot{background:var(--primary);box-shadow:0 0 8px rgba(0,180,216,.6)}
/* Card body below screen */
.sol-body{padding:1.4rem 1.2rem;flex:1;display:flex;flex-direction:column}
.sol-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1rem;position:relative}
.sol-icon.blue{background:linear-gradient(135deg,rgba(0,180,216,.15),rgba(0,180,216,.05))}
.sol-icon.green{background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.05))}
.sol-icon.orange{background:linear-gradient(135deg,rgba(255,107,53,.15),rgba(255,107,53,.05))}
.sol-icon.purple{background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(139,92,246,.05))}
.solution-card h3{font-size:1.1rem;font-weight:700;margin-bottom:.5rem}
.solution-card p{font-size:.84rem;color:var(--text-dim);line-height:1.6;margin-bottom:1rem}
.sol-link{color:var(--primary);font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;gap:.3rem;transition:gap .3s;margin-top:auto}
.sol-link:hover{gap:.6rem}

/* ===== FEATURES SECTION ===== */
.features-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:stretch}
.feat-visual{position:relative;min-height:580px;height:auto;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(135deg,var(--dark-3),var(--dark-2));border:1px solid var(--border)}
.feat-visual-inner{padding:2rem;height:100%;display:flex;flex-direction:column;justify-content:stretch}
.feat-dashboard{background:var(--dark);border-radius:12px;padding:1rem;border:1px solid var(--border);display:flex;flex-direction:column;flex:1}
.dash-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--border)}
.dash-title{font-size:.8rem;font-weight:600;color:var(--text)}
.dash-live{font-size:.65rem;color:var(--green);font-weight:600;display:flex;align-items:center;gap:.3rem}
.dash-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.5s infinite}
.dash-map{height:260px;border-radius:8px;background:linear-gradient(135deg,#0a1e35,#0d2a45);position:relative;margin-bottom:1rem;overflow:hidden;flex:1}
.dash-map-grid{position:absolute;inset:0;background:linear-gradient(rgba(0,180,216,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,180,216,.04) 1px,transparent 1px);background-size:20px 20px}
.dash-vehicles{display:flex;flex-direction:column;gap:.6rem}
.dash-veh{flex:1;background:var(--dark-3);border-radius:8px;padding:.6rem;border:1px solid var(--border);display:flex;align-items:flex-start;gap:.4rem}
.dash-veh-name{font-size:.65rem;color:var(--text-muted);margin-bottom:.2rem}
.dash-veh-status{font-size:.7rem;font-weight:600}
.dash-veh-status.online{color:var(--green)}
.dash-veh-status.moving{color:var(--primary)}
.dash-veh-status.idle{color:var(--accent)}
.feat-list{display:flex;flex-direction:column;gap:1.5rem}
.feat-item{display:flex;gap:1rem;padding:1.2rem;border-radius:12px;border:1px solid transparent;transition:all .3s}
.feat-item:hover{background:rgba(0,180,216,.02);border-color:rgba(0,180,216,.08)}
.feat-item-icon{width:44px;height:44px;min-width:44px;border-radius:10px;background:linear-gradient(135deg,rgba(0,180,216,.12),rgba(0,180,216,.04));display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.feat-item h4{font-size:.98rem;font-weight:700;margin-bottom:.2rem}
.feat-item p{font-size:.85rem;color:var(--text-dim);line-height:1.5}

/* ===== HOW IT WORKS ===== */
.how-it-works{background:var(--dark-2)}
.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;position:relative}
.steps-row::before{content:'';position:absolute;top:35px;left:12%;right:12%;height:2px;background:linear-gradient(to right,var(--primary),var(--primary-light),var(--green));opacity:.2}
.step-card{text-align:center;position:relative;z-index:1}
.step-num{width:70px;height:70px;margin:0 auto 1.2rem;border-radius:50%;background:linear-gradient(135deg,rgba(0,180,216,.12),rgba(0,180,216,.04));border:1px solid rgba(0,180,216,.15);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;color:var(--primary);transition:all .3s}
.step-card:hover .step-num{background:var(--primary);color:var(--dark);transform:scale(1.1);box-shadow:0 10px 30px rgba(0,180,216,.3)}
.step-card h3{font-size:1.05rem;font-weight:700;margin-bottom:.4rem}
.step-card p{font-size:.85rem;color:var(--text-dim);line-height:1.5}

/* ===== SHOP / E-COMMERCE ===== */
.shop-filters{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.5rem}
.shop-filter{background:var(--dark-3);border:1px solid var(--border);padding:.5rem 1.3rem;border-radius:50px;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .3s;color:var(--text-dim)}
.shop-filter.active,.shop-filter:hover{background:var(--primary);color:var(--dark);border-color:var(--primary)}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.product-card{background:var(--dark-3);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);transition:all .4s;cursor:pointer;display:flex;flex-direction:column}
.product-card.hidden{display:none}
.product-card.extra-hidden{display:none}
.shop-more-wrap{text-align:center;margin-top:2rem}
.shop-more-btn{background:transparent;border:1px solid rgba(0,180,216,.3);color:var(--primary);padding:.75rem 2.5rem;border-radius:50px;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .3s;letter-spacing:.3px}
.shop-more-btn:hover{background:rgba(0,180,216,.08);border-color:var(--primary);box-shadow:0 8px 24px rgba(0,180,216,.15)}
.product-card:hover{transform:translateY(-6px);border-color:rgba(0,180,216,.2);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.product-img{height:220px;background:linear-gradient(135deg,var(--dark-2),#0d1b30);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.product-img::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(0,180,216,.06),transparent 70%)}
/* CSS device visuals */
.pimg-tracker{width:110px;height:75px;border:2px solid rgba(0,180,216,.25);border-radius:14px;position:relative;background:linear-gradient(135deg,rgba(0,180,216,.04),rgba(0,180,216,.01))}
.pimg-tracker::after{content:'';position:absolute;width:10px;height:10px;border-radius:50%;top:10px;right:10px;animation:pulse 2s infinite}
.pimg-tracker.green::after{background:var(--green);box-shadow:0 0 12px var(--green)}
.pimg-tracker.cyan::after{background:var(--primary);box-shadow:0 0 12px var(--primary)}
.pimg-tracker.orange::after{background:var(--accent);box-shadow:0 0 12px var(--accent)}
.pimg-tracker.purple::after{background:#8b5cf6;box-shadow:0 0 12px #8b5cf6}
.pimg-tracker .pimg-label{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:.55rem;font-weight:700;color:var(--primary);letter-spacing:1.5px;white-space:nowrap}
.pimg-tracker .pimg-antenna{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:2px;height:18px;background:linear-gradient(to top,rgba(0,180,216,.4),transparent)}
.pimg-tracker .pimg-antenna::after{content:'';position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background:rgba(0,180,216,.3)}
.pimg-tracker .pimg-chip{position:absolute;top:15px;left:15px;width:22px;height:16px;border:1px solid rgba(0,180,216,.2);border-radius:3px;background:rgba(0,180,216,.05)}
.pimg-tracker .pimg-chip::after{content:'';position:absolute;inset:3px;border:1px solid rgba(0,180,216,.15);border-radius:1px}
/* OBD plug visual */
.pimg-obd{width:70px;height:50px;border:2px solid rgba(0,180,216,.25);border-radius:8px 8px 14px 14px;position:relative;background:linear-gradient(180deg,rgba(0,180,216,.06),rgba(0,180,216,.02))}
.pimg-obd .pimg-pins{display:flex;gap:3px;position:absolute;bottom:10px;left:50%;transform:translateX(-50%)}
.pimg-obd .pimg-pin{width:3px;height:10px;background:rgba(0,180,216,.3);border-radius:1px}
.pimg-obd::after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;top:8px;right:8px;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 2s infinite}
/* Magnetic tracker visual */
.pimg-mag{width:90px;height:55px;border:2px solid rgba(0,180,216,.25);border-radius:10px;position:relative;background:linear-gradient(135deg,rgba(0,180,216,.05),rgba(0,180,216,.02))}
.pimg-mag::before{content:'';position:absolute;bottom:-6px;left:15%;right:15%;height:6px;background:rgba(0,180,216,.1);border-radius:0 0 4px 4px}
.pimg-mag::after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;top:8px;right:10px;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 2s infinite}
/* Signal waves */
.pimg-waves{position:absolute;top:15px;right:15px;display:flex;flex-direction:column;gap:2px;opacity:.4}
.pimg-waves span{display:block;border:1.5px solid var(--primary);border-radius:50%;width:16px;height:16px;border-bottom-color:transparent;border-left-color:transparent}
.pimg-waves span:nth-child(2){width:12px;height:12px}
.pimg-waves span:nth-child(3){width:8px;height:8px}
.product-badge{position:absolute;top:1rem;right:1rem;padding:.25rem .7rem;border-radius:6px;font-size:.68rem;font-weight:700;color:var(--white)}
.product-badge.best{background:var(--accent)}
.product-badge.new{background:var(--green)}
.product-badge.ev{background:#8b5cf6}
.product-badge.value{background:#f59e0b}
.product-info{padding:1.5rem;flex:1;display:flex;flex-direction:column}
.product-info h3{font-size:1.1rem;font-weight:700;margin-bottom:.3rem}
.product-info .product-cat{font-size:.72rem;color:var(--primary);font-weight:600;margin-bottom:.6rem;text-transform:uppercase;letter-spacing:1px}
.product-info .product-desc{font-size:.85rem;color:var(--text-dim);line-height:1.6;margin-bottom:1rem}
.product-specs{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.product-spec{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--text-dim)}
.product-spec::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--primary);flex-shrink:0}
.product-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.product-tag{background:rgba(0,180,216,.06);border:1px solid rgba(0,180,216,.1);padding:.2rem .6rem;border-radius:6px;font-size:.7rem;color:var(--primary);font-weight:500}
.product-pricing{margin-top:auto;padding-top:1rem;border-top:1px solid var(--border)}
.product-price-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.product-price{font-size:1.3rem;font-weight:800;color:var(--primary)}
.product-price span{font-size:.75rem;color:var(--text-muted);font-weight:400}
.product-sub{font-size:.72rem;color:var(--text-muted);margin-bottom:1rem}
.product-sub strong{color:var(--text-dim);font-weight:600}
.product-actions{display:flex;gap:.6rem}
.product-btn{flex:1;background:rgba(0,180,216,.08);color:var(--primary);border:1px solid rgba(0,180,216,.15);padding:.55rem .9rem;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .3s;text-align:center}
.product-btn:hover{background:var(--primary);color:var(--dark)}
.product-btn.primary{background:var(--primary);color:var(--dark);border-color:var(--primary)}
.product-btn.primary:hover{background:var(--primary-light);box-shadow:0 8px 24px rgba(0,180,216,.3)}

/* Subscription plans */
.sub-plans{margin-top:3rem}
.sub-plans-header{text-align:center;margin-bottom:2rem}
.sub-plans-header h3{font-size:1.6rem;font-weight:800;margin-bottom:.4rem}
.sub-plans-header p{font-size:.9rem;color:var(--text-dim)}
.sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.sub-card{background:var(--dark-3);border-radius:var(--radius-lg);padding:2rem;border:1px solid var(--border);transition:all .3s;position:relative;overflow:hidden;text-align:center}
.sub-card.featured{border-color:rgba(0,180,216,.3);background:linear-gradient(135deg,rgba(0,180,216,.04),var(--dark-3))}
.sub-card.featured::before{content:'MOST POPULAR';position:absolute;top:16px;right:-30px;background:var(--primary);color:var(--dark);font-size:.6rem;font-weight:800;padding:.2rem 2.5rem;transform:rotate(45deg);letter-spacing:1px}
.sub-card:hover{transform:translateY(-4px);border-color:rgba(0,180,216,.2);box-shadow:0 15px 40px rgba(0,0,0,.3)}
.sub-name{font-size:1rem;font-weight:700;margin-bottom:.3rem}
.sub-price{font-size:2.2rem;font-weight:900;color:var(--primary);margin-bottom:.2rem}
.sub-price span{font-size:.85rem;color:var(--text-muted);font-weight:400}
.sub-period{font-size:.78rem;color:var(--text-muted);margin-bottom:1.5rem}
.sub-features{list-style:none;text-align:left;margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}
.sub-features li{font-size:.82rem;color:var(--text-dim);display:flex;align-items:center;gap:.5rem}
.sub-features li::before{content:'';width:16px;height:16px;min-width:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300b4d8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.sub-btn{width:100%;padding:.65rem;border-radius:8px;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .3s;border:none}
.sub-btn.outline{background:transparent;border:1px solid rgba(0,180,216,.2);color:var(--primary)}
.sub-btn.outline:hover{background:rgba(0,180,216,.08)}
.sub-btn.filled{background:var(--primary);color:var(--dark)}
.sub-btn.filled:hover{background:var(--primary-light);box-shadow:0 8px 24px rgba(0,180,216,.3)}

/* ===== STATS ===== */
.stats-section{background:linear-gradient(135deg,var(--dark) 0%,#0d1b35 50%,var(--dark) 100%);position:relative;overflow:hidden}
.stats-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,180,216,.05),transparent 60%)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;position:relative;z-index:1}
.stat-card{text-align:center;padding:2rem}
.stat-card h3{font-size:2.8rem;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.3rem}
.stat-card p{font-size:.85rem;color:var(--text-dim)}

.dash-veh-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px;transition:box-shadow .4s,transform .4s}
.dash-veh.flash .dash-veh-dot{transform:scale(1.6);box-shadow:0 0 12px currentColor}
.dash-veh.flash{background:var(--dark-2);border-color:rgba(255,255,255,.08)}
@keyframes vehFlash{0%,100%{opacity:.6}50%{opacity:1}}

/* ===== TESTIMONIALS ===== */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.test-card{background:var(--dark-3);border-radius:var(--radius-lg);padding:2rem;border:1px solid var(--border);transition:all .3s}
.test-card:hover{border-color:rgba(0,180,216,.1)}
.test-stars{color:#fbbf24;font-size:.85rem;margin-bottom:1rem;letter-spacing:2px}
.test-card blockquote{font-size:.9rem;color:var(--text-dim);line-height:1.7;margin-bottom:1.5rem;font-style:italic}
.test-author{display:flex;align-items:center;gap:.7rem}
.test-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:var(--dark)}
.test-name{font-size:.88rem;font-weight:600}
.test-role{font-size:.75rem;color:var(--text-muted)}

/* ===== CTA ===== */
.cta{text-align:center;padding:8rem 0;background:linear-gradient(135deg,var(--dark) 0%,#0a1a30 50%,var(--dark) 100%);position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center,rgba(0,180,216,.06),transparent 50%)}
.cta .section-title{max-width:650px;margin:0 auto .8rem}
.cta .section-subtitle{margin:0 auto 2.5rem;text-align:center}
.cta-btns{display:flex;gap:1rem;justify-content:center;position:relative;z-index:1}

/* ===== FOOTER ===== */
footer{background:var(--dark-2);padding:4rem 0 2rem;border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand p{font-size:.85rem;color:var(--text-dim);line-height:1.7;max-width:280px;margin-top:.8rem}
.footer-col h4{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem;color:var(--text)}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.6rem}
.footer-col a{color:var(--text-muted);font-size:.85rem;transition:color .3s}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{display:flex;justify-content:space-between;padding-top:2rem;border-top:1px solid var(--border);font-size:.78rem;color:var(--text-muted)}

/* ===== EXPLORE SOLUTIONS PAGE ===== */
.explore-page{display:none;position:fixed;inset:0;z-index:2000;background:var(--dark);overflow-y:auto}
.explore-page.open{display:block;animation:epFadeIn .5s ease}
@keyframes epFadeIn{from{opacity:0}to{opacity:1}}
.explore-back{position:fixed;top:1.5rem;left:2rem;z-index:2001;background:rgba(11,17,32,.92);backdrop-filter:blur(16px);border:1px solid var(--border);color:var(--text);padding:.55rem 1.3rem;border-radius:10px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:.5rem}
.explore-back:hover{background:var(--primary);color:var(--dark);border-color:var(--primary)}

/* Hero with map */
.explore-hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:6rem 0;background:var(--dark)}
.explore-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 60% 50%,rgba(0,130,180,.04) 0%,transparent 50%)}
.explore-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem}
.explore-hero-text{position:relative;z-index:2}
.explore-hero-text h1{font-size:3.4rem;font-weight:900;line-height:1.06;letter-spacing:-2px;margin-bottom:1.2rem}
.explore-hero-text h1 .hl{background:linear-gradient(135deg,var(--primary),var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.explore-hero-text .lead{font-size:1.1rem;color:var(--text-dim);line-height:1.75;max-width:500px;margin-bottom:2rem}
.explore-hero-stats{display:flex;gap:2rem}
.explore-hero-stats .ehs{text-align:center;padding:1rem 1.2rem;background:rgba(0,180,216,.03);border:1px solid rgba(0,180,216,.06);border-radius:12px;transition:all .3s}
.explore-hero-stats .ehs:hover{background:rgba(0,180,216,.06);border-color:rgba(0,180,216,.15);transform:translateY(-2px)}
.explore-hero-stats .ehs h4{font-size:1.6rem;font-weight:800;color:var(--primary)}
.explore-hero-stats .ehs p{font-size:.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:.15rem}

/* Cheshire map container */
.cheshire-map-wrap{position:relative;width:100%;aspect-ratio:1/1.05;max-width:520px;margin:0 auto}
.cheshire-map-canvas{width:100%;height:100%;display:block}
.tracker-coord{position:absolute;pointer-events:none;opacity:0;transition:opacity .4s ease,transform .4s ease;white-space:nowrap;transform:translateY(6px)}
.tracker-coord.show{opacity:1;transform:translateY(0)}
.tracker-coord-inner{background:rgba(11,17,32,.88);backdrop-filter:blur(12px);border:1px solid rgba(0,140,190,.2);border-radius:10px;padding:.4rem .7rem;font-family:'Inter',monospace;font-size:.65rem;color:rgba(0,160,200,.9);font-weight:600;letter-spacing:.5px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.tracker-coord-inner .coord-name{color:var(--text);font-weight:700;font-size:.72rem;display:block;margin-bottom:.15rem}
.tracker-coord-inner .coord-latlng{opacity:.7}
.tracker-coord-inner .coord-status{font-size:.58rem;font-weight:600;display:flex;align-items:center;gap:.3rem;margin-top:.2rem}
.tracker-coord-inner .coord-status .status-dot{width:5px;height:5px;border-radius:50%;display:inline-block;animation:pulse 1.5s infinite}

/* Content section */
.explore-content{padding:5rem 0;position:relative}
.explore-content::before{content:'';position:absolute;top:0;left:0;right:0;height:200px;background:linear-gradient(to bottom,var(--dark),var(--dark));pointer-events:none}

/* Interactive card hover glow */
.explore-card .card-number{position:absolute;top:1.5rem;right:1.5rem;font-size:3rem;font-weight:900;color:rgba(0,180,216,.04);line-height:1;pointer-events:none}
.explore-card:hover .card-number{color:rgba(0,180,216,.08)}
.explore-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;position:relative;z-index:1}
.explore-card{background:linear-gradient(145deg,var(--dark-3),rgba(30,41,59,.5));border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem;position:relative;overflow:hidden;transition:all .4s}
.explore-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(to right,var(--primary),var(--primary-light));transform:scaleX(0);transition:transform .4s;transform-origin:left}
.explore-card::after{content:'';position:absolute;bottom:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(0,180,216,.04),transparent 70%);pointer-events:none}
.explore-card:hover::before{transform:scaleX(1)}
.explore-card:hover{transform:translateY(-6px);border-color:rgba(0,180,216,.25);box-shadow:0 25px 60px rgba(0,0,0,.4),0 0 30px rgba(0,180,216,.05)}
.explore-card.full{grid-column:1/-1;background:linear-gradient(145deg,rgba(0,180,216,.03),var(--dark-3))}
.explore-card-icon{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:1.2rem;background:linear-gradient(135deg,rgba(0,180,216,.15),rgba(0,180,216,.04));border:1px solid rgba(0,180,216,.1);position:relative}
.explore-card-icon::after{content:'';position:absolute;inset:-2px;border-radius:18px;background:linear-gradient(135deg,rgba(0,180,216,.2),transparent);z-index:-1;filter:blur(8px)}
.explore-card h3{font-size:1.25rem;font-weight:700;margin-bottom:.6rem;letter-spacing:-.3px}
.explore-card p{font-size:.92rem;color:var(--text-dim);line-height:1.75}
.explore-card .card-highlight{color:var(--primary);font-weight:600}
.explore-cta-banner{text-align:center;padding:5rem 2rem;background:linear-gradient(135deg,rgba(0,180,216,.06),rgba(0,180,216,.01));border-radius:var(--radius-lg);border:1px solid rgba(0,180,216,.12);margin-top:3rem;position:relative;overflow:hidden;z-index:1}
.explore-cta-banner::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center,rgba(0,180,216,.04),transparent 50%);pointer-events:none}
.explore-cta-banner h2{font-size:1.8rem;font-weight:800;margin-bottom:.6rem;position:relative}
.explore-cta-banner p{color:var(--text-dim);margin-bottom:1.5rem;font-size:.95rem;position:relative}

@media(max-width:768px){
  .explore-hero{min-height:auto;padding:7rem 0 3rem}
  .explore-hero-inner{grid-template-columns:1fr}
  .explore-hero-text h1{font-size:2.2rem}
  .cheshire-map-wrap{max-width:300px;margin-top:2rem}
  .explore-grid{grid-template-columns:1fr}
  .explore-card.full{grid-column:auto}
  .explore-hero-stats{gap:.8rem;flex-wrap:wrap}
  .explore-hero-stats .ehs{padding:.7rem .9rem}
  #exploreDashSection{grid-template-columns:1fr!important}
}

/* ===== BASKET COUNTER ===== */
.nav-cta{position:relative}
.basket-count{position:absolute;top:-6px;right:-10px;background:var(--accent);color:#fff;font-size:.6rem;font-weight:800;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.basket-count.show{transform:scale(1)}

/* ===== TOAST NOTIFICATION ===== */
.toast{position:fixed;bottom:2rem;right:2rem;background:var(--dark-3);border:1px solid rgba(0,180,216,.2);border-radius:12px;padding:1rem 1.5rem;display:flex;align-items:center;gap:.8rem;z-index:9999;transform:translateY(120%);opacity:0;transition:all .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 20px 40px rgba(0,0,0,.4);max-width:360px}
.toast.show{transform:translateY(0);opacity:1}
.toast-icon{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.05));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.toast-icon svg{width:18px;height:18px;fill:none;stroke:#22c55e;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.toast-text{font-size:.82rem;color:var(--text);font-weight:600}
.toast-sub{font-size:.72rem;color:var(--text-dim);font-weight:400;margin-top:.15rem}

/* ===== PRODUCT DETAIL MODAL ===== */
.product-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9998;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(4px)}
.product-modal-overlay.open{opacity:1;pointer-events:auto}
.product-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);background:var(--dark-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem;max-width:540px;width:90%;max-height:80vh;overflow-y:auto;z-index:9999;opacity:0;pointer-events:none;transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.product-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.product-modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.5rem;line-height:1;padding:.25rem;transition:color .3s}
.product-modal-close:hover{color:var(--text)}
.product-modal h2{font-size:1.4rem;font-weight:800;margin-bottom:.4rem}
.product-modal .pm-cat{font-size:.78rem;color:var(--primary);font-weight:600;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.5px}
.product-modal .pm-desc{font-size:.9rem;color:var(--text-dim);line-height:1.7;margin-bottom:1.2rem}
.product-modal .pm-specs{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}
.product-modal .pm-spec{font-size:.82rem;color:var(--text-dim);display:flex;align-items:center;gap:.5rem}
.product-modal .pm-spec::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--primary);flex-shrink:0}
.product-modal .pm-price{font-size:1.8rem;font-weight:900;color:var(--primary);margin-bottom:.3rem}
.product-modal .pm-sub{font-size:.8rem;color:var(--text-dim);margin-bottom:1.5rem}
.product-modal .pm-actions{display:flex;gap:.8rem}
.product-modal .pm-actions button{flex:1;padding:.7rem;border-radius:8px;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .3s;border:none}
.product-modal .pm-btn-add{background:var(--primary);color:var(--dark)}
.product-modal .pm-btn-add:hover{background:var(--primary-light);box-shadow:0 8px 24px rgba(0,180,216,.3)}
.product-modal .pm-btn-contact{background:transparent;border:1px solid rgba(0,180,216,.2) !important;color:var(--primary)}
.product-modal .pm-btn-contact:hover{background:rgba(0,180,216,.08)}

/* ===== MOBILE NAV OPEN ===== */
.nav-links.open{display:flex !important;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--dark-2);border-bottom:1px solid var(--border);padding:1rem 2rem;gap:.5rem}
.nav-links.open li a{display:block;padding:.6rem 0;font-size:1rem}
.nav-link.active{color:var(--primary) !important}

/* ===== QUOTE FORM MODAL ===== */
.quote-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9998;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(4px)}
.quote-modal-overlay.open{opacity:1;pointer-events:auto}
.quote-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);background:var(--dark-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem;max-width:480px;width:90%;z-index:9999;opacity:0;pointer-events:none;transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.quote-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.quote-modal h2{font-size:1.3rem;font-weight:800;margin-bottom:.4rem}
.quote-modal p{font-size:.85rem;color:var(--text-dim);margin-bottom:1.5rem}
.quote-form{display:flex;flex-direction:column;gap:.8rem}
.quote-form input,.quote-form select,.quote-form textarea{background:var(--dark-3);border:1px solid var(--border);border-radius:8px;padding:.7rem 1rem;color:var(--text);font-size:.85rem;font-family:inherit;outline:none;transition:border-color .3s}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:rgba(0,180,216,.4)}
.quote-form textarea{resize:vertical;min-height:80px}
.quote-form button{background:var(--primary);color:var(--dark);border:none;padding:.75rem;border-radius:8px;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .3s}
.quote-form button:hover{background:var(--primary-light);box-shadow:0 8px 24px rgba(0,180,216,.3)}
.form-success{text-align:center;padding:2rem 0}
.form-success svg{width:48px;height:48px;fill:none;stroke:#22c55e;stroke-width:2;margin-bottom:1rem}
.form-success h3{font-size:1.1rem;font-weight:700;margin-bottom:.4rem}
.form-success p{font-size:.85rem;color:var(--text-dim)}

/* ===== CHECKOUT PAGE ===== */
.checkout-page{position:fixed;inset:0;background:var(--dark);z-index:8000;overflow-y:auto;transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);opacity:0}
.checkout-page.open{transform:translateX(0);opacity:1}
.checkout-inner{max-width:960px;margin:0 auto;padding:2rem;display:grid;grid-template-columns:1fr 380px;gap:2.5rem;min-height:100vh;align-content:start;padding-top:5rem}
.checkout-back{position:fixed;top:1.2rem;left:1.5rem;background:none;border:none;color:var(--text-dim);font-size:.9rem;font-weight:600;cursor:pointer;z-index:8001;display:flex;align-items:center;gap:.4rem;transition:color .3s}
.checkout-back:hover{color:var(--white)}
.checkout-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.checkout-left h2{font-size:1.5rem;font-weight:800;margin-bottom:1.5rem}
.checkout-items{display:flex;flex-direction:column;gap:.8rem;margin-bottom:2rem}
.checkout-item{display:flex;justify-content:space-between;align-items:center;background:var(--dark-3);border:1px solid var(--border);border-radius:10px;padding:1rem 1.2rem}
.checkout-item-name{font-size:.88rem;font-weight:600}
.checkout-item-price{font-size:.92rem;font-weight:700;color:var(--primary)}
.checkout-item-remove{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:1.1rem;padding:0 .3rem;transition:color .3s}
.checkout-item-remove:hover{color:var(--accent)}
.checkout-empty{text-align:center;padding:3rem 0;color:var(--text-dim);font-size:.9rem}
.payment-section{margin-top:1rem}
.payment-section h3{font-size:1.1rem;font-weight:700;margin-bottom:1rem}
.payment-methods{display:flex;gap:.6rem;margin-bottom:1.5rem}
.pay-method{flex:1;background:var(--dark-3);border:2px solid var(--border);border-radius:10px;padding:.8rem;text-align:center;cursor:pointer;transition:all .3s;font-size:.75rem;font-weight:600;color:var(--text-dim)}
.pay-method.active{border-color:var(--primary);background:rgba(0,180,216,.05);color:var(--white)}
.pay-method svg{display:block;margin:0 auto .4rem;width:28px;height:28px}
.pay-method-icon{font-size:1.4rem;margin-bottom:.3rem}
.card-form{display:flex;flex-direction:column;gap:.8rem}
.card-form input{background:var(--dark-3);border:1px solid var(--border);border-radius:8px;padding:.75rem 1rem;color:var(--text);font-size:.88rem;font-family:inherit;outline:none;transition:border-color .3s}
.card-form input:focus{border-color:rgba(0,180,216,.4)}
.card-form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.pay-alt-msg{text-align:center;padding:2rem 0;color:var(--text-dim);font-size:.88rem}
.pay-alt-msg .pay-alt-logo{font-size:2rem;margin-bottom:.8rem}
.order-summary{background:var(--dark-3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;position:sticky;top:5rem;align-self:start}
.order-summary h3{font-size:1.1rem;font-weight:700;margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--border)}
.os-line{display:flex;justify-content:space-between;font-size:.85rem;color:var(--text-dim);margin-bottom:.5rem}
.os-line.total{color:var(--white);font-weight:800;font-size:1.1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.checkout-pay-btn{width:100%;background:var(--primary);color:var(--dark);border:none;padding:.9rem;border-radius:10px;font-size:1rem;font-weight:800;cursor:pointer;margin-top:1.5rem;transition:all .3s}
.checkout-pay-btn:hover{background:var(--primary-light);box-shadow:0 8px 24px rgba(0,180,216,.3)}
.checkout-pay-btn:disabled{opacity:.5;cursor:not-allowed}
.checkout-secure{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.72rem;color:var(--text-dim);margin-top:.8rem}
.checkout-secure svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.checkout-success{text-align:center;padding:4rem 2rem;grid-column:1/-1}
.checkout-success svg{width:64px;height:64px;fill:none;stroke:#22c55e;stroke-width:2;margin-bottom:1rem}
.checkout-success h2{font-size:1.6rem;margin-bottom:.5rem}
.checkout-success p{color:var(--text-dim);font-size:.9rem;margin-bottom:.3rem}
.checkout-success .order-num{font-size:1.1rem;color:var(--primary);font-weight:700;margin:1rem 0}

/* ===== CRM ADMIN PAGE ===== */
/* ===== SOLUTION FINDER (inside Explore) ===== */
.sf-trigger{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;background:rgba(0,180,216,.08);border:1px solid rgba(0,180,216,.2);padding:.6rem 1.4rem;border-radius:50px;font-size:.85rem;font-weight:700;color:var(--primary);cursor:pointer;transition:all .3s}
.sf-trigger:hover{background:rgba(0,180,216,.15);border-color:var(--primary)}
.sf-trigger svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sf-section{display:none;padding:3rem 0}
.sf-section.open{display:block}
.sf-section .container{max-width:820px;margin:0 auto}
.sf-header{text-align:center;margin-bottom:2.5rem}
.sf-header h2{font-size:1.6rem;font-weight:900;margin-bottom:.5rem}
.sf-header p{font-size:.92rem;color:var(--text-dim);line-height:1.7;max-width:640px;margin:0 auto}
.sf-intro{font-size:.9rem;color:var(--text-dim);line-height:1.8;margin-bottom:2rem}
.sf-category{background:var(--dark-3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.8rem;margin-bottom:1.2rem;transition:all .3s;position:relative;overflow:hidden}
.sf-category::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;border-radius:2px 0 0 2px}
.sf-category.luxury::before{background:linear-gradient(180deg,#a855f7,#7c3aed)}
.sf-category.everyday::before{background:linear-gradient(180deg,var(--primary),var(--primary-light))}
.sf-category.commercial::before{background:linear-gradient(180deg,var(--accent),#ff8c42)}
.sf-category.agricultural::before{background:linear-gradient(180deg,#22c55e,#16a34a)}
.sf-category:hover{border-color:rgba(0,180,216,.15);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.2)}
.sf-category h3{font-size:1.05rem;font-weight:700;margin-bottom:.5rem;display:flex;align-items:center;gap:.6rem}
.sf-category h3 .sf-cat-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.9rem}
.sf-category.luxury h3 .sf-cat-icon{background:rgba(168,85,247,.12)}
.sf-category.everyday h3 .sf-cat-icon{background:rgba(0,180,216,.12)}
.sf-category.commercial h3 .sf-cat-icon{background:rgba(255,107,53,.12)}
.sf-category.agricultural h3 .sf-cat-icon{background:rgba(34,197,94,.12)}
.sf-category p{font-size:.85rem;color:var(--text-dim);line-height:1.7;margin-left:2.6rem}
.sf-extra{margin-top:2rem}
.sf-extra h3{font-size:1.1rem;font-weight:700;margin-bottom:.8rem}
.sf-extra p{font-size:.88rem;color:var(--text-dim);line-height:1.7;margin-bottom:.8rem}
.sf-consider-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem}
.sf-consider{background:var(--dark-3);border:1px solid var(--border);border-radius:10px;padding:1.2rem;text-align:center}
.sf-consider-icon{font-size:1.5rem;margin-bottom:.5rem}
.sf-consider h4{font-size:.82rem;font-weight:700;margin-bottom:.3rem}
.sf-consider p{font-size:.78rem;color:var(--text-dim);line-height:1.5}

@media(max-width:768px){.sf-consider-list{grid-template-columns:1fr}.sf-category p{margin-left:0}}

/* ===== SECURITY TIPS (inside Explore) ===== */
.st-section{display:none;padding:3rem 0}
.st-section.open{display:block}
.st-section .container{max-width:820px;margin:0 auto}
.st-header{text-align:center;margin-bottom:2.5rem}
.st-header h2{font-size:1.6rem;font-weight:900;margin-bottom:.5rem}
.st-header p{font-size:.92rem;color:var(--text-dim);line-height:1.7;max-width:600px;margin:0 auto}
.st-tip{background:var(--dark-3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem 1.5rem 1.5rem 4.5rem;margin-bottom:.8rem;position:relative;transition:all .3s}
.st-tip:hover{border-color:rgba(0,180,216,.15);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.2)}
.st-tip-num{position:absolute;left:1.2rem;top:1.4rem;font-size:1.3rem;font-weight:900;color:var(--primary);opacity:.6;width:2.2rem;text-align:center}
.st-tip h4{font-size:.95rem;font-weight:700;margin-bottom:.35rem}
.st-tip p{font-size:.84rem;color:var(--text-dim);line-height:1.7}

/* ===== PRIVACY POLICY PAGE ===== */
.privacy-page{position:fixed;inset:0;background:var(--dark);z-index:6000;overflow-y:auto;transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);opacity:0}
.privacy-page.open{transform:translateX(0);opacity:1}
.privacy-inner{max-width:780px;margin:0 auto;padding:5rem 2rem 4rem}
.privacy-back{position:fixed;top:1.2rem;left:1.5rem;background:none;border:none;color:var(--text-dim);font-size:.9rem;font-weight:600;cursor:pointer;z-index:6001;display:flex;align-items:center;gap:.4rem;transition:color .3s}
.privacy-back:hover{color:var(--white)}
.privacy-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.privacy-inner h1{font-size:2rem;font-weight:900;margin-bottom:.3rem}
.privacy-inner .privacy-updated{font-size:.82rem;color:var(--text-dim);margin-bottom:2.5rem}
.privacy-inner h2{font-size:1.15rem;font-weight:700;margin-top:2rem;margin-bottom:.6rem;color:var(--white)}
.privacy-inner p{font-size:.88rem;color:var(--text-dim);line-height:1.8;margin-bottom:1rem}
.privacy-inner ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}
.privacy-inner ul li{font-size:.85rem;color:var(--text-dim);line-height:1.7;margin-bottom:.4rem}
.privacy-inner a{color:var(--primary);text-decoration:underline}
.privacy-contact{background:var(--dark-3);border:1px solid var(--border);border-radius:10px;padding:1.5rem;margin-top:2rem}
.privacy-contact p{margin-bottom:.3rem}

.crm-page{position:fixed;inset:0;background:var(--dark);z-index:7000;overflow-y:auto;transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);opacity:0}
.crm-page.open{transform:translateX(0);opacity:1}
.crm-topbar{background:var(--dark-2);border-bottom:1px solid var(--border);padding:.8rem 2rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:7001}
.crm-topbar-left{display:flex;align-items:center;gap:1rem}
.crm-topbar-left h2{font-size:1rem;font-weight:800;color:var(--white)}
.crm-topbar-left span{font-size:.75rem;color:var(--primary);background:rgba(0,180,216,.1);padding:.2rem .6rem;border-radius:4px;font-weight:600}
.crm-back{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:.3rem;transition:color .3s}
.crm-back:hover{color:var(--white)}
.crm-back svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.crm-body{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 52px)}
.crm-sidebar{background:var(--dark-2);border-right:1px solid var(--border);padding:1rem 0}
.crm-nav-item{display:flex;align-items:center;gap:.6rem;padding:.65rem 1.2rem;font-size:.82rem;font-weight:600;color:var(--text-dim);cursor:pointer;transition:all .2s;border-left:3px solid transparent}
.crm-nav-item:hover{background:rgba(0,180,216,.03);color:var(--text)}
.crm-nav-item.active{background:rgba(0,180,216,.06);color:var(--primary);border-left-color:var(--primary)}
.crm-nav-item svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.crm-content{padding:1.5rem 2rem;overflow-y:auto;max-height:calc(100vh - 52px)}
.crm-panel{display:none}
.crm-panel.active{display:block}
.crm-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.crm-header h3{font-size:1.2rem;font-weight:800}
.crm-search{background:var(--dark-3);border:1px solid var(--border);border-radius:8px;padding:.5rem 1rem;color:var(--text);font-size:.82rem;width:260px;outline:none;transition:border-color .3s;font-family:inherit}
.crm-search:focus{border-color:rgba(0,180,216,.4)}
.crm-add-btn{background:var(--primary);color:var(--dark);border:none;padding:.5rem 1.2rem;border-radius:8px;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .3s}
.crm-add-btn:hover{background:var(--primary-light)}
.crm-table{width:100%;border-collapse:separate;border-spacing:0}
.crm-table th{text-align:left;font-size:.72rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;padding:.6rem .8rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--dark)}
.crm-table td{font-size:.82rem;padding:.7rem .8rem;border-bottom:1px solid rgba(255,255,255,.03);color:var(--text-dim);vertical-align:middle}
.crm-table tr:hover td{background:rgba(0,180,216,.02)}
.crm-table .name-cell{color:var(--white);font-weight:600;cursor:pointer}
.crm-table .name-cell:hover{color:var(--primary);text-decoration:underline}
.crm-badge{display:inline-block;padding:.15rem .5rem;border-radius:4px;font-size:.68rem;font-weight:700}
.crm-badge.active{background:rgba(34,197,94,.12);color:#22c55e}
.crm-badge.pending{background:rgba(255,107,53,.12);color:#ff6b35}
.crm-badge.expired{background:rgba(239,68,68,.12);color:#ef4444}
.crm-badge.resolved{background:rgba(34,197,94,.12);color:#22c55e}
.crm-badge.open{background:rgba(0,180,216,.12);color:var(--primary)}
.crm-badge.urgent{background:rgba(239,68,68,.12);color:#ef4444}
.crm-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem}
.crm-stat{background:var(--dark-3);border:1px solid var(--border);border-radius:10px;padding:1.2rem}
.crm-stat h4{font-size:1.6rem;font-weight:900;color:var(--white);margin-bottom:.2rem}
.crm-stat p{font-size:.75rem;color:var(--text-dim)}
.crm-stat .trend{font-size:.7rem;font-weight:700;margin-top:.3rem}
.crm-stat .trend.up{color:#22c55e}
.crm-stat .trend.down{color:#ef4444}
.crm-chart{background:var(--dark-3);border:1px solid var(--border);border-radius:10px;padding:1.5rem;margin-bottom:1.5rem}
.crm-chart h4{font-size:.9rem;font-weight:700;margin-bottom:1rem}
.crm-chart-bar-row{display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem}
.crm-chart-label{font-size:.72rem;color:var(--text-dim);width:60px;text-align:right;flex-shrink:0}
.crm-chart-bar{height:22px;border-radius:4px;background:var(--primary);transition:width 1s cubic-bezier(.4,0,.2,1);position:relative}
.crm-chart-bar-val{position:absolute;right:-35px;top:2px;font-size:.68rem;color:var(--text-dim);font-weight:600}
.crm-charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.crm-detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:7500;opacity:0;pointer-events:none;transition:opacity .3s}
.crm-detail-overlay.open{opacity:1;pointer-events:auto}
.crm-detail-panel{position:fixed;top:0;right:0;width:480px;max-width:90vw;height:100vh;background:var(--dark-2);border-left:1px solid var(--border);z-index:7501;transform:translateX(100%);transition:transform .3s;overflow-y:auto;padding:2rem}
.crm-detail-panel.open{transform:translateX(0)}
.crm-detail-close{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:1.4rem;position:absolute;top:1rem;right:1rem}
.crm-detail-name{font-size:1.3rem;font-weight:800;margin-bottom:.2rem}
.crm-detail-email{font-size:.85rem;color:var(--primary);margin-bottom:1.5rem}
.crm-detail-section{margin-bottom:1.5rem}
.crm-detail-section h4{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin-bottom:.6rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}
.crm-detail-row{display:flex;justify-content:space-between;font-size:.82rem;padding:.35rem 0}
.crm-detail-row span:first-child{color:var(--text-dim)}
.crm-detail-row span:last-child{color:var(--white);font-weight:600}
.ticket-form{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.ticket-form input,.ticket-form select,.ticket-form textarea{background:var(--dark-3);border:1px solid var(--border);border-radius:6px;padding:.55rem .8rem;color:var(--text);font-size:.8rem;font-family:inherit;outline:none}
.ticket-form textarea{min-height:60px;resize:vertical}
.ticket-form button{background:var(--primary);color:var(--dark);border:none;padding:.55rem;border-radius:6px;font-size:.82rem;font-weight:700;cursor:pointer}

@media(max-width:768px){
  .checkout-inner{grid-template-columns:1fr;padding-top:4rem}
  .crm-body{grid-template-columns:1fr}
  .crm-sidebar{display:none}
  .crm-stats-row{grid-template-columns:1fr 1fr}
  .crm-charts-grid{grid-template-columns:1fr}
}

/* ===== ANIMATIONS ===== */
.fade-up{opacity:0;transform:translateY(30px);transition:all .7s cubic-bezier(.16,1,.3,1)}
.fade-up.visible{opacity:1;transform:translateY(0)}
.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s}.delay-4{transition-delay:.4s}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .solutions-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .nav-links{display:none}.mobile-menu{display:block}
  .hero-inner{padding:7rem 0 4rem}
  .hero-text h1{font-size:2.4rem}.hero-text p{margin:0 auto 2rem}
  .hero-btns{justify-content:center}.hero-stats{justify-content:center}
  
  .solutions-grid,.products-grid,.testimonials-grid,.sub-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  .steps-row{grid-template-columns:1fr 1fr}.steps-row::before{display:none}
  .stats-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .section-title{font-size:2rem}
}

/* CRM Region Cards */
.crm-region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.crm-region-card{background:var(--dark);border:1px solid var(--border);border-radius:10px;padding:1rem}
.crm-region-card h5{font-size:.85rem;font-weight:700;color:var(--white);margin-bottom:.6rem}
.crm-region-card .region-stat{display:flex;justify-content:space-between;font-size:.75rem;padding:.25rem 0;border-bottom:1px solid rgba(255,255,255,.03)}
.crm-region-card .region-stat span:first-child{color:var(--text-muted)}
.crm-region-card .region-stat span:last-child{color:var(--text-dim);font-weight:600}

/* CRM Alert Cards */
.crm-alert-list{display:flex;flex-direction:column;gap:.6rem}
.crm-alert-card{display:flex;align-items:start;gap:.8rem;padding:.8rem 1rem;background:var(--dark);border:1px solid var(--border);border-radius:10px;transition:all .2s}
.crm-alert-card:hover{border-color:rgba(0,180,216,.15);background:rgba(0,180,216,.02)}
.crm-alert-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px}
.crm-alert-dot.critical{background:#ef4444}
.crm-alert-dot.warning{background:#eab308}
.crm-alert-dot.info{background:#48cae4}
.crm-alert-body{flex:1}
.crm-alert-title{font-size:.8rem;font-weight:700;color:var(--white)}
.crm-alert-desc{font-size:.72rem;color:var(--text-muted);margin-top:.15rem}
.crm-alert-meta{display:flex;justify-content:space-between;align-items:center;margin-top:.35rem}
.crm-alert-time{font-size:.65rem;color:var(--text-muted)}

/* CRM Fleet table */
.health-bar{display:inline-block;width:50px;height:6px;background:var(--dark);border-radius:3px;overflow:hidden;vertical-align:middle;margin-right:.4rem}
.health-bar-fill{height:100%;border-radius:3px}

@media(max-width:768px){.crm-region-grid{grid-template-columns:1fr}}