/* ===== extras.css — car brands marquee + dealer form ===== */

/* --- car brands strip --- */
.car-section{position:relative;padding:64px 0 70px;background:#fff;border-top:1px solid var(--line);overflow:hidden}
.car-head{max-width:1320px;margin:0 auto 34px;padding:0 5vw;text-align:center}
.car-head .eyebrow{justify-content:center}
.car-head h2{margin:12px 0 0;font-size:clamp(24px,3.4vw,40px);line-height:1.4;color:var(--ink)}
.car-head h2 em{font-style:normal;background:linear-gradient(100deg,#0a1220 5%,#135cff 70%,#ff2525 120%);-webkit-background-clip:text;background-clip:text;color:transparent}
.car-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.car-track{display:flex;align-items:center;gap:18px;width:max-content;margin:0;padding:8px 0 22px;list-style:none;animation:carScroll var(--car-dur,40s) linear infinite;will-change:transform}
.car-marquee:hover .car-track{animation-play-state:paused}
.car{flex:none;display:grid;place-items:center;min-width:150px;height:84px;padding:0 26px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fff,#f4f7fc);box-shadow:0 8px 24px rgba(20,40,90,.05);transition:transform .3s,box-shadow .3s,border-color .3s}
.car:hover{transform:translateY(-4px);border-color:#135cff55;box-shadow:0 16px 36px rgba(19,92,255,.14)}
.car span{font:800 15px/1 Montserrat,Inter,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#46536b;white-space:nowrap;transition:color .3s}
.car.fa span{font-family:Vazirmatn,Inter,sans-serif;letter-spacing:0;font-size:16px;text-transform:none}
.car:hover span{color:#0a1830}
.car img{max-height:46px;max-width:130px;height:46px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.car:hover img{filter:none;opacity:1}
.car.has-logo span{display:none}
.car.has-logo img{display:block}
@keyframes carScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:560px){.car-section{padding:48px 0 52px}.car{min-width:120px;height:68px;padding:0 18px}.car span{font-size:13px}.car.fa span{font-size:14px}.car img{max-height:38px;max-width:96px}}
@media(prefers-reduced-motion:reduce){.car-track{animation:none}.car-marquee{overflow-x:auto}}

/* --- dealer CTA band --- */
.dl-cta{position:relative;padding:70px 5vw;color:#fff;background:radial-gradient(800px 300px at 85% 0,rgba(19,92,255,.45),transparent 70%),linear-gradient(135deg,#071226,#0b2a66 60%,#0a1830);overflow:hidden;border-top:1px solid var(--line)}
.dl-cta-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.dl-cta-text{flex:1 1 420px;min-width:0}
.dl-cta .eyebrow{color:#aebbd6}
.dl-cta h2{margin:12px 0 12px;font-size:clamp(26px,3.6vw,44px);line-height:1.35;color:#fff}
.dl-cta h2 em{font-style:normal;background:linear-gradient(100deg,#6ea1ff,#ffffff 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dl-cta p{margin:0;max-width:560px;font-size:13px;line-height:2;color:#c6d1e6}
.dl-cta-btn{flex:none;display:inline-flex;align-items:center;gap:14px;padding:16px 30px;border-radius:12px;background:#fff;color:#0a1830;font-weight:800;font-size:14px;text-decoration:none;box-shadow:0 18px 44px rgba(0,0,0,.28);transition:transform .3s,box-shadow .3s,background .3s,color .3s}
.dl-cta-btn b{font-size:18px;line-height:1}
.dl-cta-btn:hover{transform:translateY(-3px);background:#135cff;color:#fff;box-shadow:0 22px 50px rgba(19,92,255,.45)}
@media(max-width:700px){.dl-cta{padding:54px 6vw}.dl-cta-in{gap:26px}.dl-cta-btn{width:100%;justify-content:center}}

/* --- product details modal --- */
.pd-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(4,8,18,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.pd-modal.open{opacity:1;visibility:visible}
.pd-panel{position:relative;width:min(960px,100%);max-height:calc(100svh - 40px);overflow:auto;display:grid;grid-template-columns:.9fr 1.1fr;direction:ltr;border-radius:24px;background:#fff;box-shadow:0 40px 120px rgba(0,0,0,.5);transform:translateY(24px) scale(.97);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pd-modal.open .pd-panel{transform:none}
.pd-visual{position:relative;display:grid;place-items:center;min-height:460px;padding:40px 26px 56px;overflow:hidden;background:radial-gradient(circle at 50% 46%,rgba(46,120,255,.55),transparent 62%),linear-gradient(160deg,#0a1830,#0b2a66 70%,#071226)}
.pd-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.12),transparent 40%)}
.pd-img{position:relative;z-index:1;max-width:100%;max-height:360px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 30px 28px rgba(0,0,0,.45));animation:pdFloat 4.2s ease-in-out infinite}
.pd-shadow{position:absolute;z-index:0;bottom:34px;left:50%;width:46%;height:20px;margin-left:-23%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);animation:pdShadow 4.2s ease-in-out infinite}
.pd-vol{position:absolute;z-index:2;left:18px;bottom:18px;padding:7px 12px;border-radius:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;font:800 12px Inter,sans-serif;letter-spacing:.08em}
@keyframes pdFloat{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-16px) rotate(1.2deg)}}
@keyframes pdShadow{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.78);opacity:.5}}
.pd-info{direction:rtl;padding:64px 36px 32px;display:flex;flex-direction:column;gap:14px;text-align:right;color:var(--ink)}
.pd-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;direction:ltr;justify-content:flex-end}
.pd-tags small{font:700 10px Inter,sans-serif;letter-spacing:.14em;color:#7b8698}
.pd-tag{padding:5px 11px;border-radius:6px;background:#e11d2b;color:#fff;font:800 10px Inter,sans-serif;letter-spacing:.08em}
.pd-tag.green{background:#13894a}.pd-tag.yellow{background:#e9a50c;color:#2a1c00}.pd-tag.plain{background:#0a1830}
.pd-title{margin:0;font:800 clamp(26px,3.2vw,36px)/1.2 Inter,Vazirmatn,sans-serif;direction:ltr;text-align:right}
.pd-desc{margin:0;font-size:13.5px;line-height:2.1;color:#46536b}
.pd-specs{border-top:1px solid var(--line)}
.pd-specs div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font:700 12px Inter,sans-serif;direction:ltr}
.pd-specs span{color:#7b8698;letter-spacing:.1em;direction:rtl;unicode-bidi:isolate}.pd-specs b{color:var(--ink)}
.pd-feats{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pd-feats li{position:relative;padding-inline-start:26px;font-size:13px;line-height:1.9;color:var(--ink)}
.pd-feats li::before{content:"✓";position:absolute;inset-inline-start:0;top:3px;width:17px;height:17px;border-radius:50%;background:#135cff;color:#fff;font-size:10px;line-height:17px;text-align:center}
.pd-note{margin:0;font-size:11.5px;line-height:1.9;color:#7b8698}
.pd-actions{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.pd-cta{flex:1 1 180px;display:inline-flex;justify-content:center;align-items:center;gap:12px;padding:14px 20px;border:0;border-radius:10px;background:var(--ink);color:#fff;font:700 13px Vazirmatn,Inter,sans-serif;cursor:pointer;transition:.3s}
.pd-cta:hover{background:#135cff;box-shadow:0 14px 34px rgba(19,92,255,.35);transform:translateY(-2px)}
.pd-x{position:absolute;z-index:5;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#0a1830;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.2);transition:.2s}
.pd-x:hover{background:#0a1830;color:#fff}
body.pd-lock{overflow:hidden}
@media(max-width:760px){
  .pd-modal{padding:0;align-items:end}
  .pd-panel{grid-template-columns:1fr;width:100%;max-height:94svh;border-radius:22px 22px 0 0}
  .pd-visual{min-height:250px;padding:34px 20px 46px}
  .pd-img{max-height:210px}
  .pd-info{padding:24px 20px 28px}
  .pd-x{top:10px;right:10px}
}
@media(prefers-reduced-motion:reduce){.pd-img,.pd-shadow{animation:none}}