/* =================================================================
   1-800-AUTO-TOW — Design System  ·  "Dispatch Command"
   One edit to :root re-themes the whole site.
   ================================================================= */

:root{
  /* — Surfaces — */
  --ink:        #070B14;   /* page background */
  --panel:      #0D1524;   /* cards, sections */
  --panel-2:    #131E33;   /* raised cards, nav-on-scroll */
  --panel-3:    #18243d;   /* hover raise */
  --hairline:   #1E2C45;   /* borders, dividers */
  --hairline-2: #2a3a59;

  /* — Brand — */
  --orange:     #FF8A1E;   /* primary action + brand (matches logo) */
  --orange-2:   #F26C0D;   /* gradient end / hover */
  --orange-soft:#ffae5e;
  --green:      #22E0A1;   /* live / verified / tracking */
  --green-2:    #14b886;
  --danger:     #FF5468;

  /* — Text — */
  --text:       #EAF0FA;
  --muted:      #94A3BD;
  --muted-2:    #66748f;

  /* — Type — */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* — Shape — */
  --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 30px;
  --shadow:    0 18px 50px -20px rgba(0,0,0,.7);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,.85);
  --glow-orange: 0 0 0 1px rgba(255,138,30,.35), 0 14px 40px -12px rgba(255,138,30,.45);
  --glow-green:  0 0 0 1px rgba(34,224,161,.3), 0 14px 36px -14px rgba(34,224,161,.4);

  /* — Layout — */
  --container: 1240px;
  --gutter: clamp(1.1rem, 4vw, 2.4rem);
  --nav-h: 76px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lenis, html.lenis body{ scroll-behavior:auto !important; }   /* Lenis guard */
body{
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--text);
  line-height:1.6;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
ul{ list-style:none; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-.02em; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:4px; }
::selection{ background:rgba(255,138,30,.3); color:#fff; }

/* ---------- Atmosphere ---------- */
body::before{ /* aurora glow */
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(255,138,30,.10), transparent 60%),
    radial-gradient(820px 600px at 8% 4%, rgba(34,224,161,.08), transparent 58%),
    radial-gradient(1000px 800px at 50% 120%, rgba(20,40,90,.4), transparent 60%);
}
body::after{ /* film grain */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding:clamp(4rem,9vw,8rem) 0; position:relative; }
.section--tight{ padding:clamp(3rem,6vw,5rem) 0; }
.center{ text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-display); font-size:.78rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--green);
  margin-bottom:1.1rem;
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); animation:pulse 2s var(--ease) infinite; }
.eyebrow--orange{ color:var(--orange-soft); }
.eyebrow--orange::before{ background:var(--orange); box-shadow:0 0 12px var(--orange); }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

h1{ font-size:clamp(2.4rem,6.2vw,4.6rem); }
h2{ font-size:clamp(1.9rem,4vw,3rem); }
h3{ font-size:clamp(1.2rem,2vw,1.5rem); }
.lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--muted); max-width:62ch; }
.section-head{ max-width:62ch; }
.section-head.center{ margin-inline:auto; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- Buttons ---------- */
.btn{
  --b:var(--orange);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.6rem; border-radius:999px; font-family:var(--font-display);
  font-weight:600; font-size:1rem; letter-spacing:-.01em; line-height:1;
  position:relative; overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space:nowrap; will-change:transform;
}
.btn svg{ width:1.15em; height:1.15em; }
.btn--primary{ background:linear-gradient(135deg,var(--orange),var(--orange-2)); color:#1a0e00; box-shadow:var(--glow-orange); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,138,30,.5), 0 20px 46px -12px rgba(255,138,30,.6); }
.btn--ghost{ background:rgba(255,255,255,.04); color:var(--text); box-shadow:inset 0 0 0 1px var(--hairline-2); }
.btn--ghost:hover{ background:rgba(255,255,255,.08); transform:translateY(-2px); }
.btn--green{ background:linear-gradient(135deg,var(--green),var(--green-2)); color:#03281c; box-shadow:var(--glow-green); }
.btn--green:hover{ transform:translateY(-2px); }
.btn--lg{ padding:1.15rem 2rem; font-size:1.08rem; }
.btn--block{ width:100%; }
/* sheen sweep */
.btn--primary::after,.btn--green::after{
  content:""; position:absolute; top:0; left:-90%; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg); transition:left .6s var(--ease);
}
.btn--primary:hover::after,.btn--green:hover::after{ left:130%; }

/* ---------- Pills / badges ---------- */
.pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .9rem; border-radius:999px;
  font-size:.82rem; font-weight:600; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--hairline); color:var(--muted); }
