@font-face{
  font-family:"RotaArabic";
  src: url("/assets/fonts/rota-ar.woff2?v=2") format("woff2"),
       url("/assets/fonts/rota-ar.ttf?v=2") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --text:#0f172a;
  --muted:#4b5563;
  --line:rgba(15,23,42,.10);

  --navy:#0b1630;
  --navyText:#f3f6ff;

  --brand:#2f6bff;
  --brand2:#1d4ed8;
  --shadow: 0 18px 45px rgba(2,6,23,.12);
  --shadow2: 0 10px 26px rgba(2,6,23,.14);
  --radius:18px;
  --max: 100%;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans";
}
html[lang="ar"], body[dir="rtl"]{
  font-family: "RotaArabic", Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans";
}
a{color:inherit; text-decoration:none}

.container{max-width:var(--max); width:100%; margin:0 auto; padding:0 22px}

/* HERO (clean + premium) */
.hero{padding:0}
/* Hero is full-bleed; text/content inside uses heroPad */
.hero .container{padding:0 22px}
.heroPad{padding:0 22px}
.heroWrap{border-radius: 0; overflow:hidden; box-shadow: none; border:0}
.heroTop{position:relative; background: var(--navy); min-height: 580px}
.heroBg{position:absolute; inset:0; background-size:cover; background-position: 78% center; filter:saturate(1.03) contrast(1.03)}
/* keep the left side darker for text readability, let the right side show the car */
.heroOverlay{position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(11,22,48,.94) 0%, rgba(11,22,48,.70) 46%, rgba(11,22,48,.12) 100%),
  linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.26));
}

