/* =====================================================================
   Sajil cars page (web/cars_v2.html). Uses home2.css (cards, band, modal)
   and chrome.css (header + footer). Only the page's own parts are here.
   ===================================================================== */
.cv-page{background:var(--paper)}
.cv-page .s-book{margin-top:-46px}
.cv-in{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .9s cubic-bezier(.2,.7,.1,1)}
.cv-in.in{opacity:1;transform:none}
.cv-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(0,185,163,.1);color:var(--teal);font-size:12.5px;font-weight:700;letter-spacing:.06em}
.cv-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(0,239,210,.18)}
html[lang="ar"] .cv-kicker{letter-spacing:0}

/* ---------------------------------------------------------------- hero */
.cv-hero{position:relative;overflow:hidden;padding:116px 0 96px;text-align:center;
  background:radial-gradient(1200px 520px at 50% 108%,rgba(0,239,210,.28),transparent 62%),
             radial-gradient(700px 380px at 12% 12%,rgba(111,244,227,.22),transparent 70%),
             linear-gradient(180deg,#F4FEFC 0%,#E8FCF8 56%,#D9F7F1 100%)}
.cv-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(8,44,43,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(8,44,43,.05) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 72%);pointer-events:none}
.cv-glow{position:absolute;width:520px;height:520px;inset-inline-start:-160px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(0,239,210,.32),transparent 65%);filter:blur(10px);animation:cvGlow 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes cvGlow{to{transform:translate(120px,80px) scale(1.15)}}
.cv-hero-in{position:relative;z-index:2}
.cv-crumbs{display:flex;justify-content:center;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:18px}
.cv-crumbs a{color:var(--ink-2);font-weight:600;text-decoration:none}
.cv-crumbs a:hover{color:var(--teal)}
.cv-crumbs i{font-style:normal;opacity:.5}
.cv-title{font-family:var(--display);font-weight:300;font-size:clamp(34px,5vw,68px);line-height:1.08;letter-spacing:-.03em;margin:18px auto 0;color:var(--ink);max-width:16ch}
html[lang="ar"] .cv-title{line-height:1.3;max-width:none}
.cv-title span,.cv-title em{display:block}
.cv-title em{font-style:normal;font-weight:600;background:linear-gradient(90deg,var(--teal),#00D9BF 45%,var(--ink-2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.cv-sub{max-width:640px;margin:18px auto 0;color:var(--muted);font-size:clamp(15px,1.4vw,17px);line-height:1.8}
.cv-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.cv-stat{min-width:150px;padding:14px 22px;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid rgba(8,44,43,.08);box-shadow:0 14px 34px -24px rgba(8,44,43,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cv-stat b{display:block;font-family:"Montserrat",sans-serif;font-weight:700;font-size:30px;line-height:1.1;color:var(--ink)}
.cv-stat span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.cv-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.cv-cats button{display:inline-flex;align-items:center;gap:10px;padding:9px 10px 9px 16px;border-radius:999px;border:1px solid rgba(8,44,43,.12);background:#fff;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s,background .25s}
html[dir="rtl"] .cv-cats button{padding:9px 16px 9px 10px}
.cv-cats button b{font-weight:600}
.cv-cats button i{font-style:normal;min-width:28px;height:28px;padding:0 8px;border-radius:999px;display:grid;place-items:center;background:var(--wash);color:var(--teal);font-weight:700;font-size:12.5px;font-family:"Montserrat",sans-serif}
.cv-cats button:hover{transform:translateY(-2px);border-color:var(--mint);box-shadow:0 12px 26px -16px rgba(0,185,163,.7)}
.cv-cats button:hover i{background:var(--mint);color:var(--ink)}

/* the five cars, side by side */
.cv-stage{position:relative;z-index:1;margin:34px auto 0;width:min(1320px,96vw)}
.cv-lineup{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:clamp(10px,2vw,28px);align-items:end}
.cv-car{position:relative;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);animation:cvIn .9s cubic-bezier(.2,.7,.1,1) both;animation-delay:calc(var(--i) * .12s)}
.cv-car img{position:relative;z-index:1;width:100%;height:clamp(80px,10.5vw,160px);object-fit:contain;filter:drop-shadow(0 18px 18px rgba(8,44,43,.28));transition:transform .5s cubic-bezier(.2,.7,.1,1);animation:cvFloat 5s ease-in-out infinite;animation-delay:calc(var(--i) * -.9s)}
.cv-car::after{content:"";width:78%;height:16px;margin-top:-10px;border-radius:50%;background:radial-gradient(closest-side,rgba(8,44,43,.28),transparent);animation:cvShadow 5s ease-in-out infinite;animation-delay:calc(var(--i) * -.9s)}
.cv-car span{position:absolute;bottom:-34px;white-space:nowrap;padding:5px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s;pointer-events:none}
.cv-car:hover img{transform:translateY(-10px) scale(1.04)}
.cv-car:hover span{opacity:1;transform:none}
.cv-lineup .cv-car:nth-child(3) img{height:clamp(92px,12.5vw,190px)}
@keyframes cvIn{from{opacity:0;transform:translateY(40px)}}
@keyframes cvFloat{50%{translate:0 -7px}}
@keyframes cvShadow{50%{transform:scaleX(.9);opacity:.75}}
.cv-road{height:2px;margin:26px auto 0;width:92%;background:repeating-linear-gradient(90deg,rgba(8,44,43,.28) 0 26px,transparent 26px 50px);background-size:50px 2px;animation:cvRoad 1.6s linear infinite;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
@keyframes cvRoad{to{background-position:-50px 0}}
@media (max-width:760px){
  .cv-hero{padding:112px 0 84px}
  .cv-stat{min-width:calc(50% - 6px);padding:12px 14px}
  .cv-stat b{font-size:24px}
  .cv-lineup{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:0 6vw 40px;scrollbar-width:none}
  .cv-lineup::-webkit-scrollbar{display:none}
  .cv-car{flex:0 0 58vw;scroll-snap-align:center}
  .cv-car img,.cv-lineup .cv-car:nth-child(3) img{height:120px}
  .cv-car span{opacity:1;transform:none;bottom:-30px}
}

/* ---------------------------------------------------------------- sections */
.cv-sec{padding:clamp(64px,8vw,104px) 0}
.cv-head{text-align:center;max-width:720px;margin:0 auto 38px}
.cv-head h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.8vw,48px);line-height:1.2;letter-spacing:-.02em;margin:14px 0 0;color:var(--ink)}
.cv-head p{margin:12px 0 0;color:var(--muted);line-height:1.8}

/* monthly packages */
.cv-packs-sec{background:linear-gradient(180deg,#fff,var(--wash-2))}
.cv-packs{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.cv-pack{flex:1 1 240px;max-width:300px}
.cv-pack{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px 24px;border-radius:26px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;text-align:start;cursor:pointer;
  box-shadow:0 22px 46px -36px rgba(8,44,43,.5);transition:transform .35s cubic-bezier(.2,.7,.1,1),box-shadow .35s,border-color .35s;animation:cvIn .8s both;animation-delay:var(--d)}
.cv-pack:hover{transform:translateY(-6px);border-color:var(--mint);box-shadow:0 30px 60px -34px rgba(0,185,163,.6)}
.cv-pack-n{font-size:15px;font-weight:700;color:var(--ink-2)}
.cv-pack-p{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.cv-pack-p b{font-family:"Montserrat",sans-serif;font-size:40px;font-weight:700;line-height:1;color:var(--ink)}
.cv-pack-p small{font-size:12.5px;color:var(--muted)}
.cv-pack-s{display:inline-flex;padding:4px 10px;border-radius:999px;background:rgba(194,69,58,.1);color:#B23A31;font-size:12px;font-weight:700}
.cv-pack-c{font-size:12.5px;color:var(--muted)}
.cv-pack-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--teal)}
.cv-pack-go svg{width:16px;height:16px}
html[dir="rtl"] .cv-pack-go svg{transform:scaleX(-1)}
.cv-pack.best{background:linear-gradient(160deg,#0E4341,#082C2B);border-color:transparent;color:#fff}
.cv-pack.best::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,var(--mint),transparent 55%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.cv-pack.best .cv-pack-n,.cv-pack.best .cv-pack-p b{color:#fff}
.cv-pack.best .cv-pack-p small,.cv-pack.best .cv-pack-c{color:#9CC6C1}
.cv-pack.best .cv-pack-s{background:rgba(0,239,210,.14);color:var(--mint)}
.cv-pack.best .cv-pack-go{color:var(--mint)}

/* perks */
.cv-perks-sec{padding-top:0;background:var(--wash-2)}
.cv-perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cv-perk{padding:24px;border-radius:24px;background:#fff;border:1px solid var(--line)}
.cv-perk i{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:linear-gradient(140deg,var(--mint),var(--teal));color:var(--ink);box-shadow:0 12px 24px -14px rgba(0,185,163,.9)}
.cv-perk i svg{width:24px;height:24px}
.cv-perk h3{margin:16px 0 6px;font-size:17px;font-weight:700;color:var(--ink)}
.cv-perk p{margin:0;font-size:14px;line-height:1.75;color:var(--muted)}
.cv-perk:nth-child(2){transition-delay:.08s}.cv-perk:nth-child(3){transition-delay:.16s}.cv-perk:nth-child(4){transition-delay:.24s}

/* models */
.cv-models{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.cv-models a{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:18px;background:var(--wash-2);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .25s,border-color .25s,background .25s}
.cv-models a span{font-weight:700;font-size:14.5px}
.cv-models a small{font-size:12.5px;color:var(--muted)}
.cv-models a:hover{transform:translateY(-3px);border-color:var(--mint);background:#fff}

/* call to action */
.cv-cta{padding:0 0 clamp(64px,8vw,100px)}
.cv-cta-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:clamp(28px,4vw,48px);border-radius:34px;color:#fff;
  background:radial-gradient(600px 260px at 85% 0%,rgba(0,239,210,.28),transparent 70%),linear-gradient(150deg,#0E4341,#082C2B)}
.cv-cta h2{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(26px,3.4vw,42px);color:#fff}
.cv-cta p{margin:8px 0 0;color:#B8DCD7;max-width:520px;line-height:1.8}
.cv-cta-btns{display:flex;gap:10px;flex-wrap:wrap}
.cv-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;border:1px solid rgba(255,255,255,.3);color:#fff;font-weight:700;text-decoration:none;font-family:"Montserrat","Noto Kufi Arabic",sans-serif;transition:transform .25s,background .25s}
.cv-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);color:#fff}
.cv-btn.pri{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.cv-btn.pri:hover{background:#5DF5E2;color:var(--ink)}

@media (max-width:1000px){.cv-perks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cv-perks{grid-template-columns:1fr}.cv-pack{max-width:none}.cv-cta-btns{width:100%}.cv-btn{flex:1}}
@media (prefers-reduced-motion:reduce){.cv-car,.cv-car img,.cv-car::after,.cv-glow,.cv-road,.cv-pack{animation:none!important}.cv-in{opacity:1;transform:none}}