.pill--live{ color:var(--green); box-shadow:inset 0 0 0 1px rgba(34,224,161,.3); }
.pill--live .dot{ width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.8s infinite; }
.badge-verified{ display:inline-flex; align-items:center; gap:.35rem; color:var(--green); font-weight:600; font-size:.85rem; }
.badge-verified svg{ width:1em;height:1em; }

/* ---------- Cards ---------- */
.card{
  position:relative; background:var(--panel); border-radius:var(--r-lg);
  padding:1.7rem; box-shadow:inset 0 0 0 1px var(--hairline);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.card::before{ /* hairline of light */
  content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,138,30,.5),transparent); opacity:.7;
}
.card:hover{ transform:translateY(-5px); background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--hairline-2), var(--shadow); }
.card__icon{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.1rem;
  background:radial-gradient(circle at 30% 20%, rgba(255,138,30,.22), rgba(255,138,30,.06)); box-shadow:inset 0 0 0 1px rgba(255,138,30,.25); }
.card__icon svg{ width:26px; height:26px; stroke:var(--orange); fill:none; stroke-width:1.7; }
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--muted); font-size:.97rem; }
.card__link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem; color:var(--orange-soft); font-weight:600; font-size:.92rem; }
.card__link svg{ width:1em;height:1em;transition:transform .25s var(--ease); }
.card:hover .card__link svg{ transform:translateX(4px); }

.grid{ display:grid; gap:1.3rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Stat row ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.stat{ padding:1.2rem 1.4rem; position:relative; text-align:center; }
.stat + .stat::before{ content:""; position:absolute; left:0; top:18%; height:64%; width:1px;
  background:linear-gradient(180deg,transparent,var(--hairline-2),transparent); }
.stat__num{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,3.4vw,2.8rem); color:#fff;
  background:linear-gradient(120deg,#fff,var(--orange-soft)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat__label{ color:var(--muted); font-size:.85rem; margin-top:.3rem; }

/* ---------- Quick answer / key facts / breadcrumb (AEO) ---------- */
.breadcrumb{ font-size:.85rem; color:var(--muted-2); padding:1.4rem 0 0; }
.breadcrumb a:hover{ color:var(--orange-soft); }
.breadcrumb span{ color:var(--muted); }
.quick-answer{ background:linear-gradient(135deg,rgba(34,224,161,.08),rgba(255,138,30,.05));
  box-shadow:inset 0 0 0 1px var(--hairline-2); border-radius:var(--r); padding:1.4rem 1.6rem; max-width:70ch; }
.quick-answer .qa-label{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); margin-bottom:.5rem; }
.quick-answer p:last-child{ color:var(--text); font-size:1.05rem; }
.key-facts{ width:100%; border-collapse:collapse; border-radius:var(--r); overflow:hidden; box-shadow:inset 0 0 0 1px var(--hairline); }
.key-facts th,.key-facts td{ text-align:left; padding:.85rem 1.1rem; border-bottom:1px solid var(--hairline); font-size:.95rem; }
.key-facts th{ background:var(--panel); color:var(--muted); font-weight:600; width:42%; }
.key-facts td{ background:rgba(255,255,255,.01); }
.key-facts tr:last-child th,.key-facts tr:last-child td{ border-bottom:none; }
.updated{ color:var(--muted-2); font-size:.82rem; }

/* ---------- FAQ ---------- */
.faqs{ max-width:820px; margin-inline:auto; }
.faq{ border-bottom:1px solid var(--hairline); }
.faq summary{ list-style:none; cursor:pointer; padding:1.25rem .25rem; display:flex; justify-content:space-between; gap:1rem;
  align-items:center; font-family:var(--font-display); font-weight:600; font-size:1.08rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--orange); font-size:1.5rem; line-height:1; transition:transform .3s var(--ease); }
.faq[open] summary::after{ transform:rotate(45deg); }
.faq p{ color:var(--muted); padding:0 .25rem 1.3rem; max-width:70ch; }