/* hero nav */
.heroNav{position:relative; z-index:3; padding:18px 0 0}
.heroNavInner{display:flex; align-items:center; justify-content:space-between; gap:14px}
.heroBrand{display:flex; align-items:center; gap:10px; font-weight:900; color:#fff; letter-spacing:.2px}
.heroLogo{width:32px;height:32px;border-radius:12px;background:linear-gradient(135deg, rgba(47,107,255,1), rgba(122,163,255,1)); box-shadow: 0 12px 28px rgba(47,107,255,.26)}
.heroLinks{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.heroLinks a{color:rgba(243,246,255,.86); font-weight:700; font-size:14px}
.heroLinks a:hover{color:#fff}

/* Buttons (minimal luxury) */
.btnBase{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.1px;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  box-shadow: none;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.btnBase:hover{transform: translateY(-1px); background:rgba(255,255,255,.12); border-color: rgba(255,255,255,.28)}
.btnBase:active{transform: translateY(0)}
.btnBase:focus-visible{outline:none; box-shadow: 0 0 0 4px rgba(47,107,255,.28)}

.btnBase.primary{
  background: rgba(47,107,255,.95);
  border-color: rgba(255,255,255,.10);
}
.btnBase.primary:hover{background: rgba(29,78,216,.95)}

.btnBase.white{
  background: rgba(255,255,255,.92);
  color:#0b1630;
  border-color: rgba(255,255,255,.22);
}
.btnBase.white:hover{background:#fff}

/* Generic button (used across sections) */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  font-weight:800;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color: var(--text);
  box-shadow: none;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(15,23,42,.16)}
.btn:active{transform: translateY(0)}
.btn.primary{background: rgba(47,107,255,.96); color:#fff; border-color: transparent}
.btn.primary:hover{background: rgba(29,78,216,.96)}
.btn:focus-visible{outline:none; box-shadow: 0 0 0 4px rgba(47,107,255,.22)}

/* hero content */
.heroInner{position:relative; z-index:2; padding:78px 0 86px}
.heroGrid{display:grid; grid-template-columns: 1.25fr .75fr; gap:18px; align-items:center}
.h1{margin:0 0 14px; font-size:56px; line-height:1.03; color:var(--navyText); letter-spacing:-1px}
.lead{margin:0 0 18px; color:rgba(243,246,255,.78); font-size:16px; line-height:1.9; max-width: 70ch}
.heroCtas{display:flex; gap:12px; flex-wrap:wrap; margin-top: 16px}

.heroBottom{background:#fff}

/* generic content */
.section{padding:56px 0}

/* subtle scroll animation */
[data-anim]{opacity:0; transform: translateY(16px); transition: opacity .65s ease, transform .65s ease}
[data-anim].in{opacity:1; transform: translateY(0)}

.h2{margin:0 0 10px; font-size:30px; letter-spacing:-.2px}
.sub{margin:0 0 22px; color:var(--muted); line-height:1.9}

.fleetGrid{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px}
.car{border-radius: 16px; border:1px solid var(--line); background:#fff; box-shadow: 0 10px 22px rgba(2,6,23,.06); overflow:hidden}
.car .ph{height:102px; background-size:cover; background-position:center}
.car .pad{padding:12px}
.car b{display:block; font-size:13px}
.car small{display:block; margin-top:4px; color:var(--muted); line-height:1.6}

/* Deals (cards under hero like your screenshot) */
.center{text-align:center}
.dealGrid{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top: 18px}
.deal{border-radius: 18px; background:#fff; border:1px solid rgba(15,23,42,.10); box-shadow: 0 12px 26px rgba(2,6,23,.08); overflow:hidden}
.dealImg{width:100%; height:180px; display:block; object-fit:cover; background:#f3f4f6}
.dealPad{padding:14px}
.dealName{display:block; font-size:14px; font-weight:900}
.dealPrice{margin-top:6px; font-size:22px; font-weight:1000; color:#111827}
.dealPrice span{font-size:12px; font-weight:800; color:var(--muted); margin-inline-start: 6px}
.dealBtn{width:100%; margin-top:12px; justify-content:center; background: rgba(15,23,42,.60); color:#fff; border-color: transparent}
.dealBtn:hover{background: rgba(15,23,42,.72)}

.band{background: radial-gradient(900px 420px at 50% 0%, rgba(47,107,255,.14), transparent 60%), linear-gradient(180deg, #0b1630 0%, #0a1d3f 100%); color:var(--navyText)}
.serviceGrid{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top: 20px}
.svc{
  padding:22px 18px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  text-align:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.svc b{display:block; font-size:15px; font-weight:900}
.svc span{display:block; margin-top:8px; opacity:.78; line-height:1.75; font-size:13px}
.icon{
  width:44px; height:44px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  display:inline-flex; align-items:center; justify-content:center;
  margin: 0 auto 14px;
}
.icon svg{width:20px;height:20px; fill: rgba(243,246,255,.92)}

/* Process (cards like your reference) */
.processGrid{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top: 18px}
.pCard{
  padding:22px 18px;
  border-radius: 18px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow: 0 12px 26px rgba(2,6,23,.08);
  min-height: 140px;
}
.pNum{
  width:28px; height:28px;
  border-radius:999px;
  background: rgba(15,23,42,.90);
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900;
  font-size:12px;
}
.pTitle{display:block; margin-top:14px; font-weight:1000; font-size:16px}
.pText{margin:10px 0 0; color:var(--muted); line-height:1.85; font-size:13.5px}

.actionCenter{display:flex; justify-content:center; margin-top:14px}

.soft{background:#ffffff}
.why{display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; align-items:center}
.whyMedia{border-radius: 18px; overflow:hidden; border:1px solid rgba(15,23,42,.08); background:#fff; min-height: 320px; position:relative; box-shadow: 0 12px 26px rgba(2,6,23,.06)}
.whyMedia img{width:100%; height:100%; display:block; object-fit:cover; padding:0}

.whyBox{padding:8px 0}
.whyTitle{margin:0; font-size:38px; letter-spacing:-.3px}
.whyLead{margin:10px 0 0; color:rgba(17,24,39,.62); line-height:1.95}

.whyGrid{display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-top:22px}
.whyItem{display:flex; gap:12px; align-items:flex-start}
/* Match reference: simple, clean icon (no background box) */
.whyIcon{
  width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
  margin-top:2px;
}
.whyIcon svg{width:22px;height:22px; stroke: rgba(122,163,255,.95); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.whyItem b{display:block; font-size:15px; font-weight:1000}
.whyItem span{display:block; margin-top:6px; color:rgba(17,24,39,.58); line-height:1.9; font-size:13px}

.promo{border-radius: calc(var(--radius) + 10px); overflow:hidden; border:1px solid rgba(47,107,255,.18); box-shadow: var(--shadow); background: linear-gradient(135deg, rgba(47,107,255,.14), rgba(34,197,94,.10))}
.promoInner{padding:22px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.promo h3{margin:0; font-size:18px}
.promo p{margin:6px 0 0; color:var(--muted); line-height:1.8; font-size:14px}

/* CTA banner (like your screenshot) */
.ctaBand{
  background:
    radial-gradient(900px 520px at 65% 35%, rgba(47,107,255,.16), transparent 55%),
    linear-gradient(180deg, #0b1630 0%, #081a3a 100%);
}
/* remove the "box inside box" look: single clean band */
.ctaWrap{border-radius: 0; border:0; background: transparent; box-shadow:none}
.ctaGrid{display:grid; grid-template-columns: 1fr 1.05fr; gap:26px; align-items:center; padding:38px 0}
.ctaTitle{margin:0; color:var(--navyText); font-size:44px; line-height:1.08; letter-spacing:-.4px}
.ctaText{margin:14px 0 0; color:rgba(243,246,255,.78); line-height:1.9; max-width: 62ch}
.ctaActions{margin-top:18px}
/* image without a hard box */
.ctaMedia{border-radius: 0; overflow:visible; min-height: 300px; position:relative}
.ctaMedia .img{position:absolute; inset:-10px -10px -10px -10px; background-image:url('/assets/img/cta-car.png'); background-size: 112% auto; background-repeat:no-repeat; background-position: right center; filter:saturate(1.05) contrast(1.02)}
.ctaMedia .fade{display:none}

@media (max-width: 1020px){
  .ctaGrid{grid-template-columns:1fr}
  .ctaTitle{font-size:34px}
  .ctaMedia{min-height: 220px}
  .ctaMedia .img{background-position: center;}
}

.tGrid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.t{padding:18px; border-radius: var(--radius); border:1px solid rgba(15,23,42,.10); background:#fff; box-shadow: 0 10px 22px rgba(2,6,23,.06)}
.t b{display:block; font-size:14px}
.t p{margin:10px 0 0; color:var(--muted); line-height:1.85; font-size:14px}

.small{font-size:12px; line-height:1.8}

/* Footer (match screenshot layout) */
.footer2{padding:44px 0 26px; border-top:1px solid rgba(15,23,42,.08); background:#fff; color:rgba(17,24,39,.62)}
.footerTop{display:grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap:22px; align-items:start}
.fLogoRow{display:flex; gap:10px; align-items:center}
.fLogo{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg, var(--brand), #7aa3ff)}
.fBrand b{color:var(--text); font-weight:1000}
.fBrand p{margin:10px 0 0; line-height:1.9}

.fSub{display:flex; gap:10px; margin-top:14px; align-items:center}
.fSub input{flex:1; padding:12px 14px; border-radius:999px; border:1px solid rgba(15,23,42,.10); background:#fff; outline:none}
.fSub input:focus{border-color: rgba(47,107,255,.35); box-shadow: 0 0 0 4px rgba(47,107,255,.12)}
.fSub button{padding:12px 16px; border-radius:999px; border:0; background: rgba(47,107,255,.96); color:#fff; font-weight:900}
.fSub button:hover{background: rgba(29,78,216,.96)}

.fHead{color:var(--text); font-weight:1000; margin-bottom:10px}
.fCol a{display:block; color:rgba(17,24,39,.62); padding:7px 0}
.fCol a:hover{color:rgba(17,24,39,.85)}

.footerLine{height:1px; background: rgba(15,23,42,.08); margin:26px 0 16px}
.footerBottom{font-size:12px; color:rgba(17,24,39,.55)}

.floatWA{position:fixed; right:16px; bottom:16px; z-index:80}
.floatWA a{display:inline-flex; gap:10px; align-items:center; padding:12px 14px; border-radius:999px; background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff; font-weight:900; box-shadow: 0 18px 40px rgba(2,6,23,.18)}
.floatWA a:hover{filter:brightness(.96)}

/* RTL */
body[dir="rtl"] .heroNavInner{flex-direction:row-reverse}
body[dir="rtl"] .heroBrand{flex-direction:row-reverse}
body[dir="rtl"] .heroLinks{flex-direction:row-reverse}
body[dir="rtl"] .heroCtas{flex-direction:row-reverse}
body[dir="rtl"] .promoInner{flex-direction:row-reverse}
body[dir="rtl"] .floatWA{right:auto; left:16px}

/* Mobile polish */
@media (max-width: 1020px){
  .heroTop{min-height: 560px}
  .heroInner{padding:42px 0 50px}
  .heroGrid{grid-template-columns:1fr}
  .h1{font-size:38px; line-height:1.08}
  .lead{font-size:15px}
  .heroLinks{display:none}

  .fleetGrid{grid-template-columns: repeat(2, 1fr)}
  .dealGrid{grid-template-columns: repeat(2, 1fr)}
  .dealImg{height:170px}

  .serviceGrid{grid-template-columns: repeat(2, 1fr)}
  .processGrid{grid-template-columns: repeat(2, 1fr)}
  .why{grid-template-columns:1fr}
  .whyGrid{grid-template-columns:1fr}
  .tGrid{grid-template-columns:1fr}
  .footerTop{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px){
  .footerTop{grid-template-columns:1fr}
  .fSub{flex-direction:column; align-items:stretch}
  .fSub button{width:100%}

  .container{padding:0 16px}
  .heroPad{padding:0 16px}
  .heroTop{min-height: 560px}
  .h1{font-size:34px}

  .btnBase{width:100%; justify-content:center}
  .heroCtas{gap:10px}

  .fleetGrid{grid-template-columns:1fr}
  .dealGrid{grid-template-columns:1fr}
  .dealImg{height:190px}

  .serviceGrid{grid-template-columns:1fr}
  .processGrid{grid-template-columns:1fr}
  .whyGrid{grid-template-columns:1fr}
}