/* Friendly + lively layer (loaded after style.css) */
:root{
  --radius:22px; --radius-s:14px;
  --warm:#eef3ff; --warm-2:#dbe6ff;
  --shadow:0 2px 4px rgba(47,107,255,.05),0 10px 28px rgba(60,40,20,.09);
  --shadow-l:0 18px 50px rgba(60,40,20,.2);
}
body{background:#fff}
.section.warm{background:linear-gradient(180deg,var(--warm),#fff 140%)}
.section-head h2{position:relative;display:inline-block}
.section-head h2::after{content:"";display:block;width:54px;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--brand),#22b8ff);margin-top:8px}
.section-head[style*="center"] h2::after{margin-left:auto;margin-right:auto}

/* softer, bouncier controls */
.btn{box-shadow:0 6px 16px rgba(47,107,255,.28);transition:transform .2s cubic-bezier(.3,1.6,.5,1),background .15s,box-shadow .2s}
.btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 10px 22px rgba(47,107,255,.38)}
.btn.ghost,.btn.wa,.btn.vb,.btn.dark{box-shadow:none}
.chip{transition:transform .2s cubic-bezier(.3,1.6,.5,1),border-color .15s}
.chip:hover{transform:translateY(-2px)}
.in,select.in,textarea.in{border-radius:14px}
.card{border-radius:24px;border:1px solid rgba(47,107,255,.08)}
.card:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(47,107,255,.2)}
.card .ph{border-radius:0}
.card .price{color:var(--brand-d)}
.tag{backdrop-filter:blur(4px)}
.tag.fresh{top:auto;bottom:12px;background:var(--brand);animation:pulse 2s ease-in-out infinite}
.fav{transition:transform .2s cubic-bezier(.3,1.8,.5,1)}
.fav:hover{transform:scale(1.18)}
.fav.on{animation:pop .35s}
.stat,.feat .f1,.rev,.panel,.buy{border-radius:24px}
.feat .f1{transition:transform .25s,box-shadow .25s;border:1px solid rgba(47,107,255,.08)}
.feat .f1:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(47,107,255,.16)}
.feat .f1 .ic,.stat .ic{transition:transform .35s cubic-bezier(.3,1.8,.5,1)}
.feat .f1:hover .ic,.stat:hover .ic{transform:scale(1.2) rotate(-8deg)}
.stat b{font-size:1.05rem}
.stat b [data-count]{font-size:1.9rem;color:var(--brand-d);font-weight:800;margin-right:2px}
.page-head{border-radius:0 0 40px 40px;position:relative;overflow:hidden}
.page-head::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(47,107,255,.35),transparent 70%)}
.cta-band{border-radius:32px;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-50px;bottom:-70px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.14)}
.cta-band>*{position:relative;z-index:1}
.steps li::before{animation:pulse 2.6s ease-in-out infinite}
.header .logo img{transition:transform .3s}
.header .logo:hover img{transform:scale(1.05)}

