/* ============================================================
   ROYAL ENTENSITY — Luxury Hair Care Landing Page
   Palette: Black / Off-white / White + Gold accent
   ============================================================ */

:root{
  --black:#0a0a0a;
  --ink:#141414;
  --charcoal:#1c1c1c;
  --offwhite:#f5f1ea;
  --cream:#efe9df;
  --white:#ffffff;
  --gold:#c9a24b;
  --gold-light:#e3c77e;
  --gold-dark:#a8842f;
  --muted:#8a8378;
  --line:rgba(201,162,75,.28);

  --font-ar-head:'Aref Ruqaa', serif;
  --font-ar-body:'Tajawal', sans-serif;
  --font-en-head:'Cormorant Garamond', serif;
  --font-en-body:'Jost', sans-serif;

  --head:var(--font-ar-head);
  --body:var(--font-ar-body);

  --maxw:1200px;
  --radius:14px;
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
}

html.lang-en{ --head:var(--font-en-head); --body:var(--font-en-body); }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--body);
  background:var(--offwhite);
  color:var(--ink);
  line-height:1.75;
  overflow-x:hidden;
  font-size:16px;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }

h1,h2,h3,h4{ font-family:var(--head); line-height:1.2; font-weight:700; }
html.lang-en h1, html.lang-en h2{ font-weight:600; letter-spacing:.5px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--body); font-weight:700; font-size:.98rem;
  padding:.85em 1.8em; border-radius:50px; border:1px solid transparent;
  cursor:pointer; transition:all .35s var(--ease); white-space:nowrap;
  letter-spacing:.3px;
}
html.lang-en .btn{ text-transform:uppercase; letter-spacing:1.5px; font-size:.82rem; font-weight:500; }
.btn--gold{ background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:var(--black); box-shadow:0 8px 24px rgba(201,162,75,.35); }
.btn--gold:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(201,162,75,.5); }
.btn--ghost{ border-color:rgba(255,255,255,.55); color:var(--white); background:rgba(255,255,255,.04); backdrop-filter:blur(4px); }
.btn--ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.btn--dark{ background:var(--black); color:var(--offwhite); border-color:var(--black); }
.btn--dark:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); transform:translateY(-3px); }
.btn--lg{ padding:1.05em 2.4em; font-size:1.05rem; }
html.lang-en .btn--lg{ font-size:.9rem; }

/* ---------- Section basics ---------- */
.section{ padding:clamp(44px,6vw,84px) 0; }
.section--dark{ background:var(--black); color:var(--offwhite); }
.section__head{ text-align:center; max-width:720px; margin-inline:auto; margin-bottom:clamp(26px,4vw,42px); }
.section__title{ font-size:clamp(1.9rem,4.5vw,3.2rem); margin-bottom:.4em; }
.section--dark .section__title{ color:var(--white); }
.section__lead{ color:var(--muted); font-size:1.05rem; }
.section--dark .section__lead{ color:#b8b1a4; }

.eyebrow{
  font-family:var(--body); text-transform:uppercase; letter-spacing:4px;
  font-size:.78rem; font-weight:700; color:var(--gold-dark); margin-bottom:.9em;
}
html:not(.lang-en) .eyebrow{ letter-spacing:2px; font-size:.85rem; }
.eyebrow--gold{ color:var(--gold-light); }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding-block:18px;
}
.nav.scrolled{ background:rgba(10,10,10,.92); backdrop-filter:blur(12px); box-shadow:0 4px 30px rgba(0,0,0,.4); padding-block:10px; }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav__brand{ display:flex; align-items:center; gap:12px; color:#fff; }
.nav__logo{ height:66px; width:auto; filter:drop-shadow(0 2px 10px rgba(0,0,0,.55)); transition:height .4s var(--ease); }
.nav.scrolled .nav__logo{ height:54px; }
.nav__name{ height:34px; width:auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); transition:height .4s var(--ease); }
.nav.scrolled .nav__name{ height:28px; }
.nav__links{ display:flex; gap:28px; }
.nav__links a{ color:#f3efe6; font-size:.95rem; font-weight:500; position:relative; padding:4px 0; opacity:.9; transition:color .3s, opacity .3s; }
.nav__links a::after{ content:''; position:absolute; inset-block-end:-2px; inset-inline-start:0; width:0; height:1.5px; background:var(--gold); transition:width .3s var(--ease); }
.nav__links a:hover{ color:var(--gold-light); opacity:1; }
.nav__links a:hover::after{ width:100%; }
.nav__actions{ display:flex; align-items:center; gap:14px; }

.langswitch{
  background:transparent; border:1px solid rgba(201,162,75,.6); color:var(--gold-light);
  border-radius:50px; padding:.45em 1em; cursor:pointer; font-family:var(--font-en-body);
  font-size:.8rem; letter-spacing:1px; font-weight:500; transition:all .3s;
}
.langswitch:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); }

