/* =========================================================
   R2 AUTO — RESKIN v2 (نظيف، بدون تداخل طبقات)
   ========================================================= */

/* ---------- scroll reveal ---------- */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }

/* ---------- hero ---------- */
.hero {
  position:relative;
  padding:96px 0 110px;
  overflow:hidden;
  background:radial-gradient(1000px 560px at 85% -10%, rgba(30, 75, 143, 0.16), transparent 60%),
    radial-gradient(800px 480px at -5% 112%, rgba(30, 75, 143, 0.09), transparent 60%),
    linear-gradient(180deg, #0f2347 0%, var(--bg) 60%, #0f2347 100%);
}
/* شبكة خفيفة خلف الكلام بس */
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(30, 75, 143, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 75, 143, 0.04) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(72% 78% at 50% 34%, #000, transparent 82%);
          mask-image:radial-gradient(72% 78% at 50% 34%, #000, transparent 82%);
  pointer-events:none;
}
/* إزالة أي pseudo إضافيين من النسخة القديمة */
.hero::after { content:none; }

.hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:54px; }

.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px;
  border:1px solid rgba(30, 75, 143, 0.5);
  border-radius:100px;
  color:var(--gold-2);
  font-size:0.78rem;
  letter-spacing:2.5px;
  margin-bottom:26px;
  background:linear-gradient(90deg, rgba(30, 75, 143, 0.14), rgba(30, 75, 143, 0.03));
}
.hero-badge .dot { width:7px; height:7px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 12px var(--gold); animation:pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity:1; } 50% { opacity:0.35; } }