/* ---------- Reviews ---------- */
.review{ background:var(--panel); border-radius:var(--r-lg); padding:1.7rem; box-shadow:inset 0 0 0 1px var(--hairline); }
.review__stars{ color:var(--orange); letter-spacing:.1em; margin-bottom:.8rem; }
.review p{ font-size:1.04rem; }
.review__by{ display:flex; align-items:center; gap:.8rem; margin-top:1.2rem; }
.review__avatar{ width:42px;height:42px;border-radius:50%; display:grid;place-items:center; font-family:var(--font-display);
  font-weight:700; background:linear-gradient(135deg,var(--orange),var(--orange-2)); color:#1a0e00; }
.review__name{ font-weight:600; font-size:.95rem; } .review__src{ color:var(--muted-2); font-size:.8rem; }

/* ---------- Header / nav ---------- */
.topbar{ background:linear-gradient(90deg,rgba(255,138,30,.12),rgba(34,224,161,.06)); border-bottom:1px solid var(--hairline);
  font-size:.85rem; }
.topbar .container{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:.5rem; }
.topbar a{ color:var(--muted); }
.topbar .tb-call{ color:var(--green); font-weight:700; display:inline-flex; align-items:center; gap:.4rem; }
.topbar .tb-call svg{ width:1em;height:1em; }
.topbar .tb-left{ display:inline-flex; gap:.5rem; align-items:center; }

.site-header{ position:sticky; top:0; z-index:100; transition:background .3s, box-shadow .3s, backdrop-filter .3s; }
.site-header::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(7,11,20,.0); transition:background .3s; }
.site-header.scrolled{ background:rgba(9,14,26,.82); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--hairline), var(--shadow); }
.nav{ display:flex; align-items:center; gap:1.5rem; height:var(--nav-h); }
.nav__logo img{ height:34px; width:auto; }
.nav__links{ display:flex; gap:.3rem; margin-left:auto; }
.nav__links a{ padding:.55rem .85rem; border-radius:999px; color:var(--muted); font-weight:500; font-size:.95rem; transition:color .2s, background .2s; }
.nav__links a:hover,.nav__links a[aria-current="page"]{ color:var(--text); background:rgba(255,255,255,.05); }
.nav__cta{ display:flex; align-items:center; gap:.7rem; }
.nav__call{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:700; color:var(--text); }
.nav__call svg{ width:1.05em;height:1.05em; stroke:var(--orange); }
.nav__burger{ display:none; width:46px;height:46px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--hairline-2); align-items:center; justify-content:center; }
.nav__burger span{ display:block; width:20px;height:2px; background:var(--text); position:relative; }
.nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:20px;height:2px; background:var(--text); transition:transform .3s; }
.nav__burger span::before{ top:-6px; } .nav__burger span::after{ top:6px; }

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:200; background:rgba(5,8,15,.96); backdrop-filter:blur(8px);
  transform:translateY(-100%); transition:transform .45s var(--ease); padding:5.5rem var(--gutter) 2rem; overflow-y:auto; }
.drawer.open{ transform:translateY(0); }
.drawer a{ display:block; padding:1rem 0; border-bottom:1px solid var(--hairline); font-family:var(--font-display); font-size:1.3rem; }
.drawer .btn{ margin-top:1.5rem; }
.drawer__close{ position:absolute; top:1.4rem; right:var(--gutter); width:46px;height:46px; font-size:1.6rem; box-shadow:inset 0 0 0 1px var(--hairline-2); border-radius:12px; }
body.no-scroll{ overflow:hidden; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ position:relative; padding:calc(var(--nav-h) - 20px) 0 0; overflow:hidden; }
.page-hero__bg{ position:absolute; inset:0; z-index:-1;
  background:radial-gradient(900px 400px at 80% -20%,rgba(255,138,30,.14),transparent 60%),
             radial-gradient(700px 400px at 0% 0%,rgba(34,224,161,.08),transparent 55%); }
.page-hero .inner{ padding:clamp(2rem,5vw,3.5rem) 0 clamp(2.5rem,5vw,4rem); }
.page-hero h1{ max-width:18ch; }
.page-hero .lead{ margin-top:1.2rem; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:1.6rem; color:var(--muted); font-size:.9rem; }
.hero-trust span{ display:inline-flex; align-items:center; gap:.45rem; }
.hero-trust svg{ width:1.1em;height:1.1em; stroke:var(--green); fill:none; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }

