/* ============================================================
   Hair Experts — Test Hero Page (Premium Creative Design)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800;900&family=Playfair+Display:wght@600;700;900&family=El+Messiri:wght@400;500;600;700&display=swap');

:root{
  --bg:           #fff9fb;
  --bg-soft:      #fff5f9;
  --surface:      #ffffff;
  --ink:          #2d2a2e;
  --ink-2:        #4a4548;
  --muted:        #8a8589;
  --line:         rgba(217, 107, 148, .12);
  --gold:         #d4a960;
  --gold-deep:    #b8915b;
  --gold-soft:    #fbf3e3;
  --pink-100:     #ffd6e7;
  --pink-deep:    #d96b94;
  --rose:         #b76b8b;
  --rose-dark:    #8d4666;

  --grad-mixed:   linear-gradient(135deg, #d96b94 0%, #d4a960 100%);
  --grad-gold:    linear-gradient(135deg, #f4d896 0%, #d4a960 100%);
  --grad-rose:    linear-gradient(135deg, #d96b94 0%, #b76b8b 100%);
  --grad-overlay: linear-gradient(180deg, rgba(45,30,40,.1) 0%, rgba(45,30,40,.5) 100%);

  --shadow-1:     0 8px 30px rgba(45,30,40,.08);
  --shadow-2:     0 18px 60px rgba(45,30,40,.15);
  --shadow-3:     0 30px 80px rgba(217,107,148,.25);

  --r-sm:         14px;
  --r-md:         20px;
  --r-lg:         28px;
  --r-xl:         40px;
  --r-pill:       999px;

  --wrap: min(1320px, 92%);
  --ease-soft:    cubic-bezier(.25, .8, .25, 1);
  --ease-bounce:  cubic-bezier(.34, 1.56, .64, 1);

  --font-ar:         'Tajawal', system-ui, sans-serif;
  --font-ar-display: 'El Messiri', 'Tajawal', sans-serif;
  --font-en:         'Playfair Display', serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-ar);
  background:var(--bg);
  color:var(--ink);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; transition:.3s var(--ease-soft); }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
.wrap{ width:var(--wrap); margin-inline:auto; }

/* Cursor follower removed for performance */

/* ============================================================
   TOPBAR (Glassmorphism)
   ============================================================ */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(255, 249, 251, .65);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  padding:16px 0;
  border-bottom:1px solid var(--line);
  transition:.4s;
}
.topbar.is-scrolled{
  background:rgba(255, 249, 251, .92);
  box-shadow:0 4px 30px rgba(0,0,0,.05);
}
.topbar__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:30px;
}
.topbar__nav{ display:flex; gap:24px; }
.topbar__nav a{
  font-size:14px; font-weight:700;
  color:var(--ink-2);
  position:relative;
}
.topbar__nav a::after{
  content:""; position:absolute;
  bottom:-4px; left:50%; transform:translateX(-50%);
  width:0; height:2px;
  background:var(--grad-mixed);
  transition:.3s var(--ease-soft);
}
.topbar__nav a:hover::after{ width:100%; }
.topbar__nav a:hover{ color:var(--pink-deep); }

.logo{ text-align:center; }
.logo__en{
  display:block;
  font-family:var(--font-en);
  font-size:24px; font-weight:900;
  letter-spacing:1px;
  color:var(--ink);
  line-height:1;
}
.logo__ar{
  display:block;
  font-size:12px;
  font-weight:700;
  margin-top:3px;
  letter-spacing:1px;
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.topbar__cta{
  justify-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 22px;
  background:var(--grad-mixed);
  color:#fff;
  border-radius:var(--r-pill);
  font-weight:800;
  font-size:13px;
  box-shadow:0 8px 24px rgba(217,107,148,.3);
  transition:.4s var(--ease-soft);
}
.topbar__cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 38px rgba(217,107,148,.45);
}

/* ============================================================
   HERO WITH VIDEO BACKGROUND
   ============================================================ */
.hero-video{
  position:relative;
  height:100vh;
  min-height:600px;
  overflow:hidden;
  margin-top:0;
}
.hero-video__bg{
  position:absolute;
  inset:0;
  z-index:1;
  background:#2d2a2e;
}
.hero-video__bg video,
.hero-video__bg img{
  width:100%; height:100%;
  object-fit:cover;
}
.hero-video__bg video{
  position:absolute;
  inset:0;
}
.hero-video__bg .hero-video-mobile{ display:none; }
@media (max-width: 720px){
  .hero-video__bg .hero-video-desktop{ display:none; }
  .hero-video__bg .hero-video-mobile{ display:block; }
}
.hero-video__overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(180deg, transparent 0%, transparent 35%, rgba(45,30,40,.25) 75%, rgba(45,30,40,.45) 100%);
  pointer-events:none;
}

.hero-video__content{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 20px;
  padding-top:80px;
}

.hero-video__kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 22px;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--r-pill);
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:30px;
  opacity:0;
  animation:fadeInDown 1s var(--ease-soft) .3s forwards;
}
.hero-video__kicker .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.2);
  animation:pulse 1.6s infinite;
}

/* Corner variant — top-left of hero, glassy chip that floats above video */
.hero-video__kicker--corner{
  position:absolute;
  top:120px;
  left:32px;
  z-index:4;
  margin-bottom:0;
  padding:9px 18px;
  font-size:12px;
  letter-spacing:1.5px;
  background:rgba(45,30,40,.32);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 8px 24px rgba(45,30,40,.18);
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.hero-video__kicker--corner .dot{
  width:6px; height:6px;
  background:var(--gold);
  box-shadow:0 0 0 3px rgba(212,169,96,.25);
}
@media (max-width: 720px){
  .hero-video__kicker--corner{
    top:96px;
    left:16px;
    padding:7px 14px;
    font-size:10.5px;
    letter-spacing:1px;
  }
}

.hero-video__title{
  font-size:clamp(40px, 7vw, 88px);
  font-weight:900;
  color:#fff;
  line-height:1.25;
  letter-spacing:-1px;
  margin-bottom:24px;
  text-shadow:0 4px 24px rgba(0,0,0,.4);
  opacity:0;
  animation:fadeInUp 1.2s var(--ease-soft) .6s forwards;
}
.hero-video__title em{
  font-style:normal;
  font-family:var(--font-ar-display);
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  display:block;
  margin-top:18px;
  padding-bottom:10px;
  line-height:1.35;
}

.hero-video__desc{
  font-size:clamp(15px, 1.5vw, 19px);
  color:rgba(255,255,255,.92);
  max-width:580px;
  line-height:1.8;
  margin-bottom:40px;
  text-shadow:0 2px 12px rgba(0,0,0,.3);
  opacity:0;
  animation:fadeInUp 1.2s var(--ease-soft) .9s forwards;
}

.hero-video__actions{
  display:flex; gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  opacity:0;
  animation:fadeInUp 1.2s var(--ease-soft) 1.2s forwards;
}
.hero-video__cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 36px;
  background:#fff;
  color:var(--ink);
  border-radius:var(--r-pill);
  font-weight:800;
  font-size:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.25);
  transition:.4s var(--ease-soft);
}
.hero-video__cta:hover{
  transform:translateY(-4px);
  background:var(--grad-mixed);
  color:#fff;
  box-shadow:0 20px 50px rgba(217,107,148,.45);
}
.hero-video__cta-ghost{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 36px;
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.5);
  border-radius:var(--r-pill);
  font-weight:800;
  font-size:14px;
  backdrop-filter:blur(10px);
  transition:.4s var(--ease-soft);
}
.hero-video__cta-ghost:hover{
  background:rgba(255,255,255,.15);
  border-color:#fff;
  transform:translateY(-4px);
}

/* Scroll Indicator */
.scroll-indicator{
  position:absolute;
  bottom:36px; left:50%;
  transform:translateX(-50%);
  z-index:3;
  color:#fff;
  text-align:center;
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  font-weight:700;
  opacity:.85;
  animation:fadeInUp 1s var(--ease-soft) 1.8s forwards;
  opacity:0;
}
.scroll-indicator::after{
  content:"";
  display:block;
  width:1px; height:50px;
  background:linear-gradient(180deg, #fff, transparent);
  margin:14px auto 0;
  animation:scrollLine 2s infinite;
}

@keyframes scrollLine{
  0%{ transform:translateY(0); opacity:1; }
  100%{ transform:translateY(20px); opacity:0; }
}

/* Floating Decorations */
.float-deco{
  position:absolute;
  z-index:2;
  pointer-events:none;
  opacity:.5;
  will-change:transform;
  animation:floatGently 10s ease-in-out infinite;
}
.float-deco--1{ top:22%; right:10%; font-size:28px; color:#fff; }
.float-deco--2{ top:70%; left:10%; font-size:24px; color:var(--gold); animation-delay:3s; }

@keyframes floatGently{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-15px); }
}
@keyframes fadeInDown{
  from{ opacity:0; transform:translateY(-30px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(40px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(255,255,255,.2); }
  50%{ box-shadow:0 0 0 12px rgba(255,255,255,.05); }
}

/* ============================================================
   FEATURED SLIDER (3 Banners with Ken Burns)
   ============================================================ */
.featured-slider{
  padding:100px 0;
  background:var(--bg);
  position:relative;
  overflow:hidden;
}
.featured-slider__head{
  text-align:center;
  margin-bottom:50px;
}
.featured-slider__kicker{
  display:inline-block;
  font-size:11px;
  letter-spacing:5px;
  font-weight:800;
  color:var(--gold-deep);
  text-transform:uppercase;
  margin-bottom:14px;
}
.featured-slider__title{
  font-size:clamp(32px, 4vw, 52px);
  font-weight:900;
  line-height:1.2;
}
.featured-slider__title em{
  font-style:normal;
  font-family:var(--font-ar-display);
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.slider-wrap{
  position:relative;
  width:100%;
  height:540px;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-3);
}
.slider-track{
  position:relative;
  width:100%;
  height:100%;
}
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.5s var(--ease-soft);
  z-index:1;
}
.slide.is-active{
  opacity:1;
  z-index:2;
}
.slide img{
  width:100%; height:100%;
  object-fit:cover;
  will-change:transform;
  animation:kenBurns 30s ease-in-out infinite alternate;
}
.slide:not(.is-active) img{
  animation-play-state:paused;
}
@keyframes kenBurns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.08) translate(-1%,1%); }
}

.slide__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(45,30,40,.3) 0%, rgba(45,30,40,.7) 100%);
}

.slide__content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 80px;
  z-index:3;
}
.slide__tag{
  display:inline-block;
  width:fit-content;
  padding:6px 16px;
  background:var(--grad-gold);
  color:#fff;
  border-radius:var(--r-pill);
  font-size:11px;
  font-weight:800;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:18px;
}
.slide__title{
  font-size:clamp(28px, 4vw, 56px);
  font-weight:900;
  color:#fff;
  line-height:1.15;
  margin-bottom:18px;
  max-width:500px;
  text-shadow:0 4px 20px rgba(0,0,0,.3);
}
.slide__title em{
  font-style:normal;
  font-family:var(--font-ar-display);
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.slide__desc{
  font-size:16px;
  color:rgba(255,255,255,.92);
  max-width:480px;
  line-height:1.8;
  margin-bottom:28px;
  text-shadow:0 2px 12px rgba(0,0,0,.3);
}
.slide__cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 32px;
  background:#fff;
  color:var(--ink);
  border-radius:var(--r-pill);
  font-weight:800;
  font-size:14px;
  width:fit-content;
  transition:.4s var(--ease-soft);
}
.slide__cta:hover{
  background:var(--grad-mixed);
  color:#fff;
  transform:translateX(-4px);
}

/* Slider Controls */
.slider-dots{
  position:absolute;
  bottom:30px; left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  z-index:10;
}
.slider-dot{
  width:42px; height:4px;
  background:rgba(255,255,255,.4);
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:.4s;
  border:none;
}
.slider-dot.is-active{
  background:#fff;
  width:60px;
}

.slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:54px; height:54px;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  color:#fff;
  font-size:18px;
  z-index:10;
  cursor:pointer;
  transition:.3s var(--ease-soft);
}
.slider-arrow:hover{
  background:rgba(255,255,255,.3);
  transform:translateY(-50%) scale(1.1);
}
.slider-arrow--prev{ right:24px; }
.slider-arrow--next{ left:24px; }

/* ============================================================
   STATS COUNTER
   ============================================================ */
.stats-counter{
  padding:80px 0;
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stats-counter__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:30px;
  text-align:center;
}
.stat-item{
  position:relative;
  padding:20px;
}
.stat-item:not(:last-child)::after{
  content:"";
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:1px; height:60%;
  background:linear-gradient(180deg, transparent, var(--line), transparent);
}
.stat-item__num{
  display:block;
  font-family:var(--font-en);
  font-size:clamp(38px, 4vw, 58px);
  font-weight:900;
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1;
  margin-bottom:10px;
}
.stat-item__label{
  font-size:14px;
  color:var(--ink-2);
  font-weight:700;
}

/* ============================================================
   ELITE PICKS (3 Premium Banners — Like Hair Stars)
   ============================================================ */
.elite-picks{
  padding:100px 0;
  background:var(--bg-soft);
  position:relative;
  overflow:hidden;
}
.elite-picks::before{
  content:"";
  position:absolute;
  top:-200px; right:-200px;
  width:500px; height:500px;
  background:var(--pink-100);
  border-radius:50%;
  filter:blur(100px);
  opacity:.3;
}
.elite-picks::after{
  content:"";
  position:absolute;
  bottom:-200px; left:-200px;
  width:500px; height:500px;
  background:var(--gold-soft);
  border-radius:50%;
  filter:blur(100px);
  opacity:.4;
}
.elite-picks__inner{
  position:relative;
  z-index:1;
}
.elite-picks__head{
  text-align:center;
  margin-bottom:60px;
}

.elite-picks__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:24px;
  height:520px;
}
.elite-pick{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  cursor:pointer;
  transition:.5s var(--ease-soft);
}
.elite-pick:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:var(--shadow-3);
}
.elite-pick img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease-soft);
}
.elite-pick:hover img{ transform:scale(1.1); }
.elite-pick__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(45,30,40,.8) 100%);
  transition:.4s;
}
.elite-pick:hover .elite-pick__overlay{
  background:linear-gradient(180deg, rgba(45,30,40,.3) 0%, rgba(45,30,40,.85) 100%);
}
.elite-pick__content{
  position:absolute;
  bottom:0; left:0; right:0;
  padding:36px;
  color:#fff;
  z-index:2;
}
.elite-pick__num{
  font-family:var(--font-en);
  font-size:18px;
  font-weight:900;
  color:var(--gold);
  letter-spacing:3px;
  margin-bottom:8px;
}
.elite-pick__title{
  font-size:24px;
  font-weight:900;
  margin-bottom:6px;
}
.elite-pick__desc{
  font-size:13px;
  opacity:.85;
  margin-bottom:14px;
}
.elite-pick__cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px;
  font-weight:800;
  color:#fff;
  border-bottom:1px solid #fff;
  padding-bottom:4px;
  transition:.3s;
}
.elite-pick:hover .elite-pick__cta{
  color:var(--gold);
  border-color:var(--gold);
}

/* ============================================================
   BEFORE / AFTER INTERACTIVE SLIDER
   ============================================================ */
.before-after{
  padding:100px 0;
  background:var(--bg);
  text-align:center;
}
.before-after__head{
  margin-bottom:50px;
}
.before-after__wrap{
  position:relative;
  width:100%;
  max-width:700px;
  margin:0 auto;
  aspect-ratio:4/5;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-3);
  user-select:none;
  background:var(--bg-soft);
}
.before-after__img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;
}
.before-after__after{
  clip-path:polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  transition:none;
}
.before-after__handle{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:3px;
  background:#fff;
  z-index:5;
  cursor:ew-resize;
  box-shadow:0 0 20px rgba(0,0,0,.3);
}
.before-after__handle::before{
  content:"⟷";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:50px; height:50px;
  background:#fff;
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink);
  font-size:20px;
  font-weight:900;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
}
.before-after__label{
  position:absolute;
  top:24px;
  padding:8px 18px;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(10px);
  color:#fff;
  border-radius:var(--r-pill);
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  z-index:3;
}
.before-after__label--before{ left:24px; }
.before-after__label--after{ right:24px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--ink);
  color:rgba(255,255,255,.7);
  padding:40px 0;
  text-align:center;
  font-size:13px;
}
.footer__back{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:14px;
  color:var(--gold);
  font-weight:800;
}
.footer__back:hover{ color:#fff; }

/* ============================================================
   TOPBAR — FULL (with search + icons + nav)
   ============================================================ */
.topbar-full{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(255, 249, 251, .35);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.18);
  transition:.4s;
}
.topbar-full.is-scrolled{
  background:rgba(255, 249, 251, .82);
  border-bottom-color:var(--line);
  box-shadow:0 4px 30px rgba(0,0,0,.05);
}
.topbar-full__top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:30px;
  padding:14px 0;
}
.topbar-full__left{
  display:flex; align-items:center; gap:18px;
}

/* Region selector — locked as static label (no dropdown) */
.region-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  color:var(--ink-2);
  font-size:13px;
  font-weight:700;
  cursor:default;
  pointer-events:none;
}
.region-btn i{ display:none; } /* hide chevron — not a dropdown */

/* Search box — hidden until search functionality is built */
.search-box{
  display:none;
  position:relative;
  flex:1; max-width:280px;
}
.search-box input{
  width:100%;
  padding:10px 40px 10px 16px;
  background:rgba(255,255,255,.6);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-family:inherit;
  font-size:13px;
  color:var(--ink);
  transition:.3s;
}
.search-box input:focus{
  outline:none;
  background:#fff;
  border-color:var(--pink-deep);
  box-shadow:0 0 0 4px rgba(217,107,148,.1);
}
.search-box i{
  position:absolute;
  left:14px; top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:13px;
}
/* Topbar right icons (account/wishlist/cart) — hidden until account system is built */
.topbar-full__right{
  display:none;
  align-items:center; gap:8px;
  justify-content:flex-end;
}
.icon-btn{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--ink-2);
  font-size:16px;
  transition:.3s;
  position:relative;
}
.icon-btn:hover{
  background:var(--bg-soft);
  color:var(--pink-deep);
  transform:translateY(-2px);
}
.icon-btn.cart{
  background:var(--grad-mixed);
  color:#fff;
}
.icon-btn.cart:hover{ transform:translateY(-2px) scale(1.05); }
.cart__badge{
  position:absolute;
  top:-4px; left:-4px;
  background:var(--gold);
  color:#fff;
  font-size:10px;
  font-weight:900;
  min-width:18px; height:18px;
  border-radius:50%;
  display:grid; place-items:center;
  border:2px solid var(--bg);
}

.topbar-full__nav{
  display:flex;
  justify-content:center;
  gap:36px;
  padding:10px 0 14px;
  border-top:1px solid var(--line);
}
.topbar-full__nav a{
  font-size:14px;
  font-weight:700;
  color:var(--ink-2);
  position:relative;
  padding:6px 0;
  transition:.3s;
}
.topbar-full__nav a:hover{ color:var(--pink-deep); }
.topbar-full__nav a.is-active{
  color:var(--pink-deep);
}
.topbar-full__nav a::after{
  content:""; position:absolute;
  bottom:0; left:50%; transform:translateX(-50%);
  width:0; height:2px;
  background:var(--grad-mixed);
  transition:.3s var(--ease-soft);
}
.topbar-full__nav a:hover::after,
.topbar-full__nav a.is-active::after{ width:100%; }

/* Push hero down for full topbar */
.hero-video.has-full-topbar{ margin-top:0; }
body.has-full-topbar{ padding-top:0; }

/* ============================================================
   SECTION HEAD (Shared)
   ============================================================ */
.section-head{
  text-align:center;
  margin-bottom:50px;
}
.section-head__ornament{
  display:inline-block;
  color:var(--gold);
  font-size:12px;
  letter-spacing:4px;
  margin:0 14px;
  vertical-align:middle;
}
.section-head h2{
  display:inline-block;
  font-size:clamp(30px, 4vw, 48px);
  font-weight:900;
  line-height:1.2;
  vertical-align:middle;
}
.section-head h2 em{
  font-style:normal;
  font-family:var(--font-ar-display);
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.section-sub{
  text-align:center;
  color:var(--muted);
  font-size:15px;
  margin:-30px auto 50px;
  max-width:600px;
}

/* ============================================================
   CATEGORIES (6 Cards)
   ============================================================ */
.cats{
  padding:100px 0;
  background:var(--surface);
  position:relative;
}
.cats__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.cat-card{
  position:relative;
  background:var(--surface);
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  transition:.5s var(--ease-soft);
  display:flex;
  flex-direction:column;
}
.cat-card:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-3);
  border-color:transparent;
}
.cat-card__img{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--bg-soft);
}
.cat-card__img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease-soft);
}
.cat-card:hover .cat-card__img img{ transform:scale(1.08); }
.cat-card__img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(45,30,40,.15) 100%);
}
.cat-card__body{
  padding:24px 28px 28px;
  text-align:center;
  flex:1;
  display:flex;
  flex-direction:column;
}
.cat-card__title{
  font-size:21px;
  font-weight:900;
  color:var(--ink);
  margin-bottom:6px;
}
.cat-card__desc{
  font-size:14px;
  color:var(--muted);
  margin-bottom:18px;
  flex:1;
}
.cat-card__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px;
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:var(--r-pill);
  font-weight:800;
  font-size:13px;
  transition:.4s var(--ease-soft);
  cursor:pointer;
  width:fit-content;
  margin:0 auto;
}
.cat-card:hover .cat-card__btn{
  background:var(--grad-mixed);
  color:#fff;
  border-color:transparent;
  transform:scale(1.05);
}

/* ============================================================
   FEATURES BAR (4 Features)
   ============================================================ */
