/* ============================================================
   UAE ELECTRIC SCOOTERS — Design System
   Black #000000 / Orange #FF6B00 / White #FFFFFF
   ============================================================ */

:root {
  --c-black: #0A0A0A;
  --c-black-soft: #171717;
  --c-orange: #FF6B00;
  --c-orange-dark: #E05F00;
  --c-white: #FFFFFF;
  --c-grey-bg: #F6F6F5;
  --c-grey-line: #E5E3E0;
  --c-grey-text: #6B6B6B;

  --font-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --radius: 4px;
  --container: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-black);
  background: var(--c-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .brand-marquee { overflow-x: auto; }
  .brand-track { width: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 2px;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 16px; color: var(--c-grey-text); max-width: 68ch; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--c-orange); color: var(--c-white); }
.btn-primary:hover { background: var(--c-orange-dark); }
.btn-dark { background: var(--c-black); color: var(--c-white); }
.btn-dark:hover { background: #000; }
.btn-outline { background: transparent; border-color: var(--c-black); color: var(--c-black); }
.btn-outline:hover { border-color: var(--c-orange); color: var(--c-orange); }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,0.5); color: var(--c-white); }
.btn-outline-light:hover { border-color: var(--c-orange); color: var(--c-orange); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: 0.85rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-grey-line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; max-width: var(--container); margin: 0 auto;
  gap: 24px;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; font-family: var(--font-display); }
.logo img { height: 40px; width: auto; }
.main-nav { display: flex; gap: 28px; }
.main-nav a { font-weight: 600; font-size: 0.92rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a.active { border-color: var(--c-orange); color: var(--c-orange); }
.header-actions { display: flex; align-items: center; gap: 16px; }
.icon-btn { position: relative; padding: 6px; }
.cart-count {
  position: absolute; top: -4px; right: -6px;
  background: var(--c-orange); color: var(--c-white);
  font-size: 0.65rem; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.hamburger { display: none; background: none; border: none; padding: 6px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--c-black); margin: 5px 0; }

.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--c-white); padding: 24px; overflow-y: auto;
}
.mobile-nav.open { display: block; }
.mobile-nav-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.mobile-nav a { display: block; font-size: 1.2rem; font-weight: 700; padding: 14px 0; border-bottom: 1px solid var(--c-grey-line); }
.mobile-close { background: none; border: none; font-size: 1.6rem; }


/* Search overlay */
.search-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(10,10,10,0.92); padding: 80px 24px;
}
.search-overlay.open { display: block; }
.search-overlay form { max-width: 640px; margin: 0 auto; display: flex; gap: 12px; }
.search-overlay input {
  flex: 1; padding: 16px 20px; font-size: 1.1rem; border: none; border-radius: var(--radius);
}
.search-overlay-close { position: absolute; top: 24px; right: 24px; background: none; border: none; color: var(--c-white); font-size: 1.8rem; }
@media (max-width: 480px) {
  .search-overlay { padding: 70px 16px; }
  .search-overlay form { flex-direction: column; }
  .search-overlay input { font-size: 1rem; padding: 14px 16px; }
}

@media (max-width: 900px) {
  .main-nav { display: none; }
  .hamburger { display: block; }
}
@media (max-width: 480px) {
  .header-inner { padding: 12px 16px; gap: 10px; }
  .logo { font-size: 0.95rem; gap: 6px; }
  .logo img { height: 30px; }
  .header-actions { gap: 8px; }
  .icon-btn svg { width: 20px; height: 20px; }
}

/* ---------- WhatsApp float button ---------- */
.whatsapp-float {
  position: fixed; bottom: 22px; right: 22px; z-index: 400;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
}
.whatsapp-float:hover { transform: scale(1.06); }
.whatsapp-float svg { width: 28px; height: 28px; }
.whatsapp-float::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; animation: whatsapp-pulse 2.2s ease-out infinite;
}
@keyframes whatsapp-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}


/* ---------- Hero slider ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--c-black); color: var(--c-white);
  min-height: 560px; display: flex; align-items: center;
}
.hero-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease;
  background-size: cover; background-position: center;
}
.hero-slide.active { opacity: 1; }
.hero-slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.15) 100%);
}
.hero-content {
  position: relative; z-index: 2; max-width: 560px; padding: 0 24px;
  margin: 0 auto; width: 100%;
}
.hero-badge {
  display: inline-block; background: var(--c-orange); color: var(--c-white);
  font-size: 0.75rem; font-weight: 700; padding: 6px 12px; border-radius: var(--radius);
  margin-bottom: 16px;
}
.hero-content h1 { color: var(--c-white); }
.hero-content p { color: rgba(255,255,255,0.85); font-size: 1.05rem; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.hero-dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; }
.hero-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,0.4); padding: 0; }
.hero-dots button.active { background: var(--c-orange); width: 24px; border-radius: 5px; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: rgba(255,255,255,0.12); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem; }
.hero-arrow:hover { background: var(--c-orange); }
.hero-arrow.prev { left: 20px; } .hero-arrow.next { right: 20px; }
@media (max-width: 700px) { .hero { min-height: 460px; } .hero-arrow { display: none; } }
@media (max-width: 480px) {
  .hero { min-height: 420px; }
  .hero-content { padding: 0 18px; max-width: 100%; }
  .hero-badge { font-size: 0.68rem; padding: 5px 10px; margin-bottom: 12px; }
  .hero-content p { font-size: 0.92rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .hero-dots { bottom: 16px; }
}

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section-tight { padding: 48px 0; }
.section-alt { background: var(--c-grey-bg); }
.section-dark { background: var(--c-black); color: var(--c-white); }
.section-dark p { color: rgba(255,255,255,0.7); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.section-head h2 { margin-bottom: 6px; }
@media (max-width: 480px) {
  .section { padding: 44px 0; }
  .section-tight { padding: 32px 0; }
  .container { padding: 0 16px; }
  .section-head { margin-bottom: 24px; }
}

/* ---------- Brands marquee (auto-scrolling, pauses on hover) ---------- */
.brand-marquee { overflow: hidden; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.brand-track { display: flex; gap: 48px; width: max-content; animation: brand-scroll 32s linear infinite; }
.brand-marquee:hover .brand-track { animation-play-state: paused; }
@keyframes brand-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.brand-card { flex: 0 0 auto; width: 140px; height: 90px; border: 1px solid var(--c-grey-line); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--c-white); transition: border-color 0.2s ease, transform 0.2s ease; }
.brand-card:hover { border-color: var(--c-orange); transform: translateY(-2px); }
.brand-card img { max-height: 48px; }

/* ---------- Category carousel (banner + horizontal scroller) ---------- */
.category-carousel { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: stretch; }
.category-banner { position: relative; border-radius: 10px; overflow: hidden; min-height: 340px; }
.category-banner img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.category-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.05)); }
.banner-cta {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  background: var(--c-orange); color: var(--c-white); font-weight: 700; font-size: 0.9rem;
  padding: 12px 20px; border-radius: var(--radius); transition: background 0.2s ease, transform 0.2s ease;
}
.banner-cta:hover { background: var(--c-orange-dark); transform: translateY(-2px); }
.carousel-wrap { min-width: 0; }
.carousel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.carousel-head h2 { margin: 0; }
.carousel-head .accent { color: var(--c-orange); }
.carousel-arrows { display: flex; gap: 8px; }
.carousel-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--c-grey-line); background: var(--c-white); font-size: 1.2rem; color: var(--c-black); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.carousel-arrow:hover { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-white); }
.carousel-track { display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item { flex: 0 0 220px; }
@media (max-width: 900px) {
  .category-carousel { grid-template-columns: 1fr; }
  .category-banner { min-height: 180px; }
}
@media (max-width: 480px) {
  .carousel-item { flex-basis: 168px; }
  .carousel-head h2 { font-size: 1.3rem; }
}

/* ---------- Scroll-reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.revealed { opacity: 1; transform: none; }

/* ---------- Category cards ---------- */
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.category-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; background: var(--c-black); }
.category-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; transition: opacity 0.25s ease, transform 0.4s ease; }
.category-card:hover img { opacity: 0.55; transform: scale(1.04); }
.category-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: var(--c-white); }
.category-info h3 { color: var(--c-white); margin-bottom: 4px; }
.category-info span { font-size: 0.85rem; color: var(--c-orange); font-weight: 700; }
@media (max-width: 900px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .category-grid { grid-template-columns: 1fr; gap: 14px; } .category-card { aspect-ratio: 16/10; } }

/* ---------- Product grid & cards ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 460px) { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  border: 1px solid var(--c-grey-line); border-radius: var(--radius);
  overflow: hidden; background: var(--c-white); display: flex; flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.product-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.08); transform: translateY(-2px); }
.product-thumb { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--c-grey-bg); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.product-card:hover .product-thumb img { transform: scale(1.06); }
.product-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; }
.badge { font-size: 0.68rem; font-weight: 800; padding: 4px 9px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.03em; }
.badge-new { background: var(--c-black); color: var(--c-white); }
.badge-sale { background: var(--c-orange); color: var(--c-white); }
.badge-out { background: var(--c-grey-text); color: var(--c-white); }
.product-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-brand { font-size: 0.72rem; font-weight: 700; color: var(--c-grey-text); text-transform: uppercase; letter-spacing: 0.03em; }
.product-name { font-weight: 700; font-size: 0.98rem; }
.product-price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.price-now { font-weight: 800; font-size: 1.1rem; color: var(--c-black); }
.price-was { text-decoration: line-through; color: var(--c-grey-text); font-size: 0.85rem; }
.product-actions { margin-top: auto; display: flex; gap: 8px; padding-top: 10px; }
.product-actions .btn { flex: 1; padding: 10px 12px; font-size: 0.82rem; }
@media (max-width: 480px) {
  .product-body { padding: 12px; gap: 4px; }
  .product-name { font-size: 0.88rem; }
  .price-now { font-size: 1rem; }
  .product-actions { flex-direction: column; }
  .product-actions .btn { width: 100%; }
}

/* ---------- Trust strip / why-choose-us ---------- */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.trust-item { text-align: center; padding: 24px; }
.trust-icon { width: 48px; height: 48px; margin: 0 auto 14px; color: var(--c-orange); }
@media (max-width: 800px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust-strip { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Filters (shop page) ---------- */
.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.filters { border: 1px solid var(--c-grey-line); border-radius: var(--radius); padding: 20px; position: sticky; top: 96px; }
.filters h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 20px 0 10px; }
.filters h4:first-child { margin-top: 0; }
.filter-option { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.92rem; }
.filters input[type=checkbox], .filters input[type=radio] { accent-color: var(--c-orange); }
.filters select, .filters input[type=text] { width: 100%; padding: 10px; border: 1px solid var(--c-grey-line); border-radius: var(--radius); }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .shop-layout { grid-template-columns: 1fr; } .filters { position: static; } }

