:root {
  --navy-950: #0b1120;
  --navy-900: #0f172a;
  --navy-800: #1e293b;
  --navy-700: #334155;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-50: #eef2ff;
  --coral-500: #f97316;
  --coral-400: #fb923c;
  --coral-50: #fff7ed;
  --emerald-500: #10b981;
  --emerald-50: #ecfdf5;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --white: #ffffff;
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.06), 0 2px 4px -2px rgba(15,23,42,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.06), 0 4px 6px -4px rgba(15,23,42,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15,23,42,0.08), 0 8px 10px -6px rgba(15,23,42,0.04);
  --shadow-glow: 0 0 20px rgba(249,115,22,0.15);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

* { margin:0; padding:0; box-sizing:border-box; }
a { text-decoration:none !important; }

body {
  font-family: 'Cairo', sans-serif;
  background: var(--gray-50);
  color: var(--gray-700);
  overflow-x: hidden;
  line-height: 1.7;
}

h1,h2,h3,h4,h5,h6 { font-family:'El Messiri',sans-serif; font-weight:700; }

/* ─── NAVBAR ─── */
.navbar-wrap {
  background: rgba(11,17,32,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.navbar-inner {
  display:flex;
  align-items:center;
  gap: 24px;
  height: 64px;
}
.brand-link { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-logo {
  width: 36px; height: 36px;
  object-fit: cover;
  border-radius: 10px;
}
.brand-name {
  font-family:'El Messiri',sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

.nav-menu {
  display:flex;
  align-items:center;
  flex:1;
  gap: 16px;
}
.nav-links {
  display:flex;
  align-items:center;
  gap: 2px;
  list-style:none;
  margin:0;
  padding:0;
  margin-inline: auto;
}
.nav-links a {
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 16px;
  border-radius: 100px;
  transition: all 0.2s;
}
.nav-links a:hover { background:rgba(255,255,255,0.06); color:#fff; }
.nav-links a.active { color:#fff; }

.nav-actions {
  display:flex;
  align-items:center;
  gap: 8px;
  flex-shrink:0;
}

.btn-signin {
  background: var(--coral-500);
  border: none;
  border-radius: 100px;
  padding: 7px 20px;
  font-weight: 700;
  font-size: 0.83rem;
  color: #fff;
  transition: all 0.2s;
}
.btn-signin:hover {
  background: var(--coral-400);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}
.btn-track {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding: 7px 16px;
  font-weight: 600;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  transition: all 0.2s;
}
.btn-track:hover {
  border-color: var(--coral-500);
  color: var(--coral-500);
}

/* ─── HAMBURGER ─── */
.ham {
  display:none;
  flex-direction:column;
  gap:4px;
  background:none;
  border:none;
  cursor:pointer;
  padding:4px;
}
.ham span {
  display:block;
  width:22px; height:2px;
  background:rgba(255,255,255,0.5);
  border-radius:2px;
  transition:all 0.3s;
}

/* ─── HERO ─── */
.hero {
  background: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 45%, rgba(30,41,59,0.95) 100%);
  padding: 60px 0 80px;
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display:flex;
  align-items:center;
}
.hero-bg-blob {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.1;
  pointer-events:none;
}
.hero-bg-blob { top: -200px; left: -150px; background: var(--blue-500); }
.hero-bg-blob.hb2 { bottom: -250px; right: -100px; background: var(--coral-500); }
.hero * { position:relative; z-index:2; }

.hero-content {
  max-width: 650px;
}

.hero-tag {
  display:inline-flex;
  align-items:center; gap:8px;
  background: rgba(249,115,22,0.1);
  border: 1px solid rgba(249,115,22,0.2);
  padding: 5px 16px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--coral-400);
  margin-bottom: 22px;
}
.hero h1 {
  font-size: 3rem;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 12px;
  font-weight: 800;
}
.hero h1 .hl-coral { color: var(--coral-500); }
.hero p {
  font-size: 0.95rem;
  color: var(--gray-400);
  max-width: 480px;
  line-height: 1.8;
  margin-bottom: 26px;
}
.hero-search {
  max-width: 580px;
  margin-bottom: 30px;
}
.hero-search .input-group {
  background: rgba(255,255,255,0.04);
  border-radius: 100px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.06);
  transition: all 0.3s;
}
.hero-search .input-group:focus-within {
  border-color: var(--coral-500);
  background: rgba(255,255,255,0.06);
}
.hero-search input {
  background: transparent !important;
  border: none !important;
  color: #fff;
  padding: 12px 20px;
  font-size: 0.88rem;
}
.hero-search input::placeholder { color: rgba(255,255,255,0.25); }
.hero-search input:focus { box-shadow: none !important; }
.hero-search .btn {
  background: var(--coral-500);
  border: none;
  color: #fff;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 0.88rem;
}
.hero-search .btn:hover { background: var(--coral-400); }



/* ─── BRAND STRIP ─── */
.brand-strip {
  margin-top: -60px;
  position: relative; z-index: 10;
}
.brand-strip-inner {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 32px 24px;
  box-shadow: var(--shadow-xl);
}
.brand-strip .item { text-align:center; padding:4px; }
.brand-strip .item .ico {
  width: 50px; height: 50px;
  background: var(--blue-50);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 10px;
  font-size:1.2rem;
  color: var(--blue-600);
}
.brand-strip .item h6 {
  font-family:'Cairo',sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--navy-800);
  margin-bottom: 1px;
}
.brand-strip .item p {
  font-size: 0.78rem;
  color: var(--gray-400);
  margin:0;
}

/* ─── SECTION ─── */
.section { padding: 70px 0; }
.section-light { background: var(--white); }
.section-dark { background: var(--navy-900); }
.section-title {
  text-align:center;
  margin-bottom: 48px;
}
.section-title h2 {
  font-size: 2rem;
  color: var(--navy-800);
  margin-bottom: 8px;
}
.section-title p {
  color: var(--gray-500);
  font-size: 0.95rem;
  max-width: 460px;
  margin: 0 auto;
}
.section-title .bar {
  width: 44px; height: 3px;
  background: var(--coral-500);
  border-radius: 4px;
  margin: 14px auto 0;
}
.section-dark .section-title h2 { color: var(--white); }
.section-dark .section-title p { color: var(--gray-400); }

/* ─── FEATURE ─── */
.feat-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 30px 22px;
  text-align: center;
  transition: all 0.3s;
  height: 100%;
}
.feat-card:hover {
  border-color: var(--coral-500);
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}
.feat-card .ico {
  width: 58px; height: 58px;
  background: var(--coral-50);
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
  font-size: 1.4rem;
  color: var(--coral-500);
  transition: all 0.3s;
}
.feat-card:hover .ico {
  background: var(--coral-500);
  color: #fff;
  transform: scale(1.08) rotate(-4deg);
}
.feat-card h5 {
  font-family:'Cairo',sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--navy-800);
  margin-bottom: 6px;
}
.feat-card p {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin:0;
  line-height: 1.7;
}