.features-bar{
  padding:70px 0;
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.features-bar__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:30px;
}
.feature{
  display:flex;
  align-items:center;
  gap:16px;
  padding:8px;
}
.feature__icon{
  width:60px; height:60px;
  background:var(--grad-mixed);
  color:#fff;
  border-radius:18px;
  display:grid; place-items:center;
  font-size:22px;
  box-shadow:0 8px 24px rgba(217,107,148,.25);
  flex-shrink:0;
  transition:.4s var(--ease-soft);
}
.feature:hover .feature__icon{
  transform:rotate(-8deg) scale(1.08);
}
.feature__title{
  font-size:16px;
  font-weight:900;
  color:var(--ink);
  margin-bottom:4px;
}
.feature__text{
  font-size:13px;
  color:var(--muted);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{
  padding:100px 0;
  background:var(--surface);
  position:relative;
  overflow:hidden;
}
.testimonials::before{
  content:""; position:absolute;
  top:10%; left:-150px;
  width:400px; height:400px;
  background:var(--pink-100);
  border-radius:50%;
  filter:blur(120px);
  opacity:.4;
}
.testi-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  position:relative;
  z-index:1;
}
.testi-card{
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:36px 32px;
  border:1px solid var(--line);
  position:relative;
  transition:.4s var(--ease-soft);
}
.testi-card::before{
  content:"\201C";
  position:absolute;
  top:-20px; right:24px;
  font-family:var(--font-en);
  font-size:90px;
  color:var(--pink-100);
  line-height:1;
  font-weight:900;
}
.testi-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-2);
  border-color:transparent;
}
.testi-card__stars{
  color:var(--gold);
  font-size:16px;
  letter-spacing:3px;
  margin-bottom:16px;
}
.testi-card__text{
  font-size:15px;
  color:var(--ink-2);
  line-height:1.9;
  margin-bottom:24px;
  font-weight:500;
}
.testi-card__person{
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.testi-card__avatar{
  width:48px; height:48px;
  border-radius:50%;
  background:var(--grad-mixed);
  color:#fff;
  display:grid; place-items:center;
  font-weight:900;
  font-size:18px;
  font-family:var(--font-ar-display);
}
.testi-card__name{
  font-weight:900;
  color:var(--ink);
  font-size:14px;
}
.testi-card__role{
  font-size:12px;
  color:var(--muted);
}

/* ============================================================
   WHATSAPP BANNER
   ============================================================ */
.wa-banner{
  padding:100px 0;
  background:var(--bg);
  position:relative;
}
.wa-banner__inner{
  background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  border-radius:var(--r-xl);
  padding:60px;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:40px;
  align-items:center;
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(37,211,102,.3);
}
.wa-banner__inner::before{
  content:"";
  position:absolute;
  top:-100px; right:-100px;
  width:300px; height:300px;
  background:rgba(255,255,255,.08);
  border-radius:50%;
}
.wa-banner__inner::after{
  content:"";
  position:absolute;
  bottom:-150px; left:-150px;
  width:400px; height:400px;
  background:rgba(255,255,255,.08);
  border-radius:50%;
}
.wa-banner__content{
  color:#fff;
  position:relative;
  z-index:1;
}
.wa-banner__tag{
  display:inline-block;
  padding:8px 18px;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  border-radius:var(--r-pill);
  font-size:12px;
  font-weight:800;
  margin-bottom:18px;
  letter-spacing:1px;
}
.wa-banner__content h2{
  font-size:clamp(28px, 3.4vw, 42px);
  font-weight:900;
  margin-bottom:14px;
  line-height:1.3;
}
.wa-banner__content h2 em{
  font-style:normal;
  font-family:var(--font-ar-display);
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.15);
}
.wa-banner__content p{
  font-size:16px;
  line-height:1.9;
  margin-bottom:28px;
  opacity:.95;
  max-width:520px;
}
.btn-wa{
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 36px;
  background:#fff;
  color:#128C7E;
  border-radius:var(--r-pill);
  font-weight:900;
  font-size:15px;
  box-shadow:0 14px 40px rgba(0,0,0,.15);
  transition:.4s var(--ease-soft);
}
.btn-wa:hover{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.btn-wa i{ font-size:20px; color:#25D366; }
.wa-banner__visual{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  min-height:200px;
}
.wa-bubble{
  position:absolute;
  background:#fff;
  width:80px; height:80px;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:32px;
  box-shadow:0 14px 30px rgba(0,0,0,.15);
  animation:floatGently 4s ease-in-out infinite;
}
.wa-bubble--1{ top:0; right:30%; }
.wa-bubble--2{ top:30%; left:10%; animation-delay:1s; }
.wa-bubble--3{ bottom:0; right:10%; animation-delay:2s; }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-section{
  padding:100px 0;
  background:var(--bg-soft);
}
.faq{
  max-width:820px;
  margin:0 auto;
}
.faq-item{
  background:var(--surface);
  border-radius:var(--r-md);
  margin-bottom:14px;
  overflow:hidden;
  border:1px solid var(--line);
  transition:.3s var(--ease-soft);
}
.faq-item:hover{ border-color:var(--pink-100); }
.faq-item.is-open{
  border-color:var(--pink-deep);
  box-shadow:var(--shadow-1);
}
.faq-q{
  width:100%;
  padding:22px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-family:inherit;
  font-size:16px;
  font-weight:800;
  color:var(--ink);
  text-align:right;
  cursor:pointer;
  transition:.3s;
}
.faq-q:hover{ color:var(--pink-deep); }
.faq-q__plus{
  width:32px; height:32px;
  background:var(--grad-mixed);
  color:#fff;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:18px;
  font-weight:400;
  flex-shrink:0;
  transition:.4s var(--ease-bounce);
}
.faq-item.is-open .faq-q__plus{
  transform:rotate(135deg);
}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s var(--ease-soft);
}
.faq-item.is-open .faq-a{
  max-height:400px;
}
.faq-a__inner{
  padding:0 28px 24px;
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.9;
}
.faq-a__inner strong{ color:var(--pink-deep); }

/* ============================================================
   FOOTER (Full Multi-Column)
   ============================================================ */
.footer-full{
  background:var(--ink);
  color:rgba(255,255,255,.65);
  padding:90px 0 30px;
  font-size:14px;
  position:relative;
  overflow:hidden;
}
.footer-full::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(212,169,96,.4) 50%,
    transparent 100%);
}
.footer-full__grid{
  display:grid;
  grid-template-columns:2.2fr 1fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:50px;
  align-items:start;
}

/* Brand column */
.footer-full__brand{
  text-align:start;
}
.footer-full__brand .logo{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  margin-bottom:22px;
  line-height:1.1;
}
.footer-full__brand .logo__en{
  color:#fff;
  font-size:24px;
  letter-spacing:1.5px;
}
.footer-full__brand .logo__ar{
  color:var(--gold);
  font-size:15px;
}
.footer-full__brand p{
  font-size:14px;
  line-height:1.9;
  margin-bottom:26px;
  max-width:340px;
  color:rgba(255,255,255,.7);
}
.footer-full__socials{
  display:flex;
  gap:10px;
}
.footer-full__socials a{
  width:42px; height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  display:grid; place-items:center;
  font-size:16px;
  transition:.4s var(--ease-soft);
}
.footer-full__socials a:hover{
  background:var(--grad-mixed);
  transform:translateY(-3px);
}

/* Other columns */
.footer-full__col{
  text-align:start;
}
.footer-full h4{
  color:#fff;
  font-size:16px;
  font-weight:900;
  margin-bottom:22px;
  font-family:var(--font-ar-display);
  position:relative;
  padding-bottom:12px;
}
.footer-full h4::after{
  content:"";
  position:absolute;
  bottom:0;
  inset-inline-start:0;
  width:32px;
  height:2px;
  background:var(--grad-gold);
  border-radius:2px;
}
.footer-full ul{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-full ul li{ margin-bottom:12px; }
.footer-full ul a{
  color:rgba(255,255,255,.65);
  transition:.3s var(--ease-soft);
  display:inline-block;
  font-size:14px;
}
.footer-full ul a:hover{
  color:var(--gold);
  transform:translateX(-4px);
}
.footer-full__copy{
  text-align:center;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:13px;
  color:rgba(255,255,255,.5);
  letter-spacing:.5px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  flex-direction:column;
  line-height:1.1;
}
.logo__en{
  font-family:var(--font-en);
  font-size:20px;
  font-weight:900;
  letter-spacing:1px;
  color:var(--ink);
}
.logo__ar{
  font-family:var(--font-ar-display);
  font-size:14px;
  color:var(--gold);
  font-weight:700;
  letter-spacing:1px;
}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.float-wa{
  position:fixed;
  bottom:30px; left:30px;
  z-index:99;
  width:60px; height:60px;
  background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color:#fff;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:28px;
  box-shadow:0 14px 40px rgba(37,211,102,.5);
  animation:waPulse 2.5s infinite;
  transition:.4s var(--ease-bounce);
}
.float-wa:hover{
  transform:scale(1.1);
  animation:none;
}
@keyframes waPulse{
  0%, 100%{ box-shadow:0 14px 40px rgba(37,211,102,.5), 0 0 0 0 rgba(37,211,102,.5); }
  50%{ box-shadow:0 14px 40px rgba(37,211,102,.5), 0 0 0 20px rgba(37,211,102,0); }
}

/* ============================================================
   PRODUCT HERO (Image-based, for category pages)
   ============================================================ */
.product-hero{
  position:relative;
  height:78vh;
  min-height:600px;
  overflow:hidden;
  margin-top:0;
}
.product-hero__bg{
  position:absolute;
  inset:0;
  z-index:1;
  background:#2d2a2e;
}
.product-hero__bg img{
  width:100%; height:100%;
  object-fit:cover;
  animation:kenBurns 30s ease-in-out infinite alternate;
  will-change:transform;
}
.product-hero__overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(180deg, rgba(45,30,40,.25) 0%, rgba(45,30,40,.65) 100%),
    radial-gradient(circle at 70% 30%, rgba(217,107,148,.25), transparent 60%);
  pointer-events:none;
}
.product-hero__content{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:130px 20px 60px;
  max-width:900px;
  margin:0 auto;
}
.product-hero__breadcrumb{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-pill);
  margin-bottom:22px;
  font-size:12px;
  color:rgba(255,255,255,.9);
  font-weight:600;
  opacity:0;
  animation:fadeInDown .9s var(--ease-soft) .2s forwards;
}
.product-hero__breadcrumb a{
  color:rgba(255,255,255,.85);
  transition:.3s;
}
.product-hero__breadcrumb a:hover{ color:#fff; }
.product-hero__breadcrumb i{
  font-size:8px;
  color:var(--gold);
}
.product-hero__breadcrumb span{ color:var(--gold); font-weight:700; }

.product-hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 24px;
  background:linear-gradient(135deg, rgba(212,169,96,.25), rgba(212,169,96,.1));
  backdrop-filter:blur(10px);
  border:1px solid rgba(244,216,150,.4);
  border-radius:var(--r-pill);
  margin-bottom:28px;
  font-size:13px;
  font-weight:800;
  letter-spacing:2px;
  color:#f4d896;
  opacity:0;
  animation:fadeInDown 1s var(--ease-soft) .4s forwards;
}
.product-hero__kicker i{ font-size:13px; }

.product-hero__title{
  font-size:clamp(40px, 7vw, 92px);
  font-weight:900;
  color:#fff;
  line-height:1.15;
  letter-spacing:-1px;
  margin-bottom:24px;
  text-shadow:0 4px 28px rgba(0,0,0,.4);
  opacity:0;
  animation:fadeInUp 1.2s var(--ease-soft) .6s forwards;
}
.product-hero__title em{
  font-style:normal;
  font-family:var(--font-ar-display);
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  display:block;
  margin-top:14px;
  padding-bottom:8px;
  line-height:1.35;
  font-size:.7em;
}

.product-hero__desc{
  font-size:clamp(16px, 1.4vw, 19px);
  color:rgba(255,255,255,.92);
  max-width:680px;
  line-height:1.9;
  margin-bottom:38px;
  text-shadow:0 2px 12px rgba(0,0,0,.3);
  opacity:0;
  animation:fadeInUp 1.2s var(--ease-soft) .9s forwards;
}

.product-hero__actions{
  display:flex; gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  opacity:0;
  animation:fadeInUp 1.2s var(--ease-soft) 1.2s forwards;
}

/* ============================================================
   HIGHLIGHTS STRIP (Quick 3 benefits)
   ============================================================ */
.highlights{
  padding:70px 0;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.highlights__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
  max-width:1100px;
  margin:0 auto;
}
.highlight{
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:.4s var(--ease-soft);
  position:relative;
  overflow:hidden;
}
.highlight::before{
  content:"";
  position:absolute;
  top:0; right:0;
  width:3px; height:100%;
  background:var(--grad-gold);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .5s var(--ease-soft);
}
.highlight:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-2);
  border-color:transparent;
}
.highlight:hover::before{ transform:scaleY(1); }
.highlight__icon{
  width:60px; height:60px;
  background:linear-gradient(135deg, #fff 0%, var(--gold-soft) 100%);
  border:1.5px solid rgba(212,169,96,.4);
  border-radius:18px;
  display:grid; place-items:center;
  font-size:28px;
  flex-shrink:0;
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,.9),
    0 6px 20px rgba(212,169,96,.18);
  transition:.4s var(--ease-soft);
}
.highlight:hover .highlight__icon{
  background:var(--grad-mixed);
  border-color:transparent;
  transform:rotate(-5deg) scale(1.05);
}
.highlight__title{
  font-size:17px;
  font-weight:900;
  color:var(--ink);
  margin-bottom:4px;
}
.highlight__text{
  font-size:13px;
  color:var(--muted);
}

/* ============================================================
   GALLERY (Premium Grid with Hover Zoom + Lightbox)
   ============================================================ */
