/* ============================================================
   عين حورس · Horus Eye
   Direction: antique gold + lapis lazuli (Tutankhamun palette).
   Type: Amiri (heritage display) · Cairo (body) · Space Grotesk (data).
   Structure: temple registers, hairline rules, wedjat-fraction signature.
   ============================================================ */

:root{
  --bg:#F7F3EA; --bg-2:#EFE7DC; --panel:#FFFFFF; --panel-2:#FBF7EE;
  --film-dark:#08070B; /* the ORIGINAL near-black — kept only for the canvas film's own opening-black hold, independent of the page theme */
  --gold:#C9A24B; --gold-l:#E7C66E; --gold-d:#5E4A24;
  --lapis:#21477F; --lapis-l:#4E7FC4;
  --paper:#241F16; --paper-on-dark:#ECE4D2; --muted:#6E6252; --faint:#9A8D76;
  --line:rgba(150,110,40,.24); --line-2:rgba(150,110,40,.4);

  --display:"Amiri", "Cairo", serif;
  --body:"Cairo", system-ui, sans-serif;
  --data:"Space Grotesk", "Cairo", sans-serif;

  --maxw:1200px;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,5vw,64px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-snap-type:y proximity}
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
body{
  background:var(--bg);color:var(--paper);
  font-family:var(--body);font-weight:400;line-height:1.7;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
html[dir="rtl"] body{text-align:right}
html[dir="ltr"] body{text-align:left}
a{color:inherit;text-decoration:none}
img,svg,video,canvas{display:block;max-width:100%}
::selection{background:var(--gold);color:#0a0809}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--data);font-weight:500;font-size:.92rem;letter-spacing:.04em;
  padding:.95em 1.9em;border:1px solid transparent;cursor:pointer;
  transition:.4s var(--ease);position:relative;background:none;color:inherit}
.btn-gold{background:linear-gradient(135deg,var(--gold) 0%,#D4B87A 100%);color:#fff;font-weight:700;
  border-radius:6px;box-shadow:0 2px 12px rgba(200,169,107,.35)}
.btn-gold:hover{background:linear-gradient(135deg,var(--gold-l) 0%,#E0C885 100%);
  transform:scale(1.03);box-shadow:0 4px 22px rgba(200,169,107,.55)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- ATMOSPHERE ---------- */
.grain{position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:8999;
  background:radial-gradient(130% 120% at 50% 42%,transparent 50%,rgba(0,0,0,.78));
  transition:opacity .5s var(--ease)}
/* a cinematic edge-darken only makes sense over the film; fade it out once
   scrolled past the pinned canvas-zone so it doesn't smudge the light sections */
.vignette.hide{opacity:0}
/* ---------- SIGNATURE: WEDJAT FRACTION RAIL ---------- */
.wedjat-rail{position:fixed;inset-inline-start:clamp(14px,3vw,38px);top:50%;
  transform:translateY(-50%);z-index:6000;display:flex;flex-direction:column;
  align-items:center;gap:16px;pointer-events:none;mix-blend-mode:screen;
  opacity:0;transition:opacity .8s var(--ease)}
.wedjat-rail.show{opacity:1}
.wr-cap{writing-mode:vertical-rl;font-family:var(--data);font-size:.6rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
html[dir="rtl"] .wr-cap{writing-mode:vertical-rl;transform:rotate(180deg)}
.wr-marks{list-style:none;display:flex;flex-direction:column;gap:14px}
.wr-mark{font-family:var(--data);font-size:.64rem;color:var(--faint);
  letter-spacing:.02em;transition:.45s var(--ease);text-align:center;line-height:1;
  opacity:.5}
.wr-frac{display:inline-block}
.wr-mark.on{color:var(--gold-l);opacity:1;transform:scale(1.18);text-shadow:0 0 12px rgba(231,198,110,.6)}
.wr-mark.past{color:var(--gold);opacity:.85}
.wr-line{width:1px;height:60px;background:linear-gradient(var(--line-2),transparent)}

/* ---------- PRELOADER ---------- */
.preloader{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .7s var(--ease)}
.preloader.done{opacity:0;pointer-events:none}
.eye-svg-pre{width:160px}
.pre-stroke{stroke-dasharray:520;stroke-dashoffset:520;animation:draw 2.2s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pre-iris{transform-origin:128px 98px;animation:irisPulse 2.4s ease-in-out 1.2s infinite}
@keyframes irisPulse{50%{opacity:.55}}
.preloader-brand{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--gold-d);
  opacity:0;animation:fadeUp .8s var(--ease) 1s forwards}
.preloader-bar-wrap{width:170px;height:1px;background:rgba(201,162,75,.2);overflow:hidden}
.preloader-bar{height:100%;width:0;background:var(--gold);transition:width .2s linear}
.preloader-text{font-family:var(--data);font-size:.7rem;letter-spacing:.3em;color:var(--muted)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- CANVAS ZONE ---------- */
.canvas-zone{position:relative;height:100vh;width:100%}
.main-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:1;background:var(--film-dark)}
.canvas-scrim{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(80% 70% at 50% 50%,transparent 40%,rgba(8,7,11,.55))}

/* ---------- NAV ----------
   The nav is the one element persistently visible over BOTH the dark film
   and the light sections below it. Default (and once scrolled past the
   film) it uses the light-theme ink/gold-d colors; `.nav.on-film` — toggled
   by scroll.js while the pinned canvas-zone trigger is active — restores
   the original bright-gold-on-dark scheme for as long as the dark film is
   actually behind it. */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:7000;display:flex;
  align-items:center;justify-content:space-between;padding:18px var(--gut);
  transition:background .4s,backdrop-filter .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(247,243,234,.8);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);padding-block:14px}
.nav.scrolled.on-film{background:rgba(8,7,11,.72)}
.nav-logo{font-family:var(--display);font-weight:700;font-size:1.4rem;color:var(--gold-d)}
.nav.on-film .nav-logo{color:var(--gold)}
.nav-links{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:30px;list-style:none}
.nav-links a{font-family:var(--data);font-size:.85rem;letter-spacing:.04em;color:var(--paper);
  opacity:.85;transition:.3s;position:relative}
.nav-links a:hover{opacity:1;color:var(--gold-d)}
.nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:-6px;height:1px;
  background:var(--gold-d);transform:scaleX(0);transform-origin:inline-start;transition:transform .3s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav.on-film .nav-links a{color:var(--paper-on-dark)}
.nav.on-film .nav-links a:hover{color:var(--gold-l)}
.nav.on-film .nav-links a::after{background:var(--gold-l)}
.btn-nav-auth{font-family:var(--body);font-size:.88rem;font-weight:700;
  color:#fff;background:linear-gradient(135deg,var(--gold) 0%,#D4B87A 100%);
  border:none;cursor:pointer;padding:.6rem 1.4rem;border-radius:6px;
  box-shadow:0 2px 12px rgba(200,169,107,.35);
  transition:transform .15s,box-shadow .2s}
.btn-nav-auth:hover{transform:scale(1.05);box-shadow:0 4px 20px rgba(200,169,107,.55)}
.nav-divider{width:1px;height:22px;background:var(--line-2);flex-shrink:0}
.nav-actions{display:flex;align-items:center;gap:16px}
.lang-toggle-btn{background:none;border:none;cursor:pointer;padding:4px;
  display:flex;align-items:center;justify-content:center;outline:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.lang-toggle-btn:hover{transform:scale(1.1)}
.lang-toggle-btn:active{transform:scale(.86)}
#lang-icon{overflow:visible;color:var(--gold-d);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),color .3s;
  transform-origin:50% 50%}
.nav.on-film #lang-icon{color:var(--gold)}
#lang-icon.no-transition{transition:none !important}
#lang-text-en,#lang-text-ar{transform-origin:12px 12px;
  transition:opacity .3s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.profile-menu{position:relative}
.profile-btn{background:none;border:none;cursor:pointer;padding:4px;
  display:flex;align-items:center;justify-content:center;color:var(--gold-d);
  outline:none;-webkit-tap-highlight-color:transparent;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),color .3s}
.profile-btn:hover{transform:scale(1.1)}
.profile-btn:active{transform:scale(.86)}
.nav.on-film .profile-btn{color:var(--gold)}
.profile-dropdown{position:absolute;top:calc(100% + 12px);inset-inline-end:0;
  min-width:160px;background:var(--panel);border:1px solid var(--line-2);
  border-radius:12px;box-shadow:0 20px 50px rgba(36,31,22,.18);
  padding:6px;margin:0;display:flex;flex-direction:column;gap:2px;z-index:7100}
.profile-dropdown[hidden]{display:none}
.profile-item{display:block;width:100%;text-align:start;background:none;border:none;
  cursor:pointer;padding:.65em .9em;border-radius:8px;font-family:var(--body);
  font-size:.88rem;color:var(--paper);transition:background .2s,color .2s}
.profile-item:hover{background:rgba(201,162,75,.12);color:var(--gold-d)}
.profile-item-danger:hover{background:rgba(180,84,61,.1);color:#B4543D}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;
  transition:background .3s}
.nav-hamburger span{width:24px;height:1.5px;background:var(--gold-d);transition:.3s}
.nav.on-film .nav-hamburger span{background:var(--gold)}
.nav-drawer{position:fixed;inset:0;z-index:6999;background:rgba(247,243,234,.98);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.4s var(--ease)}
.nav-drawer.open{opacity:1;pointer-events:auto}
.nav-drawer ul{list-style:none;display:flex;flex-direction:column;gap:34px;text-align:center}
.nav-drawer a{font-family:var(--display);font-weight:700;font-size:2rem;color:var(--paper)}
.nav-drawer a:hover{color:var(--gold-d)}

/* ---------- THE THRESHOLD: door -> white bloom (Act I -> Act II seam) ----------
   A single warm gold-white flare blooms from the door at the end of the pinned
   film, washing the canvas before the light Act II registers rise over it (z5). */
.door-bloom{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 46%,
    #fff 0%, #FBE9C0 26%, rgba(231,198,110,.62) 52%, rgba(201,162,75,.18) 72%, transparent 86%)}

/* Opening: holds pure black over the eye, fades on first scroll so the film
   "opens black, then zooms out from inside the eye." Below overlays (z3) so the
   brand title reads over the black. Default 0 so degraded paths never black out;
   the film sets it to 1 at start. */
.intro-veil{position:fixed;inset:0;z-index:2;pointer-events:none;background:var(--film-dark);opacity:0}
html.reduced .intro-veil{display:none}

/* Outro: the film's whiteout resolves into --bg (now the light Act II cream)
   — same z as the bloom but later in the DOM so it paints over it; the
   registers (z5) then rise over both. Bookends the intro veil. */
.outro-veil{position:fixed;inset:0;z-index:4;pointer-events:none;background:var(--bg);opacity:0}
html.reduced .outro-veil{display:none}

/* ---------- CLOSING MOTTO — الوعد ---------- */
/* A quiet full-height closing register: the wedjat signature + the brand promise
   in Amiri display. Bookends the film (which opens on the same line) and gives
   the footer beneath it real breathing room. */
.creed-section{position:relative;z-index:5;background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:clamp(80px,14vh,150px) clamp(24px,5vw,64px)}
.creed-inner{max-width:900px;margin:0 auto}
.creed-glyph{display:block;font-size:clamp(2.4rem,6vw,4rem);color:var(--gold);
  line-height:1;margin-bottom:clamp(1.4rem,4vh,2.4rem);opacity:.92;
  text-shadow:0 0 26px rgba(201,162,75,.28)}
.creed-line{font-family:var(--display);font-weight:700;
  font-size:clamp(1.8rem,5vw,3.6rem);line-height:1.35;color:var(--paper);letter-spacing:.01em}
.creed-anim{opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.creed-section.cream-visible .creed-anim{opacity:1;transform:none}

/* ---------- FOOTER ---------- */
/* The founder's companies live here as a small, understated strip at the very
   bottom — a footer element, NOT a standalone register. "Who We Look For" stays
   its own full-height section above; this closes the page quietly beneath it. */
.footer{text-align:center;padding-block:clamp(40px,6vh,64px);padding-inline:var(--gut);
  background:var(--bg);position:relative;z-index:5;border-top:1px solid var(--line)}
.footer-cap{font-family:var(--data);font-size:.66rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin-bottom:clamp(16px,2.5vh,22px)}
.footer-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(10px,1.5vw,20px);max-width:840px;margin:0 auto}
.footer-logo-chip{height:clamp(32px,4.6vw,44px);display:flex;align-items:center;justify-content:center;
  padding:6px 12px;background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:8px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.footer-logo-chip:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(36,31,22,.08)}
.footer-logo-chip img{max-height:100%;width:auto;object-fit:contain;display:block}
.footer-copy{font-family:var(--data);color:var(--faint);font-size:.76rem;letter-spacing:.08em;
  margin-top:clamp(22px,3.5vh,30px)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .nav-links{display:none}
  .nav-divider{display:none}
  .nav-hamburger{display:flex}
  .wedjat-rail{display:none}
}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .door-bloom{display:none}
}

/* ============================================================
   MEET THE SHARK — اتعرّف على القرش
   Light register (parchment): gold-d accents, Cairo type
   ============================================================ */

.shark-section {
  position: relative;
  z-index: 5;
  background: var(--bg);
  border-top: 1px solid var(--line);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(60px, 10vh, 120px) clamp(24px, 5vw, 64px);
  overflow: hidden;
  scroll-snap-align: start;
  /* the film's pin releases with real scroll momentum — without this, a fling
     sails straight past the investor register (proximity only snaps if the
     scroll ENDS nearby). "always" forbids inertial scrolls from passing over
     this snap point: the story is forced to pause on the shark once. */
  scroll-snap-stop: always;
}

.shark-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  direction: ltr; /* force physical LTR column order: image left, text right */
}

/* English: mirror the register — text starts left (reading direction), portrait right */
html[dir="ltr"] .shark-inner {
  grid-template-columns: 3fr 2fr;
}
@media (min-width: 768px) {
  html[dir="ltr"] .shark-image-col { order: 2; }
  html[dir="ltr"] .shark-text-col  { order: 1; }
}

/* ---- Image column ---- */

@media (min-width: 768px) {
  .shark-image-col {
    transform: translateX(-100vw);
    transition:
      transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      opacity 0.55s ease;
  }
  .shark-section.shark-visible .shark-image-col {
    transform: translateX(0);
    opacity: 1;
  }
  html[dir="ltr"] .shark-image-col {
    transform: translateX(100vw);
  }
}

@media (max-width: 767px) {
  .shark-image-col {
    transform: translateY(-60px);
    transition:
      transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      opacity 0.55s ease;
  }
  .shark-section.shark-visible .shark-image-col {
    transform: translateY(0);
    opacity: 1;
  }
}

.shark-image-col {
  will-change: transform;
  opacity: 0;
}

.shark-frame-wrap {
  filter:
    drop-shadow(0 0 32px rgba(201, 168, 76, 0.28))
    drop-shadow(0 20px 48px rgba(0, 0, 0, 0.45));
}

.shark-frame {
  border-radius: 20px;
  clip-path: polygon(0 0, 100% 0, 100% 87%, 81% 100%, 0 100%);
  overflow: hidden;
}

.shark-portrait {
  width: 100%;
  height: clamp(400px, 65vh, 680px);
  object-fit: cover;
  display: block;
}

/* ---- Text column ---- */

.shark-text-col {
  direction: rtl;
}
html[dir="ltr"] .shark-text-col {
  direction: ltr;
}

.shark-anim {
  will-change: transform, opacity;
  opacity: 0;
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: calc(var(--i, 0) * 150ms + 560ms);
}

@media (min-width: 768px) {
  .shark-anim { transform: translateX(40px); }
  .shark-section.shark-visible .shark-anim { transform: translateX(0); opacity: 1; }
}

@media (max-width: 767px) {
  .shark-anim {
    transform: translateY(22px);
    transition-delay: calc(var(--i, 0) * 120ms + 420ms);
  }
  .shark-section.shark-visible .shark-anim { transform: translateY(0); opacity: 1; }
}

.shark-title {
  font-family: "Cairo", serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--paper);
  line-height: 1.1;
  margin-bottom: 0.35em;
}

