/* =========================================================
   نوفا للمطابخ — صفحة هبوط «احجز معاينة مجانية»
   الهوية مأخوذة من متجر نوفا الرئيسي: خط Cairo، ذهبي اللوجو #CC9A50،
   هيدر أسود، فوتر داكن #191919، وأسطح كريمية دافئة.
   ========================================================= */

/* خط Cairo مستضاف مع الموقع (ملف متغير يغطي الأوزان ٤٠٠–٩٠٠) — أسرع وما يعتمد على Google */
@font-face{ font-family:"Cairo"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("../assets/fonts/cairo-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face{ font-family:"Cairo"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("../assets/fonts/cairo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Cairo"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("../assets/fonts/cairo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  /* ألوان المتجر */
  --black:   #000000;
  --ink:     #191919;   /* فوتر وأقسام داكنة في المتجر */
  --ink-2:   #222222;   /* عناوين المتجر */
  --text:    #555555;   /* نص المتجر */
  --muted:   #666666;
  --gold:    #CC9A50;   /* ذهبي اللوجو */
  --gold-lt: #E6C17E;
  --gold-dk: #8A6420;   /* ذهبي كنص على الفاتح (تباين ٤٫٥+) */
  --cream:   #FAF6EF;
  --sand:    #F2ECE2;
  --line:    #E7DFD1;
  --white:   #FFFFFF;
  --err:     #B3261E;
  --ok:      #2E7D4F;

  --gold-grad: linear-gradient(135deg, #EBC883 0%, #CC9A50 48%, #A8772F 100%);

  --font: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --r-sm: 5px;      /* أزرار المتجر */
  --r: 14px;
  --r-lg: 22px;     /* كروت الفوتر في المتجر */
  --ease: cubic-bezier(.2,.7,.2,1);
  --bar-h: 72px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ direction:rtl; scroll-behavior:smooth; scroll-padding-top:calc(var(--bar-h) + 12px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--white); color:var(--text);
  font-family:var(--font); font-size:17px; line-height:1.85;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3,p,figure{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:6px; }

.skip{
  position:absolute; inset-inline-start:12px; top:-80px; z-index:200;
  background:var(--gold); color:var(--ink); padding:10px 16px; border-radius:var(--r-sm); font-weight:700;
}
.skip:focus{ top:12px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.ico{ width:1.25em; height:1.25em; flex:none; }
.ico--arrow{ transition:transform .3s var(--ease); }

/* ---------- type ---------- */
.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-size:.92rem; font-weight:700; color:var(--gold-dk);
  margin-bottom:.8rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--gold); border-radius:2px; }
.eyebrow--center{ justify-content:center; }
.eyebrow--light{ color:var(--gold-lt); }
.h2{
  font-size:clamp(1.75rem, 3.3vw, 2.7rem); font-weight:800; line-height:1.35;
  color:var(--ink-2); text-wrap:balance;
}
.lede{ font-size:clamp(1.02rem,1.4vw,1.15rem); color:var(--text); margin-top:.9rem; max-width:52ch; }
.lede--light{ color:#BDB6AA; }
.link{ color:var(--gold-dk); font-weight:700; text-underline-offset:4px; }

.sec-head{ margin-bottom:clamp(2rem,4.5vw,3.2rem); }
.sec-head--row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1.2rem 3rem; }
.sec-head--row .lede{ margin-top:0; max-width:36ch; }
.sec-head--center{ text-align:center; }
.sec-head--center .lede{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  --h:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:var(--h); padding:0 1.5em;
  font:700 1rem/1.2 var(--font); text-align:center;
  border-radius:var(--r-sm); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--sm{ --h:42px; padding:0 1.1em; font-size:.92rem; }
.btn--lg{ --h:58px; padding:0 1.8em; font-size:1.06rem; }
.btn--block{ width:100%; }
.btn--gold{ background:var(--gold); color:var(--ink); box-shadow:0 10px 24px -12px rgba(204,154,80,.9); }
.btn--gold:hover{ background:var(--gold-lt); }
.btn--gold:hover .ico--arrow{ transform:translateX(-4px); }
.btn--dark{ background:var(--ink); color:var(--white); }
.btn--dark:hover{ background:var(--black); }
.btn--ghost-light{ border-color:rgba(255,255,255,.35); color:var(--white); background:rgba(255,255,255,.04); }
.btn--ghost-light:hover{ border-color:var(--white); background:rgba(255,255,255,.1); }
.btn--line{ border-color:var(--line); background:var(--white); color:var(--ink-2); }
.btn--line:hover{ border-color:var(--ink-2); }

/* =========================================================
   HEADER — أسود مثل هيدر المتجر
   ========================================================= */
.bar{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:100;
  background:var(--black); color:var(--white);
  border-bottom:1px solid rgba(204,154,80,.18);
}
.bar__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:var(--bar-h); }
.brand{ display:inline-flex; align-items:center; text-decoration:none; padding:.2rem 0; border-radius:6px; }
.brand__mark{ height:44px; width:auto; }
.bar__nav{ display:flex; gap:1.8rem; font-size:.95rem; }
.bar__nav a{ text-decoration:none; color:#CFCFCF; padding:.3rem 0; border-bottom:2px solid transparent; transition:color .2s, border-color .2s; }
.bar__nav a:hover{ color:var(--white); border-bottom-color:var(--gold); }
.bar__act{ display:flex; align-items:center; gap:1rem; }
.bar__call{ display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; color:#E8E8E8; font-weight:600; font-size:.95rem; }
.bar__call:hover{ color:var(--gold-lt); }

/* =========================================================
   HERO — النص يمين والفيديو يسار
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(60% 70% at 18% 45%, rgba(204,154,80,.20), transparent 70%),
    linear-gradient(180deg, #0B0B0B 0%, #141312 100%);
  color:var(--white);
  padding-block:clamp(2.5rem,6vw,5.5rem) clamp(3rem,7vw,6rem);
}
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4.5rem); align-items:center;
}
.hero__pill{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.88rem; font-weight:600; color:#E9DCC6;
  border:1px solid rgba(204,154,80,.35); background:rgba(204,154,80,.08);
  padding:.35rem .9rem; border-radius:30px; margin-bottom:1.3rem; line-height:1.5;
}
.hero__pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(204,154,80,.22); flex:none; }
.hero__title{
  font-size:clamp(2rem, 3.7vw, 3.25rem); font-weight:900; line-height:1.35;
  color:var(--white); text-wrap:balance; margin-bottom:1.1rem;
}
.hero__title span{
  display:block;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lede{ font-size:clamp(1.04rem,1.45vw,1.2rem); color:#CFC9BF; max-width:44ch; margin-bottom:1.8rem; }
.hero__lede b{ color:var(--gold-lt); font-weight:700; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; }
.hero__micro{ font-size:.88rem; color:#A9A39A; margin-top:.8rem; }
.hero__trust{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem;
  margin-top:2rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.1);
}
.hero__trust li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.86rem; line-height:1.5; color:#B9B3A9; }
.hero__trust .ico{ color:var(--gold); width:1.6em; height:1.6em; margin-top:.1em; }
.hero__trust b{ display:block; color:var(--white); font-size:.98rem; font-weight:700; }

/* Video frame */
.hero__media{ position:relative; width:min(100%, 380px, calc(76vh * 9 / 16)); justify-self:center; }
.hero__media::before{   /* إطار ذهبي متأخر خلف الفيديو */
  content:""; position:absolute; inset:18px -18px -18px 18px;
  border:1px solid rgba(204,154,80,.4); border-radius:var(--r-lg); pointer-events:none;
}
.vframe{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:9/16; background:#1d1b19;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8);
}
.vframe__video{ width:100%; height:100%; object-fit:cover; }
.vframe__shade{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 40%); pointer-events:none; }
.vframe__tag{
  position:absolute; top:16px; inset-inline-start:16px;
  font-size:.82rem; font-weight:700; color:var(--white);
  background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:.3rem .8rem; border-radius:30px; border:1px solid rgba(255,255,255,.15);
}
.vframe__ctrls{ position:absolute; bottom:14px; inset-inline-end:14px; display:flex; gap:.5rem; }
.vbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-width:44px; height:44px; padding:0 .8rem; border-radius:30px; cursor:pointer;
  background:rgba(0,0,0,.5); color:var(--white); border:1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:.85rem; font-weight:700; transition:background-color .2s;
}
.vbtn:hover{ background:rgba(0,0,0,.75); }
.vbtn .ico--play{ display:none; }
.vbtn[aria-pressed="true"] .ico--play{ display:block; }
.vbtn[aria-pressed="true"] .ico--pause{ display:none; }

/* hero load-in — حركة بسيطة من وضع ظاهر (المحتوى ما يختفي أبدًا) */
.js .hero__copy > *{ animation:rise .8s var(--ease) both; }
.js .hero__copy > :nth-child(2){ animation-delay:.07s; }
.js .hero__copy > :nth-child(3){ animation-delay:.14s; }
.js .hero__copy > :nth-child(4){ animation-delay:.21s; }
.js .hero__copy > :nth-child(5){ animation-delay:.28s; }
.js .hero__copy > :nth-child(6){ animation-delay:.35s; }
.js .hero__media{ animation:rise 1s .15s var(--ease) both; }
@keyframes rise{ from{ transform:translateY(14px); } to{ transform:none; } }

/* =========================================================
   CITIES
   ========================================================= */
.cities{ background:var(--cream); border-bottom:1px solid var(--line); }
.cities__in{ display:flex; align-items:center; gap:1.2rem 2rem; padding-block:1.1rem; }
.cities__label{ display:inline-flex; align-items:center; gap:.4rem; font-weight:800; color:var(--ink-2); white-space:nowrap; font-size:.95rem; }
.cities__label .ico{ color:var(--gold-dk); }
.cities__list{ display:flex; flex-wrap:wrap; gap:.4rem 1.3rem; font-size:.92rem; color:var(--text); font-weight:600; }
.cities__list li{ position:relative; }
.cities__list li + li::before{ content:""; position:absolute; inset-inline-start:-.7rem; top:50%; width:4px; height:4px; border-radius:50%; background:var(--gold); transform:translate(50%,-50%); }

/* =========================================================
   WORK (rail + tabs)
   ========================================================= */
.work{ padding-block:clamp(4rem,8vw,7rem); background:var(--cream); }
.tabs{ display:inline-flex; gap:.3rem; padding:.3rem; background:var(--white); border:1px solid var(--line); border-radius:30px; }
.tab{
  border:0; background:transparent; cursor:pointer; padding:.5rem 1.2rem; border-radius:30px;
  font-weight:700; font-size:.95rem; color:var(--text); transition:background-color .2s, color .2s;
}
.tab[aria-selected="true"]{ background:var(--ink); color:var(--white); }
.rail-wrap{ position:relative; }
.rail{
  display:flex; gap:14px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  padding-inline:max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  padding-bottom:1rem; scrollbar-width:thin; scrollbar-color:var(--gold) transparent;
}
.rail:focus-visible{ outline-offset:-3px; }
.shot{
  position:relative; padding:0; border:0; cursor:zoom-in; background:var(--sand);
  flex:0 0 auto; height:clamp(280px, 34vw, 420px); aspect-ratio:3/4; border-radius:var(--r); overflow:hidden;
  scroll-snap-align:start;
}
.shot--wide{ aspect-ratio:4/3; }
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.shot:hover img{ transform:scale(1.04); }
.rail-nav{ display:flex; justify-content:center; gap:.6rem; margin-top:1rem; }
.rail-btn{
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:var(--white); color:var(--ink-2);
  display:grid; place-items:center; transition:border-color .2s, background-color .2s;
}
.rail-btn:hover{ border-color:var(--ink-2); }
.rail-btn[data-dir="prev"] .ico{ transform:scaleX(-1); }

.work__bar{ display:flex; justify-content:flex-start; margin-bottom:1.6rem; }

/* =========================================================
   VIDEOS — فيديوهات حقيقية من المطابخ بعد التركيب
   ========================================================= */
.videos{ padding-block:clamp(3.5rem,7vw,6rem); background:var(--white); }
.vids{
  display:grid; grid-template-columns:repeat(3, minmax(0, 300px)); justify-content:center; gap:clamp(12px,2vw,24px);
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
}
.vcard{ position:relative; margin:0; aspect-ratio:9/16; border-radius:var(--r-lg); overflow:hidden; background:var(--ink); box-shadow:0 24px 50px -30px rgba(25,25,25,.6); }
.vcard__video{ width:100%; height:100%; object-fit:cover; }
.vcard__play{
  position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; border:0; background:var(--gold); color:var(--ink);
  box-shadow:0 0 0 10px rgba(204,154,80,.25), 0 14px 30px -10px rgba(0,0,0,.6);
  transition:transform .25s var(--ease), background-color .25s var(--ease);
}
.vcard__play .ico{ width:30px; height:30px; margin-left:4px; }
.vcard__play:hover{ background:var(--gold-lt); transform:scale(1.06); }
.vcard.is-playing .vcard__play{ opacity:0; pointer-events:none; }

/* =========================================================
   PROCESS
   ========================================================= */
.process{ padding-block:clamp(4rem,8vw,7rem); background:var(--cream); border-top:1px solid var(--line); }
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.6rem; counter-reset:s; position:relative; }
.steps::before{
  content:""; position:absolute; top:24px; inset-inline:24px; height:2px;
  background:repeating-linear-gradient(to left, var(--gold) 0 10px, transparent 10px 18px);
  opacity:.7;
}
.step{ position:relative; }
.step__n{
  position:relative; z-index:1;
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:var(--gold-lt); font-weight:800; font-size:1.25rem;
  border:4px solid var(--cream); margin-bottom:1rem;
}
.step h3{ font-size:1.15rem; font-weight:800; color:var(--ink-2); margin-bottom:.35rem; line-height:1.5; }
.step p{ font-size:.97rem; }

/* =========================================================
   WARRANTY — المسطرة الذهبية
   ========================================================= */
.warranty{ background:var(--ink); color:#E8E3DA; padding-block:clamp(4.5rem,9vw,7.5rem); }
.warranty .h2{ color:var(--white); }
.ruler{ --label-w: 19rem; display:grid; gap:1.3rem; }
.ruler__scale{
  position:relative; height:1.7rem; margin-inline-start:var(--label-w);
  font-size:.82rem; color:#9A938A; border-bottom:1px solid rgba(255,255,255,.14);
}
.ruler__scale span{ position:absolute; top:0; white-space:nowrap; inset-inline-start:calc(var(--i) * 20%); transform:translateX(50%); }
.ruler__scale span:nth-child(1){ --i:0; transform:none; }
.ruler__scale span:nth-child(2){ --i:1; }
.ruler__scale span:nth-child(3){ --i:2; }
.ruler__scale span:nth-child(4){ --i:3; }
.ruler__scale span:nth-child(5){ --i:4; }
.ruler__scale span:nth-child(6){ --i:5; transform:translateX(100%); color:var(--gold-lt); }
.ruler__row{ display:grid; grid-template-columns:var(--label-w) minmax(0,1fr); align-items:center; }
.ruler__label{ padding-inline-end:1.5rem; line-height:1.5; }
.ruler__label b{ display:block; font-size:1.1rem; font-weight:800; color:var(--white); }
.ruler__label span{ font-size:.88rem; color:#9A938A; }
.ruler__track{ position:relative; height:56px; border-radius:var(--r-sm); background:repeating-linear-gradient(to left, rgba(255,255,255,.12) 0 1px, transparent 1px 20%); }
.ruler__bar{
  position:absolute; inset-block:0; inset-inline-start:0;
  width:calc(var(--yrs) / 5 * 100%);
  background:
    repeating-linear-gradient(to left, rgba(25,25,25,.35) 0 1px, transparent 1px calc(100% / (var(--yrs) * 12))) top/100% 10px no-repeat,
    var(--gold-grad);
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:flex-end; padding-inline:1rem;
  transform-origin:right center; transform:scaleX(0); transition:transform 1.3s var(--ease);
}
.ruler__row:nth-child(3) .ruler__bar{ transition-delay:.15s; }
.ruler__row:nth-child(4) .ruler__bar{ transition-delay:.3s; }
.ruler__bar span{ font-weight:800; font-size:1rem; color:var(--ink); white-space:nowrap; opacity:0; transition:opacity .4s .9s; }
.ruler.in .ruler__bar{ transform:none; }
.ruler.in .ruler__bar span{ opacity:1; }
.pledge{
  margin-top:clamp(2.5rem,5vw,3.5rem); display:flex; gap:1.3rem; align-items:center;
  border:1px solid rgba(204,154,80,.4); border-radius:var(--r);
  padding:clamp(1.2rem,3vw,1.7rem) clamp(1.2rem,3vw,2rem); max-width:62rem;
  background:rgba(204,154,80,.05);
}
.pledge__mark{ width:56px; flex:none; }
.pledge p{ font-size:clamp(1rem,1.5vw,1.12rem); color:#E8E3DA; }

/* =========================================================
   BOOKING + WIZARD
   ========================================================= */
.book{ padding-block:clamp(4rem,8vw,7rem); background:linear-gradient(180deg, var(--cream), var(--sand)); }
.book__grid{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(2rem,4.5vw,4rem); align-items:start; }
.book__aside{ position:sticky; top:calc(var(--bar-h) + 24px); }
.ticks{ display:grid; gap:.55rem; margin-top:1.5rem; }
.ticks li{ display:flex; gap:.6rem; align-items:center; font-weight:600; color:var(--ink-2); }
.ticks li::before{
  content:""; width:22px; height:22px; flex:none; border-radius:50%;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23191919' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat;
}
.book__contact{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.2rem; }
.book__contact p{ width:100%; font-size:.92rem; color:var(--muted); }
.book__contact a{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--ink-2); text-decoration:none; }
.book__contact a:hover{ color:var(--gold-dk); }
.book__contact .ico{ color:var(--gold-dk); }

.wizard{
  position:relative; background:var(--white); border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:0 30px 70px -40px rgba(25,25,25,.45);
  overflow:hidden; min-height:520px;
}
.wizard__noscript{ padding:2rem; text-align:center; display:grid; gap:1rem; justify-items:center; }

.wz-head{ padding:1.3rem clamp(1.1rem,3vw,2rem) 1rem; border-bottom:1px solid var(--line); background:var(--white); }
.wz-stages{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.wz-stage{ display:grid; gap:.4rem; font-size:.78rem; font-weight:700; color:#75706A; line-height:1.3; }
.wz-stage__bar{ height:5px; border-radius:5px; background:var(--sand); overflow:hidden; }
.wz-stage__bar i{ display:block; height:100%; width:0; background:var(--gold-grad); border-radius:5px; transition:width .45s var(--ease); }
.wz-stage.is-active{ color:var(--ink-2); }
.wz-stage.is-done{ color:var(--gold-dk); }
.wz-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:.75rem; font-size:.85rem; color:var(--muted); }
.wz-meta b{ color:var(--ink-2); }

.wz-body{ padding:clamp(1.3rem,3.5vw,2.2rem) clamp(1.1rem,3vw,2rem) 1rem; }
.wz-step{ border:0; margin:0; padding:0; min-width:0; }

/* ---- الانتقال بين الأسئلة: خروج ناعم ← تبديل ← دخول + تغيّر الارتفاع تدريجيًا ----
   في RTL «التالي» يدخل من اليسار والحالي يطلع لليمين، و«رجوع» بالعكس */
.wz-view{ transition:height .34s var(--ease); }
.wz-view[style*="height"]{ overflow:hidden; }
.wz-body.is-out{ opacity:0; transform:translateX(18px); transition:opacity .17s ease-in, transform .17s ease-in; pointer-events:none; }
.wz-body.is-out-back{ opacity:0; transform:translateX(-18px); transition:opacity .17s ease-in, transform .17s ease-in; pointer-events:none; }
.wz-body.is-in{ animation:stepIn .34s var(--ease) both; }
.wz-body.is-in-back{ animation:stepInBack .34s var(--ease) both; }
.wz-body.is-in .wz-opt, .wz-body.is-in-back .wz-opt,
.wz-body.is-in .wz-how li{ animation:optIn .42s var(--ease) both; animation-delay:calc(70ms + var(--i, 0) * 28ms); }
.wz-body.is-shake{ animation:shake .36s ease; }
@keyframes stepIn{ from{ opacity:0; transform:translateX(-22px); } to{ opacity:1; transform:none; } }
@keyframes stepInBack{ from{ opacity:0; transform:translateX(22px); } to{ opacity:1; transform:none; } }
@keyframes optIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes shake{ 0%,100%{ transform:none; } 25%{ transform:translateX(-6px); } 50%{ transform:translateX(5px); } 75%{ transform:translateX(-3px); } }
@keyframes pop{ 0%{ transform:scale(.3); } 60%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
.wz-q{
  display:block; float:none; width:100%; padding:0;
  font-size:clamp(1.3rem,2.4vw,1.65rem); font-weight:800; color:var(--ink-2); line-height:1.45;
  outline:none;
}
.wz-sub{ font-size:.95rem; color:var(--muted); margin-top:.35rem; }
.wz-opts{ display:grid; gap:.6rem; margin-top:1.3rem; grid-template-columns:repeat(var(--cols,2), minmax(0,1fr)); }
.wz-opt{ position:relative; display:block; cursor:pointer; }
.wz-opt input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.wz-card{
  display:flex; align-items:center; gap:.75rem; min-height:58px; height:100%;
  padding:.75rem 1rem; border:1.5px solid var(--line); border-radius:12px; background:var(--white);
  font-weight:700; font-size:1rem; color:var(--ink-2); line-height:1.45;
  transition:border-color .18s, background-color .18s, box-shadow .18s, transform .18s;
}
.wz-card__ico{ width:40px; height:40px; flex:none; color:var(--gold-dk); display:grid; place-items:center; }
.wz-card__ico svg{ width:100%; height:100%; }
.wz-card__txt{ display:grid; gap:.1rem; }
.wz-card__hint{ font-size:.82rem; font-weight:500; color:var(--muted); }
.wz-card__tick{
  margin-inline-start:auto; width:22px; height:22px; flex:none; border-radius:50%;
  border:1.5px solid var(--line); display:grid; place-items:center; color:transparent;
  transition:all .18s;
}
.wz-card__tick svg{ width:14px; height:14px; }
.wz-opt:hover .wz-card{ border-color:#D3C6AF; }
.wz-opt input:checked + .wz-card{ border-color:var(--gold); background:#FFFBF4; box-shadow:0 0 0 3px rgba(204,154,80,.18); }
.wz-opt input:checked + .wz-card .wz-card__tick{ background:var(--gold); border-color:var(--gold); color:var(--ink); animation:pop .34s var(--ease); }
.wz-opt:active .wz-card{ transform:scale(.985); }
.wz-opt input:checked + .wz-card .wz-card__ico{ animation:pop .34s var(--ease); }
.wz-opt input:focus-visible + .wz-card{ outline:3px solid var(--gold); outline-offset:2px; }
.wz-opts--stack .wz-card{ min-height:54px; }
.wz-opts--tile .wz-card{ flex-direction:column; justify-content:center; text-align:center; padding:1rem .6rem; gap:.45rem; min-height:118px; }
.wz-opts--tile .wz-card__tick{ position:absolute; top:10px; inset-inline-end:10px; margin:0; }
.wz-opts--tile .wz-card__ico{ width:52px; height:52px; }
.wz-opts--chips{ grid-template-columns:repeat(var(--cols,3), minmax(0,1fr)); }
.wz-opts--chips .wz-card{ justify-content:center; text-align:center; min-height:52px; padding:.5rem .6rem; }
.wz-opts--chips .wz-card__tick{ display:none; }

.wz-field{ display:grid; gap:.4rem; margin-top:1.2rem; }
.wz-field label{ font-weight:700; color:var(--ink-2); font-size:.98rem; }
.wz-field input{
  width:100%; min-height:56px; padding:0 1rem;
  font:500 16px/1.4 var(--font); color:var(--ink-2);
  background:var(--white); border:1.5px solid var(--line); border-radius:12px;
  transition:border-color .18s, box-shadow .18s;
}
.wz-field input[dir="ltr"]{ text-align:right; letter-spacing:.02em; }
.wz-field input::placeholder{ color:#8E877C; }
.wz-field input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(204,154,80,.22); }
.wz-field input[aria-invalid="true"]{ border-color:var(--err); }
.wz-other{ margin-top:.8rem; }
.wz-err{ color:var(--err); font-size:.9rem; font-weight:600; line-height:1.5; margin-top:.5rem; }
.wz-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
.wz-hint{ font-size:.84rem; color:var(--muted); line-height:1.5; }
.wz-ok{ color:var(--ok); font-size:.9rem; font-weight:700; line-height:1.5; }
.wz-ok:empty{ display:none; }
.ltr-num{ display:inline-block; direction:ltr; unicode-bidi:isolate; white-space:nowrap; font-weight:700; }
.wz-err:empty{ display:none; }
.wz-note{
  margin-top:1rem; padding:.8rem 1rem; border-radius:10px; background:var(--cream); border:1px dashed #DCCDB2;
  font-size:.92rem; color:var(--ink-2); line-height:1.65;
}

.wz-foot{
  display:flex; align-items:center; gap:.7rem; justify-content:space-between;
  padding:1rem clamp(1.1rem,3vw,2rem) 1.4rem;
}
.wz-back{
  display:inline-flex; align-items:center; gap:.35rem; min-height:48px; padding:0 .9rem;
  border:0; background:transparent; cursor:pointer; font-weight:700; color:var(--muted); border-radius:var(--r-sm);
}
.wz-back:hover{ color:var(--ink-2); background:var(--cream); }
.wz-back .ico{ transform:scaleX(-1); }
.wz-back[disabled]{ visibility:hidden; }
.wz-next{ min-width:170px; }

/* intro — شاشة الترحيب */
.wz-intro__hi{ display:flex; align-items:center; gap:.5rem; font-weight:800; color:var(--gold-dk); margin-bottom:.35rem; font-size:.98rem; }
.wz-intro__hi img{ width:34px; height:auto; }
.wz-how{ display:grid; gap:.6rem; margin:1.3rem 0 1.4rem; }
.wz-how li{ display:flex; gap:.9rem; align-items:center; padding:.8rem 1rem; border:1px solid var(--line); border-radius:12px; background:#FFFDF9; }
.wz-how__ico{ width:44px; height:44px; flex:none; border-radius:11px; background:var(--cream); color:var(--gold-dk); display:grid; place-items:center; border:1px solid var(--line); }
.wz-how__ico svg{ width:24px; height:24px; }
.wz-how li > span:last-child{ display:grid; font-size:.88rem; color:var(--muted); line-height:1.6; }
.wz-how b{ font-size:1rem; font-weight:800; color:var(--ink-2); }
.wz-how bdi{ font-weight:700; color:var(--ink-2); }
.wz-start{ margin-top:.2rem; }
.wz-intro__alt{ display:flex; justify-content:center; align-items:center; gap:.4rem; margin-top:.9rem; font-size:.85rem; color:var(--muted); text-align:center; line-height:1.6; }
.wz-intro__alt svg{ width:16px; height:16px; flex:none; }
.wz-intro__alt a{ color:var(--gold-dk); font-weight:700; text-underline-offset:3px; }

/* ملاحظة الإرسال في شاشة المراجعة */
.wz-sendnote{ display:flex; gap:.7rem; align-items:flex-start; margin-top:1.1rem; padding:.9rem 1rem; border-radius:12px; background:#F0F8F3; border:1px solid #CDE6D6; color:#1E4A31; font-size:.93rem; line-height:1.7; }
.wz-sendnote svg{ width:22px; height:22px; flex:none; color:#1F9D55; margin-top:.2rem; }
.wz-sendnote b{ font-weight:800; }
.wz-next--send{ min-width:220px; }

/* review */
.wz-review{ display:grid; gap:.1rem; margin-top:1.2rem; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.wz-review__row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto; gap:.8rem; align-items:center; padding:.65rem 1rem; background:var(--white); font-size:.93rem; line-height:1.55; }
.wz-review__row:nth-child(odd){ background:#FCFAF6; }
.wz-review__k{ color:var(--muted); }
.wz-review__v{ color:var(--ink-2); font-weight:700; }
.wz-edit{ border:0; background:none; color:var(--gold-dk); font-weight:700; cursor:pointer; font-size:.85rem; padding:.3rem .4rem; border-radius:4px; text-decoration:underline; text-underline-offset:3px; }
.wz-consent{ font-size:.84rem; color:var(--muted); margin-top:1rem; line-height:1.6; }

/* success */
.wz-done{ padding:clamp(1rem,3vw,1.6rem) 0 .4rem; text-align:center; display:grid; justify-items:center; gap:.9rem; }
.wz-body.is-in .wz-done__ico{ animation:pop .5s .12s var(--ease) both; }
.wz-done__ico{ width:76px; height:76px; border-radius:50%; background:var(--gold-grad); color:var(--ink); display:grid; place-items:center; box-shadow:0 0 0 10px rgba(204,154,80,.15); }
.wz-done__ico svg{ width:38px; height:38px; }
.wz-done h3{ font-size:1.6rem; font-weight:900; color:var(--ink-2); line-height:1.4; outline:none; }
.wz-done p{ max-width:42ch; }
.wz-done .btn{ margin-top:.4rem; }
.wz-done__next{ text-align:start; display:grid; gap:.5rem; margin-top:.6rem; padding:1rem 1.2rem; background:var(--cream); border-radius:12px; width:100%; max-width:30rem; font-size:.95rem; }
.wz-done__next li{ display:flex; gap:.6rem; }
.wz-done__next li::before{ content:counter(n, arabic-indic); counter-increment:n; flex:none; width:24px; height:24px; border-radius:50%; background:var(--ink); color:var(--gold-lt); display:grid; place-items:center; font-size:.8rem; font-weight:800; }
.wz-done__next{ counter-reset:n; }
.wz-restart{ border:0; background:none; color:var(--muted); text-decoration:underline; cursor:pointer; font-size:.88rem; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ padding-block:clamp(4rem,8vw,7rem); }
.faq__grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:2rem 4rem; align-items:start; }
.faq__list{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.25rem 0; font-weight:800; font-size:1.08rem; color:var(--ink-2); line-height:1.6;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; width:28px; height:28px; flex:none; border-radius:50%; border:1px solid var(--line);
  background:
    linear-gradient(var(--gold-dk),var(--gold-dk)) center/11px 2px no-repeat,
    linear-gradient(var(--gold-dk),var(--gold-dk)) center/2px 11px no-repeat;
  transition:transform .3s var(--ease), background-color .3s;
}
.faq details[open] summary::after{ transform:rotate(45deg); background-color:var(--cream); }
.faq details p{ padding-bottom:1.3rem; max-width:58ch; }

/* =========================================================
   CLOSING + FOOTER
   ========================================================= */
.closing{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--black); color:var(--white); padding-block:clamp(4.5rem,9vw,7rem); text-align:center;
}
.closing__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; z-index:-2; }
.closing::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.78) 55%, rgba(0,0,0,.9) 100%);
}
.closing__in{ display:flex; flex-direction:column; align-items:center; }
.closing__over{ color:var(--gold-lt); font-weight:700; font-size:clamp(.9rem,1.6vw,1rem); text-wrap:balance; }
.closing__title{ font-size:clamp(1.9rem,5vw,3.4rem); font-weight:900; line-height:1.35; margin:.6rem 0 .9rem; text-wrap:balance; color:var(--white); }
.closing__title span{ display:block; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.closing__lede{ color:rgba(255,255,255,.82); font-size:clamp(1rem,1.8vw,1.15rem); max-width:44ch; margin:0 0 2rem; text-wrap:balance; }
.closing__cta{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
@media (max-width:560px){ .closing__cta{ flex-direction:column; align-self:stretch; } .closing__cta .btn{ width:100%; justify-content:center; } }

.foot{ padding-block:2rem 1.5rem; background:var(--white); }
.foot__card{
  background:var(--ink); color:#BDB6AA; border-radius:var(--r-lg);
  padding:clamp(1.8rem,4vw,2.8rem); display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2rem;
}
.foot__brand img{ width:84px; height:auto; margin-bottom:1rem; }
.foot__brand p{ font-size:.92rem; max-width:40ch; }
.foot__col{ display:grid; align-content:start; gap:.45rem; font-size:.95rem; }
.foot__h{ color:var(--white); font-weight:800; margin-bottom:.3rem; }
.foot__col a{ text-decoration:none; color:#D7D1C6; justify-self:start; }
.foot__col a:hover{ color:var(--gold-lt); }
.foot__copy{ text-align:center; font-size:.85rem; color:var(--muted); margin-top:1.2rem; }

/* dock */
.dock{ display:none; }

/* lightbox */
.lightbox{
  border:0; padding:0; background:transparent; max-width:min(92vw, 1100px); max-height:92vh; overflow:visible;
}
.lightbox::backdrop{ background:rgba(0,0,0,.92); }
.lightbox img{ max-width:min(92vw,1100px); max-height:86vh; width:auto; height:auto; border-radius:var(--r); }
.lightbox__close, .lightbox__nav{
  position:fixed; z-index:2; width:48px; height:48px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.12); color:var(--white); border:1px solid rgba(255,255,255,.25);
  display:grid; place-items:center;
}
.lightbox__close{ top:16px; left:16px; }
.lightbox__nav{ top:50%; transform:translateY(-50%); }
.lightbox__nav--prev{ right:16px; }
.lightbox__nav--prev .ico{ transform:scaleX(-1); }
.lightbox__nav--next{ left:16px; }
.lightbox__close:hover, .lightbox__nav:hover{ background:rgba(255,255,255,.25); }

/* =========================================================
   REVEAL
   ========================================================= */
/* المحتوى ظاهر دائمًا؛ الحركة إزاحة خفيفة بس عند الوصول له */
.js .reveal{ transform:translateY(16px); transition:transform .75s var(--ease); }
.js .reveal.in{ transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px){
  .bar__nav{ display:none; }
  .ruler{ --label-w: 15rem; }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:2.2rem; }
  .steps::before{ display:none; }
}

@media (max-width: 900px){
  :root{ --bar-h: 62px; }
  body{ padding-bottom:calc(74px + env(safe-area-inset-bottom)); }
  .bar__call span{ display:none; }
  .bar__call{ width:42px; height:42px; justify-content:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; }
  .brand__mark{ height:38px; }

  .hero__grid{ grid-template-columns:1fr; gap:0; }
  /* على الجوال: الفيديو مباشرة تحت العنوان والوصف، قبل الأزرار */
  .hero__copy{ display:contents; }
  .hero__pill{ order:1; justify-self:start; }
  .hero__title{ order:2; }
  .hero__lede{ order:3; margin-bottom:1.4rem; }
  .hero__cta{ order:4; }
  .hero__micro{ order:5; margin-bottom:1.6rem; }
  .hero__media{ order:6; margin:0 0 1.6rem; width:min(64vw, 300px); }
  .hero__trust{ order:7; }
  .hero__media::before{ inset:12px -10px -12px 10px; }
  .hero__trust{ gap:.6rem; }

  .faq__grid, .book__grid{ grid-template-columns:1fr; }
  .book__aside{ position:static; }
  .book__contact{ display:none; }
  .foot__card{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }

  .dock{
    display:flex; gap:8px; position:fixed; z-index:90; inset-inline:0; bottom:0;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border-top:1px solid var(--line); transition:transform .35s var(--ease);
  }
  .dock.is-hidden{ transform:translateY(110%); }
  .dock a{ display:flex; align-items:center; justify-content:center; gap:.45em; min-height:52px; border-radius:var(--r-sm); text-decoration:none; font-weight:800; }
  .dock__wa{ flex:0 0 38%; border:1.5px solid var(--ink); color:var(--ink); }
  .dock__book{ flex:1; background:var(--gold); color:var(--ink); }
}

@media (max-width: 640px){
  body{ font-size:16px; }
  .vids{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; justify-content:flex-start; padding-bottom:.6rem; }
  .vcard{ flex:0 0 66%; scroll-snap-align:center; }
  .bar .btn--sm{ --h:44px; padding:0 .8em; font-size:.85rem; }
  .bar__call{ width:44px; height:44px; }
  .hero{ padding-top:1.6rem; }
  .hero__pill{ font-size:.8rem; }
  .hero__cta .btn{ flex:1 1 100%; }
  .hero__trust{ grid-template-columns:1fr 1fr 1fr; }
  .hero__trust li{ flex-direction:column; gap:.3rem; font-size:.78rem; }
  .hero__trust b{ font-size:.86rem; }
  .cities__in{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .shot{ height:300px; }
  .steps{ grid-template-columns:1fr; }
  .ruler{ --label-w: 0px; gap:1.5rem; }
  .ruler__scale{ margin-inline-start:0; }
  .ruler__row{ grid-template-columns:1fr; gap:.6rem; }
  .ruler__label{ padding:0; }
  .ruler__track{ height:46px; }
  .pledge{ flex-direction:column; align-items:flex-start; }
  .foot__card{ grid-template-columns:1fr; }

  .wizard{ min-height:0; border-radius:var(--r); }
  .wz-opts{ grid-template-columns:repeat(var(--cols-sm,2), minmax(0,1fr)); }
  .wz-opts--chips{ grid-template-columns:repeat(var(--cols-sm,3), minmax(0,1fr)); }
  .wz-card{ font-size:.95rem; padding:.7rem .8rem; }
  .wz-opts--tile .wz-card{ min-height:104px; }
  .wz-review__row{ grid-template-columns:1fr auto; }
  .wz-review__k{ grid-column:1 / -1; font-size:.82rem; }
  .wz-next{ min-width:0; flex:1; }
  .wz-stage{ font-size:.7rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important; transition-delay:0s !important; }
  .js .reveal, .js .hero__copy > *, .js .hero__media{ transform:none; }
}
.wz-note--restore{ margin:0 0 1rem; }