/* =========================================
   Hair Experts - Premium UI (Main CSS)
   ========================================= */

/* --- Google Font (keep it here only) --- */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

:root{
  --bg-color:#fdfcfb;
  --text-dark:#2d2a2e;
  --text-gray:#6d6a70;

  --gold-primary:#c9a46a;
  --gold-dark:#a68550;
  --gold-light:#f4e4c1;

  --pink-soft:#ffe7f2;
  --blue-soft:#eaf6ff;

  --whatsapp-green:#25D366;

  --shadow-soft:0 10px 40px rgba(0,0,0,0.04);
  --shadow-mid:0 14px 45px rgba(0,0,0,0.08);
  --shadow-strong:0 20px 60px rgba(201,164,106,.20);

  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;

  --container: min(1200px, 92%);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Tajawal', sans-serif;
  background:var(--bg-color);
  color:var(--text-dark);
  line-height:1.7;
  overflow-x:hidden;
}

a{ text-decoration:none; color:inherit; transition:.25s; }
img{ max-width:100%; display:block; }

.container{ width:var(--container); margin-inline:auto; }
.section{ padding: 60px 0; }
.section--tight{ padding: 40px 0; }

.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px;
  color:var(--gold-dark);
  font-size:13px;
  font-weight:800;
}

.h2{
  font-size: clamp(24px, 2.3vw, 36px);
  font-weight: 800;
  line-height:1.3;
}
.p{
  color: var(--text-gray);
  font-size: 15px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 30px;
  border-radius:999px;
  font-weight:800;
  border: 1px solid transparent;
  transition: .25s;
  user-select:none;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{
  background:#111;
  color:#fff;
  box-shadow: 0 12px 25px rgba(0,0,0,.18);
}
.btn--primary:hover{
  background: var(--gold-primary);
  transform: translateY(-2px);
}
.btn--ghost{
  background:#fff;
  border-color: rgba(0,0,0,.12);
  color:#333;
}
.btn--ghost:hover{
  border-color:#000;
  transform: translateY(-2px);
}
.btn--wa{
  background: var(--whatsapp-green);
  color:#fff;
  box-shadow: 0 12px 22px rgba(37,211,102,.25);
}
.btn--wa:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 30px rgba(37,211,102,.32);
}

/* Accessible focus */
:focus-visible{
  outline: 3px solid rgba(201,164,106,.55);
  outline-offset: 3px;
  border-radius: 10px;
}

/* =========================
   Header
   ========================= */
