@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Hanken+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --primary:#006877;--primary-dim:#00daf8;--primary-dark:#004f5c;
  --on-surface:#0d1a1c;--surface:#f9f9f9;--surface-container:#eeeeee;
  --outline-variant:#bac9cd;--secondary:#5e5e5e;
  --accent:#006877;--accent-rgb:0,104,119;
  --accent-soft:rgba(var(--accent-rgb),.10);
  --accent-border:rgba(var(--accent-rgb),.28);
  --font-display:'Geist',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --page-max:1200px;
  --section-gap:clamp(64px,10vw,120px);
  --margin-x:clamp(24px,5vw,80px);
}

body.product-time{--accent:#006877;--accent-rgb:0,104,119}
body.product-fleet{--accent:#b45309;--accent-rgb:180,83,9}

html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--surface);color:var(--on-surface);-webkit-font-smoothing:antialiased}

.container{max-width:var(--page-max);margin:0 auto;padding:0 var(--margin-x)}
section{padding:var(--section-gap) var(--margin-x)}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,5vw,5rem);font-weight:800}
h2{font-size:clamp(2rem,4vw,3.5rem);font-weight:700}
h3{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:600}
p{line-height:1.6}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 1.75rem;border-radius:.75rem;font-family:var(--font-display);font-weight:600;font-size:1rem;text-decoration:none;transition:all .2s ease;cursor:pointer;border:none}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 24px rgba(var(--accent-rgb),.35)}
.btn--secondary{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border)}
.btn--secondary:hover{background:var(--accent-border);transform:translateY(-2px)}
.btn--lg{padding:1.125rem 2.25rem;font-size:1.125rem}

.site-nav{position:sticky;top:0;z-index:100;background:rgba(249,249,249,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--outline-variant)}
.site-nav__inner{max-width:var(--page-max);margin:0 auto;padding:.875rem var(--margin-x);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.site-nav__logo{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--on-surface);text-decoration:none}
.site-nav__logo span{color:var(--accent)}
.site-nav__links{display:flex;gap:1.5rem;list-style:none}
.site-nav__links a{color:var(--secondary);text-decoration:none;font-weight:500;font-size:.9rem;transition:color .2s}
.site-nav__links a:hover{color:var(--accent)}
.site-nav__cta{font-size:.875rem;padding:.625rem 1.25rem}