.gallery{
  padding:100px 0;
  background:var(--surface);
}
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.gallery__item{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--r-lg);
  overflow:hidden;
  cursor:pointer;
  background:var(--bg-soft);
  box-shadow:var(--shadow-1);
  transition:.5s var(--ease-soft);
}
.gallery__item:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-3);
}
.gallery__item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-soft);
}
.gallery__item:hover img{ transform:scale(1.1); }
.gallery__item::after{
  content:"\f00e";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  top:20px; left:20px;
  width:42px; height:42px;
  background:rgba(255,255,255,.95);
  color:var(--ink);
  border-radius:50%;
  display:grid; place-items:center;
  font-size:14px;
  opacity:0;
  transform:scale(.7);
  transition:.4s var(--ease-bounce);
}
.gallery__item:hover::after{
  opacity:1;
  transform:scale(1);
}

/* Lightbox */
.zoom-overlay{
  position:fixed;
  inset:0;
  background:rgba(20,15,18,.95);
  backdrop-filter:blur(10px);
  z-index:9999;
  display:grid; place-items:center;
  animation:fadeIn .3s var(--ease-soft);
}
.zoom-overlay img{
  max-width:92%;
  max-height:90vh;
  object-fit:contain;
  border-radius:var(--r-md);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.zoom-close{
  position:absolute;
  top:24px; left:24px;
  width:48px; height:48px;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  font-size:24px;
  border-radius:50%;
  cursor:pointer;
  transition:.3s var(--ease-soft);
}
.zoom-close:hover{
  background:var(--grad-mixed);
  transform:rotate(90deg);
}
@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* ============================================================
   FEATURES DETAIL (6 cards)
   ============================================================ */
.feat-list{
  padding:100px 0;
  background:var(--bg-soft);
  position:relative;
  overflow:hidden;
}
.feat-list::before{
  content:"";
  position:absolute;
  top:-150px; right:-150px;
  width:400px; height:400px;
  background:var(--pink-100);
  border-radius:50%;
  filter:blur(100px);
  opacity:.3;
}
.feat-list::after{
  content:"";
  position:absolute;
  bottom:-150px; left:-150px;
  width:400px; height:400px;
  background:var(--gold-soft);
  border-radius:50%;
  filter:blur(100px);
  opacity:.5;
}
.feat-list__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  position:relative;
  z-index:1;
}
.feat-item{
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:34px 28px;
  border:1px solid var(--line);
  transition:.5s var(--ease-soft);
  display:flex;
  align-items:flex-start;
  gap:18px;
}
.feat-item:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-2);
  border-color:transparent;
}
.feat-item__icon{
  width:58px; height:58px;
  background:linear-gradient(135deg, var(--gold-soft), #fff);
  border:1px solid rgba(212,169,96,.25);
  border-radius:18px;
  display:grid; place-items:center;
  font-size:26px;
  flex-shrink:0;
  transition:.4s var(--ease-soft);
}
.feat-item:hover .feat-item__icon{
  background:var(--grad-mixed);
  transform:rotate(-8deg) scale(1.05);
  border-color:transparent;
}
.feat-item h3{
  font-size:17px;
  font-weight:900;
  color:var(--ink);
  margin-bottom:8px;
}
.feat-item p{
  font-size:14px;
  color:var(--ink-2);
  line-height:1.8;
}

/* ============================================================
   PULL QUOTE (Luxury Statement)
   ============================================================ */
.pull-quote{
  padding:120px 0;
  background:var(--surface);
  position:relative;
  text-align:center;
}
.pull-quote__inner{
  max-width:820px;
  margin:0 auto;
  position:relative;
}
.pull-quote__mark{
  font-family:var(--font-en);
  font-size:140px;
  line-height:1;
  color:var(--gold);
  opacity:.4;
  margin-bottom:-30px;
  font-weight:900;
}
.pull-quote__text{
  font-family:var(--font-ar-display);
  font-size:clamp(22px, 2.6vw, 36px);
  font-weight:600;
  color:var(--ink);
  line-height:1.7;
}
.pull-quote__text em{
  font-style:normal;
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.pull-quote__line{
  display:block;
  width:60px; height:2px;
  background:var(--grad-gold);
  margin:30px auto 0;
}

/* ============================================================
   PRODUCT CTA BANNER
   ============================================================ */
.product-cta{
  padding:80px 0 120px;
  background:var(--bg);
}
.product-cta__inner{
  background:linear-gradient(135deg, #d96b94 0%, #b76b8b 50%, #d4a960 100%);
  border-radius:var(--r-xl);
  padding:70px 60px;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(217,107,148,.3);
}
.product-cta__inner::before{
  content:"";
  position:absolute;
  top:-100px; right:-100px;
  width:300px; height:300px;
  background:rgba(255,255,255,.08);
  border-radius:50%;
}
.product-cta__inner::after{
  content:"";
  position:absolute;
  bottom:-150px; left:-150px;
  width:400px; height:400px;
  background:rgba(255,255,255,.08);
  border-radius:50%;
}
.product-cta__tag{
  display:inline-block;
  padding:8px 18px;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  border-radius:var(--r-pill);
  font-size:12px;
  font-weight:800;
  margin-bottom:20px;
  color:#fff;
  position:relative;
  z-index:1;
}
.product-cta h2{
  font-size:clamp(28px, 3.4vw, 44px);
  font-weight:900;
  color:#fff;
  margin-bottom:18px;
  line-height:1.3;
  position:relative;
  z-index:1;
}
.product-cta h2 em{
  font-style:normal;
  font-family:var(--font-ar-display);
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.15);
}
.product-cta p{
  font-size:16px;
  line-height:1.9;
  margin:0 auto 36px;
  color:#fff;
  opacity:.95;
  max-width:580px;
  position:relative;
  z-index:1;
}
.product-cta__actions{
  display:flex; gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  position:relative;
  z-index:1;
}
.product-cta__btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 36px;
  border-radius:var(--r-pill);
  font-weight:900;
  font-size:14px;
  transition:.4s var(--ease-soft);
}
.product-cta__btn--primary{
  background:#fff;
  color:#b76b8b;
  box-shadow:0 14px 40px rgba(0,0,0,.15);
}
.product-cta__btn--primary:hover{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.product-cta__btn--wa{
  background:#25D366;
  color:#fff;
  box-shadow:0 14px 40px rgba(37,211,102,.4);
}
.product-cta__btn--wa:hover{
  transform:translateY(-4px) scale(1.03);
  background:#128C7E;
}

/* ============================================================
   TECH EXPLAINER (What is HD? - 2-column with close-up image)
   ============================================================ */
.tech-explainer{
  padding:100px 0;
  background:var(--bg);
  position:relative;
  overflow:hidden;
}
.tech-explainer::before{
  content:"";
  position:absolute;
  top:50%; right:-200px;
  width:500px; height:500px;
  background:var(--pink-100);
  border-radius:50%;
  filter:blur(120px);
  opacity:.25;
  transform:translateY(-50%);
}
.tech-explainer__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  position:relative;
  z-index:1;
}
.tech-explainer__image{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-3);
}
.tech-explainer__image img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease-soft);
}
.tech-explainer__image:hover img{ transform:scale(1.05); }
.tech-explainer__image::after{
  content:"HD TECHNOLOGY";
  position:absolute;
  bottom:24px; right:24px;
  padding:8px 16px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-radius:var(--r-pill);
  font-family:var(--font-en);
  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
  color:var(--gold-deep);
}
.tech-explainer__content h3{
  font-size:clamp(28px, 3.4vw, 42px);
  font-weight:900;
  line-height:1.3;
  margin-bottom:14px;
  color:var(--ink);
}
.tech-explainer__content h3 em{
  font-style:normal;
  font-family:var(--font-ar-display);
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.tech-explainer__intro{
  font-size:15px;
  color:var(--ink-2);
  line-height:1.9;
  margin-bottom:30px;
}
.tech-explainer__points{
  list-style:none;
  padding:0;
  margin:0;
}
.tech-explainer__point{
  display:flex;
  gap:16px;
  margin-bottom:16px;
  padding:20px;
  background:var(--surface);
  border-radius:var(--r-md);
  border:1px solid var(--line);
  transition:.4s var(--ease-soft);
}
.tech-explainer__point:hover{
  border-color:var(--pink-deep);
  transform:translateX(-4px);
  box-shadow:var(--shadow-1);
}
.tech-explainer__point-num{
  width:42px; height:42px;
  background:var(--grad-mixed);
  color:#fff;
  border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-en);
  font-size:15px;
  font-weight:900;
  flex-shrink:0;
}
.tech-explainer__point strong{
  display:block;
  color:var(--ink);
  margin-bottom:4px;
  font-size:15px;
  font-weight:900;
}
.tech-explainer__point span{
  font-size:13.5px;
  color:var(--ink-2);
  line-height:1.7;
}

/* ============================================================
   USE CASES (When to choose HD? — 4 scenarios)
   ============================================================ */
.use-cases{
  padding:100px 0;
  background:var(--bg-soft);
  position:relative;
  overflow:hidden;
}
.use-cases::before{
  content:"";
  position:absolute;
  top:-150px; left:-150px;
  width:400px; height:400px;
  background:var(--gold-soft);
  border-radius:50%;
  filter:blur(120px);
  opacity:.5;
}
.use-cases__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
  position:relative;
  z-index:1;
}
.use-case{
  position:relative;
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:36px 24px;
  text-align:center;
  border:1px solid var(--line);
  transition:.5s var(--ease-soft);
  overflow:hidden;
  cursor:default;
}
.use-case::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--grad-mixed);
  opacity:0;
  transition:.4s;
  z-index:0;
}
.use-case:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-3);
  border-color:transparent;
}
.use-case:hover::before{ opacity:1; }
.use-case > *{ position:relative; z-index:1; }
.use-case__icon{
  width:72px; height:72px;
  margin:0 auto 20px;
  background:linear-gradient(135deg, var(--gold-soft), #fff);
  border:1px solid rgba(212,169,96,.25);
  border-radius:50%;
  display:grid; place-items:center;
  font-size:34px;
  transition:.4s;
}
.use-case:hover .use-case__icon{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.4);
  transform:scale(1.1);
}
.use-case h3{
  font-size:18px;
  font-weight:900;
  margin-bottom:12px;
  color:var(--ink);
  transition:.4s;
}
.use-case p{
  font-size:13.5px;
  color:var(--ink-2);
  line-height:1.8;
  transition:.4s;
}
.use-case:hover h3,
.use-case:hover p{ color:#fff; }

/* ============================================================
   COMPARISON TABLE (HD vs other types)
   ============================================================ */
.comparison{
  padding:100px 0;
  background:var(--surface);
}
.comparison__table{
  max-width:1000px;
  margin:0 auto;
  background:var(--surface);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-2);
  border:1px solid var(--line);
}
.comparison__row{
  display:grid;
  grid-template-columns:1.4fr 1.1fr 1fr 1fr 1fr;
  border-bottom:1px solid var(--line);
}
.comparison__row:last-child{ border-bottom:none; }
.comparison__row--header{
  background:var(--ink);
  color:#fff;
}
.comparison__cell{
  padding:18px 14px;
  font-size:13.5px;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.5;
}
.comparison__cell:first-child{
  text-align:start;
  font-weight:800;
  background:var(--bg-soft);
  color:var(--ink);
}
.comparison__row--header .comparison__cell{
  font-weight:900;
  padding:22px 14px;
}
.comparison__row--header .comparison__cell:first-child{
  background:var(--ink);
  color:#fff;
}
.comparison__cell--hd{
  background:linear-gradient(135deg, rgba(212,169,96,.12), rgba(217,107,148,.08));
  font-weight:900;
  color:var(--pink-deep);
  position:relative;
}
.comparison__row--header .comparison__cell--hd{
  background:var(--grad-mixed);
  color:#fff;
  position:relative;
}
.comparison__row--header .comparison__cell--hd::before{
  content:"★";
  position:absolute;
  top:6px; right:8px;
  color:var(--gold);
  font-size:14px;
}
.comparison__star{
  color:var(--gold);
  letter-spacing:3px;
  font-size:14px;
}
.comparison__row:not(.comparison__row--header):hover{
  background:rgba(217,107,148,.03);
}
.comparison__row:not(.comparison__row--header):hover .comparison__cell:first-child{
  background:rgba(217,107,148,.08);
}

/* ============================================================
   RESPONSIVE for new HD sections
   ============================================================ */