/* ---------- Product detail ---------- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.gallery-main { aspect-ratio: 1/1; border: 1px solid var(--c-grey-line); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 10px; }
.gallery-thumbs img { width: 72px; height: 72px; object-fit: cover; border: 2px solid var(--c-grey-line); border-radius: var(--radius); cursor: pointer; }
.gallery-thumbs img.active { border-color: var(--c-orange); }
.pd-price { font-size: 1.8rem; font-weight: 800; margin: 12px 0; }
.pd-qty { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.qty-box { display: flex; align-items: center; border: 1px solid var(--c-grey-line); border-radius: var(--radius); }
.qty-box button { width: 40px; height: 44px; border: none; background: none; font-size: 1.1rem; }
.qty-box input { width: 48px; text-align: center; border: none; }
.spec-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.spec-table td { padding: 10px 12px; border-bottom: 1px solid var(--c-grey-line); font-size: 0.92rem; }
.spec-table td:first-child { font-weight: 700; width: 40%; color: var(--c-grey-text); }
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--c-grey-line); margin: 40px 0 20px; }
.tab-btn { background: none; border: none; padding: 10px 0; font-weight: 700; color: var(--c-grey-text); border-bottom: 2px solid transparent; }
.tab-btn.active { color: var(--c-black); border-color: var(--c-orange); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
@media (max-width: 800px) { .product-detail { grid-template-columns: 1fr; } }

/* ---------- Cart & checkout ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-card { border: 1px solid var(--c-grey-line); border-radius: 10px; overflow: hidden; background: var(--c-white); box-shadow: 0 4px 24px rgba(0,0,0,0.05); }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-grey-text); padding: 16px 20px; border-bottom: 1px solid var(--c-grey-line); background: var(--c-grey-bg); }
.cart-table td { padding: 18px 20px; border-bottom: 1px solid var(--c-grey-line); vertical-align: middle; }
.cart-table tr:last-child td { border-bottom: none; }
.cart-table tbody tr:hover { background: #FAFAF9; }
@media (max-width: 700px) {
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tr { padding: 16px 16px 10px; border-bottom: 8px solid var(--c-grey-bg); }
  .cart-table tr:last-child { border-bottom: none; }
  .cart-table td { padding: 8px 0; border-bottom: none; }
  .cart-table td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .cart-table td[data-label]::before { content: attr(data-label); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--c-grey-text); }
  .cart-table td:first-child { padding-bottom: 12px; }
  .cart-table td:last-child { padding-top: 4px; text-align: right; }
}
.cart-item-info { display: flex; align-items: center; gap: 14px; }
.cart-item-info img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--c-grey-line); }
.cart-remove { color: var(--c-grey-text); font-size: 0.82rem; text-decoration: none; font-weight: 600; }
.cart-remove:hover { color: #B4361A; text-decoration: underline; }

.cart-summary { border: 1px solid var(--c-grey-line); border-radius: 10px; padding: 26px; background: var(--c-white); box-shadow: 0 4px 24px rgba(0,0,0,0.05); position: sticky; top: 96px; }
.cart-summary h3 { margin-bottom: 16px; }
.summary-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: 0.92rem; color: var(--c-grey-text); }
.summary-row.total { font-weight: 800; font-size: 1.2rem; color: var(--c-black); border-top: 1px solid var(--c-grey-line); margin-top: 8px; padding-top: 16px; }
.checkout-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 480px) {
  .cart-summary { padding: 18px; position: static; }
  .cart-item-info img { width: 52px; height: 52px; }
  .qty-box button { width: 34px; height: 38px; }
  .qty-box input { width: 38px; }
}
@media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], textarea, select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--c-grey-line); border-radius: var(--radius);
  font-family: inherit; font-size: 0.95rem;
}
input:focus, textarea:focus, select:focus { border-color: var(--c-orange); }
textarea { resize: vertical; min-height: 100px; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--c-grey-line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 18px 0; font-weight: 700; font-size: 1.02rem; display: flex; justify-content: space-between; align-items: center; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-a p { padding-bottom: 16px; margin: 0; }
.faq-item.open .faq-a { max-height: 400px; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.plus { transition: transform 0.2s ease; font-size: 1.4rem; color: var(--c-orange); }

/* ---------- Contact page ---------- */
.contact-hero { background: var(--c-black); color: var(--c-white); padding: 64px 0 90px; text-align: center; }
.contact-hero h1 { color: var(--c-white); }
.contact-hero p { color: rgba(255,255,255,0.7); max-width: 46ch; margin: 0 auto; }
.contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 28px; align-items: start; margin-top: -56px; position: relative; z-index: 2; }

.contact-info-card {
  border: 1px solid var(--c-grey-line); border-radius: 10px; padding: 8px 24px;
  background: var(--c-white); box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.info-row {
  display: flex; gap: 14px; align-items: center; padding: 18px 0;
  border-bottom: 1px solid var(--c-grey-line);
}
.info-row:last-child { border-bottom: none; }
.info-row .info-icon {
  width: 34px; height: 34px; border-radius: 8px; background: var(--c-grey-bg); color: var(--c-orange);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.info-row .info-icon svg { width: 16px; height: 16px; stroke-width: 2.2; }
.info-row .info-label { margin: 0 0 2px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-grey-text); }
.info-row .info-value { margin: 0; font-weight: 700; font-size: 0.92rem; color: var(--c-black); }

.contact-form-card {
  border: 1px solid var(--c-grey-line); border-radius: 10px; padding: 32px;
  background: var(--c-white); box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.contact-form-card .form-eyebrow { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-orange); margin-bottom: 6px; }
.contact-form-card h3 { margin-bottom: 4px; }
.contact-form-card > p.form-sub { margin-bottom: 24px; font-size: 0.9rem; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; margin-top: -40px; }
  .contact-form-card { order: -1; }
}
@media (max-width: 480px) {
  .contact-hero { padding: 48px 0 70px; }
  .contact-form-card { padding: 22px; }
  .contact-info-card { padding: 4px 18px; }
}

/* ---------- Alerts / empty states ---------- */
.alert { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px; font-size: 0.92rem; }
.alert-success { background: #E8F7EE; color: #1B7A3D; }
.alert-error { background: #FDEAE3; color: #B4361A; }
.empty-state { text-align: center; padding: 80px 24px; }
.empty-state h2 { margin-bottom: 8px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-black); color: rgba(255,255,255,0.75); padding: 64px 0 24px; margin-top: 64px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; margin-bottom: 48px; }
.footer-col h4 { color: var(--c-white); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 16px; }
.footer-col a { display: block; padding: 5px 0; font-size: 0.9rem; }
.footer-col a:hover { color: var(--c-orange); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; font-size: 0.82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.social-icons { display: flex; gap: 12px; }
.social-icons a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.social-icons a:hover { border-color: var(--c-orange); background: var(--c-orange); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .site-footer { padding: 44px 0 20px; margin-top: 44px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; text-align: left; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; }
}

/* ---------- Misc ---------- */
.breadcrumb { font-size: 0.85rem; color: var(--c-grey-text); padding: 16px 0; }
.breadcrumb a:hover { color: var(--c-orange); }
.page-header { background: var(--c-black); color: var(--c-white); padding: 56px 0 40px; text-align: center; }
.page-header h1 { color: var(--c-white); }
.policy-body { max-width: 780px; margin: 0 auto; }
.policy-body h2 { margin-top: 32px; }
.stat-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.stat-card { border: 1px solid var(--c-grey-line); border-radius: var(--radius); padding: 24px; text-align: center; }
.stat-card .num { font-size: 2rem; font-weight: 800; color: var(--c-orange); }
@media (max-width: 800px) { .stat-cards { grid-template-columns: 1fr 1fr; } }


/* ============================================================
   UAE ELECTRIC SCOOTERS — PREMIUM MOTION / AL MUBDIE-INSPIRED
   Visual direction: premium UAE mobility store
   Keeps the existing black / white / orange brand identity,
   while adding depth, motion, stronger hierarchy and polish.
   ============================================================ */

:root {
  --c-black: #070707;
  --c-black-soft: #111111;
  --c-black-card: #151515;
  --c-orange: #ff6b00;
  --c-orange-dark: #d95500;
  --c-orange-light: #ff8a3d;
  --c-white: #ffffff;
  --c-grey-bg: #f5f5f3;
  --c-grey-soft: #fafaf9;
  --c-grey-line: #e8e5e1;
  --c-grey-text: #66635f;
  --c-text: #171717;
  --container: 1280px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 4px 16px rgba(0,0,0,.06);
  --shadow-md: 0 14px 38px rgba(0,0,0,.10);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.15);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Global polish ---------- */
html {
  scroll-behavior: smooth;
  background: var(--c-white);
}

body {
  color: var(--c-text);
  background:
    radial-gradient(circle at 15% 0%, rgba(255,107,0,.035), transparent 28rem),
    var(--c-white);
  overflow-x: hidden;
}

::selection {
  background: var(--c-orange);
  color: #fff;
}

img {
  image-rendering: auto;
}

a,
button,
input,
textarea,
select,
.product-card,
.category-card,
.brand-card,
.carousel-arrow,
.social-icons a,
.icon-btn {
  transition:
    color .25s var(--ease),
    background-color .25s var(--ease),
    border-color .25s var(--ease),
    box-shadow .35s var(--ease),
    transform .35s var(--ease),
    opacity .25s ease,
    filter .35s var(--ease);
}

/* ---------- Premium announcement strip ---------- */
.announcement-bar {
  position: relative;
  z-index: 110;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  overflow: hidden;
  background: var(--c-black);
  color: rgba(255,255,255,.92);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.announcement-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255,255,255,.10) 40%,
    transparent 60%
  );
  transform: translateX(-100%);
  animation: announcement-shine 6s ease-in-out infinite;
}

@keyframes announcement-shine {
  0%, 55% { transform: translateX(-110%); }
  80%, 100% { transform: translateX(110%); }
}

/* ---------- Header ---------- */
.site-header {
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 3px 22px rgba(0,0,0,.045);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.header-inner {
  min-height: 76px;
  padding: 13px 24px;
}

.logo {
  position: relative;
  font-weight: 900;
  letter-spacing: -.035em;
}

.logo img {
  height: 42px;
  width: auto;
  object-fit: contain;
  transition: transform .35s var(--ease), filter .35s ease;
}

.logo:hover img {
  transform: scale(1.035);
  filter: drop-shadow(0 5px 14px rgba(255,107,0,.18));
}

.main-nav {
  align-items: center;
  gap: 30px;
}

.main-nav a {
  position: relative;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 28px 0;
  border-bottom: 0;
  color: #252525;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 17px;
  height: 2px;
  border-radius: 10px;
  background: var(--c-orange);
  transition: left .3s var(--ease), right .3s var(--ease);
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--c-orange);
}

.main-nav a:hover::after,
.main-nav a.active::after {
  left: 0;
  right: 0;
}

.header-actions {
  gap: 9px;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.icon-btn:hover {
  background: #fff1e8;
  color: var(--c-orange);
  transform: translateY(-2px);
}

.cart-count {
  box-shadow: 0 4px 12px rgba(255,107,0,.35);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  min-height: 46px;
  padding: 13px 25px;
  border-radius: 9px;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -120%;
  width: 70%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform: skewX(-18deg);
  transition: left .55s var(--ease);
}

.btn:hover::before {
  left: 145%;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.btn:active {
  transform: translateY(-1px) scale(.99);
}

.btn-primary {
  background: linear-gradient(135deg, var(--c-orange), #ff7d21);
  box-shadow: 0 8px 22px rgba(255,107,0,.20);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #ff7410, var(--c-orange-dark));
  box-shadow: 0 14px 30px rgba(255,107,0,.28);
}

.btn-dark {
  background: linear-gradient(135deg, #050505, #1c1c1c);
}

.btn-outline {
  background: #fff;
  border-color: #d8d5d1;
}

.btn-outline:hover {
  background: #fff6f0;
  border-color: var(--c-orange);
  color: var(--c-orange);
}

/* ---------- Hero ---------- */
.hero {
  min-height: 650px;
  isolation: isolate;
  background: #050505;
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto -10% -35% 35%;
  height: 70%;
  background: radial-gradient(circle, rgba(255,107,0,.20), transparent 64%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 1;
}

.hero-slide {
  transition: opacity .8s var(--ease), transform 8s linear;
}

.hero-slide.active {
  transform: scale(1.015);
}

.hero-slide::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.58) 46%, rgba(0,0,0,.20) 100%),
    linear-gradient(0deg, rgba(0,0,0,.32), transparent 45%);
}

.hero-content {
  max-width: 1240px;
  padding: 0 24px;
}

.hero-badge {
  position: relative;
  overflow: hidden;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255,107,0,.15);
  border: 1px solid rgba(255,145,77,.55);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  backdrop-filter: blur(8px);
  animation: hero-badge-in .7s var(--ease) both;
}

.hero-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.25), transparent);
  transform: translateX(-110%);
  animation: badge-shine 4s ease-in-out infinite;
}