.hero h1 {
  font-size:clamp(2.3rem, 4.9vw, 3.9rem);
  font-weight:900;
  line-height:1.2;
  letter-spacing:-0.4px;
}
.hero h1 .grad {
  background:linear-gradient(120deg, #a9c8ef, #1e4b8f 55%, #143a70);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero h1 em, .section-head h2 em {
  font-style:normal;
  background:linear-gradient(120deg, #a9c8ef, #1e4b8f);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p.lead { margin:22px 0 36px; color:#dbe8f9; font-size:1.16rem; font-weight:300; max-width:47ch; line-height:1.9; }

.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.hero-actions .btn-gold {
  background:linear-gradient(135deg, #77a6e0, #1e4b8f 60%, #143a70);
  color:#ffffff;
  box-shadow:0 10px 30px rgba(30, 75, 143, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.hero-actions .btn-ghost { border:1px solid var(--gold); color:var(--text); background:rgba(255, 255, 255, 0.04); }

.hero-stats {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:48px;
}
.hero-stats > div { border-right:1px solid rgba(30, 75, 143, 0.18); padding-right:16px; }
.hero-stats > div:first-child { border-right:none; padding-right:0; }
.hero-stats .num { font-size:1.7rem; font-weight:900; background:linear-gradient(120deg, #b9d3f5, var(--gold-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-stats .lbl { font-size:0.8rem; color:#dbe8f9; margin-top:3px; }

/* ---------- hero visual ---------- */
.hero-visual { position:relative; }
.hero-visual .halo {
  position:absolute;
  inset:-6%;
  z-index:0;
  background:radial-gradient(closest-side, rgba(30, 75, 143, 0.25), transparent 72%);
  pointer-events:none;
}
.hero-visual .car-frame {
  position:relative;
  z-index:1;
  height:100%;
  border-radius:26px;
  padding:14px;
  background:linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01) 40%), #0f2347;
  border:1px solid rgba(30, 75, 143, 0.4);
  box-shadow:0 34px 80px rgba(0, 0, 0, 0.55);
}
.hero-visual .car-frame::before,
.hero-visual .car-frame::after { content:none; display:none; }
.hero-visual .car-frame > img {
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:16px;
}
.hero-float {
  position:absolute;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;
  z-index:3;
  background:rgba(13, 14, 18, 0.92);
  border:1px solid rgba(30, 75, 143, 0.45);
  border-radius:16px;
  padding:12px 18px;
  box-shadow:0 16px 44px rgba(0, 0, 0, 0.45);
}
.hero-float .price { font-weight:900; font-size:1.2rem; color:var(--gold-2); }
.hero-float .what { color:#dbe8f9; font-size:0.76rem; }
.hero-float.tl { top:20px; right:16px; }
.hero-float.br { bottom:18px; left:16px; }
.hero-float.br .row { display:flex; gap:4px; font-size:0.85rem; color:#dbe8f9; margin-top:5px; }

/* ---------- brand marquee ---------- */
.brand-strip { border-block:1px solid var(--border); background:#0f2347; padding:20px 0; overflow:hidden; position:relative; }
.brand-strip::after { content:none; display:none; }
.marquee { display:flex; gap:56px; width:max-content; animation:scrollX 20s linear infinite; will-change:transform; }
.marquee span { color:#dbe8f9; font-weight:800; font-size:1.1rem; letter-spacing:3px; display:flex; align-items:center; gap:56px; white-space:nowrap; }
.marquee span::after { content:"◆"; color:rgba(30, 75, 143, 0.5); font-size:0.7rem; }
@keyframes scrollX { to { transform:translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding:84px 0; }
.section-head { margin-bottom:50px; }
.section-head .line { width:64px; height:2px; margin:16px auto 0; background:linear-gradient(90deg, transparent, var(--gold), transparent); }

/* ---------- car cards ---------- */
.car-card {
  position:relative;
  background:linear-gradient(180deg, #ffffff, #ffffff);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  transition:transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.car-card:hover { transform:translateY(-6px); border-color:rgba(30, 75, 143, 0.5); box-shadow:0 26px 54px rgba(0, 0, 0, 0.5); }
.car-card .thumb { position:relative; aspect-ratio:4 / 3; overflow:hidden; background:#f4f7fd; display:grid; place-items:center; }
.car-card .thumb img, .car-card .thumb svg { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.car-card:hover .thumb img, .car-card:hover .thumb svg { transform:scale(1.06); }
.car-card .thumb::after { content:""; position:absolute; inset:auto 0 0 0; height:42%; background:linear-gradient(transparent, rgba(8, 8, 10, 0.75)); pointer-events:none; }
.car-card .brand-chip {
  position:absolute;
  top:14px;
  inset-inline-start:14px;
  z-index:3;
  background:rgba(9, 9, 12, 0.68);
  border:1px solid rgba(30, 75, 143, 0.4);
  color:var(--gold-2);
  font-size:0.7rem;
  font-weight:800;
  letter-spacing:1px;
  padding:5px 13px;
  border-radius:100px;
}
.car-card .badge { top:14px; inset-inline-end:14px; inset-inline-start:auto; padding:5px 13px; font-size:0.7rem; z-index:3; box-shadow:0 6px 16px rgba(0, 0, 0, 0.3); }
.car-card .body { padding:18px 18px 20px; }
.car-card .title { font-size:1.18rem; font-weight:900; color:var(--text); display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.car-card .title .year { color:var(--text); font-weight:800; font-size:0.95rem; }
.car-card .meta { display:flex; flex-wrap:wrap; gap:8px 16px; color:var(--text); font-size:0.95rem; margin:12px 0 14px; padding:12px 0; border-block:1px solid var(--border); }
.car-card .meta span { display:inline-flex; align-items:center; gap:6px; }
.car-card .meta i { font-style:normal; color:var(--gold); }
.car-card .price-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.car-card .price { font-size:1.28rem; font-weight:900; color:var(--text); }
.car-card .status-txt { font-size:0.74rem; color:#4cc38a; font-weight:700; }
.car-card .actions { display:flex; gap:10px; margin-top:16px; }
.car-card .actions .btn { flex:1; }
.car-card .actions .btn-details { background:var(--card-2); border:1px solid var(--border); color:#3f4d66; }
.car-card .actions .btn-details:hover { border-color:var(--gold); color:var(--gold-2); }
.car-card .actions .btn-wa { flex:0 0 auto; width:44px; padding:0; font-size:1.05rem; }

/* ---------- latest arrival showcase ---------- */
.showcase { display:grid; grid-template-columns:1.15fr 1fr; gap:0; border-radius:24px; overflow:hidden; border:1px solid var(--border); background:linear-gradient(135deg, #ffffff, #ffffff); box-shadow:0 28px 64px rgba(0, 0, 0, 0.45); }
.showcase .sc-media { position:relative; min-height:420px; background:radial-gradient(at 30% 22%, #d7e0ee, #f4f7fd 78%); display:grid; place-items:center; }
.showcase .sc-media img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
.showcase .sc-media .glowline { position:absolute; inset:auto 0 0 0; height:55%; background:radial-gradient(60% 50% at 50% 115%, rgba(30, 75, 143, 0.22), transparent 70%); pointer-events:none; }
.showcase .sc-content { padding:50px 46px; display:flex; flex-direction:column; justify-content:center; }
.showcase .kicker { color:var(--gold); font-size:0.76rem; letter-spacing:3px; font-weight:800; margin-bottom:14px; text-transform:uppercase; }
.showcase h2 { font-size:clamp(1.5rem, 2.8vw, 2.1rem); font-weight:900; }
.showcase .sc-specs { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:24px 0; }
.showcase .sc-spec { background:var(--card); border:1px solid var(--border); border-radius:13px; padding:12px 14px; }
.showcase .sc-spec .k { color:#71809a; font-size:0.72rem; }
.showcase .sc-spec .v { font-weight:800; margin-top:2px; font-size:0.95rem; }
.showcase .sc-price { font-size:1.9rem; font-weight:900; background:linear-gradient(120deg, #a9c8ef, var(--gold-2)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:22px; }
.showcase .sc-actions { display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- how it works ---------- */
.steps-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; }
.step-card { position:relative; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:32px 24px; text-align:center; transition:all 0.3s; }
.step-card:hover { border-color:rgba(30, 75, 143, 0.5); transform:translateY(-5px); }
.step-card .step-num { width:62px; height:62px; margin:0 auto 20px; display:grid; place-items:center; font-size:1.5rem; font-weight:900; background:linear-gradient(135deg, #77a6e0, #1e4b8f); color:#ffffff; border-radius:18px; box-shadow:0 12px 28px rgba(30, 75, 143, 0.28); }
.step-card h4 { font-size:1.1rem; margin-bottom:8px; }
.step-card p { color:#66748c; font-size:0.92rem; line-height:1.8; }
.step-card .arrow { display:none; }

/* ---------- features ---------- */
.features-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.feature {
  background:linear-gradient(160deg, #ffffff, #ffffff);
  border:1px solid var(--border);
  border-radius:18px;
  padding:26px 24px;
  text-align:right;
  transition:all 0.3s;
  position:relative;
  overflow:hidden;
}
.feature::after { content:""; position:absolute; top:0; inset-inline:0; height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:0; transition:opacity 0.3s; }
.feature:hover { border-color:rgba(30, 75, 143, 0.45); transform:translateY(-4px); }
.feature:hover::after { opacity:1; }
.feature .icon { width:52px; height:52px; margin-bottom:16px; display:grid; place-items:center; border-radius:14px; font-size:1.4rem; background:var(--gold-dim); color:var(--gold-2); border:1px solid rgba(30, 75, 143, 0.25); }
.feature h4 { margin-bottom:8px; font-size:1.03rem; }
.feature p { color:#66748c; font-size:0.92rem; line-height:1.8; }

/* ---------- testimonials ---------- */
.testi-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.testi { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:24px; }
.testi .stars { color:var(--gold-2); letter-spacing:2px; margin-bottom:12px; }
.testi p { color:#4d5b73; line-height:1.9; font-size:0.94rem; }
.testi .who { margin-top:16px; display:flex; align-items:center; gap:12px; }
.testi .avatar { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-weight:800; background:var(--gold-dim); color:var(--gold-2); }
.testi .who b { display:block; font-size:0.92rem; }
.testi .who small { color:#71809a; }

/* ---------- cta band ---------- */
.cta-band {
  position:relative;
  padding:66px 40px;
  text-align:center;
  border-radius:26px;
  overflow:hidden;
  background:radial-gradient(700px 360px at 50% -12%, rgba(30, 75, 143, 0.2), transparent 68%),
    linear-gradient(135deg, #16345f, #16345f);
  border:1px solid rgba(30, 75, 143, 0.35);
}
.cta-band::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(30, 75, 143, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 75, 143, 0.04) 1px, transparent 1px); background-size:40px 40px; pointer-events:none; }
.cta-band > * { position:relative; }
.cta-band h2 { font-size:clamp(1.6rem, 3.2vw, 2.3rem); font-weight:900; margin-bottom:14px; }
.cta-band p { color:#dbe8f9; max-width:520px; margin:0 auto 30px; font-size:1rem; }

/* ---------- buttons ---------- */
.btn { border-radius:14px; font-weight:800; }
.btn-gold { background:linear-gradient(135deg, #77a6e0, #1e4b8f 60%, #143a70); color:#ffffff; border:none; box-shadow:0 8px 26px rgba(30, 75, 143, 0.28); }
.btn-gold:hover { filter:brightness(1.08); transform:translateY(-2px); }
.btn-whatsapp { background:linear-gradient(135deg, #2ec06a, #17a454); box-shadow:0 8px 26px rgba(23, 164, 84, 0.3); }

/* =========================================================
   RESKIN media queries
   ========================================================= */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns:1fr; gap:44px; }
  .hero { padding:74px 0 84px; }
  .hero-visual { max-width:600px; margin-inline:auto; width:100%; }
  .steps-grid { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .testi-grid { grid-template-columns:1fr; }
  .cars-layout .cars-grid { grid-template-columns:repeat(2, 1fr); }
  .showcase { grid-template-columns:1fr; }
  .showcase .sc-content { padding:34px 24px; }
  .showcase .sc-media { min-height:300px; }
}
@media (max-width: 560px) {
  .features-grid { grid-template-columns:1fr; }
  .hero-stats { grid-template-columns:1fr 1fr 1fr; }
  .cars-layout .cars-grid { grid-template-columns:1fr; }
  .hero-stats > div { padding-right:10px; }
  .sc-specs { grid-template-columns:1fr; }
  .hero-float.tl { top:10px; right:10px; }
  .hero-float.br { bottom:10px; left:10px; }
}

/* =========================================================
   PREMIUM FX — خلفيات غنية، طبقات، وأنميشن
   ========================================================= */

/* grain texture فوق كل الصفحة */
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:0.028;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

::selection { background:rgba(30, 75, 143, 0.35); color:#fff; }

/* سكرول بار احترافي */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#f4f7fd; }
::-webkit-scrollbar-thumb { background:linear-gradient(#d7e0ee, #ffffff); border-radius:6px; border:2px solid #d7e0ee; }
::-webkit-scrollbar-thumb:hover { background:var(--gold); }

/* ---------- hero background layers ---------- */
.hero-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.orb {
  position:absolute;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(30, 75, 143, 0.22), rgba(30, 75, 143, 0.05) 55%, transparent 75%);
  filter:blur(10px);
  will-change:transform;
}
.orb.o1 { width:620px; height:620px; top:-160px; left:-120px; animation:floatOrb 14s ease-in-out infinite; }
.orb.o2 { width:540px; height:540px; bottom:-180px; right:-120px; background:radial-gradient(closest-side, rgba(30, 75, 143, 0.18), rgba(30, 75, 143, 0.04) 55%, transparent 78%); animation:floatOrb 18s ease-in-out infinite reverse; }
.orb.o3 { width:360px; height:360px; top:30%; left:58%; background:radial-gradient(closest-side, rgba(42, 99, 180, 0.16), transparent 72%); animation:floatOrb 22s ease-in-out infinite; }
@keyframes floatOrb {
  0%, 100% { transform:translate(0, 0) scale(1); }
  33% { transform:translate(28px, -22px) scale(1.06); }
  66% { transform:translate(-20px, 18px) scale(0.97); }
}
.hero-grid { z-index:3; }
.hero::before { z-index:1; }
.hero::after { z-index:1; }

/* ---------- entrance animations ---------- */
@keyframes heroIn {
  from { opacity:0; transform:translateY(34px); }
  to { opacity:1; transform:none; }
}
.hero-badge, .hero h1, .hero p.lead, .hero-actions, .hero-stats, .hero-visual {
  opacity:0;
  animation:heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-badge { animation-delay:0.05s; }
.hero h1 { animation-delay:0.15s; }
.hero p.lead { animation-delay:0.3s; }
.hero-actions { animation-delay:0.45s; }
.hero-stats { animation-delay:0.6s; }
.hero-visual { animation-delay:0.35s; }

/* طفو خفيف للكروت العائمة */
.hero-float.tl { animation:floatCard 6s ease-in-out infinite; animation-delay:0.5s; }
.hero-float.br { animation:floatCard 7.5s ease-in-out infinite; animation-delay:1.1s; }
@keyframes floatCard {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-9px); }
}

/* نبض طفيف للتوهج ورا الصورة */
.hero-visual .halo { animation:haloPulse 6s ease-in-out infinite; }
@keyframes haloPulse {
  0%, 100% { opacity:0.85; transform:scale(1); }
  50% { opacity:1; transform:scale(1.04); }
}

/* ---------- shine sweep على الأزرار ---------- */
.btn { position:relative; overflow:hidden; }
.btn::after {
  content:"";
  position:absolute;
  top:0; left:-80%;
  width:50%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(30, 75, 143, 0.35), transparent);
  transform:skewX(-20deg);
  z-index:1;
  pointer-events:none;
}
.btn:hover::after { animation:shine 0.85s ease; }
@keyframes shine { to { left:130%; } }

/* بطاقة بتوّج الذهب عند الهوفر */
.feature, .step-card { position:relative; }
.feature::before, .step-card::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(30, 75, 143, 0.13), transparent 55%);
  opacity:0;
  transition:opacity 0.3s;
}
.feature:hover::before, .step-card:hover::before { opacity:1; }

/* ---------- كارت متوهج ---------- */
.car-card { outline:1px solid transparent; }
.car-card:hover { box-shadow:0 0 0 1px rgba(30, 75, 143, 0.4), 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 42px rgba(30, 75, 143, 0.12); }
.car-card .actions .btn-gold { background:linear-gradient(135deg, #77a6e0, #1e4b8f 60%, #143a70); color:#ffffff; box-shadow:none; }

/* ---------- هيدر بشادو عند السكرول ---------- */
.site-header { border-bottom-color:transparent; transition:border-color 0.3s, box-shadow 0.3s, background 0.3s; }
.site-header.scrolled {
  background:rgba(15, 35, 71, 0.96);
  border-bottom-color:rgba(30, 75, 143, 0.22);
  box-shadow:0 10px 34px rgba(0, 0, 0, 0.35);
}

/* ---------- خطوط ذهبية فاصلة للأقسام ---------- */
.section-head .line::after {
  content:"";
  display:block;
  width:24px;
  height:4px;
  border-radius:4px 4px 0 0;
  margin:-2px auto 0;
  background:linear-gradient(90deg, transparent, #8fb8e8, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .orb, .hero-float.tl, .hero-float.br, .hero-visual .halo, .cf-chat-fab { animation:none !important; }
  .hero-badge, .hero h1, .hero p.lead, .hero-actions, .hero-stats, .hero-visual { animation:none !important; opacity:1 !important; }
}

/* =========================================================
   RICH GLOBAL BACKGROUND — ملء الفراغات بعمق طبقات
   ========================================================= */

body {
  background-color:#f4f7fd;
  background-image:radial-gradient(1200px 760px at 12% -10%, rgba(30, 75, 143, 0.13), transparent 62%),
    radial-gradient(1000px 620px at 96% 2%, rgba(30, 75, 143, 0.07), transparent 55%),
    radial-gradient(860px 560px at 8% 106%, rgba(140, 160, 220, 0.05), transparent 60%),
    radial-gradient(900px 600px at 92% 104%, rgba(30, 75, 143, 0.09), transparent 58%),
    repeating-linear-gradient(rgba(30, 75, 143, 0.022) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(30, 75, 143, 0.022) 0 1px, transparent 1px 64px),
    linear-gradient(180deg, #f4f7fd, #f4f7fd 45%, #f4f7fd);
  background-attachment:fixed;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
}

/* خلفية الأقسام البديلة شفافة عشان تحس بالعمق بدل الفراغ */
.section-alt {
  background:linear-gradient(180deg, rgba(30, 75, 143, 0.06), rgba(30, 75, 143, 0.015) 45%, rgba(255, 255, 255, 0.012)) !important;
  border-color:rgba(30, 75, 143, 0.14) !important;
}

/* خط ذهبي رفيع أعلى كل قسم — إحساس بالطبقات */
.section { position:relative; }
.section::before {
  content:"";
  position:absolute;
  top:0;
  inset-inline:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(30, 75, 143, 0.14) 32%, rgba(30, 75, 143, 0.14) 68%, transparent);
  pointer-events:none;
}

/* ---------- page-hero غني لأي صفحة داخلية ---------- */
.page-hero {
  position:relative;
  overflow:hidden;
  padding:74px 0 86px;
  background:radial-gradient(720px 320px at 88% -40%, rgba(30, 75, 143, 0.18), transparent 65%),
    radial-gradient(600px 300px at 6% 130%, rgba(30, 75, 143, 0.10), transparent 60%),
    linear-gradient(180deg, #0f2347, #0f2347);
  border-bottom:none;
}
.page-hero::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(30, 75, 143, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 75, 143, 0.05) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(70% 90% at 50% 30%, #000, transparent 85%);
          mask-image:radial-gradient(70% 90% at 50% 30%, #000, transparent 85%);
  pointer-events:none;
}
.page-hero::after {
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(30, 75, 143, 0.55), transparent);
  pointer-events:none;
}
.page-hero > .container { position:relative; z-index:1; }
.page-hero h1 { font-size:clamp(1.9rem, 4vw, 2.7rem); font-weight:900; }
.page-hero .crumbs { margin-top:12px; color:#dbe8f9; font-size:0.9rem; }
.page-hero .crumbs a { color:var(--gold-2); }

.page-hero { background:linear-gradient(135deg,#16345f,#0f2347,#1e4b8f); }
.page-hero h1, .page-hero h1 em { color:#ffffff; }
.page-hero h1 em { font-style:normal; }
.page-hero h1 .big, .page-hero h1 em .big { color:#cfe0f5; }
.page-hero h1 .hi, .page-hero h1 em .hi { color:#ffffff; text-shadow:0 1px 2px rgba(7,15,31,.35); }

/* ---------- إبراز خفيف خلف شبكات السيارات ---------- */
.cars-grid { position:relative; }
.cars-grid::before {
  content:"";
  position:absolute;
  inset:-36px -30px;
  background:radial-gradient(48% 46% at 50% 0%, rgba(30, 75, 143, 0.11), transparent 72%);
  pointer-events:none;
  z-index:0;
}
.cars-grid > * { position:relative; z-index:1; }

/* صفحة السيارات: الفلاتر و 3 بطاقات بجنبها في الصف */
.cars-layout .cars-grid { grid-template-columns:repeat(3, 1fr); }
.cars-layout .cars-grid > .empty-state { grid-column:1 / -1; }

/* شريط الماركة كتعبئة فراغات تحت المحتوى */
.brand-strip { padding:24px 0; }

/* =========================================================
   SPECS TABLE + ميزات بشيك
   ========================================================= */
.specs-table { width:100%; border-collapse:collapse; margin-top:6px; }
.specs-table td { padding:14px 18px; border:1px solid var(--border); font-size:0.95rem; }
.specs-table td:first-child {
  width:34%;
  background:linear-gradient(90deg, rgba(30, 75, 143, 0.07), transparent);
  color:var(--gold-2);
  font-weight:800;
  border-inline:none;
}
.specs-table td:last-child { color:#445266; }

/* ---------- تبويبات تفاصيل السيارة ---------- */
.dt-tabs {
  display:flex;
  gap:6px;
  border-bottom:1px solid var(--border);
  margin-bottom:24px;
  flex-wrap:wrap;
}
.dt-tab {
  border:none;
  background:transparent;
  color:#66748c;
  font-weight:800;
  font-size:0.95rem;
  padding:13px 20px;
  cursor:pointer;
  border-radius:12px 12px 0 0;
  position:relative;
  transition:color 0.2s, background 0.2s;
}
.dt-tab:hover { color:#1e4b8f; background:rgba(30, 75, 143, 0.09); }
.dt-tab.active { color:var(--gold-2); background:rgba(30, 75, 143, 0.1); }
.dt-tab.active::after {
  content:"";
  position:absolute;
  inset:auto 0 -1px 0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.dt-panel { display:none; }
.dt-panel.active { display:block; animation:heroIn 0.35s ease; }

.feature-check { display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:12px; margin-top:18px; }
.fc-item {
  display:flex;
  align-items:center;
  gap:11px;
  background:linear-gradient(160deg, #ffffff, #ffffff);
  border:1px solid var(--border);
  border-radius:13px;
  padding:12px 14px;
  font-size:0.93rem;
  color:#3f4d66;
  transition:border-color 0.25s, transform 0.25s;
}
.fc-item:hover { border-color:rgba(30, 75, 143, 0.5); transform:translateY(-2px); }
.fc-ok {
  width:25px; height:25px; border-radius:9px; flex:0 0 25px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, #3ddc84, #17a454);
  color:#06130b; font-weight:900; font-size:0.82rem;
  box-shadow:0 6px 16px rgba(23, 164, 84, 0.3);
}

/* =========================================================
   CHAT SUPPORT — مساعد المعرض الذكي
   ========================================================= */
.cf-chat-fab {
  position:fixed;
  bottom:22px;
  inset-inline-end:22px;
  z-index:9000;
  width:60px; height:56px;
  border-radius:18px 18px 18px 6px;
  border:none; cursor:pointer;
  background:linear-gradient(135deg, #77a6e0, #1e4b8f 60%, #143a70);
  color:#ffffff;
  font-size:1.5rem;
  display:grid; place-items:center;
  box-shadow:0 14px 40px rgba(30, 75, 143, 0.4), 0 0 0 6px rgba(30, 75, 143, 0.1);
  transition:transform 0.25s;
  animation:cfGlow 2.6s ease-in-out infinite;
}
.cf-chat-fab::after {
  content:"";
  position:absolute;
  bottom:-6px;
  inset-inline-end:15px;
  width:14px; height:14px;
  background:inherit;
  transform:rotate(45deg);
  border-radius:3px;
}
@keyframes cfGlow {
  0%, 100% { box-shadow:0 14px 40px rgba(30, 75, 143, 0.34), 0 0 0 6px rgba(30, 75, 143, 0.08); }
  50% { box-shadow:0 18px 48px rgba(30, 75, 143, 0.55), 0 0 0 9px rgba(30, 75, 143, 0.15); }
}
.cf-chat-fab:hover { transform:translateY(-3px) scale(1.05); }
.cf-chat-fab .cf-badge {
  position:absolute;
  top:-2px;
  inset-inline-start:-2px;
  width:22px; height:22px;
  border-radius:50%;
  background:#3ddc84;
  color:#06130b;
  font-size:0.72rem; font-weight:900;
  display:grid; place-items:center;
  border:2px solid #d7e0ee;
}
.cf-chat {
  position:fixed;
  bottom:96px;
  inset-inline-end:22px;
  z-index:9001;
  width:min(390px, calc(100vw - 32px));
  border-radius:22px;
  overflow:hidden;
  display:none;
  flex-direction:column;
  background:linear-gradient(180deg, #ffffff, #ffffff);
  border:1px solid rgba(30, 75, 143, 0.35);
  box-shadow:0 30px 80px rgba(0, 0, 0, 0.6);
}
.cf-chat.open { display:flex; }
.cf-chat-head {
  padding:15px 17px;
  display:flex; gap:12px; align-items:center;
  background:radial-gradient(130% 170% at 90% -20%, rgba(93, 149, 212, 0.35), transparent 62%),
    #16345f;
  border-bottom:1px solid rgba(169, 188, 216, 0.25);
  color:#eef3fb;
}
.cf-chat-title b { display:block; font-size:1rem; color:#ffffff; }
.cf-chat-title small { color:#8fd6af; }
.cf-chat-avatar {
  width:44px; height:44px;
  border-radius:14px;
  flex:0 0 44px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, #77a6e0, #143a70);
  color:#ffffff; font-size:1.35rem;
}
.cf-chat-title b { display:block; font-size:1rem; color:#ffffff; }
.cf-close {
  margin-inline-start:auto;
  flex:0 0 32px;
  width:32px; height:32px;
  border:none;
  border-radius:10px;
  background:rgba(255, 255, 255, 0.12);
  color:#cfe0f5;
  font-size:0.88rem;
  cursor:pointer;
  line-height:1;
  display:grid; place-items:center;
}
.cf-close:hover { background:rgba(255, 255, 255, 0.22); color:#ffffff; }
.cf-chat-title small {
  color:#5fd39a; font-size:0.72rem;
  display:flex; align-items:center; gap:6px;
}
.cf-chat-title small::before {
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:#3ddc84; box-shadow:0 0 8px #3ddc84;
}
.cf-chat-body {
  padding:16px;
  display:flex; flex-direction:column; gap:10px;
  overflow-y:auto;
  max-height:46vh;
  min-height:220px;
}
.cf-msg {
  max-width:84%;
  padding:10px 14px;
  border-radius:14px;
  font-size:0.9rem;
  line-height:1.8;
  white-space:pre-wrap;
}
.cf-msg.bot {
  align-self:flex-start;
  background:#ffffff;
  border:1px solid rgba(30, 75, 143, 0.22);
  color:#49576e;
  border-start-start-radius:4px;
}
.cf-msg.user {
  align-self:flex-end;
  background:linear-gradient(135deg, #77a6e0, #1e4b8f);
  color:#ffffff; font-weight:700;
  border-start-end-radius:4px;
}
.cf-msg a { color:#a9c8ef; text-decoration:underline; }
.cf-msg .cf-wa {
  display:block;
  margin-top:9px;
  text-align:center;
  background:linear-gradient(135deg, #2ec06a, #17a454);
  color:#fff;
  border-radius:10px;
  padding:9px;
  text-decoration:none; font-weight:800;
}
.cf-typing { display:inline-flex; gap:4px; padding:6px 2px; }
.cf-typing i {
  width:7px; height:7px; border-radius:50%;
  background:#8f92a0;
  animation:cfBlink 1.2s infinite;
}
.cf-typing i:nth-child(2) { animation-delay:0.2s; }
.cf-typing i:nth-child(3) { animation-delay:0.4s; }
@keyframes cfBlink { 0%, 100% { opacity:0.25; } 50% { opacity:1; } }
.cf-chips { display:flex; flex-wrap:wrap; gap:8px; padding:4px 16px 12px; }
.cf-chip {
  flex:1 1 calc(33.333% - 8px);
  min-width:0;
  text-align:center;
  border:1px solid rgba(30, 75, 143, 0.4);
  background:rgba(30, 75, 143, 0.08);
  color:var(--gold-2);
  border-radius:100px;
  padding:8px 8px;
  font-size:0.76rem; font-weight:700;
  cursor:pointer;
  transition:background 0.2s;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cf-chip:hover { background:rgba(30, 75, 143, 0.2); }
.cf-chat-in {
  display:flex; gap:10px;
  padding:12px 16px 16px;
  border-top:1px solid var(--border);
}
.cf-chat-in input {
  flex:1;
  background:#ffffff;
  border:1px solid #c7d4e8;
  border-radius:12px;
  padding:12px 14px;
  color:#16233a; outline:none;
  caret-color:#1e4b8f;
}
.cf-chat-in input::placeholder { color:#8fa4c4; opacity:1; }
.cf-chat-in input:focus { border-color:#1e4b8f; box-shadow:0 0 0 3px rgba(30, 75, 143, 0.12); }
.cf-chat-send {
  width:46px; height:46px;
  border-radius:12px;
  border:none; cursor:pointer;
  background:linear-gradient(135deg, #77a6e0, #1e4b8f);
  color:#ffffff; font-size:1.2rem;
}
@media (max-width: 480px) {
  .cf-chat { bottom:84px; inset-inline-end:12px; }
  .cf-chat-fab { bottom:14px; inset-inline-end:14px; }
}