.hero{min-height:min(760px,92vh);display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);gap:clamp(32px,5vw,72px);align-items:center;padding:72px var(--margin-x) 48px;max-width:var(--page-max);margin:0 auto}
.hero__eyebrow{font-size:.875rem;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}
.hero h1{max-width:11ch;margin-bottom:1.25rem}
.hero__lead{font-size:1.125rem;color:var(--secondary);max-width:44ch;margin-bottom:2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.trust-strip{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;list-style:none;font-size:.8125rem;color:var(--secondary)}
.trust-strip li{display:flex;align-items:center;gap:.35rem}
.trust-strip li::before{content:'·';color:var(--accent);font-weight:700}

.hero__dashboard{background:#fff;border-radius:1.25rem;box-shadow:0 24px 64px rgba(0,0,0,.1);padding:1.5rem;display:flex;flex-direction:column;gap:1rem;border:1px solid var(--outline-variant)}
.dash-widget{background:var(--surface-container);border-radius:.75rem;padding:1rem;font-size:.8125rem}
.dash-widget__label{font-size:.6875rem;font-weight:600;color:var(--secondary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem}
.dash-widget__value{font-family:var(--font-display);font-weight:700;font-size:1.125rem;color:var(--on-surface)}
.dash-widget--alert .dash-widget__value{color:#b45309}
.dash-widget--ok .dash-widget__value{color:#15803d}
.dash-widget__donut{display:flex;gap:.5rem;align-items:center;font-size:.75rem}
.donut-legend span{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.25rem}

.trust-bar{background:var(--surface-container);padding:1.25rem 0;overflow:hidden;border-top:1px solid var(--outline-variant);border-bottom:1px solid var(--outline-variant)}
.marquee-track{display:flex;gap:3rem;animation:marquee 30s linear infinite;width:max-content}
.marquee-track__item{white-space:nowrap;font-weight:600;font-size:.875rem;color:var(--secondary);display:flex;align-items:center;gap:.5rem}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

.pain-split{display:grid;grid-template-columns:1fr 1fr;gap:2px;border-radius:1rem;overflow:hidden;max-width:900px;margin:0 auto}
.pain-split__side{padding:2.5rem}
.pain-split__side--bad{background:#fff5f5;border:1px solid #fecdd3}
.pain-split__side--bad h3{color:#dc2626}
.pain-split__side--good{background:var(--accent-soft);border:1px solid var(--accent-border)}
.pain-split__side--good h3{color:var(--accent)}
.pain-split__list{list-style:none;margin-top:1rem;display:flex;flex-direction:column;gap:.625rem;font-size:.9rem}
.pain-split__list li{display:flex;gap:.5rem}
.pain-split__list li::before{flex-shrink:0}
.pain-split__side--bad .pain-split__list li::before{content:'✗';color:#dc2626}
.pain-split__side--good .pain-split__list li::before{content:'✓';color:var(--accent)}

.roi-calc{background:#fff;border-radius:1.25rem;padding:2.5rem;box-shadow:0 8px 32px rgba(0,0,0,.07);border:1px solid var(--outline-variant);max-width:760px;margin:0 auto}
.roi-calc__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem}
.roi-field label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.5rem;color:var(--on-surface)}
.roi-field input[type=range]{width:100%;accent-color:var(--accent)}
.roi-field input[type=number]{width:100%;padding:.5rem .75rem;border:1px solid var(--outline-variant);border-radius:.5rem;font-family:var(--font-body);font-size:.9rem}
.roi-field__val{font-size:.8125rem;color:var(--secondary);margin-top:.25rem}
.roi-result{background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:1rem;padding:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}
.roi-result__item{text-align:center}
.roi-result__item strong{display:block;font-family:var(--font-display);font-size:1.75rem;font-weight:800;color:var(--accent)}
.roi-result__item span{font-size:.8125rem;color:var(--secondary)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.step{position:relative;padding:2rem;background:#fff;border-radius:1rem;border:1px solid var(--outline-variant)}
.step__num{font-family:var(--font-display);font-size:2.5rem;font-weight:800;color:var(--accent-soft);line-height:1;margin-bottom:1rem}
.step h3{font-size:1.125rem;margin-bottom:.5rem}
.step p{font-size:.9rem;color:var(--secondary)}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}
.feature-card{background:#fff;border-radius:1rem;padding:1.75rem;border:1px solid var(--outline-variant);transition:box-shadow .2s,border-color .2s}
.feature-card:hover{box-shadow:0 8px 24px rgba(var(--accent-rgb),.12);border-color:var(--accent-border)}
.feature-card__icon{width:3rem;height:3rem;background:var(--accent-soft);border-radius:.75rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--accent);flex-shrink:0}
.feature-card__icon svg{width:1.5rem;height:1.5rem;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feature-card h3{font-size:1rem;margin-bottom:.5rem}
.feature-card p{font-size:.875rem;color:var(--secondary)}

.comparison-table{width:100%;border-collapse:collapse;background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.comparison-table th,.comparison-table td{padding:1rem 1.25rem;text-align:left;font-size:.9rem;border-bottom:1px solid var(--outline-variant)}
.comparison-table th{background:var(--surface-container);font-family:var(--font-display);font-weight:700}
.comparison-table th:last-child{background:var(--accent);color:#fff}
.comparison-table td:last-child{background:var(--accent-soft);font-weight:600;color:var(--accent)}
.comparison-table .check{color:#15803d;font-weight:700}
.comparison-table .cross{color:#dc2626}

.pricing-toggle{display:flex;align-items:center;gap:.75rem;justify-content:center;margin-bottom:2.5rem}
.pricing-toggle label{font-weight:600;cursor:pointer}
.toggle-switch{width:3rem;height:1.625rem;background:var(--outline-variant);border-radius:999px;position:relative;cursor:pointer;transition:background .2s}
.toggle-switch.active{background:var(--accent)}
.toggle-switch::after{content:'';position:absolute;top:.1875rem;left:.1875rem;width:1.25rem;height:1.25rem;background:#fff;border-radius:50%;transition:transform .2s}
.toggle-switch.active::after{transform:translateX(1.375rem)}
.pricing-badge{background:var(--accent);color:#fff;font-size:.6875rem;font-weight:700;padding:.2rem .5rem;border-radius:999px;margin-left:.5rem}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;max-width:900px;margin:0 auto}
.pricing-card{background:#fff;border-radius:1.25rem;padding:2rem;border:1px solid var(--outline-variant)}
.pricing-card--featured{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.pricing-card__price{font-family:var(--font-display);font-size:2.25rem;font-weight:800;color:var(--on-surface);margin:1rem 0 .25rem}
.pricing-card__price sup{font-size:1rem;vertical-align:top;margin-top:.5rem}
.pricing-card__period{font-size:.875rem;color:var(--secondary)}
.pricing-card__features{list-style:none;margin:1.5rem 0;display:flex;flex-direction:column;gap:.75rem;font-size:.9rem}
.pricing-card__features li{display:flex;gap:.5rem}
.pricing-card__features li::before{content:'✓';color:var(--accent);flex-shrink:0}

.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.testimonial-card{background:#fff;border-radius:1rem;padding:1.75rem;border:1px solid var(--outline-variant)}
.testimonial-card__quote{font-size:.9375rem;line-height:1.65;margin-bottom:1.25rem;color:var(--on-surface)}
.testimonial-card__author{display:flex;flex-direction:column;gap:.1rem}
.testimonial-card__name{font-weight:600;font-size:.875rem}
.testimonial-card__role{font-size:.8125rem;color:var(--secondary)}

.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:.75rem}
.faq-item{background:#fff;border-radius:.875rem;border:1px solid var(--outline-variant);overflow:hidden}
.faq-item summary{padding:1.25rem 1.5rem;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-display)}
.faq-item summary::after{content:'+';font-size:1.25rem;color:var(--accent);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item__body{padding:0 1.5rem 1.25rem;font-size:.9rem;color:var(--secondary);line-height:1.65}

.final-cta{background:var(--primary);color:#fff;text-align:center;border-radius:1.5rem;padding:4rem var(--margin-x);margin:0 var(--margin-x)}
.final-cta h2{color:#fff;margin-bottom:1rem}
.final-cta p{opacity:.85;margin-bottom:2rem;max-width:52ch;margin-left:auto;margin-right:auto}
.final-cta .btn--primary{background:#fff;color:var(--primary)}
.final-cta .btn--secondary{border-color:rgba(255,255,255,.4);color:#fff}

.site-footer{background:var(--surface-container);padding:2.5rem var(--margin-x);margin-top:var(--section-gap)}
.site-footer__inner{max-width:var(--page-max);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;font-size:.875rem;color:var(--secondary)}
.site-footer__links{display:flex;gap:1.5rem;list-style:none}
.site-footer__links a{color:var(--secondary);text-decoration:none}
.site-footer__links a:hover{color:var(--accent)}
.cross-sell{background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:.75rem;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem}
.cross-sell p{font-size:.9rem}
.cross-sell a{font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap}

@media(max-width:767px){
  body{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .mobile-sticky-cta{position:fixed;bottom:0;left:0;right:0;padding:1rem 1.5rem calc(1rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--outline-variant);z-index:50;display:flex;gap:.75rem}
  .mobile-sticky-cta .btn{flex:1;justify-content:center;padding:.75rem 1rem;font-size:.875rem}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:2.5rem}
  .hero__dashboard{display:none}
  .pain-split{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .roi-calc__grid{grid-template-columns:1fr}
  .roi-result{grid-template-columns:1fr}
  .final-cta{border-radius:.75rem;margin:0 1rem}
  .site-nav__links{display:none}
}

.section-header{text-align:center;margin-bottom:3rem}
.section-header h2{margin-bottom:.75rem}
.section-header p{color:var(--secondary);font-size:1.0625rem;max-width:56ch;margin:0 auto}

.integration-grid{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}
.integration-badge{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;background:#fff;border-radius:.875rem;border:1px solid var(--outline-variant);font-weight:600;font-size:.9rem}
.integration-badge__icon{width:2rem;height:2rem;border-radius:.375rem;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);font-size:.75rem;font-family:var(--font-mono)}

.risk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.5rem}
.risk-item{display:flex;gap:1rem;align-items:flex-start}
.risk-item__icon{width:2.5rem;height:2.5rem;border-radius:.625rem;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.25rem}
.risk-item h4{font-size:1rem;margin-bottom:.25rem}
.risk-item p{font-size:.875rem;color:var(--secondary)}

*:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}