@keyframes hero-badge-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes badge-shine {
  0%, 60% { transform: translateX(-110%); }
  82%, 100% { transform: translateX(110%); }
}

.hero-content h1 {
  max-width: 760px;
  font-size: clamp(2.7rem, 6vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.055em;
  text-shadow: 0 8px 35px rgba(0,0,0,.30);
}

.hero-content p {
  max-width: 650px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
}

.hero-ctas {
  margin-top: 24px;
}

.hero-dots button {
  width: 8px;
  height: 8px;
  opacity: .65;
  transition: width .3s var(--ease), background .3s ease, opacity .3s ease;
}

.hero-dots button.active {
  width: 34px;
  opacity: 1;
  box-shadow: 0 0 18px rgba(255,107,0,.55);
}

.hero-arrow {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  transition: all .3s var(--ease);
}

.hero-arrow:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

/* ---------- Sections ---------- */
.section {
  position: relative;
  padding: 88px 0;
}

.section::after {
  content: "";
  display: block;
  clear: both;
}

.section-alt {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,107,0,.035), transparent 28rem),
    var(--c-grey-bg);
}

.section-dark {
  background:
    radial-gradient(circle at 80% 15%, rgba(255,107,0,.13), transparent 28rem),
    linear-gradient(135deg, #050505, #121212);
}

.section-head {
  margin-bottom: 42px;
}

.section-head h2 {
  letter-spacing: -.045em;
}

.section-head h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 13px;
  border-radius: 5px;
  background: var(--c-orange);
}

.section-head > a {
  font-weight: 800;
  color: var(--c-orange);
}

.section-head > a:hover {
  transform: translateX(5px);
}

/* ---------- Brand marquee ---------- */
.brand-marquee {
  padding: 8px 0;
}

.brand-track {
  gap: 18px;
  animation-duration: 38s;
}

.brand-card {
  width: 158px;
  height: 94px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e8e5e1;
  box-shadow: var(--shadow-sm);
}

.brand-card:hover {
  border-color: rgba(255,107,0,.5);
  box-shadow: 0 14px 30px rgba(0,0,0,.09);
  transform: translateY(-5px);
}

/* ---------- Category cards ---------- */
.category-grid {
  gap: 22px;
}

.category-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.76) 100%);
  pointer-events: none;
}

.category-card img {
  opacity: .82;
  transition: transform .75s var(--ease), opacity .5s ease, filter .5s ease;
}

.category-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

.category-card:hover img {
  opacity: .68;
  transform: scale(1.09);
  filter: saturate(1.08);
}

.category-info {
  z-index: 2;
  padding: 24px;
}

.category-info h3 {
  font-size: 1.4rem;
  letter-spacing: -.025em;
}

/* ---------- Product cards ---------- */
.product-grid {
  gap: 22px;
}

.product-card {
  position: relative;
  border: 1px solid #e8e5e1;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 22px rgba(0,0,0,.045);
  overflow: hidden;
}

.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid transparent;
  border-radius: inherit;
  transition: border-color .35s ease;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 48px rgba(0,0,0,.12);
}

.product-card:hover::after {
  border-color: rgba(255,107,0,.22);
}

.product-thumb {
  background:
    radial-gradient(circle at 50% 45%, #fff, #f2f2f0);
  aspect-ratio: 1 / 1.02;
}

.product-thumb::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 12px;
  height: 24px;
  background: rgba(0,0,0,.10);
  filter: blur(14px);
  border-radius: 50%;
  opacity: .45;
  transition: opacity .35s ease, transform .35s ease;
}

.product-card:hover .product-thumb::after {
  opacity: .65;
  transform: scale(1.05);
}

.product-thumb img {
  transition: transform .65s var(--ease), filter .5s ease;
}

.product-card:hover .product-thumb img {
  transform: scale(1.075) translateY(-3px);
  filter: contrast(1.025) saturate(1.03);
}

.product-badges {
  top: 13px;
  left: 13px;
  z-index: 3;
}

.badge {
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 5px 14px rgba(0,0,0,.10);
}

.badge-sale {
  background: linear-gradient(135deg, #ff6b00, #ff842e);
}

.product-body {
  padding: 18px;
  gap: 7px;
}

.product-brand {
  color: var(--c-orange);
  letter-spacing: .08em;
  font-size: .67rem;
}

.product-name {
  font-size: 1rem;
  line-height: 1.35;
  transition: color .25s ease;
}

.product-card:hover .product-name {
  color: var(--c-orange);
}

.price-now {
  font-size: 1.18rem;
  letter-spacing: -.025em;
}

.product-actions {
  gap: 9px;
}

.product-actions .btn {
  border-radius: 8px;
}

/* ---------- Trust strip ---------- */
.trust-strip {
  gap: 18px;
}

.trust-item {
  position: relative;
  padding: 28px 20px;
  border: 1px solid var(--c-grey-line);
  border-radius: 15px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
}

.trust-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(255,107,0,.3);
}

.trust-icon {
  width: 52px;
  height: 52px;
  padding: 13px;
  border-radius: 14px;
  background: #fff1e8;
  color: var(--c-orange);
}

/* ---------- Category banner / carousel ---------- */
.category-carousel {
  gap: 30px;
}

.category-banner {
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}

.category-banner img {
  transition: transform .8s var(--ease);
}

.category-banner:hover img {
  transform: scale(1.05);
}

.banner-cta {
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.carousel-arrow {
  box-shadow: var(--shadow-sm);
}

.carousel-arrow:hover {
  transform: scale(1.08);
  box-shadow: 0 9px 22px rgba(255,107,0,.22);
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px) scale(.985);
  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* Optional stagger classes for JS-generated sections */
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

/* ---------- Shop filters ---------- */
.filters {
  border: 1px solid #e7e3de;
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.filters h4 {
  color: #292929;
}

.filter-option {
  border-radius: 7px;
  padding: 7px 8px;
  transition: background .25s ease, color .25s ease;
}

.filter-option:hover {
  background: #fff5ee;
  color: var(--c-orange);
}

.toolbar {
  padding: 14px 16px;
  border-radius: 12px;
  background: #faf9f7;
  border: 1px solid #ece8e3;
}

.toolbar select {
  min-width: 175px;
  background: #fff;
}

/* ---------- Product detail ---------- */
.product-detail {
  gap: 58px;
}

.gallery-main {
  border-radius: 18px;
  background: #f6f6f4;
  box-shadow: var(--shadow-sm);
}

.gallery-main img {
  transition: transform .65s var(--ease);
}

.gallery-main:hover img {
  transform: scale(1.025);
}

.gallery-thumbs img {
  border-radius: 10px;
  transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
}

.gallery-thumbs img:hover,
.gallery-thumbs img.active {
  transform: translateY(-3px);
  border-color: var(--c-orange);
  box-shadow: 0 7px 18px rgba(0,0,0,.09);
}

.pd-price {
  color: var(--c-orange);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}

/* ---------- Forms ---------- */
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
textarea,
select {
  min-height: 46px;
  border-color: #ddd9d4;
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.025);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--c-orange);
  box-shadow: 0 0 0 4px rgba(255,107,0,.10);
}

/* ---------- Cart / checkout ---------- */
.cart-card,
.cart-summary,
.contact-info-card,
.contact-form-card {
  border-color: #e7e3de;
  border-radius: 15px;
  box-shadow: var(--shadow-sm);
}

.cart-card:hover,
.cart-summary:hover {
  box-shadow: var(--shadow-md);
}

.cart-table th {
  background: #f8f7f5;
}

.cart-table tbody tr {
  transition: background .25s ease;
}

.cart-table tbody tr:hover {
  background: #fff9f5;
}

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom-color: #e8e5e1;
}

.faq-q {
  transition: color .25s ease, padding-left .25s ease;
}

.faq-q:hover {
  color: var(--c-orange);
  padding-left: 5px;
}

.faq-item.open .faq-q {
  color: var(--c-orange);
}

.plus {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff1e8;
}

/* ---------- Contact / page headers ---------- */
.contact-hero,
.page-header {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 20%, rgba(255,107,0,.16), transparent 25rem),
    linear-gradient(135deg, #050505, #151515);
}

.contact-hero::before,
.page-header::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -150px;
  top: -220px;
  border: 1px solid rgba(255,107,0,.18);
  border-radius: 50%;
  box-shadow:
    0 0 0 55px rgba(255,107,0,.035),
    0 0 0 110px rgba(255,107,0,.018);
  animation: header-orbit 12s linear infinite;
}

@keyframes header-orbit {
  to { transform: rotate(360deg); }
}

.contact-form-card {
  backdrop-filter: blur(8px);
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 0%, rgba(255,107,0,.11), transparent 25rem),
    #060606;
  padding-top: 76px;
}

.site-footer::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,107,0,.7), transparent);
}

.footer-col a {
  transition: color .25s ease, transform .25s var(--ease);
}

.footer-col a:hover {
  transform: translateX(4px);
}

.social-icons a {
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(8px);
}

.social-icons a:hover {
  transform: translateY(-4px) rotate(-3deg);
  box-shadow: 0 9px 22px rgba(255,107,0,.18);
}

/* ---------- WhatsApp ---------- */
.whatsapp-float {
  width: 60px;
  height: 60px;
  right: 24px;
  bottom: 24px;
  box-shadow:
    0 12px 28px rgba(0,0,0,.20),
    0 0 0 5px rgba(37,211,102,.08);
}

.whatsapp-float:hover {
  transform: scale(1.09) translateY(-3px);
}

/* ---------- Alerts / empty states ---------- */
.alert {
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
}

.empty-state {
  border: 1px dashed #ddd8d2;
  border-radius: 16px;
  background: #faf9f7;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  padding: 20px 0;
}

.breadcrumb a {
  font-weight: 700;
}

.breadcrumb a:hover {
  color: var(--c-orange);
}

/* ---------- Admin-friendly tables/cards if this stylesheet is shared ---------- */
.stat-card {
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

/* ---------- Mobile polish ---------- */
@media (max-width: 900px) {
  .header-inner {
    min-height: 68px;
  }

  .section {
    padding: 68px 0;
  }

  .hero {
    min-height: 590px;
  }

  .product-grid {
    gap: 18px;
  }
}

@media (max-width: 600px) {
  .announcement-bar {
    min-height: 32px;
    font-size: .64rem;
    padding: 7px 12px;
  }

  .header-inner {
    padding: 10px 16px;
  }

  .logo img {
    height: 34px;
  }

  .section {
    padding: 54px 0;
  }

  .hero {
    min-height: 510px;
  }

  .hero-content h1 {
    font-size: clamp(2.25rem, 12vw, 3.4rem);
  }

  .hero-ctas {
    gap: 10px;
  }

  .hero-ctas .btn {
    min-height: 48px;
  }

  .product-card:hover {
    transform: translateY(-4px);
  }

  .whatsapp-float {
    width: 54px;
    height: 54px;
    right: 16px;
    bottom: 16px;
  }
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .announcement-bar::before,
  .hero-badge::after,
  .contact-hero::before,
  .page-header::before {
    animation: none !important;
  }

  .hero-slide.active,
  .product-card:hover,
  .category-card:hover,
  .brand-card:hover,
  .trust-item:hover {
    transform: none !important;
  }
}


/* ============================================================
   UAE ELECTRIC SCOOTERS — RED / YELLOW PREMIUM THEME
   Inspired by the visual direction of modern UAE scooter stores.
   ============================================================ */
:root {
  --c-red: #e51b23;
  --c-red-dark: #c91018;
  --c-red-deep: #ad0f16;
  --c-yellow: #ffd400;
  --c-yellow-dark: #f2c300;
  --c-black: #101010;
  --c-white: #fff;
  --c-grey-bg: #f7f7f7;
  --c-grey-line: #e7e7e7;
  --c-grey-text: #666;
  --container: 1320px;
  --radius: 10px;
  --shadow-premium: 0 14px 40px rgba(0,0,0,.10);
}

/* ---------- Top social / announcement bar ---------- */
.top-announcement {
  height: 52px;
  background: var(--c-yellow);
  color: #111;
  position: relative;
  z-index: 110;
  overflow: hidden;
}
.top-announcement::after {
  content: "";
  position: absolute;
  top: 0; left: -20%;
  width: 18%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-20deg);
  animation: topShine 5s linear infinite;
  pointer-events: none;
}
.top-announcement-inner {
  max-width: var(--container);
  height: 100%;
  margin: auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  align-items: center;
  gap: 20px;
}
.top-socials {
  display: flex;
  align-items: center;
  gap: 19px;
}
.top-socials a {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  transition: transform .2s ease, opacity .2s ease;
}
.top-socials a:hover { transform: translateY(-3px) scale(1.08); opacity: .65; }
.top-socials svg {
  width: 23px; height: 23px;
  fill: currentColor;
  stroke: none;
}
.top-socials a:nth-child(3) svg { fill: none; stroke: currentColor; stroke-width: 1.9; }
.top-message {
  text-align: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
}
.top-message-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #111;
  margin: 0 10px 2px;
  animation: topDot 1.6s ease-in-out infinite;
}
@keyframes topShine { 0% { left:-20%; } 55%,100% { left:120%; } }
@keyframes topDot { 0%,100% { transform:scale(1); opacity:.7; } 50% { transform:scale(1.6); opacity:1; } }

