/* GENERATED by `npm run sync:design` from design-system/. Do not edit here. */
/* FleetFixer marketing design tokens + base
   Imported by every marketing page (index, about, pricing, docs,
   contact, blog, blog-post, careers, news, legal, platforms, learn, games). */

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

:root{
  --accent:#15614A;
  --accent-2:#1C7A5C;
  --accent-light:#3FB680;
  --accent-glow:#6FD0A8;
  --accent-red:#15614A;
  --accent-red-dark:#0F4D3A;
  --bg:#F1F5EF;
  --panel:#ffffff;
  --stroke:#E1E9DD;
  --text:#14201B;
  --muted:#5A6B61;
  --radius:16px;
  --brand-gradient:linear-gradient(135deg,#0F4D3A 0%,#1C7A5C 55%,#3FB680 100%);
  --brand-gradient-soft:linear-gradient(135deg,#1C7A5C 0%,#6FD0A8 110%);
  --hero-dark:#0A1410;
}

html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}

/* Shared section layout */
.sec{padding:96px 24px}
.sec-inner{max-width:1200px;margin:0 auto}
.sec-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--accent);background:rgba(21,97,74,.07);
  padding:6px 14px;border-radius:99px;margin-bottom:16px;
}
.sec-title{font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:12px}
.sec-sub{font-size:17px;color:var(--muted);line-height:1.7;max-width:580px}
.sec-header{margin-bottom:56px}
.sec-header.center{text-align:center}
.sec-header.center .sec-sub{margin:0 auto}

@media(max-width:768px){
  .sec{padding:64px 20px}
  .sec-title{font-size:clamp(24px,5vw,36px)}
}