/* =====================================================================
   HOME v6: the Home page in hiruni's PDF order, with a new look.
   Dark, cinematic parts (hero, about, how it works, FAQ, finale) and
   light porcelain parts (packages, compare, app, reviews, locations,
   franchise) take turns, so the page has a rhythm.
   1. Hero   2. Four promises   3. About   4. Packages   5. Compare
   6. App    7. Reviews         8. Locations  9. FAQ    10. Franchise
   11. Finale   12. Shared animation classes   13. Phone
   ===================================================================== */

/* 1. HERO: only the car in its dark studio. No ribbons, no counter. */
.h360 .screen{background:#030303}
.h360 .screen::after{background:linear-gradient(90deg,rgba(3,3,3,.85),rgba(3,3,3,.25) 42%,transparent 62%),linear-gradient(0deg,rgba(3,3,3,.7),transparent 30%)}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}

.h360 .cap h1{font-size:clamp(40px,5.4vw,84px);font-weight:800;line-height:1;letter-spacing:-.02em;max-width:none;text-transform:uppercase}
.h360 .cap h1 .ln{display:block}
.h360 .cap h1 b{display:inline;font-weight:800;background:linear-gradient(90deg,#ff7a1a,#ff4d00);-webkit-background-clip:text;background-clip:text;color:transparent}

.h360 .caps{bottom:13vh}
.h360-hint{position:absolute;z-index:3;right:clamp(20px,5vw,64px);bottom:12vh;display:grid;justify-items:center;gap:10px;color:rgba(244,240,234,.6);font-size:11px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;pointer-events:none}
.h360-hint i{width:1px;height:54px;background:linear-gradient(#fff,transparent);animation:hint 2s var(--ease) infinite;transform-origin:top}
@keyframes hint{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* 2. FOUR PROMISES: one dark glass strip right under the hero */

@keyframes pulse{50%{box-shadow:0 0 0 1px rgba(255,106,0,.35) inset,0 0 0 10px rgba(255,106,0,0),0 0 24px rgba(255,106,0,.45)}}

/* 3. ABOUT: dark room; words light up; photo opens from a slit */

/* 4. PACKAGES: four cards in a row; cars get pricier left to right */

/* 5. TRADITIONAL vs WASHTRON */
.vs6{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,3vw,40px);align-items:center;padding-block:clamp(70px,10vh,120px)}
.vs6-card{padding:clamp(26px,3vw,40px);border-radius:22px;transition:opacity .8s var(--ease),filter .8s var(--ease),transform .8s var(--ease)}
.vs6-card.old{background:#f1f2f5;border:1px solid #e2e4ea;color:#3f4350}
.vs6-card.new{background:linear-gradient(160deg,#fff4ea,#ffe9d6);border:1px solid #ffd2b0}
.vs6-k{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#7a8091}
.new .vs6-k{color:var(--orange-ink)}
.vs6-card h3{font-size:clamp(26px,2.6vw,38px);margin:10px 0 22px;font-weight:300}
.vs6-card h3 b{font-weight:800}.new h3 b{color:var(--orange-ink)}
.vs6-card ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vs6-card li{position:relative;padding-left:30px;font-size:15px}
.vs6-card li::before{position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900}
.old li::before{content:"✕";background:#e3e5eb;color:#7a8091}
.new li::before{content:"✓";background:#ff6a00;color:#fff;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.old li{transition:color .6s}
.old li::after{content:"";position:absolute;left:30px;right:0;top:52%;height:1px;background:#9aa0ae;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.vs6.go .old{opacity:.6;filter:saturate(.4);transform:scale(.97)}
.vs6.go .old li::after{transform:scaleX(1)}
.vs6.go .new{transform:scale(1.02)}
.vs6.go .new li::before{transform:scale(1)}
.vs6.go .old li:nth-child(2)::after,.vs6.go .new li:nth-child(2)::before{transition-delay:.15s}
.vs6.go .old li:nth-child(3)::after,.vs6.go .new li:nth-child(3)::before{transition-delay:.3s}
.vs6.go .old li:nth-child(4)::after,.vs6.go .new li:nth-child(4)::before{transition-delay:.45s}
.vs6-vs{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase}

/* 6. APP */

.store{display:grid;line-height:1.15;padding:10px 18px;border-radius:12px;background:#111;color:#fff;text-decoration:none;font-weight:800;font-size:16px;transition:transform .3s var(--ease)}
.store b{font-size:10px;font-weight:600;letter-spacing:.06em;opacity:.75}
.store:hover{transform:translateY(-3px)}

/* 7. REVIEWS: an endless slow slide */

@keyframes rvslide{to{transform:translateX(-50%)}}

/* 8. LOCATIONS: search bar, list and map */

em.open{color:#1f8a4c}em.soon{color:#d27800}
em.open::before,em.soon::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:6px}

.pin{position:absolute;width:18px;height:18px;margin:-18px 0 0 -9px;border-radius:50% 50% 50% 0;rotate:-45deg;background:#ff6a00;box-shadow:0 6px 12px rgba(0,0,0,.25);transition:transform .4s cubic-bezier(.3,1.6,.5,1);cursor:pointer}
.pin.soon{background:#d9a24a}
.pin::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.pin.on{transform:scale(1.6)}
.pin.on::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid #ff6a00;animation:ping 1.6s ease-out infinite}
@keyframes ping{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}

/* 9. FAQ: dark photo, six topics */

/* 10. FRANCHISE */

.fr6-form{padding:clamp(22px,3vw,34px);border-radius:22px;background:#faf7f3;border:1px solid #efe7dc}
.fr6-form h3{font-size:24px;font-weight:800}
.fr6-form>p{font-size:14px;color:var(--stone);margin-top:6px}
.fr6-f{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.fr6-f label{position:relative;display:block}
.fr6-f span{position:absolute;left:16px;top:15px;font-size:14px;color:var(--stone);pointer-events:none;transition:transform .3s var(--ease),font-size .3s,color .3s;transform-origin:left}
.fr6-f input{width:100%;font:inherit;font-size:15px;padding:22px 16px 8px;border-radius:12px;border:1px solid var(--hair);background:#fff;transition:border-color .3s,box-shadow .3s}
.fr6-f input:focus{outline:0;border-color:#ff6a00;box-shadow:0 0 0 4px rgba(255,106,0,.12)}
.fr6-f input:focus+span,.fr6-f input:not(:placeholder-shown)+span{transform:translateY(-9px);font-size:11px;color:var(--orange-ink)}
.fr6-form .btn{width:100%;justify-content:center}
.fr6-ok{margin-top:12px;font-size:14px;color:#1f8a4c}

/* 11. FINALE text */
.fcopy h2{font-size:clamp(36px,5vw,76px);max-width:17ch}
.fcopy h2 b{display:block;color:#ff7a1a}
.fin-sub{color:#ece6df;max-width:44ch}

/* 12. SHARED: .rise fades up when it reaches the screen (js/home6.js) */
.rise{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none}.h360-hint i{animation:none}}

/* 13. PHONE */

@media (max-width:760px){
  .h360 .screen::after{background:linear-gradient(0deg,rgba(3,3,3,.95) 0%,rgba(3,3,3,.6) 38%,transparent 60%)}
  .h360 .cap h1{font-size:clamp(34px,10vw,48px)}
  .h360 .caps{bottom:7vh}
  .h360-hint{display:none}

  .vs6{grid-template-columns:1fr}.vs6-vs{justify-self:center}

  .fr6-f{grid-template-columns:1fr}
  
}