/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  /* brand palette (exact) */
  --bg:#014a41;
  --bg-deep:#01312D;
  --bg-deeper:#001f24;
  --lime:#bdfd08;
  --mint:#c7f2df;
  --purple:#6100fd;
  --paper:#f5fffe;
  --ink:#001f24;

  /* derived lines / surfaces */
  --line:rgba(245,255,254,.10);
  --line-strong:rgba(245,255,254,.20);
  --surface:rgba(245,255,254,.035);
  --surface-2:rgba(245,255,254,.06);

  /* typography */
  --font-en:'Space Grotesk', system-ui, sans-serif;
  --font-ar:'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --font: var(--font-en);

  /* radii */
  --r-sm:12px;
  --r:18px;
  --r-lg:28px;
  --r-xl:40px;

  /* glows / shadows */
  --shadow-card:0 18px 40px -24px rgba(0,0,0,.7);
  --shadow-float:0 40px 90px -40px rgba(0,0,0,.8);
  --glow-lime:0 0 60px -10px rgba(189,253,8,.45);

  --maxw:1240px;
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--paper);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background:
    radial-gradient(1200px 700px at 78% -8%, #02584d 0%, transparent 55%),
    radial-gradient(1000px 800px at 0% 12%, #013b34 0%, transparent 50%),
    linear-gradient(180deg, #014a41 0%, #01312d 60%, #001f24 100%);
  background-attachment:fixed;
}
/* Arabic gets a touch more vertical breathing room */
html[lang="ar"]{ --font: var(--font-ar); }
html[lang="ar"] body{ font-size:18px; line-height:1.75; }

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{ background:var(--lime); color:#011a18 }

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
@media (max-width:640px){ .wrap{padding:0 20px} }

/* ============================================================
   3. SHARED TYPE
   ============================================================ */
/* Editorial eyebrow: a faded mono section number + a lime pill badge.
   In RTL the inline-flex row mirrors automatically (number sits on the right). */
.kicker{ display:inline-flex; align-items:center; gap:11px; }
.kicker-num{
  font-family:var(--font-mono); font-weight:600; font-size:12px; letter-spacing:.05em;
  color:rgba(199,242,223,.55); flex:none;
}
.kicker-pill{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--lime); color:#014a41;
  padding:6px 14px; border-radius:999px;
  font-family:var(--font-mono); font-weight:700;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; line-height:1;
}
.kicker-dot{ width:6px; height:6px; border-radius:50%; background:#014a41; flex:none; }
html[lang="ar"] .kicker-pill{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:12px; }
@media (max-width:600px){ .kicker-pill{ font-size:10px } html[lang="ar"] .kicker-pill{ font-size:11px } }

/* Highlight word: thick lime brushstroke underline sitting behind the text */
.hl{
  background:linear-gradient(var(--lime),var(--lime)) no-repeat;
  background-position:0 88%; background-size:100% .26em;
  border-radius:3px; padding:0 .04em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* Final CTA sits on a lime background — invert the eyebrow + highlight to teal */
.final .kicker-pill{ background:#014a41; color:var(--lime); }
.final .kicker-dot{ background:var(--lime); }
.final .kicker-num{ color:rgba(1,26,24,.5); }
.final .hl{ background-image:linear-gradient(#014a41,#014a41); }

.h-display{
  font-weight:700;
  font-size:clamp(48px, 8.2vw, 116px);
  line-height:.9;
  letter-spacing:-0.035em;
  text-wrap:balance;
  margin:0;
}
html[lang="ar"] .h-display{ line-height:1.08; letter-spacing:0; font-size:clamp(40px, 7vw, 96px); }

.h-1{ font-weight:800; font-size:clamp(2.5rem, 5vw, 4.5rem); line-height:1.05; letter-spacing:-0.03em; text-wrap:balance; margin:0; color:var(--paper); }
html[lang="ar"] .h-1{ font-weight:700; line-height:1.25; letter-spacing:0; }

.h-2{ font-weight:600; font-size:clamp(26px, 3.4vw, 44px); line-height:1.04; letter-spacing:-0.02em; margin:0; }
html[lang="ar"] .h-2{ line-height:1.25; letter-spacing:0; }

.lede{
  font-size:clamp(17px, 1.35vw, 21px);
  color:rgba(245,255,254,.72);
  max-width:56ch;
  text-wrap:pretty;
  margin:0;
}
.accent-lime{ color:var(--lime) }
.accent-ital{ font-style:italic; font-weight:500; }

/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 24px; border-radius:999px;
  font-weight:600; font-size:15.5px;
  transition:transform .12s ease, background .2s ease, box-shadow .25s ease, color .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.985) }
.btn-lime{ background:var(--lime); color:#011a18; box-shadow:0 10px 34px -12px rgba(189,253,8,.75); }
.btn-lime:hover{ transform:translateY(-2px); box-shadow:0 18px 48px -12px rgba(189,253,8,.9); }
.btn-ghost{ background:transparent; color:var(--paper); border:1px solid var(--line-strong); }
.btn-ghost:hover{ background:var(--surface-2); border-color:var(--lime); }
.btn svg{ width:18px;height:18px }

/* App-store style buttons */
.store{
  display:inline-flex; align-items:center; gap:12px;
  background:#001a1e; color:var(--paper);
  border:1px solid var(--line-strong); border-radius:15px;
  padding:11px 20px;
  transition:transform .12s ease, border-color .2s ease, background .2s ease;
}
.store:hover{ transform:translateY(-2px); border-color:var(--lime); }
.store:active{ transform:translateY(0) }
.store .ic{width:25px;height:25px;flex:none}
.store small{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;font-family:var(--font-mono)}
html[lang="ar"] .store small{font-family:var(--font-ar);letter-spacing:0;font-size:11px;text-transform:none}
.store strong{display:block;font-weight:600;font-size:16px;letter-spacing:-0.01em}

/* RTL: flip directional arrows */
html[dir="rtl"] .arrow-rtl{ transform:scaleX(-1) }

/* ============================================================
   5. NAVBAR
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid transparent;
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
.nav.scrolled{
  background:rgba(1,31,36,.72);
  backdrop-filter:saturate(160%) blur(16px);
  border-bottom-color:var(--line);
}
.nav-inner{ display:flex; align-items:center; gap:24px; padding:16px 0; }
.brand{ display:flex; align-items:center; gap:11px; flex:none }
.brand-mark{ width:30px; height:auto; flex:none; display:block }
.brand-word{ font-weight:700; letter-spacing:.02em; font-size:20px; color:var(--paper); line-height:1; }
html[lang="ar"] .brand-word{ letter-spacing:0; font-size:24px; }

.nav-links{ display:flex; gap:4px; margin-inline:auto; }
.nav-links a{
  padding:10px 16px; border-radius:999px;
  font-size:14.5px; font-weight:500; color:rgba(245,255,254,.74);
  transition:color .2s, background .2s;
}
.nav-links a:hover{ color:var(--paper); background:var(--surface-2); }

.nav-cta{ display:flex; gap:12px; align-items:center; flex:none }
.nav-mobile-toggle{ display:none; padding:11px; border-radius:12px; border:1px solid var(--line-strong) }

@media (max-width:980px){
  .nav-links{ display:none }
  .nav-mobile-toggle{ display:inline-flex }
  .nav-cta .btn-lime{ display:none }
}

/* --- elegant pill language toggle --- */
.lang-pill{
  position:relative; display:inline-flex; align-items:center;
  border:1px solid var(--line-strong); border-radius:999px;
  padding:4px; gap:0; background:rgba(0,31,36,.4);
}
.lang-pill .knob{
  position:absolute; top:4px; bottom:4px; inset-inline-start:4px;
  width:calc(50% - 4px); border-radius:999px;
  background:var(--lime);
  transition:inset-inline-start .32s cubic-bezier(.6,.05,.2,1);
  box-shadow:0 4px 14px -4px rgba(189,253,8,.7);
}
.lang-pill.ar .knob{ inset-inline-start:50%; }
.lang-pill button{
  position:relative; z-index:1;
  padding:7px 14px; border-radius:999px; min-width:46px;
  font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  color:rgba(245,255,254,.65); transition:color .25s;
}
html[lang="ar"] .lang-pill button{ font-family:var(--font-ar); font-size:13px; }
.lang-pill button.on{ color:#011a18; }

/* ============================================================
   6. DECORATIVE MOTIFS (checker + glow)
   ============================================================ */
.checker{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
  background-image:
    linear-gradient(135deg, rgba(189,253,8,.06) 25%, transparent 25% 50%, rgba(189,253,8,.06) 50% 75%, transparent 75%);
  background-size:60px 60px;
  animation:checkerDrift 24s linear infinite;
}
@keyframes checkerDrift{ to{ background-position:60px 60px } }
.checker.lg{ background-size:120px 120px; opacity:.7; }
@keyframes checkerDriftLg{ to{ background-position:-120px 120px } }
.checker.lg{ animation:checkerDriftLg 40s linear infinite; }

.glow{
  position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(60px); opacity:.5;
}

/* ============================================================
   7. HERO
   ============================================================ */
.hero{ position:relative; padding:56px 0 90px; overflow:hidden; }
.hero .checker{
  mask-image:radial-gradient(ellipse 80% 70% at 72% 38%, #000 25%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 72% 38%, #000 25%, transparent 72%);
}
html[dir="rtl"] .hero .checker{
  mask-image:radial-gradient(ellipse 80% 70% at 28% 38%, #000 25%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 28% 38%, #000 25%, transparent 72%);
}
.hero-glow{ width:620px; height:620px; top:-6%; inset-inline-end:-4%;
  background:radial-gradient(circle, rgba(189,253,8,.22), transparent 62%); }

.hero-inner{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
  position:relative; z-index:2;
}
@media (max-width:960px){ .hero-inner{ grid-template-columns:1fr; gap:48px } }
.hero-copy{ display:flex; flex-direction:column; gap:26px; }

/* creative type treatment */
.hero-h1{ font-weight:700; }
.hero-h1 .line2{ display:block; }
.hero-h1 .mark{
  position:relative; color:var(--lime); display:inline-block;
}
.hero-h1 .mark::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:.04em; height:.16em;
  background:linear-gradient(90deg,
    var(--lime) 0 12.5%, transparent 12.5% 25%, var(--lime) 25% 37.5%, transparent 37.5% 50%,
    var(--lime) 50% 62.5%, transparent 62.5% 75%, var(--lime) 75% 87.5%, transparent 87.5%);
  opacity:.4; border-radius:2px;
}
.hero-ctas{ display:flex; gap:13px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  color:rgba(245,255,254,.6); font-size:13.5px; font-family:var(--font-mono); }
html[lang="ar"] .hero-meta{ font-family:var(--font-ar); font-size:15px; }
.hero-meta .star{ color:var(--lime) }
.hero-meta .sep{ opacity:.4 }

/* ============================================================
   8. PHONE MOCKUP (reusable iPhone frame)
   ============================================================ */
.phone-stage{ position:relative; display:flex; align-items:center; justify-content:center; min-height:560px; }
.phone-stage .glow{ width:78%; aspect-ratio:1; background:radial-gradient(circle, rgba(189,253,8,.3), transparent 60%); }

.phone{
  --pw:300px;
  position:relative; width:var(--pw); aspect-ratio:9/19.5;
  background:linear-gradient(160deg,#0c1410,#000); 
  border-radius:46px; padding:9px;
  box-shadow:var(--shadow-float), 0 0 0 2px rgba(255,255,255,.06), inset 0 0 0 1.5px rgba(255,255,255,.05);
  z-index:2;
}
.phone.float{ animation:phoneFloat 6s ease-in-out infinite; }
@keyframes phoneFloat{ 0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)) } 50%{ transform:translateY(-14px) rotate(var(--rot,0deg)) } }
.phone.tilt{ --rot:-4deg; }

.phone-screen{
  position:relative; width:100%; height:100%; border-radius:38px; overflow:hidden;
  background:linear-gradient(180deg,#02312c 0%, #014a41 60%, #013a34 100%);
  display:flex; flex-direction:column;
}
/* dynamic island */
.island{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:84px; height:25px; background:#000; border-radius:14px; z-index:8;
}
/* status bar */
.statusbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 22px 0; font-size:12px; font-weight:600; font-family:var(--font-mono);
  position:relative; z-index:7;
}
.statusbar .right{ display:flex; align-items:center; gap:6px }
.statusbar .bars{ display:inline-flex; align-items:flex-end; gap:2px; height:11px }
.statusbar .bars i{ width:3px; background:var(--paper); border-radius:1px; display:block }
.statusbar .batt{ width:22px; height:11px; border:1.4px solid var(--paper); border-radius:3px; position:relative; padding:1.5px }
.statusbar .batt::after{ content:""; position:absolute; inset-inline-end:-3px; top:3px; width:2px; height:4px; background:var(--paper); border-radius:0 1px 1px 0 }
.statusbar .batt span{ display:block; height:100%; width:75%; background:var(--lime); border-radius:1px }

/* ---- screen: booking (hero) ---- */
.scr{ flex:1; display:flex; flex-direction:column; padding:14px 16px 0; min-height:0; }
.scr-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.scr-hello{ font-size:10.5px; font-family:var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(245,255,254,.6) }
html[lang="ar"] .scr-hello{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:12px }
.scr-title{ font-size:19px; font-weight:600; letter-spacing:-0.01em; margin-top:3px }
.scr-ava{ width:36px;height:36px;border-radius:50%;background:var(--lime);color:#011a18;display:grid;place-items:center;font-weight:700;font-size:14px }

/* pitch photo placeholder */
.scr-photo{
  position:relative; border-radius:18px; aspect-ratio:16/10; overflow:hidden;
  background:linear-gradient(135deg,#0a7a4f,#024a41);
  display:flex; flex-direction:column; justify-content:flex-end; padding:12px;
}
.scr-photo::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 13px);
}
.scr-photo .center-circle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:34px; border:1.6px solid rgba(255,255,255,.35); border-radius:50%/38% }
.scr-photo .midline{ position:absolute; top:0; bottom:0; left:50%; width:1.4px; background:rgba(255,255,255,.22) }
.scr-photo .ph-tag{
  position:relative; z-index:1; align-self:flex-start;
  background:rgba(0,26,24,.7); backdrop-filter:blur(4px);
  border-radius:999px; padding:5px 11px; font-size:10.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:5px;
}
.scr-photo .ph-tag .live-dot{ width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime) }
.scr-photo .ph-rate{ position:absolute; top:12px; inset-inline-end:12px; z-index:1;
  background:rgba(0,26,24,.7); border-radius:999px; padding:5px 9px; font-size:10.5px; font-weight:600; color:var(--lime); display:inline-flex; gap:4px; align-items:center }

.scr-name{ display:flex; align-items:baseline; justify-content:space-between; margin:13px 0 3px }
.scr-name b{ font-size:15px; font-weight:600; letter-spacing:-0.01em }
.scr-name .price{ font-size:14px; font-weight:600 }
.scr-name .price small{ font-size:9.5px; opacity:.6; font-weight:400; font-family:var(--font-mono) }
html[lang="ar"] .scr-name .price small{ font-family:var(--font-ar); font-size:11px }
.scr-sub{ font-size:11px; color:rgba(245,255,254,.55); font-family:var(--font-mono); display:flex; gap:8px; }
html[lang="ar"] .scr-sub{ font-family:var(--font-ar); font-size:12.5px }

.scr-slots-label{ font-size:11px; font-weight:600; margin:15px 0 8px; color:rgba(245,255,254,.8) }
.chips{ display:flex; gap:7px; flex-wrap:wrap; }
.chip{
  padding:8px 12px; border-radius:11px; font-size:12px; font-family:var(--font-mono);
  border:1px solid var(--line-strong); color:rgba(245,255,254,.75);
}
html[lang="ar"] .chip{ font-family:var(--font-ar); font-size:13.5px }
.chip.sel{ background:var(--lime); color:#011a18; border-color:var(--lime); font-weight:600 }
.chip.dim{ opacity:.35; text-decoration:line-through }

.scr-book{
  margin-top:auto; margin-bottom:14px;
  background:var(--lime); color:#011a18; border-radius:15px; padding:14px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:14.5px; box-shadow:0 12px 30px -12px rgba(189,253,8,.6);
}

/* floating chips around phone */
.float-chip{
  position:absolute; z-index:3;
  background:var(--mint); color:#001f24;
  padding:11px 15px; border-radius:15px;
  box-shadow:var(--shadow-card);
  display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600;
}
.float-chip .ic{ width:30px;height:30px;border-radius:9px;background:#001f24;color:var(--lime);display:grid;place-items:center;flex:none }
.float-chip.a{ top:6%; inset-inline-start:-3%; animation:phoneFloat 7s ease-in-out infinite; }
.float-chip.b{ bottom:12%; inset-inline-end:-5%; background:var(--lime); animation:phoneFloat 6.5s ease-in-out .8s infinite; }

/* ============================================================
   9. TRUSTED-BY / FEATURED-IN STRIP
   ============================================================ */
.trusted{ position:relative; z-index:2; padding:8px 0 4px; }
.trusted .label{ text-align:center; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(245,255,254,.45); margin-bottom:22px; }
html[lang="ar"] .trusted .label{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:13px }
.logos{ display:flex; align-items:center; justify-content:center; gap:clamp(26px,5vw,64px); flex-wrap:wrap; opacity:.7; }
.logos .lg{ display:flex; align-items:center; gap:9px; color:rgba(245,255,254,.62); font-weight:600; font-size:18px; letter-spacing:-0.01em; }
.logos .lg svg{ width:22px; height:22px; opacity:.85 }
.logos .lg .mono{ font-family:var(--font-mono); font-weight:500; font-size:15px }

/* ============================================================
   10. STATS STRIP (animated counters)
   ============================================================ */
.stats{
  position:relative; z-index:2;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(0,31,36,.35); margin-top:46px;
}
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width:720px){ .stats-grid{ grid-template-columns:repeat(2,1fr) } }
.stat{ padding:34px 24px; }
.stat:not(:last-child){ border-inline-end:1px solid var(--line) }
@media (max-width:720px){
  .stat:nth-child(2){ border-inline-end:none }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line) }
}
.stat .num{ font-size:clamp(34px,4vw,52px); font-weight:700; letter-spacing:-0.03em; color:var(--lime); line-height:1; }
.stat .num .suf{ color:var(--paper); font-size:.5em; margin-inline-start:3px; vertical-align:super; font-weight:600 }
.stat .lbl{ margin-top:10px; font-size:13px; color:rgba(245,255,254,.62); font-family:var(--font-mono); letter-spacing:.05em; text-transform:uppercase; }
html[lang="ar"] .stat .lbl{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:14.5px }

/* ============================================================
   11. SECTION BASE
   ============================================================ */
section.sec{ padding:130px 0; position:relative; }
@media (max-width:760px){ section.sec{ padding:84px 0 } }
.sec-head{ display:flex; flex-direction:column; align-items:flex-start; gap:0; margin-bottom:48px; max-width:820px; }
.sec-head.center{ margin-inline:auto; align-items:center; text-align:center; }
.sec-head .kicker{ margin-bottom:20px; }
.sec-head .h-1{ width:100%; }
.sec-head .lede{ font-size:clamp(1rem,1.5vw,1.25rem); line-height:1.6; color:rgba(199,242,223,.7); max-width:580px; margin-top:16px; }
.sec-head.center .lede{ margin-inline:auto; }
@media (max-width:760px){ .sec-head{ margin-bottom:32px } }

/* ============================================================
   12. FEATURES (bento grid)
   ============================================================ */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; grid-auto-rows:minmax(150px,auto); }
@media (max-width:900px){ .bento{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .bento{ grid-template-columns:1fr } }
.bento-card{
  position:relative; overflow:hidden;
  background:var(--bg-deep); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px; box-shadow:var(--shadow-card);
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.bento-card:hover{ transform:translateY(-4px); border-color:rgba(189,253,8,.45); box-shadow:var(--shadow-card), var(--glow-lime); }
.bento-card::after{ content:""; position:absolute; inset-inline-end:-50px; top:-50px; width:170px; height:170px; border-radius:50%;
  background:radial-gradient(circle, rgba(189,253,8,.12), transparent 70%); opacity:0; transition:opacity .3s; }
.bento-card:hover::after{ opacity:1 }
/* spans */
.bento-card.wide{ grid-column:span 4; }
.bento-card.tall{ grid-column:span 2; grid-row:span 2; }
.bento-card.half{ grid-column:span 3; }
.bento-card.third{ grid-column:span 2; }
@media (max-width:900px){
  .bento-card.wide,.bento-card.tall,.bento-card.half,.bento-card.third{ grid-column:span 1; grid-row:auto; }
}
@media (max-width:560px){
  .bento-card.wide,.bento-card.tall,.bento-card.half,.bento-card.third{ grid-column:1; }
}
.f-ic{ width:52px; height:52px; border-radius:15px; background:var(--mint); color:#001f24; display:grid; place-items:center; margin-bottom:22px; }
.f-ic svg{ width:26px; height:26px }
.bento-card h3{ font-size:21px; font-weight:600; letter-spacing:-0.015em; margin:0 0 9px }
.bento-card p{ margin:0; color:rgba(245,255,254,.65); font-size:14.5px; }
html[lang="ar"] .bento-card p{ line-height:1.8 }
.bento-card .idx{ position:absolute; inset-inline-end:24px; top:22px; font-family:var(--font-mono); font-size:12px; color:rgba(245,255,254,.3) }
html[lang="ar"] .bento-card .idx{ font-family:var(--font-ar) }

/* feature spotlight (the lime moment) */
.bento-card.spotlight{ background:var(--lime); color:#011a18; border-color:transparent; }
.bento-card.spotlight .f-ic{ background:#011a18; color:var(--lime) }
.bento-card.spotlight p{ color:rgba(1,26,24,.72) }
.bento-card.spotlight .idx{ color:rgba(1,26,24,.4) }
.bento-card.spotlight:hover{ box-shadow:var(--shadow-card) }
.bento-card.spotlight .big-stat{ font-size:clamp(40px,5vw,64px); font-weight:700; letter-spacing:-0.03em; line-height:1; margin-top:10px }

/* tall card decorative mini-pitch */
.mini-pitch{ margin-top:20px; border-radius:16px; aspect-ratio:1/1.1; position:relative; overflow:hidden;
  background:linear-gradient(160deg,#024a41,#001f24); border:1px solid var(--line); }
.mini-pitch::before{ content:""; position:absolute; inset:14px; border:1.4px solid rgba(189,253,8,.3); border-radius:8px;
  background:
    linear-gradient(rgba(189,253,8,.18),rgba(189,253,8,.18)) center/100% 1.4px no-repeat; }
.mini-pitch::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border:1.4px solid rgba(189,253,8,.3); border-radius:50% }
.mini-pin{ position:absolute; width:14px; height:14px; border-radius:50% 50% 50% 0; background:var(--lime); transform:rotate(-45deg); box-shadow:0 0 12px rgba(189,253,8,.7) }
.mini-pin.p1{ top:30%; left:32% } .mini-pin.p2{ top:54%; left:60% } .mini-pin.p3{ top:40%; left:74% }

/* ============================================================
   13. WHY CENTERHA (comparison)
   ============================================================ */
.why{ position:relative; }
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
@media (max-width:820px){ .compare{ grid-template-columns:1fr } }
.compare-col{ border-radius:var(--r-lg); padding:36px; border:1px solid var(--line); }
.compare-col.old{ background:var(--surface); }
.compare-col.new{ background:linear-gradient(160deg, rgba(189,253,8,.10), var(--bg-deep)); border-color:rgba(189,253,8,.3); box-shadow:var(--glow-lime); }
.compare-col h3{ display:flex; align-items:center; gap:12px; font-size:22px; font-weight:600; margin:0 0 6px; letter-spacing:-0.01em }
.compare-col .tagline{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(245,255,254,.5); margin-bottom:24px }
html[lang="ar"] .compare-col .tagline{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:13.5px }
.compare-col.new .tagline{ color:var(--lime) }
.cmp-badge{ width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none }
.cmp-badge.x{ background:rgba(245,255,254,.08); color:rgba(245,255,254,.6) }
.cmp-badge.ok{ background:var(--lime); color:#011a18 }
.cmp-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px }
.cmp-list li{ display:flex; gap:13px; align-items:flex-start; font-size:15.5px; color:rgba(245,255,254,.82) }
html[lang="ar"] .cmp-list li{ line-height:1.7 }
.cmp-list .ico{ flex:none; width:24px;height:24px;border-radius:50%; display:grid; place-items:center; margin-top:1px }
.cmp-list .ico.x{ background:rgba(245,255,254,.06); color:rgba(245,255,254,.45) }
.cmp-list .ico.ok{ background:rgba(189,253,8,.18); color:var(--lime) }
.cmp-list .ico svg{ width:13px;height:13px }
.compare-col.old li{ color:rgba(245,255,254,.55) }

/* ============================================================
   14. HOW IT WORKS (big numbers, asymmetric)
   ============================================================ */
.how{ position:relative; }
.steps{ display:flex; flex-direction:column; gap:0; }
.step{
  display:grid; grid-template-columns:auto 1fr auto; gap:36px; align-items:center;
  padding:40px 0; border-top:1px solid var(--line); position:relative;
}
.step:last-child{ border-bottom:1px solid var(--line) }
@media (max-width:820px){ .step{ grid-template-columns:auto 1fr; gap:24px } .step .step-visual{ display:none } }
.step-no{ font-size:clamp(60px,9vw,128px); font-weight:700; letter-spacing:-0.05em; line-height:.8;
  color:transparent; -webkit-text-stroke:1.4px rgba(245,255,254,.28); font-family:var(--font-en); }
.step:hover .step-no{ -webkit-text-stroke-color:var(--lime); color:rgba(189,253,8,.08); transition:.3s }
.step-body h3{ font-size:clamp(24px,2.6vw,34px); font-weight:600; letter-spacing:-0.02em; margin:0 0 8px }
.step-body p{ margin:0; color:rgba(245,255,254,.66); font-size:16px; max-width:46ch }
.step-tag{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--lime); margin-bottom:10px; display:inline-block }
html[lang="ar"] .step-tag{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:13.5px }
.step-visual{ width:120px; height:120px; border-radius:20px; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; }
.step-visual svg{ width:54px; height:54px; color:var(--lime) }

/* ============================================================
   15. APP SHOWCASE (3 phone screens, alternating)
   ============================================================ */
.showcase-row{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-bottom:96px; }
.showcase-row:last-child{ margin-bottom:0 }
@media (max-width:860px){ .showcase-row{ grid-template-columns:1fr; gap:40px; margin-bottom:64px } }
.showcase-row.flip .sc-copy{ order:2 } .showcase-row.flip .sc-visual{ order:1 }
@media (max-width:860px){ .showcase-row .sc-copy{ order:2 !important } .showcase-row .sc-visual{ order:1 !important } }
.sc-copy{ display:flex; flex-direction:column; gap:18px }
.sc-list{ list-style:none; padding:0; margin:6px 0 0; display:flex; flex-direction:column; gap:11px }
.sc-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:rgba(245,255,254,.82) }
.sc-list .tick{ flex:none; width:22px;height:22px;border-radius:50%; background:var(--lime); color:#011a18; display:grid; place-items:center; margin-top:2px }
.sc-list .tick svg{ width:12px;height:12px }
.sc-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:520px; }
.sc-visual .glow{ width:70%; aspect-ratio:1; background:radial-gradient(circle, rgba(189,253,8,.18), transparent 62%) }

/* ---- screen: map ---- */
.map-screen{ flex:1; position:relative; overflow:hidden; }
.map-screen .map-bg{ position:absolute; inset:0; background:#012b27;
  background-image:
    linear-gradient(rgba(245,255,254,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,255,254,.05) 1px, transparent 1px),
    radial-gradient(circle at 30% 38%, rgba(189,253,8,.14), transparent 26%),
    radial-gradient(circle at 70% 62%, rgba(97,0,253,.2), transparent 28%);
  background-size:34px 34px, 34px 34px, 100% 100%, 100% 100%; }
.map-screen .road{ position:absolute; background:rgba(245,255,254,.07) }
.map-screen .r1{ top:40%; left:-10%; right:-10%; height:14px; transform:rotate(-8deg) }
.map-screen .r2{ top:-10%; bottom:-10%; left:46%; width:12px; transform:rotate(6deg) }
.pin{ position:absolute; width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--lime); box-shadow:0 6px 16px rgba(0,0,0,.4); display:grid; place-items:center; z-index:2 }
.pin::after{ content:""; width:11px;height:11px;border-radius:50%; background:#001f24; transform:rotate(45deg) }
.pin.p1{ top:28%; left:24% } .pin.p2{ top:52%; left:54%; background:var(--mint) } .pin.p3{ top:36%; left:72% }
.pin.lg{ width:38px; height:38px }
.map-card{ position:absolute; bottom:16px; inset-inline:14px; z-index:3;
  background:var(--paper); color:var(--ink); border-radius:16px; padding:13px; display:flex; gap:12px; align-items:center; box-shadow:var(--shadow-card) }
.map-card .thumb{ width:46px;height:46px;border-radius:11px;flex:none; background:linear-gradient(135deg,#0a7a4f,#024a41); position:relative; overflow:hidden }
.map-card .thumb::after{ content:""; position:absolute; inset:8px; border:1.3px solid rgba(255,255,255,.4); border-radius:50%/36% }
.map-card .mc-t{ font-size:13.5px; font-weight:600 }
.map-card .mc-m{ font-size:11px; color:#3b6b66; font-family:var(--font-mono); margin-top:2px }
html[lang="ar"] .map-card .mc-m{ font-family:var(--font-ar); font-size:13px }
.map-card .go{ margin-inline-start:auto; width:34px;height:34px;border-radius:10px;background:var(--lime);display:grid;place-items:center;flex:none }

/* ---- screen: confirmation ---- */
.conf-screen{ flex:1; display:flex; flex-direction:column; align-items:center; padding:30px 22px; text-align:center; }
.conf-check{ width:78px;height:78px;border-radius:50%;background:var(--lime);display:grid;place-items:center;margin:24px 0 18px;
  box-shadow:0 0 0 12px rgba(189,253,8,.12), 0 0 0 24px rgba(189,253,8,.06) }
.conf-check svg{ width:38px;height:38px;color:#011a18 }
.conf-screen h4{ font-size:20px; font-weight:600; margin:0 0 5px; letter-spacing:-0.01em }
.conf-screen .conf-sub{ font-size:12.5px; color:rgba(245,255,254,.6); font-family:var(--font-mono); margin-bottom:24px }
html[lang="ar"] .conf-screen .conf-sub{ font-family:var(--font-ar); font-size:14px }
.conf-ticket{ width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:16px; text-align:start; }
.conf-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; font-size:13px }
.conf-row:not(:last-child){ border-bottom:1px dashed var(--line) }
.conf-row .k{ color:rgba(245,255,254,.55); font-family:var(--font-mono); font-size:11.5px }
html[lang="ar"] .conf-row .k{ font-family:var(--font-ar); font-size:13px }
.conf-row .v{ font-weight:600 }
.conf-qr{ width:74px;height:74px;border-radius:12px;background:var(--paper);margin:18px auto 0;padding:9px }
.conf-qr svg{ width:100%;height:100% }

/* ---- screen: team / profile ---- */
.team-screen{ flex:1; display:flex; flex-direction:column; padding:18px 18px 0; }
.team-head{ display:flex; align-items:center; gap:13px; margin-bottom:8px }
.team-ava{ width:54px;height:54px;border-radius:18px;background:var(--lime);color:#011a18;display:grid;place-items:center;font-weight:700;font-size:22px;flex:none }
.team-head .t-name{ font-size:17px; font-weight:600 }
.team-head .t-meta{ font-size:11px; color:rgba(245,255,254,.55); font-family:var(--font-mono); margin-top:2px }
html[lang="ar"] .team-head .t-meta{ font-family:var(--font-ar); font-size:13px }
.team-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0 18px }
.team-stat{ background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:12px 8px; text-align:center }
.team-stat .v{ font-size:19px; font-weight:700; color:var(--lime); letter-spacing:-0.02em }
.team-stat .l{ font-size:9px; color:rgba(245,255,254,.55); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; margin-top:3px }
html[lang="ar"] .team-stat .l{ font-family:var(--font-ar); text-transform:none; letter-spacing:0; font-size:11px }
.team-label{ font-size:11px; font-weight:600; color:rgba(245,255,254,.8); margin-bottom:10px }
.team-list{ display:flex; flex-direction:column; gap:8px }
.team-member{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:9px 11px }
.team-member .m-ava{ width:30px;height:30px;border-radius:50%;background:var(--mint);color:#001f24;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none }
.team-member .m-name{ font-size:12.5px; font-weight:500 }
.team-member .m-role{ font-size:10px; color:rgba(245,255,254,.5); font-family:var(--font-mono) }
html[lang="ar"] .team-member .m-role{ font-family:var(--font-ar); font-size:12px }
.team-member .m-badge{ margin-inline-start:auto; font-size:9.5px; font-family:var(--font-mono); color:var(--lime); background:rgba(189,253,8,.12); padding:4px 8px; border-radius:999px }
html[lang="ar"] .team-member .m-badge{ font-family:var(--font-ar); font-size:11px }

/* ============================================================
   16. PITCH OWNERS
   ============================================================ */
.owners{ position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(97,0,253,.2), transparent 58%), var(--bg-deeper);
  border:1px solid var(--line); border-radius:var(--r-xl); padding:64px;
  display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center; }
@media (max-width:860px){ .owners{ grid-template-columns:1fr; padding:40px } }
.owners::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(97,0,253,.06) 0 1px, transparent 1px 30px) }
.owners-copy{ position:relative; z-index:1; display:flex; flex-direction:column; gap:18px }
.owners-visual{ position:relative; z-index:1 }
.owner-card{ background:var(--bg-deep); border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-float) }
.owner-card .oc-head{ display:flex; justify-content:space-between; align-items:center }
.owner-card h4{ font-size:15px; margin:0 0 3px; font-weight:600 }
.owner-card .oc-sub{ font-size:12px; color:rgba(245,255,254,.55); font-family:var(--font-mono) }
html[lang="ar"] .owner-card .oc-sub{ font-family:var(--font-ar); font-size:13.5px }
.oc-pill{ font-size:11px; font-family:var(--font-mono); color:var(--lime); background:rgba(189,253,8,.12); padding:5px 9px; border-radius:999px }
.oc-stats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px }
.oc-stat{ background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:14px }
.oc-stat .v{ font-size:24px; font-weight:700; letter-spacing:-0.02em; color:var(--lime) }
.oc-stat .l{ font-size:11px; color:rgba(245,255,254,.6); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; margin-top:4px }
html[lang="ar"] .oc-stat .l{ font-family:var(--font-ar); text-transform:none; letter-spacing:0; font-size:13px }
.oc-chart{ margin-top:14px; height:78px; background:var(--surface); border-radius:13px; padding:10px; overflow:hidden }
.oc-chart svg{ width:100%; height:100% }

/* ============================================================
   17. TESTIMONIALS
   ============================================================ */
.testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px){ .testimonials{ grid-template-columns:1fr; max-width:560px; margin-inline:auto } }
.quote{ background:var(--bg-deep); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px;
  display:flex; flex-direction:column; gap:18px; transition:transform .25s, border-color .25s; }
.quote:hover{ transform:translateY(-3px); border-color:rgba(189,253,8,.4) }
.quote.mint{ background:var(--mint); color:var(--ink); border-color:transparent }
.quote .stars{ color:var(--lime); letter-spacing:2px; font-size:14px }
.quote.mint .stars{ color:#0a7a4f }
.quote blockquote{ margin:0; font-size:17px; line-height:1.5; font-weight:500; letter-spacing:-0.01em; text-wrap:pretty }
html[lang="ar"] .quote blockquote{ line-height:1.75; font-size:18px }
.q-person{ display:flex; align-items:center; gap:12px; margin-top:auto }
.q-ava{ width:42px;height:42px;border-radius:50%;flex:none; background:var(--bg); color:var(--lime); display:grid; place-items:center; font-weight:700 }
.quote.mint .q-ava{ background:#0a7a4f; color:var(--lime) }
.q-name{ font-weight:600; font-size:14.5px; line-height:1.2 }
.q-role{ font-size:12px; color:rgba(245,255,254,.55); font-family:var(--font-mono); margin-top:2px }
.quote.mint .q-role{ color:#3b6b66 }
html[lang="ar"] .q-role{ font-family:var(--font-ar); font-size:13px }

/* ============================================================
   18. FAQ ACCORDION
   ============================================================ */
.faq{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:48px; align-items:start; }
@media (max-width:820px){ .faq{ grid-template-columns:1fr; gap:32px } }
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; transition:border-color .25s, background .25s; }
.faq-item.open{ border-color:rgba(189,253,8,.4); background:var(--surface-2) }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; text-align:start; font-size:17px; font-weight:600; letter-spacing:-0.01em; }
.faq-q .pm{ flex:none; width:28px;height:28px;border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; transition:background .25s, transform .25s, color .25s; }
.faq-item.open .faq-q .pm{ background:var(--lime); color:#011a18; border-color:var(--lime); transform:rotate(180deg) }
.faq-q .pm svg{ width:14px;height:14px }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s ease; }
.faq-item.open .faq-a{ grid-template-rows:1fr }
.faq-a > div{ overflow:hidden }
.faq-a p{ margin:0; padding:0 24px 24px; color:rgba(245,255,254,.66); font-size:15px; max-width:60ch }
html[lang="ar"] .faq-a p{ line-height:1.8 }

/* ============================================================
   19. FINAL CTA
   ============================================================ */
.final{ position:relative; overflow:hidden; background:var(--lime); color:#011a18; border-radius:var(--r-xl);
  padding:76px 64px; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; }
@media (max-width:820px){ .final{ grid-template-columns:1fr; padding:48px 32px } }
.final::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background:repeating-linear-gradient(135deg, rgba(1,49,45,.13) 0 1px, transparent 1px 34px) }
.final-copy{ position:relative; z-index:1; display:flex; flex-direction:column; gap:18px }
.final-copy h2{ color:#011a18 }
.final-copy p{ color:rgba(1,26,24,.72); max-width:50ch }
.final-stores{ display:flex; gap:12px; flex-wrap:wrap; margin-top:4px }
.final-stores .store{ background:#011a18; color:var(--paper); border-color:#011a18 }
.final-stores .store:hover{ border-color:#011a18; transform:translateY(-2px) }
.final-visual{ position:relative; z-index:1; aspect-ratio:1; max-width:280px; margin-inline:auto; display:grid; place-items:center }
.badge-ring{ width:100%; height:100%; border-radius:50%; border:1.5px dashed #011a18; display:grid; place-items:center; position:relative; animation:spin 30s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.badge-ring::before{ content:""; position:absolute; inset:14%; border-radius:50%; background:#011a18 }
.badge-ring .glyph{ position:relative; z-index:1; width:40%; height:auto; display:block; animation:spin 30s linear infinite reverse }

/* huge wordmark */
.mega{ text-align:center; padding-top:64px }
.mega span{ display:block; font-weight:700; font-size:clamp(64px,19vw,280px); line-height:.82; letter-spacing:-0.06em;
  background:linear-gradient(180deg, rgba(189,253,8,.5), rgba(189,253,8,.03)); -webkit-background-clip:text; background-clip:text; color:transparent; user-select:none }
html[lang="ar"] .mega span{ letter-spacing:0; line-height:1 }

/* ============================================================
   20. FOOTER
   ============================================================ */
footer{ background:var(--bg-deeper); border-top:1px solid var(--line); padding:80px 0 28px; margin-top:64px; }
.f-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; margin-bottom:56px }
@media (max-width:820px){ .f-grid{ grid-template-columns:1fr 1fr; gap:36px } }
@media (max-width:480px){ .f-grid{ grid-template-columns:1fr } }
.f-about{ display:flex; flex-direction:column; gap:18px; max-width:38ch }
.f-about p{ color:rgba(245,255,254,.6); font-size:14.5px; margin:0 }
.f-socials{ display:flex; gap:10px }
.f-socials a{ width:38px;height:38px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;transition:all .2s }
.f-socials a:hover{ background:var(--lime); color:#011a18; border-color:var(--lime) }
.f-socials svg{ width:16px;height:16px }
.f-col h5{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--lime); margin:0 0 18px; font-family:var(--font-mono); font-weight:500 }
html[lang="ar"] .f-col h5{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:14px }
.f-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px }
.f-col a{ color:rgba(245,255,254,.7); font-size:14.5px; transition:color .2s }
.f-col a:hover{ color:var(--lime) }
.f-base{ border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  color:rgba(245,255,254,.5); font-size:13px; font-family:var(--font-mono) }
html[lang="ar"] .f-base{ font-family:var(--font-ar); font-size:14px }

/* ============================================================
   22. SYRIA-SPECIFIC FOOTER BITS
   ============================================================ */
.f-contact{ display:inline-flex; align-items:center; gap:9px; color:rgba(245,255,254,.72); font-family:var(--font-mono); font-size:14px;
  border:1px solid var(--line-strong); border-radius:999px; padding:9px 15px; align-self:flex-start; transition:border-color .2s, color .2s; min-height:44px; }
html[lang="ar"] .f-contact{ font-family:var(--font-ar); }
.f-contact:hover{ border-color:#25D366; color:var(--paper) }
.f-contact svg{ width:18px; height:18px; color:#25D366 }
.f-made{ display:inline-flex; align-items:center; gap:8px; color:rgba(245,255,254,.6) }
.f-made-flag{ flex:none; display:block; border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.2); }

/* ============================================================
   23. MOBILE FULL-SCREEN MENU
   ============================================================ */
.mobile-menu{
  position:fixed; inset:0; z-index:200;
  background:linear-gradient(180deg,#01312d,#001f24);
  display:flex; flex-direction:column; padding:20px 22px 28px;
  transform:translateY(-101%); opacity:0; visibility:hidden;
  transition:transform .42s cubic-bezier(.6,.05,.2,1), opacity .3s ease, visibility .42s;
}
body.menu-open{ overflow:hidden }
body.menu-open .mobile-menu{ transform:none; opacity:1; visibility:visible }
.mm-top{ display:flex; align-items:center; justify-content:space-between }
.mm-close{ width:46px; height:46px; border-radius:13px; border:1px solid var(--line-strong); display:grid; place-items:center }
.mm-close svg{ width:22px; height:22px }
.mm-links{ display:flex; flex-direction:column; margin-top:24px; flex:1; }
.mm-links a{ font-size:27px; font-weight:600; letter-spacing:-0.02em; padding:18px 6px; border-bottom:1px solid var(--line); min-height:44px; display:flex; align-items:center; }
html[lang="ar"] .mm-links a{ font-size:25px; letter-spacing:0 }
.mm-links a:active{ color:var(--lime) }
.mm-foot{ display:flex; flex-direction:column; gap:16px; padding-top:22px }
.mm-lang{ align-self:flex-start }
.mm-lang button{ padding:11px 20px; min-height:44px }
.mm-download{ justify-content:center; font-size:17px; padding:18px; min-height:54px }

/* ============================================================
   24. FLOATING WHATSAPP FAB (mobile only)
   ============================================================ */
.wa-fab{
  position:fixed; z-index:150; bottom:18px; inset-inline-end:18px;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.55);
}
.wa-fab svg{ width:30px; height:30px }
.wa-fab:active{ transform:scale(.92) }

/* ============================================================
   25. MOBILE OPTIMIZATIONS
   ============================================================ */
/* touch target floor */
.nav-mobile-toggle{ min-width:44px; min-height:44px; align-items:center; justify-content:center }

@media (max-width:760px){
  .wa-fab{ display:flex }
  .lang-pill button{ padding:9px 16px; min-height:40px }

  /* testimonials -> horizontal snap carousel */
  .testimonials{ display:flex; gap:14px; max-width:none; margin:0 -20px; padding:4px 20px 16px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .testimonials::-webkit-scrollbar{ display:none }
  .quote{ min-width:82%; scroll-snap-align:center }
}

/* phone mockups smaller + contained on phones */
@media (max-width:600px){
  .phone{ --pw:264px }
  .phone-stage{ min-height:auto; padding:18px 0 8px }
  .sc-visual{ min-height:auto; padding:8px 0 }
  .float-chip{ font-size:11.5px; padding:9px 12px }
  .float-chip .ic{ width:26px; height:26px }
  .float-chip.a{ inset-inline-start:0 }
  .float-chip.b{ inset-inline-end:0 }
}

/* features: single column on phones */
@media (max-width:640px){
  .bento{ grid-template-columns:1fr }
  .bento-card.wide,.bento-card.tall,.bento-card.half,.bento-card.third{ grid-column:1; grid-row:auto }
  .bento-card{ padding:26px }
}

/* how it works: tighter vertical timeline */
@media (max-width:820px){
  .step{ padding:28px 0; align-items:start }
  .step-no{ font-size:clamp(44px,15vw,72px) }
}

/* final CTA: full-width stacked buttons for thumb reach */
@media (max-width:520px){
  .final{ text-align:center; padding:44px 24px }
  .final-copy{ align-items:center }
  .final-stores{ flex-direction:column; width:100%; }
  .final-stores .store{ width:100%; justify-content:center; min-height:56px }
}

/* footer link columns -> accordion on phones */
.f-col-h{ display:flex; align-items:center; gap:8px; width:100%; padding:0; background:none; border:none; color:inherit; text-align:start; cursor:default; }
.f-chev{ display:none; transition:transform .3s }
@media (max-width:480px){
  .f-grid{ gap:0 }
  .f-col-h{ justify-content:space-between; padding:18px 0; border-top:1px solid var(--line); cursor:pointer; min-height:44px }
  .f-col-h h5{ margin:0 }
  .f-chev{ display:grid; place-items:center; color:rgba(245,255,254,.6) }
  .f-chev svg{ width:18px; height:18px }
  .f-col.open .f-chev{ transform:rotate(180deg) }
  .f-col ul{ display:none; padding:0 0 16px }
  .f-col.open ul{ display:flex }
  .f-base{ justify-content:center; text-align:center; gap:16px }
}

/* never let headlines overflow on tiny screens */
@media (max-width:400px){
  .h-display{ font-size:42px }
  html[lang="ar"] .h-display{ font-size:34px }
  .wrap{ padding:0 18px }
}

/* ============================================================
   26. DISABLE HOVER MOTION ON TOUCH (use pressed states)
   ============================================================ */
@media (hover:none){
  .bento-card:hover,.quote:hover,.store:hover,.btn-lime:hover,.btn-ghost:hover,
  .f-socials a:hover,.nav-links a:hover,.final-stores .store:hover{ transform:none }
  .bento-card:hover{ border-color:var(--line); box-shadow:var(--shadow-card) }
  .bento-card:hover::after{ opacity:0 }
  .quote:hover{ border-color:var(--line) }
  .step:hover .step-no{ -webkit-text-stroke-color:rgba(245,255,254,.28); color:transparent }
  .bento-card:active{ transform:scale(.99) }
  .quote:active{ transform:scale(.995) }
  .store:active,.f-socials a:active{ transform:scale(.96) }
}

/* ============================================================
   21. LANGUAGE VISIBILITY + REVEAL ANIMATIONS
   ============================================================ */
html[lang="en"] [data-ar]{ display:none }
html[lang="ar"] [data-en]{ display:none }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none }
  .phone.float,.float-chip,.checker,.badge-ring,.badge-ring .glyph{ animation:none !important }
}
/* ============================================================
   REFACTOR UTILITIES
   ============================================================ */
.bars .bar-1{height:4px}
.bars .bar-2{height:6px}
.bars .bar-3{height:8px}
.bars .bar-4{height:11px}
.stat-suffix{font-size:.45em}
.feature-note{margin-top:2px}
.owners-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.sec-flush-top{padding-top:0}
.faq-head{margin-bottom:0}
.footer-brand{gap:13px}
.footer-brand-mark{width:38px}
.footer-brand-word{font-size:24px}