/* hero */
.hero{background-position:72% bottom}
.hero::before{background:linear-gradient(100deg,rgba(14,15,18,.94) 0%,rgba(14,15,18,.8) 48%,rgba(14,15,18,.62) 100%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:12px;align-items:center;padding-top:60px;padding-bottom:150px}
.hero h1 em{background:linear-gradient(90deg,#6ea1ff,#2f6bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-l{position:relative;z-index:2}
.hero .eyebrow{animation:floaty 4s ease-in-out infinite}
.hero-chips{margin-top:20px}
.hero-chips .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(4px)}
.hero-chips .chip:hover{background:var(--brand);border-color:var(--brand)}
.bubble{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 30% 30%,rgba(110,160,255,.28),rgba(47,107,255,0));opacity:.7}
.bubble.b1{width:150px;height:150px;left:46%;top:12%;animation:floaty 7s ease-in-out infinite}
.bubble.b2{width:70px;height:70px;left:6%;bottom:30%;animation:floaty 5s ease-in-out -2s infinite}
.bubble.b3{width:100px;height:100px;right:4%;top:6%;animation:floaty 8s ease-in-out -4s infinite}

/* orbiting cars */
.orbit{position:relative;height:400px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;z-index:2}
.orbit:active{cursor:grabbing}
.orbit::before{content:"";position:absolute;left:6%;right:6%;bottom:46px;height:46px;background:radial-gradient(closest-side,rgba(47,107,255,.55),transparent);filter:blur(8px)}
.rcard{position:absolute;left:50%;top:48%;width:244px;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 24px 48px rgba(0,0,0,.5);will-change:transform,opacity;display:block;color:var(--ink)}
.rcard img{width:100%;aspect-ratio:4/3;object-fit:cover;pointer-events:none;-webkit-user-drag:none;background:var(--grey-100)}
.rcard .ri{padding:11px 15px;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:.92rem}
.rcard .ri b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcard .ri span{color:var(--brand-d);font-weight:800;white-space:nowrap}
.orbit-hint{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#aab1bb;font-size:.82rem;display:flex;gap:6px;align-items:center;justify-content:center}

/* ticker of makes */
.marquee{overflow:hidden;background:var(--warm);border-block:1px solid var(--warm-2);padding:15px 0;margin-top:40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:46px;width:max-content;animation:mq 38s linear infinite}
.mq-track span{font-weight:800;font-size:1.2rem;color:var(--grey-700);display:inline-flex;gap:46px;align-items:center;white-space:nowrap}
.mq-track span::after{content:"\2605";color:var(--brand);font-size:1rem}

/* driving cars */
.road{position:relative;height:104px;overflow:hidden;margin-top:6px}
.road::before{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;background:#2f343c}
.road::after{content:"";position:absolute;left:0;right:0;bottom:13px;height:4px;background:repeating-linear-gradient(90deg,#fff 0 36px,transparent 36px 72px);opacity:.85;animation:dash 1.2s linear infinite}
.mcar{position:absolute;bottom:14px;width:136px;left:-170px;animation:drive 17s linear infinite;z-index:1}
.mcar.c2{animation-duration:23s;animation-delay:-8s;width:118px}
.mcar.c3{animation-duration:20s;animation-delay:-14s;width:128px}
.mcar .wh{transform-box:fill-box;transform-origin:center;animation:spin .55s linear infinite}

/* "find by need" tiles */
.needs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.need{background:#fff;border-radius:28px;padding:28px 20px;box-shadow:var(--shadow);text-align:center;transition:transform .3s cubic-bezier(.3,1.6,.5,1),border-color .2s,box-shadow .2s;border:2px solid transparent;display:block}
.need:hover{transform:translateY(-8px) rotate(-1.2deg);border-color:var(--brand);box-shadow:0 20px 40px rgba(47,107,255,.2)}
.need .em{display:block;font-size:2.8rem;line-height:1.1;margin-bottom:10px}
.need:hover .em{animation:bounce .7s}
.need h3{margin-bottom:6px}
.need p{margin:0;color:var(--grey-500);font-size:.92rem}

/* scroll-in */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.shown{opacity:1;transform:none}
.card.reveal.shown{transition:opacity .6s ease,transform .25s,box-shadow .25s}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes bounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-12px) scale(1.1)}60%{transform:translateY(0)}80%{transform:translateY(-5px)}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes drive{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 340px))}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dash{to{background-position:72px 0}}

@media (max-width:1020px){
  .hero .wrap{grid-template-columns:1fr;padding-top:42px;padding-bottom:130px}
  .orbit{height:320px}
  .rcard{width:210px}
}
@media (max-width:620px){
  .orbit{height:280px}
  .rcard{width:176px}
  .rcard .ri{padding:8px 11px;font-size:.82rem}
  .mcar{width:104px}
  .need{padding:22px 14px}
  .page-head{border-radius:0 0 28px 28px}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .mq-track,.mcar,.mcar .wh,.road::after,.bubble,.hero .eyebrow,.tag.fresh,.steps li::before{animation:none!important}
  .mcar{left:20px}
}