/* ---------- Forms ---------- */
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:.4rem; font-weight:500; }
.field input,.field select,.field textarea{
  width:100%; padding:.9rem 1.05rem; border-radius:var(--r-sm); background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--hairline-2); color:var(--text); font:inherit; font-size:1rem; transition:box-shadow .2s; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; box-shadow:inset 0 0 0 1.5px var(--orange); }
.field textarea{ min-height:120px; resize:vertical; }
.form-note{ color:var(--muted-2); font-size:.82rem; margin-top:.6rem; }
.form-success{ display:none; padding:1.1rem 1.3rem; border-radius:var(--r); background:rgba(34,224,161,.1); box-shadow:inset 0 0 0 1px rgba(34,224,161,.35); color:var(--green); font-weight:600; }
.form-success.show{ display:block; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; background:linear-gradient(135deg,#10192c,#0b1322); border-radius:var(--r-xl);
  padding:clamp(2.5rem,5vw,4.5rem); box-shadow:inset 0 0 0 1px var(--hairline-2); text-align:center; }
.cta-band::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background:radial-gradient(600px 300px at 80% 0%,rgba(255,138,30,.18),transparent 60%),
            radial-gradient(500px 300px at 10% 100%,rgba(34,224,161,.12),transparent 60%); }
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ max-width:20ch; margin-inline:auto; }
.cta-band .lead{ margin:1rem auto 0; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2rem; }

/* ---------- Footer ---------- */
.site-footer{ position:relative; border-top:1px solid var(--hairline); margin-top:2rem; padding-top:clamp(3rem,6vw,5rem); overflow:hidden; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; }
.footer-brand img{ height:40px; margin-bottom:1.1rem; }
.footer-brand p{ color:var(--muted); font-size:.92rem; max-width:34ch; }
.footer-brand .addr{ color:var(--muted-2); font-size:.88rem; margin-top:1rem; font-style:normal; }
.footer-brand .addr a{ color:var(--green); font-weight:600; }
.footer-col h4{ font-family:var(--font-display); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-bottom:1rem; }
.footer-col a{ display:block; color:var(--muted); padding:.32rem 0; font-size:.92rem; }
.footer-col a:hover{ color:var(--orange-soft); }
.app-badges{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.4rem; }
.app-badges img{ height:42px; width:auto; }
.footer-watermark{ font-family:var(--font-display); font-weight:700; font-size:18vw; line-height:.8; color:transparent;
  -webkit-text-stroke:1px rgba(255,138,30,.07); text-stroke:1px rgba(255,138,30,.07); white-space:nowrap;
  margin:2rem 0 -3.5vw; pointer-events:none; user-select:none; }
.footer-legal{ border-top:1px solid var(--hairline); padding:1.5rem 0; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  color:var(--muted-2); font-size:.82rem; }
.footer-disclaimer{ color:var(--muted-2); font-size:.8rem; max-width:80ch; padding-bottom:1.5rem; }

/* ---------- Sticky mobile call bar ---------- */
.call-bar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none;
  background:rgba(9,14,26,.95); backdrop-filter:blur(12px); border-top:1px solid var(--hairline); padding:.7rem var(--gutter);
  gap:.7rem; }
.call-bar .btn{ flex:1; padding:.85rem; }

/* ---------- Custom cursor ---------- */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%;
  transform:translate(-50%,-50%); opacity:0; transition:opacity .3s; }
.cursor-dot{ width:7px; height:7px; background:var(--orange); }
.cursor-ring{ width:34px; height:34px; border:1.5px solid rgba(34,224,161,.7); transition:width .25s,height .25s,opacity .3s,border-color .25s; }
html.has-cursor.cursor-ready .cursor-dot,html.has-cursor.cursor-ready .cursor-ring{ opacity:1; }
html.has-cursor *{ cursor:none !important; }
html.has-cursor input,html.has-cursor textarea,html.has-cursor select{ cursor:auto !important; }
.cursor-ring.hover{ width:54px; height:54px; border-color:var(--orange); }
.cursor-ring.down{ width:26px; height:26px; }

/* ---------- Scroll reveal ---------- */
[data-reveal]{ opacity:0; }
.reveal-ready [data-reveal]{ } /* JS handles */

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .nav__links,.nav__cta .nav__call,.topbar .tb-left{ display:none; }
  .nav__burger{ display:flex; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3)::before{ display:none; }
  .footer-grid{ grid-template-columns:1fr; }
  .call-bar{ display:flex; }
  body{ padding-bottom:72px; }
  .footer-legal{ justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; }
}