@media (max-width: 1000px){
  .tech-explainer__grid{ grid-template-columns:1fr; gap:40px; }
  .tech-explainer__image{
    aspect-ratio:auto;
    max-height:520px;
    max-width:480px;
    margin:0 auto;
  }
  .use-cases__grid{ grid-template-columns:repeat(2, 1fr); gap:16px; }
}
@media (max-width: 640px){
  .use-cases__grid{ grid-template-columns:1fr; }
  .tech-explainer__image{
    max-height:420px;
    max-width:100%;
  }
  .tech-explainer__image img{
    object-fit:cover;
    object-position:center top;
  }
  .tech-explainer__image::after{ font-size:9px; padding:6px 12px; }
  .highlight{ padding:18px 16px; }
  .highlight__icon{ width:54px; height:54px; font-size:24px; }
}

/* ============================================================
   RELATED PRODUCTS
   ============================================================ */
.related-products{
  padding:100px 0;
  background:var(--bg-soft);
}
.related-products__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

/* ============================================================
   PRODUCT PAGES — Responsive
   ============================================================ */
@media (max-width: 1000px){
  .product-hero{ height:auto; min-height:auto; padding-bottom:60px; }
  .product-hero__content{ padding-top:140px; }
  .highlights__grid{ grid-template-columns:1fr; gap:14px; }
  .gallery__grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
  .feat-list__grid{ grid-template-columns:1fr; gap:18px; }
  .related-products__grid{ grid-template-columns:1fr; }
  .product-cta__inner{ padding:50px 30px; }
}
@media (max-width: 640px){
  .gallery__grid{ grid-template-columns:1fr; }
  .product-hero__title{ font-size:clamp(34px, 9vw, 60px); }
  .pull-quote{ padding:80px 0; }
  .pull-quote__mark{ font-size:100px; }
}

/* ============================================================
   BLOG INDEX — Hero
   ============================================================ */
.blog-hero{
  position:relative;
  padding:160px 0 80px;
  background:
    radial-gradient(circle at 20% 30%, rgba(217,107,148,.12), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212,169,96,.1), transparent 50%),
    var(--bg);
  overflow:hidden;
}
.blog-hero::before{
  content:"";
  position:absolute;
  top:50%; left:-200px;
  width:500px; height:500px;
  background:var(--pink-100);
  border-radius:50%;
  filter:blur(120px);
  opacity:.4;
  transform:translateY(-50%);
}
.blog-hero__inner{
  position:relative;
  z-index:1;
  text-align:center;
  max-width:820px;
  margin:0 auto;
}
.blog-hero__breadcrumb{
  display:flex;
  width:fit-content;
  margin:0 auto 24px;
  align-items:center;
  gap:10px;
  padding:7px 16px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:12px;
  color:var(--ink-2);
  font-weight:700;
}
.blog-hero__breadcrumb a{
  color:var(--ink-2);
  transition:.3s;
}
.blog-hero__breadcrumb a:hover{ color:var(--pink-deep); }
.blog-hero__breadcrumb i{ font-size:8px; color:var(--gold); }
.blog-hero__breadcrumb span{ color:var(--pink-deep); font-weight:800; }

.blog-hero__kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:6px;
  font-weight:800;
  color:var(--gold-deep);
  margin-bottom:18px;
  text-transform:uppercase;
}
.blog-hero__title{
  font-size:clamp(36px, 5.5vw, 68px);
  font-weight:900;
  line-height:1.2;
  margin-bottom:24px;
  color:var(--ink);
}
.blog-hero__title em{
  font-style:normal;
  font-family:var(--font-ar-display);
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.blog-hero__desc{
  font-size:17px;
  color:var(--ink-2);
  line-height:1.9;
  margin-bottom:36px;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}
.blog-search{
  position:relative;
  max-width:520px;
  margin:0 auto 30px;
  background:var(--surface);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-2);
  display:flex;
  padding:6px;
  border:1px solid var(--line);
  transition:.3s;
}
.blog-search:focus-within{
  border-color:var(--pink-deep);
  box-shadow:0 0 0 4px rgba(217,107,148,.1), var(--shadow-2);
}
.blog-search__input{
  flex:1;
  border:none;
  background:transparent;
  padding:14px 20px;
  font-family:inherit;
  font-size:14px;
  color:var(--ink);
  outline:none;
}
.blog-search__input::placeholder{ color:var(--muted); }
.blog-search__btn{
  width:48px; height:48px;
  background:var(--grad-mixed);
  color:#fff;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:15px;
  cursor:pointer;
  transition:.3s var(--ease-soft);
}
.blog-search__btn:hover{
  transform:rotate(-10deg) scale(1.05);
}

/* Filters */
.blog-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:24px;
}
.blog-filter{
  padding:9px 20px;
  background:transparent;
  border:1.5px solid var(--line);
  border-radius:var(--r-pill);
  color:var(--ink-2);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:.4s var(--ease-soft);
  font-family:inherit;
}
.blog-filter:hover{
  border-color:var(--pink-deep);
  color:var(--pink-deep);
  transform:translateY(-2px);
}
.blog-filter.is-active{
  background:var(--grad-mixed);
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 20px rgba(217,107,148,.3);
}

/* ============================================================
   FEATURED BLOG ARTICLE
   ============================================================ */
.featured-blog{
  padding:60px 0 30px;
  background:var(--bg);
}
.featured-blog__card{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:0;
  background:var(--surface);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-2);
  transition:.5s var(--ease-soft);
}
.featured-blog__card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-3);
}
.featured-blog__img{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
}
.featured-blog__img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease-soft);
}
.featured-blog__card:hover .featured-blog__img img{ transform:scale(1.08); }
.featured-blog__badge{
  position:absolute;
  top:24px; right:24px;
  padding:8px 16px;
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  color:#fff;
  border-radius:var(--r-pill);
  font-size:12px;
  font-weight:900;
  box-shadow:0 8px 20px rgba(212,169,96,.4);
  z-index:1;
}
.featured-blog__body{
  padding:50px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.featured-blog__meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--muted);
  margin-bottom:18px;
  flex-wrap:wrap;
}
.featured-blog__meta .sep{
  width:4px; height:4px;
  background:var(--gold);
  border-radius:50%;
}
.featured-blog__cat{
  color:var(--pink-deep);
  font-weight:900;
}
.featured-blog__title{
  font-size:clamp(24px, 2.6vw, 34px);
  font-weight:900;
  line-height:1.35;
  margin-bottom:18px;
}
.featured-blog__title a{
  color:var(--ink);
  transition:.3s;
}
.featured-blog__title a:hover{
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.featured-blog__excerpt{
  font-size:15px;
  color:var(--ink-2);
  line-height:1.9;
  margin-bottom:26px;
}
.featured-blog__cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 30px;
  background:var(--grad-mixed);
  color:#fff;
  border-radius:var(--r-pill);
  font-weight:900;
  font-size:14px;
  width:fit-content;
  box-shadow:0 10px 30px rgba(217,107,148,.3);
  transition:.4s var(--ease-soft);
}
.featured-blog__cta:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 40px rgba(217,107,148,.45);
}

/* ============================================================
   ARTICLES SECTION + GRID
   ============================================================ */
.articles-section{
  padding:80px 0 100px;
  background:var(--bg);
}
.articles-section__head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:40px;
  flex-wrap:wrap;
  gap:20px;
}
.articles-section__head h2{
  font-size:clamp(26px, 3vw, 38px);
  font-weight:900;
  line-height:1.3;
  margin-bottom:6px;
}
.articles-section__head h2 em{
  font-style:normal;
  font-family:var(--font-ar-display);
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.articles-section__head p{
  color:var(--muted);
  font-size:14px;
}
.view-all-link{
  font-size:14px;
  font-weight:800;
  color:var(--pink-deep);
  padding:8px 18px;
  border:1.5px solid var(--pink-deep);
  border-radius:var(--r-pill);
  transition:.4s var(--ease-soft);
}
.view-all-link:hover{
  background:var(--grad-mixed);
  color:#fff;
  border-color:transparent;
  transform:translateY(-2px);
}

.articles-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.article-card{
  background:var(--surface);
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  transition:.5s var(--ease-soft);
  display:flex;
  flex-direction:column;
}
.article-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-3);
  border-color:transparent;
}
.article-card__img{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--bg-soft);
  display:block;
}
.article-card__img img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;
  transition:transform 1s var(--ease-soft);
}
.article-card:hover .article-card__img img{ transform:scale(1.08); }
.article-card__cat{
  position:absolute;
  top:14px; right:14px;
  padding:6px 14px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  color:var(--pink-deep);
  border-radius:var(--r-pill);
  font-size:11px;
  font-weight:900;
  z-index:1;
}
.article-card__body{
  padding:22px 24px 24px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.article-card__meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  color:var(--muted);
  margin-bottom:12px;
}
.article-card__meta .sep{
  width:3px; height:3px;
  background:var(--gold);
  border-radius:50%;
}
.article-card__title{
  font-size:17px;
  font-weight:900;
  line-height:1.45;
  margin-bottom:12px;
  flex:1;
}
.article-card__title a{
  color:var(--ink);
  transition:.3s;
}
.article-card__title a:hover{ color:var(--pink-deep); }
.article-card__excerpt{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.8;
  margin-bottom:18px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.article-card__footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.article-card__read{
  font-size:13px;
  font-weight:800;
  color:var(--pink-deep);
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:.3s var(--ease-soft);
}
.article-card__read:hover{
  color:var(--gold-deep);
  transform:translateX(-3px);
}
.article-card__time{
  font-size:11px;
  color:var(--muted);
  font-weight:700;
}

/* ============================================================
   NEWSLETTER BLOG
   ============================================================ */
.newsletter-blog{
  padding:80px 0 120px;
  background:var(--bg);
}
.newsletter-blog__inner{
  background:
    linear-gradient(135deg, var(--ink) 0%, #4a3942 100%);
  border-radius:var(--r-xl);
  padding:70px 50px;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-3);
}
.newsletter-blog__inner::before{
  content:"";
  position:absolute;
  top:-150px; right:-150px;
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(217,107,148,.3), transparent 70%);
  border-radius:50%;
}
.newsletter-blog__inner::after{
  content:"";
  position:absolute;
  bottom:-150px; left:-150px;
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(212,169,96,.2), transparent 70%);
  border-radius:50%;
}
.newsletter-blog__title{
  font-size:clamp(26px, 3.2vw, 40px);
  font-weight:900;
  color:#fff;
  line-height:1.3;
  margin-bottom:14px;
  position:relative;
  z-index:1;
}
.newsletter-blog__title em{
  font-style:normal;
  font-family:var(--font-ar-display);
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.newsletter-blog__desc{
  font-size:15px;
  color:rgba(255,255,255,.8);
  line-height:1.9;
  margin:0 auto 32px;
  max-width:520px;
  position:relative;
  z-index:1;
}
.newsletter-blog__form{
  display:flex;
  max-width:520px;
  margin:0 auto;
  gap:0;
  padding:6px;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.2);
  position:relative;
  z-index:1;
}
.newsletter-blog__form input{
  flex:1;
  border:none;
  background:transparent;
  padding:14px 20px;
  color:#fff;
  font-family:inherit;
  font-size:14px;
  outline:none;
}
.newsletter-blog__form input::placeholder{ color:rgba(255,255,255,.5); }
.newsletter-blog__form button{
  padding:14px 28px;
  background:var(--grad-mixed);
  color:#fff;
  border-radius:var(--r-pill);
  font-family:inherit;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  border:none;
  transition:.4s var(--ease-soft);
  white-space:nowrap;
}
.newsletter-blog__form button:hover{
  transform:scale(1.03);
  box-shadow:0 8px 20px rgba(217,107,148,.4);
}

/* ============================================================
   BLOG — Responsive
   ============================================================ */