.nav__burger{ display:none; position:relative; z-index:120; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav__burger span{ width:26px; height:2px; background:var(--gold-light); border-radius:2px; transition:.3s; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden; color:#fff; }
/* Arabic banner (face on left, text on right) | English banner (face on right, text on left) */
.hero__bg{ position:absolute; inset:0; background-image:url('../assets/img/banar-ar.webp'); background-size:cover; background-position:center; transform:scale(1.05); animation:heroZoom 14s ease-out forwards; }
html.lang-en .hero__bg{ background-image:url('../assets/img/banar-en.webp'); }
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero__overlay{ position:absolute; inset:0; background:linear-gradient(-90deg,rgba(6,6,6,.9) 0%,rgba(6,6,6,.55) 45%,rgba(6,6,6,.25) 100%); }
html.lang-en .hero__overlay{ background:linear-gradient(90deg,rgba(6,6,6,.9) 0%,rgba(6,6,6,.55) 45%,rgba(6,6,6,.25) 100%); }
.hero__content{ position:relative; z-index:2; max-width:600px; padding-block:120px; }
/* Arabic: text starts from the right | English: text starts from the left */
html.lang-ar .hero__content{ margin-left:auto; margin-right:0; text-align:right; }
html.lang-en .hero__content{ margin-right:auto; margin-left:0; text-align:left; }
html.lang-ar .hero__subtitle{ margin-left:auto; margin-right:0; }
html.lang-en .hero__subtitle{ margin-right:auto; margin-left:0; }
html.lang-ar .hero__actions{ justify-content:flex-end; }
html.lang-en .hero__actions{ justify-content:flex-start; }
.hero__eyebrow{ font-family:var(--body); text-transform:uppercase; letter-spacing:5px; font-size:.85rem; color:var(--gold-light); margin-bottom:1.2em; }
.hero__title{ font-size:clamp(2.6rem,7vw,5.2rem); line-height:1.08; margin-bottom:.5em; text-shadow:0 4px 30px rgba(0,0,0,.5); }
html.lang-en .hero__title{ font-weight:500; }
.hero__subtitle{ font-size:clamp(1.05rem,2.2vw,1.35rem); color:#e9e3d7; max-width:520px; margin-bottom:2.2em; font-weight:300; }
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero__scroll{ position:absolute; inset-block-end:28px; inset-inline-start:50%; transform:translateX(-50%); z-index:2; }
.hero__scroll span{ display:block; width:24px; height:40px; border:2px solid rgba(255,255,255,.5); border-radius:14px; position:relative; }
.hero__scroll span::after{ content:''; position:absolute; inset-block-start:7px; inset-inline-start:50%; transform:translateX(-50%); width:4px; height:8px; background:var(--gold-light); border-radius:2px; animation:scrollDot 1.6s infinite; }
@keyframes scrollDot{ 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,14px)} }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ background:var(--ink); color:var(--gold-light); padding-block:18px; overflow:hidden; border-block:1px solid var(--line); }
.marquee__track{ display:flex; width:max-content; animation:marquee 28s linear infinite; }
html[dir="rtl"] .marquee__track{ animation-direction:reverse; }
.marquee__group{ display:flex; align-items:center; gap:26px; padding-inline:13px; }
.marquee__group span{ font-family:var(--head); font-size:1.4rem; white-space:nowrap; }
html.lang-en .marquee__group span{ font-size:1.5rem; font-style:italic; }
.marquee__group i{ color:var(--gold); font-style:normal; font-size:.8rem; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.about__media{ position:relative; }
.about__media img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow); }
.about__badge{
  position:absolute; inset-block-start:18px; inset-inline-end:18px;
  background:var(--gold); color:var(--black); font-family:var(--font-en-body); font-weight:600;
  padding:.4em 1em; border-radius:50px; letter-spacing:1px; font-size:.9rem; box-shadow:var(--shadow);
}
.about__text p{ color:#4a463e; margin-bottom:1.1em; font-size:1.05rem; }
.about__list{ margin:1.4em 0 1.8em; }
.about__list li{ padding:.35em 0; color:var(--gold-dark); font-weight:500; }

/* ============================================================
   SHOWCASE CAROUSEL
   ============================================================ */
.showcase{ padding:0; background:#000; }
.carousel{ position:relative; overflow:hidden; width:100%; aspect-ratio:3/2; background:#000; }
.carousel__track{ display:flex; height:100%; direction:ltr; transition:transform .9s var(--ease); }
.carousel__slide{ min-width:100%; height:100%; }
.carousel__slide img{ width:100%; height:100%; object-fit:contain; display:block; }
.carousel__dots{ position:absolute; inset-block-end:22px; inset-inline:0; display:flex; gap:12px; justify-content:center; z-index:3; }
.carousel__dots button{ width:12px; height:12px; border-radius:50%; border:2px solid rgba(255,255,255,.7); background:transparent; cursor:pointer; padding:0; transition:.3s; }
.carousel__dots button.active{ background:var(--gold); border-color:var(--gold); transform:scale(1.2); }

/* ============================================================
   BENEFITS
   ============================================================ */
.benefits__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.bcard{ text-align:center; border-radius:var(--radius); overflow:hidden; background:var(--white); box-shadow:0 12px 40px rgba(0,0,0,.06); border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s; }
.bcard:hover{ transform:translateY(-8px); box-shadow:0 22px 50px rgba(201,162,75,.18); }
.bcard__media{ aspect-ratio:1/1; overflow:hidden; background:var(--ink); }
.bcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.bcard:hover .bcard__media img{ transform:scale(1.08); }
.bcard__body{ padding:24px 20px 30px; }
.bcard h3{ font-size:1.4rem; margin-bottom:.4em; color:var(--ink); }
.bcard p{ color:#6a655b; font-size:.96rem; }

/* ============================================================
   INGREDIENTS
   ============================================================ */
/* Ingredient ring: central image with ingredients arranged around it */
.ingring{
  position:relative; width:min(640px,90vw); aspect-ratio:1/1; margin:20px auto 0;
}
.ingring__center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  height:54%; display:flex; align-items:center; justify-content:center; z-index:2;
  opacity:0; transition:opacity .9s var(--ease);
}
.ingring__center.is-visible{ opacity:1; }
.ingring__center img{ height:100%; width:auto; object-fit:contain; filter:drop-shadow(0 14px 34px rgba(0,0,0,.55)); }
/* Physical positioning for BOTH directions so the ring is identical in AR & EN (no mirror shift) */
.ingnode{
  position:absolute; top:var(--y); left:var(--x); transform:translate(-50%,-50%) translateY(14px);
  display:flex; flex-direction:column; align-items:center; gap:9px; width:130px; text-align:center;
  opacity:0; transition:opacity .6s var(--ease), transform .6s var(--ease);
}
/* reveal keeps the ring positioning transform, drops the entrance offset */
.ingnode.is-visible{ opacity:1; transform:translate(-50%,-50%); }
.ingsym{
  width:98px; height:98px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.12), rgba(201,162,75,.05));
  border:1.5px solid rgba(201,162,75,.5); box-shadow:0 10px 26px rgba(0,0,0,.42), inset 0 0 20px rgba(201,162,75,.06);
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.ingsym img{ width:100%; height:100%; object-fit:contain; padding:12px; }
.ingnode:hover .ingsym{ transform:scale(1.12) translateY(-2px); border-color:var(--gold-light); box-shadow:0 16px 34px rgba(201,162,75,.3); }
.ingnode span:not(.ingsym){ font-size:.92rem; color:#efe9dd; font-weight:500; }
.ingredients__note{ margin-top:1.6em; color:var(--gold-light); font-weight:500; font-size:1.1rem; text-align:center; }

/* ---- Essential oils group (always below the ingredient ring) ---- */
.ingoils{ margin-top:clamp(28px,5vw,52px); }
.ingoils__head{ display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:26px; }
.ingoils__line{ height:1px; width:min(120px,18vw); background:linear-gradient(90deg,transparent,var(--gold)); }
.ingoils__head .ingoils__line:last-child{ background:linear-gradient(90deg,var(--gold),transparent); }
.ingoils__title{ font-size:clamp(1.2rem,2.6vw,1.6rem); color:var(--gold-light); white-space:nowrap; }
.ingoils__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(24px,6vw,72px); }
.ingoil{ display:flex; flex-direction:column; align-items:center; gap:10px; width:150px; text-align:center; }
.ingoil.reveal:nth-child(2){ transition-delay:.14s; }
.ingoil.reveal:nth-child(3){ transition-delay:.28s; }
.ingoil .ingsym{ width:112px; height:112px; }
.ingoil span:not(.ingsym){ font-size:1rem; color:#efe9dd; font-weight:500; }

/* ============================================================
   MADE WITH LOVE
   ============================================================ */
.love{ position:relative; min-height:52vh; display:flex; align-items:center; overflow:hidden; color:#fff; }
.love__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.love__overlay{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,6,6,.88),rgba(6,6,6,.45) 60%,rgba(6,6,6,.25)); }
html.lang-en .love__overlay{ background:linear-gradient(-90deg,rgba(6,6,6,.88),rgba(6,6,6,.45) 60%,rgba(6,6,6,.25)); }
.love__content{ position:relative; z-index:2; max-width:560px; padding-block:56px; }
.love__title{ font-size:clamp(2rem,5vw,3.4rem); margin-bottom:.5em; color:#fff; text-shadow:0 4px 24px rgba(0,0,0,.5); }
.love__text{ font-size:clamp(1.05rem,2.2vw,1.3rem); color:#e9e3d7; font-weight:300; }

/* ============================================================
   REVIEWS
   ============================================================ */
/* Testimonial screenshots wall — luxurious gold frames, responsive */
.reviews__wall{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px; align-items:start; max-width:1100px; margin-inline:auto;
}
.rev-shot{
  padding:10px; border-radius:16px; cursor:pointer; display:block; width:100%; background:
    linear-gradient(var(--white),var(--white)) padding-box,
    linear-gradient(150deg,var(--gold-light),var(--gold-dark) 55%,var(--gold-light)) border-box;
  border:2px solid transparent; box-shadow:0 14px 40px rgba(0,0,0,.12);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.rev-shot:hover{ transform:translateY(-6px); box-shadow:0 22px 50px rgba(201,162,75,.28); }
.rev-shot img{ width:100%; height:auto; border-radius:9px; display:block; }
.rev-shot:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(6,6,6,.9); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(560px,92vw); max-height:88vh; width:auto; height:auto; border-radius:12px; border:2px solid var(--gold); box-shadow:0 20px 60px rgba(0,0,0,.6); }
.lightbox__close{
  position:absolute; inset-block-start:20px; inset-inline-end:24px; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(201,162,75,.6); color:var(--gold-light);
  font-size:2rem; line-height:1; cursor:pointer; transition:.3s;
}
.lightbox__close:hover{ background:var(--gold); color:var(--black); }

/* ============================================================
   COMPANY
   ============================================================ */
.company__inner{ text-align:center; max-width:760px; margin-inline:auto; }
.company__logo{ height:120px; width:auto; margin:0 auto 8px; filter:drop-shadow(0 8px 24px rgba(201,162,75,.3)); }
.company__text{ color:#c2bbae; font-size:1.08rem; margin-bottom:1em; }
/* Iraq map outline (gold stroke) under the "Made in Iraq" title */
.iraq-map{ margin:22px auto 26px; width:clamp(150px,32vw,220px); }
.iraq-map svg{ width:100%; height:auto; display:block; overflow:visible; filter:drop-shadow(0 6px 18px rgba(201,162,75,.28)); }
.iraq-map path{ fill:rgba(201,162,75,.06); stroke:var(--gold); stroke-width:60; stroke-linejoin:round; stroke-linecap:round; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:start; }
.contact__lead{ color:#5a554b; margin-bottom:1.6em; font-size:1.05rem; }
.contact__wa{ margin-bottom:2em; }
.contact__list{ display:flex; flex-direction:column; gap:16px; margin-bottom:2em; }
.contact__list li{ display:flex; align-items:center; gap:14px; }
.contact__list svg{ width:24px; height:24px; color:var(--gold-dark); flex-shrink:0; }
.contact__list a{ font-size:1.05rem; font-weight:500; transition:color .3s; }
.contact__list a:hover{ color:var(--gold-dark); }
.contact__social{ display:flex; gap:14px; }
.contact__social a{ width:48px; height:48px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:.3s; }
.contact__social a:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); transform:translateY(-3px); }
.contact__social svg{ width:22px; height:22px; }

.contact__form{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,4vw,44px); box-shadow:0 20px 50px rgba(0,0,0,.06); }
.field{ margin-bottom:20px; }
.field label{ display:block; margin-bottom:8px; font-weight:500; color:var(--ink); font-size:.95rem; }
.field input, .field textarea{
  width:100%; padding:.9em 1.1em; border:1px solid #ddd5c7; border-radius:10px;
  font-family:var(--body); font-size:1rem; background:var(--offwhite); color:var(--ink); transition:.3s; resize:vertical;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,.15); background:#fff; }
.form__hint{ margin-top:14px; font-size:.85rem; color:var(--muted); text-align:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--black); color:#cfc8ba; padding-block:56px 0; border-block-start:1px solid var(--line); }
.footer__inner{ display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:center; padding-bottom:40px; }
.footer__brand{ display:flex; align-items:center; gap:16px; max-width:360px; }
.footer__brand img{ height:64px; width:auto; }
.footer__brand p{ font-size:.95rem; color:#a49d90; }
.footer__links{ display:flex; flex-wrap:wrap; gap:22px; }
.footer__links a{ font-size:.95rem; transition:color .3s; }
.footer__links a:hover{ color:var(--gold-light); }
.footer__social{ display:flex; gap:12px; }
.footer__social a{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(201,162,75,.35); display:flex; align-items:center; justify-content:center; color:var(--gold-light); transition:.3s; }
.footer__social a:hover{ background:var(--gold); color:var(--black); }
.footer__social svg{ width:20px; height:20px; }
.footer__bottom{ border-block-start:1px solid rgba(255,255,255,.08); padding-block:20px; font-size:.85rem; color:#8a8378; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.footer__credit{ color:#a49d90; font-weight:500; transition:color .3s; }
.footer__credit:hover{ color:var(--gold-light); }
@media (max-width:600px){ .footer__bottom{ justify-content:center; text-align:center; } }

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wafloat{
  position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:90;
  width:58px; height:58px; border-radius:50%; background:#25d366; color:#fff;
  display:none; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,.5);
  transition:transform .3s;
}
.wafloat:hover{ transform:scale(1.1); }
.wafloat svg{ width:32px; height:32px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .benefits__grid{ grid-template-columns:repeat(2,1fr); }
  .reviews__wall{ grid-template-columns:repeat(2,1fr); gap:18px; max-width:620px; }
}

@media (max-width:820px){
  /* Full-screen elegant overlay menu (fade + scale, no direction transform → works in RTL & LTR) */
  .nav__links{
    position:fixed; inset:0; width:100%; height:100vh; height:100dvh;
    background:radial-gradient(120% 90% at 50% 22%, rgba(38,29,10,.97), rgba(8,8,8,.99));
    backdrop-filter:blur(16px);
    flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:80px 24px;
    opacity:0; visibility:hidden; transform:scale(1.05); pointer-events:none;
    transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
    z-index:105;
  }
  .nav__links::before{ content:'✦'; color:var(--gold); font-size:1.3rem; margin-bottom:14px; opacity:.8; }
  .nav__links.open{ opacity:1; visibility:visible; transform:scale(1); pointer-events:auto; }
  .nav__links a{
    font-family:var(--head); font-size:clamp(1.5rem,7vw,2.1rem); font-weight:700; color:#f3efe6;
    padding:12px 0; opacity:0; transform:translateY(16px);
    transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
  }
  html.lang-en .nav__links a{ font-style:italic; letter-spacing:1px; }
  .nav__links a::after{ display:none; }
  .nav__links a:hover, .nav__links a:active{ color:var(--gold-light); }
  .nav__links.open a{ opacity:1; transform:none; }
  .nav__links.open a:nth-child(1){ transition-delay:.10s; }
  .nav__links.open a:nth-child(2){ transition-delay:.16s; }
  .nav__links.open a:nth-child(3){ transition-delay:.22s; }
  .nav__links.open a:nth-child(4){ transition-delay:.28s; }
  .nav__links.open a:nth-child(5){ transition-delay:.34s; }
  .nav__links.open a:nth-child(6){ transition-delay:.40s; }
  .nav__burger{ display:flex; }
  .nav__cta{ display:none; }
  .about__grid, .contact__grid{ grid-template-columns:1fr; }
  .about__media{ max-width:440px; margin-inline:auto; }
  .footer__inner{ flex-direction:column; text-align:center; }
  .footer__brand{ flex-direction:column; text-align:center; }
  .wafloat{ display:flex; }

  /* Hero on phones: shorter + focus the crop on the model so the banner isn't over-cropped */
  .hero{ min-height:86svh; }
  html.lang-ar .hero__bg{ background-position:24% center; }
  html.lang-en .hero__bg{ background-position:76% center; }
  .hero__content{ max-width:none; }

  /* Ingredient ring -> responsive grid */
  .ingring{ position:static; width:100%; aspect-ratio:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 8px; margin-top:8px; }
  .ingnode span:not(.ingsym){ overflow-wrap:anywhere; }
  .ingring__center{ position:static; transform:none; inset:auto; height:auto; grid-column:1/-1; width:min(150px,42%); margin:0 auto 8px; opacity:0; }
  .ingring__center.is-visible{ transform:none; }
  .ingring__center img{ width:100%; height:auto; }
  .ingnode, html[dir="rtl"] .ingnode{ position:static; inset:auto; width:auto; transform:none; }
  .ingnode.is-visible, html[dir="rtl"] .ingnode.is-visible{ transform:none; inset:auto; }
  /* last lone ingredient sits centered, not at the edge */
  .ingring .ingnode:last-child{ grid-column:2; }
  .ingsym{ width:82px; height:82px; }
  .ingnode span:not(.ingsym){ font-size:.82rem; }
  .ingredients__note{ margin-top:1.2em; font-size:1rem; }
}

@media (max-width:520px){
  .benefits__grid{ grid-template-columns:1fr; }
  .reviews__wall{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .nav__name{ display:none; }
  .ingring{ gap:18px 6px; }
  .ingsym{ width:74px; height:74px; }
  .ingnode span:not(.ingsym){ font-size:.78rem; }

  /* Hero: center content on phones so nothing overflows/clips in RTL or LTR */
  .hero__content{ padding-block:120px 80px; max-width:none; }
  .hero__content,
  html.lang-ar .hero__content,
  html.lang-en .hero__content{ margin-inline:auto; text-align:center; }
  .hero__subtitle,
  html.lang-ar .hero__subtitle,
  html.lang-en .hero__subtitle{ max-width:none; margin-inline:auto; }
  .hero__actions,
  html.lang-ar .hero__actions,
  html.lang-en .hero__actions{ justify-content:center; }
  .hero__overlay,
  html.lang-en .hero__overlay{ background:linear-gradient(180deg, rgba(6,6,6,.34) 0%, rgba(6,6,6,.5) 50%, rgba(6,6,6,.82) 100%); }
  .btn{ width:100%; }
  .hero__actions .btn{ width:100%; }
}

/* Burger active state */
.nav__burger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.active span:nth-child(2){ opacity:0; }
.nav__burger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
  .reveal{ opacity:1; transform:none; }
}