/* ============================================================
   Mazraati Capital — shared design system
   RTL Arabic · forest green + warm amber · farm-to-table
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Tajawal:wght@300;400;500;700;800&family=Playfair+Display:wght@600;700&family=Outfit:wght@500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* greens */
  --green-950:#0e2718;
  --green-900:#143620;
  --green-850:#173d26;
  --green-800:#1b4a2e;
  --green-700:#26603c;
  --green-600:#357a4d;
  --green-500:#4f9468;
  --leaf:#5f7d5a;

  /* warm */
  --orange:#ef8a22;
  --orange-600:#df7714;
  --amber:#f6a82a;
  --gold:#e7b549;

  /* paper */
  --cream:#f5f0e4;
  --paper:#fbf8f1;
  --paper-2:#f1ece0;
  --white:#ffffff;

  /* ink */
  --ink:#15251b;
  --ink-2:#2c3a30;
  --muted:#5f6d61;
  --hair:rgba(20,54,32,.12);
  --hair-strong:rgba(20,54,32,.2);

  --shadow-sm:0 1px 2px rgba(14,39,24,.06), 0 2px 8px rgba(14,39,24,.05);
  --shadow-md:0 6px 18px rgba(14,39,24,.10), 0 2px 6px rgba(14,39,24,.06);
  --shadow-lg:0 24px 60px rgba(14,39,24,.22), 0 8px 20px rgba(14,39,24,.12);
  --shadow-amber:0 10px 30px rgba(239,138,34,.35);

  --radius:18px;
  --radius-lg:26px;
  --maxw:1240px;

  --ff-display:'Amiri', Georgia, serif;
  --ff-body:'Tajawal', system-ui, sans-serif;
  --ff-latin:'Playfair Display', Georgia, serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{margin:0;line-height:1.12;font-weight:700;}
p{margin:0;}

.display{font-family:var(--ff-display);font-weight:700;letter-spacing:-.01em;}
.eyebrow{
  font-family:var(--ff-body);font-weight:700;font-size:.82rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange);display:inline-flex;align-items:center;gap:.55em;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);border-radius:2px;display:inline-block;}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,48px);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 1.6em;border-radius:999px;border:1px solid transparent;
  font-weight:700;font-size:1rem;line-height:1;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,color .25s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-primary{
  color:#3a1e02;background:linear-gradient(135deg,var(--amber),var(--orange) 60%,var(--orange-600));
  box-shadow:var(--shadow-amber);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(239,138,34,.45);}