.shark-name {
  font-family: "Cairo", sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 600;
  color: var(--gold-d);
  margin-bottom: 1.2em;
  letter-spacing: 0.015em;
}

.shark-bio {
  font-family: "Cairo", sans-serif;
  font-size: clamp(0.93rem, 1.4vw, 1.05rem);
  color: var(--muted);
  line-height: 1.95;
  margin-bottom: 1.6em;
}

.shark-bullets {
  list-style: none;
  margin-bottom: 2.2em;
  display: flex;
  flex-direction: column;
  gap: 0.65em;
}

.shark-bullets li {
  font-family: "Cairo", sans-serif;
  font-size: clamp(0.88rem, 1.3vw, 1rem);
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
}

.shark-bullets li::before {
  content: "→";
  color: var(--gold-d);
  font-size: 0.85em;
  flex-shrink: 0;
  margin-top: 0.2em;
}

/* ---- Stats row ---- */

.shark-stats {
  display: flex;
  border-top: 1px solid var(--line-2);
  padding-top: 1.6em;
}

.shark-stat {
  flex: 1;
  padding-inline: 1.2em;
}

.shark-stat:first-child { padding-inline-start: 0; }
.shark-stat:last-child  { padding-inline-end: 0; }

.shark-stat + .shark-stat {
  border-inline-start: 1px solid var(--line-2);
}