/* ─── PRODUCT ─── */
.prod-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
  overflow: hidden;
  transition: all 0.3s;
  height: 100%;
  display:flex;
  flex-direction:column;
}
.prod-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: transparent;
}
.prod-img {
  height: 210px;
  overflow:hidden;
  background: var(--gray-100);
  position:relative;
}
.prod-img img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 0.5s;
}
.prod-card:hover .prod-img img { transform:scale(1.07); }
.prod-img .tag {
  position:absolute;
  top:12px; left:12px;
  background: var(--navy-800);
  color:#fff;
  padding:3px 12px;
  border-radius:100px;
  font-size:0.68rem;
  font-weight:700;
}
.prod-body {
  padding:18px 20px 20px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.prod-body h5 {
  font-family:'Cairo',sans-serif;
  font-size:0.92rem;
  font-weight:800;
  color:var(--navy-800);
  margin-bottom:4px;
}
.prod-body .desc {
  font-size:0.78rem;
  color:var(--gray-400);
  flex:1;
  margin-bottom:10px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.prod-body .price {
  font-size:1.1rem;
  font-weight:800;
  color:var(--blue-600);
  margin-bottom:12px;
}
.prod-body .price small { font-size:0.72rem; font-weight:600; color:var(--gray-400); }
.btn-prod {
  background:var(--navy-900);
  border:none;
  border-radius:100px;
  padding:8px 16px;
  font-size:0.8rem;
  font-weight:700;
  color:#fff;
  transition:all 0.2s;
  width:100%;
  text-align:center;
}
.btn-prod:hover { background:var(--navy-800); color:#fff; }
.btn-prod-outline {
  background:transparent;
  border:2px solid var(--navy-800);
  border-radius:100px;
  padding:10px 36px;
  font-size:0.88rem;
  font-weight:700;
  color:var(--navy-800);
  transition:all 0.2s;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn-prod-outline:hover { background:var(--navy-800); color:#fff; }

/* ─── CATEGORY ─── */
.cat-item {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  padding: 24px 16px;
  text-align:center;
  transition:all 0.3s;
  height:100%;
  display:block;
  color:inherit;
}
.cat-item:hover {
  border-color: var(--blue-500);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  color:inherit;
}
.cat-item .ico {
  width: 52px; height: 52px;
  background: var(--blue-50);
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 10px;
  font-size:1.2rem;
  color:var(--blue-600);
  transition:all 0.3s;
}
.cat-item:hover .ico {
  background: var(--blue-600);
  color:#fff;
}
.cat-item h6 {
  font-family:'Cairo',sans-serif;
  font-size:0.85rem;
  font-weight:800;
  color:var(--navy-800);
  margin-bottom:1px;
}
.cat-item p { font-size:0.74rem; color:var(--gray-400); margin:0; }

/* ─── STEPS ─── */
.step-box { text-align:center; }
.step-box .circle {
  width: 48px; height: 48px;
  background: var(--coral-500);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
  font-size:1.1rem;
  font-weight:900;
  color:#fff;
  box-shadow: 0 6px 14px rgba(249,115,22,0.25);
}
.step-box h6 {
  font-family:'Cairo',sans-serif;
  font-size:0.92rem;
  font-weight:800;
  color:var(--white);
  margin-bottom:6px;
}
.step-box p {
  font-size:0.82rem;
  color:var(--gray-400);
  margin:0;
  line-height:1.7;
  max-width:260px;
  margin:0 auto;
}

/* ─── ABOUT ─── */
.about-wrap {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow:hidden;
  box-shadow: var(--shadow-md);
}
.about-wrap img {
  width:100%; height:100%;
  object-fit:cover;
}
.about-body {
  padding: 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.about-body h3 {
  font-size:1.5rem;
  color:var(--navy-800);
  margin-bottom:10px;
}
.about-body p {
  color:var(--gray-500);
  line-height:1.9;
  font-size:0.92rem;
  margin-bottom:20px;
}
.social-btn {
  width:42px; height:42px;
  background: var(--navy-900);
  border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.6);
  transition:all 0.2s;
}
.social-btn:hover { background:var(--coral-500); color:#fff; }

/* ─── CONTACT ─── */
.contact-section { background: var(--white); }
.contact-form .form-control {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size:0.88rem;
}
.contact-form .form-control:focus {
  border-color: var(--coral-500);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.06);
}
.contact-form textarea { min-height:120px; resize:vertical; }
.contact-side {
  background: var(--navy-900);
  border-radius: var(--radius-lg);
  padding: 34px;
  height:100%;
  color:#fff;
}
.contact-side .ci {
  display:flex; align-items:center; gap:14px;
  margin-bottom:18px;
}
.contact-side .ci:last-child { margin-bottom:0; }
.contact-side .ci .dot {
  width:38px; height:38px;
  background: rgba(255,255,255,0.06);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:0.85rem;
  flex-shrink:0;
}
.contact-side .ci .tx {
  font-size:0.88rem;
  opacity:0.85;
}

/* ─── FOOTER ─── */
.footer {
  background: var(--navy-950);
  padding: 50px 0 0;
}
.footer h5 {
  font-family:'Cairo',sans-serif;
  font-size:1rem;
  font-weight:800;
  color:rgba(255,255,255,0.5);
  margin-bottom:14px;
}
.footer a:not(.fsocial) {
  display:block;
  color:rgba(255,255,255,0.25);
  font-size:0.85rem;
  margin-bottom:8px;
  transition:color 0.2s;
}
.footer a:not(.fsocial):hover { color:var(--coral-500); }
.footer .fdesc {
  font-size:0.85rem;
  color:rgba(255,255,255,0.2);
  max-width:260px;
  margin-bottom:14px;
}
.fsocial {
  width:38px; height:38px;
  background:rgba(255,255,255,0.04);
  border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.3);
  transition:all 0.2s;
}
.fsocial:hover { background:var(--coral-500); color:#fff; }
.footer .bot {
  border-top:1px solid rgba(255,255,255,0.04);
  margin-top:32px;
  padding:18px 0;
}
.footer .bot p {
  font-size:0.78rem;
  color:rgba(255,255,255,0.15);
  margin:0;
}
.footer .bot a {
  display:inline;
  font-size:0.78rem;
  color:var(--coral-500);
  font-weight:700;
}

/* ─── BOOTSTRAP OVERRIDES ─── */
.btn-primary { background-color: var(--coral-500) !important; border-color: var(--coral-500) !important; border-radius:100px !important; font-weight:700 !important; }
.btn-primary:hover { background-color: var(--coral-400) !important; border-color: var(--coral-400) !important; transform:translateY(-1px); box-shadow:var(--shadow-glow); }
.btn-outline-secondary { border-color: var(--gray-200) !important; color: var(--gray-600) !important; border-radius:100px !important; font-weight:600 !important; }
.form-control:focus { border-color: var(--coral-500) !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.06) !important; }

@media (max-width: 768px) {
  .ham { display:flex; }
  .nav-menu {
    display:none;
    position:absolute;
    top:64px; left:0; right:0;
    background:rgba(11,17,32,0.96);
    backdrop-filter:blur(14px);
    flex-direction:column;
    padding:16px 24px 20px;
    border-bottom:1px solid rgba(255,255,255,0.04);
    gap:16px;
  }
  .nav-menu.show { display:flex; }
  .nav-links { flex-direction:column; gap:4px; margin:0; width:100%; }
  .nav-links a { display:block; width:100%; padding:10px 16px; }
  .nav-actions { width:100%; justify-content:flex-start; }

  .hero { padding: 40px 0 50px; min-height:auto; }
  .hero-content { text-align:center; }
  .hero h1 { font-size: 1.8rem; }
  .hero p { max-width:100%; font-size:0.9rem; }
  .hero-search { max-width:100%; }
  .hero-search .btn { padding: 12px 18px; font-size:0.85rem; }
  .section-title h2 { font-size: 1.6rem; }
  .about-body { padding: 24px; }
}