/* ============================================================
   IMDADY — Theme layer (styling only: no content / colour changes)
   Style language: modern, glassy, minimal borders, large radii,
   soft layered shadows, tight Geist-style typography.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');

:root{
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --sh:0 1px 2px rgba(18,10,30,.04),0 8px 30px -12px rgba(42,18,72,.14);
  --sh-h:0 2px 4px rgba(18,10,30,.05),0 24px 50px -18px rgba(42,18,72,.30);
  --t:.28s cubic-bezier(.22,1,.36,1);
  --en:'Geist','Plus Jakarta Sans',system-ui,sans-serif;
  --btn-r:14px;
  --border:#ece7f3;
}
body{font-family:var(--en);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:#fff}
body.rtl{font-family:var(--ar)}
::selection{background:var(--p600);color:#fff}

/* ── Top bar: slim, quiet ── */
.topbar{background:var(--p950);color:rgba(255,255,255,.65);font-size:12px;letter-spacing:.02em;padding:8px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar a{color:#fff}

/* ── Nav: floating glass bar ── */
.nav-wrap{background:rgba(255,255,255,.72)!important;backdrop-filter:saturate(180%) blur(22px)!important;-webkit-backdrop-filter:saturate(180%) blur(22px)!important;border-bottom:1px solid rgba(18,10,30,.06)!important;box-shadow:none!important}
.nav-inner{height:64px!important}
.nav-links a,.nav-links>li>a{border-radius:999px!important;font-weight:500!important;font-size:14px!important;color:var(--mid)}
.nav-links a:hover,.nav-links>li>a:hover,.nav-links a.active{background:rgba(117,51,175,.08)!important;color:var(--p600)!important}
.mega-drop{border:1px solid var(--border)!important;border-radius:var(--r-lg)!important;backdrop-filter:blur(20px)}
.mega-item{border-radius:var(--r-md)!important}
.mega-item-ico{border-radius:12px!important}

/* ── Buttons: soft-square (not pill), tactile ── */
.btn-try,.btn-demo,.btn-lang,.btn-main,.btn-ghost,.btn-submit,.btn-pp,.btn-pg,
.btn-hero-p,.btn-hero-g,.btn-hero-w,.btn-hero-o,.btn-cta-w,.btn-cta-o,.mob-try,.mob-demo{
  border-radius:var(--btn-r)!important;font-weight:600!important;letter-spacing:-.01em}
.btn-try,.btn-main,.btn-submit,.btn-pp,.mob-try{
  background:linear-gradient(180deg,var(--p500),var(--p600))!important;
  }
.btn-try:hover,.btn-main:hover,.btn-submit:hover,.btn-pp:hover{filter:brightness(1.07);transform:translateY(-2px)!important}
.btn-demo,.btn-lang,.btn-pg{border:1px solid var(--border)!important;background:#fff!important}
.btn-hero-p,.btn-hero-w,.btn-cta-w{}
.btn-hero-g,.btn-hero-o,.btn-cta-o{border:1px solid rgba(255,255,255,.28)!important;background:rgba(255,255,255,.06)!important;backdrop-filter:blur(8px)}
.btn-hero-g:hover,.btn-hero-o:hover,.btn-cta-o:hover{background:rgba(255,255,255,.14)!important}

/* ── Heroes: deep, cinematic, grid texture ── */
.hero,.page-hero{background:
  radial-gradient(ellipse 70% 80% at 80% -10%,rgba(144,71,200,.38),transparent 60%),
  radial-gradient(ellipse 50% 60% at 0% 100%,rgba(90,38,136,.45),transparent 65%),
  linear-gradient(180deg,#12061f,var(--p950))!important}
.hero::after,.page-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%)}
.hero-grid,.page-hero-inner{z-index:2}
.hero h1,.page-hero h1{font-weight:700!important;letter-spacing:-.045em!important;line-height:1.04!important}
.hero-badge,.page-hero-tag{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.14)!important;color:#e9d9fa!important;backdrop-filter:blur(10px);text-transform:none!important;letter-spacing:.01em!important;font-weight:500!important}
.hero-sub,.page-hero p{color:rgba(255,255,255,.68)!important}

/* ── Section typography ── */
.sec-tag{background:transparent!important;border:1px solid var(--border)!important;color:var(--p600)!important;text-transform:none!important;letter-spacing:.01em!important;font-weight:600!important;font-size:12.5px!important}
.sec-title{font-weight:700!important;letter-spacing:-.04em!important;line-height:1.1!important}
.sec-sub{color:#6b6179!important}
.section{padding-top:96px;padding-bottom:96px}

/* ── Cards: borderless-feel, big radius, lift on hover ── */
.fc,.step,.pc,.form-card,.faq-item,.stat-box,.card,[class$="-card"]:not(.form-card):not(.nav-card){
  border-radius:var(--r-lg)}
.fc,.step,.pc{border:1px solid var(--border)!important;background:linear-gradient(180deg,#fff,#fcfaff)!important;}
.fc:hover,.step:hover,.pc:hover{border-color:rgba(117,51,175,.35)!important;transform:translateY(-4px)!important}
.fc::before{height:2px;background:linear-gradient(90deg,transparent,var(--p500),transparent)}
.fc-ico{border-radius:14px!important;background:linear-gradient(135deg,var(--p50),#fff)!important;border:1px solid var(--p100)}
.step-num{background:linear-gradient(180deg,var(--p300),var(--p100));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pc.hero-plan{border-color:var(--p600)!important;}
.pc-badge{border-radius:999px;background:linear-gradient(180deg,var(--p500),var(--p600))}
.tag{background:#fff!important;border-color:var(--border)!important;font-weight:500!important}
.img-frame,.prod-img-box{border-radius:var(--r-xl)!important;border:1px solid var(--border)!important;background:#fff!important}
.stats-row{border-radius:var(--r-xl)!important;background:var(--border);}
.stat-val{font-weight:700!important;letter-spacing:-.04em!important}

/* ── Forms ── */
.form-card{border:1px solid var(--border)!important;border-radius:var(--r-xl)!important}
.form-input{border:1px solid var(--border)!important;border-radius:12px!important;background:#faf8fd!important}
.form-input:focus{background:#fff!important;border-color:var(--p500)!important;}

/* ── FAQ ── */
.faq-item{border:1px solid var(--border)!important;border-radius:var(--r-md)!important;margin-bottom:10px}

/* ── CTA band ── */
.cta-section{background:
  radial-gradient(ellipse 60% 100% at 50% 0%,rgba(190,130,240,.35),transparent 70%),
  linear-gradient(140deg,var(--p700),#2a1248)!important;border-radius:var(--r-xl);margin:0 24px 24px}
.cta-title{font-weight:700!important;letter-spacing:-.045em!important}

/* ── Footer ── */
footer{background:linear-gradient(180deg,var(--p950),#0d0518)!important;border-top:1px solid rgba(255,255,255,.06)}
.foot-grid{border-bottom-color:rgba(255,255,255,.08)!important}
.foot-col h5{color:rgba(255,255,255,.45)!important;font-weight:600!important;text-transform:none!important;letter-spacing:.02em!important;font-size:13px!important}
.soc{border-radius:12px!important;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.10)!important}
.wa-fab{}

/* ============================================================
   HEADER + HERO — modelled on the reference screenshot
   Dark solid header · underline-active links · pill buttons ·
   cinematic dark hero · eyebrow dot · big serif title with accent line ·
   vertical side rail
   ============================================================ */

/* ---------- HEADER ---------- */
.topbar{display:none}
.nav-wrap{background:#07030d!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important}
.nav-inner{height:84px!important;max-width:1440px!important;padding:0 48px!important;position:relative}
.nav-logo{background:#fff;border-radius:14px;padding:6px 12px;border:0;box-shadow:none}
.nav-logo img{height:34px!important}
.nav-links{margin:0!important;padding:0!important;border:0!important;background:none!important;gap:10px!important;
  position:absolute;left:50%;transform:translateX(-50%)}
.nav-links>li>a,.nav-links a{color:#fff!important;font-size:16px!important;font-weight:600!important;
  padding:10px 16px!important;border-radius:0!important;background:none!important;position:relative}
.nav-links>li>a::after,.nav-links a::after{content:'';position:absolute;left:16px;right:16px;bottom:2px;height:2px;
  background:var(--p400);transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.nav-links>li>a:hover,.nav-links a:hover{color:#fff!important;background:none!important}
.nav-links>li>a:hover::after,.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{background:none!important;color:#fff!important}
.nav-links .help-li>a{color:#fff!important}
.mega-drop{background:#120a1e!important;border:1px solid rgba(255,255,255,.1)!important}
.mega-item-label{color:#fff!important}
.mega-item:hover{background:rgba(255,255,255,.06)!important}
.mega-item-ico{background:rgba(255,255,255,.08)!important}
.mega-col h6{color:rgba(255,255,255,.5)!important}
/* right-side pills */
.btn-try,.btn-demo,.btn-lang,.mob-try,.mob-demo{border-radius:999px!important}
.btn-try{padding:12px 26px!important;background:var(--p600)!important;}
.btn-demo,.btn-lang{background:rgba(255,255,255,.04)!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important;padding:11px 22px!important}
.btn-demo:hover,.btn-lang:hover{background:rgba(255,255,255,.12)!important}
.nav-ham span{background:#fff!important}
.rtl .nav-links{left:auto;right:50%;transform:translateX(50%)}

/* ---------- HERO ---------- */
.hero,.page-hero{background:
  linear-gradient(90deg,rgba(7,3,13,.97) 0%,rgba(7,3,13,.80) 45%,rgba(7,3,13,.35) 100%),
  radial-gradient(ellipse 55% 70% at 85% 30%,rgba(144,71,200,.45),transparent 65%),
  radial-gradient(ellipse 40% 50% at 95% 100%,rgba(117,51,175,.35),transparent 70%),
  #07030d!important}
.hero::after,.page-hero::after{background-size:72px 72px;opacity:.7}
.hero{min-height:calc(100vh - 84px);display:flex;align-items:center;padding:96px 48px 96px 110px!important}
.rtl .hero{padding:96px 110px 96px 48px!important}
.hero-grid{max-width:1440px!important;width:100%;gap:56px!important}
.page-hero{padding:112px 48px 104px 110px!important}
.rtl .page-hero{padding:112px 110px 104px 48px!important}
.page-hero-inner{max-width:1440px!important;text-align:left!important}
.rtl .page-hero-inner{text-align:right!important}

/* vertical side rail line */
.hero::before,.page-hero::before{inset:auto!important;left:30px;top:50%;width:1px;height:260px;transform:translateY(-50%);
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.08))!important;pointer-events:none}
.rtl .hero::before,.rtl .page-hero::before{left:auto;right:30px}
.hero-grid>div:first-child{text-align:left}
.rtl .hero-grid>div:first-child{text-align:right}

/* eyebrow: glowing dot + spaced caps */
.hero-badge,.page-hero-tag{background:transparent!important;border:0!important;backdrop-filter:none!important;
  padding:0!important;border-radius:0!important;gap:14px!important;margin-bottom:26px!important;
  font-size:13px!important;font-weight:700!important;text-transform:uppercase!important;
  letter-spacing:.32em!important;color:rgba(255,255,255,.78)!important}
.hero-badge::before,.page-hero-tag::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--p400);flex-shrink:0;}
.hero-badge .dot{display:none}

/* title: high-contrast serif, accent second line */
.hero h1,.page-hero h1{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;
  line-height:.98!important;letter-spacing:-.025em!important;color:#fff;font-size:clamp(46px,7vw,104px)!important;margin-bottom:26px!important}
.page-hero h1{font-size:clamp(38px,5.5vw,80px)!important}
.rtl .hero h1,.rtl .page-hero h1{font-family:var(--ar)!important;font-weight:800!important;letter-spacing:0!important;line-height:1.2!important}
.hero h1 em,.page-hero h1 em{display:block;font-style:normal;background:none!important;
  -webkit-text-fill-color:var(--p400)!important;color:var(--p400)!important}
.hero-sub,.page-hero p{font-size:20px!important;color:rgba(255,255,255,.82)!important;max-width:560px!important;margin-left:0!important}
.hero-ctas,.page-hero-btns{gap:16px!important;justify-content:flex-start}
.btn-hero-p,.btn-hero-w{border-radius:999px!important;background:var(--p600)!important;color:#fff!important;
  padding:20px 38px!important;font-size:18px!important;font-weight:700!important;}
.btn-hero-g,.btn-hero-o{border-radius:999px!important;background:rgba(255,255,255,.08)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;padding:19px 36px!important;font-size:18px!important;font-weight:700!important}
.hero-trust{border-top:0;padding-top:8px}

/* media panel on the right */
.hero-panel{padding:0}
.hero-panel::before,.hero-panel::after{content:none!important}
.hero-panel-bg{border-radius:var(--r-lg)!important;border:1px solid rgba(255,255,255,.10)!important;
  }

@media(max-width:1280px){
  /* not enough room to centre the menu: let it flow after the logo */
  .nav-inner{padding:0 24px!important}
  .nav-links{position:static;transform:none;margin-left:20px!important}
  .rtl .nav-links{margin-left:0!important;margin-right:20px!important}
  .nav-links>li>a,.nav-links a{font-size:14px!important;padding:10px 10px!important}
  .nav-links>li>a::after,.nav-links a::after{left:10px;right:10px}
}
@media(max-width:768px){
  .nav-inner{height:68px!important;padding:0 16px!important}
  .nav-links{display:none!important}
  .hero,.rtl .hero{padding:64px 22px!important;min-height:0}
  .page-hero,.rtl .page-hero{padding:64px 22px 56px!important}
  .hero::before,.page-hero::before{display:none}
  .hero-badge,.page-hero-tag{letter-spacing:.2em!important;font-size:11px!important}
  .hero h1{font-size:clamp(40px,12vw,60px)!important}
  .hero-sub,.page-hero p{font-size:16px!important}
  .btn-hero-p,.btn-hero-g,.btn-hero-w,.btn-hero-o{padding:15px 26px!important;font-size:16px!important}
}

/* ── Motion ── */
@media (prefers-reduced-motion:no-preference){
  .fc,.step,.pc,.btn-try,.btn-main{will-change:transform}
}
@media(max-width:768px){
  .section{padding-top:56px;padding-bottom:56px}
  .cta-section{margin:0 12px 12px;border-radius:var(--r-lg)}
  .hero h1,.page-hero h1{letter-spacing:-.035em!important}
}

/* ============================================================
   FIX PASS — nav overlap + hero must fit in one screen
   ============================================================ */
/* nav: normal flow (no absolute centring) so it can never overlap the buttons */
.nav-inner{height:76px!important;padding:0 40px!important;gap:0}
.nav-links,.rtl .nav-links{position:static!important;transform:none!important;margin:0 0 0 36px!important;gap:4px!important}
.rtl .nav-links{margin:0 36px 0 0!important}
.nav-links>li>a,.nav-links a{font-size:15px!important;padding:10px 12px!important}
.nav-links>li>a::after,.nav-links a::after{left:12px;right:12px}
.nav-actions{gap:10px!important;margin-left:auto}
.rtl .nav-actions{margin-left:0;margin-right:auto}
.btn-try{padding:11px 22px!important;font-size:14px!important;white-space:nowrap}
.btn-demo,.btn-lang{padding:10px 18px!important;font-size:14px!important;white-space:nowrap}
.nav-links>li>a,.nav-links a{white-space:nowrap}

/* hero: whole thing within one viewport */
.hero{min-height:calc(100vh - 76px)!important;max-height:none;padding:48px 48px 48px 96px!important;align-items:center}
.rtl .hero{padding:48px 96px 48px 48px!important}
.hero-grid{gap:40px!important;align-items:center!important}
.hero-badge{margin-bottom:18px!important;font-size:12px!important;letter-spacing:.28em!important}
.hero h1{font-size:clamp(38px,min(5.2vw,9vh),76px)!important;line-height:1!important;margin-bottom:18px!important}
.hero-sub{font-size:17px!important;line-height:1.6!important;margin-bottom:24px!important}
.hero-ctas{margin-bottom:24px!important}
.btn-hero-p,.btn-hero-w{padding:15px 30px!important;font-size:16px!important}
.btn-hero-g,.btn-hero-o{padding:14px 28px!important;font-size:16px!important}
.hero-trust{padding-top:0!important}
.hero-panel{align-self:center}
.hero-panel-bg{max-width:100%!important}
.page-hero{padding:72px 48px 64px 96px!important}
.rtl .page-hero{padding:72px 96px 64px 48px!important}
.page-hero h1{font-size:clamp(34px,4.6vw,64px)!important}

@media(max-width:1280px){
  .nav-inner{padding:0 24px!important}
  .nav-links{margin-left:16px!important}
  .nav-links>li>a,.nav-links a{font-size:14px!important;padding:10px 8px!important}
  .hero{padding:48px 32px 48px 72px!important}
}
@media(max-width:768px){
  .nav-inner{height:64px!important}
  .hero,.rtl .hero{min-height:0!important;padding:56px 20px!important}
  .page-hero,.rtl .page-hero{padding:56px 20px 48px!important}
  .hero h1{font-size:clamp(36px,11vw,52px)!important}
}

/* ============================================================
   HERO BACKGROUND PHOTO (images/hero-restaurant.jpg)
   photo + purple tint + left-side dark fade so text stays readable
   (path is relative to this css file, so it works for /ar/ too)
   ============================================================ */
.hero,.page-hero{
  background:
    linear-gradient(90deg,rgba(10,4,20,.96) 0%,rgba(10,4,20,.84) 38%,rgba(26,11,46,.55) 70%,rgba(42,18,72,.45) 100%),
    linear-gradient(180deg,rgba(7,3,13,.55) 0%,rgba(7,3,13,0) 30%,rgba(7,3,13,.85) 100%),
    radial-gradient(ellipse 60% 70% at 85% 35%,rgba(144,71,200,.40),transparent 70%),
    url('images/hero-restaurant.jpg') center/cover no-repeat,
    #07030d!important;
}
.rtl .hero,.rtl .page-hero{
  background:
    linear-gradient(270deg,rgba(10,4,20,.96) 0%,rgba(10,4,20,.84) 38%,rgba(26,11,46,.55) 70%,rgba(42,18,72,.45) 100%),
    linear-gradient(180deg,rgba(7,3,13,.55) 0%,rgba(7,3,13,0) 30%,rgba(7,3,13,.85) 100%),
    radial-gradient(ellipse 60% 70% at 15% 35%,rgba(144,71,200,.40),transparent 70%),
    url('images/hero-restaurant.jpg') center/cover no-repeat,
    #07030d!important;
}
/* keep the grid texture subtle on top of the photo */
.hero::after,.page-hero::after{opacity:.35}
/* product panel: frosted glass so it sits nicely on the photo */
.hero-panel-bg{background:rgba(26,11,46,.55)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
@media(max-width:768px){
  .hero,.page-hero{background-position:60% center!important}
}

/* ============================================================
   NO SHADOWS — everywhere (buttons, cards, panels, nav, etc.)
   ============================================================ */
*,*::before,*::after{box-shadow:none!important;text-shadow:none!important}
:root{--sh:none;--sh-h:none}
/* inputs used box-shadow as their focus ring; keep a clear focus state without shadow */
.form-input:focus{outline:2px solid var(--p500);outline-offset:0}
/* cards/panels: rely on borders for separation instead */
.fc:hover,.step:hover,.pc:hover{border-color:var(--p500)!important}
.pc.hero-plan{border:2px solid var(--p600)!important}

/* hero floating badges removed (+40% Revenue growth / ZATCA Compliant) */
.hero-panel .stat-card{display:none!important}

/* ============================================================
   REMOVE REMAINING "SHADOW-LIKE" EFFECTS in hero
   (blurred glow behind the image, dark frosted frame, glows on buttons)
   ============================================================ */
.hero-glow{display:none!important}
.hero-panel-bg{background:transparent!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0!important}
.hero-panel{filter:none!important}
.hero-panel-bg img{filter:none!important}
.btn-try,.btn-main,.btn-submit,.btn-pp,.mob-try,.btn-hero-p,.btn-hero-w,.btn-cta-w,.btn-hero-g,.btn-hero-o,.btn-cta-o{filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.btn-try,.btn-main,.btn-submit,.btn-pp,.mob-try{background:var(--p600)!important}
/* dots/badges glow */
.hero-badge::before,.page-hero-tag::before{box-shadow:none!important}

/* vertical side line removed */
.hero::before,.page-hero::before,.rtl .hero::before,.rtl .page-hero::before{display:none!important;content:none!important}

/* eyebrow dot removed */
.hero-badge::before,.page-hero-tag::before,.hero-badge .dot{display:none!important;content:none!important}
.hero-badge,.page-hero-tag{gap:0!important}

/* ============================================================
   BUTTON STYLE (shape/typography only — colours & hover colours unchanged)
   large pill · bold · roomy padding · 2px outline for secondary
   ============================================================ */
.btn-try,.btn-demo,.btn-lang,.btn-main,.btn-ghost,.btn-submit,.btn-pp,.btn-pg,
.btn-hero-p,.btn-hero-g,.btn-hero-w,.btn-hero-o,.btn-cta-w,.btn-cta-o,.mob-try,.mob-demo{
  border-radius:999px!important;font-weight:700!important;letter-spacing:0!important;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1.2;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease!important}
.btn-hero-p,.btn-hero-w,.btn-hero-g,.btn-hero-o,.btn-cta-w,.btn-cta-o,.btn-main{padding:16px 34px!important;font-size:16px!important}
.btn-try,.btn-demo{padding:12px 24px!important;font-size:14.5px!important}
.btn-submit,.btn-pp,.btn-pg{padding:16px 28px!important;font-size:16px!important}
/* secondary / outlined: thicker 2px border like the reference */
.btn-hero-g,.btn-hero-o,.btn-cta-o,.btn-demo,.btn-pg,.btn-lang{border-width:2px!important;border-style:solid!important}
/* tiny nudge instead of colour change on hover */
.btn-try:hover,.btn-main:hover,.btn-hero-p:hover,.btn-hero-w:hover,.btn-cta-w:hover,.btn-submit:hover,.btn-pp:hover{transform:translateY(-2px)!important}
/* arrow on primary hero button, as in the reference */
.btn-hero-p::after,.btn-hero-w::after{content:'→';font-size:1.1em;font-weight:700;transition:transform .25s ease}
.btn-hero-p:hover::after,.btn-hero-w:hover::after{transform:translateX(4px)}
.rtl .btn-hero-p::after,.rtl .btn-hero-w::after{content:'←'}
.rtl .btn-hero-p:hover::after,.rtl .btn-hero-w:hover::after{transform:translateX(-4px)}

/* ============================================================
   BUTTON HOVER BEHAVIOUR (as in reference)
   filled  -> hover: transparent + accent outline + accent text
   outline -> hover: solid white fill + dark text
   ============================================================ */
/* --- FILLED buttons: keep 2px border at rest so size never jumps --- */
.btn-try,.btn-main,.btn-submit,.btn-pp,.mob-try,.btn-hero-p,.btn-hero-w{
  border:2px solid var(--p600)!important;background:var(--p600)!important;color:#fff!important}
/* on dark areas (nav, hero) the hover outline/text uses the lighter purple */
.btn-try:hover,.btn-hero-p:hover,.btn-hero-w:hover,.mob-try:hover{
  background:transparent!important;border-color:var(--p400)!important;color:var(--p300)!important;filter:none!important}
/* on light sections it uses the brand purple */
.btn-main:hover,.btn-submit:hover,.btn-pp:hover{
  background:transparent!important;border-color:var(--p600)!important;color:var(--p600)!important;filter:none!important}

/* --- OUTLINED on dark (hero / nav): white outline -> white fill --- */
.btn-hero-g,.btn-hero-o,.btn-demo,.btn-lang{
  background:transparent!important;border-color:#fff!important;color:#fff!important}
.btn-hero-g:hover,.btn-hero-o:hover,.btn-demo:hover,.btn-lang:hover{
  background:#fff!important;border-color:#fff!important;color:var(--p950)!important}

/* --- CTA band (purple bg): white fill <-> white outline swap --- */
.btn-cta-w{border:2px solid #fff!important;background:#fff!important;color:var(--p700)!important}
.btn-cta-w:hover{background:transparent!important;color:#fff!important;border-color:#fff!important}
.btn-cta-o{background:transparent!important;border-color:#fff!important;color:#fff!important}
.btn-cta-o:hover{background:#fff!important;border-color:#fff!important;color:var(--p700)!important}

/* --- OUTLINED on light (pricing): purple outline -> purple fill --- */
.btn-pg{background:transparent!important;border-color:var(--p600)!important;color:var(--p600)!important}
.btn-pg:hover{background:var(--p600)!important;border-color:var(--p600)!important;color:#fff!important}

/* arrow follows the text colour */
.btn-hero-p::after,.btn-hero-w::after{color:currentColor}

/* ============================================================
   BUTTON SIZE — compact
   ============================================================ */
.btn-hero-p,.btn-hero-w,.btn-hero-g,.btn-hero-o,.btn-cta-w,.btn-cta-o,.btn-main{padding:11px 24px!important;font-size:14.5px!important;gap:8px}
.btn-try,.btn-demo,.btn-lang{padding:8px 18px!important;font-size:13.5px!important}
.btn-submit,.btn-pp,.btn-pg{padding:12px 22px!important;font-size:14.5px!important}
.mob-try,.mob-demo{padding:12px 20px!important;font-size:14.5px!important}
.btn-hero-p,.btn-hero-w,.btn-hero-g,.btn-hero-o,.btn-cta-w,.btn-cta-o,.btn-main,.btn-try,.btn-demo,.btn-lang,.btn-submit,.btn-pp,.btn-pg{border-width:1.5px!important}
.btn-try,.btn-main,.btn-submit,.btn-pp,.mob-try,.btn-hero-p,.btn-hero-w,.btn-cta-w{border-width:1.5px!important}
.hero-ctas,.page-hero-btns,.cta-btns{gap:12px!important}
@media(max-width:768px){
  .btn-hero-p,.btn-hero-g,.btn-hero-w,.btn-hero-o,.btn-cta-w,.btn-cta-o{padding:11px 20px!important;font-size:14px!important}
}

/* ============================================================
   APP STORE / GOOGLE PLAY BADGES (hero)
   same behaviour as the other outlined buttons: outline -> white fill
   ============================================================ */
.hero a[href="#"]{
  gap:12px!important;padding:10px 20px 10px 16px!important;border-radius:14px!important;
  background:rgba(255,255,255,.06)!important;border:1.5px solid rgba(255,255,255,.35)!important;
  color:#fff!important;min-width:158px;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease!important}
.hero a[href="#"] svg{width:24px!important;height:24px!important;fill:currentColor!important;opacity:1!important;flex-shrink:0}
.hero a[href="#"] div div:first-child{font-size:11px!important;font-weight:500!important;color:currentColor!important;opacity:.75;letter-spacing:.01em;line-height:1.1!important}
.hero a[href="#"] div div:last-child{font-size:16px!important;font-weight:700!important;color:currentColor!important;line-height:1.2!important;letter-spacing:-.01em}
.hero a[href="#"]:hover{background:#fff!important;border-color:#fff!important;color:var(--p950)!important;transform:translateY(-2px)}
.hero a[href="#"]:hover div div:first-child{opacity:.7}
.hero a[href="#"]:hover svg{opacity:1!important}

/* ============================================================
   NAV BUTTONS — equal height / consistent look
   (language, Book a Demo, Try Free)
   ============================================================ */
.nav-actions{gap:10px!important;align-items:center!important}
.nav-actions .btn-lang,.nav-actions .btn-demo,.nav-actions .btn-try{
  height:42px!important;min-height:42px;padding:0 22px!important;box-sizing:border-box;
  font-size:14px!important;font-weight:700!important;line-height:1!important;white-space:nowrap;
  display:inline-flex!important;align-items:center;justify-content:center;
  border-width:1.5px!important;border-style:solid!important;border-radius:999px!important}
.nav-actions .btn-lang{padding:0 20px!important;min-width:84px}
.nav-actions .btn-lang,.nav-actions .btn-demo{border-color:rgba(255,255,255,.7)!important}
.nav-actions .btn-lang:hover,.nav-actions .btn-demo:hover{border-color:#fff!important}
.nav-actions a{display:inline-flex}
@media(max-width:1280px){
  .nav-actions .btn-lang,.nav-actions .btn-demo,.nav-actions .btn-try{height:38px!important;min-height:38px;padding:0 16px!important;font-size:13px!important}
  .nav-actions .btn-lang{min-width:0}
}

/* app store badges — slightly smaller */
.hero a[href="#"]{gap:9px!important;padding:7px 16px 7px 12px!important;border-radius:12px!important;min-width:0!important}
.hero a[href="#"] svg{width:19px!important;height:19px!important}
.hero a[href="#"] div div:first-child{font-size:9.5px!important}
.hero a[href="#"] div div:last-child{font-size:13.5px!important}

/* ============================================================
   RESTAURANT-TYPE TABS — show a real image in each panel
   ============================================================ */
.rtype-panel-img{padding:0!important;overflow:hidden;background:var(--p50)!important;font-size:0!important}
.rtype-panel-img img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .4s ease}
.rtype-panel.active .rtype-panel-img img{animation:rtypeFade .35s ease}
@keyframes rtypeFade{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* ============================================================
   RESTAURANT-TYPE TABS — segmented pill bar
   icon + label in a row · one rounded track · active = purple fill
   ============================================================ */
.rtype-tabs{
  display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;
  width:fit-content;max-width:100%;margin:0 auto 36px!important;gap:4px!important;padding:6px;
  background:#fff;border:1px solid var(--border);border-radius:999px;
  overflow-x:auto;scrollbar-width:none}
.rtype-tabs::-webkit-scrollbar{display:none}
.rtype-tab{
  flex-direction:row!important;align-items:center;gap:8px!important;flex-shrink:0;
  min-width:0!important;padding:10px 18px!important;border:0!important;border-radius:999px!important;
  background:transparent!important;white-space:nowrap;
  transition:background-color .25s ease,color .25s ease}
.rtype-tab:hover{background:var(--p50)!important}
.rtype-tab .rtype-tab-ico svg{width:18px!important;height:18px!important}
.rtype-tab-label{font-size:14px!important;font-weight:600!important;color:var(--mid)!important}
.rtype-tab-ico{color:var(--mute)!important}
.rtype-tab:hover .rtype-tab-label{color:var(--p700)!important}
.rtype-tab:hover .rtype-tab-ico{color:var(--p600)!important}
/* active */
.rtype-tab.active{background:var(--p600)!important}
.rtype-tab.active .rtype-tab-label,.rtype-tab.active .rtype-tab-ico{color:#fff!important}
.rtype-label{text-transform:none!important;letter-spacing:0!important;font-size:15px!important;font-weight:600!important}
@media(max-width:768px){
  .rtype-tabs{margin-bottom:24px!important;padding:4px}
  .rtype-tab{padding:9px 14px!important}
  .rtype-tab-label{font-size:13px!important}
}

/* ============================================================
   KEY FEATURES (#all-features) — dark showcase section
   coloured top accent · tinted icon chip · big faded watermark number
   · scroll-reveal + hover animations
   ============================================================ */
#all-features{position:relative;overflow:hidden;background:#07030d;padding:110px 32px}
#all-features::before,#all-features::after{content:'';position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.55}
#all-features::before{width:520px;height:520px;left:-140px;top:-120px;background:radial-gradient(circle,rgba(144,71,200,.55),transparent 70%);animation:fgOrbA 16s ease-in-out infinite alternate}
#all-features::after{width:620px;height:620px;right:-180px;bottom:-200px;background:radial-gradient(circle,rgba(117,51,175,.5),transparent 70%);animation:fgOrbB 20s ease-in-out infinite alternate}
@keyframes fgOrbA{to{transform:translate(120px,80px) scale(1.15)}}
@keyframes fgOrbB{to{transform:translate(-140px,-60px) scale(1.1)}}
#all-features .si{position:relative;z-index:1}

/* heading */
#all-features .sec-tag{display:inline-flex;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;
  color:var(--p400)!important;font-size:12.5px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important;margin-bottom:18px!important}
#all-features .sec-tag::before{content:'';width:34px;height:1px;background:var(--p400)}
#all-features .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:#fff!important;
  font-size:clamp(34px,4.6vw,64px)!important;letter-spacing:-.03em!important;line-height:1.02!important;max-width:900px}
.rtl #all-features .sec-title{font-family:var(--ar)!important;font-weight:800!important;line-height:1.25!important;letter-spacing:0!important}
#all-features .sec-sub{color:rgba(255,255,255,.62)!important;max-width:640px}

/* grid + cards */
#all-features .fg{gap:22px!important;margin-top:56px!important}
#all-features .fc{
  --ac:#aa6dd8;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02))!important;
  border:1px solid rgba(255,255,255,.09)!important;border-radius:24px!important;
  padding:34px 28px 28px!important;min-height:270px;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,background .35s ease!important}
/* coloured top accent line */
#all-features .fc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(1)!important;
  background:linear-gradient(90deg,transparent,var(--ac),transparent)!important;opacity:.9;transition:opacity .3s,height .3s}
/* big faded watermark number */
#all-features .fc::after{content:'';position:absolute;right:-6px;bottom:-22px;font-size:112px;font-weight:800;line-height:1;letter-spacing:-.05em;
  color:var(--ac);opacity:.08;pointer-events:none;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s}
.rtl #all-features .fc::after{right:auto;left:-6px}
#all-features .fc:nth-child(1)::after{content:'01'}
#all-features .fc:nth-child(2)::after{content:'02'}
#all-features .fc:nth-child(3)::after{content:'03'}
#all-features .fc:nth-child(4)::after{content:'04'}
#all-features .fc:nth-child(5)::after{content:'05'}
#all-features .fc:nth-child(6)::after{content:'06'}
#all-features .fc:nth-child(7)::after{content:'07'}
#all-features .fc:nth-child(8)::after{content:'08'}
#all-features .fc:nth-child(9)::after{content:'09'}
/* per-card accent (all within the purple/violet family) */
#all-features .fc:nth-child(9n+1){--ac:#aa6dd8}
#all-features .fc:nth-child(9n+2){--ac:#c49de8}
#all-features .fc:nth-child(9n+3){--ac:#9047c8}
#all-features .fc:nth-child(9n+4){--ac:#aa6dd8}
#all-features .fc:nth-child(9n+5){--ac:#9047c8}
#all-features .fc:nth-child(9n+6){--ac:#c49de8}
#all-features .fc:nth-child(9n+7){--ac:#9047c8}
#all-features .fc:nth-child(9n+8){--ac:#c49de8}
#all-features .fc:nth-child(9n+9){--ac:#aa6dd8}

#all-features .fc-ico{width:54px;height:54px;border-radius:50%!important;margin:0 0 18px!important;
  background:color-mix(in srgb,var(--ac) 16%,transparent)!important;border:1px solid color-mix(in srgb,var(--ac) 35%,transparent)!important;
  transition:transform .5s cubic-bezier(.22,1,.36,1),background .3s}
#all-features .fc-ico svg *{stroke:var(--ac)!important}
#all-features .fc-title{color:#fff!important;font-size:19px!important;font-weight:700!important;letter-spacing:-.01em;margin-bottom:10px!important}
#all-features .fc-desc{color:rgba(255,255,255,.62)!important;font-size:14.5px!important;line-height:1.65!important}
#all-features .fc-link,#all-features .fc a{color:var(--ac)!important;margin-top:auto;padding-top:16px;font-weight:700}

/* hover */
#all-features .fc:hover{transform:translateY(-8px)!important;border-color:color-mix(in srgb,var(--ac) 55%,transparent)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 12%,transparent),rgba(255,255,255,.02))!important}
#all-features .fc:hover::before{height:4px;opacity:1}
#all-features .fc:hover::after{transform:translate(-10px,-8px) scale(1.08);opacity:.16}
.rtl #all-features .fc:hover::after{transform:translate(10px,-8px) scale(1.08)}
#all-features .fc:hover .fc-ico{transform:translateY(-3px) rotate(-8deg) scale(1.1);background:color-mix(in srgb,var(--ac) 28%,transparent)!important}

/* CTA button under the grid */
#all-features .btn-main{background:var(--p600)!important;border-color:var(--p600)!important;color:#fff!important}
#all-features .btn-main:hover{background:transparent!important;border-color:var(--p400)!important;color:var(--p300)!important}

/* scroll-reveal (only active when JS added .js-rv, so no-JS shows everything) */
.js-rv #all-features .rv,.js-rv #all-features .fc{opacity:0;transform:translateY(34px)}
.js-rv #all-features .rv.in{animation:fgUp .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*90ms)}
.js-rv #all-features .fc.in{animation:fgCard .85s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*90ms)}
@keyframes fgUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fgCard{from{opacity:0;transform:translateY(46px) scale(.96)}to{opacity:1;transform:none}}
/* accent line draws in once the card appears */
.js-rv #all-features .fc.in::before{animation:fgLine 1s .25s cubic-bezier(.22,1,.36,1) both}
@keyframes fgLine{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}

@media(prefers-reduced-motion:reduce){
  #all-features::before,#all-features::after{animation:none}
  .js-rv #all-features .rv,.js-rv #all-features .fc{opacity:1;transform:none}
  .js-rv #all-features .rv.in,.js-rv #all-features .fc.in,.js-rv #all-features .fc.in::before{animation:none}
}
@media(max-width:768px){
  #all-features{padding:64px 20px}
  #all-features .fc{min-height:0;padding:28px 22px 24px!important}
  #all-features .fc::after{font-size:86px}
}

/* ============================================================
   TRUSTED-BY MARQUEE + STATS BAR — dark showcase pair
   spaced eyebrow · separate dark cards · big accent numbers ·
   uppercase labels · reveal + hover animation
   ============================================================ */
.marquee-section{background:#07030d!important;border-bottom:0!important;padding:48px 0 28px!important;position:relative}
.marquee-label{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--p400)!important;
  font-size:12.5px!important;letter-spacing:.3em!important;font-weight:700!important;margin-bottom:28px!important}
.marquee-label::before,.marquee-label::after{content:'';width:34px;height:1px;background:var(--p400);opacity:.8}
.marquee-logo{background:rgba(255,255,255,.96)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:14px!important;height:46px!important;width:128px!important;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.marquee-logo:hover{transform:translateY(-4px)}
/* soft fade at the marquee edges */
.marquee-section>div:not(.marquee-label){-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

.stats-bar{background:#07030d!important;padding:28px 32px 96px!important;position:relative;overflow:hidden}
.stats-bar::before{content:'';position:absolute;left:50%;top:-40%;width:900px;height:600px;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(117,51,175,.28),transparent 65%);pointer-events:none}
.stats-bar-inner{background:transparent!important;border-radius:0!important;overflow:visible!important;gap:20px!important;position:relative;z-index:1}
.stat-box{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;
  border:1px solid rgba(255,255,255,.09);border-radius:24px!important;padding:40px 20px 34px!important;
  position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,background .35s ease}
.stat-box::before{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--p400),transparent);opacity:.7}
.stat-box:hover{transform:translateY(-8px);border-color:rgba(170,109,216,.55);background:linear-gradient(180deg,rgba(144,71,200,.18),rgba(255,255,255,.03))!important}
.stat-num{color:var(--p400)!important;font-size:clamp(40px,4.2vw,60px)!important;font-weight:800!important;letter-spacing:-.04em!important}
.stat-num span{color:var(--p300)!important}
.stat-desc{color:rgba(255,255,255,.62)!important;text-transform:uppercase;letter-spacing:.14em;font-size:12.5px!important;font-weight:600!important;margin-top:14px!important}

/* reveal */
.js-rv .stats-bar .stat-box,.js-rv .marquee-label{opacity:0;transform:translateY(34px)}
.js-rv .stats-bar .stat-box.in{animation:fgCard .85s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*110ms)}
.js-rv .marquee-label.in{animation:fgUp .8s cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce){
  .js-rv .stats-bar .stat-box,.js-rv .marquee-label{opacity:1;transform:none}
  .js-rv .stats-bar .stat-box.in,.js-rv .marquee-label.in{animation:none}
}
@media(max-width:1024px){.stats-bar-inner{grid-template-columns:1fr 1fr!important}}
@media(max-width:520px){.stats-bar-inner{grid-template-columns:1fr!important}.stats-bar{padding:20px 20px 64px!important}}

/* ============================================================
   RESTAURANT-TYPE SECTION — dark "slider" showcase
   serif heading · counter + arrows · media-left card with accent divider
   · progress dots · big faded number · switch animations
   ============================================================ */
.rtype-section{background:#07030d!important;border-bottom:0!important;padding:96px 32px 88px!important;position:relative;overflow:hidden}
.rtype-section::after{content:'';position:absolute;left:-10%;top:30%;width:700px;height:500px;background:radial-gradient(ellipse,rgba(117,51,175,.22),transparent 65%);pointer-events:none}
/* big faded number behind (set by JS: data-n) */
.rtype-section::before{content:attr(data-n);position:absolute;left:-2%;bottom:-8%;font-size:clamp(220px,32vw,460px);font-weight:800;line-height:.8;letter-spacing:-.06em;
  color:rgba(255,255,255,.028);pointer-events:none;transition:opacity .4s}
.rtl .rtype-section::before{left:auto;right:-2%}
.rtype-inner{position:relative;z-index:1}

/* heading row */
.rtype-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.rtype-label{text-align:left!important;margin:0!important;font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;
  font-size:clamp(32px,4.2vw,58px)!important;line-height:1.04!important;letter-spacing:-.03em!important;color:#fff!important;text-transform:none!important;max-width:760px;position:relative;padding-top:34px}
.rtype-label::before{content:'';position:absolute;top:0;left:0;width:34px;height:1px;background:var(--p400)}
.rtype-label .acc{color:var(--p400)}
.rtl .rtype-label{text-align:right!important;font-family:var(--ar)!important;font-weight:800!important;line-height:1.25!important;letter-spacing:0!important}
.rtl .rtype-label::before{left:auto;right:0}

/* counter + arrows */
.rtype-nav{display:flex;align-items:center;gap:12px}
.rtype-count{font-family:'Courier New',monospace;font-size:14px;letter-spacing:.12em;color:rgba(255,255,255,.55);margin-right:6px}
.rtype-arrow{width:50px;height:50px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background-color .25s,border-color .25s,transform .25s,color .25s}
.rtype-arrow:hover{background:var(--p600);border-color:var(--p600);transform:translateY(-2px)}
.rtype-arrow svg{width:18px;height:18px}
.rtl .rtype-arrow svg{transform:scaleX(-1)}

/* tabs: dark pill track */
.rtype-tabs{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.1)!important;margin:0 0 28px!important}
.rtype-tab:hover{background:rgba(255,255,255,.08)!important}
.rtype-tab-label{color:rgba(255,255,255,.78)!important}
.rtype-tab-ico{color:rgba(255,255,255,.5)!important}
.rtype-tab:hover .rtype-tab-label{color:#fff!important}
.rtype-tab:hover .rtype-tab-ico{color:var(--p300)!important}
.rtype-tab.active .rtype-tab-label,.rtype-tab.active .rtype-tab-ico{color:#fff!important}

/* panel = card: media left, text right */
.rtype-panel{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important;border:1px solid rgba(255,255,255,.09)!important;
  border-radius:28px!important;padding:0!important;overflow:hidden}
.rtype-panel.active{grid-template-columns:1.08fr 1fr!important;gap:0!important;align-items:stretch!important;animation:rtPanel .55s cubic-bezier(.22,1,.36,1) both}
.rtype-panel>div:first-child{padding:48px 52px!important;display:flex;flex-direction:column;justify-content:center;order:2}
.rtype-panel-img{order:1;border-radius:0!important;border:0!important;border-right:5px solid var(--p600)!important;aspect-ratio:auto!important;min-height:380px;
  background:linear-gradient(135deg,#f4ecfb,#e8d6f6)!important;padding:24px!important}
.rtl .rtype-panel-img{border-right:0!important;border-left:5px solid var(--p600)!important}
.rtype-panel-img img{object-fit:contain;max-height:420px;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.rtype-panel.active:hover .rtype-panel-img img{transform:scale(1.04)}
.rtype-panel-title{font-family:'Playfair Display',Georgia,serif!important;color:#fff!important;font-size:clamp(26px,2.6vw,38px)!important;font-weight:700!important;letter-spacing:-.02em!important;line-height:1.12!important;margin-bottom:14px!important}
.rtl .rtype-panel-title{font-family:var(--ar)!important;font-weight:800!important;letter-spacing:0!important}
.rtype-panel-desc{color:rgba(255,255,255,.68)!important;font-size:16.5px!important;line-height:1.75!important;font-style:italic}
.rtl .rtype-panel-desc{font-style:normal}
.rtype-features li{color:rgba(255,255,255,.86)!important}
.rtype-features li::before{color:var(--p400)!important}
/* staggered content in on switch */
.rtype-panel.active .rtype-panel-title,.rtype-panel.active .rtype-panel-desc,.rtype-panel.active .rtype-features li,.rtype-panel.active a{animation:rtUp .6s cubic-bezier(.22,1,.36,1) both}
.rtype-panel.active .rtype-panel-desc{animation-delay:.08s}
.rtype-panel.active .rtype-features li:nth-child(1){animation-delay:.14s}
.rtype-panel.active .rtype-features li:nth-child(2){animation-delay:.19s}
.rtype-panel.active .rtype-features li:nth-child(3){animation-delay:.24s}
.rtype-panel.active .rtype-features li:nth-child(4){animation-delay:.29s}
.rtype-panel.active .rtype-features li:nth-child(5){animation-delay:.34s}
.rtype-panel.active a{animation-delay:.4s}
@keyframes rtPanel{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.rtl .rtype-panel.active{animation-name:rtPanelR}
@keyframes rtPanelR{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes rtUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* progress dots */
.rtype-dots{display:flex;justify-content:center;gap:10px;margin-top:30px}
.rtype-dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.22);border:0;cursor:pointer;padding:0;transition:width .4s cubic-bezier(.22,1,.36,1),background-color .3s}
.rtype-dot:hover{background:rgba(255,255,255,.5)}
.rtype-dot.on{width:44px;background:var(--p600)}

@media(max-width:900px){
  .rtype-section{padding:64px 20px 56px!important}
  .rtype-panel.active{grid-template-columns:1fr!important}
  .rtype-panel>div:first-child{padding:30px 24px!important;order:2}
  .rtype-panel-img{display:flex!important;order:1;min-height:0;border-right:0!important;border-bottom:4px solid var(--p600)!important;aspect-ratio:16/10!important}
  .rtl .rtype-panel-img{border-left:0!important}
  .rtype-head{margin-bottom:22px}
  .rtype-arrow{width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
  .rtype-panel.active,.rtype-panel.active *{animation:none!important}
}

/* ============================================================
   TESTIMONIALS — dark two-column showcase
   left: eyebrow + serif title + text · right: stacked wide cards
   with big faded 01/02/03, divider line, accent role, reveal + hover
   ============================================================ */
.testi-section{background:#07030d!important;padding:110px 32px!important;position:relative;overflow:hidden}
.testi-section::before{content:'\201D';position:absolute;left:-1%;bottom:-18%;font-family:'Playfair Display',Georgia,serif;font-size:clamp(380px,48vw,720px);font-weight:800;line-height:1;
  color:rgba(255,255,255,.028);pointer-events:none}
.rtl .testi-section::before{left:auto;right:-1%;content:'\201C'}
.testi-section::after{content:'';position:absolute;right:-12%;top:-10%;width:700px;height:600px;background:radial-gradient(ellipse,rgba(117,51,175,.25),transparent 65%);pointer-events:none}

.testi-section .si{position:relative;z-index:1;display:grid;grid-template-columns:minmax(280px,.8fr) 1.5fr;column-gap:72px;
  grid-template-rows:auto auto auto 1fr;align-items:start}
.testi-section .si>.sec-tag,.testi-section .si>.sec-title,.testi-section .si>.sec-sub{grid-column:1}
.testi-section .si>.testi-grid{grid-column:2;grid-row:1 / span 4;margin-top:0!important}

/* left column */
.testi-section .sec-tag{display:inline-flex;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;
  color:var(--p400)!important;font-size:12.5px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important;margin-bottom:20px!important;justify-self:start}
.testi-section .sec-tag::before{content:'';width:34px;height:1px;background:var(--p400)}
.testi-section .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:#fff!important;
  font-size:clamp(34px,4vw,60px)!important;letter-spacing:-.03em!important;line-height:1.04!important;margin-bottom:22px!important}
.rtl .testi-section .sec-title{font-family:var(--ar)!important;font-weight:800!important;line-height:1.25!important;letter-spacing:0!important}
.testi-section .sec-sub{color:rgba(255,255,255,.62)!important;font-size:17px!important;line-height:1.75!important}

/* right column: stacked cards */
.testi-grid{grid-template-columns:1fr!important;gap:20px!important}
.testi-card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important;
  border:1px solid rgba(255,255,255,.09)!important;border-radius:26px!important;
  padding:34px 40px 30px 150px!important;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,background .35s ease!important}
.rtl .testi-card{padding:34px 150px 30px 40px!important}
/* big faded number */
.testi-card::before{content:'';position:absolute;left:26px;top:50%;transform:translateY(-50%);font-size:92px;font-weight:800;line-height:1;letter-spacing:-.05em;
  color:rgba(255,255,255,.07);pointer-events:none;transition:color .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.rtl .testi-card::before{left:auto;right:26px}
.testi-card:nth-child(1)::before{content:'01'}
.testi-card:nth-child(2)::before{content:'02'}
.testi-card:nth-child(3)::before{content:'03'}
.testi-card:nth-child(4)::before{content:'04'}
.testi-card:hover{transform:translateX(-8px);border-color:rgba(170,109,216,.55)!important;background:linear-gradient(180deg,rgba(144,71,200,.16),rgba(255,255,255,.025))!important}
.rtl .testi-card:hover{transform:translateX(8px)}
.testi-card:hover::before{color:rgba(170,109,216,.35);transform:translateY(-50%) scale(1.06)}

/* stars row with divider line */
.testi-stars{display:flex;align-items:center;margin-bottom:16px!important;margin-right:92px}
.rtl .testi-stars{margin-right:0;margin-left:92px}
.testi-stars span{color:var(--p300)!important;font-size:14px!important}
.testi-stars::after{content:'';flex:1;height:1px;margin-left:16px;background:linear-gradient(90deg,rgba(170,109,216,.55),transparent);transition:opacity .3s}
.rtl .testi-stars::after{margin-left:0;margin-right:16px;background:linear-gradient(270deg,rgba(170,109,216,.55),transparent)}
.testi-rating-badge{background:rgba(144,71,200,.18)!important;border:1px solid rgba(170,109,216,.4)!important;color:#fff!important;top:28px!important;right:36px!important;font-weight:700}
.rtl .testi-rating-badge{right:auto!important;left:36px!important}

.testi-quote{color:rgba(255,255,255,.86)!important;font-size:16.5px!important;line-height:1.75!important;font-style:italic;margin-bottom:22px!important}
.rtl .testi-quote{font-style:normal}
.testi-quote::before{color:rgba(170,109,216,.45)!important;font-size:60px!important;top:-14px!important}
.testi-author{border-top:0!important;padding-top:0!important;gap:14px!important}
.testi-avatar{width:48px!important;height:48px!important;background:var(--p600)!important;border:3px solid rgba(170,109,216,.35);outline:2px solid rgba(255,255,255,.08);outline-offset:2px}
.testi-name{color:#fff!important;font-size:16px!important}
.testi-role{color:var(--p400)!important;text-transform:uppercase;letter-spacing:.1em;font-size:11.5px!important;font-weight:700;margin-top:3px}

/* reveal + hover (JS adds .js-rv / .in) */
.js-rv .testi-section .rv,.js-rv .testi-section .testi-card{opacity:0}
.js-rv .testi-section .rv.in{animation:fgUp .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*90ms)}
.js-rv .testi-section .testi-card{transform:translateX(50px)}
.js-rv .testi-section .testi-card.in{animation:tsIn .9s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*130ms)}
.rtl.js-rv .testi-section .testi-card,.js-rv .rtl .testi-section .testi-card{transform:translateX(-50px)}
.js-rv .rtl .testi-section .testi-card.in,.rtl.js-rv .testi-section .testi-card.in{animation-name:tsInR}
@keyframes tsIn{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:none}}
@keyframes tsInR{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .js-rv .testi-section .rv,.js-rv .testi-section .testi-card{opacity:1;transform:none}
  .js-rv .testi-section .rv.in,.js-rv .testi-section .testi-card.in{animation:none}
}
@media(max-width:1024px){
  .testi-section .si{grid-template-columns:1fr;row-gap:0}
  .testi-section .si>.testi-grid{grid-column:1;grid-row:auto;margin-top:36px!important}
}
@media(max-width:640px){
  .testi-section{padding:64px 20px!important}
  .testi-card,.rtl .testi-card{padding:26px 22px 24px!important}
  .testi-card::before{font-size:60px;top:14px;transform:none;left:auto;right:18px}
  .rtl .testi-card::before{right:auto;left:18px}
  .testi-card:hover::before{transform:none}
  .testi-stars,.rtl .testi-stars{margin-right:70px;margin-left:0}
  .testi-rating-badge{top:22px!important;right:20px!important}
}

/* ============================================================
   RESTAURANT-TYPE SECTION — size down (heading + image + panel)
   ============================================================ */
.rtype-section{padding:80px 32px 72px!important}
.rtype-label{font-size:clamp(28px,3.2vw,46px)!important;max-width:none!important;padding-top:28px!important}
.rtype-head{margin-bottom:26px!important}
.rtype-arrow{width:44px;height:44px;border-radius:12px}
.rtype-count{font-size:13px}
.rtype-tabs{margin-bottom:22px!important}

.rtype-panel.active{grid-template-columns:.85fr 1fr!important}
.rtype-panel>div:first-child{padding:36px 44px!important}
.rtype-panel-img{min-height:0!important;padding:18px!important;border-right-width:4px!important}
.rtl .rtype-panel-img{border-left-width:4px!important}
.rtype-panel-img img{max-height:300px!important;width:100%}
.rtype-panel-title{font-size:clamp(22px,2.2vw,32px)!important;margin-bottom:12px!important}
.rtype-panel-desc{font-size:15px!important;line-height:1.7!important;margin-bottom:16px!important}
.rtype-features{gap:8px!important}
.rtype-features li{font-size:14px!important}
.rtype-dots{margin-top:22px}
@media(max-width:900px){
  .rtype-section{padding:56px 20px 48px!important}
  .rtype-label{font-size:clamp(26px,7vw,34px)!important}
  .rtype-panel-img img{max-height:220px!important}
  .rtype-panel>div:first-child{padding:26px 22px!important}
}

/* rtype heading — smaller */
.rtype-label{font-size:clamp(22px,2.3vw,34px)!important;line-height:1.15!important;padding-top:24px!important}
.rtype-panel-title{font-size:clamp(20px,1.8vw,26px)!important}
@media(max-width:900px){.rtype-label{font-size:clamp(22px,6vw,28px)!important}}

/* rtype: eyebrow sub-heading (line + spaced caps) above the title */
.rtype-titlebox{min-width:0}
.rtype-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:12px;color:var(--p400);font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.3em}
.rtype-eyebrow::before{content:'';width:34px;height:1px;background:var(--p400);flex-shrink:0}
.rtype-titlebox .rtype-label{padding-top:0!important}
.rtype-titlebox .rtype-label::before{display:none!important}

/* ============================================================
   RESTAURANT-TYPE SECTION — LIGHT theme (contrasts with the dark hero)
   layout / animations unchanged, only colours flipped
   ============================================================ */
.rtype-section{background:linear-gradient(180deg,#faf7fd,#f3ebfa)!important;border-bottom:1px solid var(--border)!important}
.rtype-section::after{background:radial-gradient(ellipse,rgba(144,71,200,.14),transparent 65%)}
.rtype-section::before{color:rgba(117,51,175,.06)}

.rtype-eyebrow{color:var(--p600)}
.rtype-eyebrow::before{background:var(--p600)}
.rtype-label{color:var(--txt)!important}
.rtype-label .acc{color:var(--p600)}

.rtype-count{color:var(--mute)}
.rtype-arrow{background:#fff;border:1px solid var(--border);color:var(--p700)}
.rtype-arrow:hover{background:var(--p600);border-color:var(--p600);color:#fff}

.rtype-tabs{background:#fff!important;border:1px solid var(--border)!important}
.rtype-tab:hover{background:var(--p50)!important}
.rtype-tab-label{color:var(--mid)!important}
.rtype-tab-ico{color:var(--mute)!important}
.rtype-tab:hover .rtype-tab-label{color:var(--p700)!important}
.rtype-tab:hover .rtype-tab-ico{color:var(--p600)!important}
.rtype-tab.active .rtype-tab-label,.rtype-tab.active .rtype-tab-ico{color:#fff!important}

.rtype-panel{background:#fff!important;border:1px solid var(--border)!important}
.rtype-panel-title{color:var(--txt)!important}
.rtype-panel-desc{color:var(--mute)!important}
.rtype-features li{color:var(--mid)!important}
.rtype-features li::before{color:var(--p600)!important}
.rtype-panel-img{background:linear-gradient(135deg,#f6effc,#ead6f8)!important}

.rtype-dot{background:rgba(117,51,175,.2)}
.rtype-dot:hover{background:rgba(117,51,175,.45)}
.rtype-dot.on{background:var(--p600)}

/* button inside the panel (filled → outline on hover) keeps working on light bg */
.rtype-panel .btn-main:hover{color:var(--p600)!important;border-color:var(--p600)!important}

/* rtype counter + arrows — more visible on the light background */
.rtype-count{color:var(--p700)!important;font-size:15px!important;font-weight:700;letter-spacing:.14em}
.rtype-arrow{background:var(--p600)!important;border:1.5px solid var(--p600)!important;color:#fff!important;width:48px!important;height:48px!important}
.rtype-arrow svg{width:20px!important;height:20px!important;stroke-width:2.8}
.rtype-arrow:hover{background:transparent!important;color:var(--p600)!important;border-color:var(--p600)!important}

/* ============================================================
   TRUST + STATS — split layout (heading left · 2x2 stat cards right)
   logo marquee sits underneath as a full-width strip
   ============================================================ */
.stats-bar{padding:96px 32px 40px!important}
.stats-bar-inner.trust-split{display:grid!important;grid-template-columns:1.05fr 1fr;gap:72px!important;align-items:center;max-width:1280px;margin:0 auto;
  background:transparent!important;grid-auto-flow:row}

/* left: eyebrow + serif title (+ faded watermark) */
.trust-left{position:relative;z-index:1}
.trust-left::before{content:'1000+';position:absolute;left:-40px;bottom:-70px;font-size:clamp(150px,19vw,280px);font-weight:800;line-height:.8;letter-spacing:-.06em;
  color:rgba(255,255,255,.028);pointer-events:none;white-space:nowrap}
.rtl .trust-left::before{left:auto;right:-40px;content:'+1000'}
.trust-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:16px;color:var(--p400);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3em;position:relative}
.trust-eyebrow::before{content:'';width:34px;height:1px;background:var(--p400);flex-shrink:0}
.trust-left .marquee-label{display:block!important;text-align:left!important;margin:0!important;position:relative;
  font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:#fff!important;text-transform:none!important;
  font-size:clamp(32px,4vw,58px)!important;line-height:1.05!important;letter-spacing:-.03em!important;max-width:560px}
.trust-left .marquee-label::before,.trust-left .marquee-label::after{display:none!important}
.trust-left .marquee-label .acc{color:var(--p400)}
.rtl .trust-left .marquee-label{text-align:right!important;font-family:var(--ar)!important;font-weight:800!important;line-height:1.25!important;letter-spacing:0!important}

/* right: 2x2 cards */
.trust-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative;z-index:1}
.trust-cards .stat-box{padding:44px 20px 38px!important}
.trust-cards .stat-num{font-size:clamp(40px,4.4vw,64px)!important}

/* logo strip below */
.marquee-section{padding:8px 0 72px!important}
.marquee-section .marquee-label{display:none}

@media(max-width:900px){
  .stats-bar{padding:64px 20px 24px!important}
  .stats-bar-inner.trust-split{grid-template-columns:1fr!important;gap:36px!important}
  .trust-left .marquee-label{font-size:clamp(28px,8vw,40px)!important}
  .marquee-section{padding:8px 0 48px!important}
}
@media(max-width:480px){.trust-cards{grid-template-columns:1fr}}

/* ============================================================
   TRUST + STATS — scroll animation
   left text slides in · cards pop up in a stagger · watermark drifts ·
   logo strip rises. (all gated by .js-sa so no-JS shows everything)
   ============================================================ */
:root{--sa-dx:-70px}
.rtl{--sa-dx:70px}

.js-sa .trust-eyebrow,.js-sa .trust-left .marquee-label,
.js-sa .trust-cards .stat-box,.js-sa .marquee-section>div,.js-sa .trust-left::before{opacity:0}
.js-sa .trust-eyebrow,.js-sa .trust-left .marquee-label{transform:translateX(var(--sa-dx))}
.js-sa .trust-cards .stat-box{transform:translateY(60px) scale(.92)}
.js-sa .marquee-section>div{transform:translateY(40px)}

/* in-view states */
.js-sa .trust-eyebrow.sa-in,.js-sa .trust-left .marquee-label.sa-in{animation:saSlide .9s cubic-bezier(.22,1,.36,1) both!important;animation-delay:calc(var(--i,0)*120ms)!important}
.js-sa .trust-cards .stat-box.sa-in{animation:saPop .85s cubic-bezier(.22,1,.36,1) both!important;animation-delay:calc(var(--i,0)*130ms + 150ms)!important}
.js-sa .trust-cards .stat-box.in{animation:none}
.js-sa .trust-left.sa-in::before{animation:saMark 1.6s cubic-bezier(.22,1,.36,1) both}
.js-sa .marquee-section>div.sa-in{animation:saRise .9s cubic-bezier(.22,1,.36,1) both!important}
.js-sa .marquee-label.in{animation:none}

/* top accent line on each card draws in after the card lands */
.js-sa .trust-cards .stat-box.sa-in::before{animation:fgLine 1s calc(var(--i,0)*130ms + 600ms) cubic-bezier(.22,1,.36,1) both}

@keyframes saSlide{from{opacity:0;transform:translateX(var(--sa-dx))}to{opacity:1;transform:none}}
@keyframes saPop{0%{opacity:0;transform:translateY(60px) scale(.92)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes saMark{from{opacity:0;transform:translateX(calc(var(--sa-dx)*1.6))}to{opacity:1;transform:none}}
@keyframes saRise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .js-sa .trust-eyebrow,.js-sa .trust-left .marquee-label,.js-sa .trust-cards .stat-box,.js-sa .marquee-section>div,.js-sa .trust-left::before{opacity:1;transform:none}
  .js-sa .sa-in,.js-sa .sa-in::before{animation:none!important}
}

/* ============================================================
   UNIFORM SECTION HEADING SIZE (same as "Which best describes your restaurant?")
   ============================================================ */
.sec-title,
#all-features .sec-title,
.testi-section .sec-title,
.trust-left .marquee-label,
.rtype-label{
  font-size:clamp(22px,2.3vw,34px)!important;
  line-height:1.2!important;
  letter-spacing:-.02em!important}
.rtl .sec-title,.rtl #all-features .sec-title,.rtl .testi-section .sec-title,.rtl .trust-left .marquee-label,.rtl .rtype-label{line-height:1.35!important;letter-spacing:0!important}
/* matching sub-heading (eyebrow) size */
.sec-tag,#all-features .sec-tag,.testi-section .sec-tag,.trust-eyebrow,.rtype-eyebrow{font-size:12px!important}
/* subtitle under headings */
.sec-sub,#all-features .sec-sub,.testi-section .sec-sub{font-size:16px!important}
@media(max-width:900px){
  .sec-title,#all-features .sec-title,.testi-section .sec-title,.trust-left .marquee-label,.rtype-label{font-size:clamp(22px,6vw,28px)!important}
}

/* stat cards — smaller */
.trust-cards{gap:14px!important}
.trust-cards .stat-box{padding:28px 16px 24px!important;border-radius:20px!important}
.trust-cards .stat-num{font-size:clamp(28px,3vw,42px)!important}
.trust-cards .stat-desc{font-size:11px!important;letter-spacing:.12em!important;margin-top:10px!important}
@media(max-width:900px){.trust-cards .stat-num{font-size:clamp(28px,8vw,38px)!important}}

/* ============================================================
   RESTAURANT-TYPE SECTION — scroll animation
   title slides in · counter/arrows fade · tab bar rises ·
   card pops up (image from left, text staggered) · dots appear.
   Gated by .js-rt so nothing is hidden without JS.
   ============================================================ */
.js-rt .rtype-eyebrow,.js-rt .rtype-label,.js-rt .rtype-nav,.js-rt .rtype-tabs,
.js-rt .rtype-panel.active,.js-rt .rtype-dots{opacity:0}
.js-rt .rtype-eyebrow,.js-rt .rtype-label{transform:translateX(var(--sa-dx,-70px))}
.js-rt .rtype-nav{transform:translateY(-20px)}
.js-rt .rtype-tabs{transform:translateY(36px) scale(.97)}
.js-rt .rtype-panel.active{transform:translateY(70px) scale(.95)}
.js-rt .rtype-dots{transform:translateY(20px)}

.js-rt .rtype-eyebrow.rt-in,.js-rt .rtype-label.rt-in{animation:saSlide .9s cubic-bezier(.22,1,.36,1) both!important}
.js-rt .rtype-label.rt-in{animation-delay:.1s!important}
.js-rt .rtype-nav.rt-in{animation:rtDrop .8s .35s cubic-bezier(.22,1,.36,1) both!important}
.js-rt .rtype-tabs.rt-in{animation:rtRise .85s .25s cubic-bezier(.22,1,.36,1) both!important}
.js-rt .rtype-panel.active.rt-first{animation:rtCard 1s .45s cubic-bezier(.22,1,.36,1) both!important}
.js-rt .rtype-dots.rt-in{animation:rtRise .8s .9s cubic-bezier(.22,1,.36,1) both!important}

/* tabs pop in one after another */
.js-rt .rtype-tabs .rtype-tab{opacity:0;transform:translateY(14px)}
.js-rt .rtype-tabs.rt-in .rtype-tab{animation:rtTab .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--ti,0)*70ms + 450ms)}

/* image slides in from the media side when the card lands */
.js-rt .rtype-panel.active.rt-first .rtype-panel-img img{animation:rtImg 1.1s .7s cubic-bezier(.22,1,.36,1) both}
/* and then floats gently */
@media(prefers-reduced-motion:no-preference){
  .rtype-panel.active .rtype-panel-img img{animation:rtFloat 6s ease-in-out 1.8s infinite alternate}
  .js-rt .rtype-panel.active.rt-first .rtype-panel-img img{animation:rtImg 1.1s .7s cubic-bezier(.22,1,.36,1) both,rtFloat 6s ease-in-out 2.2s infinite alternate}
}
/* faded background number drifts in */
.js-rt .rtype-section::before{opacity:0}
.js-rt .rtype-section.rt-in::before{animation:rtMark 1.8s .2s cubic-bezier(.22,1,.36,1) both}

@keyframes rtDrop{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@keyframes rtRise{from{opacity:0;transform:translateY(36px) scale(.97)}to{opacity:1;transform:none}}
@keyframes rtCard{0%{opacity:0;transform:translateY(70px) scale(.95)}100%{opacity:1;transform:none}}
@keyframes rtTab{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rtImg{from{opacity:0;transform:translateX(-60px) scale(.92)}to{opacity:1;transform:none}}
@keyframes rtFloat{from{translate:0 0}to{translate:0 -8px}}
@keyframes rtMark{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:none}}
.rtl .js-rt .rtype-panel.active.rt-first .rtype-panel-img img{animation-name:rtImgR}
@keyframes rtImgR{from{opacity:0;transform:translateX(60px) scale(.92)}to{opacity:1;transform:none}}

/* button + list items inside card get a hover nudge */
.rtype-features li{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.rtype-features li:hover{transform:translateX(6px)}
.rtl .rtype-features li:hover{transform:translateX(-6px)}

@media(prefers-reduced-motion:reduce){
  .js-rt .rtype-eyebrow,.js-rt .rtype-label,.js-rt .rtype-nav,.js-rt .rtype-tabs,.js-rt .rtype-panel.active,.js-rt .rtype-dots,
  .js-rt .rtype-tabs .rtype-tab,.js-rt .rtype-section::before{opacity:1;transform:none}
  .js-rt .rt-in,.js-rt .rt-in *{animation:none!important}
}

/* ============================================================
   HERO + HEADER — entrance animation (plays on page load)
   header drops in · eyebrow/title/text/buttons rise in a stagger ·
   product image flies in then floats · grid texture drifts
   ============================================================ */
:root{--hero-dx:90px}
.rtl{--hero-dx:-90px}

/* header */
.nav-wrap{animation:hrDrop .8s cubic-bezier(.22,1,.36,1) both}
@keyframes hrDrop{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}

/* left column — each child rises in turn */
.hero-grid>div:first-child>*{animation:hrUp .9s cubic-bezier(.22,1,.36,1) both}
.hero-grid>div:first-child>*:nth-child(1){animation-delay:.25s}
.hero-grid>div:first-child>*:nth-child(2){animation-delay:.4s;animation-name:hrTitle;animation-duration:1.1s}
.hero-grid>div:first-child>*:nth-child(3){animation-delay:.65s}
.hero-grid>div:first-child>*:nth-child(4){animation-delay:.8s}
.hero-grid>div:first-child>*:nth-child(5){animation-delay:.95s}
.hero-grid>div:first-child>*:nth-child(6){animation-delay:1.1s}
@keyframes hrUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes hrTitle{from{opacity:0;transform:translateY(46px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}

/* right: product image flies in, then floats */
.hero-panel{animation:hrPanel 1.2s .5s cubic-bezier(.22,1,.36,1) both}
@keyframes hrPanel{from{opacity:0;transform:translateX(var(--hero-dx)) scale(.9)}to{opacity:1;transform:none}}
.hero-panel-bg img{animation:hrFloat 6s ease-in-out 1.8s infinite alternate}
@keyframes hrFloat{from{translate:0 0}to{translate:0 -12px}}

/* background texture drifts slowly */
.hero::after,.page-hero::after{animation:hrGrid 24s linear infinite}
@keyframes hrGrid{from{background-position:0 0}to{background-position:72px 72px}}

/* buttons: arrow nudges in the loop to invite a click */
.btn-hero-p::after{animation:hrArrow 1.8s ease-in-out 2s infinite}
@keyframes hrArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.rtl .btn-hero-p::after{animation-name:hrArrowR}
@keyframes hrArrowR{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}

/* inner pages' header */
.page-hero-inner>*{animation:hrUp .9s cubic-bezier(.22,1,.36,1) both}
.page-hero-inner>*:nth-child(1){animation-delay:.2s}
.page-hero-inner>*:nth-child(2){animation-delay:.35s;animation-name:hrTitle;animation-duration:1.1s}
.page-hero-inner>*:nth-child(3){animation-delay:.55s}
.page-hero-inner>*:nth-child(4){animation-delay:.7s}

@media(prefers-reduced-motion:reduce){
  .nav-wrap,.hero-grid>div:first-child>*,.hero-panel,.hero-panel-bg img,.hero::after,.page-hero::after,
  .btn-hero-p::after,.page-hero-inner>*{animation:none!important}
}

/* ============================================================
   "EVERYTHING YOU NEED" (#features) — light showcase
   eyebrow + serif title · pill-card tab list · framed preview window
   · scroll reveal · image swap animation
   ============================================================ */
#features{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#faf7fd 100%);padding:96px 32px!important}
#features::before{content:'';position:absolute;right:-12%;top:-8%;width:640px;height:560px;background:radial-gradient(ellipse,rgba(144,71,200,.13),transparent 65%);pointer-events:none}
#features::after{content:'';position:absolute;left:-10%;bottom:-14%;width:560px;height:480px;background:radial-gradient(ellipse,rgba(117,51,175,.09),transparent 65%);pointer-events:none}
#features .si{position:relative;z-index:1}

/* heading block */
#features .sec-tag{display:inline-flex;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;
  color:var(--p600)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important;margin-bottom:14px!important}
#features .sec-tag::before{content:'';width:34px;height:1px;background:var(--p600)}
#features .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:var(--txt)!important;max-width:none!important}
#features .sec-title .acc{color:var(--p600)}
.rtl #features .sec-title{font-family:var(--ar)!important;font-weight:800!important}
#features .sec-sub{color:#6b6179!important}

/* layout */
#features .feat-grid{grid-template-columns:340px 1fr!important;gap:36px!important;margin-top:44px!important;align-items:stretch!important}

/* tab list: pill cards */
#features .feat-tabs{gap:10px!important}
#features .ft{background:#fff;border:1px solid var(--border)!important;border-radius:16px!important;padding:12px 16px!important;gap:14px!important;position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .3s,border-color .3s,color .3s!important}
#features .ft:hover{transform:translateX(6px);border-color:var(--p300)!important;background:var(--p50)!important}
.rtl #features .ft:hover{transform:translateX(-6px)}
#features .ft-ico{width:40px!important;height:40px!important;border-radius:12px!important;background:var(--p50)!important;color:var(--p600)!important;
  transition:background-color .3s,color .3s,transform .4s cubic-bezier(.22,1,.36,1)!important}
#features .ft-title{font-size:15px!important;font-weight:700!important;color:var(--txt)!important;transition:color .3s}
#features .ft.on{background:var(--p600)!important;border-color:var(--p600)!important;transform:translateX(10px)}
.rtl #features .ft.on{transform:translateX(-10px)}
#features .ft.on .ft-title{color:#fff!important}
#features .ft.on .ft-ico{background:rgba(255,255,255,.18)!important;color:#fff!important;transform:rotate(-6deg) scale(1.06)}
#features .ft.on .ft-ico svg *{stroke:#fff}
#features .ft::after{content:'→';margin-left:auto;font-weight:700;color:#fff;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.rtl #features .ft::after{content:'←';margin-left:0;margin-right:auto;transform:translateX(8px)}
#features .ft.on::after{opacity:1;transform:none}

/* preview window */
#features .feat-display{position:relative!important;top:auto!important;aspect-ratio:auto!important;min-height:420px;border-radius:24px!important;
  border:1px solid var(--border)!important;background:linear-gradient(135deg,#f6effc,#ead6f8)!important;padding-top:40px;display:flex;align-items:center;justify-content:center}
#features .feat-display::before{content:'';position:absolute;left:0;right:0;top:0;height:40px;background:rgba(255,255,255,.7);border-bottom:1px solid var(--border);z-index:3}
#features .feat-display::after{content:'';position:absolute;left:16px;top:14px;width:12px;height:12px;border-radius:50%;background:#e9c2f5;z-index:4;
  box-shadow:none;outline:0;
  background:radial-gradient(circle,var(--p300) 0 50%,transparent 52%) 0 0/12px 12px no-repeat}
#features .feat-display img{position:relative!important;inset:auto!important;width:100%;height:100%;max-height:430px;padding:20px;object-fit:contain;z-index:2}
#features .feat-display img.feat-swap{animation:ftSwap .7s cubic-bezier(.22,1,.36,1) both}
@keyframes ftSwap{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
#features .feat-ph{display:none}

/* scroll reveal (gated by .js-ft): hidden only until .ft-in is added */
.js-ft #features .ft-rv:not(.ft-in){opacity:0}
.js-ft #features .sec-tag.ft-rv:not(.ft-in),.js-ft #features .sec-title.ft-rv:not(.ft-in),.js-ft #features .sec-sub.ft-rv:not(.ft-in),.js-ft #features .ft.ft-rv:not(.ft-in){transform:translateX(var(--sa-dx,-70px))}
.js-ft #features .feat-display.ft-rv:not(.ft-in){transform:translateY(60px) scale(.94)}
.js-ft #features .ft-rv.ft-in{animation:ftIn .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*90ms)}
.js-ft #features .feat-display.ft-in{animation:ftPop 1s .35s cubic-bezier(.22,1,.36,1) backwards}
@keyframes ftIn{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@keyframes ftPop{from{opacity:0;transform:translateY(60px) scale(.94)}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .js-ft #features .ft-rv{opacity:1;transform:none}
  .js-ft #features .ft-in,#features .feat-display img.feat-swap{animation:none!important}
}
@media(max-width:900px){
  #features{padding:60px 20px!important}
  #features .feat-grid{grid-template-columns:1fr!important;gap:22px!important}
  #features .feat-tabs{flex-direction:row!important;overflow-x:auto;gap:8px!important;padding-bottom:6px;scrollbar-width:none}
  #features .feat-tabs::-webkit-scrollbar{display:none}
  #features .ft{flex-shrink:0;white-space:nowrap;padding:10px 14px!important}
  #features .ft::after{display:none}
  #features .ft.on,#features .ft:hover{transform:none}
  #features .feat-display{min-height:240px}
}

/* ============================================================
   RESTAURANT-TYPE — autoplay (advances every 5s)
   the active dot fills like a progress bar; pauses on hover/focus,
   when off-screen, or when the browser tab is hidden
   ============================================================ */
.rtype-dot.on{position:relative;overflow:hidden;background:rgba(117,51,175,.25)!important}
.rtype-dot.on::after{content:'';position:absolute;inset:0;background:var(--p600);transform-origin:left center;transform:scaleX(0);
  animation:rtProg 5s linear forwards}
.rtl .rtype-dot.on::after{transform-origin:right center}
@keyframes rtProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* pause states */
.rtype-section:hover .rtype-dot.on::after,
.rtype-section:focus-within .rtype-dot.on::after,
.rtype-section.rt-offscreen .rtype-dot.on::after,
.rtype-section.rt-hidden .rtype-dot.on::after{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
  .rtype-dot.on{background:var(--p600)!important}
  .rtype-dot.on::after{display:none}
}

/* "Everything You Need": description text on the active (purple) tab */
#features .ft-desc{color:var(--mute)!important;font-size:13px!important;line-height:1.5}
#features .ft.on .ft-desc{color:rgba(255,255,255,.88)!important}

/* "Everything You Need" — smaller tabs + preview image */
#features{padding:72px 32px!important}
#features .feat-grid{grid-template-columns:290px 1fr!important;gap:28px!important;margin-top:32px!important}
#features .feat-tabs{gap:8px!important}
#features .ft{padding:9px 13px!important;gap:11px!important;border-radius:14px!important}
#features .ft-ico{width:34px!important;height:34px!important;border-radius:10px!important}
#features .ft-ico svg{width:16px;height:16px}
#features .ft-title{font-size:13.5px!important}
#features .ft-desc{font-size:12px!important;line-height:1.45!important}
#features .ft.on{transform:translateX(6px)}
.rtl #features .ft.on{transform:translateX(-6px)}
#features .feat-display{min-height:0!important;padding-top:34px;border-radius:20px!important;align-self:start}
#features .feat-display::before{height:34px}
#features .feat-display::after{top:11px}
#features .feat-display img{max-height:330px!important;padding:14px!important}
@media(max-width:900px){
  #features{padding:52px 20px!important}
  #features .feat-grid{grid-template-columns:1fr!important}
  #features .feat-display img{max-height:240px!important}
}

/* ============================================================
   "UP AND RUNNING IN 3 STEPS" (.hiw-section) — dark steps showcase
   left-aligned heading · 3 glass cards with numbered badge + trailing line
   · big faded 01/02/03 · scroll reveal · pulsing badge ring
   ============================================================ */
.hiw-section{background:#07030d!important;padding:88px 32px!important}
.hiw-section::before{background:radial-gradient(ellipse 45% 70% at 100% 40%,rgba(144,71,200,.24),transparent 65%),radial-gradient(ellipse 40% 60% at 0% 100%,rgba(117,51,175,.18),transparent 65%)!important}

/* heading */
.hiw-head{text-align:left!important;margin-bottom:44px!important}
.rtl .hiw-head{text-align:right!important}
.hiw-head .sec-tag{display:inline-flex;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;color:var(--p400)!important;
  font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important;margin-bottom:14px!important}
.hiw-head .sec-tag::before{content:'';width:34px;height:1px;background:var(--p400)}
.hiw-head .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:#fff!important}
.hiw-head .sec-title .acc{color:var(--p400)}
.rtl .hiw-head .sec-title{font-family:var(--ar)!important;font-weight:800!important}
.hiw-head .sec-sub{color:rgba(255,255,255,.62)!important;margin:0!important;max-width:560px}

/* cards */
.hiw-steps{gap:22px!important}
.hiw-steps::before{display:none!important}
.hiw-step{align-items:flex-start!important;text-align:left!important;padding:30px 30px 32px!important;min-height:260px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09);border-radius:24px;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,background .35s ease}
.rtl .hiw-step{text-align:right!important}
.hiw-step::before{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--p400),transparent);opacity:.8}
.hiw-step::after{content:'';position:absolute;right:-4px;bottom:-26px;font-size:130px;font-weight:800;line-height:1;letter-spacing:-.05em;color:rgba(170,109,216,.09);pointer-events:none;
  transition:transform .6s cubic-bezier(.22,1,.36,1),color .4s}
.rtl .hiw-step::after{right:auto;left:-4px}
.hiw-step:nth-child(1)::after{content:'01'}
.hiw-step:nth-child(2)::after{content:'02'}
.hiw-step:nth-child(3)::after{content:'03'}
.hiw-step:hover{transform:translateY(-8px);border-color:rgba(170,109,216,.55);background:linear-gradient(180deg,rgba(144,71,200,.16),rgba(255,255,255,.03))}
.hiw-step:hover::after{color:rgba(170,109,216,.22);transform:translate(-8px,-8px) scale(1.06)}

/* number badge + trailing line */
.hiw-num{width:100%!important;height:auto!important;background:none!important;border:0!important;border-radius:0!important;margin-bottom:22px!important;justify-content:flex-start!important}
.hiw-num::after{content:'';flex:1;height:1px;margin-left:16px;background:linear-gradient(90deg,rgba(170,109,216,.6),transparent)}
.rtl .hiw-num::after{margin-left:0;margin-right:16px;background:linear-gradient(270deg,rgba(170,109,216,.6),transparent)}
.hiw-num-inner{width:52px!important;height:52px!important;font-size:21px!important;position:relative;flex-shrink:0;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.hiw-num-inner::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(170,109,216,.55);animation:hiwRing 2.6s ease-out infinite}
.hiw-step:nth-child(2) .hiw-num-inner::before{animation-delay:.5s}
.hiw-step:nth-child(3) .hiw-num-inner::before{animation-delay:1s}
@keyframes hiwRing{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.hiw-step:hover .hiw-num-inner{transform:rotate(-8deg) scale(1.1)}

.hiw-step-title{font-size:19px!important;font-weight:700!important;color:#fff!important;letter-spacing:-.01em;margin-bottom:10px!important}
.hiw-step-desc{font-size:14.5px!important;color:rgba(255,255,255,.66)!important;line-height:1.7!important;position:relative;z-index:1}

/* scroll reveal (hidden only until .hw-in is added) */
.js-hw .hiw-section .hw-rv:not(.hw-in){opacity:0}
.js-hw .hiw-section .hiw-head .hw-rv:not(.hw-in){transform:translateX(var(--sa-dx,-70px))}
.js-hw .hiw-section .hiw-step.hw-rv:not(.hw-in){transform:translateY(60px) scale(.94)}
.js-hw .hiw-section .hiw-head .hw-rv.hw-in{animation:hwSlide .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms)}
.js-hw .hiw-section .hiw-step.hw-in{animation:hwPop .95s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*160ms + 150ms)}
.js-hw .hiw-section .hiw-step.hw-in .hiw-num::after{animation:hwLine 1.1s calc(var(--i,0)*160ms + 650ms) cubic-bezier(.22,1,.36,1) backwards}
.js-hw .hiw-section .hiw-step.hw-in .hiw-num-inner{animation:hwBadge .7s calc(var(--i,0)*160ms + 450ms) cubic-bezier(.34,1.56,.64,1) backwards}
.js-hw .hiw-section .hw-cta.hw-rv:not(.hw-in){transform:translateY(30px)}
.js-hw .hiw-section .hw-cta.hw-in{animation:hwUp .8s .7s cubic-bezier(.22,1,.36,1) backwards}
@keyframes hwSlide{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@keyframes hwPop{from{opacity:0;transform:translateY(60px) scale(.94)}to{opacity:1}}
@keyframes hwLine{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hwBadge{from{transform:scale(0) rotate(-90deg)}to{transform:none}}
@keyframes hwUp{from{opacity:0;transform:translateY(30px)}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .js-hw .hiw-section .hw-rv{opacity:1!important;transform:none!important}
  .js-hw .hiw-section .hw-in,.js-hw .hiw-section .hw-in *{animation:none!important}
  .hiw-num-inner::before{animation:none}
}
@media(max-width:900px){
  .hiw-section{padding:56px 20px!important}
  .hiw-steps{grid-template-columns:1fr!important}
  .hiw-step{min-height:0;padding:26px 22px 28px!important}
}

/* ============================================================
   "OUR PRODUCTS" (#products) — light showcase
   left-aligned serif heading · each product = framed card with
   big faded number · image in a lavender frame · scroll reveal
   ============================================================ */
#products{position:relative;overflow:hidden;background:linear-gradient(180deg,#faf7fd,#f3ebfa)!important;padding:88px 32px!important}
#products::before{content:'';position:absolute;left:-12%;top:-6%;width:620px;height:520px;background:radial-gradient(ellipse,rgba(144,71,200,.13),transparent 65%);pointer-events:none}
#products::after{content:'';position:absolute;right:-12%;bottom:-8%;width:620px;height:520px;background:radial-gradient(ellipse,rgba(117,51,175,.1),transparent 65%);pointer-events:none}
#products .si{position:relative;z-index:1}

/* heading (left aligned, same family as the other sections) */
#products .si>div:first-child{text-align:left!important;margin-bottom:8px!important}
.rtl #products .si>div:first-child{text-align:right!important}
#products .sec-tag{display:inline-flex!important;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin:0 0 14px!important;
  color:var(--p600)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
#products .sec-tag::before{content:'';width:34px;height:1px;background:var(--p600)}
#products .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:var(--txt)!important;text-align:left!important}
.rtl #products .sec-title{font-family:var(--ar)!important;font-weight:800!important;text-align:right!important}
#products .sec-title .acc{color:var(--p600)}
#products .sec-sub{margin:0!important;text-align:left!important;color:#6b6179!important}
.rtl #products .sec-sub{text-align:right!important}

/* each product = a card */
#products .prod-pair{
  position:relative;overflow:hidden;gap:48px!important;align-items:center;
  background:#fff;border:1px solid var(--border);border-radius:28px;padding:40px 44px!important;margin:0 0 26px!important;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease}
#products .si>div:first-child+.prod-pair{margin-top:44px!important}
#products .si>.prod-pair:last-of-type{margin-bottom:0!important}
#products .prod-pair:hover{transform:translateY(-6px);border-color:var(--p300)}
/* faded number */
#products .prod-pair::after{content:'';position:absolute;bottom:-34px;right:22px;font-size:150px;font-weight:800;line-height:1;letter-spacing:-.05em;
  color:rgba(117,51,175,.06);pointer-events:none;transition:transform .6s cubic-bezier(.22,1,.36,1),color .4s}
.rtl #products .prod-pair::after{right:auto;left:22px}
#products .prod-pair:nth-of-type(2)::after{content:"01"}
#products .prod-pair:nth-of-type(3)::after{content:"02"}
#products .prod-pair:nth-of-type(4)::after{content:"03"}
#products .prod-pair:hover::after{color:rgba(117,51,175,.12);transform:translateY(-8px)}
#products .prod-pair>*{position:relative;z-index:1}

/* text side */
#products .tag{background:var(--p50)!important;border:1px solid var(--p100)!important;color:var(--p700)!important;font-weight:600!important;border-radius:999px!important}
#products .prod-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;font-size:clamp(20px,1.9vw,27px)!important;letter-spacing:-.02em!important;color:var(--txt)!important;line-height:1.2!important}
.rtl #products .prod-title{font-family:var(--ar)!important;font-weight:800!important;letter-spacing:0!important}
#products .prod-desc{font-size:15px!important;color:#6b6179!important}
#products .prod-ul li{font-size:14px!important;color:var(--mid)!important;transition:transform .3s cubic-bezier(.22,1,.36,1)}
#products .prod-ul li:hover{transform:translateX(6px)}
.rtl #products .prod-ul li:hover{transform:translateX(-6px)}
#products .prod-ul li::before{content:'✓';display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--p50);border:1px solid var(--p100);color:var(--p600)!important;font-size:11px;margin-top:0}

/* image side: framed, floating */
#products .prod-img-box{border-radius:22px!important;border:1px solid var(--p100)!important;background:linear-gradient(135deg,#f6effc,#ead6f8)!important;
  aspect-ratio:16/10!important;padding:18px;overflow:hidden}
#products .prod-img-box img{transition:transform .8s cubic-bezier(.22,1,.36,1)}
#products .prod-pair:hover .prod-img-box img{transform:scale(1.05)}
@media(prefers-reduced-motion:no-preference){
  #products .prod-img-box img{animation:ppFloat 6s ease-in-out infinite alternate}
}
@keyframes ppFloat{from{translate:0 0}to{translate:0 -8px}}

/* scroll reveal (hidden only until .pp-in is added) */
.js-pp #products .pp-rv:not(.pp-in){opacity:0;transform:translateX(var(--pdx,-70px))}
.js-pp #products .si>div:first-child .pp-rv:not(.pp-in){transform:translateX(var(--sa-dx,-70px))}
.js-pp #products .prod-pair.pp-rv:not(.pp-in){opacity:0;transform:translateY(60px) scale(.96)}
.js-pp #products .si>div:first-child .pp-rv.pp-in{animation:ppSlide .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms)}
.js-pp #products .prod-pair.pp-in{animation:ppPop .95s cubic-bezier(.22,1,.36,1) backwards}
.js-pp #products .prod-pair.pp-in>*{animation:ppSide .95s .15s cubic-bezier(.22,1,.36,1) backwards}
.js-pp #products .prod-pair.pp-in>.prod-img-box{animation-name:ppSideR}
.js-pp #products .prod-pair.pp-in .prod-ul li{animation:ppLi .6s calc(var(--li,0)*80ms + 550ms) cubic-bezier(.22,1,.36,1) backwards}
.js-pp #products .prod-pair.pp-in .tag{animation:ppLi .6s calc(var(--li,0)*80ms + 350ms) cubic-bezier(.22,1,.36,1) backwards}
@keyframes ppSlide{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@keyframes ppPop{from{opacity:0;transform:translateY(60px) scale(.96)}to{opacity:1}}
@keyframes ppSide{from{opacity:0;transform:translateX(var(--text-dx,-50px))}to{opacity:1}}
@keyframes ppSideR{from{opacity:0;transform:translateX(var(--img-dx,50px)) scale(.94)}to{opacity:1}}
@keyframes ppLi{from{opacity:0;transform:translateY(12px)}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .js-pp #products .pp-rv{opacity:1!important;transform:none!important}
  .js-pp #products .pp-in,.js-pp #products .pp-in *{animation:none!important}
}
@media(max-width:900px){
  #products{padding:56px 20px!important}
  #products .prod-pair{padding:26px 22px!important;gap:22px!important;grid-template-columns:1fr!important}
  #products .prod-img-box{display:flex!important;order:-1;aspect-ratio:16/10!important}
}

/* ============================================================
   "3 STEPS" — back to the original open layout (no big cards):
   centred steps · ring badges joined by a connector line · compact
   ============================================================ */
.hiw-section{padding:72px 32px!important}
.hiw-head{text-align:center!important;margin-bottom:44px!important}
.rtl .hiw-head{text-align:center!important}
.hiw-head .sec-tag{justify-content:center}
.hiw-head .sec-tag::after{content:'';width:34px;height:1px;background:var(--p400)}
.hiw-head .sec-sub{margin:0 auto!important}

.hiw-steps{gap:0!important;position:relative}
/* connector line between the badges */
.hiw-steps::before{display:block!important;content:'';position:absolute;top:40px;left:calc(16.66% + 40px);right:calc(16.66% + 40px);height:2px;z-index:0;
  background:linear-gradient(90deg,rgba(170,109,216,.25),rgba(170,109,216,.85),rgba(170,109,216,.25));
  transform-origin:left center}
.rtl .hiw-steps::before{transform-origin:right center}

.hiw-step{background:none!important;border:0!important;border-radius:0!important;min-height:0!important;overflow:visible!important;
  align-items:center!important;text-align:center!important;padding:0 28px!important}
.rtl .hiw-step{text-align:center!important}
.hiw-step::before,.hiw-step::after{display:none!important}
.hiw-step:hover{transform:none!important;background:none!important;border:0!important}

/* ring badge (like the original) */
.hiw-num{width:80px!important;height:80px!important;background:rgba(117,51,175,.2)!important;border:2px solid rgba(170,109,216,.4)!important;border-radius:50%!important;
  display:flex;align-items:center;justify-content:center!important;margin-bottom:20px!important;position:relative;transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .3s,background-color .3s}
.hiw-num::after{display:none!important}
.hiw-num-inner{width:54px!important;height:54px!important;font-size:21px!important}
.hiw-step:hover .hiw-num{transform:translateY(-6px);border-color:var(--p400)!important;background:rgba(117,51,175,.34)!important}
.hiw-step:hover .hiw-num-inner{transform:none}

.hiw-step-title{font-size:18px!important;margin-bottom:8px!important}
.hiw-step-desc{font-size:14px!important;max-width:320px}

/* animation: line draws across, badges pop, texts rise */
.js-hw .hiw-section .hiw-step.hw-rv:not(.hw-in){transform:translateY(40px) scale(.96)}
.js-hw .hiw-section .hiw-step.hw-in{animation:hwUp .8s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*180ms + 250ms)}
.js-hw .hiw-section .hiw-steps.hw-line::before{animation:hwDraw 1.4s .3s cubic-bezier(.22,1,.36,1) backwards}
@keyframes hwDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:900px){
  .hiw-section{padding:52px 20px!important}
  .hiw-steps{grid-template-columns:1fr!important;gap:34px!important}
  .hiw-steps::before{display:none!important}
}

/* Key Features cards — smaller */
#all-features{padding:72px 32px!important}
#all-features .fg{gap:14px!important;margin-top:36px!important}
#all-features .fc{padding:22px 20px 20px!important;min-height:0!important;border-radius:20px!important}
#all-features .fc-ico{width:42px!important;height:42px!important;margin-bottom:12px!important}
#all-features .fc-ico svg{width:18px;height:18px}
#all-features .fc-title{font-size:16px!important;margin-bottom:6px!important}
#all-features .fc-desc{font-size:13px!important;line-height:1.55!important}
#all-features .fc-link,#all-features .fc a{padding-top:10px!important;font-size:12.5px!important}
#all-features .fc::after{font-size:72px!important;bottom:-12px!important}
@media(max-width:768px){#all-features{padding:52px 20px!important}#all-features .fc{padding:20px 18px 18px!important}}

/* ============================================================
   "IMDADY VS. GENERIC SYSTEMS" (.compare-section) — LIGHT theme
   left-aligned serif heading · white table card · highlighted Imdady
   column · round check badges · row hover · scroll reveal
   ============================================================ */
.compare-section{background:linear-gradient(180deg,#faf7fd,#f3ebfa)!important;padding:88px 32px!important}
.compare-section::before{background:radial-gradient(ellipse 50% 70% at 100% 20%,rgba(144,71,200,.13),transparent 65%),radial-gradient(ellipse 40% 60% at 0% 100%,rgba(117,51,175,.09),transparent 65%)!important}
.compare-inner{max-width:1040px!important}

/* heading */
.compare-head{text-align:left!important;margin-bottom:34px!important}
.rtl .compare-head{text-align:right!important}
.compare-head .sec-tag{display:inline-flex;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin-bottom:14px!important;
  color:var(--p600)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
.compare-head .sec-tag::before{content:'';width:34px;height:1px;background:var(--p600)}
.compare-head .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:var(--txt)!important}
.compare-head .sec-title .acc{color:var(--p600)}
.rtl .compare-head .sec-title{font-family:var(--ar)!important;font-weight:800!important}
.compare-head .sec-sub{color:#6b6179!important;margin:0!important;max-width:560px}

/* table card */
.compare-inner>div[style*="overflow-x"]{background:#fff;border:1px solid var(--border);border-radius:24px;overflow:hidden!important;overflow-x:auto!important}
.compare-table{border-collapse:collapse!important}
.compare-table th{padding:18px 22px!important;font-size:13px!important;background:#fff}
.compare-table th:first-child{color:var(--mute)!important;text-align:left}
.rtl .compare-table th:first-child,.rtl .compare-table td:first-child{text-align:right}
.compare-table th.col-imdady{background:var(--p600)!important;color:#fff!important;border-radius:0!important;font-size:14px!important;letter-spacing:.02em}
.compare-table th.col-others{color:var(--mute)!important;background:#fff!important}
.compare-table td{padding:15px 22px!important;font-size:14px!important;border-top:1px solid var(--border)!important;color:var(--mid)!important;background:#fff;
  transition:background-color .25s ease}
.compare-table td:first-child{color:var(--txt)!important;font-weight:600!important}
.compare-table td.col-imdady{background:var(--p50)!important;color:var(--p700)!important;font-weight:700!important;border-radius:0!important}
.compare-table tbody tr:hover td{background:#f7f1fc!important}
.compare-table tbody tr:hover td.col-imdady{background:var(--p100)!important}
.compare-table tr:last-child td.col-imdady{border-radius:0!important}

/* round check / cross badges */
.check-y,.check-n{display:inline-flex!important;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:800;margin-right:8px;vertical-align:middle;flex-shrink:0}
.rtl .check-y,.rtl .check-n{margin-right:0;margin-left:8px}
.check-y{background:var(--p600)!important;color:#fff!important}
.check-n{background:#f1ecf6!important;color:#9a8fa8!important}

/* CTA button under table */
.compare-inner>div[style*="text-align:center"]{margin-top:32px!important}
.compare-inner>div[style*="text-align:center"] .btn-cta-w{background:var(--p600)!important;border:1.5px solid var(--p600)!important;color:#fff!important}
.compare-inner>div[style*="text-align:center"] .btn-cta-w:hover{background:transparent!important;color:var(--p600)!important;border-color:var(--p600)!important}

/* scroll reveal (hidden only until .cp-in is added) */
.js-cp .compare-section .cp-rv:not(.cp-in){opacity:0}
.js-cp .compare-section .compare-head .cp-rv:not(.cp-in){transform:translateX(var(--sa-dx,-70px))}
.js-cp .compare-section .cp-card.cp-rv:not(.cp-in){transform:translateY(60px) scale(.96)}
.js-cp .compare-section .cp-cta.cp-rv:not(.cp-in){transform:translateY(30px)}
.js-cp .compare-section .compare-head .cp-rv.cp-in{animation:cpSlide .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms)}
.js-cp .compare-section .cp-card.cp-in{animation:cpPop .95s .1s cubic-bezier(.22,1,.36,1) backwards}
.js-cp .compare-section .cp-cta.cp-in{animation:cpUp .8s .3s cubic-bezier(.22,1,.36,1) backwards}
/* rows slide in one by one, ticks pop */
.js-cp .compare-section .cp-card.cp-in tbody tr{animation:cpRow .6s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--r,0)*80ms + 450ms)}
.js-cp .compare-section .cp-card.cp-in .check-y{animation:cpTick .5s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--r,0)*80ms + 750ms)}
@keyframes cpSlide{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@keyframes cpPop{from{opacity:0;transform:translateY(60px) scale(.96)}to{opacity:1}}
@keyframes cpUp{from{opacity:0;transform:translateY(30px)}to{opacity:1}}
@keyframes cpRow{from{opacity:0;transform:translateX(-24px)}to{opacity:1}}
@keyframes cpTick{from{transform:scale(0) rotate(-120deg)}to{transform:none}}
.rtl .js-cp .compare-section .cp-card.cp-in tbody tr{animation-name:cpRowR}
@keyframes cpRowR{from{opacity:0;transform:translateX(24px)}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .js-cp .compare-section .cp-rv{opacity:1!important;transform:none!important}
  .js-cp .compare-section .cp-in,.js-cp .compare-section .cp-in *{animation:none!important}
}
@media(max-width:768px){
  .compare-section{padding:56px 20px!important}
  .compare-table th,.compare-table td{padding:12px 14px!important;font-size:13px!important}
}

/* ============================================================
   COMPARISON — split layout, aligned with the other sections
   left: heading + text + button · right: table card (same 1280 container)
   ============================================================ */
.compare-section{padding:88px 32px!important}
.compare-inner{max-width:1280px!important;display:grid!important;grid-template-columns:minmax(260px,.8fr) 1.55fr;column-gap:64px;row-gap:0;
  grid-template-rows:auto auto 1fr;align-items:start;margin:0 auto}
.compare-head{grid-column:1;grid-row:1;margin-bottom:0!important}
.compare-head .sec-sub{margin-top:4px!important}
.compare-inner>div[style*="overflow-x"]{grid-column:2;grid-row:1 / span 3;min-width:0}
.compare-inner>div[style*="text-align:center"]{grid-column:1;grid-row:2;text-align:left!important;margin-top:26px!important}
.rtl .compare-inner>div[style*="text-align:center"]{text-align:right!important}
.compare-inner>div[style*="text-align:center"] .btn-cta-w{margin:0!important}

/* compact table so it fits the right column neatly */
.compare-table th{padding:15px 18px!important}
.compare-table td{padding:13px 18px!important;font-size:13.5px!important}
.compare-table th:first-child,.compare-table td:first-child{width:34%}
.compare-table td.col-imdady,.compare-table td:last-child{white-space:normal}

@media(max-width:1024px){
  .compare-inner{grid-template-columns:1fr!important;grid-template-rows:auto!important}
  .compare-head,.compare-inner>div[style*="overflow-x"],.compare-inner>div[style*="text-align:center"]{grid-column:1;grid-row:auto}
  .compare-inner>div[style*="overflow-x"]{margin-top:30px}
  .compare-inner>div[style*="text-align:center"]{margin-top:26px!important}
}

/* comparison table — icons + text left-aligned so every ✓ / ✗ sits in one straight line,
   and the table fits its card (no hidden Feature column) */
.compare-inner>div[style*="overflow-x"]{overflow-x:auto!important}
.compare-table{width:100%!important;table-layout:fixed;min-width:560px}
.compare-table th:first-child,.compare-table td:first-child{width:36%!important}
.compare-table th.col-imdady,.compare-table th.col-others{width:32%}
.compare-table th,.compare-table td{text-align:left!important}
.rtl .compare-table th,.rtl .compare-table td{text-align:right!important}
.compare-table td.col-imdady,.compare-table td:last-child,
.compare-table th.col-imdady,.compare-table th.col-others{padding-left:26px!important}
.rtl .compare-table td.col-imdady,.rtl .compare-table td:last-child,
.rtl .compare-table th.col-imdady,.rtl .compare-table th.col-others{padding-left:18px!important;padding-right:26px!important}
.compare-table td{white-space:normal;line-height:1.35}
.check-y,.check-n{margin-right:10px}

/* testimonial cards — smaller */
.testi-section{padding:72px 32px!important}
.testi-grid{gap:14px!important}
.testi-card{padding:22px 28px 20px 104px!important;border-radius:20px!important}
.rtl .testi-card{padding:22px 104px 20px 28px!important}
.testi-card::before{font-size:60px!important;left:20px!important}
.rtl .testi-card::before{left:auto!important;right:20px!important}
.testi-stars{margin-bottom:10px!important;margin-right:80px}
.rtl .testi-stars{margin-right:0;margin-left:80px}
.testi-stars span{font-size:12px!important}
.testi-rating-badge{top:18px!important;right:24px!important;font-size:12px!important;padding:2px 9px!important}
.rtl .testi-rating-badge{right:auto!important;left:24px!important}
.testi-quote{font-size:14.5px!important;line-height:1.65!important;margin-bottom:14px!important}
.testi-quote::before{font-size:44px!important;top:-10px!important}
.testi-avatar{width:38px!important;height:38px!important;font-size:14px!important;border-width:2px!important}
.testi-name{font-size:14px!important}
.testi-role{font-size:10.5px!important;letter-spacing:.08em!important}
@media(max-width:640px){
  .testi-section{padding:52px 20px!important}
  .testi-card,.rtl .testi-card{padding:20px 18px 18px!important}
  .testi-card::before{font-size:44px!important}
}

/* ============================================================
   TESTIMONIALS — extra animation
   stars light up one by one · line draws · rating badge pops · avatar ring pulses ·
   quote mark floats · cards take turns glowing
   ============================================================ */
/* stars twinkle in */
.testi-card.in .testi-stars span{animation:tsStar .5s cubic-bezier(.34,1.56,.64,1) backwards}
.testi-card.in .testi-stars span:nth-child(1){animation-delay:calc(var(--i,0)*130ms + .55s)}
.testi-card.in .testi-stars span:nth-child(2){animation-delay:calc(var(--i,0)*130ms + .65s)}
.testi-card.in .testi-stars span:nth-child(3){animation-delay:calc(var(--i,0)*130ms + .75s)}
.testi-card.in .testi-stars span:nth-child(4){animation-delay:calc(var(--i,0)*130ms + .85s)}
.testi-card.in .testi-stars span:nth-child(5){animation-delay:calc(var(--i,0)*130ms + .95s)}
@keyframes tsStar{from{opacity:0;transform:scale(0) rotate(-140deg)}to{opacity:1;transform:none}}
/* line after the stars draws across */
.testi-card.in .testi-stars::after{animation:tsLine 1.1s calc(var(--i,0)*130ms + 1s) cubic-bezier(.22,1,.36,1) backwards}
@keyframes tsLine{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.rtl .testi-card.in .testi-stars::after{animation-name:tsLineR}
@keyframes tsLineR{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
/* rating badge pops */
.testi-card.in .testi-rating-badge{animation:tsBadge .6s calc(var(--i,0)*130ms + 1.1s) cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes tsBadge{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
/* quote + author rise */
.testi-card.in .testi-quote{animation:tsRise .8s calc(var(--i,0)*130ms + .5s) cubic-bezier(.22,1,.36,1) backwards}
.testi-card.in .testi-author{animation:tsRise .8s calc(var(--i,0)*130ms + .75s) cubic-bezier(.22,1,.36,1) backwards}
@keyframes tsRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* avatar: pulsing ring */
.testi-avatar{position:relative}
.testi-avatar::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(170,109,216,.55);animation:tsRing 2.8s ease-out infinite;pointer-events:none}
.testi-card:nth-child(2) .testi-avatar::after{animation-delay:.6s}
.testi-card:nth-child(3) .testi-avatar::after{animation-delay:1.2s}
@keyframes tsRing{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.55);opacity:0}}
/* quote mark floats */
.testi-quote::before{animation:tsFloat 4s ease-in-out infinite alternate}
@keyframes tsFloat{from{translate:0 0}to{translate:0 -6px}}
/* cards take turns glowing (class toggled by JS) */
.testi-card.ts-active{border-color:rgba(170,109,216,.6)!important;background:linear-gradient(180deg,rgba(144,71,200,.16),rgba(255,255,255,.03))!important}
.testi-card.ts-active::before{color:rgba(170,109,216,.35)}
.testi-card.ts-active .testi-stars::after{opacity:1;background:linear-gradient(90deg,rgba(170,109,216,.95),transparent)}
@media(prefers-reduced-motion:reduce){
  .testi-card.in .testi-stars span,.testi-card.in .testi-stars::after,.testi-card.in .testi-rating-badge,
  .testi-card.in .testi-quote,.testi-card.in .testi-author,.testi-avatar::after,.testi-quote::before{animation:none!important}
}

/* ============================================================
   "HELP & LEARNING" (#help-guides) — dark showcase
   left-aligned serif heading · two glass guide cards with faded
   RMS / POS watermark · link row with arrow chip · scroll reveal
   ============================================================ */
#help-guides{background:#07030d!important;padding:80px 32px!important;position:relative;overflow:hidden}
#help-guides::before{background:radial-gradient(ellipse 45% 70% at 100% 30%,rgba(144,71,200,.24),transparent 65%),radial-gradient(ellipse 40% 60% at 0% 100%,rgba(117,51,175,.16),transparent 65%)!important}

/* heading */
.help-head{text-align:left!important;margin-bottom:36px!important}
.rtl .help-head{text-align:right!important}
.help-head .sec-tag{display:inline-flex;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin-bottom:14px!important;
  color:var(--p400)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
.help-head .sec-tag::before{content:'';width:34px;height:1px;background:var(--p400)}
.help-head .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:#fff!important}
.help-head .sec-title .acc{color:var(--p400)}
.rtl .help-head .sec-title{font-family:var(--ar)!important;font-weight:800!important}
.help-head .sec-sub{color:rgba(255,255,255,.62)!important;margin:0!important;max-width:560px}

/* cards */
.help-cards{gap:20px!important}
.hc{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:24px!important;
  padding:30px 32px 30px!important;gap:14px!important;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,background .35s ease!important}
.hc::before{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--p400),transparent);opacity:.8}
.hc::after{top:auto!important;right:-6px!important;bottom:-30px!important;width:auto!important;height:auto!important;border-radius:0!important;background:none!important;
  font-size:130px;font-weight:800;line-height:1;letter-spacing:-.05em;color:rgba(170,109,216,.09);pointer-events:none;
  transition:transform .6s cubic-bezier(.22,1,.36,1),color .4s}
.rtl .hc::after{right:auto!important;left:-6px!important}
.hc:nth-child(1)::after{content:'RMS'}
.hc:nth-child(2)::after{content:'POS'}
.hc:hover{transform:translateY(-8px)!important;border-color:rgba(170,109,216,.55)!important;background:linear-gradient(180deg,rgba(144,71,200,.16),rgba(255,255,255,.03))!important}
.hc:hover::after{color:rgba(170,109,216,.2);transform:translate(-8px,-8px) scale(1.05)}
.hc>*{position:relative;z-index:1}

.hc-badge{background:rgba(144,71,200,.2)!important;border:1px solid rgba(170,109,216,.4);color:var(--p300)!important;letter-spacing:.14em!important}
.hc-title{font-family:'Playfair Display',Georgia,serif;font-size:clamp(20px,1.8vw,26px)!important;font-weight:700!important;letter-spacing:-.02em;color:#fff!important}
.rtl .hc-title{font-family:var(--ar);font-weight:800!important;letter-spacing:0}
.hc-desc{font-size:14.5px!important;color:rgba(255,255,255,.66)!important;line-height:1.7!important}

/* link row */
.hc-link{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important;padding:12px 16px!important;
  transition:background-color .3s,border-color .3s,transform .35s cubic-bezier(.22,1,.36,1)!important}
.hc-link:hover{background:rgba(144,71,200,.22)!important;border-color:var(--p400)!important;transform:translateX(6px)}
.rtl .hc-link:hover{transform:translateX(-6px)}
.hc-link-label{color:#fff!important;font-size:14px!important}
.hc-link-url{color:var(--p400)!important}
.hc-link-arrow{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(144,71,200,.25);color:#fff!important;font-size:15px!important;
  transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .3s}
.hc-link:hover .hc-link-arrow{transform:translate(3px,-3px) rotate(8deg);background:var(--p600)}

/* button (filled → outline on hover, like every other primary button) */
.btn-help{background:var(--p600)!important;border:1.5px solid var(--p600)!important;color:#fff!important;border-radius:999px!important;padding:10px 22px!important;font-size:14px!important;
  transition:background-color .25s,border-color .25s,color .25s,transform .25s!important}
.btn-help:hover{background:transparent!important;border-color:var(--p400)!important;color:var(--p300)!important;transform:translateY(-2px)!important}

/* scroll reveal (hidden only until .hl-in is added) */
.js-hl #help-guides .hl-rv:not(.hl-in){opacity:0}
.js-hl #help-guides .help-head .hl-rv:not(.hl-in){transform:translateX(var(--sa-dx,-70px))}
.js-hl #help-guides .hc.hl-rv:not(.hl-in){transform:translateY(60px) scale(.95)}
.js-hl #help-guides .help-head .hl-rv.hl-in{animation:hlSlide .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms)}
.js-hl #help-guides .hc.hl-in{animation:hlPop .95s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*160ms + 150ms)}
.js-hl #help-guides .hc.hl-in>*{animation:hlUp .7s cubic-bezier(.22,1,.36,1) backwards}
.js-hl #help-guides .hc.hl-in>*:nth-child(1){animation-delay:calc(var(--i,0)*160ms + .45s)}
.js-hl #help-guides .hc.hl-in>*:nth-child(2){animation-delay:calc(var(--i,0)*160ms + .55s)}
.js-hl #help-guides .hc.hl-in>*:nth-child(3){animation-delay:calc(var(--i,0)*160ms + .65s)}
.js-hl #help-guides .hc.hl-in>*:nth-child(4){animation-delay:calc(var(--i,0)*160ms + .75s)}
.js-hl #help-guides .hc.hl-in>*:nth-child(5){animation-delay:calc(var(--i,0)*160ms + .85s)}
@keyframes hlSlide{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@keyframes hlPop{from{opacity:0;transform:translateY(60px) scale(.95)}to{opacity:1}}
@keyframes hlUp{from{opacity:0;transform:translateY(16px)}to{opacity:1}}
/* arrow gently nudges to invite a click */
@media(prefers-reduced-motion:no-preference){
  .hc-link-arrow{animation:hlNudge 2.4s ease-in-out infinite}
}
@keyframes hlNudge{0%,100%{translate:0 0}50%{translate:2px -2px}}

@media(prefers-reduced-motion:reduce){
  .js-hl #help-guides .hl-rv{opacity:1!important;transform:none!important}
  .js-hl #help-guides .hl-in,.js-hl #help-guides .hl-in *{animation:none!important}
  .hc-link-arrow{animation:none}
}
@media(max-width:768px){
  #help-guides{padding:52px 20px!important}
  .help-cards{grid-template-columns:1fr!important}
  .hc{padding:24px 22px!important}
}



/* tighter gap between Customer Reviews and Help & Learning */
.testi-section{padding-bottom:36px!important}
#help-guides{padding-top:36px!important}
@media(max-width:768px){.testi-section{padding-bottom:28px!important}#help-guides{padding-top:28px!important}}

/* ============================================================
   "PRICING" (#pricing) — light showcase
   heading left + plan switches right · white plan cards, featured
   card in deep purple · scroll reveal · swap animation · sheen
   ============================================================ */
#pricing{position:relative;overflow:hidden;background:linear-gradient(180deg,#faf7fd,#f3ebfa)!important;padding:80px 32px!important}
#pricing::before{content:'';position:absolute;left:-10%;top:-8%;width:600px;height:520px;background:radial-gradient(ellipse,rgba(144,71,200,.13),transparent 65%);pointer-events:none}
#pricing::after{content:'';position:absolute;right:-12%;bottom:-10%;width:640px;height:540px;background:radial-gradient(ellipse,rgba(117,51,175,.1),transparent 65%);pointer-events:none}
#pricing .si{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;column-gap:40px;align-items:end}

/* heading (left) */
#pricing .si>div:first-child{grid-column:1;grid-row:1;text-align:left!important}
.rtl #pricing .si>div:first-child{text-align:right!important}
#pricing .sec-tag{display:inline-flex!important;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin:0 0 14px!important;
  color:var(--p600)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
#pricing .sec-tag::before{content:'';width:34px;height:1px;background:var(--p600)}
#pricing .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:var(--txt)!important;text-align:left!important}
.rtl #pricing .sec-title{font-family:var(--ar)!important;font-weight:800!important;text-align:right!important}
#pricing .sec-title .acc{color:var(--p600)}
#pricing .sec-sub{margin:0!important;text-align:left!important;color:#6b6179!important}
.rtl #pricing .sec-sub{text-align:right!important}

/* switches (right) */
#pricing .si>div:nth-child(2){grid-column:2;grid-row:1;margin-top:0!important;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.rtl #pricing .si>div:nth-child(2){align-items:flex-start}
#pricing .prod-toggle{margin:0!important;background:#fff!important;border:1px solid var(--border);padding:5px!important}
#pricing .prod-btn{padding:9px 28px!important;font-weight:700!important;color:var(--mid)!important;transition:background-color .3s,color .3s!important}
#pricing .prod-btn:hover{background:var(--p50)}
#pricing .prod-btn.on{background:var(--p600)!important;color:#fff!important}
#pricing .billing-row{margin:0!important;justify-content:flex-end}
#pricing .bl{color:var(--mute)!important}
#pricing .bl.on{color:var(--p700)!important}
#pricing .save-badge{background:var(--p600)!important}

/* cards */
#pricing .price-grid{grid-column:1 / -1;max-width:none!important;gap:22px!important;margin-top:40px!important;width:100%}
#pricing .pc{
  background:#fff!important;border:1px solid var(--border)!important;border-radius:26px!important;padding:32px 36px 34px!important;position:relative;overflow:visible;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease!important}
#pricing .pc:hover{transform:translateY(-8px)!important;border-color:var(--p300)!important}
#pricing .pc-name{font-family:'Playfair Display',Georgia,serif;font-size:22px!important;font-weight:700!important;letter-spacing:-.02em;color:var(--txt)}
.rtl #pricing .pc-name{font-family:var(--ar);font-weight:800!important;letter-spacing:0}
#pricing .pc-tagline{color:var(--mute)!important}
#pricing .pc-cur{color:var(--p700)!important}
#pricing .pc-amt{font-size:54px!important;color:var(--p700)!important}
#pricing .pc-per,#pricing .pc-note{color:var(--mute)!important}
#pricing .pc-div{background:var(--border)!important}
#pricing .pc-ul li{color:var(--mid)!important;font-size:14px!important;transition:transform .3s cubic-bezier(.22,1,.36,1)}
#pricing .pc-ul li:hover{transform:translateX(6px)}
.rtl #pricing .pc-ul li:hover{transform:translateX(-6px)}
#pricing .pc-ul li .ck{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--p50);border:1px solid var(--p100);color:var(--p600)!important;font-size:11px}
#pricing .pc-badge{background:#fff!important;color:var(--p700)!important;border:1px solid var(--p100);top:-15px!important;font-weight:700!important}

/* outline button on white cards */
#pricing .btn-pg{background:transparent!important;border:1.5px solid var(--p600)!important;color:var(--p600)!important}
#pricing .btn-pg:hover{background:var(--p600)!important;color:#fff!important}
#pricing .btn-pp{background:var(--p600)!important;border:1.5px solid var(--p600)!important;color:#fff!important}
#pricing .btn-pp:hover{background:transparent!important;color:var(--p600)!important}

/* featured plan: deep purple */
#pricing .pc.hero-plan{
  background:linear-gradient(160deg,#3d1a6a,#1f0b3a 70%)!important;border:1px solid rgba(170,109,216,.5)!important;overflow:hidden;color:#fff}
#pricing .pc.hero-plan:hover{border-color:var(--p400)!important}
#pricing .pc.hero-plan .pc-name,#pricing .pc.hero-plan .pc-amt,#pricing .pc.hero-plan .pc-cur{color:#fff!important}
#pricing .pc.hero-plan .pc-tagline,#pricing .pc.hero-plan .pc-per,#pricing .pc.hero-plan .pc-note{color:rgba(255,255,255,.7)!important}
#pricing .pc.hero-plan .pc-div{background:rgba(255,255,255,.14)!important}
#pricing .pc.hero-plan .pc-ul li{color:rgba(255,255,255,.88)!important}
#pricing .pc.hero-plan .pc-ul li .ck{background:rgba(170,109,216,.25);border-color:rgba(170,109,216,.5);color:#fff!important}
#pricing .pc.hero-plan .pc-badge{top:18px!important;left:auto!important;right:22px;transform:none!important;background:var(--p600)!important;color:#fff!important;border:0}
.rtl #pricing .pc.hero-plan .pc-badge{right:auto;left:22px}
#pricing .pc.hero-plan .btn-pp,#pricing .pc.hero-plan .btn-pg{background:#fff!important;border:1.5px solid #fff!important;color:var(--p700)!important}
#pricing .pc.hero-plan .btn-pp:hover,#pricing .pc.hero-plan .btn-pg:hover{background:transparent!important;color:#fff!important}
/* sheen sweep across the featured card */
#pricing .pc.hero-plan::before{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);transform:skewX(-18deg);pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  #pricing .pc.hero-plan::before{animation:prSheen 6s ease-in-out 1.5s infinite}
  #pricing .pc.hero-plan .pc-badge{animation:prBadge 3s ease-in-out infinite alternate}
}
@keyframes prSheen{0%{left:-60%}35%,100%{left:130%}}
@keyframes prBadge{from{translate:0 0}to{translate:0 -3px}}

/* footnote */
#pricing .si>p{grid-column:1 / -1;text-align:center}

/* scroll reveal (hidden only until .pr-in is added) */
.js-pr #pricing .pr-rv:not(.pr-in){opacity:0}
.js-pr #pricing .si>div:first-child .pr-rv:not(.pr-in){transform:translateX(var(--sa-dx,-70px))}
.js-pr #pricing .si>div:nth-child(2).pr-rv:not(.pr-in){transform:translateY(-20px)}
.js-pr #pricing .pc.pr-rv:not(.pr-in){transform:translateY(70px) scale(.95)}
.js-pr #pricing .si>p.pr-rv:not(.pr-in){transform:translateY(20px)}
.js-pr #pricing .si>div:first-child .pr-rv.pr-in{animation:prSlide .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms)}
.js-pr #pricing .si>div:nth-child(2).pr-in{animation:prDrop .8s .3s cubic-bezier(.22,1,.36,1) backwards}
.js-pr #pricing .pc.pr-in{animation:prPop .95s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*160ms + 200ms)}
.js-pr #pricing .si>p.pr-in{animation:prUp .8s .5s cubic-bezier(.22,1,.36,1) backwards}
/* price digits / list rise inside each card */
.js-pr #pricing .pc.pr-in .pc-amt{animation:prUp .7s calc(var(--i,0)*160ms + .55s) cubic-bezier(.22,1,.36,1) backwards}
.js-pr #pricing .pc.pr-in .pc-ul li{animation:prUp .6s calc(var(--li,0)*70ms + var(--i,0)*160ms + .7s) cubic-bezier(.22,1,.36,1) backwards}
@keyframes prSlide{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@keyframes prDrop{from{opacity:0;transform:translateY(-20px)}to{opacity:1}}
@keyframes prPop{from{opacity:0;transform:translateY(70px) scale(.95)}to{opacity:1}}
@keyframes prUp{from{opacity:0;transform:translateY(16px)}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .js-pr #pricing .pr-rv{opacity:1!important;transform:none!important}
  .js-pr #pricing .pr-in,.js-pr #pricing .pr-in *{animation:none!important}
}
@media(max-width:900px){
  #pricing{padding:52px 20px!important}
  #pricing .si{grid-template-columns:1fr}
  #pricing .si>div:nth-child(2){grid-column:1;grid-row:2;align-items:flex-start;margin-top:24px!important}
  #pricing .price-grid{grid-template-columns:1fr!important;margin-top:30px!important;gap:30px!important}
  #pricing .pc{padding:26px 22px!important}
}

/* ============================================================
   RATINGS BAR (Google / App Store / Google Play / 1000+) — light cards strip
   four equal cards · uppercase platform label · stars + big score ·
   scroll reveal · stars twinkle · hover lift
   ============================================================ */
.ratings-bar{background:#f3ebfa!important;border:0!important;padding:8px 32px 56px!important;position:relative;overflow:hidden}
.ratings-inner{max-width:1280px!important;display:grid!important;grid-template-columns:repeat(4,1fr);gap:16px!important;justify-content:stretch!important}
.rating-divider{display:none!important}

.rating-item{
  background:#fff;border:1px solid var(--border);border-radius:20px;padding:18px 22px;position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s ease,background-color .3s ease}
.rating-item::before{content:'';position:absolute;top:0;left:22%;right:22%;height:2px;background:linear-gradient(90deg,transparent,var(--p500),transparent);opacity:.7}
.rating-item:hover{transform:translateY(-6px);border-color:var(--p300);background:linear-gradient(180deg,var(--p50),#fff)}
.rating-item>div{width:100%}

.rating-platform{font-size:11.5px!important;font-weight:700!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--p600)!important}
.rating-item>div>div:last-child{margin-top:8px!important;gap:10px!important}
.rating-stars{gap:3px!important}
.rating-stars span{color:#f5a623!important;font-size:16px!important;display:inline-block}
.rating-score{font-size:26px!important;font-weight:800!important;letter-spacing:-.03em;color:var(--p700)!important;line-height:1}
.rating-count{font-size:12px!important;color:var(--mute)!important}
/* the "1000+ Active Restaurants" card: bigger label, accent country */
.rating-item:last-child .rating-platform{font-size:13px!important;letter-spacing:.08em!important;color:var(--p700)!important}
.rating-item:last-child span[style*="color:var(--p600)"]{display:inline-flex;align-items:center;gap:6px;background:var(--p50);border:1px solid var(--p100);border-radius:999px;padding:3px 12px;font-size:12.5px!important;font-weight:700!important}
.rating-item:last-child span[style*="color:var(--p600)"]::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--p600);animation:rbDot 1.8s ease-in-out infinite}
@keyframes rbDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.4)}}

/* idle: stars gently twinkle in a wave */
@media(prefers-reduced-motion:no-preference){
  .rating-stars span{animation:rbTwinkle 3.2s ease-in-out infinite}
  .rating-stars span:nth-child(2){animation-delay:.15s}
  .rating-stars span:nth-child(3){animation-delay:.3s}
  .rating-stars span:nth-child(4){animation-delay:.45s}
  .rating-stars span:nth-child(5){animation-delay:.6s}
}
@keyframes rbTwinkle{0%,70%,100%{transform:none;filter:none}85%{transform:scale(1.25) rotate(8deg);filter:brightness(1.15)}}

/* scroll reveal (hidden only until .rb-in is added) */
.js-rb .ratings-bar .rating-item:not(.rb-in){opacity:0;transform:translateY(40px) scale(.95)}
.js-rb .ratings-bar .rating-item.rb-in{animation:rbPop .8s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*120ms)}
.js-rb .ratings-bar .rating-item.rb-in .rating-stars span{animation:rbStar .5s cubic-bezier(.34,1.56,.64,1) backwards,rbTwinkle 3.2s ease-in-out infinite}
.js-rb .ratings-bar .rating-item.rb-in .rating-stars span:nth-child(1){animation-delay:calc(var(--i,0)*120ms + .35s),calc(var(--i,0)*120ms + 1.6s)}
.js-rb .ratings-bar .rating-item.rb-in .rating-stars span:nth-child(2){animation-delay:calc(var(--i,0)*120ms + .43s),calc(var(--i,0)*120ms + 1.75s)}
.js-rb .ratings-bar .rating-item.rb-in .rating-stars span:nth-child(3){animation-delay:calc(var(--i,0)*120ms + .51s),calc(var(--i,0)*120ms + 1.9s)}
.js-rb .ratings-bar .rating-item.rb-in .rating-stars span:nth-child(4){animation-delay:calc(var(--i,0)*120ms + .59s),calc(var(--i,0)*120ms + 2.05s)}
.js-rb .ratings-bar .rating-item.rb-in .rating-stars span:nth-child(5){animation-delay:calc(var(--i,0)*120ms + .67s),calc(var(--i,0)*120ms + 2.2s)}
.js-rb .ratings-bar .rating-item.rb-in .rating-score{animation:rbScore .7s calc(var(--i,0)*120ms + .55s) cubic-bezier(.22,1,.36,1) backwards}
@keyframes rbPop{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1}}
@keyframes rbStar{from{opacity:0;transform:scale(0) rotate(-140deg)}to{opacity:1}}
@keyframes rbScore{from{opacity:0;transform:translateY(12px)}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .js-rb .ratings-bar .rating-item{opacity:1!important;transform:none!important}
  .js-rb .ratings-bar .rating-item.rb-in,.js-rb .ratings-bar .rating-item.rb-in *{animation:none!important}
}
@media(max-width:1024px){.ratings-inner{grid-template-columns:1fr 1fr!important}}
@media(max-width:560px){
  .ratings-bar{padding:4px 20px 40px!important}
  .ratings-inner{grid-template-columns:1fr!important;gap:12px!important}
}

/* ============================================================
   "FAQ" (#faq) — dark split showcase
   left: heading + "Still have questions?" card · right: numbered
   accordion · open-state glow · scroll reveal
   ============================================================ */
#faq{position:relative;overflow:hidden;background:#07030d!important;padding:84px 32px!important}
#faq::before{content:'';position:absolute;right:-10%;top:-10%;width:640px;height:560px;background:radial-gradient(ellipse,rgba(144,71,200,.24),transparent 65%);pointer-events:none}
#faq::after{content:'?';position:absolute;left:-1%;bottom:-18%;font-family:'Playfair Display',Georgia,serif;font-size:clamp(380px,46vw,700px);font-weight:800;line-height:1;color:rgba(255,255,255,.025);pointer-events:none}
.rtl #faq::after{left:auto;right:-1%;content:'\061F'}

/* split layout: faq-grid dissolves so its children join the section grid */
#faq .si{position:relative;z-index:1;display:grid;grid-template-columns:minmax(280px,.8fr) 1.5fr;column-gap:72px;grid-template-rows:auto auto auto 1fr;align-items:start}
#faq .faq-grid{display:contents!important}
#faq .si>.sec-tag{grid-column:1;grid-row:1;justify-self:start}
#faq .si>.sec-title{grid-column:1;grid-row:2}
#faq .faq-grid>div:first-child{grid-column:2;grid-row:1 / span 4}
#faq .faq-cta{grid-column:1;grid-row:3;margin-top:28px}

/* heading */
#faq .sec-tag{display:inline-flex;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin:0 0 14px!important;
  color:var(--p400)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
#faq .sec-tag::before{content:'';width:34px;height:1px;background:var(--p400)}
#faq .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:#fff!important;margin-bottom:0!important}
#faq .sec-title .acc{color:var(--p400)}
.rtl #faq .sec-title{font-family:var(--ar)!important;font-weight:800!important}

/* accordion */
#faq .faq-grid>div:first-child{counter-reset:faq}
#faq .faq-item{counter-increment:faq;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09)!important;
  border-radius:20px!important;margin-bottom:12px!important;overflow:hidden;position:relative;
  transition:border-color .35s ease,background .35s ease,transform .4s cubic-bezier(.22,1,.36,1)}
#faq .faq-item:hover{border-color:rgba(170,109,216,.45)!important;transform:translateX(-4px)}
.rtl #faq .faq-item:hover{transform:translateX(4px)}
#faq .faq-item.open{border-color:rgba(170,109,216,.6)!important;background:linear-gradient(180deg,rgba(144,71,200,.18),rgba(255,255,255,.03))}
#faq .faq-item.open::before{content:'';position:absolute;top:0;left:12%;right:12%;height:2px;background:linear-gradient(90deg,transparent,var(--p400),transparent)}
#faq .faq-q{background:transparent!important;color:#fff!important;padding:18px 22px!important;font-size:15.5px!important;font-weight:600!important;gap:14px;justify-content:flex-start}
#faq .faq-q::before{content:counter(faq,decimal-leading-zero);font-size:13px;font-weight:800;letter-spacing:.06em;color:rgba(170,109,216,.7);flex-shrink:0;min-width:24px;transition:color .3s}
#faq .faq-item.open .faq-q::before{color:var(--p300)}
#faq .faq-q>span:first-child{flex:1}
#faq .faq-item.open .faq-q{color:#fff!important}
#faq .faq-arr{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(144,71,200,.22);color:#fff!important;font-size:18px!important;
  transition:transform .4s cubic-bezier(.22,1,.36,1),background-color .3s!important}
#faq .faq-item.open .faq-arr{background:var(--p600);transform:rotate(135deg)}
#faq .faq-a{background:transparent!important;color:rgba(255,255,255,.68)!important;padding:0 22px 20px 60px!important;font-size:14.5px!important;line-height:1.75!important}
.rtl #faq .faq-a{padding:0 60px 20px 22px!important}
#faq .faq-a a{color:var(--p300)!important;font-weight:600;text-decoration:underline;text-underline-offset:3px}
#faq .faq-item.open .faq-a{animation:faqOpen .5s cubic-bezier(.22,1,.36,1) both}
@keyframes faqOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* "Still have questions?" card */
#faq .faq-cta{background:linear-gradient(160deg,rgba(144,71,200,.2),rgba(255,255,255,.04))!important;border:1px solid rgba(170,109,216,.35)!important;border-radius:24px!important;padding:26px 28px!important;position:relative;overflow:hidden}
#faq .faq-cta>div:nth-child(1){font-size:30px!important;margin-bottom:10px!important;display:inline-block;animation:faqBob 3s ease-in-out infinite alternate}
@keyframes faqBob{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-6px) rotate(4deg)}}
#faq .faq-cta>div:nth-child(2){color:#fff!important;font-family:'Playfair Display',Georgia,serif;font-size:21px!important;font-weight:700!important;letter-spacing:-.02em!important}
.rtl #faq .faq-cta>div:nth-child(2){font-family:var(--ar)}
#faq .faq-cta>div:nth-child(3){color:rgba(255,255,255,.66)!important;font-size:14px!important;margin-bottom:18px!important}
#faq .faq-cta .btn-main{background:var(--p600)!important;border:1.5px solid var(--p600)!important;color:#fff!important}
#faq .faq-cta .btn-main:hover{background:transparent!important;border-color:var(--p400)!important;color:var(--p300)!important}
#faq .faq-cta .btn-ghost{background:transparent!important;border:1.5px solid rgba(255,255,255,.55)!important;color:#fff!important}
#faq .faq-cta .btn-ghost:hover{background:#fff!important;color:var(--p950)!important;border-color:#fff!important}
#faq .faq-cta>div:last-child{max-width:none!important}

/* scroll reveal (hidden only until .fq-in is added) */
.js-fq #faq .fq-rv:not(.fq-in){opacity:0}
.js-fq #faq .sec-tag.fq-rv:not(.fq-in),.js-fq #faq .sec-title.fq-rv:not(.fq-in){transform:translateX(var(--sa-dx,-70px))}
.js-fq #faq .faq-item.fq-rv:not(.fq-in){transform:translateX(calc(var(--sa-dx,-70px)*-1))}
.js-fq #faq .faq-cta.fq-rv:not(.fq-in){transform:translateY(50px) scale(.95)}
.js-fq #faq .sec-tag.fq-in,.js-fq #faq .sec-title.fq-in{animation:fqSlide .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms)}
.js-fq #faq .faq-item.fq-in{animation:fqSlideR .85s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*110ms + 150ms)}
.js-fq #faq .faq-cta.fq-in{animation:fqPop .95s .45s cubic-bezier(.22,1,.36,1) backwards}
@keyframes fqSlide{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@keyframes fqSlideR{from{opacity:0;transform:translateX(calc(var(--sa-dx,-70px)*-1))}to{opacity:1}}
@keyframes fqPop{from{opacity:0;transform:translateY(50px) scale(.95)}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .js-fq #faq .fq-rv{opacity:1!important;transform:none!important}
  .js-fq #faq .fq-in,#faq .faq-item.open .faq-a,#faq .faq-cta>div:nth-child(1){animation:none!important}
}
@media(max-width:1024px){
  #faq .si{grid-template-columns:1fr;row-gap:0}
  #faq .si>.sec-tag,#faq .si>.sec-title,#faq .faq-grid>div:first-child,#faq .faq-cta{grid-column:1}
  #faq .si>.sec-tag{grid-row:1}#faq .si>.sec-title{grid-row:2}
  #faq .faq-grid>div:first-child{grid-row:3;margin-top:28px}
  #faq .faq-cta{grid-row:4;margin-top:20px}
}
@media(max-width:640px){
  #faq{padding:52px 20px!important}
  #faq .faq-a{padding:0 18px 18px 18px!important}
  #faq .faq-q{padding:16px 16px!important}
}

/* ============================================================
   INTEGRATIONS (.int-section) — light showcase
   eyebrow + serif title (left) · three white group cards with
   number + uppercase label · pill chips · scroll reveal · pill pop
   ============================================================ */
.int-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#f3ebfa,#faf7fd)!important;border-bottom:0!important;padding:84px 32px!important}
.int-section::before{content:'';position:absolute;right:-10%;top:-10%;width:600px;height:500px;background:radial-gradient(ellipse,rgba(144,71,200,.13),transparent 65%);pointer-events:none}
.int-section .si{position:relative;z-index:1}

/* heading (the old label becomes the title) */
.int-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:14px;color:var(--p600);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3em}
.int-eyebrow::before{content:'';width:34px;height:1px;background:var(--p600);flex-shrink:0}
.int-label{text-align:left!important;margin:0 0 36px!important;max-width:760px;font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;
  font-size:clamp(22px,2.3vw,34px)!important;line-height:1.2!important;letter-spacing:-.02em!important;color:var(--txt)!important;text-transform:none!important}
.int-label .acc{color:var(--p600)}
.rtl .int-label{text-align:right!important;font-family:var(--ar)!important;font-weight:800!important;line-height:1.35!important;letter-spacing:0!important}

/* group cards */
.int-groups{gap:18px!important;border:0!important;border-radius:0!important;overflow:visible!important}
.int-group{position:relative;background:#fff;border:1px solid var(--border)!important;border-radius:24px;padding:26px 26px 28px!important;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease}
.int-group:last-child{border-right:1px solid var(--border)!important}
.int-group::before{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--p500),transparent);opacity:.8}
.int-group:hover{transform:translateY(-6px);border-color:var(--p300)!important}
.int-group-label{display:flex;align-items:center;gap:10px;color:var(--p600)!important;font-size:12px!important;letter-spacing:.14em!important;margin-bottom:18px!important}
.int-group-label::before{content:'';width:22px;height:22px;border-radius:50%;background:var(--p50);border:1px solid var(--p100);flex-shrink:0}
.int-group:nth-child(1) .int-group-label::before{content:'1'}
.int-group:nth-child(2) .int-group-label::before{content:'2'}
.int-group:nth-child(3) .int-group-label::before{content:'3'}
.int-group-label::before{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;letter-spacing:0;color:var(--p700)}

/* pills */
.int-pill{background:var(--off)!important;border:1px solid var(--border)!important;color:var(--mid)!important;padding:7px 15px!important;font-weight:600!important;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background-color .25s,border-color .25s,color .25s!important}
.int-pill:hover{transform:translateY(-3px) scale(1.05);background:var(--p50)!important;border-color:var(--p400)!important;color:var(--p700)!important}
.int-pill-dot{width:9px!important;height:9px!important}
.int-pill:hover .int-pill-dot{animation:intDot .9s ease-in-out infinite}
@keyframes intDot{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.int-cta{text-align:left!important;margin-top:26px!important}
.rtl .int-cta{text-align:right!important}
.int-cta a{color:var(--p600)!important;font-weight:700;text-decoration:underline;text-underline-offset:4px;transition:color .25s}
.int-cta a:hover{color:var(--p700)!important}

/* scroll reveal (hidden only until .it-in is added) */
.js-it .int-section .it-rv:not(.it-in){opacity:0}
.js-it .int-section .int-eyebrow.it-rv:not(.it-in),.js-it .int-section .int-label.it-rv:not(.it-in){transform:translateX(var(--sa-dx,-70px))}
.js-it .int-section .int-group.it-rv:not(.it-in){transform:translateY(60px) scale(.95)}
.js-it .int-section .int-cta.it-rv:not(.it-in){transform:translateY(20px)}
.js-it .int-section .int-eyebrow.it-in,.js-it .int-section .int-label.it-in{animation:itSlide .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms)}
.js-it .int-section .int-group.it-in{animation:itPop .95s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*150ms + 200ms)}
.js-it .int-section .int-cta.it-in{animation:itUp .8s .8s cubic-bezier(.22,1,.36,1) backwards}
/* pills pop one after another inside each card */
.js-it .int-section .int-group.it-in .int-pill{animation:itPill .55s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--i,0)*150ms + var(--pi,0)*70ms + .55s)}
@keyframes itSlide{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@keyframes itPop{from{opacity:0;transform:translateY(60px) scale(.95)}to{opacity:1}}
@keyframes itUp{from{opacity:0;transform:translateY(20px)}to{opacity:1}}
@keyframes itPill{from{opacity:0;transform:scale(.5) translateY(10px)}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .js-it .int-section .it-rv{opacity:1!important;transform:none!important}
  .js-it .int-section .it-in,.js-it .int-section .it-in *{animation:none!important}
}
@media(max-width:1024px){.int-groups{grid-template-columns:1fr!important}.int-group{border-bottom:1px solid var(--border)!important}}
@media(max-width:768px){.int-section{padding:52px 20px!important}.int-group{padding:22px 20px 24px!important}}

/* ============================================================
   CTA BANNER + FOOTER (shared by every page)
   CTA: wide rounded purple panel · title left / buttons right · pulsing rings
   Footer: deep dark · accent headings · links slide on hover · round socials
   ============================================================ */
/* ---------- CTA ---------- */
.cta-section{
  max-width:1280px;margin:8px auto 36px!important;border-radius:32px!important;padding:64px 56px!important;text-align:left!important;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 55% 120% at 100% 0%,rgba(200,150,255,.38),transparent 65%),
    radial-gradient(ellipse 40% 90% at 0% 100%,rgba(90,38,136,.6),transparent 70%),
    linear-gradient(135deg,#5a2688,#2a1248)!important}
.cta-section::before{background:none!important}
/* faint grid texture */
.cta-section::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;-webkit-mask-image:radial-gradient(ellipse 70% 100% at 80% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 100% at 80% 40%,#000,transparent 75%)}
/* pulsing rings */
.cta-in{max-width:none!important;display:grid;grid-template-columns:1.35fr 1fr;column-gap:48px;align-items:center;position:relative;z-index:2;text-align:left}
.rtl .cta-in{text-align:right}
.cta-in::before,.cta-in::after{content:'';position:absolute;right:-40px;top:50%;border-radius:50%;border:1px solid rgba(255,255,255,.16);pointer-events:none;z-index:-1;
  transform:translateY(-50%)}
.rtl .cta-in::before,.rtl .cta-in::after{right:auto;left:-40px}
.cta-in::before{width:340px;height:340px;animation:ctRing 5s ease-in-out infinite}
.cta-in::after{width:520px;height:520px;animation:ctRing 5s ease-in-out 1.2s infinite}
@keyframes ctRing{0%,100%{transform:translateY(-50%) scale(.94);opacity:.5}50%{transform:translateY(-50%) scale(1.06);opacity:1}}

.cta-title{grid-column:1;grid-row:1;font-family:'Playfair Display',Georgia,serif;font-weight:700!important;font-size:clamp(28px,3.4vw,46px)!important;line-height:1.08!important;letter-spacing:-.03em!important;
  color:#ead6f8!important;margin-bottom:14px!important}
.cta-title::first-line{color:#fff}
.rtl .cta-title{font-family:var(--ar);font-weight:800!important;line-height:1.3!important;letter-spacing:0!important}
.cta-sub{grid-column:1;grid-row:2;color:rgba(255,255,255,.78)!important;font-size:16px!important;margin:0!important;line-height:1.7!important}
.cta-btns{grid-column:2;grid-row:1 / span 2;justify-content:flex-end!important;flex-direction:row;gap:12px!important}
.rtl .cta-btns{justify-content:flex-start!important}
.btn-cta-w,.btn-cta-o{padding:14px 30px!important;font-size:15px!important}
.btn-cta-w{animation:ctPulse 2.8s ease-in-out infinite}
@keyframes ctPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.btn-cta-w:hover{animation:none}

/* reveal (class added by imdady-theme.js; hidden only until .ct-in) */
.js-ct .cta-section .ct-rv:not(.ct-in){opacity:0}
.js-ct .cta-section .cta-title.ct-rv:not(.ct-in),.js-ct .cta-section .cta-sub.ct-rv:not(.ct-in){transform:translateX(var(--sa-dx,-70px))}
.js-ct .cta-section .cta-btns.ct-rv:not(.ct-in){transform:translateX(calc(var(--sa-dx,-70px)*-1)) scale(.92)}
.js-ct .cta-section .cta-title.ct-in,.js-ct .cta-section .cta-sub.ct-in{animation:ctSlide .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*120ms)}
.js-ct .cta-section .cta-btns.ct-in{animation:ctSlideR .9s .3s cubic-bezier(.22,1,.36,1) backwards}
@keyframes ctSlide{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@keyframes ctSlideR{from{opacity:0;transform:translateX(calc(var(--sa-dx,-70px)*-1)) scale(.92)}to{opacity:1}}

/* ---------- FOOTER ---------- */
footer{background:linear-gradient(180deg,#07030d,#07030d)!important;border-top:1px solid rgba(255,255,255,.07)!important;padding:72px 32px 28px!important;position:relative;overflow:hidden;color:rgba(255,255,255,.62)!important}
footer::before{content:'';position:absolute;left:50%;top:-1px;width:420px;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--p500),transparent)}
footer::after{content:'';position:absolute;right:-10%;bottom:-30%;width:620px;height:460px;background:radial-gradient(ellipse,rgba(117,51,175,.2),transparent 65%);pointer-events:none}
.foot-in{position:relative;z-index:1}
.foot-grid{gap:40px!important;padding-bottom:44px!important;border-bottom:1px solid rgba(255,255,255,.09)!important}
.foot-brand p{color:rgba(255,255,255,.62)!important;font-size:14px!important;line-height:1.75!important;max-width:340px}
.foot-contacts{gap:10px!important}
.foot-contacts a{color:rgba(255,255,255,.7)!important;font-size:13.5px!important;transition:color .25s,transform .3s cubic-bezier(.22,1,.36,1)!important}
.foot-contacts a:hover{color:#fff!important;transform:translateX(5px)}
.rtl .foot-contacts a:hover{transform:translateX(-5px)}

.foot-col h5{display:flex;align-items:center;gap:10px;color:#fff!important;font-size:13px!important;font-weight:700!important;letter-spacing:.02em!important;margin-bottom:18px!important}
.foot-col h5::before{content:'';width:18px;height:2px;border-radius:2px;background:var(--p400)}
.foot-col ul{gap:11px!important}
.foot-col ul li a{position:relative;display:inline-block;color:rgba(255,255,255,.62)!important;font-size:14px!important;transition:color .25s,transform .3s cubic-bezier(.22,1,.36,1)!important}
.foot-col ul li a::after{content:'';position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:var(--p400);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.rtl .foot-col ul li a::after{transform-origin:right}
.foot-col ul li a:hover{color:#fff!important;transform:translateX(5px)}
.rtl .foot-col ul li a:hover{transform:translateX(-5px)}
.foot-col ul li a:hover::after{transform:scaleX(1)}
.foot-col .hl a{color:var(--p300)!important}
.foot-col .hl a:hover{color:#fff!important}

.foot-bottom{padding-top:24px!important}
.foot-copy{color:rgba(255,255,255,.5)!important;font-size:13px!important}
.socials{gap:10px!important}
.soc{width:40px!important;height:40px!important;border-radius:50%!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important;
  transition:background-color .3s,border-color .3s,transform .4s cubic-bezier(.34,1.56,.64,1)!important}
.soc:hover{background:var(--p600)!important;border-color:var(--p600)!important;transform:translateY(-5px) rotate(-8deg) scale(1.08)}
.wa-fab{transition:transform .4s cubic-bezier(.34,1.56,.64,1)!important}
@media(prefers-reduced-motion:no-preference){.wa-fab{animation:ftWa 3s ease-in-out infinite}}
@keyframes ftWa{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* footer reveal */
.js-ct footer .ct-rv:not(.ct-in){opacity:0;transform:translateY(34px)}
.js-ct footer .ct-rv.ct-in{animation:ctUp .8s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*110ms)}
@keyframes ctUp{from{opacity:0;transform:translateY(34px)}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .js-ct .ct-rv{opacity:1!important;transform:none!important}
  .js-ct .ct-in,.cta-in::before,.cta-in::after,.btn-cta-w,.wa-fab{animation:none!important}
}
@media(max-width:900px){
  .cta-section{margin:6px 12px 24px!important;padding:44px 26px!important;border-radius:26px!important}
  .cta-in{grid-template-columns:1fr!important;row-gap:22px}
  .cta-title,.cta-sub,.cta-btns{grid-column:1!important;grid-row:auto!important}
  .cta-btns{justify-content:flex-start!important}
  .rtl .cta-btns{justify-content:flex-start!important}
  footer{padding:52px 20px 24px!important}
}

/* ============================================================
   NO GLOW / SHADOW-LIKE BLOBS ON DARK SECTIONS
   (blurred purple radial glows, orbs, halos) — flat dark instead
   ============================================================ */
/* Key Features orbs */
#all-features::before,#all-features::after{display:none!important;animation:none!important}
/* Trust + stats */
.stats-bar::before{display:none!important}
/* Testimonials halo (the faded quote mark stays) */
.testi-section::after{display:none!important}
/* How-it-works, Help, FAQ background glows */
.hiw-section::before,#help-guides::before,#faq::before{background:none!important;display:none!important}
/* Footer glow */
footer::after{display:none!important}
/* Hero: photo + dark fade only (no purple radial glows) */
.hero,.page-hero{
  background:
    linear-gradient(90deg,rgba(10,4,20,.96) 0%,rgba(10,4,20,.84) 38%,rgba(26,11,46,.55) 70%,rgba(42,18,72,.45) 100%),
    linear-gradient(180deg,rgba(7,3,13,.55) 0%,rgba(7,3,13,0) 30%,rgba(7,3,13,.85) 100%),
    url('images/hero-restaurant.jpg') center/cover no-repeat,
    #07030d!important}
.rtl .hero,.rtl .page-hero{
  background:
    linear-gradient(270deg,rgba(10,4,20,.96) 0%,rgba(10,4,20,.84) 38%,rgba(26,11,46,.55) 70%,rgba(42,18,72,.45) 100%),
    linear-gradient(180deg,rgba(7,3,13,.55) 0%,rgba(7,3,13,0) 30%,rgba(7,3,13,.85) 100%),
    url('images/hero-restaurant.jpg') center/cover no-repeat,
    #07030d!important}
/* small glows: eyebrow dots, ring pulses behind badges */
.hero-badge::before,.page-hero-tag::before,.trust-eyebrow::before,.rtype-eyebrow::before{box-shadow:none!important;filter:none!important}
.hiw-num-inner::before{display:none!important}
.testi-avatar::after{display:none!important}
.testi-avatar{outline:0!important}

/* ============================================================
   CONTACT PAGE (contact.php / ar/contact.php)
   hero + breadcrumb · light contact section (info left, form right) ·
   dark regions section · scroll reveal · field focus effects
   ============================================================ */

/* ---------- breadcrumb ---------- */
.breadcrumb-bar{background:#fff!important;border-bottom:1px solid var(--border)!important;padding:12px 32px!important}
.breadcrumb-inner a{color:var(--p600)!important;font-weight:600}
.breadcrumb-inner a:hover{color:var(--p700)!important}
.breadcrumb-inner{font-size:13px!important}

/* ---------- main contact section (light) ---------- */
#contact-main{position:relative;overflow:hidden;background:linear-gradient(180deg,#faf7fd,#f3ebfa)!important;padding:80px 32px!important}
#contact-main .si{position:relative;z-index:1}
#contact-main .contact-grid-wrap{grid-template-columns:minmax(300px,.85fr) 1.4fr!important;gap:56px!important;align-items:start}

/* left column heading */
#contact-main .sec-tag{display:inline-flex!important;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin:0 0 14px!important;
  color:var(--p600)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
#contact-main .sec-tag::before{content:'';width:34px;height:1px;background:var(--p600)}
#contact-main .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:var(--txt)!important}
#contact-main .sec-title .acc{color:var(--p600)}
.rtl #contact-main .sec-title{font-family:var(--ar)!important;font-weight:800!important}
#contact-main .contact-grid-wrap>div:first-child>p{color:#6b6179!important;margin-bottom:26px!important}

/* contact cards */
.contact-card{background:#fff!important;border:1px solid var(--border)!important;border-radius:20px!important;padding:16px 20px!important;gap:16px!important;
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s ease!important}
.contact-card:hover{transform:translateX(8px);border-color:var(--p300)!important}
.rtl .contact-card:hover{transform:translateX(-8px)}
.contact-ico{width:48px!important;height:48px!important;border-radius:14px!important;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.contact-card:hover .contact-ico{transform:rotate(-8deg) scale(1.1)}
.contact-label{color:var(--p600)!important;letter-spacing:.16em!important;margin-bottom:4px!important}

/* self-service help card: flat dark, no glow */
#contact-main .contact-grid-wrap>div:first-child>div>div[style*="linear-gradient"]{background:#07030d!important;border:1px solid rgba(255,255,255,.08);border-radius:22px!important;padding:22px!important}
#contact-main a[href*="help.imdady"]{border:1px solid rgba(255,255,255,.12);border-radius:14px!important;
  transition:background-color .3s,border-color .3s,transform .35s cubic-bezier(.22,1,.36,1)!important}
#contact-main a[href*="help.imdady"]:hover{background:rgba(144,71,200,.25)!important;border-color:var(--p400);transform:translateX(6px)}
.rtl #contact-main a[href*="help.imdady"]:hover{transform:translateX(-6px)}

/* form card */
#contact-main .form-card{background:#fff!important;border:1px solid var(--border)!important;border-radius:28px!important;padding:40px 44px!important;position:relative;overflow:hidden}
#contact-main .form-card::before{content:'';position:absolute;top:0;left:20%;right:20%;height:3px;background:linear-gradient(90deg,transparent,var(--p500),transparent)}
#contact-main .form-card .sec-tag{margin-bottom:12px!important}
#contact-main .form-card h3{font-family:'Playfair Display',Georgia,serif;font-size:clamp(22px,2.3vw,30px)!important;font-weight:700!important;letter-spacing:-.02em;color:var(--txt)!important}
.rtl #contact-main .form-card h3{font-family:var(--ar);font-weight:800!important;letter-spacing:0}
#contact-main .form-label{color:var(--mid)!important;font-weight:600!important;font-size:13.5px!important;transition:color .25s}
#contact-main .form-group:focus-within .form-label{color:var(--p600)!important}
#contact-main .form-input{background:#faf8fd!important;border:1px solid var(--border)!important;border-radius:14px!important;padding:13px 16px!important;
  transition:border-color .25s,background-color .25s,transform .3s cubic-bezier(.22,1,.36,1)!important}
#contact-main .form-input:hover{border-color:var(--p300)!important}
#contact-main .form-input:focus{background:#fff!important;border-color:var(--p600)!important;outline:2px solid rgba(117,51,175,.25)!important;outline-offset:0;transform:translateY(-2px)}
#contact-main .btn-submit{border-radius:999px!important;padding:15px 28px!important;font-size:15px!important;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--p600)!important;border:1.5px solid var(--p600)!important;color:#fff!important}
#contact-main .btn-submit:hover{background:transparent!important;color:var(--p600)!important;transform:translateY(-2px)!important}

/* ---------- regions (dark, flat) ---------- */
#regions{background:#07030d!important;padding:72px 32px!important;position:relative;overflow:hidden}
#regions .sec-tag{display:inline-flex!important;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin:0 0 14px!important;
  color:var(--p400)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
#regions .sec-tag::before{content:'';width:34px;height:1px;background:var(--p400)}
#regions .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:#fff!important;text-align:left!important}
#regions .sec-title .acc{color:var(--p400)}
#regions .sec-sub{color:rgba(255,255,255,.62)!important;text-align:left!important;margin:0!important}
.rtl #regions .sec-title,.rtl #regions .sec-sub{text-align:right!important}
.rtl #regions .sec-title{font-family:var(--ar)!important;font-weight:800!important}
#regions .sec-tag{margin:0 0 14px!important}
#regions .country-cards-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important;gap:16px!important;margin-top:34px!important}
#regions .country-card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:24px!important;
  padding:28px 24px!important;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,background .35s ease!important}
#regions .country-card::before{content:'';position:absolute;top:0;left:22%;right:22%;height:2px;background:linear-gradient(90deg,transparent,var(--p400),transparent);opacity:.8}
#regions .country-card:hover{transform:translateY(-8px)!important;border-color:rgba(170,109,216,.55)!important;background:linear-gradient(180deg,rgba(144,71,200,.16),rgba(255,255,255,.03))!important}
#regions .country-flag{font-size:38px!important;display:inline-block;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
#regions .country-card:hover .country-flag{transform:scale(1.2) rotate(-8deg)}
#regions .country-name{color:#fff!important;font-size:17px!important}
#regions .country-phone a{color:var(--p300)!important}
#regions .country-card div[style*="color:var(--mute)"]{color:rgba(255,255,255,.6)!important}

/* ---------- scroll reveal (hidden only until .cn-in is added) ---------- */
.js-cn .cn-rv:not(.cn-in){opacity:0}
.js-cn #contact-main .contact-grid-wrap>div:first-child .cn-rv:not(.cn-in){transform:translateX(var(--sa-dx,-70px))}
.js-cn #contact-main .form-card.cn-rv:not(.cn-in){transform:translateY(60px) scale(.96)}
.js-cn #regions .cn-rv:not(.cn-in){transform:translateY(40px)}
.js-cn #regions .sec-tag.cn-rv:not(.cn-in),.js-cn #regions .sec-title.cn-rv:not(.cn-in),.js-cn #regions .sec-sub.cn-rv:not(.cn-in){transform:translateX(var(--sa-dx,-70px))}
.js-cn #contact-main .contact-grid-wrap>div:first-child .cn-in{animation:cnSlide .85s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*90ms)}
.js-cn #contact-main .form-card.cn-in{animation:cnPop 1s .2s cubic-bezier(.22,1,.36,1) backwards}
.js-cn #regions .cn-in{animation:cnUp .85s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms)}
.js-cn #regions .sec-tag.cn-in,.js-cn #regions .sec-title.cn-in,.js-cn #regions .sec-sub.cn-in{animation-name:cnSlide}
/* form fields rise one by one after the card lands */
.js-cn #contact-main .form-card.cn-in .form-group,.js-cn #contact-main .form-card.cn-in .btn-submit,.js-cn #contact-main .form-card.cn-in .form-grid-2{animation:cnUp .6s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--f,0)*80ms + .55s)}
@keyframes cnSlide{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@keyframes cnPop{from{opacity:0;transform:translateY(60px) scale(.96)}to{opacity:1}}
@keyframes cnUp{from{opacity:0;transform:translateY(24px)}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .js-cn .cn-rv{opacity:1!important;transform:none!important}
  .js-cn .cn-in,.js-cn .cn-in *{animation:none!important}
}
@media(max-width:900px){
  #contact-main{padding:52px 20px!important}
  #contact-main .contact-grid-wrap{grid-template-columns:1fr!important;gap:36px!important}
  #contact-main .form-card{padding:28px 22px!important}
  #regions{padding:52px 20px!important}
  .breadcrumb-bar{padding:10px 20px!important}
}

/* ============================================================
   DARK SECTIONS — giant faded watermark background (flat, no glow)
   same idea as the "1000+" one: a huge word/number in ~3% white,
   cropped by the section edge, drifting very slowly
   ============================================================ */
#all-features::after,.hiw-section::before,#help-guides::before,#regions::after,footer::after{
  display:block!important;position:absolute;pointer-events:none;z-index:0;
  background:none!important;border:0!important;border-radius:0!important;filter:none!important;
  width:auto!important;height:auto!important;
  font-family:var(--en);font-weight:800;line-height:.8;letter-spacing:-.06em;white-space:nowrap;
  color:rgba(255,255,255,.03)!important;opacity:1!important;
  font-size:clamp(150px,19vw,300px)}
.rtl #all-features::after,.rtl .hiw-section::before,.rtl #help-guides::before,.rtl #regions::after,.rtl footer::after{font-family:var(--ar)}

#all-features::after{content:'FEATURES';left:-1%;right:auto;bottom:-6%;top:auto;font-size:clamp(120px,17vw,270px)}
.hiw-section::before{content:'3 STEPS';inset:auto -1% -8% auto!important;font-size:clamp(130px,17vw,280px)}
.rtl .hiw-section::before{inset:auto auto -8% -1%!important}
#help-guides::before{content:'HELP';left:-1%;right:auto;bottom:-14%;top:auto}
.rtl #help-guides::before{left:auto;right:-1%}
#regions::after{content:'KSA';right:-1%;left:auto;bottom:-16%;top:auto}
.rtl #regions::after{right:auto;left:-1%}
footer::after{content:'IMDADY';left:50%!important;right:auto;bottom:-10%;top:auto;transform:translateX(-50%);font-size:clamp(120px,22vw,360px);color:rgba(255,255,255,.022)!important}

/* keep real content above the watermark */
#all-features .si,.hiw-inner,.help-inner,#regions .si,.foot-in{position:relative;z-index:1}
#regions,#help-guides,.hiw-section,#all-features,footer{overflow:hidden}

/* slow drift (not on the centred footer word) */
@media(prefers-reduced-motion:no-preference){
  #all-features::after,.hiw-section::before,#help-guides::before,#regions::after{animation:wmDrift 36s ease-in-out infinite alternate}
}
@keyframes wmDrift{from{translate:-24px 0}to{translate:24px 0}}
@media(max-width:768px){
  #all-features::after,.hiw-section::before,#help-guides::before,#regions::after{font-size:clamp(90px,26vw,160px)}
  footer::after{font-size:clamp(90px,28vw,170px)}
}

/* ============================================================
   Inner pages: no breadcrumb strip — hero sits directly under the header
   ============================================================ */
.breadcrumb-bar{display:none!important}
.nav-wrap{border-bottom:0!important}
.nav-wrap+.mob-nav+.page-hero,.nav-wrap+.page-hero{margin-top:0}
.page-hero{margin-top:0!important}

/* ============================================================
   CONTACT PAGE HERO — its own background photo (images/hero-contact.jpg)
   ============================================================ */
.page-hero.hero-contact{
  background:
    linear-gradient(90deg,rgba(10,4,20,.94) 0%,rgba(10,4,20,.80) 40%,rgba(26,11,46,.55) 72%,rgba(42,18,72,.40) 100%),
    linear-gradient(180deg,rgba(7,3,13,.45) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.8) 100%),
    url('images/hero-contact.jpg') center/cover no-repeat,
    #07030d!important}
.rtl .page-hero.hero-contact{
  background:
    linear-gradient(270deg,rgba(10,4,20,.94) 0%,rgba(10,4,20,.80) 40%,rgba(26,11,46,.55) 72%,rgba(42,18,72,.40) 100%),
    linear-gradient(180deg,rgba(7,3,13,.45) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.8) 100%),
    url('images/hero-contact.jpg') center/cover no-repeat,
    #07030d!important}

/* contact hero has no tag now: heading is the 1st child, text the 2nd */
.hero-contact .page-hero-inner>*:nth-child(1){animation-name:hrTitle!important;animation-delay:.2s!important;animation-duration:1.1s!important}
.hero-contact .page-hero-inner>*:nth-child(2){animation-name:hrUp!important;animation-delay:.5s!important;animation-duration:.9s!important}

/* contact hero: telephone photo — keep the phone visible on the side opposite the text, softer fade */
.page-hero.hero-contact{
  background:
    linear-gradient(90deg,rgba(10,4,20,.90) 0%,rgba(10,4,20,.55) 42%,rgba(26,11,46,.18) 75%,rgba(42,18,72,.10) 100%),
    linear-gradient(180deg,rgba(7,3,13,.35) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.55) 100%),
    url('images/hero-contact.jpg') right center/cover no-repeat,
    #07030d!important}
.rtl .page-hero.hero-contact{
  background:
    linear-gradient(270deg,rgba(10,4,20,.90) 0%,rgba(10,4,20,.55) 42%,rgba(26,11,46,.18) 75%,rgba(42,18,72,.10) 100%),
    linear-gradient(180deg,rgba(7,3,13,.35) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.55) 100%),
    url('images/hero-contact.jpg') left center/cover no-repeat,
    #07030d!important}
@media(max-width:768px){
  .page-hero.hero-contact,.rtl .page-hero.hero-contact{background-position:65% center!important}
}

/* contact hero: cafe POS photo — person sits on the right, so fade is strong on the text side */
.page-hero.hero-contact{
  background:
    linear-gradient(90deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.86) 38%,rgba(26,11,46,.55) 66%,rgba(42,18,72,.42) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%),
    url('images/hero-contact.jpg') right center/cover no-repeat,
    #07030d!important}
.rtl .page-hero.hero-contact{
  background:
    linear-gradient(270deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.86) 38%,rgba(26,11,46,.55) 66%,rgba(42,18,72,.42) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%),
    url('images/hero-contact.jpg') left center/cover no-repeat,
    #07030d!important}

/* ============================================================
   REFERRAL PAGE (referral.php / ar/referral.php)
   hero photo · purple reward panel · light steps cards · dark "why refer"
   cards (same system as Key Features) · light form · scroll reveal
   ============================================================ */

/* ---------- hero: handshake photo ---------- */
.page-hero.hero-referral{
  background:
    linear-gradient(90deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.86) 38%,rgba(26,11,46,.60) 68%,rgba(42,18,72,.48) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%),
    url('images/hero-referral.jpg') center/cover no-repeat,
    #07030d!important}
.rtl .page-hero.hero-referral{
  background:
    linear-gradient(270deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.86) 38%,rgba(26,11,46,.60) 68%,rgba(42,18,72,.48) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%),
    url('images/hero-referral.jpg') center/cover no-repeat,
    #07030d!important}

/* ---------- reward band: floating purple panel ---------- */
.reward-band{background:linear-gradient(180deg,#faf7fd,#f3ebfa)!important;padding:56px 32px 20px!important}
.reward-band-inner{
  max-width:1280px!important;display:grid;grid-template-columns:1fr 1.1fr!important;gap:56px!important;align-items:center;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#5a2688,#2a1248);border-radius:32px;padding:52px 56px!important}
.reward-band-inner::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;-webkit-mask-image:radial-gradient(ellipse 70% 100% at 85% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 100% at 85% 30%,#000,transparent 75%)}
.reward-band-inner>*{position:relative;z-index:1}
.reward-band-inner>div:first-child>div:first-child{display:flex;align-items:center;gap:14px;letter-spacing:.3em!important;color:#ead6f8!important}
.reward-band-inner>div:first-child>div:first-child::before{content:'';width:34px;height:1px;background:#ead6f8}
.reward-big{font-family:'Playfair Display',Georgia,serif;font-size:clamp(56px,7vw,92px)!important;font-weight:700!important;letter-spacing:-.04em!important;line-height:1!important}
.rtl .reward-big{font-family:var(--ar);font-weight:800!important;letter-spacing:0!important}
.reward-big span{font-size:clamp(22px,2.4vw,34px)!important;color:#ead6f8;letter-spacing:-.01em!important}
.reward-desc{font-size:17px!important;font-weight:500!important;color:rgba(255,255,255,.8)!important;line-height:1.6!important;max-width:460px}
.reward-band-inner>div:first-child>a{background:#fff!important;color:var(--p700)!important;border:1.5px solid #fff!important;border-radius:999px!important;padding:12px 26px!important;font-size:14.5px!important;
  transition:background-color .25s,color .25s,transform .25s!important}
.reward-band-inner>div:first-child>a:hover{background:transparent!important;color:#fff!important;transform:translateY(-2px)}
.reward-pills{display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important;margin-top:0!important}
.reward-pill{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:18px!important;padding:16px 18px!important;
  transition:transform .4s cubic-bezier(.22,1,.36,1),background-color .3s,border-color .3s}
.reward-pill:hover{transform:translateY(-5px);background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.4)!important}
.reward-pill-ico{width:38px!important;height:38px!important;border-radius:12px!important;background:rgba(255,255,255,.16)!important;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.reward-pill:hover .reward-pill-ico{transform:rotate(-8deg) scale(1.12)}

/* ---------- section headings (shared look) ---------- */
#ref-steps .center,#ref-why .center{text-align:left!important}
.rtl #ref-steps .center,.rtl #ref-why .center{text-align:right!important}
#ref-steps .sec-tag,#ref-why .sec-tag,#refer-form .sec-tag{display:inline-flex!important;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin:0 0 14px!important;
  font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
#ref-steps .sec-tag::before,#ref-why .sec-tag::before,#refer-form .sec-tag::before{content:'';width:34px;height:1px}
#ref-steps .sec-tag,#refer-form .sec-tag{color:var(--p600)!important}
#ref-steps .sec-tag::before,#refer-form .sec-tag::before{background:var(--p600)}
#ref-steps .sec-title,#ref-why .sec-title,#refer-form .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important}
.rtl #ref-steps .sec-title,.rtl #ref-why .sec-title,.rtl #refer-form .sec-title{font-family:var(--ar)!important;font-weight:800!important}
.acc{color:var(--p600)}
#ref-steps .sec-sub{margin:0 0 40px!important;text-align:left!important}
.rtl #ref-steps .sec-sub{text-align:right!important}

/* ---------- steps (light) ---------- */
#ref-steps{background:linear-gradient(180deg,#f3ebfa,#faf7fd)!important;padding:72px 32px!important;position:relative;overflow:hidden}
#ref-steps .steps{gap:18px!important;margin-top:0!important}
#ref-steps .step{background:#fff!important;border:1px solid var(--border)!important;border-radius:26px!important;padding:32px 30px 30px!important;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease!important}
#ref-steps .step::before{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--p500),transparent)}
#ref-steps .step:hover{transform:translateY(-8px)!important;border-color:var(--p300)!important}
#ref-steps .step-num{font-family:'Playfair Display',Georgia,serif;font-size:68px!important;font-weight:700;letter-spacing:-.04em;line-height:1;margin-bottom:14px!important;
  background:linear-gradient(180deg,var(--p500),var(--p200,#c49de8));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:transform .5s cubic-bezier(.34,1.56,.64,1);display:inline-block}
#ref-steps .step:hover .step-num{transform:scale(1.1) rotate(-4deg)}
#ref-steps .step-title{font-size:19px!important;font-weight:700!important;color:var(--txt)!important}
#ref-steps .step-desc{color:#6b6179!important;font-size:14.5px!important;line-height:1.7!important}
/* arrow between cards on desktop */
@media(min-width:901px){
  #ref-steps .step:not(:last-child)::after{content:'→';position:absolute;right:16px;top:30px;font-size:20px;font-weight:700;color:var(--p300);transition:transform .3s,color .3s}
  .rtl #ref-steps .step:not(:last-child)::after{content:'←';right:auto;left:16px}
  #ref-steps .step:hover::after{color:var(--p600);transform:translateX(4px)}
}

/* ---------- why refer (dark, same card system as Key Features) ---------- */
/* ============================================================
   KEY FEATURES (#ref-why) — dark showcase section
   coloured top accent · tinted icon chip · big faded watermark number
   · scroll-reveal + hover animations
   ============================================================ */
#ref-why{position:relative;overflow:hidden;background:#07030d;padding:110px 32px}
#ref-why::before,#ref-why::after{content:'';position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.55}
#ref-why::before{width:520px;height:520px;left:-140px;top:-120px;background:radial-gradient(circle,rgba(144,71,200,.55),transparent 70%);animation:fgOrbA 16s ease-in-out infinite alternate}
#ref-why::after{width:620px;height:620px;right:-180px;bottom:-200px;background:radial-gradient(circle,rgba(117,51,175,.5),transparent 70%);animation:fgOrbB 20s ease-in-out infinite alternate}
@keyframes fgOrbA{to{transform:translate(120px,80px) scale(1.15)}}
@keyframes fgOrbB{to{transform:translate(-140px,-60px) scale(1.1)}}
#ref-why .si{position:relative;z-index:1}

/* heading */
#ref-why .sec-tag{display:inline-flex;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;
  color:var(--p400)!important;font-size:12.5px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important;margin-bottom:18px!important}
#ref-why .sec-tag::before{content:'';width:34px;height:1px;background:var(--p400)}
#ref-why .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:#fff!important;
  font-size:clamp(34px,4.6vw,64px)!important;letter-spacing:-.03em!important;line-height:1.02!important;max-width:900px}
.rtl #ref-why .sec-title{font-family:var(--ar)!important;font-weight:800!important;line-height:1.25!important;letter-spacing:0!important}
#ref-why .sec-sub{color:rgba(255,255,255,.62)!important;max-width:640px}

/* grid + cards */
#ref-why .fg{gap:22px!important;margin-top:56px!important}
#ref-why .fc{
  --ac:#aa6dd8;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02))!important;
  border:1px solid rgba(255,255,255,.09)!important;border-radius:24px!important;
  padding:34px 28px 28px!important;min-height:270px;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,background .35s ease!important}
/* coloured top accent line */
#ref-why .fc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(1)!important;
  background:linear-gradient(90deg,transparent,var(--ac),transparent)!important;opacity:.9;transition:opacity .3s,height .3s}
/* big faded watermark number */
#ref-why .fc::after{content:'';position:absolute;right:-6px;bottom:-22px;font-size:112px;font-weight:800;line-height:1;letter-spacing:-.05em;
  color:var(--ac);opacity:.08;pointer-events:none;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s}
.rtl #ref-why .fc::after{right:auto;left:-6px}
#ref-why .fc:nth-child(1)::after{content:'01'}
#ref-why .fc:nth-child(2)::after{content:'02'}
#ref-why .fc:nth-child(3)::after{content:'03'}
#ref-why .fc:nth-child(4)::after{content:'04'}
#ref-why .fc:nth-child(5)::after{content:'05'}
#ref-why .fc:nth-child(6)::after{content:'06'}
#ref-why .fc:nth-child(7)::after{content:'07'}
#ref-why .fc:nth-child(8)::after{content:'08'}
#ref-why .fc:nth-child(9)::after{content:'09'}
/* per-card accent (all within the purple/violet family) */
#ref-why .fc:nth-child(9n+1){--ac:#aa6dd8}
#ref-why .fc:nth-child(9n+2){--ac:#c49de8}
#ref-why .fc:nth-child(9n+3){--ac:#9047c8}
#ref-why .fc:nth-child(9n+4){--ac:#aa6dd8}
#ref-why .fc:nth-child(9n+5){--ac:#9047c8}
#ref-why .fc:nth-child(9n+6){--ac:#c49de8}
#ref-why .fc:nth-child(9n+7){--ac:#9047c8}
#ref-why .fc:nth-child(9n+8){--ac:#c49de8}
#ref-why .fc:nth-child(9n+9){--ac:#aa6dd8}

#ref-why .fc-ico{width:54px;height:54px;border-radius:50%!important;margin:0 0 18px!important;
  background:color-mix(in srgb,var(--ac) 16%,transparent)!important;border:1px solid color-mix(in srgb,var(--ac) 35%,transparent)!important;
  transition:transform .5s cubic-bezier(.22,1,.36,1),background .3s}
#ref-why .fc-ico svg *{stroke:var(--ac)!important}
#ref-why .fc-title{color:#fff!important;font-size:19px!important;font-weight:700!important;letter-spacing:-.01em;margin-bottom:10px!important}
#ref-why .fc-desc{color:rgba(255,255,255,.62)!important;font-size:14.5px!important;line-height:1.65!important}
#ref-why .fc-link,#ref-why .fc a{color:var(--ac)!important;margin-top:auto;padding-top:16px;font-weight:700}

/* hover */
#ref-why .fc:hover{transform:translateY(-8px)!important;border-color:color-mix(in srgb,var(--ac) 55%,transparent)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 12%,transparent),rgba(255,255,255,.02))!important}
#ref-why .fc:hover::before{height:4px;opacity:1}
#ref-why .fc:hover::after{transform:translate(-10px,-8px) scale(1.08);opacity:.16}
.rtl #ref-why .fc:hover::after{transform:translate(10px,-8px) scale(1.08)}
#ref-why .fc:hover .fc-ico{transform:translateY(-3px) rotate(-8deg) scale(1.1);background:color-mix(in srgb,var(--ac) 28%,transparent)!important}

/* CTA button under the grid */
#ref-why .btn-main{background:var(--p600)!important;border-color:var(--p600)!important;color:#fff!important}
#ref-why .btn-main:hover{background:transparent!important;border-color:var(--p400)!important;color:var(--p300)!important}

/* scroll-reveal (only active when JS added .js-rv, so no-JS shows everything) */
.js-rv #ref-why .rv,.js-rv #ref-why .fc{opacity:0;transform:translateY(34px)}
.js-rv #ref-why .rv.in{animation:fgUp .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*90ms)}
.js-rv #ref-why .fc.in{animation:fgCard .85s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*90ms)}
@keyframes fgUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fgCard{from{opacity:0;transform:translateY(46px) scale(.96)}to{opacity:1;transform:none}}
/* accent line draws in once the card appears */
.js-rv #ref-why .fc.in::before{animation:fgLine 1s .25s cubic-bezier(.22,1,.36,1) both}
@keyframes fgLine{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}

@media(prefers-reduced-motion:reduce){
  #ref-why::before,#ref-why::after{animation:none}
  .js-rv #ref-why .rv,.js-rv #ref-why .fc{opacity:1;transform:none}
  .js-rv #ref-why .rv.in,.js-rv #ref-why .fc.in,.js-rv #ref-why .fc.in::before{animation:none}
}
@media(max-width:768px){
  #ref-why{padding:64px 20px}
  #ref-why .fc{min-height:0;padding:28px 22px 24px!important}
  #ref-why .fc::after{font-size:86px}
}


/* --- ref-why tweaks on top of the copied Key-Features system --- */
#ref-why{padding:80px 32px!important}
#ref-why::before{display:none!important}
#ref-why::after{display:block!important;content:'SHARE';position:absolute;pointer-events:none;z-index:0;left:auto;right:-1%;bottom:-6%;top:auto;width:auto!important;height:auto!important;
  background:none!important;border:0!important;border-radius:0!important;filter:none!important;
  font-family:var(--en);font-weight:800;line-height:.8;letter-spacing:-.06em;white-space:nowrap;color:rgba(255,255,255,.03)!important;opacity:1!important;
  font-size:clamp(120px,17vw,270px);animation:wmDrift 36s ease-in-out infinite alternate}
.rtl #ref-why::after{right:auto;left:-1%}
#ref-why .sec-tag{color:var(--p400)!important}
#ref-why .sec-tag::before{background:var(--p400)}
#ref-why .sec-title{color:#fff!important}
#ref-why .fg{gap:14px!important;margin-top:34px!important}
#ref-why .fc{padding:24px 22px 22px!important;min-height:0!important;border-radius:20px!important}
#ref-why .fc-ico{width:44px!important;height:44px!important;margin-bottom:12px!important}
#ref-why .fc-title{font-size:16.5px!important}
#ref-why .fc-desc{font-size:13.5px!important;line-height:1.6!important}
#ref-why .fc::after{font-size:76px!important;bottom:-12px!important}

/* ---------- form (light) ---------- */
#refer-form{position:relative;overflow:hidden;background:linear-gradient(180deg,#faf7fd,#f3ebfa)!important;padding:80px 32px!important}
#refer-form .si{max-width:900px!important;position:relative;z-index:1}
#refer-form .center{text-align:left!important}
.rtl #refer-form .center{text-align:right!important}
#refer-form .sec-sub{margin:0 0 30px!important;text-align:left!important;color:#6b6179!important}
.rtl #refer-form .sec-sub{text-align:right!important}
#refer-form .form-card{background:#fff!important;border:1px solid var(--border)!important;border-radius:28px!important;padding:40px 44px!important;position:relative;overflow:hidden}
#refer-form .form-card::before{content:'';position:absolute;top:0;left:20%;right:20%;height:3px;background:linear-gradient(90deg,transparent,var(--p500),transparent)}
/* the two group headings: numbered badges */
#refer-form .form-card h3{display:flex;align-items:center;gap:12px;font-family:'Playfair Display',Georgia,serif;font-size:20px!important;font-weight:700!important;letter-spacing:-.01em;color:var(--txt)!important;
  border-bottom:1px solid var(--border)!important}
.rtl #refer-form .form-card h3{font-family:var(--ar);font-weight:800!important;letter-spacing:0}
#refer-form .form-card h3::before{content:'1';display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--p600);color:#fff;font-family:var(--en);font-size:14px;font-weight:800;flex-shrink:0}
#refer-form .form-card h3+.form-grid-2~h3::before,#refer-form .form-card h3:nth-of-type(2)::before{content:'2'}
#refer-form .form-label{color:var(--mid)!important;font-weight:600!important;font-size:13.5px!important;transition:color .25s}
#refer-form .form-group:focus-within .form-label{color:var(--p600)!important}
#refer-form .form-input{background:#faf8fd!important;border:1px solid var(--border)!important;border-radius:14px!important;padding:13px 16px!important;
  transition:border-color .25s,background-color .25s,transform .3s cubic-bezier(.22,1,.36,1)!important}
#refer-form .form-input:hover{border-color:var(--p300)!important}
#refer-form .form-input:focus{background:#fff!important;border-color:var(--p600)!important;outline:2px solid rgba(117,51,175,.25)!important;outline-offset:0;transform:translateY(-2px)}
#refer-form .btn-submit{border-radius:999px!important;padding:15px 28px!important;font-size:15px!important;background:var(--p600)!important;border:1.5px solid var(--p600)!important;color:#fff!important}
#refer-form .btn-submit:hover{background:transparent!important;color:var(--p600)!important;transform:translateY(-2px)!important}

/* ---------- scroll reveal ---------- */
.js-rf .rf-rv:not(.rf-in){opacity:0}
.js-rf .reward-band-inner.rf-rv:not(.rf-in){transform:translateY(60px) scale(.96)}
.js-rf .reward-pill.rf-rv:not(.rf-in){transform:translateY(24px) scale(.9)}
.js-rf #ref-steps .sec-tag.rf-rv:not(.rf-in),.js-rf #ref-steps .sec-title.rf-rv:not(.rf-in),.js-rf #ref-steps .sec-sub.rf-rv:not(.rf-in),
.js-rf #refer-form .sec-tag.rf-rv:not(.rf-in),.js-rf #refer-form .sec-title.rf-rv:not(.rf-in),.js-rf #refer-form .sec-sub.rf-rv:not(.rf-in){transform:translateX(var(--sa-dx,-70px))}
.js-rf #ref-steps .step.rf-rv:not(.rf-in){transform:translateY(60px) scale(.95)}
.js-rf #refer-form .form-card.rf-rv:not(.rf-in){transform:translateY(60px) scale(.96)}
.js-rf .reward-band-inner.rf-in{animation:rfPop .95s cubic-bezier(.22,1,.36,1) backwards}
.js-rf .reward-pill.rf-in{animation:rfPill .6s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--i,0)*110ms + .45s)}
.js-rf #ref-steps .sec-tag.rf-in,.js-rf #ref-steps .sec-title.rf-in,.js-rf #ref-steps .sec-sub.rf-in,
.js-rf #refer-form .sec-tag.rf-in,.js-rf #refer-form .sec-title.rf-in,.js-rf #refer-form .sec-sub.rf-in{animation:rfSlide .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms)}
.js-rf #ref-steps .step.rf-in{animation:rfPop .95s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*150ms + .2s)}
.js-rf #refer-form .form-card.rf-in{animation:rfPop 1s .2s cubic-bezier(.22,1,.36,1) backwards}
.js-rf #refer-form .form-card.rf-in .form-group,.js-rf #refer-form .form-card.rf-in .form-grid-2,.js-rf #refer-form .form-card.rf-in h3,.js-rf #refer-form .form-card.rf-in .btn-submit{
  animation:rfUp .6s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--f,0)*70ms + .5s)}
@keyframes rfPop{from{opacity:0;transform:translateY(60px) scale(.96)}to{opacity:1}}
@keyframes rfPill{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1}}
@keyframes rfSlide{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@keyframes rfUp{from{opacity:0;transform:translateY(22px)}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .js-rf .rf-rv{opacity:1!important;transform:none!important}
  .js-rf .rf-in,.js-rf .rf-in *{animation:none!important}
  #ref-why::after{animation:none}
}
@media(max-width:900px){
  .reward-band{padding:40px 20px 10px!important}
  .reward-band-inner{grid-template-columns:1fr!important;padding:36px 26px!important;gap:30px!important;border-radius:26px}
  #ref-steps,#ref-why,#refer-form{padding:52px 20px!important}
  #refer-form .form-card{padding:28px 22px!important}
}
@media(max-width:520px){.reward-pills{grid-template-columns:1fr!important}}

/* ============================================================
   REFERRAL — reward band restyled like the home page's dark sections
   flat #07030d · glass cards with accent line · p400 accents · faded watermark
   (replaces the purple gradient panel)
   ============================================================ */
.reward-band{background:#07030d!important;padding:56px 32px 72px!important;position:relative;overflow:hidden}
.reward-band::before{content:'FREE';position:absolute;left:-1%;bottom:-14%;pointer-events:none;font-family:var(--en);font-weight:800;line-height:.8;letter-spacing:-.06em;
  font-size:clamp(150px,20vw,320px);color:rgba(255,255,255,.03);white-space:nowrap;animation:wmDrift 36s ease-in-out infinite alternate}
.rtl .reward-band::before{left:auto;right:-1%}
.reward-band-inner{background:none!important;border-radius:0!important;padding:0!important;gap:64px!important;overflow:visible!important}
.reward-band-inner::after{display:none!important}

/* eyebrow + title in the home style */
.reward-band-inner>div:first-child>div:first-child{color:var(--p400)!important}
.reward-band-inner>div:first-child>div:first-child::before{background:var(--p400)}
.reward-big span{color:var(--p400)!important}
.reward-desc{color:rgba(255,255,255,.62)!important}

/* primary button: purple fill -> outline on hover (same as the rest of the site) */
.reward-band-inner>div:first-child>a{background:var(--p600)!important;border:1.5px solid var(--p600)!important;color:#fff!important}
.reward-band-inner>div:first-child>a:hover{background:transparent!important;border-color:var(--p400)!important;color:var(--p300)!important}

/* benefit tiles = the home stat-card look */
.reward-pill{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:20px!important;
  position:relative;overflow:hidden;padding:18px 20px!important;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,background .35s ease!important}
.reward-pill::before{content:'';position:absolute;top:0;left:22%;right:22%;height:2px;background:linear-gradient(90deg,transparent,var(--p400),transparent);opacity:.7}
.reward-pill:hover{transform:translateY(-6px)!important;border-color:rgba(170,109,216,.55)!important;background:linear-gradient(180deg,rgba(144,71,200,.16),rgba(255,255,255,.03))!important}
.reward-pill-ico{background:rgba(144,71,200,.22)!important;border:1px solid rgba(170,109,216,.4);color:var(--p300)!important}
.reward-pill-text{font-weight:600!important}

@media(max-width:900px){.reward-band{padding:40px 20px 52px!important}}

/* ============================================================
   REFERRAL "Why refer" — force dark (inline style had set a light background)
   + heading size same as every other section on the home page
   ============================================================ */
#ref-why{background:#07030d!important}
#ref-why .sec-title,#ref-steps .sec-title,#refer-form .sec-title{
  font-size:clamp(22px,2.3vw,34px)!important;line-height:1.2!important;letter-spacing:-.02em!important}
.rtl #ref-why .sec-title,.rtl #ref-steps .sec-title,.rtl #refer-form .sec-title{line-height:1.35!important;letter-spacing:0!important}
#ref-why .sec-title{color:#fff!important}
#ref-why .sec-title .acc{color:var(--p400)!important}
/* the big "Free months" figure: same scale as the home stat numbers */
.reward-big{font-size:clamp(40px,4.6vw,60px)!important}
.reward-big span{font-size:clamp(20px,2vw,28px)!important}
@media(max-width:900px){#ref-why .sec-title,#ref-steps .sec-title,#refer-form .sec-title{font-size:clamp(22px,6vw,28px)!important}}

/* ============================================================
   PRICES PAGE (prices.php / ar/prices.php) — home-page theme
   dark hero + strip · light plans · dark comparison · light "all plans
   include" · dark FAQ · scroll reveal
   ============================================================ */

/* ---------- hero (pricing photo reuses the default restaurant photo) ---------- */
.page-hero.hero-prices{}

/* ---------- trust strip: dark, continues the hero ---------- */
.trust-strip{background:#07030d!important;border:0!important;border-top:1px solid rgba(255,255,255,.07)!important;padding:18px 32px!important}
.trust-strip-inner{gap:30px!important}
.trust-item{color:rgba(255,255,255,.78)!important;font-size:13px!important;font-weight:600!important;transition:color .25s,transform .3s cubic-bezier(.22,1,.36,1)}
.trust-item:hover{color:#fff!important;transform:translateY(-2px)}
.trust-item svg{color:var(--p400)!important}
.trust-sep{background:rgba(255,255,255,.14)!important}
.trust-item span[style*="f59e0b"]{color:#f5a623!important}

/* ---------- plans (light) ---------- */
#plans{position:relative;overflow:hidden;background:linear-gradient(180deg,#faf7fd,#f3ebfa)!important;padding:72px 32px!important}
#plans::before{content:'';position:absolute;left:-10%;top:-8%;width:600px;height:520px;background:radial-gradient(ellipse,rgba(144,71,200,.12),transparent 65%);pointer-events:none}
#plans .si{position:relative;z-index:1}
#plans .sec-tag{display:inline-flex!important;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin:0 0 6px!important;
  color:var(--p600)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
#plans .sec-tag::before{content:'';width:34px;height:1px;background:var(--p600)}
/* toggles */
#plans .pl-toggle{background:#fff!important;border:1px solid var(--border);padding:5px!important}
#plans .pl-toggle button{padding:9px 30px!important;font-weight:700!important;border-radius:999px!important;transition:background-color .3s,color .3s!important}
#plans .pl-billing{margin:14px 0 40px!important}
/* cards */
#plans .price-grid{max-width:1000px!important;gap:22px!important}
#plans .pc{background:#fff!important;border:1px solid var(--border)!important;border-radius:26px!important;padding:32px 34px 34px!important;position:relative;overflow:visible;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease!important}
#plans .pc:hover{transform:translateY(-8px)!important;border-color:var(--p300)!important}
#plans .pc-name{font-family:'Playfair Display',Georgia,serif;font-size:22px!important;font-weight:700!important;letter-spacing:-.02em;color:var(--txt)}
.rtl #plans .pc-name{font-family:var(--ar);font-weight:800!important;letter-spacing:0}
#plans .pc-amt{font-size:52px!important;color:var(--p700)!important}
#plans .pc-ul li{font-size:14px!important;color:var(--mid)!important;transition:transform .3s cubic-bezier(.22,1,.36,1)}
#plans .pc-ul li:hover{transform:translateX(6px)}
.rtl #plans .pc-ul li:hover{transform:translateX(-6px)}
#plans .pc-ul li .ck{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--p50);border:1px solid var(--p100);color:var(--p600)!important;font-size:11px}
#plans .pc-badge{background:#fff!important;color:var(--p700)!important;border:1px solid var(--p100);font-weight:700!important}
#plans .btn-pg{background:transparent!important;border:1.5px solid var(--p600)!important;color:var(--p600)!important}
#plans .btn-pg:hover{background:var(--p600)!important;color:#fff!important}
#plans .btn-pp{background:var(--p600)!important;border:1.5px solid var(--p600)!important;color:#fff!important}
#plans .btn-pp:hover{background:transparent!important;color:var(--p600)!important}
/* featured plan */
#plans .pc.hero-plan{background:linear-gradient(160deg,#3d1a6a,#1f0b3a 70%)!important;border:1px solid rgba(170,109,216,.5)!important;overflow:hidden}
#plans .pc.hero-plan:hover{border-color:var(--p400)!important}
#plans .pc.hero-plan .pc-name,#plans .pc.hero-plan .pc-amt,#plans .pc.hero-plan .pc-cur{color:#fff!important}
#plans .pc.hero-plan .pc-tagline,#plans .pc.hero-plan .pc-per,#plans .pc.hero-plan .pc-note{color:rgba(255,255,255,.7)!important}
#plans .pc.hero-plan .pc-div{background:rgba(255,255,255,.14)!important}
#plans .pc.hero-plan .pc-ul li{color:rgba(255,255,255,.88)!important}
#plans .pc.hero-plan .pc-ul li .ck{background:rgba(170,109,216,.25);border-color:rgba(170,109,216,.5);color:#fff!important}
#plans .pc.hero-plan .pc-badge{top:18px!important;left:auto!important;right:22px;transform:none!important;background:var(--p600)!important;color:#fff!important;border:0}
.rtl #plans .pc.hero-plan .pc-badge{right:auto;left:22px}
#plans .pc.hero-plan .btn-pp,#plans .pc.hero-plan .btn-pg{background:#fff!important;border:1.5px solid #fff!important;color:var(--p700)!important}
#plans .pc.hero-plan .btn-pp:hover,#plans .pc.hero-plan .btn-pg:hover{background:transparent!important;color:#fff!important}
#plans .pc.hero-plan::before{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);transform:skewX(-18deg);pointer-events:none}
@media(prefers-reduced-motion:no-preference){#plans .pc.hero-plan::before{animation:prSheen 6s ease-in-out 1.5s infinite}}
#plans .si>p{color:#6b6179!important}

/* ---------- comparison table (dark) ---------- */
#plan-compare{position:relative;overflow:hidden;background:#07030d!important;padding:84px 32px!important}
#plan-compare::before{content:'COMPARE';position:absolute;left:-1%;bottom:-12%;pointer-events:none;font-family:var(--en);font-weight:800;line-height:.8;letter-spacing:-.06em;
  font-size:clamp(130px,18vw,290px);color:rgba(255,255,255,.03);white-space:nowrap;animation:wmDrift 36s ease-in-out infinite alternate}
.rtl #plan-compare::before{left:auto;right:-1%}
#plan-compare .si{position:relative;z-index:1}
#plan-compare .center{text-align:left!important}
.rtl #plan-compare .center{text-align:right!important}
#plan-compare .sec-tag{display:inline-flex!important;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin:0 0 14px!important;
  color:var(--p400)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
#plan-compare .sec-tag::before{content:'';width:34px;height:1px;background:var(--p400)}
#plan-compare .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:#fff!important}
.rtl #plan-compare .sec-title{font-family:var(--ar)!important;font-weight:800!important}
#plan-compare .sec-sub{color:rgba(255,255,255,.62)!important;margin:0!important;text-align:left!important}
.rtl #plan-compare .sec-sub{text-align:right!important}
#plan-compare .comp-wrap{margin-top:40px!important;padding-top:26px!important;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);border-radius:24px;overflow-x:auto;overflow-y:hidden}
#plan-compare .comp-table{border-collapse:collapse!important}
#plan-compare .comp-table th{background:transparent!important;color:rgba(255,255,255,.6)!important;border-bottom:1px solid rgba(255,255,255,.12)!important;padding:16px 24px!important;font-size:13px!important}
#plan-compare .comp-table th.col-h{background:var(--p600)!important;color:#fff!important;border-radius:0!important}
#plan-compare .comp-table th.col-h::after{top:-20px;background:var(--p400)!important;color:#fff;border-radius:999px}
#plan-compare .comp-table td{background:transparent!important;color:rgba(255,255,255,.82)!important;border-bottom:1px solid rgba(255,255,255,.07)!important;padding:13px 24px!important;
  transition:background-color .25s ease}
#plan-compare .comp-table td.col-h{background:rgba(144,71,200,.16)!important;color:#fff!important;border-left:0!important;border-right:0!important}
#plan-compare .comp-table tr:last-child td.col-h{border-bottom:0!important}
#plan-compare .comp-table tbody tr:hover td{background:rgba(255,255,255,.05)!important}
#plan-compare .comp-table tbody tr:hover td.col-h{background:rgba(144,71,200,.28)!important}
#plan-compare .comp-cat{background:rgba(255,255,255,.04)!important;color:var(--p400)!important;letter-spacing:.2em!important;padding-top:16px!important;padding-bottom:12px!important}
/* round tick badges (inline green ✓ spans) */
#plan-compare span[style*="#22c55e"]{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--p600);color:#fff!important;font-size:12px!important}
#plan-compare span[style*="var(--border)"]{color:rgba(255,255,255,.25)!important}
#plan-compare .btn-pg{background:transparent!important;border:1.5px solid rgba(255,255,255,.55)!important;color:#fff!important}
#plan-compare .btn-pg:hover{background:#fff!important;color:var(--p950)!important}
#plan-compare .btn-pp{background:var(--p600)!important;border:1.5px solid var(--p600)!important;color:#fff!important}
#plan-compare .btn-pp:hover{background:transparent!important;border-color:var(--p400)!important;color:var(--p300)!important}

/* ---------- all plans include (light cards) ---------- */
#plan-includes{background:linear-gradient(180deg,#f3ebfa,#faf7fd)!important;padding:80px 32px!important}
#plan-includes .center{text-align:left!important}
.rtl #plan-includes .center{text-align:right!important}
#plan-includes .sec-tag{display:inline-flex!important;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin:0 0 14px!important;
  color:var(--p600)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
#plan-includes .sec-tag::before{content:'';width:34px;height:1px;background:var(--p600)}
#plan-includes .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important}
.rtl #plan-includes .sec-title{font-family:var(--ar)!important;font-weight:800!important}
#plan-includes .fg{gap:16px!important;margin-top:34px!important}
#plan-includes .fc{background:#fff!important;border:1px solid var(--border)!important;border-radius:22px!important;padding:26px 24px!important;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease!important}
#plan-includes .fc::before{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--p500),transparent);transform:none!important;opacity:.8}
#plan-includes .fc:hover{transform:translateY(-6px)!important;border-color:var(--p300)!important}
#plan-includes .fc-ico{border-radius:14px!important;background:var(--p50)!important;border:1px solid var(--p100);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
#plan-includes .fc:hover .fc-ico{transform:rotate(-8deg) scale(1.1)}

/* ---------- section/heading sizes ---------- */
#plan-faq{max-width:none!important;margin:0!important}
#plan-faq .si{display:block!important;max-width:920px!important;margin:0 auto!important}
#plan-faq .center{text-align:left!important;margin-bottom:6px}
.rtl #plan-faq .center{text-align:right!important}
#plan-faq>.si>div:nth-child(2){margin-top:30px!important}
#plan-faq::after{content:'?'!important}

/* ---------- scroll reveal ---------- */
.js-pz .pz-rv:not(.pz-in){opacity:0}
.js-pz #plans .pc.pz-rv:not(.pz-in){transform:translateY(70px) scale(.95)}
.js-pz #plans .pl-toggle.pz-rv:not(.pz-in),.js-pz #plans .pl-billing.pz-rv:not(.pz-in){transform:translateY(20px)}
.js-pz #plan-compare .comp-wrap.pz-rv:not(.pz-in){transform:translateY(60px) scale(.97)}
.js-pz #plan-compare .sec-tag.pz-rv:not(.pz-in),.js-pz #plan-compare .sec-title.pz-rv:not(.pz-in),.js-pz #plan-compare .sec-sub.pz-rv:not(.pz-in),
.js-pz #plan-includes .sec-tag.pz-rv:not(.pz-in),.js-pz #plan-includes .sec-title.pz-rv:not(.pz-in){transform:translateX(var(--sa-dx,-70px))}
.js-pz #plan-includes .fc.pz-rv:not(.pz-in){transform:translateY(50px) scale(.95)}
.js-pz #plans .pc.pz-in{animation:pzPop .95s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*160ms + .2s)}
.js-pz #plans .pl-toggle.pz-in,.js-pz #plans .pl-billing.pz-in{animation:pzUp .8s cubic-bezier(.22,1,.36,1) backwards}
.js-pz #plan-compare .comp-wrap.pz-in{animation:pzPop 1s .2s cubic-bezier(.22,1,.36,1) backwards}
.js-pz #plan-compare .comp-wrap.pz-in tbody tr{animation:pzRow .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--r,0)*45ms + .5s)}
.js-pz #plan-compare .sec-tag.pz-in,.js-pz #plan-compare .sec-title.pz-in,.js-pz #plan-compare .sec-sub.pz-in,
.js-pz #plan-includes .sec-tag.pz-in,.js-pz #plan-includes .sec-title.pz-in{animation:pzSlide .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms)}
.js-pz #plan-includes .fc.pz-in{animation:pzPop .85s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms + .15s)}
@keyframes pzPop{from{opacity:0;transform:translateY(60px) scale(.95)}to{opacity:1}}
@keyframes pzUp{from{opacity:0;transform:translateY(20px)}to{opacity:1}}
@keyframes pzSlide{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@keyframes pzRow{from{opacity:0;transform:translateX(-18px)}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .js-pz .pz-rv{opacity:1!important;transform:none!important}
  .js-pz .pz-in,.js-pz .pz-in *{animation:none!important}
  #plan-compare::before{animation:none}
}
@media(max-width:900px){
  .trust-strip{padding:14px 20px!important}
  #plans,#plan-compare,#plan-includes{padding:52px 20px!important}
  #plans .price-grid{grid-template-columns:1fr!important;gap:30px!important}
  #plans .pc{padding:26px 22px!important}
}

/* ---------- FAQ (dark accordion — same system as the home FAQ) ---------- */
/* ============================================================
   "FAQ" (#plan-faq) — dark split showcase
   left: heading + "Still have questions?" card · right: numbered
   accordion · open-state glow · scroll reveal
   ============================================================ */
#plan-faq{position:relative;overflow:hidden;background:#07030d!important;padding:84px 32px!important}
#plan-faq::before{content:'';position:absolute;right:-10%;top:-10%;width:640px;height:560px;background:radial-gradient(ellipse,rgba(144,71,200,.24),transparent 65%);pointer-events:none}
#plan-faq::after{content:'?';position:absolute;left:-1%;bottom:-18%;font-family:'Playfair Display',Georgia,serif;font-size:clamp(380px,46vw,700px);font-weight:800;line-height:1;color:rgba(255,255,255,.025);pointer-events:none}
.rtl #plan-faq::after{left:auto;right:-1%;content:'\061F'}

/* split layout: faq-grid dissolves so its children join the section grid */
#plan-faq .si{position:relative;z-index:1;display:grid;grid-template-columns:minmax(280px,.8fr) 1.5fr;column-gap:72px;grid-template-rows:auto auto auto 1fr;align-items:start}
#plan-faq .faq-grid{display:contents!important}
#plan-faq .si>.sec-tag{grid-column:1;grid-row:1;justify-self:start}
#plan-faq .si>.sec-title{grid-column:1;grid-row:2}
#plan-faq .faq-grid>div:first-child{grid-column:2;grid-row:1 / span 4}
#plan-faq .faq-cta{grid-column:1;grid-row:3;margin-top:28px}

/* heading */
#plan-faq .sec-tag{display:inline-flex;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin:0 0 14px!important;
  color:var(--p400)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
#plan-faq .sec-tag::before{content:'';width:34px;height:1px;background:var(--p400)}
#plan-faq .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:#fff!important;margin-bottom:0!important}
#plan-faq .sec-title .acc{color:var(--p400)}
.rtl #plan-faq .sec-title{font-family:var(--ar)!important;font-weight:800!important}

/* accordion */
#plan-faq .faq-grid>div:first-child{counter-reset:faq}
#plan-faq .faq-item{counter-increment:faq;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09)!important;
  border-radius:20px!important;margin-bottom:12px!important;overflow:hidden;position:relative;
  transition:border-color .35s ease,background .35s ease,transform .4s cubic-bezier(.22,1,.36,1)}
#plan-faq .faq-item:hover{border-color:rgba(170,109,216,.45)!important;transform:translateX(-4px)}
.rtl #plan-faq .faq-item:hover{transform:translateX(4px)}
#plan-faq .faq-item.open{border-color:rgba(170,109,216,.6)!important;background:linear-gradient(180deg,rgba(144,71,200,.18),rgba(255,255,255,.03))}
#plan-faq .faq-item.open::before{content:'';position:absolute;top:0;left:12%;right:12%;height:2px;background:linear-gradient(90deg,transparent,var(--p400),transparent)}
#plan-faq .faq-q{background:transparent!important;color:#fff!important;padding:18px 22px!important;font-size:15.5px!important;font-weight:600!important;gap:14px;justify-content:flex-start}
#plan-faq .faq-q::before{content:counter(faq,decimal-leading-zero);font-size:13px;font-weight:800;letter-spacing:.06em;color:rgba(170,109,216,.7);flex-shrink:0;min-width:24px;transition:color .3s}
#plan-faq .faq-item.open .faq-q::before{color:var(--p300)}
#plan-faq .faq-q>span:first-child{flex:1}
#plan-faq .faq-item.open .faq-q{color:#fff!important}
#plan-faq .faq-arr{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(144,71,200,.22);color:#fff!important;font-size:18px!important;
  transition:transform .4s cubic-bezier(.22,1,.36,1),background-color .3s!important}
#plan-faq .faq-item.open .faq-arr{background:var(--p600);transform:rotate(135deg)}
#plan-faq .faq-a{background:transparent!important;color:rgba(255,255,255,.68)!important;padding:0 22px 20px 60px!important;font-size:14.5px!important;line-height:1.75!important}
.rtl #plan-faq .faq-a{padding:0 60px 20px 22px!important}
#plan-faq .faq-a a{color:var(--p300)!important;font-weight:600;text-decoration:underline;text-underline-offset:3px}
#plan-faq .faq-item.open .faq-a{animation:faqOpen .5s cubic-bezier(.22,1,.36,1) both}
@keyframes faqOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* "Still have questions?" card */
#plan-faq .faq-cta{background:linear-gradient(160deg,rgba(144,71,200,.2),rgba(255,255,255,.04))!important;border:1px solid rgba(170,109,216,.35)!important;border-radius:24px!important;padding:26px 28px!important;position:relative;overflow:hidden}
#plan-faq .faq-cta>div:nth-child(1){font-size:30px!important;margin-bottom:10px!important;display:inline-block;animation:faqBob 3s ease-in-out infinite alternate}
@keyframes faqBob{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-6px) rotate(4deg)}}
#plan-faq .faq-cta>div:nth-child(2){color:#fff!important;font-family:'Playfair Display',Georgia,serif;font-size:21px!important;font-weight:700!important;letter-spacing:-.02em!important}
.rtl #plan-faq .faq-cta>div:nth-child(2){font-family:var(--ar)}
#plan-faq .faq-cta>div:nth-child(3){color:rgba(255,255,255,.66)!important;font-size:14px!important;margin-bottom:18px!important}
#plan-faq .faq-cta .btn-main{background:var(--p600)!important;border:1.5px solid var(--p600)!important;color:#fff!important}
#plan-faq .faq-cta .btn-main:hover{background:transparent!important;border-color:var(--p400)!important;color:var(--p300)!important}
#plan-faq .faq-cta .btn-ghost{background:transparent!important;border:1.5px solid rgba(255,255,255,.55)!important;color:#fff!important}
#plan-faq .faq-cta .btn-ghost:hover{background:#fff!important;color:var(--p950)!important;border-color:#fff!important}
#plan-faq .faq-cta>div:last-child{max-width:none!important}

/* scroll reveal (hidden only until .fq-in is added) */
.js-fq #plan-faq .fq-rv:not(.fq-in){opacity:0}
.js-fq #plan-faq .sec-tag.fq-rv:not(.fq-in),.js-fq #plan-faq .sec-title.fq-rv:not(.fq-in){transform:translateX(var(--sa-dx,-70px))}
.js-fq #plan-faq .faq-item.fq-rv:not(.fq-in){transform:translateX(calc(var(--sa-dx,-70px)*-1))}
.js-fq #plan-faq .faq-cta.fq-rv:not(.fq-in){transform:translateY(50px) scale(.95)}
.js-fq #plan-faq .sec-tag.fq-in,.js-fq #plan-faq .sec-title.fq-in{animation:fqSlide .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms)}
.js-fq #plan-faq .faq-item.fq-in{animation:fqSlideR .85s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*110ms + 150ms)}
.js-fq #plan-faq .faq-cta.fq-in{animation:fqPop .95s .45s cubic-bezier(.22,1,.36,1) backwards}
@keyframes fqSlide{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@keyframes fqSlideR{from{opacity:0;transform:translateX(calc(var(--sa-dx,-70px)*-1))}to{opacity:1}}
@keyframes fqPop{from{opacity:0;transform:translateY(50px) scale(.95)}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .js-fq #plan-faq .fq-rv{opacity:1!important;transform:none!important}
  .js-fq #plan-faq .fq-in,#plan-faq .faq-item.open .faq-a,#plan-faq .faq-cta>div:nth-child(1){animation:none!important}
}
@media(max-width:1024px){
  #plan-faq .si{grid-template-columns:1fr;row-gap:0}
  #plan-faq .si>.sec-tag,#plan-faq .si>.sec-title,#plan-faq .faq-grid>div:first-child,#plan-faq .faq-cta{grid-column:1}
  #plan-faq .si>.sec-tag{grid-row:1}#plan-faq .si>.sec-title{grid-row:2}
  #plan-faq .faq-grid>div:first-child{grid-row:3;margin-top:28px}
  #plan-faq .faq-cta{grid-row:4;margin-top:20px}
}
@media(max-width:640px){
  #plan-faq{padding:52px 20px!important}
  #plan-faq .faq-a{padding:0 18px 18px 18px!important}
  #plan-faq .faq-q{padding:16px 16px!important}
}


/* ============================================================
   PRICES HERO — card-payment photo (images/hero-prices.jpg)
   the photo is portrait, so it is anchored on the card + terminal;
   the fade is strong on the text side
   ============================================================ */
.page-hero.hero-prices{
  background:
    linear-gradient(90deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.85) 40%,rgba(26,11,46,.55) 70%,rgba(42,18,72,.42) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.65) 100%),
    url('images/hero-prices.jpg') center 42%/cover no-repeat,
    #07030d!important}
.rtl .page-hero.hero-prices{
  background:
    linear-gradient(270deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.85) 40%,rgba(26,11,46,.55) 70%,rgba(42,18,72,.42) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.65) 100%),
    url('images/hero-prices.jpg') center 42%/cover no-repeat,
    #07030d!important}

/* ============================================================
   POS FEATURES PAGE (pos-features.php / ar/pos-features.php) — home theme
   dark hero + band · light stats · dark core cards · light pro cards ·
   dark key-features list · light help panel · scroll reveal
   ============================================================ */

/* ---------- hero: POS counter photo ---------- */
.page-hero.hero-pos{
  background:
    linear-gradient(90deg,rgba(10,4,20,.96) 0%,rgba(10,4,20,.88) 40%,rgba(26,11,46,.62) 70%,rgba(42,18,72,.5) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%),
    url('images/hero-pos.jpg') center/cover no-repeat,
    #07030d!important}
.rtl .page-hero.hero-pos{
  background:
    linear-gradient(270deg,rgba(10,4,20,.96) 0%,rgba(10,4,20,.88) 40%,rgba(26,11,46,.62) 70%,rgba(42,18,72,.5) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%),
    url('images/hero-pos.jpg') center/cover no-repeat,
    #07030d!important}

/* ---------- compliance band: dark, continues the hero ---------- */
.pf-band{background:#07030d!important;border-top:1px solid rgba(255,255,255,.07);padding:18px 32px!important}
.pf-band>div{gap:34px!important}
.pf-band>div>div[style*="width:1px"]{background:rgba(255,255,255,.14)!important}
.pf-band svg{stroke:var(--p400)}
.pf-band span{color:rgba(255,255,255,.82)!important;font-weight:600!important;transition:color .25s}
.pf-band>div>div:hover span{color:#fff!important}
.pf-band>div>div{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.pf-band>div>div:not([style*="width:1px"]):hover{transform:translateY(-2px)}

/* ---------- shared heading look ---------- */
#pf-core .sec-tag,#pf-pro .sec-tag,#pf-key .sec-tag,#pf-help .sec-tag{display:inline-flex!important;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin:0 0 14px!important;
  font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
#pf-core .sec-tag::before,#pf-pro .sec-tag::before,#pf-key .sec-tag::before,#pf-help .sec-tag::before{content:'';width:34px;height:1px}
#pf-pro .sec-tag,#pf-help .sec-tag{color:var(--p600)!important}
#pf-pro .sec-tag::before,#pf-help .sec-tag::before{background:var(--p600)}
#pf-key .sec-tag{color:var(--p400)!important}
#pf-key .sec-tag::before{background:var(--p400)}
#pf-core .sec-title,#pf-pro .sec-title,#pf-key .sec-title,#pf-help .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important}
.rtl #pf-core .sec-title,.rtl #pf-pro .sec-title,.rtl #pf-key .sec-title,.rtl #pf-help .sec-title{font-family:var(--ar)!important;font-weight:800!important}
#pf-pro .sec-title .acc,#pf-help .sec-title .acc{color:var(--p600)}
#pf-key .sec-title .acc{color:var(--p400)}
#pf-key .center{text-align:left!important}
.rtl #pf-key .center{text-align:right!important}
#pf-key .sec-sub{margin:0!important;text-align:left!important}
.rtl #pf-key .sec-sub{text-align:right!important}

/* ---------- stats (light cards) ---------- */
#pf-stats{background:linear-gradient(180deg,#faf7fd,#f3ebfa)!important;padding:64px 32px 40px!important}
#pf-stats .stats-row{gap:16px!important;background:transparent!important;border-radius:0!important;overflow:visible!important;margin-top:0!important}
#pf-stats .stat-box{background:#fff!important;border:1px solid var(--border);border-radius:22px;padding:30px 20px!important;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease}
#pf-stats .stat-box::before{content:'';position:absolute;top:0;left:22%;right:22%;height:2px;background:linear-gradient(90deg,transparent,var(--p500),transparent);opacity:.8}
#pf-stats .stat-box:hover{transform:translateY(-6px);border-color:var(--p300)}
#pf-stats .stat-val{font-size:clamp(34px,3.4vw,48px)!important;letter-spacing:-.04em!important;color:var(--p700)!important}
#pf-stats .stat-unit{color:var(--p500)!important}
#pf-stats .stat-lbl{font-size:13px!important;font-weight:600!important;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)!important}

/* ---------- pro features (light cards) ---------- */
#pf-pro{background:linear-gradient(180deg,#f3ebfa,#faf7fd)!important;padding:80px 32px!important}
#pf-pro .sec-sub{color:#6b6179!important}
#pf-pro .fg{gap:16px!important;margin-top:34px!important}
#pf-pro .fc{background:#fff!important;border:1px solid var(--border)!important;border-radius:22px!important;padding:26px 24px!important;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease!important}
#pf-pro .fc::before{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--p500),transparent);transform:none!important;opacity:.8}
#pf-pro .fc:hover{transform:translateY(-6px)!important;border-color:var(--p300)!important}
#pf-pro .fc-ico{border-radius:14px!important;background:var(--p50)!important;border:1px solid var(--p100);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
#pf-pro .fc:hover .fc-ico{transform:rotate(-8deg) scale(1.1)}

/* ---------- key features list (dark) ---------- */
#pf-key{position:relative;overflow:hidden;background:#07030d!important;padding:84px 32px!important}
#pf-key::before{content:'POS';position:absolute;right:-1%;bottom:-16%;pointer-events:none;font-family:var(--en);font-weight:800;line-height:.8;letter-spacing:-.06em;
  font-size:clamp(150px,22vw,340px);color:rgba(255,255,255,.03);white-space:nowrap;animation:wmDrift 36s ease-in-out infinite alternate}
.rtl #pf-key::before{right:auto;left:-1%}
#pf-key .si{position:relative;z-index:1}
#pf-key .sec-title{color:#fff!important}
#pf-key .sec-sub{color:rgba(255,255,255,.62)!important}
#pf-key .si>div[style*="grid-template-columns:repeat(3"]{gap:16px!important;max-width:none!important;margin-top:36px!important}
#pf-key .si>div[style*="grid-template-columns:repeat(3"]>div>div{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:12px 16px!important;margin-bottom:12px;
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s}
#pf-key .si>div[style*="grid-template-columns:repeat(3"]>div>div:hover{transform:translateX(8px);border-color:rgba(170,109,216,.55);background:linear-gradient(180deg,rgba(144,71,200,.16),rgba(255,255,255,.03))}
.rtl #pf-key .si>div[style*="grid-template-columns:repeat(3"]>div>div:hover{transform:translateX(-8px)}
#pf-key .si>div[style*="grid-template-columns:repeat(3"] div[style*="width:40px"]{border-radius:12px!important;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
#pf-key .si>div[style*="grid-template-columns:repeat(3"]>div>div:hover div[style*="width:40px"]{transform:rotate(-8deg) scale(1.1)}
#pf-key .si>div[style*="grid-template-columns:repeat(3"] span{color:#fff!important;font-size:14px!important}

/* ---------- help panel (light) ---------- */
#pf-help{background:linear-gradient(180deg,#faf7fd,#f3ebfa)!important;padding:80px 32px!important}
#pf-help .si{max-width:1280px!important;display:grid!important;grid-template-columns:1fr 1fr;gap:48px!important;align-items:center}
#pf-help .sec-title{color:var(--txt)!important}
#pf-help .sec-sub{color:#6b6179!important}
#pf-help .si>div:last-child>a[href*="help.imdady"]{background:#fff!important;border:1px solid var(--border)!important;border-radius:20px!important;padding:18px 22px!important;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s!important}
#pf-help .si>div:last-child>a[href*="help.imdady"]:hover{transform:translateX(6px);border-color:var(--p300)!important}
.rtl #pf-help .si>div:last-child>a[href*="help.imdady"]:hover{transform:translateX(-6px)}
#pf-help .si>div:last-child>a[href*="help.imdady"] div div:first-child{color:var(--txt)!important}
#pf-help .si>div:last-child>a[href*="help.imdady"] div div:last-child{color:var(--p600)!important}
#pf-help .si>div:last-child>a[href*="help.imdady"]>span{color:#fff!important;background:var(--p600);width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:16px!important}
#pf-help button{background:var(--p600)!important;border:1.5px solid var(--p600)!important;color:#fff!important;border-radius:999px!important;padding:13px!important;
  transition:background-color .25s,color .25s,transform .25s!important}
#pf-help button:hover{background:transparent!important;color:var(--p600)!important;transform:translateY(-2px)}

/* ---------- reveal ---------- */
.js-pf .pf-rv:not(.pf-in){opacity:0}
.js-pf .pf-band>div>div.pf-rv:not(.pf-in){transform:translateY(16px)}
.js-pf #pf-stats .stat-box.pf-rv:not(.pf-in){transform:translateY(50px) scale(.94)}
.js-pf #pf-pro .fc.pf-rv:not(.pf-in){transform:translateY(50px) scale(.95)}
.js-pf #pf-pro .sec-tag.pf-rv:not(.pf-in),.js-pf #pf-pro .sec-title.pf-rv:not(.pf-in),.js-pf #pf-pro .sec-sub.pf-rv:not(.pf-in),
.js-pf #pf-key .sec-tag.pf-rv:not(.pf-in),.js-pf #pf-key .sec-title.pf-rv:not(.pf-in),.js-pf #pf-key .sec-sub.pf-rv:not(.pf-in),
.js-pf #pf-help .sec-tag.pf-rv:not(.pf-in),.js-pf #pf-help .sec-title.pf-rv:not(.pf-in),.js-pf #pf-help .sec-sub.pf-rv:not(.pf-in){transform:translateX(var(--sa-dx,-70px))}
.js-pf #pf-key .si>div[style*="grid-template-columns:repeat(3"]>div>div.pf-rv:not(.pf-in){transform:translateX(var(--sa-dx,-70px))}
.js-pf #pf-help .si>div:last-child.pf-rv:not(.pf-in){transform:translateY(50px)}
.js-pf .pf-band>div>div.pf-in{animation:pfUp .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms)}
.js-pf #pf-stats .stat-box.pf-in{animation:pfPop .85s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*110ms)}
.js-pf #pf-pro .fc.pf-in{animation:pfPop .85s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms + .1s)}
.js-pf #pf-pro .sec-tag.pf-in,.js-pf #pf-pro .sec-title.pf-in,.js-pf #pf-pro .sec-sub.pf-in,
.js-pf #pf-key .sec-tag.pf-in,.js-pf #pf-key .sec-title.pf-in,.js-pf #pf-key .sec-sub.pf-in,
.js-pf #pf-help .sec-tag.pf-in,.js-pf #pf-help .sec-title.pf-in,.js-pf #pf-help .sec-sub.pf-in{animation:pfSlide .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms)}
.js-pf #pf-key .si>div[style*="grid-template-columns:repeat(3"]>div>div.pf-in{animation:pfSlide .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*60ms + .2s)}
.js-pf #pf-help .si>div:last-child.pf-in{animation:pfPop .9s .2s cubic-bezier(.22,1,.36,1) backwards}
@keyframes pfUp{from{opacity:0;transform:translateY(16px)}to{opacity:1}}
@keyframes pfPop{from{opacity:0;transform:translateY(50px) scale(.95)}to{opacity:1}}
@keyframes pfSlide{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .js-pf .pf-rv{opacity:1!important;transform:none!important}
  .js-pf .pf-in{animation:none!important}
  #pf-key::before{animation:none}
}
@media(max-width:900px){
  .pf-band{padding:14px 20px!important}
  #pf-stats{padding:44px 20px 28px!important}
  #pf-pro,#pf-key,#pf-help{padding:52px 20px!important}
  #pf-help .si{grid-template-columns:1fr!important;gap:26px!important}
}

/* ---------- core features: same dark card system as Key Features on the home page ---------- */
/* ============================================================
   KEY FEATURES (#pf-core) — dark showcase section
   coloured top accent · tinted icon chip · big faded watermark number
   · scroll-reveal + hover animations
   ============================================================ */
#pf-core{position:relative;overflow:hidden;background:#07030d;padding:110px 32px}
#pf-core::before,#pf-core::after{content:'';position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.55}
#pf-core::before{width:520px;height:520px;left:-140px;top:-120px;background:radial-gradient(circle,rgba(144,71,200,.55),transparent 70%);animation:fgOrbA 16s ease-in-out infinite alternate}
#pf-core::after{width:620px;height:620px;right:-180px;bottom:-200px;background:radial-gradient(circle,rgba(117,51,175,.5),transparent 70%);animation:fgOrbB 20s ease-in-out infinite alternate}
@keyframes fgOrbA{to{transform:translate(120px,80px) scale(1.15)}}
@keyframes fgOrbB{to{transform:translate(-140px,-60px) scale(1.1)}}
#pf-core .si{position:relative;z-index:1}

/* heading */
#pf-core .sec-tag{display:inline-flex;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;
  color:var(--p400)!important;font-size:12.5px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important;margin-bottom:18px!important}
#pf-core .sec-tag::before{content:'';width:34px;height:1px;background:var(--p400)}
#pf-core .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:#fff!important;
  font-size:clamp(34px,4.6vw,64px)!important;letter-spacing:-.03em!important;line-height:1.02!important;max-width:900px}
.rtl #pf-core .sec-title{font-family:var(--ar)!important;font-weight:800!important;line-height:1.25!important;letter-spacing:0!important}
#pf-core .sec-sub{color:rgba(255,255,255,.62)!important;max-width:640px}

/* grid + cards */
#pf-core .fg{gap:22px!important;margin-top:56px!important}
#pf-core .fc{
  --ac:#aa6dd8;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02))!important;
  border:1px solid rgba(255,255,255,.09)!important;border-radius:24px!important;
  padding:34px 28px 28px!important;min-height:270px;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,background .35s ease!important}
/* coloured top accent line */
#pf-core .fc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(1)!important;
  background:linear-gradient(90deg,transparent,var(--ac),transparent)!important;opacity:.9;transition:opacity .3s,height .3s}
/* big faded watermark number */
#pf-core .fc::after{content:'';position:absolute;right:-6px;bottom:-22px;font-size:112px;font-weight:800;line-height:1;letter-spacing:-.05em;
  color:var(--ac);opacity:.08;pointer-events:none;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s}
.rtl #pf-core .fc::after{right:auto;left:-6px}
#pf-core .fc:nth-child(1)::after{content:'01'}
#pf-core .fc:nth-child(2)::after{content:'02'}
#pf-core .fc:nth-child(3)::after{content:'03'}
#pf-core .fc:nth-child(4)::after{content:'04'}
#pf-core .fc:nth-child(5)::after{content:'05'}
#pf-core .fc:nth-child(6)::after{content:'06'}
#pf-core .fc:nth-child(7)::after{content:'07'}
#pf-core .fc:nth-child(8)::after{content:'08'}
#pf-core .fc:nth-child(9)::after{content:'09'}
/* per-card accent (all within the purple/violet family) */
#pf-core .fc:nth-child(9n+1){--ac:#aa6dd8}
#pf-core .fc:nth-child(9n+2){--ac:#c49de8}
#pf-core .fc:nth-child(9n+3){--ac:#9047c8}
#pf-core .fc:nth-child(9n+4){--ac:#aa6dd8}
#pf-core .fc:nth-child(9n+5){--ac:#9047c8}
#pf-core .fc:nth-child(9n+6){--ac:#c49de8}
#pf-core .fc:nth-child(9n+7){--ac:#9047c8}
#pf-core .fc:nth-child(9n+8){--ac:#c49de8}
#pf-core .fc:nth-child(9n+9){--ac:#aa6dd8}

#pf-core .fc-ico{width:54px;height:54px;border-radius:50%!important;margin:0 0 18px!important;
  background:color-mix(in srgb,var(--ac) 16%,transparent)!important;border:1px solid color-mix(in srgb,var(--ac) 35%,transparent)!important;
  transition:transform .5s cubic-bezier(.22,1,.36,1),background .3s}
#pf-core .fc-ico svg *{stroke:var(--ac)!important}
#pf-core .fc-title{color:#fff!important;font-size:19px!important;font-weight:700!important;letter-spacing:-.01em;margin-bottom:10px!important}
#pf-core .fc-desc{color:rgba(255,255,255,.62)!important;font-size:14.5px!important;line-height:1.65!important}
#pf-core .fc-link,#pf-core .fc a{color:var(--ac)!important;margin-top:auto;padding-top:16px;font-weight:700}

/* hover */
#pf-core .fc:hover{transform:translateY(-8px)!important;border-color:color-mix(in srgb,var(--ac) 55%,transparent)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 12%,transparent),rgba(255,255,255,.02))!important}
#pf-core .fc:hover::before{height:4px;opacity:1}
#pf-core .fc:hover::after{transform:translate(-10px,-8px) scale(1.08);opacity:.16}
.rtl #pf-core .fc:hover::after{transform:translate(10px,-8px) scale(1.08)}
#pf-core .fc:hover .fc-ico{transform:translateY(-3px) rotate(-8deg) scale(1.1);background:color-mix(in srgb,var(--ac) 28%,transparent)!important}

/* CTA button under the grid */
#pf-core .btn-main{background:var(--p600)!important;border-color:var(--p600)!important;color:#fff!important}
#pf-core .btn-main:hover{background:transparent!important;border-color:var(--p400)!important;color:var(--p300)!important}

/* scroll-reveal (only active when JS added .js-rv, so no-JS shows everything) */
.js-rv #pf-core .rv,.js-rv #pf-core .fc{opacity:0;transform:translateY(34px)}
.js-rv #pf-core .rv.in{animation:fgUp .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*90ms)}
.js-rv #pf-core .fc.in{animation:fgCard .85s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*90ms)}
@keyframes fgUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fgCard{from{opacity:0;transform:translateY(46px) scale(.96)}to{opacity:1;transform:none}}
/* accent line draws in once the card appears */
.js-rv #pf-core .fc.in::before{animation:fgLine 1s .25s cubic-bezier(.22,1,.36,1) both}
@keyframes fgLine{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}

@media(prefers-reduced-motion:reduce){
  #pf-core::before,#pf-core::after{animation:none}
  .js-rv #pf-core .rv,.js-rv #pf-core .fc{opacity:1;transform:none}
  .js-rv #pf-core .rv.in,.js-rv #pf-core .fc.in,.js-rv #pf-core .fc.in::before{animation:none}
}
@media(max-width:768px){
  #pf-core{padding:64px 20px}
  #pf-core .fc{min-height:0;padding:28px 22px 24px!important}
  #pf-core .fc::after{font-size:86px}
}


/* --- #pf-core tweaks on top of the copied Key-Features system --- */
#pf-core{background:#07030d!important}
#pf-core::before{display:none!important}
#pf-core::after{display:block!important;content:'POS';position:absolute;pointer-events:none;z-index:0;left:-1%;right:auto;bottom:-8%;top:auto;width:auto!important;height:auto!important;
  background:none!important;border:0!important;border-radius:0!important;filter:none!important;
  font-family:var(--en);font-weight:800;line-height:.8;letter-spacing:-.06em;white-space:nowrap;color:rgba(255,255,255,.03)!important;opacity:1!important;
  font-size:clamp(150px,22vw,340px);animation:wmDrift 36s ease-in-out infinite alternate}
.rtl #pf-core::after{left:auto;right:-1%}
#pf-core{padding:80px 32px!important}
#pf-core .fg{gap:14px!important;margin-top:34px!important}
#pf-core .fc{padding:24px 22px 22px!important;min-height:0!important;border-radius:20px!important}
#pf-core .fc-ico{width:44px!important;height:44px!important;margin-bottom:12px!important}
#pf-core .fc-title{font-size:16.5px!important}
#pf-core .fc-desc{font-size:13.5px!important;line-height:1.6!important}
#pf-core .fc::after{font-size:76px!important;bottom:-12px!important}
@media(max-width:900px){#pf-core{padding:52px 20px!important}}

/* ============================================================
   RMS FEATURES PAGE (rms-features.php / ar/rms-features.php) — home theme
   dark hero · light stats · dark core cards · light online cards ·
   dark growth cards · light key-features rows · dark help panel
   ============================================================ */

/* ---------- hero: restaurant photo ---------- */
.page-hero.hero-rms{
  background:
    linear-gradient(90deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.86) 40%,rgba(26,11,46,.60) 70%,rgba(42,18,72,.48) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%),
    url('images/hero-rms.jpg') center/cover no-repeat,
    #07030d!important}
.rtl .page-hero.hero-rms{
  background:
    linear-gradient(270deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.86) 40%,rgba(26,11,46,.60) 70%,rgba(42,18,72,.48) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%),
    url('images/hero-rms.jpg') center/cover no-repeat,
    #07030d!important}

/* ---------- shared heading look ---------- */
#rf-core .sec-tag,#rf-online .sec-tag,#rf-growth .sec-tag,#rf-key .sec-tag,#rf-help .sec-tag{display:inline-flex!important;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin:0 0 14px!important;
  font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
#rf-core .sec-tag::before,#rf-online .sec-tag::before,#rf-growth .sec-tag::before,#rf-key .sec-tag::before,#rf-help .sec-tag::before{content:'';width:34px;height:1px}
#rf-online .sec-tag,#rf-key .sec-tag{color:var(--p600)!important}
#rf-online .sec-tag::before,#rf-key .sec-tag::before{background:var(--p600)}
#rf-help .sec-tag{color:var(--p400)!important}
#rf-help .sec-tag::before{background:var(--p400)}
#rf-core .sec-title,#rf-online .sec-title,#rf-growth .sec-title,#rf-key .sec-title,#rf-help .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important}
.rtl #rf-core .sec-title,.rtl #rf-online .sec-title,.rtl #rf-growth .sec-title,.rtl #rf-key .sec-title,.rtl #rf-help .sec-title{font-family:var(--ar)!important;font-weight:800!important}
#rf-online .sec-title .acc,#rf-key .sec-title .acc{color:var(--p600)}
#rf-help .sec-title .acc{color:var(--p400)}
#rf-key .center{text-align:left!important}
.rtl #rf-key .center{text-align:right!important}
#rf-key .sec-sub{margin:0!important;text-align:left!important;color:#6b6179!important}
.rtl #rf-key .sec-sub{text-align:right!important}

/* ---------- stats (light cards) ---------- */
#rf-stats{background:linear-gradient(180deg,#faf7fd,#f3ebfa)!important;padding:64px 32px 40px!important}
#rf-stats .stats-row{gap:16px!important;background:transparent!important;border-radius:0!important;overflow:visible!important;margin-top:0!important}
#rf-stats .stat-box{background:#fff!important;border:1px solid var(--border);border-radius:22px;padding:30px 20px!important;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease}
#rf-stats .stat-box::before{content:'';position:absolute;top:0;left:22%;right:22%;height:2px;background:linear-gradient(90deg,transparent,var(--p500),transparent);opacity:.8}
#rf-stats .stat-box:hover{transform:translateY(-6px);border-color:var(--p300)}
#rf-stats .stat-val{font-size:clamp(34px,3.4vw,48px)!important;letter-spacing:-.04em!important;color:var(--p700)!important}
#rf-stats .stat-unit{color:var(--p500)!important}
#rf-stats .stat-lbl{font-size:13px!important;font-weight:600!important;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)!important}

/* ---------- online & delivery (light cards) ---------- */
#rf-online{background:linear-gradient(180deg,#f3ebfa,#faf7fd)!important;padding:80px 32px!important}
#rf-online .sec-sub{color:#6b6179!important}
#rf-online .fg{gap:16px!important;margin-top:34px!important}
#rf-online .fc{background:#fff!important;border:1px solid var(--border)!important;border-radius:22px!important;padding:26px 24px!important;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease!important}
#rf-online .fc::before{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--p500),transparent);transform:none!important;opacity:.8}
#rf-online .fc:hover{transform:translateY(-6px)!important;border-color:var(--p300)!important}
#rf-online .fc-ico{border-radius:14px!important;background:var(--p50)!important;border:1px solid var(--p100);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
#rf-online .fc:hover .fc-ico{transform:rotate(-8deg) scale(1.1)}

/* ---------- key features list (light rows) ---------- */
#rf-key{background:linear-gradient(180deg,#faf7fd,#f3ebfa)!important;padding:80px 32px!important}
#rf-key .si>div[style*="grid-template-columns:repeat(3"]{gap:16px!important;max-width:none!important;margin-top:34px!important}
#rf-key .si>div[style*="grid-template-columns:repeat(3"]>div>div{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px 16px!important;margin-bottom:12px;
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s}
#rf-key .si>div[style*="grid-template-columns:repeat(3"]>div>div:hover{transform:translateX(8px);border-color:var(--p300)}
.rtl #rf-key .si>div[style*="grid-template-columns:repeat(3"]>div>div:hover{transform:translateX(-8px)}
#rf-key .si>div[style*="grid-template-columns:repeat(3"] div[style*="width:40px"]{border-radius:12px!important;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
#rf-key .si>div[style*="grid-template-columns:repeat(3"]>div>div:hover div[style*="width:40px"]{transform:rotate(-8deg) scale(1.1)}

/* ---------- help panel (dark flat) ---------- */
#rf-help{position:relative;overflow:hidden;background:#07030d!important;padding:84px 32px!important}
#rf-help::before{content:'HELP';position:absolute;left:-1%;bottom:-16%;pointer-events:none;font-family:var(--en);font-weight:800;line-height:.8;letter-spacing:-.06em;
  font-size:clamp(150px,22vw,340px);color:rgba(255,255,255,.03);white-space:nowrap;animation:wmDrift 36s ease-in-out infinite alternate}
.rtl #rf-help::before{left:auto;right:-1%}
#rf-help .si{position:relative;z-index:1;max-width:1280px!important;display:grid!important;grid-template-columns:1fr 1fr;gap:48px!important;align-items:center}
#rf-help .sec-title{color:#fff!important}
#rf-help .sec-sub{color:rgba(255,255,255,.62)!important}
#rf-help .si>div:last-child>a[href*="help.imdady"]{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:20px!important;padding:18px 22px!important;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s!important}
#rf-help .si>div:last-child>a[href*="help.imdady"]:hover{transform:translateX(6px);border-color:rgba(170,109,216,.55)!important;background:rgba(144,71,200,.2)!important}
.rtl #rf-help .si>div:last-child>a[href*="help.imdady"]:hover{transform:translateX(-6px)}
#rf-help .si>div:last-child>a[href*="help.imdady"]>span{color:#fff!important;background:var(--p600);width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:16px!important}
#rf-help button{background:var(--p600)!important;border:1.5px solid var(--p600)!important;color:#fff!important;border-radius:999px!important;padding:13px!important;
  transition:background-color .25s,color .25s,border-color .25s,transform .25s!important}
#rf-help button:hover{background:transparent!important;border-color:var(--p400)!important;color:var(--p300)!important;transform:translateY(-2px)}

/* ---------- reveal ---------- */
.js-rm .rm-rv:not(.rm-in){opacity:0}
.js-rm #rf-stats .stat-box.rm-rv:not(.rm-in){transform:translateY(50px) scale(.94)}
.js-rm #rf-online .fc.rm-rv:not(.rm-in){transform:translateY(50px) scale(.95)}
.js-rm #rf-online .sec-tag.rm-rv:not(.rm-in),.js-rm #rf-online .sec-title.rm-rv:not(.rm-in),.js-rm #rf-online .sec-sub.rm-rv:not(.rm-in),
.js-rm #rf-key .sec-tag.rm-rv:not(.rm-in),.js-rm #rf-key .sec-title.rm-rv:not(.rm-in),.js-rm #rf-key .sec-sub.rm-rv:not(.rm-in),
.js-rm #rf-help .sec-tag.rm-rv:not(.rm-in),.js-rm #rf-help .sec-title.rm-rv:not(.rm-in),.js-rm #rf-help .sec-sub.rm-rv:not(.rm-in){transform:translateX(var(--sa-dx,-70px))}
.js-rm #rf-key .si>div[style*="grid-template-columns:repeat(3"]>div>div.rm-rv:not(.rm-in){transform:translateX(var(--sa-dx,-70px))}
.js-rm #rf-help .si>div:last-child.rm-rv:not(.rm-in){transform:translateY(50px)}
.js-rm #rf-stats .stat-box.rm-in{animation:rmPop .85s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*110ms)}
.js-rm #rf-online .fc.rm-in{animation:rmPop .85s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms + .1s)}
.js-rm #rf-online .sec-tag.rm-in,.js-rm #rf-online .sec-title.rm-in,.js-rm #rf-online .sec-sub.rm-in,
.js-rm #rf-key .sec-tag.rm-in,.js-rm #rf-key .sec-title.rm-in,.js-rm #rf-key .sec-sub.rm-in,
.js-rm #rf-help .sec-tag.rm-in,.js-rm #rf-help .sec-title.rm-in,.js-rm #rf-help .sec-sub.rm-in{animation:rmSlide .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms)}
.js-rm #rf-key .si>div[style*="grid-template-columns:repeat(3"]>div>div.rm-in{animation:rmSlide .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*60ms + .2s)}
.js-rm #rf-help .si>div:last-child.rm-in{animation:rmPop .9s .2s cubic-bezier(.22,1,.36,1) backwards}
@keyframes rmPop{from{opacity:0;transform:translateY(50px) scale(.95)}to{opacity:1}}
@keyframes rmSlide{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .js-rm .rm-rv{opacity:1!important;transform:none!important}
  .js-rm .rm-in{animation:none!important}
  #rf-help::before{animation:none}
}
@media(max-width:900px){
  #rf-stats{padding:44px 20px 28px!important}
  #rf-online,#rf-key,#rf-help{padding:52px 20px!important}
  #rf-help .si{grid-template-columns:1fr!important;gap:26px!important}
}

/* ---------- core + growth: same dark card system as Key Features on the home page ---------- */
/* ============================================================
   KEY FEATURES (#rf-core) — dark showcase section
   coloured top accent · tinted icon chip · big faded watermark number
   · scroll-reveal + hover animations
   ============================================================ */
#rf-core{position:relative;overflow:hidden;background:#07030d;padding:110px 32px}
#rf-core::before,#rf-core::after{content:'';position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.55}
#rf-core::before{width:520px;height:520px;left:-140px;top:-120px;background:radial-gradient(circle,rgba(144,71,200,.55),transparent 70%);animation:fgOrbA 16s ease-in-out infinite alternate}
#rf-core::after{width:620px;height:620px;right:-180px;bottom:-200px;background:radial-gradient(circle,rgba(117,51,175,.5),transparent 70%);animation:fgOrbB 20s ease-in-out infinite alternate}
@keyframes fgOrbA{to{transform:translate(120px,80px) scale(1.15)}}
@keyframes fgOrbB{to{transform:translate(-140px,-60px) scale(1.1)}}
#rf-core .si{position:relative;z-index:1}

/* heading */
#rf-core .sec-tag{display:inline-flex;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;
  color:var(--p400)!important;font-size:12.5px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important;margin-bottom:18px!important}
#rf-core .sec-tag::before{content:'';width:34px;height:1px;background:var(--p400)}
#rf-core .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:#fff!important;
  font-size:clamp(34px,4.6vw,64px)!important;letter-spacing:-.03em!important;line-height:1.02!important;max-width:900px}
.rtl #rf-core .sec-title{font-family:var(--ar)!important;font-weight:800!important;line-height:1.25!important;letter-spacing:0!important}
#rf-core .sec-sub{color:rgba(255,255,255,.62)!important;max-width:640px}

/* grid + cards */
#rf-core .fg{gap:22px!important;margin-top:56px!important}
#rf-core .fc{
  --ac:#aa6dd8;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02))!important;
  border:1px solid rgba(255,255,255,.09)!important;border-radius:24px!important;
  padding:34px 28px 28px!important;min-height:270px;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,background .35s ease!important}
/* coloured top accent line */
#rf-core .fc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(1)!important;
  background:linear-gradient(90deg,transparent,var(--ac),transparent)!important;opacity:.9;transition:opacity .3s,height .3s}
/* big faded watermark number */
#rf-core .fc::after{content:'';position:absolute;right:-6px;bottom:-22px;font-size:112px;font-weight:800;line-height:1;letter-spacing:-.05em;
  color:var(--ac);opacity:.08;pointer-events:none;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s}
.rtl #rf-core .fc::after{right:auto;left:-6px}
#rf-core .fc:nth-child(1)::after{content:'01'}
#rf-core .fc:nth-child(2)::after{content:'02'}
#rf-core .fc:nth-child(3)::after{content:'03'}
#rf-core .fc:nth-child(4)::after{content:'04'}
#rf-core .fc:nth-child(5)::after{content:'05'}
#rf-core .fc:nth-child(6)::after{content:'06'}
#rf-core .fc:nth-child(7)::after{content:'07'}
#rf-core .fc:nth-child(8)::after{content:'08'}
#rf-core .fc:nth-child(9)::after{content:'09'}
/* per-card accent (all within the purple/violet family) */
#rf-core .fc:nth-child(9n+1){--ac:#aa6dd8}
#rf-core .fc:nth-child(9n+2){--ac:#c49de8}
#rf-core .fc:nth-child(9n+3){--ac:#9047c8}
#rf-core .fc:nth-child(9n+4){--ac:#aa6dd8}
#rf-core .fc:nth-child(9n+5){--ac:#9047c8}
#rf-core .fc:nth-child(9n+6){--ac:#c49de8}
#rf-core .fc:nth-child(9n+7){--ac:#9047c8}
#rf-core .fc:nth-child(9n+8){--ac:#c49de8}
#rf-core .fc:nth-child(9n+9){--ac:#aa6dd8}

#rf-core .fc-ico{width:54px;height:54px;border-radius:50%!important;margin:0 0 18px!important;
  background:color-mix(in srgb,var(--ac) 16%,transparent)!important;border:1px solid color-mix(in srgb,var(--ac) 35%,transparent)!important;
  transition:transform .5s cubic-bezier(.22,1,.36,1),background .3s}
#rf-core .fc-ico svg *{stroke:var(--ac)!important}
#rf-core .fc-title{color:#fff!important;font-size:19px!important;font-weight:700!important;letter-spacing:-.01em;margin-bottom:10px!important}
#rf-core .fc-desc{color:rgba(255,255,255,.62)!important;font-size:14.5px!important;line-height:1.65!important}
#rf-core .fc-link,#rf-core .fc a{color:var(--ac)!important;margin-top:auto;padding-top:16px;font-weight:700}

/* hover */
#rf-core .fc:hover{transform:translateY(-8px)!important;border-color:color-mix(in srgb,var(--ac) 55%,transparent)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 12%,transparent),rgba(255,255,255,.02))!important}
#rf-core .fc:hover::before{height:4px;opacity:1}
#rf-core .fc:hover::after{transform:translate(-10px,-8px) scale(1.08);opacity:.16}
.rtl #rf-core .fc:hover::after{transform:translate(10px,-8px) scale(1.08)}
#rf-core .fc:hover .fc-ico{transform:translateY(-3px) rotate(-8deg) scale(1.1);background:color-mix(in srgb,var(--ac) 28%,transparent)!important}

/* CTA button under the grid */
#rf-core .btn-main{background:var(--p600)!important;border-color:var(--p600)!important;color:#fff!important}
#rf-core .btn-main:hover{background:transparent!important;border-color:var(--p400)!important;color:var(--p300)!important}

/* scroll-reveal (only active when JS added .js-rv, so no-JS shows everything) */
.js-rv #rf-core .rv,.js-rv #rf-core .fc{opacity:0;transform:translateY(34px)}
.js-rv #rf-core .rv.in{animation:fgUp .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*90ms)}
.js-rv #rf-core .fc.in{animation:fgCard .85s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*90ms)}
@keyframes fgUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fgCard{from{opacity:0;transform:translateY(46px) scale(.96)}to{opacity:1;transform:none}}
/* accent line draws in once the card appears */
.js-rv #rf-core .fc.in::before{animation:fgLine 1s .25s cubic-bezier(.22,1,.36,1) both}
@keyframes fgLine{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}

@media(prefers-reduced-motion:reduce){
  #rf-core::before,#rf-core::after{animation:none}
  .js-rv #rf-core .rv,.js-rv #rf-core .fc{opacity:1;transform:none}
  .js-rv #rf-core .rv.in,.js-rv #rf-core .fc.in,.js-rv #rf-core .fc.in::before{animation:none}
}
@media(max-width:768px){
  #rf-core{padding:64px 20px}
  #rf-core .fc{min-height:0;padding:28px 22px 24px!important}
  #rf-core .fc::after{font-size:86px}
}

/* ============================================================
   KEY FEATURES (#rf-growth) — dark showcase section
   coloured top accent · tinted icon chip · big faded watermark number
   · scroll-reveal + hover animations
   ============================================================ */
#rf-growth{position:relative;overflow:hidden;background:#07030d;padding:110px 32px}
#rf-growth::before,#rf-growth::after{content:'';position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.55}
#rf-growth::before{width:520px;height:520px;left:-140px;top:-120px;background:radial-gradient(circle,rgba(144,71,200,.55),transparent 70%);animation:fgOrbA 16s ease-in-out infinite alternate}
#rf-growth::after{width:620px;height:620px;right:-180px;bottom:-200px;background:radial-gradient(circle,rgba(117,51,175,.5),transparent 70%);animation:fgOrbB 20s ease-in-out infinite alternate}
@keyframes fgOrbA{to{transform:translate(120px,80px) scale(1.15)}}
@keyframes fgOrbB{to{transform:translate(-140px,-60px) scale(1.1)}}
#rf-growth .si{position:relative;z-index:1}

/* heading */
#rf-growth .sec-tag{display:inline-flex;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;
  color:var(--p400)!important;font-size:12.5px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important;margin-bottom:18px!important}
#rf-growth .sec-tag::before{content:'';width:34px;height:1px;background:var(--p400)}
#rf-growth .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:#fff!important;
  font-size:clamp(34px,4.6vw,64px)!important;letter-spacing:-.03em!important;line-height:1.02!important;max-width:900px}
.rtl #rf-growth .sec-title{font-family:var(--ar)!important;font-weight:800!important;line-height:1.25!important;letter-spacing:0!important}
#rf-growth .sec-sub{color:rgba(255,255,255,.62)!important;max-width:640px}

/* grid + cards */
#rf-growth .fg{gap:22px!important;margin-top:56px!important}
#rf-growth .fc{
  --ac:#aa6dd8;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02))!important;
  border:1px solid rgba(255,255,255,.09)!important;border-radius:24px!important;
  padding:34px 28px 28px!important;min-height:270px;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,background .35s ease!important}
/* coloured top accent line */
#rf-growth .fc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(1)!important;
  background:linear-gradient(90deg,transparent,var(--ac),transparent)!important;opacity:.9;transition:opacity .3s,height .3s}
/* big faded watermark number */
#rf-growth .fc::after{content:'';position:absolute;right:-6px;bottom:-22px;font-size:112px;font-weight:800;line-height:1;letter-spacing:-.05em;
  color:var(--ac);opacity:.08;pointer-events:none;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s}
.rtl #rf-growth .fc::after{right:auto;left:-6px}
#rf-growth .fc:nth-child(1)::after{content:'01'}
#rf-growth .fc:nth-child(2)::after{content:'02'}
#rf-growth .fc:nth-child(3)::after{content:'03'}
#rf-growth .fc:nth-child(4)::after{content:'04'}
#rf-growth .fc:nth-child(5)::after{content:'05'}
#rf-growth .fc:nth-child(6)::after{content:'06'}
#rf-growth .fc:nth-child(7)::after{content:'07'}
#rf-growth .fc:nth-child(8)::after{content:'08'}
#rf-growth .fc:nth-child(9)::after{content:'09'}
/* per-card accent (all within the purple/violet family) */
#rf-growth .fc:nth-child(9n+1){--ac:#aa6dd8}
#rf-growth .fc:nth-child(9n+2){--ac:#c49de8}
#rf-growth .fc:nth-child(9n+3){--ac:#9047c8}
#rf-growth .fc:nth-child(9n+4){--ac:#aa6dd8}
#rf-growth .fc:nth-child(9n+5){--ac:#9047c8}
#rf-growth .fc:nth-child(9n+6){--ac:#c49de8}
#rf-growth .fc:nth-child(9n+7){--ac:#9047c8}
#rf-growth .fc:nth-child(9n+8){--ac:#c49de8}
#rf-growth .fc:nth-child(9n+9){--ac:#aa6dd8}

#rf-growth .fc-ico{width:54px;height:54px;border-radius:50%!important;margin:0 0 18px!important;
  background:color-mix(in srgb,var(--ac) 16%,transparent)!important;border:1px solid color-mix(in srgb,var(--ac) 35%,transparent)!important;
  transition:transform .5s cubic-bezier(.22,1,.36,1),background .3s}
#rf-growth .fc-ico svg *{stroke:var(--ac)!important}
#rf-growth .fc-title{color:#fff!important;font-size:19px!important;font-weight:700!important;letter-spacing:-.01em;margin-bottom:10px!important}
#rf-growth .fc-desc{color:rgba(255,255,255,.62)!important;font-size:14.5px!important;line-height:1.65!important}
#rf-growth .fc-link,#rf-growth .fc a{color:var(--ac)!important;margin-top:auto;padding-top:16px;font-weight:700}

/* hover */
#rf-growth .fc:hover{transform:translateY(-8px)!important;border-color:color-mix(in srgb,var(--ac) 55%,transparent)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 12%,transparent),rgba(255,255,255,.02))!important}
#rf-growth .fc:hover::before{height:4px;opacity:1}
#rf-growth .fc:hover::after{transform:translate(-10px,-8px) scale(1.08);opacity:.16}
.rtl #rf-growth .fc:hover::after{transform:translate(10px,-8px) scale(1.08)}
#rf-growth .fc:hover .fc-ico{transform:translateY(-3px) rotate(-8deg) scale(1.1);background:color-mix(in srgb,var(--ac) 28%,transparent)!important}

/* CTA button under the grid */
#rf-growth .btn-main{background:var(--p600)!important;border-color:var(--p600)!important;color:#fff!important}
#rf-growth .btn-main:hover{background:transparent!important;border-color:var(--p400)!important;color:var(--p300)!important}

/* scroll-reveal (only active when JS added .js-rv, so no-JS shows everything) */
.js-rv #rf-growth .rv,.js-rv #rf-growth .fc{opacity:0;transform:translateY(34px)}
.js-rv #rf-growth .rv.in{animation:fgUp .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*90ms)}
.js-rv #rf-growth .fc.in{animation:fgCard .85s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*90ms)}
@keyframes fgUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fgCard{from{opacity:0;transform:translateY(46px) scale(.96)}to{opacity:1;transform:none}}
/* accent line draws in once the card appears */
.js-rv #rf-growth .fc.in::before{animation:fgLine 1s .25s cubic-bezier(.22,1,.36,1) both}
@keyframes fgLine{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}

@media(prefers-reduced-motion:reduce){
  #rf-growth::before,#rf-growth::after{animation:none}
  .js-rv #rf-growth .rv,.js-rv #rf-growth .fc{opacity:1;transform:none}
  .js-rv #rf-growth .rv.in,.js-rv #rf-growth .fc.in,.js-rv #rf-growth .fc.in::before{animation:none}
}
@media(max-width:768px){
  #rf-growth{padding:64px 20px}
  #rf-growth .fc{min-height:0;padding:28px 22px 24px!important}
  #rf-growth .fc::after{font-size:86px}
}


/* --- #rf-core / #rf-growth tweaks on top of the copied Key-Features system --- */
#rf-core,#rf-growth{background:#07030d!important;padding:80px 32px!important}
#rf-core::before,#rf-growth::before{display:none!important}
#rf-core::after,#rf-growth::after{display:block!important;position:absolute;pointer-events:none;z-index:0;top:auto;width:auto!important;height:auto!important;
  background:none!important;border:0!important;border-radius:0!important;filter:none!important;
  font-family:var(--en);font-weight:800;line-height:.8;letter-spacing:-.06em;white-space:nowrap;color:rgba(255,255,255,.03)!important;opacity:1!important;
  font-size:clamp(150px,21vw,330px);animation:wmDrift 36s ease-in-out infinite alternate}
#rf-core::after{content:'RMS';left:-1%;right:auto;bottom:-8%}
#rf-growth::after{content:'GROW';right:-1%;left:auto;bottom:-8%}
.rtl #rf-core::after{left:auto;right:-1%}
.rtl #rf-growth::after{right:auto;left:-1%}
#rf-core .fg,#rf-growth .fg{gap:14px!important;margin-top:34px!important}
#rf-core .fc,#rf-growth .fc{padding:24px 22px 22px!important;min-height:0!important;border-radius:20px!important}
#rf-core .fc-ico,#rf-growth .fc-ico{width:44px!important;height:44px!important;margin-bottom:12px!important}
#rf-core .fc-title,#rf-growth .fc-title{font-size:16.5px!important}
#rf-core .fc-desc,#rf-growth .fc-desc{font-size:13.5px!important;line-height:1.6!important}
#rf-core .fc::after,#rf-growth .fc::after{font-size:76px!important;bottom:-12px!important}
@media(max-width:900px){#rf-core,#rf-growth{padding:52px 20px!important}}

/* home hero: product image panel removed — single, wider text column over the photo */
.hero-grid{grid-template-columns:minmax(0,760px)!important}
.hero-panel{display:none!important}

/* ============================================================
   HOME HERO — centred composition (text only, over the photo)
   ============================================================ */
.hero,.rtl .hero{
  padding:72px 32px!important;justify-content:center;text-align:center;
  background:
    radial-gradient(ellipse 75% 85% at 50% 45%,rgba(10,4,20,.58) 0%,rgba(10,4,20,.80) 60%,rgba(7,3,13,.94) 100%),
    linear-gradient(180deg,rgba(7,3,13,.5) 0%,rgba(7,3,13,0) 30%,rgba(7,3,13,.75) 100%),
    url('images/hero-restaurant.jpg') center/cover no-repeat,
    #07030d!important}
.hero-grid{grid-template-columns:minmax(0,900px)!important;justify-content:center;margin:0 auto}
.hero-grid>div:first-child,.rtl .hero-grid>div:first-child{text-align:center!important;display:flex;flex-direction:column;align-items:center}

/* eyebrow: line on both sides */
.hero-badge{justify-content:center;gap:14px!important}
.hero-badge::after{content:'';display:inline-block;width:34px;height:1px;background:var(--p400);flex-shrink:0}

.hero h1{font-size:clamp(40px,min(6vw,10vh),88px)!important;margin-bottom:22px!important}
.hero-sub{max-width:640px!important;margin-left:auto!important;margin-right:auto!important;font-size:18px!important}
.hero-ctas{justify-content:center!important}
.hero-trust{justify-content:center;border-top:0;padding-top:0}
/* store badges row (inline-styled flex wrapper) */
.hero-grid>div:first-child>div[style*="display:flex"]{justify-content:center}
.hero-grid>div:first-child>div.hero-trust{margin-left:auto;margin-right:auto}
@media(max-width:768px){
  .hero,.rtl .hero{padding:56px 20px!important}
  .hero h1{font-size:clamp(34px,10vw,52px)!important}
  .hero-sub{font-size:16px!important}
}

/* ============================================================
   TRY-FREE PAGE (try-free.php / ar/try-free.php) — home theme
   photo hero · eyebrow + serif title · purple tick list · glass pills ·
   light form card · entrance animation
   ============================================================ */
.tf-hero{
  background:
    linear-gradient(90deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.84) 42%,rgba(26,11,46,.60) 72%,rgba(42,18,72,.48) 100%),
    linear-gradient(180deg,rgba(7,3,13,.45) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%),
    url('images/hero-restaurant.jpg') center/cover no-repeat,
    #07030d!important;
  min-height:calc(100vh - 76px)!important;padding:64px 32px!important}
.rtl .tf-hero{
  background:
    linear-gradient(270deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.84) 42%,rgba(26,11,46,.60) 72%,rgba(42,18,72,.48) 100%),
    linear-gradient(180deg,rgba(7,3,13,.45) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%),
    url('images/hero-restaurant.jpg') center/cover no-repeat,
    #07030d!important}
.tf-glow{display:none!important}
.tf-hero .tf-grid{max-width:1180px!important;grid-template-columns:1.05fr .95fr!important;gap:72px!important}

/* ---------- left column ---------- */
.tf-tag{background:transparent!important;border:0!important;padding:0!important;border-radius:0!important;gap:14px!important;margin-bottom:22px!important;
  color:rgba(255,255,255,.78)!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.3em!important}
.tf-tag::before{content:'';width:34px;height:1px;background:var(--p400);flex-shrink:0}
.tf-h1{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;font-size:clamp(34px,4.6vw,64px)!important;line-height:1.04!important;letter-spacing:-.035em!important;margin-bottom:20px!important}
.rtl .tf-h1{font-family:var(--ar)!important;font-weight:800!important;line-height:1.25!important;letter-spacing:0!important}
.tf-h1 span{background:none!important;-webkit-text-fill-color:var(--p400)!important;color:var(--p400)!important}
.tf-left>p{color:rgba(255,255,255,.7)!important;font-size:17px!important;max-width:520px}

/* checklist: purple ticks that pop one by one */
.tf-check{margin-bottom:13px!important}
.tf-check-ico{background:var(--p600)!important;border:1px solid rgba(170,109,216,.5)}
.tf-check span{color:rgba(255,255,255,.88)!important;font-size:15px!important}
.tf-check:hover .tf-check-ico{transform:scale(1.15) rotate(-8deg)}
.tf-check-ico{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}

/* glass pills */
.trust-pill{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important;color:rgba(255,255,255,.88)!important;
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s}
.trust-pill:hover{transform:translateY(-3px);border-color:rgba(170,109,216,.55)!important;background:rgba(144,71,200,.2)!important}
.trust-pill span[style*="f59e0b"]{color:#f5a623!important}
/* help links: outline pills -> white fill on hover */
.tf-helps a{background:transparent!important;border:1.5px solid rgba(255,255,255,.55)!important;color:#fff!important;transition:background-color .25s,color .25s,transform .25s}
.tf-helps a:hover{background:#fff!important;color:var(--p950)!important;transform:translateY(-2px)}

/* ---------- form card ---------- */
.tf-card{background:#fff!important;border-radius:28px!important;padding:40px 42px!important;position:relative;overflow:hidden}
.tf-card::before{content:'';position:absolute;top:0;left:20%;right:20%;height:3px;background:linear-gradient(90deg,transparent,var(--p500),transparent)}
.tf-card h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(22px,2.3vw,30px)!important;font-weight:700!important;letter-spacing:-.02em;color:var(--txt)!important}
.rtl .tf-card h2{font-family:var(--ar);font-weight:800!important;letter-spacing:0}
.tf-card .form-label{color:var(--mid)!important;font-weight:600!important;font-size:13.5px!important;transition:color .25s}
.tf-card .form-group:focus-within .form-label{color:var(--p600)!important}
.tf-card .form-input{background:#faf8fd!important;border:1px solid var(--border)!important;border-radius:14px!important;padding:13px 16px!important;
  transition:border-color .25s,background-color .25s,transform .3s cubic-bezier(.22,1,.36,1)!important}
.tf-card .form-input:hover{border-color:var(--p300)!important}
.tf-card .form-input:focus{background:#fff!important;border-color:var(--p600)!important;outline:2px solid rgba(117,51,175,.25)!important;outline-offset:0;transform:translateY(-2px)}
.tf-card .btn-submit{border-radius:999px!important;padding:15px 28px!important;font-size:15px!important;background:var(--p600)!important;border:1.5px solid var(--p600)!important;color:#fff!important}
.tf-card .btn-submit:hover{background:transparent!important;color:var(--p600)!important;transform:translateY(-2px)!important}

/* ---------- entrance animation (page load) ---------- */
.tf-left>*{animation:tfUp .9s cubic-bezier(.22,1,.36,1) backwards}
.tf-left>*:nth-child(1){animation-delay:.2s}
.tf-left>*:nth-child(2){animation-delay:.35s;animation-name:tfTitle;animation-duration:1.1s}
.tf-left>*:nth-child(3){animation-delay:.55s}
.tf-left>*:nth-child(4){animation-delay:.7s}
.tf-left>*:nth-child(5){animation-delay:.9s}
.tf-left>*:nth-child(6){animation-delay:1.05s}
.tf-check{animation:tfTick .6s cubic-bezier(.22,1,.36,1) backwards}
.tf-check:nth-child(1){animation-delay:.75s}.tf-check:nth-child(2){animation-delay:.85s}.tf-check:nth-child(3){animation-delay:.95s}
.tf-check:nth-child(4){animation-delay:1.05s}.tf-check:nth-child(5){animation-delay:1.15s}
.tf-card{animation:tfCard 1.1s .45s cubic-bezier(.22,1,.36,1) backwards}
.tf-card .form-group,.tf-card .btn-submit,.tf-card>p,.tf-card>h2{animation:tfUp .6s cubic-bezier(.22,1,.36,1) backwards}
.tf-card>h2{animation-delay:.8s}.tf-card>p{animation-delay:.88s}
.tf-card .form-group:nth-of-type(1){animation-delay:.95s}.tf-card .form-group:nth-of-type(2){animation-delay:1.02s}
.tf-card .form-group:nth-of-type(3){animation-delay:1.09s}.tf-card .form-group:nth-of-type(4){animation-delay:1.16s}
.tf-card .form-group:nth-of-type(5){animation-delay:1.23s}.tf-card .btn-submit{animation-delay:1.3s}
@keyframes tfUp{from{opacity:0;transform:translateY(26px)}to{opacity:1}}
@keyframes tfTitle{from{opacity:0;transform:translateY(40px);filter:blur(10px)}to{opacity:1;filter:blur(0)}}
@keyframes tfTick{from{opacity:0;transform:translateX(-24px)}to{opacity:1}}
.rtl .tf-check{animation-name:tfTickR}
@keyframes tfTickR{from{opacity:0;transform:translateX(24px)}to{opacity:1}}
@keyframes tfCard{from{opacity:0;transform:translateY(70px) scale(.95)}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.tf-left>*,.tf-check,.tf-card,.tf-card *{animation:none!important}}
@media(max-width:900px){
  .tf-hero{padding:48px 20px!important;min-height:0!important}
  .tf-hero .tf-grid{grid-template-columns:1fr!important;gap:36px!important}
  .tf-card{padding:28px 22px!important}
}

/* try-free: same 1280px container as every other section, balanced columns */
.tf-hero{padding:64px 32px!important}
.tf-hero .tf-grid{max-width:1280px!important;width:100%!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;gap:80px!important;align-items:center}
.tf-left{max-width:600px}
.tf-card{width:100%;max-width:520px;justify-self:end}
.rtl .tf-card{justify-self:start}
.tf-left>p{max-width:540px}
@media(max-width:1100px){.tf-hero .tf-grid{gap:48px!important}}
@media(max-width:900px){
  .tf-hero .tf-grid{grid-template-columns:1fr!important}
  .tf-left,.tf-card{max-width:none;justify-self:stretch}
}

/* header: same content width as every section (1280px content + 32px side padding) */
.nav-inner{max-width:1344px!important;padding:0 32px!important}
@media(max-width:1280px){.nav-inner{padding:0 24px!important}}
@media(max-width:768px){.nav-inner{padding:0 16px!important}}

/* ============================================================
   HOME HERO — left-aligned again, bigger text, aligned with the 1280px container
   ============================================================ */
.hero,.rtl .hero{
  padding:80px 32px!important;justify-content:center;text-align:left;
  background:
    linear-gradient(90deg,rgba(10,4,20,.94) 0%,rgba(10,4,20,.80) 38%,rgba(26,11,46,.45) 70%,rgba(42,18,72,.30) 100%),
    linear-gradient(180deg,rgba(7,3,13,.5) 0%,rgba(7,3,13,0) 30%,rgba(7,3,13,.7) 100%),
    url('images/hero-restaurant.jpg') center/cover no-repeat,
    #07030d!important}
.rtl .hero{
  text-align:right;
  background:
    linear-gradient(270deg,rgba(10,4,20,.94) 0%,rgba(10,4,20,.80) 38%,rgba(26,11,46,.45) 70%,rgba(42,18,72,.30) 100%),
    linear-gradient(180deg,rgba(7,3,13,.5) 0%,rgba(7,3,13,0) 30%,rgba(7,3,13,.7) 100%),
    url('images/hero-restaurant.jpg') center/cover no-repeat,
    #07030d!important}
.hero-grid{grid-template-columns:minmax(0,1fr)!important;max-width:1280px!important;width:100%;margin:0 auto!important;justify-content:start}
.hero-grid>div:first-child,.rtl .hero-grid>div:first-child{text-align:left!important;align-items:flex-start;max-width:860px}
.rtl .hero-grid>div:first-child{text-align:right!important;align-items:flex-start}

/* eyebrow back to a single leading line */
.hero-badge::after{display:none}
.hero-badge{justify-content:flex-start;font-size:13.5px!important;margin-bottom:26px!important}

/* bigger type */
.hero h1{font-size:clamp(46px,min(6.6vw,11vh),104px)!important;line-height:1!important;letter-spacing:-.04em!important;margin-bottom:26px!important}
.hero-sub{max-width:640px!important;margin-left:0!important;margin-right:0!important;font-size:clamp(17px,1.5vw,21px)!important;line-height:1.65!important;margin-bottom:34px!important}
.hero-ctas{justify-content:flex-start!important;margin-bottom:34px!important}
.btn-hero-p,.btn-hero-g{padding:15px 32px!important;font-size:16.5px!important}
.hero-trust{justify-content:flex-start}
.hero-trust p{font-size:14.5px!important}
.hero-trust p strong{font-size:15.5px}
.hero-grid>div:first-child>div[style*="display:flex"]{justify-content:flex-start}
@media(max-width:768px){
  .hero,.rtl .hero{padding:56px 20px!important}
  .hero h1{font-size:clamp(36px,11vw,56px)!important}
  .hero-sub{font-size:16px!important}
}

/* ============================================================
   HOME HERO — same composition as the inner-page heroes (RMS / POS):
   eyebrow, serif heading ~RMS size, paragraph, buttons, photo clearly visible
   ============================================================ */
.hero{padding:72px 48px 72px 110px!important}
.rtl .hero{padding:72px 110px 72px 48px!important}
.hero-grid{max-width:1440px!important}
.hero-grid>div:first-child,.rtl .hero-grid>div:first-child{max-width:780px}

.hero-badge{font-size:12px!important;letter-spacing:.3em!important;margin-bottom:22px!important}
.hero h1{font-size:clamp(38px,min(5vw,9vh),72px)!important;line-height:1.04!important;letter-spacing:-.035em!important;margin-bottom:22px!important}
.hero-sub{font-size:clamp(16px,1.35vw,19px)!important;line-height:1.7!important;max-width:600px!important;margin-bottom:30px!important}
.hero-ctas{margin-bottom:30px!important}
.btn-hero-p,.btn-hero-g{padding:13px 28px!important;font-size:15.5px!important}

/* lighter overlay — the restaurant photo reads clearly, like the RMS hero */
.hero{
  background:
    linear-gradient(90deg,rgba(10,4,20,.90) 0%,rgba(10,4,20,.72) 38%,rgba(26,11,46,.30) 72%,rgba(42,18,72,.18) 100%),
    linear-gradient(180deg,rgba(7,3,13,.45) 0%,rgba(7,3,13,0) 30%,rgba(7,3,13,.6) 100%),
    url('images/hero-restaurant.jpg') center/cover no-repeat,
    #07030d!important}
.rtl .hero{
  background:
    linear-gradient(270deg,rgba(10,4,20,.90) 0%,rgba(10,4,20,.72) 38%,rgba(26,11,46,.30) 72%,rgba(42,18,72,.18) 100%),
    linear-gradient(180deg,rgba(7,3,13,.45) 0%,rgba(7,3,13,0) 30%,rgba(7,3,13,.6) 100%),
    url('images/hero-restaurant.jpg') center/cover no-repeat,
    #07030d!important}
@media(max-width:1100px){.hero{padding:64px 32px 64px 56px!important}.rtl .hero{padding:64px 56px 64px 32px!important}}
@media(max-width:768px){.hero,.rtl .hero{padding:56px 20px!important}}

/* home hero heading on ONE line */
.hero h1 em{display:inline!important}
.hero-grid>div:first-child,.rtl .hero-grid>div:first-child{max-width:none}
.hero-badge,.hero-sub,.hero-ctas,.hero-trust{max-width:780px}
.hero h1{font-size:clamp(28px,min(3.7vw,8vh),60px)!important;letter-spacing:-.03em!important;line-height:1.1!important}
@media(min-width:1000px){.hero h1{white-space:nowrap}}
@media(max-width:999px){.hero h1{font-size:clamp(30px,6.4vw,48px)!important}}

/* home hero: rating row back on the left edge */
.hero-grid>div:first-child>div.hero-trust,.hero-trust{margin-left:0!important;margin-right:0!important;justify-content:flex-start!important}
.rtl .hero-trust{justify-content:flex-start!important}

/* "Grow Bigger." must be readable over the bright part of the photo:
   lighter purple + stronger overlay under the one-line heading */
.hero h1 em{color:#c49de8!important;-webkit-text-fill-color:#c49de8!important}
.hero{
  background:
    linear-gradient(90deg,rgba(10,4,20,.92) 0%,rgba(10,4,20,.84) 50%,rgba(14,6,28,.68) 80%,rgba(20,8,36,.55) 100%),
    linear-gradient(180deg,rgba(7,3,13,.5) 0%,rgba(7,3,13,.05) 30%,rgba(7,3,13,.65) 100%),
    url('images/hero-restaurant.jpg') center/cover no-repeat,
    #07030d!important}
.rtl .hero{
  background:
    linear-gradient(270deg,rgba(10,4,20,.92) 0%,rgba(10,4,20,.84) 50%,rgba(14,6,28,.68) 80%,rgba(20,8,36,.55) 100%),
    linear-gradient(180deg,rgba(7,3,13,.5) 0%,rgba(7,3,13,.05) 30%,rgba(7,3,13,.65) 100%),
    url('images/hero-restaurant.jpg') center/cover no-repeat,
    #07030d!important}

/* ============================================================
   HERO TYPOGRAPHY — ONE style for every page
   (home .hero, inner .page-hero, try-free .tf-hero)
   eyebrow · serif heading · accent colour · paragraph · buttons
   ============================================================ */
:root{
  --hero-h1:clamp(30px,min(3.9vw,8vh),60px);
  --hero-accent:#c49de8;
  --hero-text:rgba(255,255,255,.82);
}
/* eyebrow */
.hero-badge,.page-hero-tag,.tf-tag{
  font-family:var(--en)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.3em!important;text-transform:uppercase!important;
  color:rgba(255,255,255,.78)!important}
/* heading */
.hero h1,.page-hero h1,.tf-h1{
  font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;font-size:var(--hero-h1)!important;
  line-height:1.1!important;letter-spacing:-.03em!important;color:#fff!important}
.rtl .hero h1,.rtl .page-hero h1,.rtl .tf-h1{font-family:var(--ar)!important;font-weight:800!important;line-height:1.3!important;letter-spacing:0!important}
/* accent words */
.hero h1 em,.page-hero h1 em,.tf-h1 span,.tf-h1 em{
  font-style:normal!important;color:var(--hero-accent)!important;-webkit-text-fill-color:var(--hero-accent)!important;background:none!important}
/* paragraph */
.hero-sub,.page-hero p,.tf-left>p{
  font-family:var(--en);font-size:clamp(16px,1.35vw,19px)!important;line-height:1.7!important;color:var(--hero-text)!important;max-width:600px!important}
.rtl .hero-sub,.rtl .page-hero p,.rtl .tf-left>p{font-family:var(--ar)}
/* buttons */
.btn-hero-p,.btn-hero-w,.btn-hero-g,.btn-hero-o{padding:13px 28px!important;font-size:15.5px!important}
/* inner heroes: same column width as the home hero, left aligned */
.page-hero-inner>*{max-width:900px}
.page-hero-inner{margin-left:0!important}
@media(max-width:999px){:root{--hero-h1:clamp(30px,6.4vw,48px)}}

/* same left edge for the home hero and the inner-page heroes */
.hero-grid{margin-left:0!important;margin-right:auto!important}
.rtl .hero-grid{margin-right:0!important;margin-left:auto!important}
.rtl .page-hero-inner{margin-left:auto!important;margin-right:0!important}

/* hero heading accent: back to the deeper brand purple */
:root{--hero-accent:#aa6dd8}
.hero h1 em,.page-hero h1 em,.tf-h1 span,.tf-h1 em{color:#aa6dd8!important;-webkit-text-fill-color:#aa6dd8!important}

/* ============================================================
   ABOUT PAGE (about.php / ar/about.php) — home theme
   dark hero · light stat cards · dark story · light journey
   (timeline + value cards) · scroll reveal
   ============================================================ */

/* ---------- hero ---------- */
.page-hero.hero-about{
  background:
    linear-gradient(90deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.86) 40%,rgba(26,11,46,.60) 70%,rgba(42,18,72,.48) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%),
    url('images/hero-about.jpg') center/cover no-repeat,
    #07030d!important}
.rtl .page-hero.hero-about{
  background:
    linear-gradient(270deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.86) 40%,rgba(26,11,46,.60) 70%,rgba(42,18,72,.48) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%),
    url('images/hero-about.jpg') center/cover no-repeat,
    #07030d!important}

/* ---------- stats (light cards) ---------- */
.about-stat-bar{background:linear-gradient(180deg,#faf7fd,#f3ebfa)!important;padding:64px 32px 44px!important}
.about-stat-grid{gap:16px!important;background:transparent!important;border-radius:0!important;overflow:visible!important}
.about-stat-box{background:#fff!important;border:1px solid var(--border);border-radius:22px;padding:30px 20px!important;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease}
.about-stat-box::before{content:'';position:absolute;top:0;left:22%;right:22%;height:2px;background:linear-gradient(90deg,transparent,var(--p500),transparent);opacity:.8}
.about-stat-box:hover{transform:translateY(-6px);border-color:var(--p300)}
.about-stat-num{font-size:clamp(34px,3.4vw,48px)!important;letter-spacing:-.04em!important;color:var(--p700)!important}
.about-stat-num span{color:var(--p500)!important}
.about-stat-desc{font-size:13px!important;font-weight:600!important;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)!important}

/* ---------- our story (dark) ---------- */
#ab-story{position:relative;overflow:hidden;background:#07030d!important;padding:88px 32px!important}
#ab-story::before{content:'STORY';position:absolute;left:-1%;bottom:-14%;pointer-events:none;font-family:var(--en);font-weight:800;line-height:.8;letter-spacing:-.06em;
  font-size:clamp(150px,22vw,340px);color:rgba(255,255,255,.03);white-space:nowrap;animation:wmDrift 36s ease-in-out infinite alternate}
.rtl #ab-story::before{left:auto;right:-1%}
#ab-story .si{position:relative;z-index:1}
#ab-story .g2{gap:72px!important;align-items:center}
#ab-story .sec-tag,#ab-journey .sec-tag{display:inline-flex!important;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin:0 0 14px!important;
  font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
#ab-story .sec-tag::before,#ab-journey .sec-tag::before{content:'';width:34px;height:1px}
#ab-story .sec-tag{color:var(--p400)!important}
#ab-story .sec-tag::before{background:var(--p400)}
#ab-journey .sec-tag{color:var(--p600)!important}
#ab-journey .sec-tag::before{background:var(--p600)}
#ab-story .sec-title,#ab-journey .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important}
.rtl #ab-story .sec-title,.rtl #ab-journey .sec-title{font-family:var(--ar)!important;font-weight:800!important}
#ab-story .sec-title{color:#fff!important}
#ab-story .sec-title .acc{color:var(--p400)}
#ab-journey .sec-title .acc{color:var(--p600)}
#ab-story p{color:rgba(255,255,255,.68)!important;font-size:16px!important;line-height:1.8!important}
/* image frame */
#ab-story .g2>div:last-child{border-radius:28px!important;border:1px solid rgba(255,255,255,.12)!important;background:#120a1e!important;aspect-ratio:5/4!important;position:relative;overflow:hidden}
#ab-story .g2>div:last-child::before,#ab-story .g2>div:last-child::after{content:'';position:absolute;width:38px;height:38px;border:2px solid var(--p400);z-index:3;pointer-events:none}
#ab-story .g2>div:last-child::before{top:14px;left:14px;border-right:0;border-bottom:0;border-top-left-radius:10px}
#ab-story .g2>div:last-child::after{bottom:14px;right:14px;border-left:0;border-top:0;border-bottom-right-radius:10px}
#ab-story .g2>div:last-child img{object-fit:cover!important;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
#ab-story .g2>div:last-child:hover img{transform:scale(1.06)}

/* ---------- our journey (light) ---------- */
#ab-journey{background:linear-gradient(180deg,#f3ebfa,#faf7fd)!important;padding:88px 32px!important}
#ab-journey .g2-top{gap:72px!important}
#ab-journey .sec-sub{color:#6b6179!important;margin-bottom:36px!important}
/* timeline */
.timeline{padding-left:34px!important}
.timeline::before{background:linear-gradient(180deg,var(--p600),var(--p300))!important;transform-origin:top;width:2px!important}
.tl-item{padding:0 0 28px 34px!important}
.tl-dot{left:-7px!important;top:20px!important;width:16px!important;height:16px!important;background:var(--p600)!important;border:3px solid #f6f0fc!important;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.tl-item:hover .tl-dot{transform:scale(1.35)}
.tl-item>.tl-year,.tl-item>.tl-title,.tl-item>.tl-desc{position:relative;z-index:1}
.tl-item{background:transparent}
.tl-year{display:inline-block;background:var(--p600);color:#fff!important;font-size:11.5px!important;font-weight:700;letter-spacing:.1em;padding:3px 12px;border-radius:999px;margin-bottom:8px!important}
.tl-title{font-family:'Playfair Display',Georgia,serif;font-size:19px!important;font-weight:700!important;letter-spacing:-.01em}
.rtl .tl-title{font-family:var(--ar);font-weight:800!important}
.tl-desc{color:#6b6179!important}
/* value cards */
#ab-journey .fg{gap:14px!important}
#ab-journey .fc{background:#fff!important;border:1px solid var(--border)!important;border-radius:20px!important;padding:24px 22px!important;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease!important}
#ab-journey .fc::before{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--p500),transparent);transform:none!important;opacity:.8}
#ab-journey .fc:hover{transform:translateY(-6px)!important;border-color:var(--p300)!important}
#ab-journey .fc-ico{border-radius:14px!important;background:var(--p50)!important;border:1px solid var(--p100);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
#ab-journey .fc:hover .fc-ico{transform:rotate(-8deg) scale(1.1)}

/* footer on this page: the text logo duplicates the image logo */
.foot-brand img+.foot-logo-text{display:none}

/* ---------- reveal ---------- */
.js-ab .ab-rv:not(.ab-in){opacity:0}
.js-ab .about-stat-box.ab-rv:not(.ab-in){transform:translateY(50px) scale(.94)}
.js-ab #ab-story .ab-rv:not(.ab-in){transform:translateX(var(--sa-dx,-70px))}
.js-ab #ab-story .g2>div:last-child.ab-rv:not(.ab-in){transform:translateX(calc(var(--sa-dx,-70px)*-1)) scale(.95)}
.js-ab #ab-journey .sec-tag.ab-rv:not(.ab-in),.js-ab #ab-journey .sec-title.ab-rv:not(.ab-in),.js-ab #ab-journey .sec-sub.ab-rv:not(.ab-in){transform:translateX(var(--sa-dx,-70px))}
.js-ab #ab-journey .tl-item.ab-rv:not(.ab-in){transform:translateX(var(--sa-dx,-70px))}
.js-ab #ab-journey .fc.ab-rv:not(.ab-in){transform:translateY(50px) scale(.95)}
.js-ab .about-stat-box.ab-in{animation:abPop .85s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*110ms)}
.js-ab #ab-story .ab-in{animation:abSlide .95s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms)}
.js-ab #ab-story .g2>div:last-child.ab-in{animation-name:abSlideR;animation-delay:.2s}
.js-ab #ab-journey .sec-tag.ab-in,.js-ab #ab-journey .sec-title.ab-in,.js-ab #ab-journey .sec-sub.ab-in,.js-ab #ab-journey .tl-item.ab-in{animation:abSlide .85s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*90ms)}
.js-ab #ab-journey .tl-item.ab-in .tl-dot{animation:abDot .6s calc(var(--i,0)*90ms + .3s) cubic-bezier(.34,1.56,.64,1) backwards}
.js-ab #ab-journey .fc.ab-in{animation:abPop .85s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*100ms + .15s)}
.js-ab #ab-journey .timeline.ab-in::before{animation:abLine 1.6s .2s cubic-bezier(.22,1,.36,1) backwards}
@keyframes abPop{from{opacity:0;transform:translateY(50px) scale(.95)}to{opacity:1}}
@keyframes abSlide{from{opacity:0;transform:translateX(var(--sa-dx,-70px))}to{opacity:1}}
@keyframes abSlideR{from{opacity:0;transform:translateX(calc(var(--sa-dx,-70px)*-1)) scale(.95)}to{opacity:1}}
@keyframes abDot{from{transform:scale(0)}to{transform:none}}
@keyframes abLine{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){
  .js-ab .ab-rv{opacity:1!important;transform:none!important}
  .js-ab .ab-in,.js-ab .ab-in *{animation:none!important}
  #ab-story::before{animation:none}
}
@media(max-width:900px){
  .about-stat-bar{padding:44px 20px 28px!important}
  #ab-story,#ab-journey{padding:52px 20px!important}
  #ab-story .g2{gap:36px!important}
  #ab-journey .g2-top{gap:48px!important}
}

/* ============================================================
   BLOG (blog.php, blog-post.php + ar/) — home theme
   dark hero · light list (filter chips + image cards) · article reader ·
   dark "keep reading" · reading-progress bar · scroll reveal
   ============================================================ */

/* ---------- list ---------- */
#blog-list{position:relative;background:linear-gradient(180deg,#faf7fd,#f3ebfa)!important;padding:72px 32px 96px!important}
.blog-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.bf{font-family:inherit;font-size:14px;font-weight:600;color:var(--mid);background:#fff;border:1px solid var(--border);border-radius:999px;padding:9px 20px;cursor:pointer;
  transition:background-color .25s,color .25s,border-color .25s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.bf:hover{border-color:var(--p300);color:var(--p700);transform:translateY(-2px)}
.bf.on{background:var(--p600);border-color:var(--p600);color:#fff}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:24px;overflow:hidden;position:relative;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,opacity .35s ease}
.blog-card:hover{transform:translateY(-8px);border-color:var(--p300)}
.blog-card-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--p50)}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.blog-card:hover .blog-card-img img{transform:scale(1.07)}
.blog-card-cat{position:absolute;top:14px;left:14px;background:var(--p600);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;border-radius:999px}
.rtl .blog-card-cat{left:auto;right:14px}
.blog-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.blog-meta,.post-meta{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--mute);letter-spacing:.02em}
.blog-meta i,.post-meta i{width:4px;height:4px;border-radius:50%;background:var(--p400);display:inline-block}
.blog-card h3{font-family:'Playfair Display',Georgia,serif;font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--txt);margin:12px 0 10px;transition:color .25s}
.rtl .blog-card h3{font-family:var(--ar);font-weight:800;letter-spacing:0;line-height:1.5}
.blog-card:hover h3{color:var(--p700)}
.blog-card p{font-size:14.5px;line-height:1.7;color:#6b6179;margin-bottom:18px}
.blog-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--p600)}
.blog-more b{display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.blog-card:hover .blog-more b{transform:translateX(6px)}
.rtl .blog-card:hover .blog-more b{transform:translateX(-6px)}
.blog-card.is-hidden{display:none}
.blog-card.is-showing,.js-bl .blog-card.is-showing{animation:blShow .5s cubic-bezier(.22,1,.36,1) backwards!important}
@keyframes blShow{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1}}

/* ---------- post hero ---------- */
.page-hero.hero-post{position:relative;overflow:hidden;background:#07030d!important;padding-top:96px!important;padding-bottom:84px!important}
.hero-post-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero.hero-post::before{display:block!important;content:''!important;position:absolute;inset:0!important;left:0!important;width:auto!important;height:auto!important;transform:none!important;z-index:1;
  background:linear-gradient(90deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.86) 45%,rgba(26,11,46,.62) 75%,rgba(42,18,72,.5) 100%),linear-gradient(180deg,rgba(7,3,13,.45) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%)!important}
.rtl .page-hero.hero-post::before{background:linear-gradient(270deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.86) 45%,rgba(26,11,46,.62) 75%,rgba(42,18,72,.5) 100%),linear-gradient(180deg,rgba(7,3,13,.45) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%)!important}
.hero-post .page-hero-inner{position:relative;z-index:2}
.hero-post h1{font-size:clamp(26px,3.4vw,46px)!important;max-width:880px;line-height:1.15!important}
.post-meta{margin-top:20px;color:rgba(255,255,255,.72)!important}

/* ---------- article ---------- */
#blog-article{background:linear-gradient(180deg,#fff,#faf7fd)!important;padding:72px 32px 56px!important}
.post-body{max-width:760px;margin:0 auto}
.post-body p{font-size:17.5px;line-height:1.9;color:#40354f;margin-bottom:22px}
.post-body h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--txt);margin:46px 0 16px;
  padding-left:18px;position:relative}
.rtl .post-body h2{font-family:var(--ar);font-weight:800;letter-spacing:0;padding-left:0;padding-right:18px}
.post-body h2::before{content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--p500),var(--p300))}
.rtl .post-body h2::before{left:auto;right:0}
.post-body ul{list-style:none;margin:0 0 26px;display:flex;flex-direction:column;gap:12px}
.post-body li{position:relative;padding-left:34px;font-size:16.5px;line-height:1.75;color:#40354f}
.rtl .post-body li{padding-left:0;padding-right:34px}
.post-body li::before{content:'✓';position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--p50);border:1px solid var(--p100);color:var(--p600);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.rtl .post-body li::before{left:auto;right:0}
.post-body blockquote{margin:34px 0;padding:26px 30px;background:linear-gradient(135deg,var(--p50),#fff);border:1px solid var(--p100);border-left:4px solid var(--p600);border-radius:20px;
  font-family:'Playfair Display',Georgia,serif;font-size:clamp(19px,2vw,24px);font-style:italic;line-height:1.5;color:var(--p700)}
.rtl .post-body blockquote{border-left:1px solid var(--p100);border-right:4px solid var(--p600);font-family:var(--ar);font-style:normal;font-weight:700}
.post-author{display:flex;align-items:center;gap:14px;margin-top:48px;padding:20px 24px;background:#fff;border:1px solid var(--border);border-radius:20px}
.post-author-ico{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--p500),var(--p700));color:#fff;font-family:'Playfair Display',Georgia,serif;font-size:22px;font-weight:700;font-style:italic;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.post-author-by{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--p600)}
.post-author-name{font-size:16px;font-weight:700;color:var(--txt)}
.post-back{margin-left:auto;font-size:14px;font-weight:700;color:var(--p600);border:1.5px solid var(--p600);border-radius:999px;padding:9px 20px;
  transition:background-color .25s,color .25s,transform .25s}
.rtl .post-back{margin-left:0;margin-right:auto}
.post-back:hover{background:var(--p600);color:#fff;transform:translateY(-2px)}

/* ---------- keep reading (dark) ---------- */
#blog-related{position:relative;overflow:hidden;background:#07030d!important;padding:80px 32px!important}
#blog-related::before{content:'BLOG';position:absolute;right:-1%;bottom:-16%;pointer-events:none;font-family:var(--en);font-weight:800;line-height:.8;letter-spacing:-.06em;
  font-size:clamp(150px,22vw,340px);color:rgba(255,255,255,.03);white-space:nowrap;animation:wmDrift 36s ease-in-out infinite alternate}
.rtl #blog-related::before{right:auto;left:-1%}
#blog-related .si{position:relative;z-index:1}
#blog-related .sec-tag{display:inline-flex!important;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;margin:0 0 26px!important;
  color:var(--p400)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
#blog-related .sec-tag::before{content:'';width:34px;height:1px;background:var(--p400)}
#blog-related .blog-card{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border-color:rgba(255,255,255,.1)}
#blog-related .blog-card:hover{border-color:rgba(170,109,216,.55);background:linear-gradient(180deg,rgba(144,71,200,.16),rgba(255,255,255,.03))}
#blog-related .blog-card h3{color:#fff}
#blog-related .blog-card:hover h3{color:#fff}
#blog-related .blog-meta{color:rgba(255,255,255,.6)}
#blog-related .blog-more{color:var(--p300)}

/* ---------- reading progress ---------- */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:999;background:transparent;pointer-events:none}
.read-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--p500),var(--p300));transform-origin:left;transform:scaleX(0)}
.rtl .read-progress i{transform-origin:right}

/* ---------- reveal (hidden only until .bl-in is added) ---------- */
.js-bl .bl-rv:not(.bl-in){opacity:0;transform:translateY(46px) scale(.96)}
.js-bl .bl-rv.bl-in{animation:blPop .85s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*110ms)}
.js-bl .post-body>.bl-rv:not(.bl-in){transform:translateY(26px) scale(1)}
.js-bl .post-body>.bl-rv.bl-in{animation:blUp .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:0s}
.js-bl .blog-filters.bl-rv:not(.bl-in){transform:translateY(20px) scale(1)}
@keyframes blPop{from{opacity:0;transform:translateY(46px) scale(.96)}to{opacity:1}}
@keyframes blUp{from{opacity:0;transform:translateY(26px)}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .js-bl .bl-rv{opacity:1!important;transform:none!important}
  .js-bl .bl-in,.blog-card.is-showing{animation:none!important}
  #blog-related::before{animation:none}
}
@media(max-width:1024px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  #blog-list{padding:48px 20px 64px!important}
  .blog-grid{grid-template-columns:1fr;gap:18px}
  #blog-article{padding:48px 20px 36px!important}
  #blog-related{padding:56px 20px!important}
  .post-body p{font-size:16.5px}
  .post-author{flex-wrap:wrap}
  .post-back{margin:6px 0 0!important}
  .page-hero.hero-post{padding-top:64px!important;padding-bottom:56px!important}
}

/* ============================================================
   SAUDI-STYLE HERO ARTWORK for POS / Pricing / Contact
   (Islamic geometric lattice + Riyadh-style skyline + a page motif; images/hero-*.svg)
   light fade only on the text side, the artwork stays visible on the other side
   ============================================================ */
.page-hero.hero-pos,.page-hero.hero-prices,.page-hero.hero-contact{
  background:
    linear-gradient(90deg,rgba(10,4,20,.88) 0%,rgba(10,4,20,.55) 42%,rgba(10,4,20,0) 75%),
    var(--hero-art) center/cover no-repeat,
    #07030d!important}
.rtl .page-hero.hero-pos,.rtl .page-hero.hero-prices,.rtl .page-hero.hero-contact{
  background:
    linear-gradient(270deg,rgba(10,4,20,.88) 0%,rgba(10,4,20,.55) 42%,rgba(10,4,20,0) 75%),
    var(--hero-art) center/cover no-repeat,
    #07030d!important}
.page-hero.hero-pos{--hero-art:url('images/hero-pos.svg')}
.page-hero.hero-prices{--hero-art:url('images/hero-prices.svg')}
.page-hero.hero-contact{--hero-art:url('images/hero-contact.svg')}
/* Arabic pages: mirror the artwork so the skyline sits opposite the text */
.rtl .page-hero.hero-pos,.rtl .page-hero.hero-prices,.rtl .page-hero.hero-contact{background-blend-mode:normal}

/* artwork anchored to the bottom so the skyline + motif are never cropped; accent words inline */
.page-hero.hero-pos,.page-hero.hero-prices,.page-hero.hero-contact{background-position:center,center bottom,center!important}
.rtl .page-hero.hero-pos,.rtl .page-hero.hero-prices,.rtl .page-hero.hero-contact{background-position:center,center bottom,center!important}
.page-hero h1 em{display:inline!important}

/* Arabic pages use the mirrored artwork */
.rtl .page-hero.hero-pos{--hero-art:url('images/hero-pos-rtl.svg')}
.rtl .page-hero.hero-prices{--hero-art:url('images/hero-prices-rtl.svg')}
.rtl .page-hero.hero-contact{--hero-art:url('images/hero-contact-rtl.svg')}

/* Arabic heroes: paragraph hugs the right edge like the heading and the buttons */
.rtl .page-hero p{margin-right:0!important;margin-left:auto!important;text-align:right!important}
.rtl .hero-sub{margin-right:0!important;margin-left:auto!important;text-align:right!important}

/* ============================================================
   SAUDI-STYLE HERO ARTWORK — RMS · About · Referral · All Features · Blog · Try Free
   (Home keeps its photo, Pricing / POS / Contact already use the artwork)
   ============================================================ */
.page-hero.hero-rms,.page-hero.hero-about,.page-hero.hero-referral,.page-hero.hero-all,.page-hero.hero-blog{
  background:
    linear-gradient(90deg,rgba(10,4,20,.88) 0%,rgba(10,4,20,.55) 42%,rgba(10,4,20,0) 75%),
    var(--hero-art) center bottom/cover no-repeat,
    #07030d!important}
.rtl .page-hero.hero-rms,.rtl .page-hero.hero-about,.rtl .page-hero.hero-referral,.rtl .page-hero.hero-all,.rtl .page-hero.hero-blog{
  background:
    linear-gradient(270deg,rgba(10,4,20,.88) 0%,rgba(10,4,20,.55) 42%,rgba(10,4,20,0) 75%),
    var(--hero-art) center bottom/cover no-repeat,
    #07030d!important}
.page-hero.hero-rms{--hero-art:url('images/hero-rms.svg')}
.page-hero.hero-about{--hero-art:url('images/hero-about.svg')}
.page-hero.hero-referral{--hero-art:url('images/hero-referral.svg')}
.page-hero.hero-all{--hero-art:url('images/hero-all.svg')}
.page-hero.hero-blog{--hero-art:url('images/hero-blog.svg')}
.rtl .page-hero.hero-rms{--hero-art:url('images/hero-rms-rtl.svg')}
.rtl .page-hero.hero-about{--hero-art:url('images/hero-about-rtl.svg')}
.rtl .page-hero.hero-referral{--hero-art:url('images/hero-referral-rtl.svg')}
.rtl .page-hero.hero-all{--hero-art:url('images/hero-all-rtl.svg')}
.rtl .page-hero.hero-blog{--hero-art:url('images/hero-blog-rtl.svg')}

/* Try Free: a tall hero, so the lattice is tiled and the skyline strip sits at the bottom */
.tf-hero{
  background:
    linear-gradient(90deg,rgba(10,4,20,.82) 0%,rgba(10,4,20,.45) 50%,rgba(10,4,20,0) 80%),
    url('images/hero-tryfree-art.svg') center bottom/100% auto no-repeat,
    url('images/saudi-lattice.svg') 0 0/120px 120px repeat,
    linear-gradient(135deg,#07030d 0%,#1a0b2e 55%,#2a1248 100%)!important}
.rtl .tf-hero{
  background:
    linear-gradient(270deg,rgba(10,4,20,.82) 0%,rgba(10,4,20,.45) 50%,rgba(10,4,20,0) 80%),
    url('images/hero-tryfree-art-rtl.svg') center bottom/100% auto no-repeat,
    url('images/saudi-lattice.svg') 0 0/120px 120px repeat,
    linear-gradient(225deg,#07030d 0%,#1a0b2e 55%,#2a1248 100%)!important}

/* ============================================================
   FINAL HERO PHOTOS (Saudi / Gulf context) — one distinct photo per page
   Home keeps its restaurant photo · Pricing keeps its artwork
   RMS: Al Khobar cafe · POS: checkout · Contact/Referral: handshake in thobe
   About: Kingdom Centre, Riyadh · All Features: Al-Balad (Jeddah) roshan
   Blog: Arabic coffee · Try Free: Jeddah barista
   ============================================================ */
.page-hero.hero-rms,.page-hero.hero-pos,.page-hero.hero-contact,.page-hero.hero-referral,.page-hero.hero-about,.page-hero.hero-all,.page-hero.hero-blog{
  background:
    linear-gradient(90deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.84) 40%,rgba(26,11,46,.58) 70%,rgba(42,18,72,.46) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.65) 100%),
    var(--hero-photo) center var(--hero-y,50%)/cover no-repeat,
    #07030d!important}
.rtl .page-hero.hero-rms,.rtl .page-hero.hero-pos,.rtl .page-hero.hero-contact,.rtl .page-hero.hero-referral,.rtl .page-hero.hero-about,.rtl .page-hero.hero-all,.rtl .page-hero.hero-blog{
  background:
    linear-gradient(270deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.84) 40%,rgba(26,11,46,.58) 70%,rgba(42,18,72,.46) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.65) 100%),
    var(--hero-photo) center var(--hero-y,50%)/cover no-repeat,
    #07030d!important}
.page-hero.hero-rms{--hero-photo:url('images/hero-rms.jpg');--hero-y:54%}
.page-hero.hero-pos{--hero-photo:url('images/hero-pos.jpg');--hero-y:38%}
.page-hero.hero-contact{--hero-photo:url('images/hero-contact.jpg');--hero-y:50%}
.page-hero.hero-referral{--hero-photo:url('images/hero-referral.jpg');--hero-y:62%}
.page-hero.hero-about{--hero-photo:url('images/hero-about.jpg');--hero-y:34%}
.page-hero.hero-all{--hero-photo:url('images/hero-all.jpg');--hero-y:45%}
.page-hero.hero-blog{--hero-photo:url('images/hero-blog.jpg');--hero-y:50%}
/* Try Free (tall hero) */
.tf-hero{
  background:
    linear-gradient(90deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.84) 42%,rgba(26,11,46,.60) 72%,rgba(42,18,72,.48) 100%),
    linear-gradient(180deg,rgba(7,3,13,.45) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%),
    url('images/hero-tryfree.jpg') center 62%/cover no-repeat,
    #07030d!important}
.rtl .tf-hero{
  background:
    linear-gradient(270deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.84) 42%,rgba(26,11,46,.60) 72%,rgba(42,18,72,.48) 100%),
    linear-gradient(180deg,rgba(7,3,13,.45) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.7) 100%),
    url('images/hero-tryfree.jpg') center 62%/cover no-repeat,
    #07030d!important}

/* ============================================================
   LEGAL PAGES (privacy.php, terms.php + ar/) — home theme
   lattice hero · sticky table of contents · numbered sections
   ============================================================ */
.page-hero.hero-legal{
  background:
    linear-gradient(90deg,rgba(10,4,20,.92) 0%,rgba(10,4,20,.6) 55%,rgba(10,4,20,.2) 100%),
    url('images/saudi-lattice.svg') 0 0/120px 120px repeat,
    linear-gradient(135deg,#07030d 0%,#1a0b2e 55%,#2a1248 100%)!important;padding-bottom:64px!important}
.rtl .page-hero.hero-legal{
  background:
    linear-gradient(270deg,rgba(10,4,20,.92) 0%,rgba(10,4,20,.6) 55%,rgba(10,4,20,.2) 100%),
    url('images/saudi-lattice.svg') 0 0/120px 120px repeat,
    linear-gradient(225deg,#07030d 0%,#1a0b2e 55%,#2a1248 100%)!important}
.legal-updated{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:13px;font-weight:600;color:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 16px}
.legal-updated::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--p400)}

#legal{background:linear-gradient(180deg,#fff,#faf7fd)!important;padding:64px 32px 88px!important}
.legal-grid{display:grid;grid-template-columns:290px minmax(0,1fr);gap:64px;align-items:start}

/* table of contents */
.legal-toc{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;background:#fff;border:1px solid var(--border);border-radius:22px;padding:22px 18px;scrollbar-width:thin}
.legal-toc-title{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--p600);margin:0 8px 12px}
.legal-toc nav{display:flex;flex-direction:column;gap:2px}
.legal-toc a{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:12px;font-size:13.5px;font-weight:600;line-height:1.4;color:var(--mid);
  transition:background-color .25s,color .25s,transform .3s cubic-bezier(.22,1,.36,1)}
.legal-toc a span{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--p400);min-width:20px}
.legal-toc a:hover{background:var(--p50);color:var(--p700);transform:translateX(4px)}
.rtl .legal-toc a:hover{transform:translateX(-4px)}
.legal-toc a.on{background:var(--p600);color:#fff}
.legal-toc a.on span{color:rgba(255,255,255,.75)}

/* article */
.legal-body{max-width:none;margin:0}
.legal-sec{padding-bottom:10px;margin-bottom:30px;border-bottom:1px solid var(--border);scroll-margin-top:96px}
.legal-sec:last-of-type{border-bottom:0}
.legal-sec h2{display:flex;align-items:center;gap:14px;margin:0 0 16px!important;padding-left:0!important}
.legal-sec h2::before{display:none!important}
.legal-num{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:12px;background:var(--p50);border:1px solid var(--p100);
  color:var(--p600);font-family:var(--en);font-size:14px;font-weight:800;letter-spacing:.02em;flex-shrink:0}
.legal-body p{font-size:16.5px;line-height:1.85}
.legal-also{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:34px;padding:20px 24px;border-radius:20px;background:linear-gradient(135deg,var(--p50),#fff);
  border:1px solid var(--p100);transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s}
.legal-also span{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--p600)}
.legal-also b{font-family:'Playfair Display',Georgia,serif;font-size:19px;color:var(--txt)}
.rtl .legal-also b{font-family:var(--ar)}
.legal-also i{font-style:normal;display:inline-block;transition:transform .3s}
.legal-also:hover{transform:translateY(-4px);border-color:var(--p300)}
.legal-also:hover i{transform:translateX(5px)}
.rtl .legal-also:hover i{transform:translateX(-5px)}

/* reveal */
.js-lg .legal-sec.lg-rv:not(.lg-in){opacity:0;transform:translateY(30px)}
.js-lg .legal-sec.lg-rv.lg-in{animation:lgUp .75s cubic-bezier(.22,1,.36,1) backwards}
@keyframes lgUp{from{opacity:0;transform:translateY(30px)}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.js-lg .legal-sec.lg-rv{opacity:1!important;transform:none!important}.js-lg .lg-in{animation:none!important}}

@media(max-width:960px){
  #legal{padding:44px 20px 60px!important}
  .legal-grid{grid-template-columns:1fr;gap:28px}
  .legal-toc{position:static;max-height:none}
  .legal-toc nav{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
}
@media(max-width:560px){.legal-toc nav{grid-template-columns:1fr}}

/* ============================================================
   LEGAL HEROES — Privacy: Najdi mud-brick fort tower · Terms: Islamic geometric panel
   ============================================================ */
.page-hero.hero-legal.hero-privacy,.page-hero.hero-legal.hero-terms{
  background:
    linear-gradient(90deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.84) 40%,rgba(26,11,46,.58) 70%,rgba(42,18,72,.46) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.65) 100%),
    var(--hero-photo) center var(--hero-y,50%)/cover no-repeat,
    #07030d!important}
.rtl .page-hero.hero-legal.hero-privacy,.rtl .page-hero.hero-legal.hero-terms{
  background:
    linear-gradient(270deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.84) 40%,rgba(26,11,46,.58) 70%,rgba(42,18,72,.46) 100%),
    linear-gradient(180deg,rgba(7,3,13,.4) 0%,rgba(7,3,13,0) 35%,rgba(7,3,13,.65) 100%),
    var(--hero-photo) center var(--hero-y,50%)/cover no-repeat,
    #07030d!important}
.page-hero.hero-privacy{--hero-photo:url('images/hero-privacy.jpg');--hero-y:56%}
.page-hero.hero-terms{--hero-photo:url('images/hero-terms.jpg');--hero-y:45%}

/* feature cards that are deep-linked from the menu / footer (rms-features.php#f-table …) */
.fc[id]{scroll-margin-top:110px}
.fc:target{outline:2px solid var(--p400);outline-offset:6px;animation:fcTarget 2.6s ease .4s forwards}
@keyframes fcTarget{0%,55%{outline-color:var(--p400)}100%{outline-color:transparent}}
@media(prefers-reduced-motion:reduce){.fc:target{animation:none}}

/* ============================================================
   ALL FEATURES PAGE (all-features.php / ar/all-features.php) — home theme
   photo hero · filter chips · alternating white / dark category panels ·
   dark help section · filter + scroll animation
   ============================================================ */
#af-list{background:linear-gradient(180deg,#faf7fd,#f3ebfa)!important;padding:64px 32px 96px!important}

/* filter chips */
.feat-filter-bar{background:transparent!important;padding:0!important;border-radius:0!important;width:auto!important;gap:10px!important;margin-bottom:34px!important}
.ff-btn{font-size:14px!important;font-weight:600!important;color:var(--mid)!important;background:#fff!important;border:1px solid var(--border)!important;border-radius:999px!important;padding:9px 22px!important;
  transition:background-color .25s,color .25s,border-color .25s,transform .3s cubic-bezier(.34,1.56,.64,1)!important}
.ff-btn:hover{border-color:var(--p300)!important;color:var(--p700)!important;transform:translateY(-2px)}
.ff-btn.on{background:var(--p600)!important;border-color:var(--p600)!important;color:#fff!important}

/* category panels */
.feat-cat-block{position:relative;border-radius:32px;padding:40px 40px 44px;margin-top:0!important;margin-bottom:28px;background:#fff;border:1px solid var(--border);overflow:hidden}
.feat-cat-block.vis{animation:afShow .6s cubic-bezier(.22,1,.36,1) backwards}
@keyframes afShow{from{opacity:0;transform:translateY(34px) scale(.98)}to{opacity:1}}
.feat-cat-block::before{content:'';position:absolute;top:0;left:18%;right:18%;height:3px;background:linear-gradient(90deg,transparent,var(--p500),transparent)}
.feat-section-head{border-bottom:1px solid var(--border)!important;padding-bottom:22px!important;margin-bottom:28px!important;gap:18px!important}
.feat-section-ico{width:54px!important;height:54px!important;border-radius:16px!important;background:var(--p50)!important;border:1px solid var(--p100);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.feat-cat-block:hover .feat-section-ico{transform:rotate(-8deg) scale(1.08)}
.feat-cat-block .sec-tag{display:inline-flex!important;align-items:center;gap:12px;background:transparent!important;border:0!important;padding:0!important;color:var(--p600)!important;
  font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.28em!important}
.feat-cat-block .sec-tag::before{content:'';width:28px;height:1px;background:var(--p600)}
.feat-cat-block .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:var(--txt)!important}
.rtl .feat-cat-block .sec-title{font-family:var(--ar)!important;font-weight:800!important}
.feat-cat-block .fg{gap:14px!important;margin-top:0!important}
.feat-cat-block .fc{background:#faf7fd!important;border:1px solid var(--border)!important;border-radius:20px!important;padding:24px 22px!important;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,background .35s ease!important}
.feat-cat-block .fc::before{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--p500),transparent);transform:none!important;opacity:.7}
.feat-cat-block .fc:hover{transform:translateY(-6px)!important;border-color:var(--p300)!important;background:#fff!important}
.feat-cat-block .fc-ico{width:46px!important;height:46px!important;border-radius:14px!important;background:#fff!important;border:1px solid var(--p100);margin-bottom:14px!important;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.feat-cat-block .fc:hover .fc-ico{transform:rotate(-8deg) scale(1.1)}
.feat-cat-block .fc-title{font-size:16.5px!important;font-weight:700!important}
.feat-cat-block .fc-desc{font-size:13.5px!important;line-height:1.6!important;color:#6b6179!important}

/* dark panels: RMS + Customer Growth */
.feat-cat-block[data-cat="rms"],.feat-cat-block[data-cat="customers"]{background:#07030d;border-color:rgba(255,255,255,.08)}
.feat-cat-block[data-cat="rms"] .feat-section-head,.feat-cat-block[data-cat="customers"] .feat-section-head{border-bottom-color:rgba(255,255,255,.1)!important}
.feat-cat-block[data-cat="rms"] .feat-section-ico,.feat-cat-block[data-cat="customers"] .feat-section-ico{background:rgba(144,71,200,.2)!important;border-color:rgba(170,109,216,.4);color:var(--p300)!important}
.feat-cat-block[data-cat="rms"] .sec-tag,.feat-cat-block[data-cat="customers"] .sec-tag{color:var(--p400)!important}
.feat-cat-block[data-cat="rms"] .sec-tag::before,.feat-cat-block[data-cat="customers"] .sec-tag::before{background:var(--p400)}
.feat-cat-block[data-cat="rms"] .sec-title,.feat-cat-block[data-cat="customers"] .sec-title{color:#fff!important}
.feat-cat-block[data-cat="rms"] .fc,.feat-cat-block[data-cat="customers"] .fc{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;border-color:rgba(255,255,255,.09)!important}
.feat-cat-block[data-cat="rms"] .fc:hover,.feat-cat-block[data-cat="customers"] .fc:hover{border-color:rgba(170,109,216,.55)!important;background:linear-gradient(180deg,rgba(144,71,200,.18),rgba(255,255,255,.03))!important}
.feat-cat-block[data-cat="rms"] .fc-ico,.feat-cat-block[data-cat="customers"] .fc-ico{background:rgba(144,71,200,.2)!important;border-color:rgba(170,109,216,.4);color:var(--p300)!important}
.feat-cat-block[data-cat="rms"] .fc-ico svg *,.feat-cat-block[data-cat="customers"] .fc-ico svg *{stroke:var(--p300)}
.feat-cat-block[data-cat="rms"] .fc-title,.feat-cat-block[data-cat="customers"] .fc-title{color:#fff!important}
.feat-cat-block[data-cat="rms"] .fc-desc,.feat-cat-block[data-cat="customers"] .fc-desc{color:rgba(255,255,255,.64)!important}
/* faded panel watermark */
.feat-cat-block[data-cat="rms"]::after{content:'RMS'}
.feat-cat-block[data-cat="customers"]::after{content:'GROW'}
.feat-cat-block[data-cat="rms"]::after,.feat-cat-block[data-cat="customers"]::after{position:absolute;right:-1%;bottom:-8%;pointer-events:none;font-family:var(--en);font-weight:800;line-height:.8;letter-spacing:-.06em;
  font-size:clamp(120px,16vw,240px);color:rgba(255,255,255,.03);white-space:nowrap}
.rtl .feat-cat-block[data-cat="rms"]::after,.rtl .feat-cat-block[data-cat="customers"]::after{right:auto;left:-1%}
.feat-cat-block>*{position:relative;z-index:1}

/* ---------- help section (dark) ---------- */
#af-help{position:relative;overflow:hidden;background:#07030d!important;padding:80px 32px!important}
#af-help::before{content:'HELP';position:absolute;left:50%;bottom:-18%;transform:translateX(-50%);pointer-events:none;font-family:var(--en);font-weight:800;line-height:.8;letter-spacing:-.06em;
  font-size:clamp(150px,22vw,340px);color:rgba(255,255,255,.03);white-space:nowrap}
#af-help .si{position:relative;z-index:1}
#af-help .sec-tag{display:inline-flex!important;align-items:center;gap:14px;background:transparent!important;border:0!important;padding:0!important;color:var(--p400)!important;
  font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.3em!important}
#af-help .sec-tag::before,#af-help .sec-tag::after{content:'';width:30px;height:1px;background:var(--p400)}
#af-help .sec-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;color:#fff!important}
.rtl #af-help .sec-title{font-family:var(--ar)!important;font-weight:800!important}
#af-help .sec-sub{color:rgba(255,255,255,.62)!important}
#af-help a[href*="help.imdady"]{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:20px!important;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s!important;text-align:left}
.rtl #af-help a[href*="help.imdady"]{text-align:right}
#af-help a[href*="help.imdady"]:hover{transform:translateY(-6px);border-color:rgba(170,109,216,.55)!important;background:rgba(144,71,200,.2)!important}
#af-help a[href*="help.imdady"]>span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--p600);color:#fff!important;font-size:16px!important;
  transition:transform .35s cubic-bezier(.22,1,.36,1)}
#af-help a[href*="help.imdady"]:hover>span{transform:translate(3px,-3px) rotate(8deg)}

/* ---------- scroll reveal (cards inside visible panels) ---------- */
.js-af .af-rv:not(.af-in){opacity:0;transform:translateY(34px) scale(.96)}
.js-af .af-rv.af-in{animation:afPop .8s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*80ms)}
.js-af .feat-filter-bar.af-rv:not(.af-in){transform:translateY(20px) scale(1)}
@keyframes afPop{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .js-af .af-rv{opacity:1!important;transform:none!important}
  .js-af .af-in,.feat-cat-block.vis{animation:none!important}
}
@media(max-width:900px){
  #af-list{padding:44px 20px 60px!important}
  .feat-cat-block{padding:26px 20px 28px;border-radius:24px}
  .feat-filter-bar{flex-wrap:nowrap!important;overflow-x:auto;padding-bottom:6px!important;scrollbar-width:none}
  .feat-filter-bar::-webkit-scrollbar{display:none}
  .ff-btn{flex-shrink:0;white-space:nowrap}
  #af-help{padding:52px 20px!important}
}

/* All Features: "Learn more" links readable on the dark panels, and tidy on the light ones */
.feat-cat-block[data-cat="rms"] .fc-link,.feat-cat-block[data-cat="customers"] .fc-link,
.feat-cat-block[data-cat="rms"] .fc a,.feat-cat-block[data-cat="customers"] .fc a{color:var(--p300)!important}
.feat-cat-block .fc-link,.feat-cat-block .fc a{font-weight:700;font-size:13px;margin-top:12px}

/* ============================================================
   "Trusted by" logo strip — dark glass chips + white logos
   (all logos are transparent PNGs, so they can be recoloured)
   ============================================================ */
.marquee-logo{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s!important}
.marquee-logo img{
  filter:brightness(0) invert(1)!important;opacity:.78;padding:6px 10px;
  transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1)!important}
.marquee-logo:hover{transform:translateY(-4px);border-color:rgba(170,109,216,.7)!important;background:linear-gradient(180deg,rgba(144,71,200,.28),rgba(255,255,255,.04))!important}
.marquee-logo:hover img{filter:brightness(0) invert(1)!important;opacity:1;transform:scale(1.06)}

/* logo strip: slightly bigger chips, logos fill them */
.marquee-logo{height:56px!important;width:150px!important;border-radius:16px!important}
.marquee-logo img{padding:0 4px!important;transform:scale(1.22);opacity:.85}
.marquee-logo:hover img{transform:scale(1.3)}

/* logo strip: never crop a logo — keep it fully inside the chip, hover grows only a little */
.marquee-logo{overflow:hidden}
.marquee-logo img{padding:7px 12px!important;transform:none!important;object-fit:contain!important;opacity:.88}
.marquee-logo:hover img{transform:scale(1.06)!important;opacity:1}

/* hero store badges: brand-purple fill (hover: white) */
.hero a[href="#"]{background:linear-gradient(135deg,#9047c8,#6a2fa0)!important;border:1.5px solid rgba(196,157,232,.55)!important;color:#fff!important}
.hero a[href="#"]:hover{background:#fff!important;border-color:#fff!important;color:var(--p950)!important}

/* hero store badges v2: dark glass chip, purple on hover */
.hero a[href="#"]{background:linear-gradient(180deg,rgba(20,10,32,.78),rgba(10,5,18,.78))!important;border:1px solid rgba(170,109,216,.38)!important;color:#fff!important;backdrop-filter:blur(8px)}
.hero a[href="#"]:hover{background:#9047c8!important;border-color:#c49de8!important;color:#fff!important}
.hero a[href="#"]:hover div div:first-child{opacity:.85}

/* hero store badges: white on hover */
.hero a[href="#"]:hover{background:#fff!important;border-color:#fff!important;color:var(--p950)!important}
.hero a[href="#"]:hover div div:first-child{opacity:.7}

/* separate Help section from Testimonials: own deep-purple tone + top divider */
#help-guides{background:linear-gradient(180deg,#1b0c30 0%,#150a26 100%)!important;border-top:1px solid rgba(170,109,216,.35)}
#help-guides::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(520px,60%);height:2px;background:linear-gradient(90deg,transparent,var(--p400),transparent);pointer-events:none}
.testi-section{padding-bottom:120px!important}

/* ===== Help & Learning: LIGHT lavender (clearly separate from dark Testimonials) ===== */
#help-guides{background:linear-gradient(180deg,#f6effc,#efe4f9)!important;border-top:0!important}
#help-guides::before{background:radial-gradient(ellipse 45% 70% at 100% 20%,rgba(144,71,200,.14),transparent 65%),radial-gradient(ellipse 40% 60% at 0% 100%,rgba(144,71,200,.10),transparent 65%)!important}
#help-guides::after{display:none}
.help-head .sec-tag{color:var(--p600)!important}
.help-head .sec-tag::before{background:var(--p600)}
.help-head .sec-title{color:var(--txt)!important}
.help-head .sec-title .acc{color:var(--p600)}
.help-head .sec-sub{color:#6b6179!important}
.hc{background:#fff!important;border:1px solid var(--border)!important}
.hc:hover{background:#fff!important;border-color:var(--p300)!important}
.hc::after{color:rgba(144,71,200,.07)}
.hc:hover::after{color:rgba(144,71,200,.14)}
.hc-badge{background:var(--p50)!important;border:1px solid var(--p100);color:var(--p700)!important}
.hc-title{color:var(--txt)!important}
.hc-desc{color:#6b6179!important}
.hc-link{background:#faf7fd!important;border:1px solid var(--border)!important}
.hc-link:hover{background:var(--p50)!important;border-color:var(--p300)!important}
.hc-link-label{color:var(--txt)!important}
.hc-link-url{color:var(--p600)!important}
.hc-link-arrow{background:var(--p600);color:#fff!important}
.btn-help:hover{background:transparent!important;border-color:var(--p600)!important;color:var(--p700)!important}

/* header logo: transparent white SVG on the dark header — no white pill */
.nav-logo{background:transparent!important;border-radius:0!important;padding:0!important}
.nav-logo img{height:40px!important;width:auto!important;filter:none!important}

/* header: a bit lighter */
.nav-wrap{background:#2a1647!important;border-bottom:1px solid rgba(255,255,255,.12)!important}
.nav-wrap{background:#27232e!important}
.nav-wrap{background:#4d4659!important;border-bottom:1px solid rgba(255,255,255,.16)!important}

/* header: back to the original dark */
.nav-wrap{background:#07030d!important;border-bottom:1px solid rgba(255,255,255,.08)!important}

/* header stays fixed at the top while scrolling.
   overflow-x:hidden on html/body broke position:sticky -> use clip (no scroll container) */
html,body{overflow-x:clip!important}
.nav-wrap{position:sticky!important;top:0!important;z-index:1000!important}
html{scroll-padding-top:96px}

/* slimmer header */
.nav-inner{height:64px!important}
.nav-logo img{height:32px!important}
.btn-try{padding:9px 22px!important}
.btn-demo,.btn-lang{padding:8px 18px!important}
.nav-links>li>a,.nav-links a{padding:8px 14px!important}
html{scroll-padding-top:76px}

/* ===== language toggle (EN | AR) replaces the "العربية / English" button ===== */
.lang-toggle{position:relative;display:inline-flex;align-items:center;direction:ltr;height:38px;padding:3px;border-radius:999px;box-sizing:border-box;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.35);text-decoration:none;flex-shrink:0;
  transition:border-color .25s ease,background-color .25s ease}
.lang-toggle:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.lang-toggle span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:38px;height:100%;border-radius:999px;
  font-family:'Geist',var(--en),sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.65);
  transition:background-color .3s ease,color .3s ease}
.lang-toggle span.lt-on{background:var(--p600);color:#fff}
.lang-toggle:hover span:not(.lt-on){color:#fff}
.lang-toggle:focus-visible{outline:2px solid var(--p300);outline-offset:3px}
@media(max-width:900px){.lang-toggle{height:36px}.lang-toggle span{width:34px;font-size:12px}}

/* ===== responsive header (proper breakpoints) =====
   >1180: full menu + 3 actions  |  <=1180: hamburger replaces menu
   <=980: "Book a Demo" moves into the mobile menu  |  <=700: "Try Free" too */
@media(max-width:1400px){
  .nav-links{display:none!important}
  .nav-ham{display:flex!important;margin-left:12px}
  .rtl .nav-ham{margin-left:0;margin-right:12px}
  .nav-inner{padding:0 24px!important}
}
@media(max-width:980px){
  .nav-actions>a:nth-child(2){display:none!important}
}
@media(max-width:700px){
  .nav-actions>a:nth-child(3){display:none!important}
  .nav-inner{padding:0 16px!important}
  .nav-logo img{height:28px!important}
}
@media(max-width:380px){
  .lang-toggle span{width:30px}
  .nav-logo img{height:25px!important}
}

/* restaurant-type panel: stack image above text on tablet/mobile (desktop 2-col rule was overriding it) */
@media(max-width:900px){
  .rtype-panel.active{grid-template-columns:1fr!important}
  .rtype-panel>div:first-child{order:2;padding:28px 22px!important}
  .rtype-panel-img{order:1;display:flex!important;align-items:center;justify-content:center;width:100%;padding:14px!important;
    border-right:0!important;border-left:0!important;border-bottom:4px solid var(--p600)!important}
  .rtl .rtype-panel-img{border-left:0!important}
  .rtype-panel-img img{width:auto;max-width:100%;max-height:230px!important;margin:0 auto}
}

/* features: on tablet/mobile -> horizontal scrolling tabs + preview image underneath */
@media(max-width:900px){
  #features .feat-grid{grid-template-columns:1fr!important;gap:18px!important;margin-top:28px!important}
  #features .feat-tabs{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;padding-bottom:8px!important;scrollbar-width:none}
  #features .feat-tabs::-webkit-scrollbar{display:none}
  #features .feat-tabs .ft{flex:0 0 auto!important;width:auto!important;white-space:nowrap}
  #features .feat-display{display:flex!important;position:relative!important;top:auto!important;margin-top:0!important;min-height:200px;aspect-ratio:16/10}
}

/* ===== mobile fixes ===== */
@media(max-width:700px){
  /* comparison table: fit the screen instead of scrolling sideways */
  .compare-section{padding:56px 14px!important}
  .compare-table{min-width:0!important;table-layout:fixed!important}
  .compare-table th,.compare-table td{padding:11px 8px!important;font-size:12px!important}
  .compare-table th:first-child,.compare-table td:first-child{width:34%!important}
  .compare-table th.col-imdady,.compare-table th.col-others,.compare-table td.col-imdady,.compare-table td:last-child{padding-left:8px!important;padding-right:8px!important}
  .rtl .compare-table td.col-imdady,.rtl .compare-table td:last-child,.rtl .compare-table th.col-imdady,.rtl .compare-table th.col-others{padding-right:8px!important;padding-left:8px!important}
  /* testimonial: big number must not sit on top of the stars / text */
  .testi-section .testi-card::before{top:12px!important;right:16px!important;left:auto!important;transform:none!important;font-size:48px!important;opacity:.55}
  .rtl .testi-section .testi-card::before{right:auto!important;left:16px!important}
  .testi-section .testi-card{padding-top:34px!important}
}
@media(max-width:420px){
  /* key-features cards: one per row on small phones */
  .fg{grid-template-columns:1fr!important}
}

/* floating chat button: brand purple (was WhatsApp green), white icon; white on hover */
.wa-fab{background:var(--p600)!important;border:1.5px solid rgba(196,157,232,.55);color:transparent!important;text-shadow:0 0 0 #fff;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),background-color .25s,border-color .25s,text-shadow .25s!important}
.wa-fab:hover{background:#fff!important;border-color:#fff;text-shadow:0 0 0 var(--p600)}
.wa-fab{font-size:0!important;text-shadow:none!important;position:fixed}
.wa-fab::before{content:'';width:26px;height:26px;display:block;background:#fff;transition:background-color .25s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.03 2 11c0 2.6 1.24 4.94 3.22 6.58L4 22l4.6-2.3c1.07.29 2.2.45 3.4.45 5.52 0 10-4.03 10-9S17.52 2 12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.03 2 11c0 2.6 1.24 4.94 3.22 6.58L4 22l4.6-2.3c1.07.29 2.2.45 3.4.45 5.52 0 10-4.03 10-9S17.52 2 12 2z'/%3E%3C/svg%3E") center/contain no-repeat}
.wa-fab:hover::before{background:var(--p600)}

/* home hero fills the whole first screen (header is now 64px + 1px border) */
@media(min-width:901px){
  .hero{min-height:calc(100vh - 65px)!important;min-height:calc(100svh - 65px)!important}
}