.shark-stat-num {
  display: block;
  font-family: "Cairo", sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  color: var(--gold-d);
  line-height: 1;
  margin-bottom: 0.3em;
  font-variant-numeric: tabular-nums;
}

.shark-stat-label {
  display: block;
  font-family: "Cairo", sans-serif;
  font-size: clamp(0.76rem, 1.1vw, 0.88rem);
  color: var(--muted);
  line-height: 1.45;
}

/* ---- Mobile layout ---- */

@media (max-width: 767px) {
  .shark-section {
    padding: clamp(48px, 8vh, 80px) clamp(20px, 5vw, 32px);
  }
  .shark-inner {
    grid-template-columns: 1fr;
    direction: rtl;
    gap: 2rem;
  }
  .shark-portrait {
    height: clamp(260px, 55vw, 380px);
  }
  .shark-stat-num { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .shark-stat-label { font-size: 0.75rem; }
  .shark-stat { padding-inline: 0.8em; }
}

/* CTA + footer: base light .footer styles apply (parchment register) */

/* ============================================================
   HOW IT WORKS — الرحلة
   Glass-card register beneath Meet the Shark. Logical properties
   throughout so AR/EN mirror automatically off html[dir] — no
   direction-specific overrides needed. Wedjat-fraction watermark
   numerals (½ ¼ ⅛ 1/16) keep the signature motif in the new layout.
   ============================================================ */

.how-section {
  position: relative;
  z-index: 5;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: clamp(70px, 12vh, 130px) clamp(24px, 5vw, 64px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
}

.how-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.how-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: flex-start;
  font-family: var(--data);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-d);
  margin-bottom: 1rem;
}
.how-label::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.how-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.15;
  color: var(--paper);
  margin-bottom: clamp(2.6rem, 6vh, 4rem);
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.how-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 2.4rem 2rem;
  border-radius: 20px;
  border: 1px solid rgba(94, 74, 36, .12);
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 14px 40px rgba(36, 31, 22, .07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateY(0) scale(1);
  transition: transform .35s cubic-bezier(.2, .9, .2, 1), border-color .35s, box-shadow .35s;
}
.how-card:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: rgba(201, 162, 75, .4);
  box-shadow: 0 20px 50px rgba(36, 31, 22, .1);
}

