/* ===== Almasanadah Alastratijiah — brand system ===== */
:root{
  --red-1:#C8202A; --red-2:#8E1B1F;
  --green-1:#1E8449; --green-2:#14592F;
  --ink:#23211E;          /* charcoal text */
  --ink-soft:#605C55;     /* muted body */
  --grey:#9A9A9A;
  --line:#E2DFD8;         /* hairline */
  --bg:#F2F1EE;           /* off-white */
  --bg-2:#EBE9E4;         /* slightly deeper */
  --card:#FFFFFF;
  --maxw:1200px;
  --r:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-sm:0 1px 2px rgba(35,33,30,.04), 0 6px 18px -10px rgba(35,33,30,.18);
  --shadow-lg:0 2px 6px rgba(35,33,30,.05), 0 30px 60px -28px rgba(35,33,30,.30);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Sora","Cairo",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
  overflow-x:hidden;
}
/* Arabic mode -> Cairo first */
html[lang="ar"] body{ font-family:"Cairo","Sora",system-ui,sans-serif; }

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}

/* ===== bilingual visibility ===== */
.ar,.en{ }
html[lang="ar"] .en{ display:none !important; }
html[lang="en"] .ar{ display:none !important; }
/* inline variants keep flow */
span.ar,span.en,em.ar,em.en{ display:inline; }

/* ===== layout ===== */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }
section{ position:relative; }
.eyebrow{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; display:flex; align-items:center; gap:.6em;
}
html[lang="ar"] .eyebrow{ letter-spacing:normal; text-transform:none; font-size:.92rem; }
.eyebrow::before{ content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--red-1),var(--green-1)); display:inline-block; }

h1,h2,h3{ margin:0; line-height:1.08; font-weight:800; letter-spacing:-.01em; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3{ letter-spacing:0; line-height:1.25; font-weight:700; }
.h-sec{ font-size:clamp(1.9rem,4.4vw,3.1rem); }
.lead{ font-size:clamp(1.02rem,1.6vw,1.22rem); color:var(--ink-soft); max-width:62ch; }

.section-pad{ padding-block:clamp(64px,9vw,128px); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* gradient text accent */
.grad{ background:linear-gradient(96deg,var(--red-1),var(--red-2) 38%,var(--green-2) 62%,var(--green-1)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===== buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:.55em; justify-content:center;
  padding:.92em 1.5em; border-radius:999px; font-weight:600; font-size:.98rem;
  border:1px solid transparent; transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s;
  will-change:transform;
}
.btn:focus-visible{ outline:3px solid var(--green-1); outline-offset:3px; }
.btn-primary{ color:#fff; background:linear-gradient(100deg,var(--red-1),var(--red-2)); box-shadow:var(--shadow-sm); position:relative; }
.btn-primary::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(100deg,var(--green-1),var(--green-2)); opacity:0; transition:opacity .5s var(--ease); }
.btn-primary span{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:.5em; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-primary:hover::after{ opacity:1; }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }

/* ===== arrow flips per direction ===== */
.ico-arrow{ width:16px;height:16px;transition:transform .4s var(--ease); }
html[dir="rtl"] .ico-arrow{ transform:scaleX(-1); }
.btn:hover .ico-arrow{ transform:translateX(3px); }
html[dir="rtl"] .btn:hover .ico-arrow{ transform:scaleX(-1) translateX(3px); }

/* ===== reveal ===== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s;} .reveal.d2{ transition-delay:.16s;} .reveal.d3{ transition-delay:.24s;} .reveal.d4{ transition-delay:.32s;}
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }