.site-header { position: fixed; z-index: 100; inset: 0 0 auto; color: white; background: rgba(7, 26, 43, .95); border-bottom: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(14px); }
.header-inner { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.brand-header { width: 190px; height: 70px; }
.header-logo-frame { display: block; width: 190px; height: 70px; overflow: hidden; }
.header-logo { width: 190px; max-width: none; height: auto; filter: drop-shadow(0 5px 8px rgba(0,0,0,.25)); transform: translateY(-27px); }
.brand-mark { display: grid; width: 45px; aspect-ratio: 1; place-items: center; color: white; background: var(--color-navy); border: 2px solid var(--color-green); border-radius: 50%; font-family: var(--font-display); font-size: 1rem; font-weight: 800; letter-spacing: -.12em; box-shadow: inset 0 0 0 3px var(--color-navy), inset 0 0 0 5px rgba(142,203,34,.45); }
.brand-mark span, .brand-copy strong span { color: var(--color-green); }
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font-size: 1.25rem; letter-spacing: -.04em; }
.brand-copy small { margin-top: 5px; font-size: .53rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 26px); font-size: .84rem; font-weight: 600; }
.nav-link { position: relative; padding: 12px 0; color: rgba(255,255,255,.82); }
.nav-link::after { position: absolute; right: 0; bottom: 7px; left: 0; height: 2px; background: var(--color-primary); content: ''; transform: scaleX(0); transform-origin: right; transition: transform .2s ease; }
.nav-link:hover { color: white; }.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; width: 46px; height: 44px; padding: 10px; background: transparent; border: 0; }
.menu-toggle i { display: block; height: 2px; margin: 5px 0; background: currentColor; transition: transform .2s, opacity .2s; }