.how-card .glass-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%, rgba(201, 162, 75, .35) 49.5%,
    rgba(201, 162, 75, .35) 50.5%, transparent 100%);
  transform: translateX(-120%);
  transition: transform .8s cubic-bezier(.25, .1, .25, 1);
}
.how-card:hover .glass-shine { transform: translateX(120%); }

.how-card .glass-edge {
  position: absolute;
  top: 0; inset-inline: 0;
  height: 2px;
  z-index: 1;
  background: linear-gradient(135deg, var(--gold) 0%, #D4B87A 100%);
  opacity: 0;
  transition: opacity .3s;
}
.how-card:hover .glass-edge { opacity: 1; }

.how-num {
  position: absolute;
  top: 1rem;
  inset-inline-start: 1.4rem;
  z-index: 0;
  font-family: var(--data);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1;
  color: rgba(94, 74, 36, .14);
  pointer-events: none;
}

.how-icon {
  position: relative;
  z-index: 2;
  width: clamp(38px, 3vw, 52px);
  height: clamp(38px, 3vw, 52px);
  margin-inline-start: auto;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 162, 75, .1);
  border: 1px solid rgba(201, 162, 75, .28);
  border-radius: 12px;
  backdrop-filter: blur(4px);
}
.how-icon svg { width: 20px; height: 20px; color: var(--gold-d); }

