/* ============================================================
   TROY MOTORS — الرئيسية (مطابقة التصميم المرجعي)
   توزيع: عنوان يمين + لوجو مؤطر شمال + علامة مائية خلفية
   ============================================================ */
:root { --eb-ivory: #f5f2ea; --eb-gold: #d4af37; --eb-gold-dim: #b08d2a; --eb-black: #0a0a0a; }

body.home { background: var(--eb-black); overflow-x: hidden; }

/* ---------- الهيرو ---------- */
.eb-hero {
  position: relative;
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, #141311 0%, var(--eb-black) 70%);
}
/* العلامة المائية: اللوجو الأصلي في المنتصف بشفافية خفيفة */
.eb-hero .watermark {
  position: absolute; top: 50%; left: 50%;
  width: min(95vmin, 900px); height: min(95vmin, 900px);
  transform: translate(-50%, -50%);
  background: url('/assets/logo.jpg') center/contain no-repeat;
  opacity: .055;
  pointer-events: none;
  z-index: 0;
}
.eb-hero-inner {
  position: relative; z-index: 1;
  width: min(1440px, 100%);
  margin-inline: auto;
  padding: 64px clamp(20px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
}

/* ---------- النص (يمين) ---------- */
.eb-hero-copy { text-align: right; }
.eb-hero-kicker {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  color: var(--eb-gold); font-size: 15px; font-weight: 700; letter-spacing: 1px;
  margin-bottom: 18px;
}
.eb-hero-kicker::before, .eb-hero-kicker::after {
  content: ''; height: 1px; width: 34px; background: linear-gradient(90deg, transparent, var(--eb-gold-dim));
}
.eb-hero-kicker::after { background: linear-gradient(90deg, var(--eb-gold-dim), transparent); }

.eb-hero-title {
  margin: 0 0 22px;
  font-family: 'Amiri', var(--font-ar, 'Cairo'), serif;
  font-weight: 700;
  line-height: 1.28;
  font-size: clamp(40px, 5.6vw, 76px);
}
.eb-hero-title .l1 { display: block; color: var(--eb-ivory); }
.eb-hero-title .l2 { display: block; color: var(--eb-gold); }

.eb-hero-sub {
  color: #cfc9ba; font-size: clamp(15px, 1.4vw, 19px); font-weight: 400;
  line-height: 1.9; max-width: 520px; margin: 0 0 34px;
}

/* زر «شاهد السيارات» — ذهبي مع سهم، كتابة واضحة */
.eb-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--eb-gold); color: #111;
  font-weight: 800; font-size: 17px; font-family: var(--font-ar, 'Cairo'), sans-serif;
  padding: 15px 30px; border-radius: 6px;
  border: 1px solid var(--eb-gold);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.eb-btn svg { flex: 0 0 auto; }
.eb-btn:hover { background: var(--eb-ivory); border-color: var(--eb-ivory); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(212,175,55,.28); }

/* ---------- اللوجو المؤطر (شمال) ---------- */
.eb-hero-logo { display: flex; justify-content: center; }
.eb-frame {
  position: relative;
  padding: clamp(14px, 1.8vw, 24px);
  border: 1px solid rgba(212,175,55,.55);
  background: rgba(255,255,255,.015);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.eb-frame::before {
  content: ''; position: absolute; inset: 8px;
  border: 1px solid rgba(212,175,55,.28); pointer-events: none;
}
.eb-frame img {
  display: block;
  width: clamp(240px, 30vw, 430px); height: auto;
}
/* زخارف الزوايا */
.eb-corner { position: absolute; width: 26px; height: 26px; border: 0 solid var(--eb-gold); }
.eb-corner.c1 { top: -2px; right: -2px; border-top-width: 2px; border-right-width: 2px; }
.eb-corner.c2 { top: -2px; left: -2px; border-top-width: 2px; border-left-width: 2px; }
.eb-corner.c3 { bottom: -2px; right: -2px; border-bottom-width: 2px; border-right-width: 2px; }
.eb-corner.c4 { bottom: -2px; left: -2px; border-bottom-width: 2px; border-left-width: 2px; }

/* ---------- المتجاوب ---------- */
@media (max-width: 980px) {
  .eb-hero-inner { grid-template-columns: 1fr; gap: 44px; padding-top: 44px; }
  .eb-hero { min-height: auto; }
  .eb-hero-copy { text-align: center; }
  .eb-hero-kicker { justify-content: center; }
  .eb-hero-sub { margin-inline: auto; }
  .eb-hero-logo { order: -1; }
  .eb-frame img { width: clamp(210px, 58vw, 340px); }
  .eb-hero .watermark { opacity: .045; }
}