/* =====================================================
   SAHABA ABAYA — core stylesheet
===================================================== */

:root{
  --ink:#0b0b0c;
  --ink-soft:#1c1b1d;
  --ivory:#f8f4ee;
  --ivory-dim:#efe8df;
  --blush:#d99aa1;
  --blush-deep:#b96f78;
  --gold:#c6a463;
  --line: rgba(255,255,255,0.14);
  --line-dark: rgba(11,11,12,0.10);
  --shadow: 0 20px 60px -20px rgba(0,0,0,0.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- language-driven typography ---------- */
body[data-lang="ar"]{
  font-family:'Tajawal', sans-serif;
}
body[data-lang="ar"] .font-display{ font-family:'Cairo', sans-serif; }
body[data-lang="en"]{
  font-family:'Plus Jakarta Sans', sans-serif;
}
body[data-lang="en"] .font-display{ font-family:'Playfair Display', serif; }

.eyebrow{
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.72rem;
  font-weight:600;
  color:var(--blush-deep);
}
body[data-lang="ar"] .eyebrow{ letter-spacing:.02em; text-transform:none; }

/* ---------- nav ---------- */
.nav-glass{
  background:rgba(11,11,12,0.55);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:background .3s ease, box-shadow .3s ease;
}
.nav-glass.scrolled{
  background:rgba(11,11,12,0.85);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.5);
}
.nav-link{
  position:relative;
  color:#efe8df;
  opacity:.85;
  transition:opacity .25s ease;
}
.nav-link:hover{opacity:1;}
.nav-link::after{
  content:"";
  position:absolute; left:0; bottom:-4px;
  width:0; height:1px;
  background:var(--blush);
  transition:width .3s ease;
}
.nav-link:hover::after{width:100%;}

.lang-pill{
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  overflow:hidden;
  display:inline-flex;
}
.lang-pill button{
  padding:.4rem .85rem;
  font-size:.75rem;
  letter-spacing:.05em;
  color:#efe8df;
  opacity:.6;
  transition:all .25s ease;
}
.lang-pill button.active{
  opacity:1;
  background:var(--blush);
  color:var(--ink);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.95rem 1.9rem;
  border-radius:999px;
  font-weight:600;
  font-size:.92rem;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:linear-gradient(135deg,#25d366,#1ebe5b);
  color:#fff;
  box-shadow:0 12px 30px -10px rgba(37,211,102,.55);
}
.btn-primary:hover{ box-shadow:0 16px 34px -8px rgba(37,211,102,.65); }
.btn-outline{
  border:1.5px solid var(--ink);
  color:var(--ink);
  background:transparent;
}
.btn-outline:hover{ background:var(--ink); color:var(--ivory); }
.btn-outline-light{
  border:1.5px solid rgba(255,255,255,.55);
  color:#fff;
}
.btn-outline-light:hover{ background:#fff; color:var(--ink); }

/* ---------- hero ---------- */
.hero-wrap{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 20%;
  transform:scale(1.02);
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,12,.15) 0%, rgba(11,11,12,.05) 35%, rgba(11,11,12,.75) 88%, rgba(11,11,12,.92) 100%);
}
.hero-content{ position:relative; z-index:2; color:#fff; }

.stat-chip{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
  border-radius:16px;
}

/* ---------- product cards ---------- */
.product-card{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:var(--ink);
  box-shadow:var(--shadow);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.product-card:hover{ transform:translateY(-6px); }
.product-card img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s ease;
}
.product-card:hover img{ transform:scale(1.07); }
.product-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(11,11,12,.92) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.4rem;
}
.card-cta{
  opacity:0; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
}
.product-card:hover .card-cta{ opacity:1; transform:translateY(0); }

/* ---------- gallery ---------- */
.gallery-item{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease;
}
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.1rem 1.3rem;
  background:linear-gradient(180deg, transparent, rgba(11,11,12,.85));
  color:#fff;
}

/* ---------- glass section dividers ---------- */
.section-card{
  background:#fff;
  border-radius:28px;
  box-shadow:var(--shadow);
}

/* ---------- floating whatsapp ---------- */
.wa-float{
  position:fixed;
  bottom:22px;
  z-index:50;
  width:60px; height:60px;
  border-radius:50%;
  background:linear-gradient(135deg,#25d366,#1ebe5b);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.65);
  animation:pulse-wa 2.6s infinite;
}
body[data-lang="en"] .wa-float{ right:22px; }
body[data-lang="ar"] .wa-float{ left:22px; }
@keyframes pulse-wa{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55), 0 14px 34px -10px rgba(37,211,102,.65); }
  70%{ box-shadow:0 0 0 16px rgba(37,211,102,0), 0 14px 34px -10px rgba(37,211,102,.65); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0), 0 14px 34px -10px rgba(37,211,102,.65); }
}

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- misc ---------- */
.divider-line{ height:1px; background:linear-gradient(90deg, transparent, var(--line-dark), transparent); }
.text-blush{ color:var(--blush-deep); }
.bg-blush{ background:var(--blush); }
.bg-ink{ background:var(--ink); }

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

/* mobile refine */
@media (max-width:640px){
  .hero-content h1{ font-size:2.6rem; line-height:1.15; }
}