.how-card h3 {
  position: relative;
  z-index: 2;
  font-family: "Cairo", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--paper);
  margin-bottom: .6rem;
}

.how-card p {
  position: relative;
  z-index: 2;
  font-family: "Cairo", sans-serif;
  font-size: .96rem;
  color: var(--muted);
  line-height: 1.8;
  margin: 0;
}

.how-anim {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.25, .46, .45, .94);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.how-section.cream-visible .how-anim {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 767px) {
  .how-section { padding-inline: clamp(20px, 5vw, 32px); }
  .how-grid { grid-template-columns: 1fr; gap: 14px; }
  .how-card { padding: 1.8rem 1.4rem; }
}

/* ============================================================
   WHO WE LOOK FOR — من نبحث عنه
   Glass-card register beneath How It Works. Same recipe/logical-
   property approach as .how-card; reuses the previously-unused
   criteria eyebrow + c1-c4 keys already in js/i18n.js.
   ============================================================ */

.criteria-section {
  position: relative;
  z-index: 5;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-block-start: clamp(70px, 12vh, 130px);
  padding-block-end: clamp(110px, 18vh, 190px);
  padding-inline: clamp(24px, 5vw, 64px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
}

.criteria-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.criteria-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: flex-start;
  font-family: var(--data);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-d);
  margin-bottom: 1rem;
}
.criteria-label::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold-d);
}