/* ---------- Red header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-red);
  color: #fff;
  border: 0;
  box-shadow: 0 7px 24px rgba(0,0,0,.12);
}
.header-inner {
  max-width: var(--container);
  min-height: 92px;
  padding: 13px 24px;
  gap: 26px;
}
.site-header .logo {
  flex: 0 0 auto;
  color: #fff;
  min-width: 225px;
}
.site-header .logo img {
  height: 62px;
  width: auto;
  max-width: 230px;
  object-fit: contain;
  /* Gives a clean white-logo appearance on the red header. */
  filter: brightness(0) invert(1);
}
.site-header .logo span { color:#fff; font-size: 1.05rem; }

.main-nav {
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.main-nav > a,
.main-nav > .nav-dropdown > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 15px;
  border: 0;
  border-radius: 9px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.main-nav > a::after,
.main-nav > .nav-dropdown > a::after { display:none; }
.main-nav > a:hover,
.main-nav > .nav-dropdown > a:hover {
  background: rgba(255,255,255,.12);
  color:#fff;
  transform: translateY(-1px);
}
.main-nav > a.active,
.main-nav > .nav-dropdown > a.active {
  background: var(--c-yellow);
  color: #111;
}
.nav-chevron {
  font-size: 18px;
  line-height: 10px;
  transform: translateY(-2px);
  transition: transform .2s ease;
}
.nav-dropdown { position: relative; }
.nav-dropdown:hover .nav-chevron { transform: rotate(180deg) translateY(2px); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translate(-50%, 8px);
  width: 220px;
  padding: 9px;
  border-radius: 12px;
  background: #fff;
  color: #111;
  box-shadow: 0 18px 45px rgba(0,0,0,.20);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}
.nav-dropdown-menu a {
  display:block;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color:#222;
}
.nav-dropdown-menu a:hover {
  background:#fff4b8;
  color:var(--c-red);
}
.header-actions { gap: 14px; }
.header-search {
  width: 205px;
  height: 51px;
  display:flex;
  align-items:center;
  background:#fff;
  border-radius: 13px;
  overflow:hidden;
  box-shadow: 0 5px 18px rgba(0,0,0,.08);
}
.header-search input {
  min-width:0;
  flex:1;
  height:100%;
  border:0;
  outline:0;
  background:transparent;
  padding:0 8px 0 17px;
  color:#222;
  font: 600 15px var(--font-body);
}
.header-search input::placeholder { color:#7b7b7b; }
.header-search button {
  width:48px; height:100%;
  border:0; background:transparent; color:#111;
  display:grid; place-items:center;
}
.header-search button:hover { color:var(--c-red); }
.header-search svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.cart-bag {
  position:relative;
  width:47px; height:51px;
  display:grid; place-items:center;
  color:#fff;
  transition:transform .2s ease;
}
.cart-bag:hover { transform:translateY(-2px) scale(1.04); color:var(--c-yellow); }
.cart-bag svg { width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.cart-count {
  top: 1px; right: 0;
  background: var(--c-yellow);
  color:#111;
  border:2px solid var(--c-red);
  min-width:20px; height:20px;
}
.hamburger span { background:#fff; }

.mobile-nav {
  background: var(--c-red);
  color:#fff;
}
.mobile-nav a { color:#fff; border-bottom-color:rgba(255,255,255,.18); }
.mobile-nav .logo { color:#fff; }
.mobile-close { color:#fff; }

/* ---------- Premium hero: red field + right product image ---------- */
.hero.hero-premium {
  min-height: 625px;
  background: var(--c-red);
  color:#fff;
}
.hero-premium .hero-slide {
  background: var(--c-red);
  transition: opacity .55s ease;
}
.hero-premium .hero-slide::after { display:none; }
.hero-premium .hero-inner {
  width:100%;
  max-width:var(--container);
  min-height:625px;
  margin:0 auto;
  padding:54px 24px 70px;
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr);
  align-items:center;
  gap:40px;
}
.hero-premium .hero-content {
  max-width:760px;
  padding:0;
  margin:0;
  width:auto;
  position:relative;
  z-index:2;
}
.hero-premium .hero-badge {
  background:#fff;
  color:var(--c-red);
  border-radius:999px;
  padding:10px 17px;
  font-size:12px;
  letter-spacing:.05em;
  margin-bottom:24px;
  box-shadow:0 7px 25px rgba(0,0,0,.10);
}
.hero-premium .hero-content h1 {
  color:#fff;
  font-size:clamp(2.6rem,5.1vw,5rem);
  line-height:.98;
  letter-spacing:-.045em;
  margin-bottom:25px;
  max-width:760px;
}
.hero-premium .hero-content h1 span { color:var(--c-yellow); }
.hero-premium .hero-content p {
  max-width:690px;
  color:rgba(255,255,255,.92);
  font-size:clamp(1rem,1.45vw,1.18rem);
  line-height:1.8;
  margin-bottom:27px;
}
.hero-premium .hero-ctas { margin-top:0; gap:13px; }
.hero-premium .btn {
  min-height:52px;
  padding:13px 24px;
  border-radius:9px;
}
.hero-premium .btn-primary {
  background:var(--c-yellow);
  color:#111;
  border-color:var(--c-yellow);
  box-shadow:0 10px 25px rgba(0,0,0,.15);
}
.hero-premium .btn-primary:hover {
  background:#fff;
  border-color:#fff;
  color:var(--c-red);
  transform:translateY(-3px);
}
.hero-premium .btn-outline-light {
  border-color:rgba(255,255,255,.72);
  color:#fff;
}
.hero-premium .btn-outline-light:hover {
  background:#fff;
  border-color:#fff;
  color:var(--c-red);
}
.hero-premium .hero-trust-points {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:30px;
  color:#fff;
  font-size:13px;
  font-weight:600;
}
.hero-premium .hero-media {
  position:relative;
  min-height:470px;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}
.hero-premium .hero-media-glow {
  position:absolute;
  width:86%;
  height:86%;
  border-radius:50%;
  background:rgba(255,212,0,.12);
  filter:blur(22px);
  z-index:-1;
}
.hero-premium .hero-media img {
  width:100%;
  height:500px;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 25px 28px rgba(0,0,0,.25));
  animation:heroFloat 5s ease-in-out infinite;
}
@keyframes heroFloat {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50% { transform:translateY(-8px) rotate(.4deg); }
}
.hero-premium .hero-arrow {
  width:48px; height:48px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px);
}
.hero-premium .hero-arrow:hover { background:var(--c-yellow); color:#111; }
.hero-premium .hero-dots button.active { background:var(--c-yellow); }
.hero-premium .hero-dots { bottom:23px; }

/* ---------- Red/yellow section accents ---------- */
.section-head h2 { position:relative; }
.section-head h2::after {
  content:"";
  display:block;
  width:48px; height:4px;
  margin-top:11px;
  border-radius:10px;
  background:var(--c-red);
}
.section-alt { background:#fff7f7; }
.section-dark {
  background:linear-gradient(135deg,#a90f15,var(--c-red));
}
.brand-card {
  border-radius:12px;
  box-shadow:0 7px 20px rgba(0,0,0,.05);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.brand-card:hover {
  transform:translateY(-7px);
  border-color:var(--c-red);
  box-shadow:var(--shadow-premium);
}
.category-card,
.product-card,
.trust-item {
  transition:transform .25s ease, box-shadow .25s ease;
}
.category-card:hover { transform:translateY(-7px); box-shadow:var(--shadow-premium); }
.product-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-premium); }
.badge-sale { background:var(--c-red) !important; }
.badge-new { background:var(--c-yellow) !important; color:#111 !important; }

/* ---------- WhatsApp ---------- */
.whatsapp-float {
  width:62px; height:62px;
  right:24px; bottom:24px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.whatsapp-pulse {
  position:absolute; inset:-3px;
  border:2px solid #25d366;
  border-radius:50%;
  animation:whatsappPulsePremium 2.1s ease-out infinite;
}
@keyframes whatsappPulsePremium {
  0% { transform:scale(.95); opacity:.75; }
  100% { transform:scale(1.55); opacity:0; }
}

/* ---------- Responsive ---------- */
@media (max-width:1180px) {
  .site-header .logo { min-width:185px; }
  .site-header .logo img { max-width:185px; height:55px; }
  .main-nav > a, .main-nav > .nav-dropdown > a { padding:12px 9px; font-size:13px; }
  .header-search { width:170px; }
}
@media (max-width:980px) {
  .top-announcement-inner { grid-template-columns:1fr; }
  .top-socials, .top-spacer { display:none; }
  .top-message { font-size:13px; }
  .header-inner { min-height:78px; }
  .main-nav { display:none; }
  .header-search { width:220px; }
  .hamburger { display:block; }
  .hero-premium .hero-inner {
    grid-template-columns:1fr;
    min-height:auto;
    padding-top:45px;
  }
  .hero-premium .hero-content { max-width:760px; }
  .hero-premium .hero-media { min-height:350px; }
  .hero-premium .hero-media img { height:380px; }
}
@media (max-width:600px) {
  .top-announcement { height:44px; }
  .top-message { font-size:11px; letter-spacing:.02em; }
  .header-inner { padding:9px 16px; min-height:70px; }
  .site-header .logo { min-width:0; }
  .site-header .logo img { height:43px; max-width:170px; }
  .header-search { width:46px; height:46px; background:transparent; box-shadow:none; }
  .header-search input { display:none; }
  .header-search button { width:46px; color:#fff; }
  .header-search button:hover { color:var(--c-yellow); }
  .cart-bag { width:42px; height:46px; }
  .cart-bag svg { width:26px; height:26px; }
  .hero.hero-premium { min-height:0; }
  .hero-premium .hero-inner { padding:40px 18px 62px; gap:10px; }
  .hero-premium .hero-content h1 { font-size:clamp(2.25rem,12vw,3.35rem); }
  .hero-premium .hero-content p { font-size:.95rem; line-height:1.65; }
  .hero-premium .hero-ctas { flex-direction:column; align-items:stretch; }
  .hero-premium .hero-ctas .btn { width:100%; }
  .hero-premium .hero-trust-points { gap:8px 14px; font-size:11px; }
  .hero-premium .hero-media { min-height:280px; }
  .hero-premium .hero-media img { height:300px; }
  .hero-premium .hero-arrow { display:none; }
  .whatsapp-float { width:56px; height:56px; right:16px; bottom:16px; }
}

/* =========================================================
   UAE ELECTRIC SCOOTERS — RED PREMIUM HOMEPAGE SYSTEM
   Homepage/header visual direction inspired by the supplied
   reference layout; original branding/content retained.
   ========================================================= */
:root{
  --uae-red:#e51b23;--uae-red-dark:#bf1118;--uae-yellow:#ffd400;--uae-black:#111111;
  --uae-cream:#fffaf1;--uae-grey:#f5f5f3;--uae-line:#e9e9e6;--uae-text:#171717;
  --uae-container:1600px;--uae-radius:18px;--uae-shadow:0 18px 55px rgba(16,16,16,.10);
}
html{scroll-behavior:smooth}body{font-family:Inter,Arial,sans-serif;color:var(--uae-text);overflow-x:hidden}.container{width:min(calc(100% - 64px),var(--uae-container));margin-inline:auto}

/* TOP BAR — 60px desktop, matching the visual rhythm of the reference */
.top-announcement{height:60px;background:var(--uae-yellow);color:#101010;position:relative;z-index:1002;overflow:hidden}
.top-announcement:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.28) 48%,transparent 58%);transform:translateX(-110%);animation:uaeShine 7s infinite}
.top-announcement-inner{height:100%;max-width:var(--uae-container);width:calc(100% - 64px);margin:auto;display:grid;grid-template-columns:260px 1fr 260px;align-items:center;position:relative;z-index:1}
.top-socials{display:flex;gap:18px;align-items:center}.social-icon{width:25px;height:25px;display:grid;place-items:center;color:#111;transition:transform .25s ease}.social-icon svg{width:23px;height:23px;fill:currentColor;stroke:currentColor;stroke-width:1.5}.social-icon:hover{transform:translateY(-3px) scale(1.08)}
.top-message{text-align:center;font:600 21px/1 Archivo,Inter,sans-serif;letter-spacing:-.01em}.top-message span{font-weight:800}.top-spacer{min-width:0}

/* MAIN NAV — red, generous spacing, rounded yellow active item */
.site-header{height:112px;background:var(--uae-red);color:#fff;position:relative;z-index:1000;box-shadow:0 8px 28px rgba(0,0,0,.09)}
.header-inner{height:100%;width:min(calc(100% - 64px),var(--uae-container));margin:auto;display:flex;align-items:center;gap:30px}
.logo{flex:0 0 245px;display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;min-width:0}.logo img{max-width:235px;max-height:74px;width:auto;height:auto;object-fit:contain;filter:brightness(0) invert(1);transition:transform .3s ease}.logo:hover img{transform:scale(1.025)}
.logo-mark{width:50px;height:50px;display:grid;place-items:center;flex:0 0 50px}.logo-mark svg{width:48px;height:48px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.logo-copy{display:flex;flex-direction:column;line-height:.95;text-transform:uppercase;white-space:nowrap}.logo-copy strong{font:900 27px/1 Archivo,sans-serif;letter-spacing:-.04em}.logo-copy b{font:800 12px/1 Archivo,sans-serif;letter-spacing:.12em;color:var(--uae-yellow);margin-top:5px}
.main-nav{display:flex;align-items:center;justify-content:center;gap:5px;flex:1;min-width:0}.main-nav>a,.nav-dropdown>a{height:54px;display:flex;align-items:center;gap:7px;padding:0 15px;border-radius:13px;color:#fff;text-decoration:none;font:600 17px/1 Archivo,Inter,sans-serif;white-space:nowrap;transition:background .25s ease,color .25s ease,transform .25s ease}.main-nav>a:hover,.nav-dropdown>a:hover{background:rgba(255,255,255,.11);transform:translateY(-1px)}.main-nav>a.active,.nav-dropdown>a.active{background:var(--uae-yellow);color:#111}.nav-chevron{font-size:21px;line-height:1;transform:translateY(-2px)}
.nav-dropdown{position:relative}.nav-dropdown-menu{position:absolute;left:0;top:calc(100% + 9px);min-width:215px;background:#fff;border-radius:14px;padding:9px;box-shadow:0 18px 45px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s ease;pointer-events:none}.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.nav-dropdown-menu a{display:block;padding:12px 13px;border-radius:9px;color:#222;text-decoration:none;font:600 14px/1.25 Inter,sans-serif}.nav-dropdown-menu a:hover{background:#fff3b3;color:var(--uae-red)}
.header-actions{display:flex;align-items:center;gap:18px;flex:0 0 auto}.header-search{height:60px;width:215px;background:#fff;border-radius:16px;display:flex;align-items:center;padding:0 8px 0 17px;box-shadow:0 5px 18px rgba(0,0,0,.08)}.header-search input{border:0;outline:0;background:transparent;min-width:0;flex:1;font:500 16px Inter,sans-serif;color:#222}.header-search input::placeholder{color:#777}.header-search button{width:43px;height:43px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:#111}.header-search svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cart-bag{width:47px;height:52px;color:#fff;display:grid;place-items:center;position:relative;text-decoration:none}.cart-bag svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}.cart-bag:hover{color:var(--uae-yellow)}.cart-count{position:absolute;top:0;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:20px;background:var(--uae-yellow);color:#111;display:grid;place-items:center;font:800 11px Inter,sans-serif}
.hamburger{display:none;background:none;border:0;padding:9px;width:45px}.hamburger span{display:block;height:2px;background:#fff;margin:6px 0;border-radius:2px}

/* HERO — 16:7-ish desktop composition, red background and right-side product visual */
.hero-home{position:relative;background:var(--uae-red);color:#fff;min-height:610px;overflow:hidden}.hero-home .hero-slide{display:none;min-height:610px;position:relative}.hero-home .hero-slide.active{display:block;animation:heroIn .55s ease}.hero-home-inner{min-height:610px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr);align-items:center;gap:35px;position:relative;z-index:2}.hero-home-copy{padding:54px 0 66px;max-width:850px;position:relative;z-index:3}.hero-trust-pill{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;background:#fff;color:#222;border-radius:9px;font:700 13px Inter,sans-serif;box-shadow:0 10px 28px rgba(0,0,0,.12);margin-bottom:29px}.pill-dot{width:10px;height:10px;border-radius:50%;background:#22a66f;box-shadow:0 0 0 5px rgba(34,166,111,.13)}
.hero-home h1{font:900 clamp(48px,5vw,82px)/.98 Archivo,Inter,sans-serif;letter-spacing:-.055em;margin:0 0 27px;max-width:920px}.hero-home h1 em{font-style:normal;color:var(--uae-yellow)}.hero-home-copy>p{font:500 clamp(17px,1.35vw,21px)/1.7 Inter,sans-serif;max-width:780px;margin:0 0 31px;color:rgba(255,255,255,.95)}.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}.hero-btn{min-height:56px;padding:0 24px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:14px;text-decoration:none;font:800 15px Inter,sans-serif;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}.hero-btn span{font-size:23px;line-height:0;transition:transform .25s ease}.hero-btn:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(0,0,0,.18)}.hero-btn:hover span{transform:translateX(4px)}.hero-btn-yellow{background:var(--uae-yellow);color:#111}.hero-btn-white{background:#fff;color:#111}.hero-btn-red{background:var(--uae-red);color:#fff}.hero-mini-trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:27px;font:600 12px Inter,sans-serif;color:rgba(255,255,255,.9)}
.hero-home-media{height:555px;display:grid;place-items:center;position:relative}.hero-home-media img{width:min(100%,630px);height:540px;object-fit:contain;position:relative;z-index:3;filter:drop-shadow(0 25px 28px rgba(0,0,0,.26));animation:bikeFloat 5s ease-in-out infinite}.hero-media-glow{position:absolute;width:470px;height:470px;border-radius:50%;background:radial-gradient(circle,rgba(255,212,0,.27),rgba(255,212,0,0) 68%);filter:blur(4px);z-index:1}.hero-media-ring{position:absolute;width:520px;height:520px;border:1px solid rgba(255,255,255,.14);border-radius:50%;z-index:1}.hero-media-ring:before,.hero-media-ring:after{content:"";position:absolute;border-radius:50%;border:1px dashed rgba(255,255,255,.13)}.hero-media-ring:before{inset:28px}.hero-media-ring:after{inset:-35px}.hero-floating-card{position:absolute;right:1%;bottom:52px;z-index:5;background:#fff;color:#111;border-radius:13px;padding:13px 17px;box-shadow:0 15px 35px rgba(0,0,0,.2);display:flex;flex-direction:column}.hero-floating-card strong{font:900 12px Archivo,sans-serif;letter-spacing:.08em}.hero-floating-card span{font:500 11px Inter,sans-serif;margin-top:4px;color:#666}.orb-one,.orb-two{position:absolute;border-radius:50%;background:rgba(255,212,0,.09);filter:blur(1px)}.orb-one{width:420px;height:420px;left:-250px;bottom:-230px}.orb-two{width:270px;height:270px;right:-110px;top:80px}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:46px;height:46px;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.08);color:#fff;border-radius:50%;font-size:33px;line-height:1;cursor:pointer;transition:.25s}.hero-arrow:hover{background:var(--uae-yellow);color:#111;border-color:var(--uae-yellow)}.hero-arrow.prev{left:22px}.hero-arrow.next{right:22px}.hero-dots{position:absolute;z-index:6;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:7px}.hero-dots button{width:28px;height:4px;border:0;border-radius:4px;background:rgba(255,255,255,.45);cursor:pointer}.hero-dots button.active{background:var(--uae-yellow);width:42px}

/* Sections */
.section{padding:90px 0}.section-soft{background:#f7f7f5}.brand-section{padding:74px 0 63px;background:#fff}.section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:34px}.section-head.centered{display:block;text-align:center;max-width:750px;margin:0 auto 36px}.section-head.light{color:#fff}.eyebrow{display:block;color:var(--uae-red);font:800 12px/1 Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px}.light .eyebrow{color:var(--uae-yellow)}.section-head h2{font:900 clamp(31px,3vw,47px)/1.02 Archivo,sans-serif;letter-spacing:-.04em;margin:0}.section-head h2 span{color:var(--uae-red)}.section-head.light h2 span{color:var(--uae-yellow)}.section-head p{margin:12px auto 0;color:#707070;font-size:15px;line-height:1.65}.view-all-link{display:inline-flex;align-items:center;gap:8px;color:#171717;text-decoration:none;font:800 14px Inter,sans-serif;border-bottom:2px solid var(--uae-yellow);padding-bottom:5px;white-space:nowrap}.view-all-link b{color:var(--uae-red);font-size:20px;line-height:0;transition:transform .2s}.view-all-link:hover b{transform:translateX(4px)}

/* Brands */
.brand-marquee{overflow:hidden;padding:4px 0}.brand-track{display:flex;width:max-content;animation:brandMove 30s linear infinite}.brand-marquee:hover .brand-track{animation-play-state:paused}.brand-card{width:178px;height:82px;margin-right:14px;background:#fff;border:1px solid #ecece8;border-radius:13px;display:grid;place-items:center;text-decoration:none;box-shadow:0 7px 20px rgba(0,0,0,.045);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.brand-card img{width:78%;height:62%;object-fit:contain;transition:transform .25s ease}.brand-card strong{color:#222;font:800 15px Archivo,sans-serif}.brand-card:hover{transform:translateY(-5px);border-color:var(--uae-yellow);box-shadow:0 15px 32px rgba(0,0,0,.1)}.brand-card:hover img{transform:scale(1.06)}

/* Categories */
.premium-category-grid{grid-template-columns:repeat(4,minmax(0,1fr));display:grid;gap:18px}.premium-category-card{height:385px;border-radius:var(--uae-radius);overflow:hidden;position:relative;background:#222;display:block;text-decoration:none;box-shadow:0 12px 34px rgba(0,0,0,.08)}.premium-category-card img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.65,.25,1)}.category-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 30%,rgba(0,0,0,.76) 100%)}.premium-category-card .category-info{position:absolute;left:25px;right:25px;bottom:24px;color:#fff}.premium-category-card .category-info>span{font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:700;color:rgba(255,255,255,.78)}.premium-category-card h3{font:900 25px/1.05 Archivo,sans-serif;margin:7px 0 15px;letter-spacing:-.025em}.premium-category-card b{font:800 13px Inter,sans-serif}.premium-category-card i{font-style:normal;color:var(--uae-yellow);font-size:19px;margin-left:5px}.premium-category-card:hover img{transform:scale(1.09)}.premium-category-card:hover .category-shade{background:linear-gradient(180deg,rgba(229,27,35,.08) 20%,rgba(0,0,0,.78) 100%)}

/* Products — keep product card data/functionality, give it the new visual language */
.home-product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.product-card{border:1px solid #e9e9e6!important;border-radius:16px!important;background:#fff!important;overflow:hidden!important;box-shadow:0 8px 28px rgba(0,0,0,.055)!important;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease!important}.product-card:hover{transform:translateY(-7px)!important;border-color:#ddd!important;box-shadow:0 20px 45px rgba(0,0,0,.12)!important}.product-thumb{background:#f5f5f3!important;min-height:290px!important}.product-thumb img{transition:transform .55s cubic-bezier(.2,.65,.25,1)!important}.product-card:hover .product-thumb img{transform:scale(1.055)}.product-badges .badge-sale{background:var(--uae-red)!important}.product-badges .badge-new{background:var(--uae-yellow)!important;color:#111!important}.product-body{padding:19px 19px 20px!important}.product-brand{font-size:10px!important;letter-spacing:.12em!important;color:#8a8a8a!important}.product-name{font:800 18px/1.18 Archivo,sans-serif!important;color:#161616!important}.price-now{color:var(--uae-red)!important;font-weight:900!important}.product-actions .btn-primary{background:var(--uae-red)!important;border-color:var(--uae-red)!important}.product-actions .btn-primary:hover{background:#bf1118!important;border-color:#bf1118!important}.product-actions .btn-outline:hover{border-color:var(--uae-red)!important;color:var(--uae-red)!important}

/* Feature banner */
.feature-banner{padding-top:25px}.feature-banner-inner{min-height:440px;border-radius:24px;background:var(--uae-red);color:#fff;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;position:relative}.feature-banner-inner:before{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(255,255,255,.13);border-radius:50%;right:-150px;top:-130px}.feature-copy{padding:70px 65px;position:relative;z-index:2}.feature-copy h2{font:900 clamp(40px,4.4vw,66px)/.95 Archivo,sans-serif;letter-spacing:-.055em;margin:0 0 19px}.feature-copy h2 span{color:var(--uae-yellow)}.feature-copy p{max-width:480px;font-size:16px;line-height:1.7;color:rgba(255,255,255,.9);margin-bottom:27px}.feature-art{position:relative;display:flex;align-items:center;justify-content:center}.feature-art img{width:100%;height:100%;max-height:440px;object-fit:cover;object-position:center;mix-blend-mode:normal;filter:saturate(1.05);transform:scale(1.01)}

/* Trust + final CTA */
.section-dark{background:#151515;color:#fff}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.trust-card{padding:29px 25px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.035);transition:.28s}.trust-card:hover{transform:translateY(-5px);border-color:rgba(255,212,0,.6);background:rgba(255,255,255,.06)}.trust-icon{width:46px;height:46px;border-radius:12px;background:var(--uae-yellow);color:#111;display:grid;place-items:center;font:900 13px Archivo,sans-serif;margin-bottom:21px}.trust-card h3{font:800 20px Archivo,sans-serif;margin:0 0 9px}.trust-card p{font-size:13px;line-height:1.65;color:rgba(255,255,255,.62);margin:0}.final-cta{padding:75px 0}.final-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:42px 48px;border:1px solid var(--uae-line);border-radius:20px;background:#fff;box-shadow:var(--uae-shadow)}.final-cta h2{font:900 clamp(28px,3vw,44px)/1 Archivo,sans-serif;letter-spacing:-.04em;margin:0 0 8px}.final-cta p{margin:0;color:#707070}.final-cta .hero-btn-red{background:var(--uae-red)}.empty-note{padding:28px;border:1px dashed #ccc;border-radius:14px;text-align:center;color:#777;background:#fff}

/* WhatsApp */
.whatsapp-float{width:62px!important;height:62px!important;right:24px!important;bottom:24px!important;background:#20c863!important;border-radius:18px!important;box-shadow:0 13px 32px rgba(0,0,0,.22)!important;z-index:1001!important}.whatsapp-float svg{width:38px!important;height:38px!important}.whatsapp-pulse{position:absolute!important;inset:-7px!important;border:2px solid #20c863;border-radius:22px;animation:waPulse 2s infinite}

/* Mobile */
@media(max-width:1280px){.header-inner,.top-announcement-inner,.container{width:min(calc(100% - 40px),var(--uae-container))}.logo{flex-basis:205px}.logo-copy strong{font-size:23px}.main-nav>a,.nav-dropdown>a{padding:0 9px;font-size:14px}.header-search{width:185px}.hero-home-inner{grid-template-columns:1fr .9fr}.hero-home h1{font-size:60px}.premium-category-card{height:330px}.home-product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1050px){.site-header{height:88px}.top-announcement{height:52px}.top-announcement-inner{grid-template-columns:170px 1fr 20px}.top-message{font-size:16px}.logo{flex-basis:210px}.main-nav{display:none}.header-actions{margin-left:auto}.hamburger{display:block}.header-search{width:190px;height:52px}.hero-home,.hero-home .hero-slide,.hero-home-inner{min-height:680px}.hero-home-inner{grid-template-columns:1fr 1fr;gap:8px}.hero-home h1{font-size:52px}.hero-home-media{height:500px}.hero-home-media img{height:470px}.premium-category-grid{grid-template-columns:repeat(2,1fr)}.home-product-grid{grid-template-columns:repeat(2,1fr)}.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.container,.header-inner,.top-announcement-inner{width:calc(100% - 28px)}.top-announcement{height:46px}.top-announcement-inner{grid-template-columns:1fr}.top-socials,.top-spacer{display:none}.top-message{font-size:13px}.site-header{height:76px}.logo{flex-basis:auto}.logo-mark{width:39px;height:39px;flex-basis:39px}.logo-mark svg{width:39px;height:39px}.logo-copy strong{font-size:20px}.logo-copy b{font-size:8px}.logo img{max-width:190px;max-height:50px}.header-actions{gap:5px}.header-search{display:none}.cart-bag{width:43px}.hamburger{display:block}.mobile-nav{top:76px!important}.hero-home,.hero-home .hero-slide,.hero-home-inner{min-height:760px}.hero-home-inner{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}.hero-home-copy{padding:38px 0 0}.hero-trust-pill{font-size:10px;padding:9px 12px;margin-bottom:20px}.hero-home h1{font-size:43px;line-height:.98;margin-bottom:18px}.hero-home-copy>p{font-size:14px;line-height:1.6;margin-bottom:22px}.hero-ctas{gap:8px}.hero-btn{min-height:50px;padding:0 17px;font-size:13px}.hero-mini-trust{gap:9px;font-size:10px;margin-top:17px}.hero-home-media{height:330px;margin-top:-2px}.hero-home-media img{height:330px;width:100%}.hero-media-ring{width:285px;height:285px}.hero-media-glow{width:280px;height:280px}.hero-floating-card{right:4px;bottom:10px;padding:9px 12px}.hero-floating-card strong{font-size:9px}.hero-floating-card span{font-size:9px}.hero-arrow{width:38px;height:38px;font-size:27px}.hero-arrow.prev{left:8px}.hero-arrow.next{right:8px}.hero-dots{bottom:13px}.section{padding:62px 0}.brand-section{padding:55px 0 50px}.section-head{align-items:flex-start;margin-bottom:25px}.section-head h2{font-size:31px}.section-head p{font-size:13px}.premium-category-grid{grid-template-columns:1fr 1fr;gap:10px}.premium-category-card{height:245px;border-radius:13px}.premium-category-card .category-info{left:15px;right:15px;bottom:15px}.premium-category-card .category-info>span{font-size:8px}.premium-category-card h3{font-size:19px;margin:5px 0 10px}.premium-category-card b{font-size:10px}.home-product-grid{grid-template-columns:1fr 1fr;gap:10px}.product-thumb{min-height:205px!important}.product-body{padding:13px!important}.product-name{font-size:14px!important}.product-actions{gap:5px!important}.product-actions .btn{padding:9px 7px!important;font-size:10px!important}.feature-banner-inner{grid-template-columns:1fr;min-height:0}.feature-copy{padding:43px 27px 28px}.feature-copy h2{font-size:42px}.feature-art{height:245px}.trust-grid{grid-template-columns:1fr 1fr;gap:10px}.trust-card{padding:20px 16px}.trust-card h3{font-size:16px}.trust-card p{font-size:11px}.final-cta-inner{padding:28px 23px;display:block}.final-cta .hero-btn{margin-top:20px;width:100%}.whatsapp-float{width:55px!important;height:55px!important;right:15px!important;bottom:15px!important;border-radius:16px!important}.whatsapp-float svg{width:33px!important;height:33px!important}}
@media(max-width:430px){.logo-copy strong{font-size:18px}.logo-copy b{font-size:7px}.premium-category-grid,.home-product-grid{grid-template-columns:1fr}.premium-category-card{height:275px}.hero-home h1{font-size:39px}.hero-home,.hero-home .hero-slide,.hero-home-inner{min-height:735px}.hero-home-media{height:285px}.hero-home-media img{height:285px}.hero-mini-trust{display:grid;grid-template-columns:1fr 1fr}.top-message{font-size:11px}.brand-card{width:145px;height:70px}.brand-card img{width:75%}}
@media(prefers-reduced-motion:reduce){.top-announcement:after,.hero-home-media img,.brand-track,.whatsapp-pulse{animation:none!important}.hero-home .hero-slide{animation:none!important}.product-card,.brand-card,.premium-category-card img,.hero-btn{transition:none!important}}
@keyframes uaeShine{0%,65%{transform:translateX(-110%)}85%,100%{transform:translateX(110%)}}@keyframes heroIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes bikeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes brandMove{to{transform:translateX(-50%)}}@keyframes waPulse{0%{transform:scale(.92);opacity:.8}70%,100%{transform:scale(1.15);opacity:0}}

/* =========================================================
   REFERENCE-MATCH HOMEPAGE — final precision layer
   Inspired by the supplied Al Mubdie screenshot, using UAE
   Electric Scooters branding and original site content.
   ========================================================= */
:root{--ref-red:#e51b23;--ref-red-dark:#c70f17;--ref-yellow:#ffd400;--ref-white:#fff;--ref-ink:#151515;--ref-muted:#6e6e6e;--ref-radius:18px;--ref-max:1640px}
body{font-family:'Poppins',Inter,Arial,sans-serif;background:#fff}
.container{width:min(calc(100% - 96px),var(--ref-max));max-width:var(--ref-max);padding:0}
/* 60px announcement + 120px navigation = 180px desktop header rhythm */
.top-announcement{height:60px;background:var(--ref-yellow);color:#111}
.top-announcement-inner{height:60px;width:min(calc(100% - 96px),var(--ref-max));grid-template-columns:280px 1fr 280px}
.top-socials{gap:19px}.top-socials .social-icon{width:28px;height:28px;color:#111}.top-socials .social-icon svg{width:23px;height:23px;fill:currentColor;stroke:none}
.top-message{font-family:'Poppins',sans-serif;font-size:21px;font-weight:500;letter-spacing:-.02em;text-align:center}.top-message span{font-weight:600}
.site-header{height:120px;min-height:120px;position:relative;top:auto;background:var(--ref-red);border:0;box-shadow:none;color:#fff;z-index:1001}
.header-inner{height:120px;min-height:120px;width:min(calc(100% - 96px),var(--ref-max));max-width:var(--ref-max);padding:0;gap:22px}
.site-header .logo{width:270px;min-width:270px;height:120px;color:#fff;display:flex;align-items:center;justify-content:flex-start}
.site-header .logo img{width:250px;max-width:250px;height:76px;max-height:76px;object-fit:contain;filter:brightness(0) invert(1)}
.main-nav{height:100%;flex:1 1 auto;display:flex;justify-content:center;align-items:center;gap:10px;min-width:0}
.main-nav>a,.main-nav>.nav-dropdown>a{height:54px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:15px;color:#fff;font-family:'Poppins',sans-serif;font-size:17px;font-weight:600;letter-spacing:-.025em;white-space:nowrap;transition:background .2s ease,color .2s ease,transform .2s ease}
.main-nav>a:hover,.main-nav>.nav-dropdown>a:hover{background:rgba(255,255,255,.10);color:#fff;transform:none}
.main-nav>a.active{background:var(--ref-yellow);color:#111}
.nav-chevron{font-size:19px;line-height:1;margin-left:2px}
.nav-dropdown-menu{top:calc(100% + 8px);width:235px;padding:10px;border:0;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.22)}
.nav-dropdown-menu a{font-family:'Poppins',sans-serif;font-size:14px;padding:12px 13px;border-radius:10px}
.nav-dropdown-menu a:hover{background:#fff4b8;color:var(--ref-red)}
.header-actions{gap:13px;flex:0 0 auto}
.header-search{width:202px;height:60px;border-radius:15px;box-shadow:none;background:#fff}
.header-search input{font-family:'Poppins',sans-serif;font-size:16px;font-weight:500;padding-left:18px}
.header-search button{width:52px}.header-search svg{width:25px;height:25px}
.cart-bag{width:52px;height:60px}.cart-bag svg{width:31px;height:31px;stroke-width:1.8}.cart-count{background:var(--ref-yellow);color:#111;border-color:var(--ref-red)}
.hamburger{display:none}
/* Hero: seamless red field with 58/42 composition and large right image */
.hero.hero-home{min-height:650px;background:var(--ref-red);color:#fff}
.hero-home .hero-slide{background:var(--ref-red);min-height:650px}
.hero-home .hero-slide::after{display:none}
.hero-home-inner{width:min(calc(100% - 96px),var(--ref-max));max-width:var(--ref-max);min-height:650px;margin:0 auto;padding:36px 0 54px;display:grid;grid-template-columns:minmax(0,1.13fr) minmax(500px,.87fr);align-items:center;gap:30px}
.hero-home-copy{padding:0;max-width:930px;position:relative;z-index:2}
.hero-trust-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;color:#111;border-radius:10px;padding:11px 17px;margin-bottom:27px;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.pill-dot{width:9px;height:9px;border-radius:50%;background:#28b46a;box-shadow:0 0 0 4px rgba(40,180,106,.12)}
.hero-home h1{font-family:'Poppins',sans-serif;font-size:clamp(3.9rem,5.3vw,5.65rem);line-height:1.01;letter-spacing:-.065em;font-weight:800;color:#fff;max-width:920px;margin:0 0 25px}
.hero-home h1 em{font-style:normal;color:var(--ref-yellow)}
.hero-home-copy>p{font-family:'Poppins',sans-serif;color:rgba(255,255,255,.96);font-size:18px;line-height:1.75;max-width:900px;margin:0 0 29px}
.hero-ctas{gap:13px}.hero-btn{min-height:56px;padding:0 26px;border-radius:12px;font-family:'Poppins',sans-serif;font-size:15px;font-weight:700}.hero-btn-yellow{background:var(--ref-yellow);color:#111;border-color:var(--ref-yellow)}.hero-btn-yellow:hover{background:#fff;border-color:#fff;color:var(--ref-red);transform:translateY(-2px)}.hero-btn-white{background:#fff;color:#111;border-color:#fff}.hero-btn-white:hover{background:transparent;color:#fff;border-color:#fff;transform:translateY(-2px)}
.hero-mini-trust{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px;color:#fff;font-family:'Poppins',sans-serif;font-size:12px;font-weight:600}
.hero-home-media{height:565px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}
.hero-home-media img{width:100%;height:565px;object-fit:cover;object-position:center;border-radius:27px;filter:none;box-shadow:0 22px 50px rgba(0,0,0,.18);animation:refHeroFloat 5s ease-in-out infinite}
.hero-media-ring,.hero-media-glow{display:none}.hero-floating-card{right:24px;bottom:20px;border-radius:12px;padding:12px 16px;background:rgba(255,255,255,.96);color:#111;box-shadow:0 15px 35px rgba(0,0,0,.17)}.hero-floating-card strong{font-family:'Poppins',sans-serif}.hero-floating-card span{font-family:'Poppins',sans-serif}
@keyframes refHeroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero-arrow{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25)}.hero-arrow:hover{background:var(--ref-yellow);color:#111}.hero-dots button.active{background:var(--ref-yellow)}
/* Sections */
.section{padding:88px 0}.brand-section{padding:78px 0 72px;background:#fff}.section-head{margin-bottom:34px}.section-head.centered{text-align:center}.section-head h2{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(2rem,3.2vw,3rem);letter-spacing:-.055em}.section-head h2 span{color:var(--ref-red)}.section-head h2:after{width:54px;height:4px;background:var(--ref-red);margin-top:13px}.section-head.centered h2:after{margin-left:auto;margin-right:auto}.section-head p{font-family:'Poppins',sans-serif;font-size:14px;color:var(--ref-muted)}
.eyebrow{font-family:'Poppins',sans-serif;font-size:11px;letter-spacing:.15em;font-weight:700;color:var(--ref-red)}
/* Brands */
.brand-marquee{margin-top:30px;overflow:hidden}.brand-track{gap:17px}.brand-card{width:180px;height:86px;border:1px solid #e8e8e8;border-radius:13px;background:#fff;box-shadow:0 7px 22px rgba(0,0,0,.055)}.brand-card img{max-width:78%;max-height:55px;object-fit:contain}.brand-card:hover{border-color:var(--ref-red);transform:translateY(-5px)}
/* Category cards */
.premium-category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.premium-category-card{height:395px;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.10)}.premium-category-card img{opacity:.78}.premium-category-card .category-shade{background:linear-gradient(180deg,rgba(0,0,0,.02) 25%,rgba(0,0,0,.78) 100%)}.premium-category-card .category-info{left:24px;right:24px;bottom:24px}.premium-category-card .category-info>span{font-family:'Poppins',sans-serif;font-size:10px}.premium-category-card h3{font-family:'Poppins',sans-serif;font-size:25px}.premium-category-card b{font-family:'Poppins',sans-serif}
/* Products */
.section-soft{background:#f7f7f5}.home-product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.product-card{border-radius:16px!important;box-shadow:0 8px 25px rgba(0,0,0,.055)!important}.product-thumb{min-height:315px!important;background:#f4f4f2!important}.product-body{padding:20px!important}.product-name{font-family:'Poppins',sans-serif!important;font-size:17px!important}.product-brand{font-family:'Poppins',sans-serif!important}.price-now{color:var(--ref-red)!important}.product-actions .btn-primary{background:var(--ref-red)!important;border-color:var(--ref-red)!important}.product-actions .btn-primary:hover{background:var(--ref-red-dark)!important;border-color:var(--ref-red-dark)!important}.badge-sale{background:var(--ref-red)!important}.badge-new{background:var(--ref-yellow)!important;color:#111!important}
/* Feature / trust */
.feature-banner{padding-top:25px}.feature-banner-inner{border-radius:22px;min-height:455px;background:var(--ref-red)}.feature-copy h2,.final-cta h2{font-family:'Poppins',sans-serif}.trust-section{padding:84px 0;background:#151515}.trust-grid{gap:18px}.trust-card{border-radius:15px}.final-cta{padding:82px 0}.final-cta-inner{border-radius:20px;padding:45px 50px}.final-cta .hero-btn-red{background:var(--ref-red);color:#fff;border-color:var(--ref-red)}
/* Mobile drawer */
.mobile-nav{background:var(--ref-red);top:0!important;padding:20px 20px 34px}.mobile-nav-top{margin-bottom:20px}.mobile-logo{font-family:'Poppins',sans-serif;font-size:20px;font-weight:800;color:#fff}.mobile-close{color:#fff}.mobile-nav a{font-family:'Poppins',sans-serif;color:#fff;padding:16px 2px;font-size:17px;border-bottom-color:rgba(255,255,255,.18)}
/* Breakpoints deliberately preserve desktop proportions until tablet */
@media(max-width:1320px){.container,.header-inner,.top-announcement-inner,.hero-home-inner{width:calc(100% - 56px)}.site-header .logo{width:220px;min-width:220px}.site-header .logo img{width:205px;max-width:205px}.main-nav{gap:2px}.main-nav>a,.main-nav>.nav-dropdown>a{font-size:14px;padding:0 11px}.header-search{width:175px}.hero-home h1{font-size:clamp(3.4rem,5.2vw,5rem)}.hero-home-media{height:520px}.hero-home-media img{height:520px}}
@media(max-width:1080px){.site-header,.header-inner{height:94px;min-height:94px}.site-header .logo{height:94px;width:210px;min-width:210px}.site-header .logo img{height:58px;max-height:58px;width:195px}.main-nav{display:none}.header-search{width:185px}.hamburger{display:block}.hero-home-inner{grid-template-columns:1fr .9fr;min-height:610px}.hero-home,.hero-home .hero-slide{min-height:610px}.hero-home-media,.hero-home-media img{height:470px}.premium-category-grid,.home-product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.container,.header-inner,.top-announcement-inner,.hero-home-inner{width:calc(100% - 32px)}.top-announcement{height:46px}.top-announcement-inner{height:46px;display:flex;justify-content:center}.top-socials,.top-spacer{display:none}.top-message{font-size:12px}.site-header,.header-inner{height:74px;min-height:74px}.site-header .logo{height:74px;width:auto;min-width:0}.site-header .logo img{height:47px;max-height:47px;width:170px;max-width:170px}.header-actions{gap:5px}.header-search{width:43px;height:48px;background:transparent;box-shadow:none}.header-search input{display:none}.header-search button{width:43px;color:#fff}.cart-bag{width:43px;height:48px}.cart-bag svg{width:27px;height:27px}.hamburger{display:block;padding:5px}.hero.hero-home,.hero-home .hero-slide{min-height:0}.hero-home-inner{display:flex;flex-direction:column;min-height:0;padding:36px 0 54px;gap:18px}.hero-home-copy{padding:0}.hero-trust-pill{font-size:9px;padding:9px 12px;margin-bottom:17px}.hero-home h1{font-size:clamp(2.45rem,11.8vw,3.7rem);line-height:1.0;margin-bottom:18px}.hero-home-copy>p{font-size:13px;line-height:1.65;margin-bottom:20px}.hero-ctas{flex-direction:column;align-items:stretch}.hero-btn{width:100%;min-height:51px;font-size:13px}.hero-mini-trust{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;font-size:9px;margin-top:18px}.hero-home-media{height:320px;width:100%}.hero-home-media img{height:320px;border-radius:19px}.hero-floating-card{right:10px;bottom:10px;padding:9px 11px}.hero-floating-card strong{font-size:9px}.hero-floating-card span{font-size:8px}.section{padding:62px 0}.brand-section{padding:55px 0}.section-head{margin-bottom:25px}.section-head h2{font-size:30px}.premium-category-grid{grid-template-columns:1fr 1fr;gap:10px}.premium-category-card{height:250px;border-radius:13px}.premium-category-card .category-info{left:15px;right:15px;bottom:15px}.premium-category-card h3{font-size:18px}.home-product-grid{grid-template-columns:1fr 1fr;gap:10px}.product-thumb{min-height:205px!important}.product-body{padding:13px!important}.product-name{font-size:13px!important}.product-actions .btn{padding:9px 6px!important;font-size:9px!important}.feature-banner-inner{grid-template-columns:1fr;min-height:0}.feature-copy{padding:40px 24px 25px}.feature-art{height:240px}.trust-grid{grid-template-columns:1fr 1fr;gap:10px}.trust-card{padding:19px 14px}.final-cta-inner{padding:28px 22px;display:block}.final-cta .hero-btn{width:100%;margin-top:20px}.whatsapp-float{width:56px!important;height:56px!important;right:14px!important;bottom:14px!important}}
@media(max-width:430px){.site-header .logo img{width:150px;max-width:150px}.top-message{font-size:11px}.premium-category-grid,.home-product-grid{grid-template-columns:1fr}.premium-category-card{height:275px}.hero-home-media,.hero-home-media img{height:285px}.hero-home h1{font-size:40px}.brand-card{width:145px;height:70px}}


/* ================================================================
   UAE ELECTRIC SCOOTERS — COMPACT / PREMIUM HEADER + MOBILE HOME
   All key measurements are controlled here for easy adjustment.
   ================================================================ */
:root{
  --uae-header-orange:#c94f00;
  --uae-header-orange-dark:#a83f00;
  --uae-header-yellow:#ffc900;
  --uae-header-height:78px;
  --uae-topbar-height:40px;
  --uae-nav-gap:8px;
  --uae-nav-font:15px;
  --uae-nav-pad-x:14px;
  --uae-header-radius:12px;
}

/* Keep the complete storefront header visible on every page while scrolling. */
.site-header-shell{
  position:sticky;
  top:0;
  z-index:2000;
  isolation:isolate;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
}
.site-header-shell .top-announcement,
.site-header-shell .site-header{position:relative;top:auto}

/* Compact announcement strip */
.site-header-shell .top-announcement{
  height:var(--uae-topbar-height);
  min-height:var(--uae-topbar-height);
  background:var(--uae-header-yellow);
}
.site-header-shell .top-announcement-inner{
  width:min(calc(100% - 40px),1320px);
  grid-template-columns:220px 1fr 220px;
  padding:0;
}
.site-header-shell .top-socials{gap:14px}
.site-header-shell .top-socials a{width:22px;height:22px}
.site-header-shell .top-socials svg{width:20px;height:20px}
.site-header-shell .top-message{font-size:15px;line-height:1;font-weight:700}

/* Compact orange navigation */
.site-header-shell .site-header{
  height:var(--uae-header-height);
  min-height:var(--uae-header-height);
  background:var(--uae-header-orange);
  border:0;
  box-shadow:none;
}
.site-header-shell .header-inner{
  width:min(calc(100% - 40px),1320px);
  min-height:var(--uae-header-height);
  height:100%;
  gap:20px;
}
.site-header-shell .logo{
  flex:0 0 205px;
  width:205px;
  min-width:205px;
  height:100%;
  display:flex;
  align-items:center;
}
.site-header-shell .logo img{
  display:block;
  width:auto;
  max-width:190px;
  height:52px;
  object-fit:contain;
}
.site-header-shell .main-nav{
  flex:1 1 auto;
  min-width:0;
  justify-content:center;
  gap:var(--uae-nav-gap);
  overflow:visible;
}
.site-header-shell .main-nav > a,
.site-header-shell .main-nav > .nav-dropdown > a{
  min-height:46px;
  padding:0 var(--uae-nav-pad-x);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:var(--uae-header-radius);
  color:#fff;
  font-size:var(--uae-nav-font);
  font-weight:700;
  white-space:nowrap;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.site-header-shell .main-nav > a:hover,
.site-header-shell .main-nav > .nav-dropdown > a:hover{
  background:rgba(255,255,255,.10);
  color:#fff;
  transform:translateY(-1px);
}
.site-header-shell .main-nav > a.active,
.site-header-shell .main-nav > .nav-dropdown > a.active{
  background:var(--uae-header-yellow);
  color:#111;
}
.site-header-shell .nav-chevron{
  font-size:15px;
  line-height:1;
  transform:translateY(-1px);
  transition:transform .2s ease;
}
.site-header-shell .nav-dropdown:hover .nav-chevron{transform:rotate(180deg)}

/* Elegant dropdown: compact floating panel, no huge red block or sliding animation. */
.site-header-shell .nav-dropdown{position:relative}
.site-header-shell .nav-dropdown-menu{
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(6px);
  width:220px;
  max-height:min(360px,calc(100vh - 130px));
  overflow:auto;
  padding:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.07);
  border-top:3px solid var(--uae-header-yellow);
  border-radius:0 0 14px 14px;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.site-header-shell .nav-dropdown-menu::before{
  content:"";
  position:absolute;
  top:-8px;
  left:50%;
  width:14px;
  height:14px;
  background:#fff;
  border-left:1px solid rgba(0,0,0,.07);
  border-top:1px solid rgba(0,0,0,.07);
  transform:translateX(-50%) rotate(45deg);
}
.site-header-shell .nav-dropdown:hover > .nav-dropdown-menu,
.site-header-shell .nav-dropdown:focus-within > .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.site-header-shell .nav-dropdown-menu a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:9px 12px;
  margin:2px 0;
  border-radius:9px;
  color:#202020;
  background:transparent;
  font-size:13px;
  font-weight:650;
  transition:background .16s ease,color .16s ease,padding-left .16s ease;
}
.site-header-shell .nav-dropdown-menu a:hover{
  background:#fff4ed;
  color:var(--uae-header-orange-dark);
  padding-left:16px;
}
/* Brands can hold many items without becoming a giant dropdown. */
.site-header-shell .nav-dropdown:nth-child(4) .nav-dropdown-menu{
  width:300px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
}
.site-header-shell .nav-dropdown:nth-child(4) .nav-dropdown-menu a{min-width:0}

/* Header actions */
.site-header-shell .header-actions{flex:0 0 auto;gap:10px}
.site-header-shell .header-search{
  width:205px;
  height:46px;
  border-radius:13px;
  background:#fff;
  box-shadow:none;
}
.site-header-shell .header-search input{font-size:14px;padding:0 12px 0 16px}
.site-header-shell .header-search button{width:46px;color:#111}
.site-header-shell .header-search svg{width:22px;height:22px}
.site-header-shell .cart-bag{width:42px;height:46px;color:#fff}
.site-header-shell .cart-bag svg{width:27px;height:27px}
.site-header-shell .cart-count{top:0;right:-1px}

/* Prevent page content from sitting behind the compact sticky header. */
body.menu-open{overflow:hidden}

/* ================================================================
   MOBILE HEADER — clean, small, touch-friendly
   ================================================================ */
@media (max-width:1100px){
  :root{--uae-header-height:74px}
  .site-header-shell .header-inner{gap:12px}
  .site-header-shell .logo{flex-basis:175px;width:175px;min-width:175px}
  .site-header-shell .logo img{max-width:165px;height:47px}
  .site-header-shell .main-nav > a,
  .site-header-shell .main-nav > .nav-dropdown > a{padding:0 9px;font-size:13px}
  .site-header-shell .header-search{width:180px}
}
@media (max-width:900px){
  .site-header-shell .top-announcement-inner{width:calc(100% - 32px);grid-template-columns:1fr}
  .site-header-shell .top-socials,.site-header-shell .top-spacer{display:none}
  .site-header-shell .top-message{font-size:13px}
  .site-header-shell .site-header{height:68px;min-height:68px}
  .site-header-shell .header-inner{min-height:68px;width:calc(100% - 28px)}
  .site-header-shell .logo{flex:1 1 auto;width:auto;min-width:0}
  .site-header-shell .logo img{height:43px;max-width:160px}
  .site-header-shell .main-nav{display:none}
  .site-header-shell .header-search{width:42px;height:44px;background:transparent}
  .site-header-shell .header-search input{display:none}
  .site-header-shell .header-search button{width:42px;color:#fff}
  .site-header-shell .cart-bag{width:40px;height:44px}
  .site-header-shell .hamburger{display:flex}
}
@media (max-width:600px){
  :root{--uae-topbar-height:34px}
  .site-header-shell .top-announcement{height:34px;min-height:34px}
  .site-header-shell .top-message{font-size:10px;letter-spacing:0}
  .site-header-shell .site-header{height:62px;min-height:62px}
  .site-header-shell .header-inner{min-height:62px;padding:7px 12px;width:100%;gap:4px}
  .site-header-shell .logo img{height:39px;max-width:145px}
  .site-header-shell .header-actions{gap:3px}
  .site-header-shell .header-search,.site-header-shell .header-search button{width:38px;height:42px}
  .site-header-shell .header-search svg{width:21px;height:21px}
  .site-header-shell .cart-bag{width:38px;height:42px}
  .site-header-shell .cart-bag svg{width:24px;height:24px}
  .site-header-shell .hamburger{width:38px;height:42px;padding:9px}
}
@media (max-width:380px){
  .site-header-shell .logo img{height:35px;max-width:130px}
  .site-header-shell .header-actions{gap:0}
  .site-header-shell .header-search,.site-header-shell .header-search button,.site-header-shell .cart-bag,.site-header-shell .hamburger{width:34px}
}

/* ================================================================
   HOMEPAGE CATEGORY CARDS — fully responsive
   ================================================================ */
.home-page .ride-categories .container{width:min(calc(100% - 40px),1320px)}
.home-page .premium-category-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.home-page .premium-category-card{
  min-width:0;
  aspect-ratio:4/5;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.09);
  isolation:isolate;
}
.home-page .premium-category-card img{transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.home-page .premium-category-card:hover img{transform:scale(1.07)}
.home-page .premium-category-card .category-shade{z-index:1}
.home-page .premium-category-card .category-info{z-index:2;padding:22px}
.home-page .premium-category-card .category-info span{color:var(--uae-header-yellow);font-size:11px}
.home-page .premium-category-card .category-info h3{font-size:21px;line-height:1.12}
.home-page .premium-category-card .category-info b{font-size:12px;display:inline-flex;gap:7px;align-items:center}
@media (max-width:1000px){
  .home-page .premium-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .home-page .premium-category-card{aspect-ratio:5/4}
}
@media (max-width:600px){
  .home-page .ride-categories .container{width:calc(100% - 28px)}
  .home-page .premium-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .home-page .premium-category-card{aspect-ratio:1/1;border-radius:13px}
  .home-page .premium-category-card .category-info{padding:13px}
  .home-page .premium-category-card .category-info span{font-size:9px;line-height:1.2}
  .home-page .premium-category-card .category-info h3{font-size:15px;margin:3px 0}
  .home-page .premium-category-card .category-info b{font-size:10px}
}
@media (max-width:360px){
  .home-page .premium-category-grid{gap:9px}
  .home-page .premium-category-card .category-info{padding:10px}
  .home-page .premium-category-card .category-info h3{font-size:14px}
}

/* Mobile product grids: never overflow the viewport. */
@media (max-width:600px){
  .home-page .home-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .home-page .product-card{min-width:0;border-radius:12px}
  .home-page .product-thumb{min-width:0}
  .home-page .product-info{padding:11px}
  .home-page .product-info h3{font-size:13px;line-height:1.3}
  .home-page .product-price{font-size:14px}
}
@media (max-width:360px){
  .home-page .home-product-grid{grid-template-columns:1fr;gap:12px}
}

/* Accessibility / motion */
@media (prefers-reduced-motion:reduce){
  .site-header-shell .nav-dropdown-menu,
  .site-header-shell .main-nav a,
  .site-header-shell .premium-category-card img{transition:none!important}
}