@media (max-width: 1000px){
  .blog-hero{ padding:130px 0 60px; }
  .featured-blog__card{ grid-template-columns:1fr; }
  .featured-blog__body{ padding:36px 28px; }
  .articles-grid{ grid-template-columns:repeat(2, 1fr); gap:18px; }
  .articles-section__head{ flex-direction:column; align-items:flex-start; }
  .newsletter-blog__inner{ padding:50px 30px; }
  .newsletter-blog__form{ flex-direction:column; padding:14px; gap:10px; background:transparent; border:none; }
  .newsletter-blog__form input{ background:rgba(255,255,255,.1); border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.2); }
}
@media (max-width: 640px){
  .articles-grid{ grid-template-columns:1fr; }
  .blog-search{ flex-direction:row; }
  .blog-filters{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:8px; }
  .blog-filter{ white-space:nowrap; flex-shrink:0; }
}

/* ============================================================
   ARTICLE PAGES (Pillar articles + blog posts)
   ============================================================ */

/* Reading progress bar at very top */
.read-progress{
  position:fixed;
  top:0; left:0;
  height:3px;
  width:0;
  background:var(--grad-mixed);
  z-index:101;
  transition:width .1s linear;
  box-shadow:0 0 12px rgba(217,107,148,.4);
}

/* Article Hero */
.article-hero{
  padding:130px 0 60px;
  background:
    radial-gradient(circle at 80% 20%, rgba(217,107,148,.1), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(212,169,96,.08), transparent 50%),
    var(--bg);
  position:relative;
  overflow:hidden;
}
.article-hero__inner{
  position:relative;
  z-index:1;
  text-align:center;
  max-width:820px;
  margin:0 auto;
}
.article-hero__breadcrumb{
  display:flex;
  width:fit-content;
  margin:0 auto 20px;
  align-items:center;
  gap:10px;
  padding:7px 16px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:12px;
  color:var(--ink-2);
  font-weight:700;
}
.article-hero__breadcrumb a{
  color:var(--ink-2);
  transition:.3s;
}
.article-hero__breadcrumb a:hover{ color:var(--pink-deep); }
.article-hero__breadcrumb i{ font-size:8px; color:var(--gold); }
.article-hero__breadcrumb span{ color:var(--pink-deep); font-weight:800; }

.article-hero__cat{
  display:block;
  width:fit-content;
  margin:0 auto 24px;
  padding:8px 22px;
  background:var(--grad-mixed);
  color:#fff;
  border-radius:var(--r-pill);
  font-size:12px;
  font-weight:900;
  letter-spacing:1px;
  box-shadow:0 10px 25px rgba(217,107,148,.3);
}

.article-hero__title{
  font-size:clamp(30px, 4.5vw, 56px);
  font-weight:900;
  line-height:1.3;
  margin-bottom:26px;
  color:var(--ink);
}
.article-hero__title em{
  font-style:normal;
  font-family:var(--font-ar-display);
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.article-hero__meta{
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:center;
  font-size:13px;
  color:var(--ink-2);
  margin-bottom:36px;
  flex-wrap:wrap;
}
.article-hero__meta .sep{
  width:4px; height:4px;
  background:var(--gold);
  border-radius:50%;
}
.article-hero__author{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.article-hero__avatar{
  width:34px; height:34px;
  border-radius:50%;
  background:var(--grad-mixed);
  color:#fff;
  display:grid; place-items:center;
  font-weight:900;
  font-size:14px;
  font-family:var(--font-ar-display);
}
.article-hero__author-name{
  font-weight:800;
  color:var(--ink);
}

.article-hero__cover{
  margin-top:20px;
  max-width:1000px;
  margin-left:auto; margin-right:auto;
  aspect-ratio:16/9;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-3);
}
.article-hero__cover img{
  width:100%; height:100%;
  object-fit:cover;
}

/* Article Body Container */
.article-body{
  padding:60px 0 80px;
  background:var(--surface);
}
.article-body__layout{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:60px;
  max-width:1100px;
  margin:0 auto;
}

/* Table of Contents — sticky sidebar */
.article-toc{
  position:sticky;
  top:140px;
  align-self:start;
  padding:24px 22px;
  background:var(--bg-soft);
  border-radius:var(--r-md);
  border:1px solid var(--line);
}
.article-toc__title{
  font-size:13px;
  font-weight:900;
  color:var(--gold-deep);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.article-toc__list{
  list-style:none;
  padding:0;
  margin:0;
}
.article-toc__list li{
  margin-bottom:10px;
  font-size:13px;
}
.article-toc__list a{
  color:var(--ink-2);
  transition:.3s var(--ease-soft);
  display:block;
  padding:6px 10px;
  border-radius:8px;
  line-height:1.5;
}
.article-toc__list a:hover{
  background:var(--surface);
  color:var(--pink-deep);
  padding-inline-start:14px;
}
.article-toc__list a.is-active{
  background:var(--surface);
  color:var(--pink-deep);
  font-weight:900;
  box-shadow:var(--shadow-1);
}

/* Article Content */
.article-content{
  max-width:760px;
  font-size:17px;
  line-height:2;
  color:var(--ink-2);
}
.article-content > p{
  margin-bottom:24px;
}

/* Drop Cap on first paragraph */
.article-content > p:first-of-type::first-letter{
  font-family:var(--font-ar-display);
  font-size:72px;
  font-weight:900;
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  float:right;
  line-height:1;
  margin-left:14px;
  margin-top:4px;
}

/* Article Headings */
.article-content h2{
  font-size:clamp(24px, 2.6vw, 32px);
  font-weight:900;
  color:var(--ink);
  line-height:1.4;
  margin:50px 0 20px;
  position:relative;
  padding-bottom:14px;
}
.article-content h2::after{
  content:"";
  position:absolute;
  bottom:0;
  inset-inline-start:0;
  width:50px;
  height:3px;
  background:var(--grad-gold);
  border-radius:3px;
}
.article-content h3{
  font-size:clamp(19px, 2vw, 22px);
  font-weight:900;
  color:var(--ink);
  line-height:1.5;
  margin:36px 0 14px;
}

/* Article Lists */
.article-content ul,
.article-content ol{
  margin:0 24px 24px 0;
  padding-inline-start:24px;
}
.article-content ul li,
.article-content ol li{
  margin-bottom:10px;
}
.article-content ul{ list-style:none; padding:0; }
.article-content ul li{
  padding-inline-start:30px;
  position:relative;
}
.article-content ul li::before{
  content:"◆";
  position:absolute;
  inset-inline-start:0;
  color:var(--gold);
  font-size:14px;
  top:6px;
}
.article-content ol{
  list-style:none;
  counter-reset:item;
  padding:0;
}
.article-content ol li{
  padding-inline-start:46px;
  position:relative;
  counter-increment:item;
}
.article-content ol li::before{
  content:counter(item, decimal);
  position:absolute;
  inset-inline-start:0;
  top:0;
  width:30px; height:30px;
  background:var(--grad-mixed);
  color:#fff;
  border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-en);
  font-size:14px;
  font-weight:900;
}

/* Strong/Bold */
.article-content strong{
  color:var(--ink);
  font-weight:900;
}
.article-content em{
  font-style:normal;
  font-family:var(--font-ar-display);
  color:var(--pink-deep);
}

/* Tip / Highlight Box */
.article-tip{
  background:linear-gradient(135deg, rgba(212,169,96,.08), rgba(217,107,148,.04));
  border-inline-start:4px solid var(--gold);
  border-radius:var(--r-md);
  padding:24px 28px;
  margin:30px 0;
  position:relative;
}
.article-tip__label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:900;
  color:var(--gold-deep);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:10px;
}
.article-tip p{
  margin:0;
  font-size:15.5px;
  line-height:1.85;
  color:var(--ink-2);
}

/* Pull Quote in articles */
.article-quote{
  background:var(--bg-soft);
  border-radius:var(--r-lg);
  padding:40px 50px;
  margin:40px 0;
  text-align:center;
  position:relative;
}
.article-quote::before{
  content:"\201C";
  position:absolute;
  top:-20px;
  inset-inline-end:30px;
  font-family:var(--font-en);
  font-size:100px;
  color:var(--pink-100);
  line-height:1;
  font-weight:900;
}
.article-quote p{
  font-family:var(--font-ar-display);
  font-size:clamp(18px, 2.2vw, 24px);
  line-height:1.7;
  color:var(--ink);
  margin:0;
  font-weight:600;
}
.article-quote em{
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-family:inherit;
}

/* Article Images with captions */
.article-figure{
  margin:36px 0;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-1);
}
.article-figure img{
  width:100%;
  display:block;
}
.article-figure figcaption{
  padding:14px 20px;
  font-size:13px;
  color:var(--muted);
  text-align:center;
  background:var(--bg-soft);
  font-style:italic;
}

/* Comparison Table in articles */
.article-table{
  width:100%;
  border-collapse:collapse;
  margin:30px 0;
  background:var(--surface);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--shadow-1);
  font-size:14.5px;
}
.article-table thead{
  background:var(--ink);
  color:#fff;
}
.article-table th{
  padding:14px 16px;
  font-weight:900;
  text-align:start;
}
.article-table td{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.article-table tr:last-child td{ border-bottom:none; }
.article-table tr:hover td{ background:var(--bg-soft); }

/* Author Card */
.article-author{
  padding:60px 0;
  background:var(--bg);
}
.article-author__card{
  max-width:760px;
  margin:0 auto;
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:32px;
  display:flex;
  gap:24px;
  align-items:center;
  border:1px solid var(--line);
  box-shadow:var(--shadow-1);
}
.article-author__avatar{
  width:80px; height:80px;
  border-radius:50%;
  background:var(--grad-mixed);
  color:#fff;
  display:grid; place-items:center;
  font-size:32px;
  font-weight:900;
  font-family:var(--font-ar-display);
  flex-shrink:0;
  box-shadow:0 10px 30px rgba(217,107,148,.25);
}
.article-author__info h4{
  font-size:18px;
  font-weight:900;
  color:var(--ink);
  margin-bottom:4px;
}
.article-author__info .role{
  font-size:12px;
  color:var(--gold-deep);
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:10px;
}
.article-author__info p{
  font-size:14px;
  line-height:1.8;
  color:var(--ink-2);
  margin:0;
}

/* Related Articles */
.article-related{
  padding:80px 0;
  background:var(--bg-soft);
}

/* Article CTA at end */
.article-cta{
  padding:60px 0;
  background:var(--bg);
}
.article-cta__inner{
  background:linear-gradient(135deg, #d96b94 0%, #b76b8b 50%, #d4a960 100%);
  border-radius:var(--r-xl);
  padding:60px 50px;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-3);
  max-width:900px;
  margin:0 auto;
}
.article-cta h3{
  font-size:clamp(24px, 2.8vw, 34px);
  font-weight:900;
  color:#fff;
  margin-bottom:14px;
}
.article-cta p{
  font-size:15px;
  color:rgba(255,255,255,.95);
  line-height:1.9;
  margin-bottom:28px;
  max-width:520px;
  margin-left:auto; margin-right:auto;
}
.article-cta__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 36px;
  background:#fff;
  color:var(--pink-deep);
  border-radius:var(--r-pill);
  font-weight:900;
  font-size:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.15);
  transition:.4s var(--ease-soft);
}
.article-cta__btn:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}

/* ============================================================
   Articles — Responsive
   ============================================================ */
@media (max-width: 1000px){
  .article-body__layout{
    grid-template-columns:1fr;
    gap:30px;
  }
  .article-toc{
    position:static;
    margin-bottom:0;
  }
  .article-content{ font-size:16px; }
  .article-content > p:first-of-type::first-letter{ font-size:56px; }
  .article-quote{ padding:30px 26px; }
  .article-author__card{ flex-direction:column; text-align:center; }
  .article-cta__inner{ padding:40px 28px; }
}
@media (max-width: 640px){
  .article-hero{ padding:110px 0 40px; }
  .article-content{ font-size:15.5px; line-height:1.95; }
  .article-content h2{ margin:36px 0 16px; }
  .article-tip{ padding:20px; }
  .article-table{ font-size:12.5px; }
  .article-table th, .article-table td{ padding:10px 8px; }
}

/* ============================================================
   CITY PAGES (Local SEO landing pages)
   ============================================================ */