.criteria-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.15;
  color: var(--paper);
  margin-bottom: clamp(2.6rem, 6vh, 4rem);
}

.criteria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.criteria-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 2.2rem 2rem;
  border-radius: 20px;
  border: 1px solid rgba(94, 74, 36, .12);
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 14px 40px rgba(36, 31, 22, .07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.criteria-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 75, .4);
  box-shadow: 0 20px 50px rgba(36, 31, 22, .1);
}

.criteria-card::before {
  content: '\201D';
  font-family: var(--display);
  font-size: 5.5rem;
  line-height: .7;
  color: rgba(94, 74, 36, .1);
  position: absolute;
  top: 1.1rem;
  inset-inline-end: 1.3rem;
  z-index: 0;
  pointer-events: none;
}

.criteria-icon {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.criteria-card h3 {
  position: relative;
  z-index: 1;
  font-family: "Cairo", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--paper);
  margin-bottom: .6rem;
}

.criteria-card p {
  position: relative;
  z-index: 1;
  font-family: "Cairo", sans-serif;
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.85;
}

.criteria-anim {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.25, .46, .45, .94);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.criteria-section.cream-visible .criteria-anim {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 767px) {
  .criteria-section { padding-inline: clamp(20px, 5vw, 32px); }
  .criteria-grid { grid-template-columns: 1fr; gap: 14px; }
  .criteria-card { padding: 1.8rem 1.4rem; }
}