.btn-ghost{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(6px);}
.btn-ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);}
.btn-dark{background:var(--green-800);color:#fff;}
.btn-dark:hover{background:var(--green-700);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-outline{background:transparent;border-color:var(--hair-strong);color:var(--green-800);}
.btn-outline:hover{background:var(--green-800);color:#fff;border-color:var(--green-800);}
.btn svg{width:18px;height:18px;}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px clamp(16px,4vw,40px);
  transition:background .4s,box-shadow .4s,backdrop-filter .4s,padding .4s;
}
.nav.scrolled{
  background:rgba(251,248,241,.86);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--hair), var(--shadow-sm);padding-block:10px;
}
.nav-logo{height:38px;width:auto;transition:height .4s,filter .4s;}
.nav.scrolled .nav-logo{height:34px;}
/* logo is dark-on-transparent: keep dark on light nav; brighten over hero */
.nav:not(.scrolled) .nav-logo{filter:drop-shadow(0 1px 8px rgba(0,0,0,.35)) brightness(0) invert(1);}
.nav-links{display:flex;align-items:center;gap:4px;background:rgba(245,240,228,.5);border:1px solid var(--hair);
  padding:6px;border-radius:999px;backdrop-filter:blur(8px);}
.nav.scrolled .nav-links{background:rgba(255,255,255,.5);}
.nav:not(.scrolled) .nav-links{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);}
.nav-link{
  padding:.62em 1.15em;border-radius:999px;font-weight:500;font-size:.96rem;color:var(--ink-2);
  transition:background .25s,color .25s;position:relative;
}
.nav:not(.scrolled) .nav-link{color:rgba(255,255,255,.92);}
.nav-link:hover{background:rgba(53,122,77,.12);}
.nav:not(.scrolled) .nav-link:hover{background:rgba(255,255,255,.16);}
.nav-link.active{background:var(--green-800);color:#fff;}
.nav-right{display:flex;align-items:center;gap:10px;}
.chip{
  display:inline-flex;align-items:center;gap:.4em;padding:.5em .85em;border-radius:999px;
  font-weight:700;font-size:.85rem;border:1px solid var(--hair);background:rgba(255,255,255,.7);color:var(--green-800);
}
.nav:not(.scrolled) .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;}
.nav-toggle{display:none;background:none;border:none;color:inherit;padding:6px;}
.nav:not(.scrolled) .nav-toggle{color:#fff;}
.nav.scrolled .nav-toggle{color:var(--green-900);}

/* mobile nav */
@media(max-width:900px){
  .nav{padding-inline:16px;gap:10px;}
  /* slide-in drawer, anchored to the physical right (works in RTL) */
  .nav-links{position:fixed;top:0;right:0;left:auto;height:100dvh;width:min(82vw,340px);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;border-radius:0;
    background:var(--green-900)!important;border:none;padding:90px 22px 30px;transform:translateX(100%);
    transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:70;overflow-y:auto;
    box-shadow:-24px 0 60px rgba(0,0,0,.45);backdrop-filter:none;}
  .nav-links.open{transform:translateX(0);}
  .nav-link{color:#fff!important;font-size:1.12rem;padding:.9em 1em;text-align:start;border-radius:12px;}
  .nav-link:hover{background:rgba(255,255,255,.08)!important;}
  .nav-link.active{background:var(--green-700)!important;}
  .nav-toggle{display:block;z-index:80;}
  /* declutter the bar: drop chips + admin label, keep logo + CTA + burger */
  .nav-right{gap:8px;}
  .nav-right .chip{display:none;}
  .nav-tools{gap:6px;}
  .admin-pill{display:none;}
}
@media(max-width:480px){
  .nav-right .btn-primary{display:none;} /* very small screens: CTA lives in the drawer */
}
/* drawer-only CTA (hidden on desktop pill) */
.nav-cta{display:none;}
@media(max-width:900px){
  .nav-cta{display:block;margin-top:16px;text-align:center;font-weight:800;
    background:linear-gradient(135deg,var(--amber),var(--orange))!important;color:#3a1e02!important;}
}

/* ---------- sound toggle ---------- */
.sound-btn{
  position:fixed;inset-block-end:22px;inset-inline-start:22px;z-index:55;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--hair);
  background:rgba(251,248,241,.9);backdrop-filter:blur(10px);box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;color:var(--green-800);transition:transform .25s,background .25s;
}
.sound-btn:hover{transform:scale(1.08);}
.sound-btn .bars{display:flex;align-items:flex-end;gap:2.5px;height:18px;}
.sound-btn .bars i{width:3px;background:currentColor;border-radius:2px;height:6px;}
.sound-btn.playing .bars i{animation:eq 1s ease-in-out infinite;}
.sound-btn.playing .bars i:nth-child(2){animation-delay:.2s;}
.sound-btn.playing .bars i:nth-child(3){animation-delay:.4s;}
.sound-btn.playing .bars i:nth-child(4){animation-delay:.1s;}
@keyframes eq{0%,100%{height:5px;}50%{height:18px;}}

/* ---------- section scaffolding ---------- */
.section{position:relative;padding-block:clamp(72px,10vw,128px);}
.section-head{max-width:640px;margin-bottom:clamp(36px,5vw,60px);}
.section-head h2{font-family:var(--ff-display);font-size:clamp(2rem,4.6vw,3.4rem);color:var(--green-900);margin:.35em 0 .4em;}
.section-head p{color:var(--muted);font-size:1.12rem;line-height:1.7;}

/* ---------- card ---------- */
.card{background:var(--white);border:1px solid var(--hair);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}

/* reveal on scroll */
.reveal{opacity:1 !important;transform:none !important;visibility:visible !important;}
.reveal.in{opacity:1;transform:none;}
.reveal[data-d="1"]{transition-delay:.1s;}
.reveal[data-d="2"]{transition-delay:.2s;}
.reveal[data-d="3"]{transition-delay:.3s;}

/* ---------- footer ---------- */
.footer{position:relative;background:var(--green-950);color:rgba(255,255,255,.8);padding-block:64px 28px;overflow:hidden;}
.footer::before{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 100% at 100% 0%,rgba(239,138,34,.14),transparent 55%);pointer-events:none;}
.footer .wrap{position:relative;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start;}
.footer h4{color:#fff;font-size:1.05rem;margin-bottom:16px;font-family:var(--ff-display);}
.footer a{color:rgba(255,255,255,.78);transition:color .2s;}
.footer a:hover{color:var(--amber);}
.footer .stack{display:flex;flex-direction:column;gap:11px;}
.footer .rib{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#fff;}
.foot-logo{font-family:var(--ff-latin);font-size:1.7rem;font-weight:700;letter-spacing:.02em;color:#fff;}
.foot-logo b{color:var(--orange);}
.foot-logo small{display:block;font-family:var(--ff-body);font-size:.62rem;letter-spacing:.42em;color:var(--orange);margin-top:2px;}
.footer-bottom{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.9rem;color:rgba(255,255,255,.6);}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;gap:32px;}}

/* number helpers */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}

/* placeholder media slot styling */
.media-slot{
  position:relative;overflow:hidden;
  background:
    repeating-linear-gradient(45deg, rgba(53,122,77,.06) 0 14px, rgba(53,122,77,.11) 14px 28px),
    var(--paper-2);
  display:flex;align-items:center;justify-content:center;
}
.media-slot .hint{font-family:ui-monospace,monospace;font-size:.78rem;color:var(--green-700);
  background:rgba(251,248,241,.82);border:1px dashed var(--green-600);border-radius:10px;padding:.5em .8em;text-align:center;}

/* ============================================================
   English mode — font swap + LTR niceties
   Pages set their own --ff-head (Cairo). In EN we override the
   head + body families with Outfit / Plus Jakarta Sans.
   ============================================================ */
body.lang-en{ font-family:'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing:-0.005em; direction:ltr; text-align:left; }
body.lang-en h1, body.lang-en h2, body.lang-en h3, body.lang-en h4,
body.lang-en .display, body.lang-en .foot-logo{
  font-family:'Outfit', system-ui, sans-serif; letter-spacing:-0.02em;
}
/* the brand wordmark + RIB stay LTR/tabular regardless */
body.lang-en .nav-link{ font-weight:600; }
/* small unit text inside money looks better with a touch of tracking off */
body.lang-en .num, body.lang-en small{ letter-spacing:0; }

/* ============================================================
   Mobile bottom tab bar (injected by mazraati.js)
   visible only ≤900px; replaces the drawer on phones
   ============================================================ */
.tabbar{display:none;}
@media(max-width:900px){
  .tabbar{
    display:flex;position:fixed;inset-inline:0;inset-block-end:0;z-index:90;
    align-items:flex-end;justify-content:space-around;gap:2px;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom,0));
    background:rgba(251,248,241,.94);backdrop-filter:blur(16px) saturate(1.2);
    border-top:1px solid var(--hair);box-shadow:0 -6px 24px rgba(14,39,24,.12);
  }
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
    color:var(--muted);font-weight:700;font-size:.72rem;text-decoration:none;padding:4px 2px;transition:color .2s;}
  .tab .ic{width:26px;height:26px;display:flex;align-items:center;justify-content:center;transition:transform .2s;}
  .tab .ic svg{width:23px;height:23px;}
  .tab.active{color:var(--green-800);}
  .tab.active .ic{transform:translateY(-1px);}
  .tab.center{position:relative;}
  .tab.center .ic{width:54px;height:54px;border-radius:50%;margin-top:-26px;
    background:linear-gradient(135deg,var(--amber),var(--orange));color:#3a1e02;
    box-shadow:0 8px 18px rgba(239,138,34,.45);border:4px solid var(--paper);}
  .tab.center .ic svg{width:26px;height:26px;}
  .tab.center.active{color:var(--orange-600);}

  /* keep content clear of the bar */
  body{padding-bottom:74px;}
  /* keep drawer + hamburger available alongside the bottom tab bar
     so users can still reach language / currency / secondary links */
  .nav-toggle{display:inline-flex!important;}
  .nav-links{display:flex!important;}
  /* re-show language + currency chips on phones (they were hidden earlier) */
  .nav-right .chip{display:inline-flex!important;}
  /* shrink + lift the support chat bubble so it doesn't sit on the bar */
  .chat-fab{width:42px!important;height:42px!important;inset-block-end:84px!important;inset-inline-start:14px!important;opacity:.92;}
  .chat-fab svg{width:19px!important;height:19px!important;}
  /* the ambient sound button also lifts above the bar */
  .sound-btn{inset-block-end:84px!important;}
}