.city-hero{
  padding:160px 0 80px;
  background:
    radial-gradient(circle at 70% 20%, rgba(217,107,148,.15), transparent 50%),
    radial-gradient(circle at 30% 80%, rgba(212,169,96,.12), transparent 50%),
    var(--bg);
  position:relative;
  overflow:hidden;
}
.city-hero__inner{
  position:relative; z-index:1;
  text-align:center;
  max-width:880px;
  margin:0 auto;
}
.city-hero__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 22px;
  background:linear-gradient(135deg, var(--gold-soft), #fff);
  border:1.5px solid rgba(212,169,96,.4);
  border-radius:var(--r-pill);
  font-size:13px;
  font-weight:900;
  color:var(--gold-deep);
  margin-bottom:24px;
  letter-spacing:1px;
}
.city-hero__title{
  font-size:clamp(36px, 5.5vw, 70px);
  font-weight:900;
  line-height:1.2;
  margin-bottom:24px;
  color:var(--ink);
}
.city-hero__title em{
  font-style:normal;
  font-family:var(--font-ar-display);
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.city-hero__sub{
  font-size:clamp(18px, 2vw, 22px);
  color:var(--ink-2);
  font-weight:700;
  margin-bottom:18px;
}
.city-hero__desc{
  font-size:16px;
  color:var(--muted);
  line-height:1.9;
  max-width:680px;
  margin:0 auto 30px;
}
.city-hero__features{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.city-hero__feature{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:13px;
  font-weight:800;
  color:var(--ink-2);
}
.city-hero__feature i{ color:var(--gold-deep); }

/* Why Us section for city */
.city-why{
  padding:80px 0;
  background:var(--surface);
}
.city-why__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.city-why__item{
  text-align:center;
  padding:30px 24px;
  background:var(--bg);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  transition:.4s var(--ease-soft);
}
.city-why__item:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-2);
  border-color:transparent;
}
.city-why__icon{
  width:60px; height:60px;
  margin:0 auto 16px;
  background:var(--grad-mixed);
  color:#fff;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:22px;
  box-shadow:0 8px 20px rgba(217,107,148,.25);
}
.city-why__title{
  font-size:16px;
  font-weight:900;
  color:var(--ink);
  margin-bottom:8px;
}
.city-why__text{
  font-size:13px;
  color:var(--muted);
  line-height:1.7;
}

/* Visit Banner — luxury invitation card */
.visit-banner{
  padding:80px 0 60px;
  background:var(--bg);
}
.visit-banner__card{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  border-radius:var(--r-xl);
  overflow:hidden;
  aspect-ratio:16/9;
  max-height:560px;
  box-shadow:
    0 30px 80px rgba(217,107,148,.25),
    0 0 0 8px rgba(255,255,255,.5),
    0 0 0 9px rgba(212,169,96,.4);
  display:block;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  transition:transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
.visit-banner__card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 40px 100px rgba(217,107,148,.35),
    0 0 0 8px rgba(255,255,255,.6),
    0 0 0 9px rgba(212,169,96,.6);
}
.visit-banner__card:hover .visit-banner__bg img{
  transform:scale(1.03);
  transition:transform 1.2s var(--ease-soft);
}
.visit-banner__bg{
  position:absolute;
  inset:0;
  z-index:1;
}
.visit-banner__bg img{
  width:100%; height:100%;
  object-fit:cover;
  animation:kenBurns 30s ease-in-out infinite alternate;
}
.visit-banner__overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(270deg,
    transparent 0%,
    rgba(255,245,249,.2) 40%,
    rgba(255,245,249,.85) 65%,
    rgba(255,245,249,.95) 100%);
  pointer-events:none;
}
.visit-banner__content{
  position:absolute;
  top:0; bottom:0;
  left:0; right:auto;
  width:50%;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 50px 0 70px;
  text-align:right;
}
.visit-banner__inner{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:520px;
}
.visit-banner__pin{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:fit-content;
  padding:9px 22px;
  background:linear-gradient(135deg, var(--gold-soft), #fff);
  border:1.5px solid rgba(212,169,96,.4);
  border-radius:var(--r-pill);
  font-size:13px;
  font-weight:900;
  color:var(--gold-deep);
  margin-bottom:22px;
  letter-spacing:1px;
  box-shadow:0 8px 20px rgba(212,169,96,.2);
}
.visit-banner__pin i{ font-size:14px; color:var(--pink-deep); }
.visit-banner__title{
  font-size:clamp(28px, 4.2vw, 54px);
  font-weight:900;
  line-height:1.25;
  margin-bottom:18px;
  color:var(--ink);
}
.visit-banner__title em{
  font-style:normal;
  font-family:var(--font-ar-display);
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.visit-banner__sub{
  font-size:clamp(15px, 1.7vw, 19px);
  font-weight:600;
  color:var(--ink-2);
  line-height:1.8;
  margin-bottom:36px;
  max-width:480px;
}
.visit-banner__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.visit-banner__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  background:var(--grad-mixed);
  color:#fff;
  border-radius:var(--r-pill);
  font-weight:900;
  font-size:14px;
  box-shadow:0 12px 32px rgba(217,107,148,.35);
  transition:.4s var(--ease-soft);
}
.visit-banner__btn:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(217,107,148,.5);
}
.visit-banner__btn--ghost{
  background:rgba(255,255,255,.95);
  color:var(--pink-deep);
  backdrop-filter:blur(10px);
  border:1.5px solid var(--pink-deep);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.visit-banner__btn--ghost:hover{
  background:var(--grad-mixed);
  color:#fff;
  border-color:transparent;
}

/* Map Section */
.city-map{
  padding:60px 0 100px;
  background:var(--bg);
}
.city-map__wrap{
  max-width:1100px;
  margin:0 auto;
}
.city-map__head{
  text-align:center;
  margin-bottom:36px;
}
.city-map__head h3{
  font-size:clamp(24px, 2.8vw, 34px);
  font-weight:900;
  line-height:1.3;
  margin-bottom:10px;
  color:var(--ink);
}
.city-map__head h3 em{
  font-style:normal;
  font-family:var(--font-ar-display);
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.city-map__head p{
  font-size:15px;
  color:var(--muted);
  line-height:1.8;
}
.city-map__frame{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  aspect-ratio:16/10;
  box-shadow:
    0 20px 60px rgba(217,107,148,.2),
    0 0 0 6px rgba(255,255,255,.5),
    0 0 0 7px rgba(212,169,96,.4);
  background:var(--bg-soft);
}
.city-map__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  filter:saturate(.95);
}
.city-map__open-btn{
  position:absolute;
  top:20px;
  right:20px;
  z-index:10;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  background:#fff;
  color:var(--ink);
  border-radius:var(--r-pill);
  font-weight:900;
  font-size:13px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  transition:.3s var(--ease-soft);
  text-decoration:none;
}
.city-map__open-btn i{ color:var(--pink-deep); font-size:14px; }
.city-map__open-btn:hover{
  background:var(--grad-mixed);
  color:#fff;
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 12px 30px rgba(217,107,148,.4);
}
.city-map__open-btn:hover i{ color:#fff; }
.city-map__info{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-top:30px;
}
.city-map__info-card{
  text-align:center;
  padding:24px 20px;
  background:var(--surface);
  border-radius:var(--r-md);
  border:1px solid var(--line);
}
.city-map__info-card i{
  font-size:24px;
  color:var(--gold-deep);
  margin-bottom:10px;
}
.city-map__info-card h4{
  font-size:14px;
  font-weight:900;
  color:var(--ink);
  margin-bottom:6px;
}
.city-map__info-card p{
  font-size:13px;
  color:var(--muted);
  line-height:1.7;
}

/* Tablet */
@media (max-width: 1000px){
  .visit-banner{ padding:60px 0 40px; }
  .visit-banner__card{
    aspect-ratio:auto;
    max-height:none;
    max-width:90%;
  }
  .visit-banner__content{
    position:relative;
    top:auto; bottom:auto; left:auto; right:auto;
    width:100%;
    padding:40px 30px;
    background:linear-gradient(180deg, rgba(255,245,249,.96) 0%, rgba(255,245,249,.88) 100%);
    backdrop-filter:blur(2px);
    text-align:center;
  }
  .visit-banner__pin{ margin-left:auto; margin-right:auto; }
  .visit-banner__title{ font-size:clamp(26px, 4vw, 38px); }
  .visit-banner__sub{
    margin-left:auto; margin-right:auto;
    max-width:600px;
  }
  .visit-banner__actions{ justify-content:center; }
  .visit-banner__bg{
    position:relative;
    aspect-ratio:16/9;
  }
  .visit-banner__overlay{ display:none; }

  .city-map__info{ grid-template-columns:1fr; }
  .city-map__frame{ aspect-ratio:4/3; }
}

/* Mobile */
@media (max-width: 640px){
  .visit-banner__card{ max-width:100%; }
  .visit-banner__content{ padding:30px 20px; }
  .visit-banner__btn{ width:100%; justify-content:center; }
  .visit-banner__title{ font-size:clamp(22px, 7vw, 30px); }
  .visit-banner__sub{ font-size:14px; }
  .city-map__frame{ aspect-ratio:1/1; }
  .city-map__open-btn{
    top:12px; right:12px;
    padding:9px 16px;
    font-size:11px;
  }
}

/* City reviews */
.city-reviews{
  padding:80px 0;
  background:var(--surface);
}
.city-reviews__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

@media (max-width: 1000px){
  .city-why__grid{ grid-template-columns:repeat(2, 1fr); }
  .city-districts__grid{ grid-template-columns:repeat(3, 1fr); }
  .city-reviews__grid{ grid-template-columns:1fr; }
  .city-hero{ padding:130px 0 50px; }
}
@media (max-width: 640px){
  .city-districts__grid{ grid-template-columns:repeat(2, 1fr); }
  .city-why__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   PRODUCTS PAGE (Collections grid - 6 categories)
   ============================================================ */
.products-hero{
  padding:160px 0 60px;
  background:
    radial-gradient(circle at 70% 20%, rgba(217,107,148,.12), transparent 50%),
    radial-gradient(circle at 30% 80%, rgba(212,169,96,.1), transparent 50%),
    var(--bg);
  position:relative;
  overflow:hidden;
  text-align:center;
}
.products-hero::before{
  content:"";
  position:absolute;
  top:50%; right:-200px;
  width:500px; height:500px;
  background:var(--pink-100);
  border-radius:50%;
  filter:blur(120px);
  opacity:.4;
  transform:translateY(-50%);
}
.products-hero__inner{
  position:relative;
  z-index:1;
  max-width:820px;
  margin:0 auto;
}
.products-hero__breadcrumb{
  display:flex;
  width:fit-content;
  margin:0 auto 24px;
  align-items:center;
  gap:10px;
  padding:7px 16px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:12px;
  color:var(--ink-2);
  font-weight:700;
}
.products-hero__breadcrumb a{ color:var(--ink-2); transition:.3s; }
.products-hero__breadcrumb a:hover{ color:var(--pink-deep); }
.products-hero__breadcrumb i{ font-size:8px; color:var(--gold); }
.products-hero__breadcrumb span{ color:var(--pink-deep); font-weight:800; }

.products-hero__kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:6px;
  font-weight:800;
  color:var(--gold-deep);
  margin-bottom:18px;
  text-transform:uppercase;
}
.products-hero__title{
  font-size:clamp(36px, 5.5vw, 68px);
  font-weight:900;
  line-height:1.2;
  margin-bottom:24px;
  color:var(--ink);
}
.products-hero__title em{
  font-style:normal;
  font-family:var(--font-ar-display);
  background:var(--grad-mixed);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.products-hero__desc{
  font-size:17px;
  color:var(--ink-2);
  line-height:1.9;
  max-width:600px;
  margin:0 auto;
}

/* Collections grid */
.collections{
  padding:60px 0 100px;
  background:var(--bg);
}
.collections__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.collection{
  background:var(--surface);
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  transition:.5s var(--ease-soft);
  display:flex;
  flex-direction:column;
}
.collection:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-3);
  border-color:transparent;
}
.collection__img{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--bg-soft);
}
.collection__img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease-soft);
}
.collection:hover .collection__img img{ transform:scale(1.08); }
.collection__num{
  position:absolute;
  top:18px; left:18px;
  width:42px; height:42px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  color:var(--pink-deep);
  border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-en);
  font-size:14px;
  font-weight:900;
  z-index:1;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
}
.collection__body{
  padding:24px 28px 28px;
  text-align:center;
  flex:1;
  display:flex;
  flex-direction:column;
}
.collection__tag{
  display:inline-block;
  font-family:var(--font-en);
  font-size:11px;
  font-weight:900;
  letter-spacing:3px;
  color:var(--gold-deep);
  margin-bottom:8px;
  text-transform:uppercase;
}
.collection__title{
  font-size:22px;
  font-weight:900;
  color:var(--ink);
  margin-bottom:8px;
  font-family:var(--font-ar-display);
}
.collection__desc{
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:18px;
  flex:1;
}
.collection__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px;
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:var(--r-pill);
  font-weight:800;
  font-size:13px;
  transition:.4s var(--ease-soft);
  width:fit-content;
  margin:0 auto;
}
.collection:hover .collection__cta{
  background:var(--grad-mixed);
  color:#fff;
  border-color:transparent;
  transform:scale(1.05);
}