/* ---------- AUTH MODAL ---------- */
.auth-modal-overlay {
  position: fixed; inset: 0; z-index: 10500;
  background: rgba(36,31,22,.18); backdrop-filter: blur(18px) saturate(1.4);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.auth-modal-overlay.open { opacity: 1; pointer-events: all; }
.auth-modal-card {
  width: 100%; max-width: 420px; position: relative;
  background: linear-gradient(180deg,rgba(201,162,75,.1) 0%,transparent 40%),#FFFFFF;
  border: 1px solid rgba(150,110,40,.2); border-radius: 22px;
  padding: clamp(24px,5vw,42px);
  box-shadow: 0 40px 100px rgba(36,31,22,.28);
  transform: translateY(18px);
  transition: transform .32s var(--ease);
}
.auth-modal-overlay.open .auth-modal-card { transform: translateY(0); }
.auth-modal-close {
  position: absolute; top: 16px; inset-inline-end: 18px;
  background: none; border: none; color: var(--muted); font-size: 1rem;
  cursor: pointer; padding: 6px 10px; line-height: 1;
  transition: color .2s;
}
.auth-modal-close:hover { color: var(--paper); }
.auth-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--data); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-d); margin-bottom: 14px;
}
.auth-eyebrow-glyph { font-size: 2rem; }
.auth-tabs {
  display: flex; gap: 4px; margin-bottom: 22px;
  background: rgba(36,31,22,.04); border: 1px solid rgba(36,31,22,.1);
  border-radius: 12px; padding: 4px;
}
.auth-tab {
  flex: 1; padding: 9px 0; border-radius: 9px;
  font-size: .86rem; font-weight: 600; color: var(--muted);
  background: none; border: none; cursor: pointer; font-family: var(--body);
  transition: color .2s, background .2s;
}
.auth-tab.active { color: #fff; background: var(--gold-d); }
.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; font-size: .8rem; font-weight: 600; color: var(--paper); margin-bottom: 7px; }
.auth-field input {
  width: 100%; background: rgba(36,31,22,.03); border: 1px solid rgba(36,31,22,.12);
  border-radius: 12px; padding: 13px 15px; color: var(--paper); font-size: .95rem;
  font-family: var(--body); transition: border-color .2s, background .2s;
}
.auth-field input:focus { outline: none; border-color: rgba(150,110,40,.5); background: rgba(150,110,40,.06); }
.auth-field-hint { display: block; font-size: .72rem; color: var(--muted); margin-top: 5px; }
.auth-msg { min-height: 20px; font-size: .84rem; margin: 4px 0 12px; }
.auth-msg.err { color: #B4543D; }
.auth-msg.ok  { color: #3F8A49; }
.auth-submit-btn { width: 100%; border-radius: 13px; padding: 14px 0; font-size: .96rem; }
.auth-spinner {
  display: inline-flex; animation: authSpin .7s linear infinite;
  margin-inline-end: 6px; vertical-align: middle;
}
@keyframes authSpin { to { transform: rotate(360deg); } }