.hero { position: relative; min-height: 900px; padding: 180px 0 0; color: white; background: var(--color-navy); overflow: hidden; }
.hero::before { position: absolute; width: 44vw; height: 44vw; top: -20vw; right: -10vw; background: radial-gradient(circle, rgba(142,219,0,.22), transparent 67%); content: ''; }
.hero-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to right, transparent, black 40%); transform: perspective(600px) rotateX(65deg) translateY(45%); transform-origin: bottom; }
.hero-layout { position: relative; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 70px; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { max-width: 760px; margin-bottom: 26px; }
.hero h1 em { display: inline-block; }
.hero-lead { max-width: 585px; color: #b9c7d2; font-size: clamp(1rem, 1.4vw, 1.16rem); }
.hero-actions { display: flex; align-items: center; gap: 28px; margin: 36px 0 46px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; color: white; font-weight: 600; }
.text-link span { color: var(--color-primary); }
.hero-proof { display: flex; align-items: center; gap: 15px; color: #b9c7d2; font-size: .75rem; line-height: 1.4; }
.hero-proof strong { color: white; font-size: .82rem; }
.avatars { display: flex; }
.avatars i { display: grid; width: 32px; height: 32px; place-items: center; margin-right: -8px; color: var(--color-navy); background: var(--color-mist); border: 2px solid var(--color-navy); border-radius: 50%; font-size: .58rem; font-style: normal; font-weight: 800; }
.avatars i:nth-child(2) { background: var(--color-primary); }.avatars i:nth-child(3) { background: var(--color-green); }

.fleet-visual { position: relative; min-height: 570px; }
.map-board { position: absolute; inset: 20px 0 40px; overflow: hidden; background: #dce6e7; border: 9px solid #102738; border-radius: 25px; box-shadow: 0 40px 80px rgba(0,0,0,.35); transform: perspective(1000px) rotateY(-4deg) rotateX(1deg); }
.map-board::before { position: absolute; inset: 54px 0 0; background-image: linear-gradient(27deg, transparent 44%, rgba(255,255,255,.9) 45%, rgba(255,255,255,.9) 48%, transparent 49%), linear-gradient(-32deg, transparent 44%, rgba(255,255,255,.8) 45%, rgba(255,255,255,.8) 48%, transparent 49%); background-size: 170px 130px, 220px 160px; content: ''; opacity: .55; }
.map-topbar { position: relative; z-index: 2; display: flex; height: 55px; align-items: center; justify-content: space-between; padding: 0 22px; color: white; background: #102738; font-size: .78rem; }
.map-topbar span { display: flex; align-items: center; gap: 8px; font-weight: 700; }.map-topbar i { width: 7px; height: 7px; background: var(--color-green); border-radius: 50%; }.map-topbar small { color: #91a4b2; }
.map-routes { position: absolute; inset: 50px 0 80px; width: 100%; height: calc(100% - 130px); }
.road { fill: none; stroke: white; stroke-width: 9; opacity: .8; }
.route-line { fill: none; stroke: var(--color-primary); stroke-dasharray: 12 8; stroke-linecap: round; stroke-width: 6; animation: routeMove 12s linear infinite; }
.route-dot { fill: white; stroke: var(--color-primary); stroke-width: 6; }
@keyframes routeMove { to { stroke-dashoffset: -200; } }
.map-pin { position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px; color: var(--color-navy); font-size: .55rem; line-height: 1.25; }
.map-pin > span { display: grid; width: 31px; height: 31px; place-items: center; color: white; background: var(--color-navy); border: 3px solid white; border-radius: 50% 50% 50% 3px; font-size: .6rem; font-weight: 800; transform: rotate(-45deg); box-shadow: 0 5px 12px rgba(7,19,13,.25); }.map-pin > span::first-letter { transform: rotate(45deg); }.map-pin small { padding: 5px 7px; background: rgba(255,255,255,.9); border-radius: 5px; box-shadow: 0 3px 12px rgba(7,19,13,.1); }.map-pin b { color: #4e8200; }.pin-one { bottom: 22%; left: 13%; }.pin-two { top: 30%; right: 12%; }.pin-three { top: 47%; left: 43%; }
.fleet-stats { position: absolute; z-index: 3; right: 14px; bottom: 14px; left: 14px; display: grid; grid-template-columns: repeat(4,1fr); padding: 12px; color: var(--color-navy); background: rgba(255,255,255,.94); border-radius: 10px; box-shadow: 0 8px 25px rgba(7,19,13,.12); }
.fleet-stats div { display: grid; justify-items: center; border-right: 1px solid #dfe7eb; }.fleet-stats div:last-child { border: 0; }.fleet-stats strong { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }.fleet-stats span { color: var(--color-muted); font-size: .55rem; }
.vehicle-card, .signal-card { position: absolute; z-index: 5; display: flex; align-items: center; color: var(--color-navy); background: white; box-shadow: var(--shadow); }
.vehicle-card { right: -30px; bottom: 8px; gap: 12px; min-width: 290px; padding: 15px 17px; border-left: 4px solid var(--color-primary); border-radius: 8px; }.vehicle-icon { font-size: 1.6rem; transform: scaleX(1.5); }.vehicle-card div { display: grid; margin-right: auto; }.vehicle-card small { color: var(--color-muted); font-size: .58rem; }.vehicle-card strong { font-size: .78rem; }.vehicle-card > b { font-size: .65rem; }
.signal-card { top: 0; left: -24px; gap: 11px; padding: 11px 15px; border-radius: 8px; }.signal-card div { display: grid; }.signal-card strong { font-size: .72rem; }.signal-card small { color: var(--color-muted); font-size: .55rem; }.pulse-dot { position: relative; width: 10px; height: 10px; background: var(--color-green); border-radius: 50%; }.pulse-dot::after { position: absolute; inset: -5px; border: 1px solid var(--color-green); border-radius: 50%; content: ''; animation: pulse 2s infinite; }@keyframes pulse { 50% { transform: scale(1.4); opacity: 0; } }
.trust-strip { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 70px; padding: 24px 30px; color: var(--color-ink); background: white; border-radius: 8px 8px 0 0; box-shadow: var(--shadow); }
.trust-strip > div { display: flex; align-items: center; gap: 13px; padding: 0 20px; border-right: 1px solid #e0e7eb; }.trust-strip > div:last-child { border: 0; }.trust-strip > div > span { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; color: var(--color-primary); background: #efffd4; border-radius: 50%; font-size: .72rem; font-weight: 800; }.trust-strip p { display: grid; margin: 0; color: var(--color-muted); font-size: .62rem; line-height: 1.4; }.trust-strip strong { color: var(--color-ink); font-size: .76rem; }

.features-section { background: #f7fafb; }
.section-heading { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 80px; margin-bottom: 54px; }.section-heading h2 { margin: 0; }.section-heading > p { max-width: 440px; margin-bottom: 4px; color: var(--color-muted); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-card { position: relative; display: grid; min-height: 245px; align-content: space-between; padding: 28px; background: white; border: 1px solid #e2e9ed; border-radius: var(--radius-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }.feature-card small { color: var(--color-primary-dark); font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.feature-card h3 { margin: 7px 0 10px; }.feature-card p { color: var(--color-muted); font-size: .86rem; line-height: 1.55; }.icon-box { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 32px; color: var(--color-primary); background: #efffd4; border-radius: 8px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }.feature-main { grid-column: span 2; grid-template-columns: auto 1fr; gap: 24px; align-content: center; color: white; background: var(--color-navy); border-color: var(--color-navy); }.feature-main .icon-box { width: 60px; height: 60px; margin: 0; }.feature-main p { max-width: 500px; color: #b9c7d2; }.feature-main small { color: #b9f04d; }.feature-arrow { position: absolute; top: 20px; right: 24px; color: var(--color-primary); font-size: 1.5rem; }
@media (hover:hover) { .feature-card:hover { z-index: 2; border-color: rgba(142,219,0,.45); box-shadow: 0 20px 50px rgba(7,19,13,.09); transform: translateY(-5px); } }

.savings-section { color: white; background: var(--color-navy); }
.savings-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(60px,8vw,120px); }
.savings-intro { position: sticky; top: 120px; align-self: start; }.savings-intro > p:not(.eyebrow) { max-width: 500px; color: #9fb0bd; }.metric-card { display: grid; grid-template-columns: auto 1fr; align-items: end; margin-top: 50px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.15); }.metric-card > span { grid-column: 1/-1; color: #9fb0bd; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }.metric-card strong { margin-right: 22px; color: var(--color-primary); font-family: var(--font-display); font-size: 5.4rem; line-height: 1; }.metric-card p { max-width: 190px; margin-bottom: 9px; color: #aebbc5; font-size: .73rem; line-height: 1.4; }
.savings-list { border-top: 1px solid rgba(255,255,255,.14); }.saving-item { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 22px; min-height: 145px; border-bottom: 1px solid rgba(255,255,255,.14); }.saving-item > span { color: var(--color-primary); font-family: var(--font-display); font-size: .75rem; }.saving-item h3 { margin: 0 0 8px; font-size: 1.8rem; }.saving-item p { max-width: 520px; margin: 0; color: #9fb0bd; font-size: .84rem; }.saving-item > b { padding: 6px 9px; color: #9fb0bd; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; }

.diagnostics-section { background: var(--color-mist); }
.diagnostic-panel { position: relative; display: grid; grid-template-columns: 1fr .9fr; min-height: 670px; overflow: hidden; color: white; background: linear-gradient(125deg, #123147, var(--color-navy) 58%); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.diagnostic-panel::before { position: absolute; right: -100px; bottom: -240px; width: 600px; height: 600px; border: 1px solid rgba(142,219,0,.2); border-radius: 50%; box-shadow: 0 0 0 60px rgba(142,219,0,.035),0 0 0 120px rgba(142,219,0,.025); content: ''; }
.diagnostic-copy { position: relative; z-index: 2; padding: clamp(50px,7vw,90px); }.diagnostic-copy > p:not(.eyebrow) { max-width: 530px; color: #b3c1cb; }.diagnostic-copy ul { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 30px 0 36px; padding: 0; list-style: none; font-size: .76rem; }.diagnostic-copy li { display: flex; gap: 10px; }.diagnostic-copy li span { color: var(--color-green); font-weight: 800; }
.diagnostic-visual { position: relative; min-height: 600px; }.phone-shell { position: absolute; z-index: 2; width: 260px; height: 510px; right: 12%; bottom: -40px; padding: 10px; background: #02070b; border: 3px solid #354653; border-radius: 38px; box-shadow: 0 30px 70px rgba(0,0,0,.6); transform: rotate(4deg); }.phone-screen { height: 100%; padding: 18px; background: #071622; border-radius: 27px; }.phone-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 38px; font-size: .72rem; }.phone-head i { width: 6px; height: 6px; background: var(--color-green); border-radius: 50%; }.phone-screen > p { margin-bottom: 0; color: #788e9f; font-size: .5rem; letter-spacing: .18em; }.phone-screen h3 { margin: 3px 0; color: var(--color-warning); font-size: 2.2rem; }.phone-screen h4 { margin: 0 0 35px; font-size: .72rem; font-weight: 500; line-height: 1.5; }.health-row { display: flex; justify-content: space-between; padding: 15px 0; border-top: 1px solid #1d3241; font-size: .55rem; }.health-row span { color: #8da0ae; }.health-row b { color: var(--color-green); }
.scanner { position: absolute; z-index: 3; right: 43%; bottom: 80px; display: grid; width: 170px; height: 90px; place-items: center; color: var(--color-green); background: linear-gradient(150deg,#172b37,#03090d); border: 1px solid #4d5d66; border-radius: 10px 10px 20px 20px; box-shadow: 0 24px 45px rgba(0,0,0,.45); transform: rotate(-14deg); }.scanner span { font-family: var(--font-display); font-weight: 800; }.scanner i { width: 70%; height: 6px; background: repeating-linear-gradient(90deg,#555 0 5px,transparent 5px 8px); }.scanner small { color: #72848f; font-size: .4rem; letter-spacing: .18em; }

.about-section { background: white; }.about-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(60px,8vw,130px); align-items: start; }.about-statement { padding-right: 40px; border-right: 1px solid #dce5e9; }.about-copy > p { max-width: 660px; color: var(--color-muted); font-size: 1.1rem; }.about-points { display: grid; grid-template-columns: 1fr 1fr; margin-top: 50px; border-top: 1px solid #dce5e9; }.about-points div { display: flex; gap: 18px; padding: 22px 5px; border-bottom: 1px solid #dce5e9; }.about-points strong { color: var(--color-primary); font-family: var(--font-display); font-size: .72rem; }.about-points span { font-size: .82rem; font-weight: 600; }
.contact-section { padding-top: 0; background: white; }.contact-panel { display: grid; grid-template-columns: 1fr 1fr; min-height: 470px; color: white; background: var(--color-primary); border-radius: var(--radius-md); overflow: hidden; }.contact-copy { display: grid; align-content: center; padding: clamp(50px,7vw,85px); }.contact-copy .eyebrow { color: white; }.contact-copy h2 { margin-bottom: 15px; }.contact-copy p:last-child { max-width: 480px; color: rgba(255,255,255,.8); }.contact-actions { display: grid; background: var(--color-navy); }.contact-actions a { display: grid; grid-template-columns: 1fr auto; align-content: center; padding: 28px clamp(30px,5vw,60px); border-bottom: 1px solid rgba(255,255,255,.12); }.contact-actions a:last-child { border: 0; }.contact-actions span { grid-column: 1/-1; color: #91a3b0; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }.contact-actions strong { margin-top: 6px; font-size: clamp(.82rem,1.4vw,1rem); }.contact-actions b { grid-row: 2; grid-column: 2; color: var(--color-primary); font-size: 1.2rem; }

.site-footer { padding: 70px 0 25px; color: #9babb6; background: #04121e; font-size: .76rem; }.footer-grid { display: grid; grid-template-columns: 1.3fr .65fr 1fr .75fr; gap: 60px; }.brand-footer { color: white; }.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }.footer-grid > div:first-child p { margin-top: 14px; }.footer-grid > div > strong { margin-bottom: 9px; color: white; font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; }.footer-grid a:hover { color: white; }.footer-platform { margin-top: 10px; color: var(--color-primary); font-weight: 700; }.footer-bottom { display: flex; justify-content: space-between; margin-top: 60px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: .62rem; }

@media (max-width: 1050px) { .site-nav { gap: 13px; }.nav-link { font-size: .75rem; }.hero-layout { gap: 35px; }.fleet-visual { min-height: 500px; }.hero { min-height: 820px; }.vehicle-card { right: -10px; }.diagnostic-copy { padding-right: 30px; } }
@media (max-width: 900px) {
  .menu-toggle { display: block; }.site-nav { position: absolute; top: 78px; right: 0; left: 0; display: grid; padding: 18px 24px 25px; background: var(--color-navy); border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity .2s, transform .2s; }.nav-open .site-nav { opacity: 1; pointer-events: auto; transform: none; }.nav-open .menu-toggle i:first-of-type { transform: translateY(7px) rotate(45deg); }.nav-open .menu-toggle i:nth-of-type(2) { opacity: 0; }.nav-open .menu-toggle i:last-of-type { transform: translateY(-7px) rotate(-45deg); }.nav-link { padding: 9px 0; font-size: .95rem; }.nav-login { justify-self: start; margin-top: 7px; }
  .hero { padding-top: 145px; }.hero-layout { grid-template-columns: 1fr; }.hero-copy { max-width: 700px; }.fleet-visual { min-height: 560px; }.map-board { inset-inline: 3%; }.signal-card { left: 0; }.vehicle-card { right: 0; }.trust-strip { grid-template-columns: 1fr 1fr; }.trust-strip > div { padding: 12px 18px; }.trust-strip > div:nth-child(2) { border-right: 0; }
  .section-heading { grid-template-columns: 1fr; gap: 24px; }.feature-grid { grid-template-columns: 1fr 1fr; }.feature-main { grid-column: span 2; }
  .savings-layout, .about-layout { grid-template-columns: 1fr; }.savings-intro { position: static; }.metric-card { max-width: 520px; }.about-statement { padding: 0; border: 0; }
  .diagnostic-panel { grid-template-columns: 1fr; }.diagnostic-visual { min-height: 560px; }.phone-shell { right: 18%; }.scanner { right: 50%; }
  .contact-panel { grid-template-columns: 1fr; }.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .header-inner { min-height: 70px; }.site-nav { top: 70px; }.brand-header { width: 155px; height: 60px; }.header-logo-frame { width: 155px; height: 60px; }.header-logo { width: 165px; transform: translate(-5px, -23px); }.brand-copy strong { font-size: 1.05rem; }.brand-mark { width: 40px; }
  .hero { min-height: 0; padding-top: 130px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }.fleet-visual { min-height: 430px; margin-top: 15px; }.map-board { inset: 30px 0 38px; border-width: 6px; }.map-topbar { padding: 0 12px; }.map-pin small { display: none; }.fleet-stats { grid-template-columns: 1fr 1fr; gap: 10px; }.fleet-stats div:nth-child(2) { border: 0; }.vehicle-card { right: -6px; bottom: 4px; min-width: 235px; padding: 11px; }.signal-card { left: -4px; }.trust-strip { grid-template-columns: 1fr; margin-top: 40px; padding: 18px; }.trust-strip > div, .trust-strip > div:nth-child(2) { padding: 12px 5px; border-right: 0; border-bottom: 1px solid #e0e7eb; }.trust-strip > div:last-child { border: 0; }
  .feature-grid { grid-template-columns: 1fr; }.feature-main { grid-column: auto; grid-template-columns: 1fr; }.feature-main .icon-box { margin-bottom: 15px; }.feature-card { min-height: 220px; }
  .saving-item { grid-template-columns: 35px 1fr; padding: 20px 0; }.saving-item > b { display: none; }.metric-card strong { font-size: 4.5rem; }
  .diagnostic-panel { width: calc(100% - 24px); border-radius: 18px; }.diagnostic-copy { padding: 45px 28px; }.diagnostic-copy ul { grid-template-columns: 1fr; }.diagnostic-visual { min-height: 510px; }.phone-shell { right: 4%; }.scanner { right: 46%; width: 140px; }
  .about-points { grid-template-columns: 1fr; }.contact-panel { width: calc(100% - 24px); }.contact-copy { padding: 48px 28px; }.contact-actions a { padding: 25px 28px; }.contact-actions strong { overflow-wrap: anywhere; }
  .footer-grid { grid-template-columns: 1fr; gap: 35px; }.footer-bottom { gap: 20px; flex-direction: column; }.section-heading { margin-bottom: 36px; }
}