/* Products page responsive */
@media (max-width: 1000px){
  .collections__grid{ grid-template-columns:repeat(2, 1fr); gap:18px; }
}
@media (max-width: 640px){
  .collections__grid{ grid-template-columns:1fr; }
  .products-hero{ padding:130px 0 40px; }
}

/* ============================================================
   BLOG COVER UNIFIED STYLING (consistent luxury aesthetic)
   ============================================================ */
/* Apply unified treatment to all blog cover images */
.article-hero__cover{
  position:relative;
  margin-top:20px;
  max-width:1000px;
  margin-left:auto; margin-right:auto;
  aspect-ratio:16/9;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:
    0 30px 80px rgba(217,107,148,.18),
    0 0 0 8px rgba(255,255,255,.5),
    0 0 0 9px rgba(212,169,96,.3);
}
.article-hero__cover::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(135deg, rgba(217,107,148,.08) 0%, transparent 40%, rgba(212,169,96,.1) 100%);
  pointer-events:none;
}
.article-hero__cover::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background:
    radial-gradient(circle at 0% 0%, rgba(212,169,96,.18) 0%, transparent 25%),
    radial-gradient(circle at 100% 100%, rgba(217,107,148,.15) 0%, transparent 25%);
  pointer-events:none;
  mix-blend-mode:soft-light;
}
.article-hero__cover img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 8s ease-out;
}
.article-hero__cover:hover img{ transform:scale(1.04); }

/* Decorative gold corner ornament */
.article-hero__cover-deco{
  position:absolute;
  font-size:24px;
  color:var(--gold);
  z-index:4;
  text-shadow:0 2px 8px rgba(0,0,0,.3);
  filter:drop-shadow(0 0 8px rgba(212,169,96,.4));
  opacity:.9;
}
.article-hero__cover-deco--tl{ top:20px; right:24px; }
.article-hero__cover-deco--br{ bottom:20px; left:24px; transform:rotate(180deg); }

/* Featured blog image — same treatment */
.featured-blog__img{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.5);
}
.featured-blog__img::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    radial-gradient(circle at 0% 0%, rgba(212,169,96,.15) 0%, transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(217,107,148,.12) 0%, transparent 30%);
  pointer-events:none;
  mix-blend-mode:soft-light;
}

/* Article card images — subtle treatment */
.article-card__img{
  position:relative;
}
.article-card__img::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 100% 0%, rgba(212,169,96,.12) 0%, transparent 35%),
    linear-gradient(135deg, transparent 60%, rgba(217,107,148,.06) 100%);
  pointer-events:none;
  mix-blend-mode:soft-light;
  transition:opacity .5s ease;
}
.article-card:hover .article-card__img::after{ opacity:.5; }

@media (max-width: 640px){
  .article-hero__cover{
    box-shadow:
      0 20px 50px rgba(217,107,148,.18),
      0 0 0 5px rgba(255,255,255,.5),
      0 0 0 6px rgba(212,169,96,.3);
  }
  .article-hero__cover-deco{ font-size:18px; }
  .article-hero__cover-deco--tl{ top:12px; right:14px; }
  .article-hero__cover-deco--br{ bottom:12px; left:14px; }
}

/* ============================================================
   SECTION DIVIDER (Luxury Gold Line + Glowing Diamond)
   ============================================================ */
.section-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  max-width:560px;
  margin:-40px auto 50px;
  padding:0 20px;
  position:relative;
  z-index:5;
}
.section-divider__line{
  flex:1;
  height:1px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(212,169,96,.15) 20%,
    rgba(212,169,96,.6) 50%,
    rgba(212,169,96,.15) 80%,
    transparent 100%);
}
.section-divider__line::after{
  content:"";
  position:absolute;
  top:-1px;
  left:-100px;
  width:100px; height:3px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,235,180,.9) 50%,
    transparent 100%);
  filter:blur(2px);
  animation:lineShimmer 5s ease-in-out infinite;
}
.section-divider__line--right::after{
  animation-delay:1.2s;
}
.section-divider__diamond{
  position:relative;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, #fff 0%, var(--gold-soft) 50%, #f0d9a8 100%);
  color:var(--gold-deep);
  font-size:14px;
  border:1px solid rgba(212,169,96,.35);
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(212,169,96,.15),
    0 4px 16px rgba(212,169,96,.25),
    0 0 0 4px rgba(212,169,96,.06);
  z-index:2;
}
.section-divider__diamond::before{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,169,96,.3) 0%, transparent 65%);
  z-index:-1;
  animation:diamondGlow 3.5s ease-in-out infinite;
}
.section-divider__diamond::after{
  content:"";
  position:absolute;
  top:8px; left:10px;
  width:10px; height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.7);
  filter:blur(1px);
}

@keyframes lineShimmer{
  0%{ transform:translateX(0); opacity:0; }
  20%{ opacity:1; }
  80%{ opacity:1; }
  100%{ transform:translateX(700px); opacity:0; }
}
@keyframes diamondGlow{
  0%, 100%{ opacity:.5; transform:scale(.95); }
  50%{ opacity:1; transform:scale(1.2); }
}

/* Variant for dark backgrounds */
.section-divider--dark .section-divider__line{
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(244,216,150,.2) 20%,
    rgba(244,216,150,.7) 50%,
    rgba(244,216,150,.2) 80%,
    transparent 100%);
}

/* ============================================================
   REVEAL ANIMATIONS (Scroll-Triggered)
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(70px);
  transition:
    opacity 1.1s cubic-bezier(.16,.62,.36,1),
    transform 1.1s cubic-bezier(.16,.62,.36,1),
    filter 1.1s cubic-bezier(.16,.62,.36,1);
  will-change:transform, opacity;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0) translateX(0) scale(1);
  filter:blur(0);
}

/* Variants */
.reveal--left{ transform:translateX(-80px); }
.reveal--right{ transform:translateX(80px); }
.reveal--scale{ transform:scale(.85) translateY(40px); }
.reveal--blur{ filter:blur(16px); transform:translateY(40px); }
.reveal--zoom{ transform:scale(1.15); opacity:0; }
.reveal--zoom.is-visible{ transform:scale(1); }

/* Stagger Children — cards appear one after another */
.reveal-stagger > .reveal{ transition-delay:0s; }
.reveal-stagger > .reveal:nth-child(1){ transition-delay:0s; }
.reveal-stagger > .reveal:nth-child(2){ transition-delay:.12s; }
.reveal-stagger > .reveal:nth-child(3){ transition-delay:.24s; }
.reveal-stagger > .reveal:nth-child(4){ transition-delay:.36s; }
.reveal-stagger > .reveal:nth-child(5){ transition-delay:.48s; }
.reveal-stagger > .reveal:nth-child(6){ transition-delay:.6s; }
.reveal-stagger > .reveal:nth-child(7){ transition-delay:.72s; }
.reveal-stagger > .reveal:nth-child(8){ transition-delay:.84s; }

/* Section Curtain (Big reveal effect) */
.reveal-curtain{
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transition:
    opacity 1.3s var(--ease-soft),
    clip-path 1.5s cubic-bezier(.65,0,.35,1);
}
.reveal-curtain.is-visible{
  opacity:1;
  clip-path:inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-curtain{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    clip-path:none !important;
    transition:none !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px){
  .topbar__inner{ grid-template-columns:auto 1fr auto; }
  .topbar__nav{ display:none; }
  .topbar-full__top{ grid-template-columns:auto 1fr auto; gap:14px; }
  .topbar-full__left .region-btn{ display:none; }
  .search-box{ display:none; }
  .topbar-full__nav{ gap:18px; overflow-x:auto; padding:8px 0 12px; }
  .topbar-full__nav a{ font-size:13px; white-space:nowrap; }
  .stats-counter__grid{ grid-template-columns:repeat(2, 1fr); }
  .elite-picks__grid{ grid-template-columns:1fr; height:auto; gap:18px; }
  .elite-pick{ aspect-ratio:16/9; }
  .slide__content{ padding:0 30px; }
  .slider-arrow{ display:none; }
  .cats__grid{ grid-template-columns:repeat(2, 1fr); gap:18px; }
  .features-bar__grid{ grid-template-columns:repeat(2, 1fr); gap:24px; }
  .testi-grid{ grid-template-columns:1fr; gap:18px; }
  .wa-banner__inner{ grid-template-columns:1fr; padding:40px 30px; gap:30px; }
  .wa-banner__visual{ min-height:180px; }
  .footer-full__grid{ grid-template-columns:1fr 1fr; gap:30px; }
}
@media (max-width: 640px){
  .hero-video__title{ font-size:clamp(32px, 8vw, 56px); }
  .stats-counter__grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .stat-item:not(:last-child)::after{ display:none; }
  .slider-wrap{ height:420px; }
  .cats__grid{ grid-template-columns:1fr; }
  .features-bar__grid{ grid-template-columns:1fr; }
  .footer-full__grid{ grid-template-columns:1fr; gap:36px; }
  .wa-banner{ padding:60px 0; }
  .wa-bubble{ width:60px; height:60px; font-size:24px; }
  .section-head__ornament{ display:none; }
  .float-wa{ width:54px; height:54px; font-size:24px; bottom:20px; left:20px; }

  /* Simpler reveals on mobile — no horizontal slide */
  .reveal--left,
  .reveal--right{
    transform:translateY(50px);
  }
  .reveal--scale{
    transform:translateY(40px);  /* skip scale on mobile, just fade up */
  }

  /* Section dividers smaller on mobile */
  .section-divider{
    gap:14px;
    max-width:320px;
    margin:-30px auto 36px;
  }
  .section-divider__diamond{
    width:36px; height:36px;
    font-size:11px;
  }
}

/* ============================================================
   TOUCH DEVICES — Disable hover state stickiness
   ============================================================ */
@media (hover: none){
  .cat-card:hover{
    transform:none;
    box-shadow:none;
    border-color:var(--line);
  }
  .cat-card:hover .cat-card__img img{ transform:none; }
  .cat-card:hover .cat-card__btn{
    background:transparent;
    color:var(--ink);
    border-color:var(--ink);
    transform:none;
  }
  .testi-card:hover{
    transform:none;
    box-shadow:none;
    border-color:var(--line);
  }
  .feature:hover .feature__icon{ transform:none; }
  .elite-pick:hover{ transform:none; box-shadow:none; }
  .elite-pick:hover img{ transform:none; }
  .float-wa:hover{ transform:none; }
  .icon-btn:hover{
    background:transparent;
    color:var(--ink-2);
    transform:none;
  }
  .hero-video__cta:hover,
  .hero-video__cta-ghost:hover{
    transform:none;
  }
  .topbar-full__nav a:hover::after{ width:0; }
  .topbar-full__nav a.is-active::after{ width:100%; }
  .btn-wa:hover{ transform:none; }
  .faq-item:hover{ border-color:var(--line); }
  .faq-q:hover{ color:var(--ink); }

  /* Floating decoration animations - reduce on mobile too */
  .float-deco{ animation-duration:15s; }
}