.header{
  position: sticky;
  top:0;
  z-index:999;
  padding: 14px 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.logo{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  direction:ltr;
  display:flex;
  align-items:baseline;
  gap:4px;
}
.logo span{ color: var(--gold-primary); }
.header__actions{ display:flex; gap:10px; align-items:center; }
.nav-pill{
  padding: 10px 18px;
  background:#000;
  color:#fff;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
}
.nav-pill:hover{ background: var(--gold-primary); transform: translateY(-2px); }
.nav-pill--ghost{
  background:#fff;
  color:#111;
  border:1px solid rgba(0,0,0,.12);
}
.nav-pill--ghost:hover{ border-color:#000; }

/* =========================
   Hero (Home)
   ========================= */
.hero{
  padding: 55px 0 25px;
  min-height: 78vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-120px -80px auto -80px;
  height: 420px;
  background: radial-gradient(circle at 30% 35%, rgba(201,164,106,.18), transparent 55%),
              radial-gradient(circle at 70% 45%, rgba(255,231,242,.55), transparent 60%),
              radial-gradient(circle at 55% 70%, rgba(234,246,255,.55), transparent 60%);
  filter: blur(2px);
  z-index:-2;
}
.hero::after{
  /* subtle animated hair lines */
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      115deg,
      rgba(201,164,106,.08) 0px,
      rgba(201,164,106,.08) 1px,
      transparent 14px,
      transparent 34px
    );
  opacity:.18;
  transform: translateX(-20%);
  animation: hairMove 10s linear infinite;
  z-index:-3;
}
@keyframes hairMove{
  from{ transform: translateX(-25%); }
  to{ transform: translateX(10%); }
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 55px;
  align-items:center;
}
.hero__title{
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 900;
  line-height:1.25;
  margin: 16px 0 14px;
}
.hero__title span{ color: var(--gold-primary); display:block; }
.hero__desc{
  font-size: 17px;
  color: var(--text-gray);
  max-width: 560px;
  margin-bottom: 26px;
}
.hero__btns{ display:flex; gap:12px; flex-wrap:wrap; }

.hero__visual{
  position:relative;
  animation: fadeInUp .8s ease-out;
}
.hero__img-frame{
  border-radius: var(--radius-xl);
  overflow:hidden;
  height: 560px;
  box-shadow: var(--shadow-strong);
  background: #fff;
}
.hero__img-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
}
.float-card{
  position:absolute;
  bottom: 26px;
  right: 18px;
  left: 18px;
  margin:auto;
  max-width: 320px;
  background:#fff;
  padding: 12px 16px;
  border-radius:999px;
  box-shadow: var(--shadow-mid);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(0,0,0,.06);
}
.float-left{
  display:flex; align-items:center; gap:10px;
}
.float-icon{
  width: 34px;
  height: 34px;
  background: var(--pink-soft);
  color:#d63384;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size: 16px;
}
.float-text strong{ display:block; font-size: 13px; font-weight: 900; color:#000; line-height:1.1; }
.float-text span{ display:block; font-size: 11px; color:#777; }

/* =========================
   Categories / Sections (Home)
   ========================= */
.section-header{
  text-align:center;
  margin-bottom: 34px;
}
.section-header .p{ margin-top:10px; }

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.card{
  background:#fff;
  border-radius: 20px;
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  transition: .28s;
  border: 1px solid rgba(0,0,0,.04);
  position:relative;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
}
.card__img{
  height: 250px;
  overflow:hidden;
  position:relative;
}
.card__img img{
  width:100%; height:100%;
  object-fit:cover;
  transition: .55s;
}
.card:hover .card__img img{ transform: scale(1.08); }

.card__badge{
  position:absolute;
  top:14px;
  left:14px;
  padding: 7px 12px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color: var(--gold-dark);
  backdrop-filter: blur(8px);
}
.card__content{
  padding: 18px 18px 20px;
  text-align:right;
}
.card__title{
  font-size: 17px;
  font-weight: 900;
  margin-bottom: 6px;
}
.card__desc{
  color: var(--text-gray);
  font-size: 13px;
  line-height:1.6;
  min-height: 42px;
}
.card__cta{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:900;
  color: var(--gold-primary);
  font-size: 13px;
}
.card__cta span{
  width: 28px; height: 28px;
  border-radius:50%;
  border: 1px solid rgba(201,164,106,.35);
  display:grid; place-items:center;
}
.card:hover .card__cta span{
  background: rgba(201,164,106,.12);
}

/* =========================
   Features bar
   ========================= */
.features-bar{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.feature-box{
  padding: 30px 22px;
  border-radius: 24px;
  text-align:center;
  transition: .35s;
  border:1px solid transparent;
}
.feature-box:hover{ transform: translateY(-6px); }

.box-gold{
  background: linear-gradient(135deg, #fffbf2 0%, #fff8e6 100%);
  border-color: rgba(201,164,106,.12);
}
.box-blue{
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: rgba(56,189,248,.12);
}
.box-pink{
  background: linear-gradient(135deg, #fff0f7 0%, #ffe4f0 100%);
  border-color: rgba(236,72,153,.12);
}

.feature-icon{
  width:60px; height:60px;
  margin:0 auto 18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:26px;
}
.box-gold .feature-icon{ background: rgba(201,164,106,.14); color: var(--gold-primary); }
.box-blue .feature-icon{ background: rgba(56,189,248,.14); color:#0ea5e9; }
.box-pink .feature-icon{ background: rgba(236,72,153,.14); color:#ec4899; }

.feature-title{ font-weight:900; font-size:16px; margin-bottom:8px; color:#111; }
.feature-text{ font-size:13px; color:#555; line-height:1.6; }

/* =========================
   Social proof (Stats)
   ========================= */
.stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.stat{
  background:#fff;
  border:1px solid rgba(0,0,0,.05);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
  text-align:center;
}
.stat strong{
  display:block;
  font-size: 22px;
  font-weight: 900;
  color:#111;
}
.stat span{
  color: var(--text-gray);
  font-size: 12px;
  font-weight:700;
}

/* =========================
   Testimonials
   ========================= */
.testimonials{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.t-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.05);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
}
.t-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.t-stars{ color: var(--gold-primary); letter-spacing:2px; font-weight:900; }
.t-name{ font-weight:900; }
.t-text{ color: var(--text-gray); font-size: 13px; line-height:1.75; }

/* =========================
   WhatsApp banner
   ========================= */
.whatsapp-banner{
  background: linear-gradient(135deg, #fff 0%, #fcfcfc 100%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 24px;
  padding: 44px 26px;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow-mid);
}
.whatsapp-banner::before{
  content:'';
  position:absolute;
  top:-60px; left:-60px;
  width:220px; height:220px;
  background: var(--gold-light);
  border-radius:50%;
  filter: blur(85px);
  opacity:.55;
}
.whatsapp-banner::after{
  content:'';
  position:absolute;
  bottom:-70px; right:-70px;
  width:240px; height:240px;
  background: rgba(255,231,242,.85);
  border-radius:50%;
  filter: blur(90px);
  opacity:.55;
}
.banner-content{ position:relative; z-index:2; }
.banner-title{ font-size: 26px; font-weight: 900; margin-bottom: 10px; }
.banner-text{ color: var(--text-gray); margin-bottom: 22px; }

/* =========================
   FAQ (Accordion)
   ========================= */
.faq{
  background:#fff;
  border:1px solid rgba(0,0,0,.05);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.faq-item{ border-top:1px solid rgba(0,0,0,.06); }
.faq-item:first-child{ border-top:0; }
.faq-q{
  width:100%;
  text-align:right;
  background:transparent;
  border:0;
  padding: 18px 18px;
  font-weight: 900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.faq-q span{
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.10);
  display:grid; place-items:center;
  flex-shrink:0;
}
.faq-a{
  max-height: 0;
  overflow:hidden;
  transition: max-height .3s ease;
  padding: 0 18px;
}
.faq-a p{
  color: var(--text-gray);
  font-size: 13px;
  padding-bottom: 16px;
}

/* =========================
   Sub Page (Edu/Product)
   ========================= */
.edu-header{
  text-align:center;
  padding: 46px 0 34px;
  max-width: 920px;
  margin: 0 auto;
}
.edu-title{
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  margin-bottom: 12px;
  line-height:1.35;
  color:#111;
}
.edu-title span{ color: var(--gold-primary); display:inline-block; }
.edu-desc{
  font-size: 15px;
  color:#666;
  line-height:1.85;
  max-width: 720px;
  margin: 0 auto;
}

.quick-highlights{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 10px 0 28px;
}
.qh{
  background:#fff;
  border:1px solid rgba(0,0,0,.05);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
  text-align:right;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.qh i{
  width:42px; height:42px;
  border-radius: 14px;
  background: #fff8e6;
  color: var(--gold-primary);
  display:grid; place-items:center;
  font-style:normal;
  font-size: 18px;
  flex-shrink:0;
}
.qh strong{ display:block; font-weight:900; margin-bottom:4px; }
.qh span{ color: var(--text-gray); font-size: 12px; }

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}
.gallery-item{
  border-radius: 20px;
  overflow:hidden;
  height: 320px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0,0,0,.04);
  transition: .25s;
  background:#fff;
}
.gallery-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-mid); }
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:.45s;
  cursor: zoom-in;
}
.gallery-item:hover img{ transform: scale(1.04); }

.zoomed-overlay{
  position:fixed;
  inset:0;
  background: rgba(255,255,255,.94);
  z-index: 9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  animation: fadeIn .2s ease;
}
.zoomed-img{
  max-width: 92%;
  max-height: 88vh;
  border-radius: 14px;
  box-shadow: 0 25px 70px rgba(0,0,0,.25);
  animation: zoomIn .22s cubic-bezier(.175,.885,.32,1.275);
}
.zoom-close{
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
  font-weight: 900;
}

.features-list{
  background:#fff;
  padding: 44px 22px;
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 40px;
  border: 1px solid rgba(0,0,0,.04);
}
.features-grid-container{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 22px;
}
.f-item{ display:flex; gap:12px; align-items:flex-start; text-align:right; }
.f-icon{
  width: 44px; height: 44px;
  background:#fff8e6;
  color: var(--gold-primary);
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-size: 18px;
  flex-shrink:0;
}
.f-content h3{ font-size: 16px; font-weight: 900; margin-bottom: 6px; }
.f-content p{ color:#666; font-size: 13px; line-height: 1.7; }

.how{
  background: linear-gradient(135deg, #ffffff 0%, #fcfbf8 100%);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 40px;
}
.how-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.step{
  background:#fff;
  border:1px solid rgba(0,0,0,.05);
  border-radius: 18px;
  padding: 16px;
}
.step strong{ font-weight:900; display:block; margin-bottom:6px; }
.step p{ color: var(--text-gray); font-size: 13px; }

.cta-box{
  text-align:center;
  padding: 54px 20px;
  background: linear-gradient(135deg, #2d2a2e 0%, #000 100%);
  border-radius: 24px;
  color:#fff;
  margin-bottom: 60px;
  box-shadow: 0 20px 55px rgba(0,0,0,.22);
}
.cta-title{ font-size: clamp(22px, 2.2vw, 32px); font-weight: 900; margin-bottom: 10px; }
.cta-text{ font-size: 15px; opacity:.82; margin-bottom: 18px; }
.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 16px 42px;
  background: var(--gold-primary);
  color:#fff;
  border-radius: 999px;
  font-weight:900;
  transition: .25s;
}
.cta-btn:hover{ background:#fff; color:#000; transform: translateY(-2px); }

.footer{
  text-align:center;
  padding: 34px 0;
  color:#999;
  font-size: 13px;
  border-top: 1px solid rgba(0,0,0,.06);
}

@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes zoomIn{ from{ transform: scale(.88);} to{ transform: scale(1);} }

/* =========================
   Responsive
   ========================= */
@media (max-width: 1000px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero__grid{ grid-template-columns: 1fr; gap: 26px; text-align:center; }
  .hero__desc{ margin-inline:auto; }
  .hero__btns{ justify-content:center; }
  .hero__img-frame{ height: 430px; }
  .float-card{ position: relative; bottom:auto; right:auto; left:auto; margin: 12px auto 0; }
  .features-bar{ grid-template-columns: 1fr; }
  .testimonials{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .gallery-item{ height: 250px; }
  .quick-highlights{ grid-template-columns: 1fr; }
  .features-grid-container{ grid-template-columns: 1fr; }
  .how-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .grid{ grid-template-columns: 1fr; }
  .hero{ min-height: auto; padding: 45px 0 20px; }
  .hero__img-frame{ height: 360px; }
  .banner-title{ font-size: 22px; }
}
/* =========================
   Mobile Sticky CTA Bar
   ========================= */
.mobile-cta {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 9998;

  display: none;
  gap: 10px;
  align-items: center;
  justify-content: space-between;

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  border-radius: 22px;

  padding: 12px;
}

.mobile-cta__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid transparent;
  transition: .2s;
  white-space: nowrap;
}

.mobile-cta__btn--primary {
  background: #111;
  color: #fff;
}
.mobile-cta__btn--primary:hover { background: var(--gold-primary); }

.mobile-cta__btn--wa {
  background: var(--whatsapp-green);
  color: #fff;
}
.mobile-cta__btn--wa:hover { filter: brightness(.95); }

/* نخلي مساحة أسفل الصفحة عشان الشريط ما يغطي المحتوى */
@media (max-width: 1000px){
  body.has-mobile-cta { padding-bottom: 95px; }
  .mobile-cta { display: flex; }
}