/* =================================================================
   Homepage + signature sections  — 1-800-AUTO-TOW
   ================================================================= */

/* ---------- HERO: WebGL live-map ---------- */
.hero{ position:relative; min-height:clamp(640px,94vh,940px); display:flex; align-items:center; isolation:isolate; overflow:hidden; }
.hero__poster, #hero-gl{ position:absolute; inset:0; width:100%; height:100%; }
.hero__poster{ z-index:0; background:
    radial-gradient(1100px 700px at 72% 18%, rgba(255,138,30,.22), transparent 55%),
    radial-gradient(900px 700px at 12% 90%, rgba(34,224,161,.14), transparent 55%),
    linear-gradient(180deg,#070B14,#0a1120 60%,#070B14); }
#hero-gl{ z-index:1; opacity:0; transition:opacity 1.2s ease; }
#hero-gl.ready{ opacity:1; }
.hero__grid{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(80,110,160,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(80,110,160,.05) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(circle at 50% 40%,#000,transparent 80%); }
.hero__content{ position:relative; z-index:3; width:100%; }
.hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.hero__left{ padding:4rem 0; }
.hero h1{ margin:1.2rem 0; }
.hero h1 .hl{ color:var(--orange); }
.hero h1 .ln{ display:block; }
.hero__sub{ font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--muted); max-width:48ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:.5rem .7rem; margin-top:2rem; }

/* fade in hero copy */
.hero__left > *{ opacity:0; transform:translateY(24px); animation:heroUp .9s var(--ease) forwards; }
.hero__left > *:nth-child(1){ animation-delay:.05s } .hero__left > *:nth-child(2){ animation-delay:.15s }
.hero__left > *:nth-child(3){ animation-delay:.25s } .hero__left > *:nth-child(4){ animation-delay:.35s }
.hero__left > *:nth-child(5){ animation-delay:.45s }
@keyframes heroUp{ to{ opacity:1; transform:none; } }

/* ---------- The signature interactive: Compare 3 Quotes simulation ---------- */
.sim{ position:relative; z-index:3; background:linear-gradient(170deg,rgba(19,30,51,.92),rgba(11,18,33,.94));
  border-radius:var(--r-xl); box-shadow:inset 0 0 0 1px var(--hairline-2), var(--shadow-lg); padding:1.4rem; backdrop-filter:blur(8px); }
.sim__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.3rem .5rem 1rem; border-bottom:1px solid var(--hairline); }
.sim__top .pill--live{ font-size:.76rem; }
.sim__title{ font-family:var(--font-display); font-weight:600; font-size:.95rem; }
.sim__title small{ display:block; color:var(--muted-2); font-weight:400; font-size:.78rem; }
.sim__step{ font-family:var(--font-display); font-size:.74rem; color:var(--muted-2); letter-spacing:.1em; }

.sim__body{ padding:1.2rem .5rem .5rem; min-height:330px; }
.sim__prompt{ font-size:.9rem; color:var(--muted); margin-bottom:1rem; }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.svc-btn{ display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:1rem .5rem; border-radius:var(--r);
  background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px var(--hairline); transition:transform .2s var(--ease),box-shadow .2s,background .2s; }
.svc-btn:hover{ transform:translateY(-3px); background:rgba(255,138,30,.08); box-shadow:inset 0 0 0 1px rgba(255,138,30,.4); }
.svc-btn svg{ width:30px;height:30px; stroke:var(--orange); fill:none; stroke-width:1.6; }
.svc-btn span{ font-size:.82rem; font-weight:600; }

/* quote cards */
.sim__scanning{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2.5rem 0; text-align:center; }
.radar{ width:90px;height:90px; border-radius:50%; position:relative; box-shadow:inset 0 0 0 1px var(--hairline-2); }
.radar::before,.radar::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(34,224,161,.5); animation:radar 1.8s var(--ease) infinite; }
.radar::after{ animation-delay:.9s; }
.radar .sweep{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,transparent 0deg,rgba(34,224,161,.35) 40deg,transparent 60deg); animation:spin 1.4s linear infinite; }
@keyframes radar{ from{ transform:scale(.4); opacity:.9 } to{ transform:scale(1); opacity:0 } }
@keyframes spin{ to{ transform:rotate(360deg) } }
.sim__scanning p{ color:var(--muted); font-size:.92rem; }

.quotes{ display:flex; flex-direction:column; gap:.7rem; }
.quote{ display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border-radius:var(--r);
  background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px var(--hairline); opacity:0; transform:translateX(14px);
  animation:quoteIn .5s var(--ease) forwards; }
.quote:nth-child(1){ animation-delay:.05s } .quote:nth-child(2){ animation-delay:.18s } .quote:nth-child(3){ animation-delay:.31s }
@keyframes quoteIn{ to{ opacity:1; transform:none } }
.quote.best{ box-shadow:inset 0 0 0 1.5px rgba(34,224,161,.5); background:rgba(34,224,161,.05); }
.quote__logo{ width:42px;height:42px;border-radius:11px; display:grid;place-items:center; flex-shrink:0;
  font-family:var(--font-display); font-weight:700; font-size:1rem; background:linear-gradient(135deg,#1c2942,#101a2d); box-shadow:inset 0 0 0 1px var(--hairline-2); color:var(--orange-soft); }
.quote__info{ flex:1; min-width:0; }
.quote__name{ font-weight:600; font-size:.92rem; display:flex; align-items:center; gap:.4rem; }
.quote__name .tag{ font-size:.62rem; background:rgba(34,224,161,.15); color:var(--green); padding:.1rem .4rem; border-radius:5px; font-weight:700; letter-spacing:.04em; }
.quote__meta{ color:var(--muted-2); font-size:.78rem; display:flex; gap:.8rem; margin-top:.15rem; }
.quote__meta b{ color:var(--green); font-weight:600; }
.quote__price{ text-align:right; }
.quote__price .amt{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:#fff; }
.quote__price .eta{ font-size:.72rem; color:var(--muted-2); }

/* tracking step */
.track{ text-align:center; padding:.5rem 0; }
.track__map{ position:relative; height:150px; border-radius:var(--r); overflow:hidden; box-shadow:inset 0 0 0 1px var(--hairline);
  background:radial-gradient(circle at 70% 30%,rgba(34,224,161,.08),transparent 60%),linear-gradient(160deg,#0c1424,#0a1120); margin-bottom:1rem; }
.track__map .route{ position:absolute; left:12%; top:78%; width:70%; height:2px; background:linear-gradient(90deg,var(--green),transparent);
  transform-origin:left; }
.track__map .road{ position:absolute; inset:0; opacity:.4;
  background-image:repeating-linear-gradient(115deg,transparent 0 24px,rgba(120,150,200,.12) 24px 26px); }
.track__truck{ position:absolute; top:70%; left:12%; width:30px;height:30px; border-radius:9px; display:grid;place-items:center;
  background:linear-gradient(135deg,var(--orange),var(--orange-2)); box-shadow:0 0 16px rgba(255,138,30,.6); animation:drive 3s var(--ease) infinite alternate; }
.track__truck svg{ width:17px;height:17px;stroke:#1a0e00;fill:none;stroke-width:2; }
.track__pin{ position:absolute; top:18%; right:16%; color:var(--green); }
.track__pin svg{ width:26px;height:26px; filter:drop-shadow(0 0 8px rgba(34,224,161,.7)); }
@keyframes drive{ from{ left:12% } to{ left:62% } }
.track h4{ font-family:var(--font-display); margin-bottom:.3rem; }
.track p{ color:var(--muted); font-size:.88rem; }
.track .eta-big{ color:var(--green); font-weight:700; }

.sim__foot{ display:flex; gap:.6rem; padding:1rem .3rem 0; }
.sim__foot .btn{ flex:1; padding:.8rem; font-size:.92rem; }
.sim__reset{ color:var(--muted-2); font-size:.82rem; padding:.6rem; align-self:center; }
.sim__reset:hover{ color:var(--orange-soft); }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; border-block:1px solid var(--hairline); padding:1.1rem 0; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:3rem; width:max-content; animation:marq 36s linear infinite; }
.marquee__track span{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--muted); display:inline-flex; align-items:center; gap:1rem; white-space:nowrap; }
.marquee__track span::after{ content:"●"; color:var(--orange); font-size:.6rem; }
@keyframes marq{ to{ transform:translateX(-50%) } }

/* ---------- How it works (numbered steps) ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; counter-reset:step; }
.step{ position:relative; padding:2rem 1.5rem 1.5rem; background:var(--panel); border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px var(--hairline); }
.step__n{ position:absolute; top:-18px; left:1.5rem; width:42px;height:42px; border-radius:12px; display:grid;place-items:center;
  font-family:var(--font-display); font-weight:700; background:linear-gradient(135deg,var(--orange),var(--orange-2)); color:#1a0e00; box-shadow:var(--glow-orange); }
.step h3{ margin:.6rem 0 .5rem; font-size:1.15rem; }
.step p{ color:var(--muted); font-size:.94rem; }
.step__line{ position:absolute; top:3px; right:-.9rem; width:1.8rem; height:2px; background:linear-gradient(90deg,var(--orange),transparent); }

/* ---------- Why-us split ---------- */
.feature-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.3rem; }
.feature{ display:flex; gap:1.1rem; padding:1.6rem; background:var(--panel); border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px var(--hairline); transition:transform .3s var(--ease),background .3s; }
.feature:hover{ transform:translateY(-4px); background:var(--panel-2); }
.feature__ic{ flex-shrink:0; width:50px;height:50px; border-radius:13px; display:grid;place-items:center;
  background:radial-gradient(circle at 30% 20%,rgba(34,224,161,.2),rgba(34,224,161,.05)); box-shadow:inset 0 0 0 1px rgba(34,224,161,.25); }
.feature__ic svg{ width:25px;height:25px; stroke:var(--green); fill:none; stroke-width:1.7; }
.feature h3{ font-size:1.1rem; margin-bottom:.35rem; } .feature p{ color:var(--muted); font-size:.93rem; }

/* ---------- App section + phone mockup ---------- */
.app-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.app-split ul{ margin:1.6rem 0; display:grid; gap:.9rem; }
.app-split li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--muted); }
.app-split li svg{ width:1.3em;height:1.3em; stroke:var(--green); fill:none; flex-shrink:0; margin-top:.15rem; }
.phone-wrap{ display:flex; justify-content:center; perspective:1400px; }
.phone{ width:280px; height:566px; border-radius:42px; background:linear-gradient(160deg,#16223a,#0b1322); padding:13px;
  box-shadow:var(--shadow-lg), inset 0 0 0 1.5px var(--hairline-2); transform:rotateY(-16deg) rotateX(5deg); transition:transform .6s var(--ease); }
.phone:hover{ transform:rotateY(-6deg) rotateX(2deg); }
.phone__screen{ width:100%; height:100%; border-radius:30px; overflow:hidden; background:radial-gradient(circle at 50% 0%,#0e1a30,#070d18);
  position:relative; box-shadow:inset 0 0 0 1px #000; padding:1.1rem; display:flex; flex-direction:column; gap:.7rem; }
.phone__notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:90px;height:22px; background:#05080f; border-radius:0 0 14px 14px; z-index:5; }
.phone__hd{ display:flex; align-items:center; justify-content:space-between; margin-top:1rem; }
.phone__hd .pill--live{ font-size:.6rem; padding:.25rem .55rem; }
.phone__hd b{ font-family:var(--font-display); font-size:.8rem; }
.phone__map{ flex:1; border-radius:16px; position:relative; overflow:hidden;
  background:radial-gradient(circle at 60% 35%,rgba(34,224,161,.12),transparent 55%),linear-gradient(160deg,#0c1626,#0a1120);
  box-shadow:inset 0 0 0 1px var(--hairline); }
.phone__map .road{ position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(50deg,transparent 0 30px,rgba(120,150,200,.1) 30px 32px),repeating-linear-gradient(-40deg,transparent 0 44px,rgba(120,150,200,.07) 44px 46px); }
.phone__dot{ position:absolute; width:12px;height:12px;border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(34,224,161,.18),0 0 14px var(--green); top:40%; left:54%; }
.phone__dot.me{ background:var(--orange); box-shadow:0 0 0 5px rgba(255,138,30,.18),0 0 14px var(--orange); top:66%; left:30%; }
.phone__card{ background:rgba(255,255,255,.04); border-radius:14px; padding:.7rem .85rem; box-shadow:inset 0 0 0 1px var(--hairline); }
.phone__card .row{ display:flex; justify-content:space-between; align-items:center; }
.phone__card .nm{ font-family:var(--font-display); font-size:.78rem; font-weight:600; }
.phone__card .et{ font-size:.66rem; color:var(--green); }
.phone__card .pr{ font-family:var(--font-display); font-weight:700; font-size:.95rem; }
.phone__bar{ height:3px; border-radius:3px; background:var(--hairline); margin-top:.5rem; overflow:hidden; }
.phone__bar i{ display:block; height:100%; width:62%; background:linear-gradient(90deg,var(--orange),var(--green)); }

/* ---------- Coverage / directory section ---------- */
.coverage{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.state-cloud{ display:flex; flex-wrap:wrap; gap:.5rem; }
.state-cloud a{ padding:.5rem .85rem; border-radius:999px; font-size:.85rem; color:var(--muted); background:rgba(255,255,255,.025);
  box-shadow:inset 0 0 0 1px var(--hairline); transition:all .2s; }
.state-cloud a:hover{ color:var(--text); background:rgba(255,138,30,.1); box-shadow:inset 0 0 0 1px rgba(255,138,30,.4); transform:translateY(-2px); }

/* ---------- Provider strip ---------- */
.split-cta{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.split-cta .panel{ padding:clamp(1.8rem,3vw,2.6rem); border-radius:var(--r-xl); position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px var(--hairline-2); }
.split-cta .panel.driver{ background:linear-gradient(150deg,rgba(255,138,30,.12),rgba(11,18,33,.6)); }
.split-cta .panel.provider{ background:linear-gradient(150deg,rgba(34,224,161,.1),rgba(11,18,33,.6)); }
.split-cta h3{ font-size:1.5rem; margin-bottom:.6rem; } .split-cta p{ color:var(--muted); margin-bottom:1.4rem; }

/* ---------- Services list page hero icons reuse ---------- */
.svc-card-icon svg{ width:28px;height:28px; stroke:var(--orange); fill:none; stroke-width:1.7; }

@media (max-width:900px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__left{ padding:2.5rem 0 0; }
  .sim{ margin-bottom:2rem; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step__line{ display:none; }
  .feature-row,.app-split,.coverage,.split-cta{ grid-template-columns:1fr; }
  .app-split .phone-wrap{ order:-1; }
}
@media (max-width:760px){
  .hero{ min-height:auto; padding-bottom:2rem; }
  .steps{ grid-template-columns:1fr; }
  .svc-grid{ gap:.5rem; }
  .phone{ width:240px; height:486px; transform:none; }
}