/* =========================================================
   Alwaselah — shared theme (public site)
   Tokens, base, buttons, nav, footer, reveal, a11y.
   Page-specific styles stay inside each page.
   ========================================================= */
:root{
  /* White theme — the "--ink" tokens are now light surfaces and "--t-light" is the main text colour.
     Kept the old names so every page keeps working. Brand dark is --brand-ink. */
  --ink:#ffffff; --ink-2:#f5f8f7; --ink-3:#edf2f1; --panel:#f5f8f7;
  --brand-ink:#091a23;
  --gold:#a87420; --gold-fill:#d8a64a; --gold-2:#e2b766; --gold-deep:#8a5d12;
  --cyan:#0f7f8c; --cyan-soft:rgba(15,127,140,.10);
  --paper:#f3f6f5; --paper-2:#f8faf9; --card:#ffffff;
  --t-light:#0c2029; --t-dim:#4f656e; --t-faint:#64798a;
  --t-ink:#0c2029; --t-ink-dim:#4f656e;
  --line-d:rgba(12,32,41,.11); --line-l:#dde5e4;
  --display:'Space Grotesk',sans-serif; --body:'Inter',sans-serif; --mono:'Space Mono',monospace; --ar:'Cairo',sans-serif;
  --r:14px; --r-lg:22px; --maxw:1180px; --ease:cubic-bezier(.4,.05,.1,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--ink);color:var(--t-light);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
[dir="rtl"] body,[dir="rtl"] .hero-head,[dir="rtl"] .nav-links a,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-family:var(--ar)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.7}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;padding:14px 24px;border-radius:100px;border:1px solid transparent;cursor:pointer;transition:.25s var(--ease);white-space:nowrap}
.btn-gold{background:var(--gold-fill);color:#1a1206}
.btn-gold:hover{background:var(--gold-2);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(216,166,74,.6)}
.btn-ghost{border-color:var(--line-d);color:var(--t-light);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-wa{background:#25d366;color:#072b16}
.btn-wa:hover{background:#34e078;transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:var(--t-light)}
.btn svg{width:17px;height:17px}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-d);transition:.3s}
.nav.scrolled{background:rgba(255,255,255,.97);box-shadow:0 6px 24px -16px rgba(9,26,35,.35)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em}
.logo-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--gold-2),var(--gold-fill));display:grid;place-items:center;color:#1a1206;font-weight:700;flex-shrink:0;box-shadow:0 6px 18px -10px rgba(168,116,32,.6);overflow:hidden}
.logo-mark img{width:100%;height:100%;object-fit:contain}
.logo b{color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:14.5px;color:var(--t-dim);font-weight:500;transition:.2s}
.nav-links a:hover{color:var(--t-light)}
.nav-links a.active{color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-login{font-size:14px;color:var(--t-dim);font-weight:500;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--line-d);border-radius:100px;transition:.2s}
.nav-login:hover{border-color:var(--gold);color:var(--gold)}
.nav-login svg{width:15px;height:15px}
.lang{display:flex;border:1px solid var(--line-d);border-radius:100px;overflow:hidden;font-family:var(--mono);font-size:12px}
.lang button{background:none;border:none;color:var(--t-faint);padding:6px 12px;cursor:pointer;transition:.2s}
.lang button.on{background:var(--gold-fill);color:#1a1206;font-weight:700}
.burger{display:none;background:none;border:1px solid var(--line-d);border-radius:9px;width:42px;height:42px;cursor:pointer;color:var(--t-light)}
.nav-mcta,.nav-links .nav-mlogin{display:none}
[dir="rtl"] .eyebrow,[dir="rtl"] .jstats,[dir="rtl"] .count,[dir="rtl"] .tags span,[dir="rtl"] .strip-in,[dir="rtl"] .foot-bot,[dir="rtl"] .stats-note,[dir="rtl"] .hero-trust{font-family:var(--ar);letter-spacing:0}

/* footer */
.foot{background:var(--paper);border-top:1px solid var(--line-d);padding:60px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
.foot p{font-size:14px;color:var(--t-faint);margin-top:16px;max-width:280px}
.foot h4{font-family:var(--display);font-size:13px;color:var(--t-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}
.foot ul{list-style:none}
.foot li{margin-bottom:10px}
.foot a{font-size:14px;color:var(--t-faint);transition:.2s}
.foot a:hover{color:var(--gold)}
.foot-bot{border-top:1px solid var(--line-d);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--t-faint);font-family:var(--mono)}
.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;border:1px solid var(--line-d);border-radius:9px;display:grid;place-items:center;color:var(--t-dim);transition:.25s}
.socials a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.socials svg{width:16px;height:16px}

/* floating WhatsApp */
.wa-float{position:fixed;bottom:22px;right:22px;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(0,0,0,.55);z-index:150;transition:transform .2s var(--ease)}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:28px;height:28px;color:#fff}
[dir="rtl"] .wa-float{right:auto;left:22px}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:.7s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media(max-width:1060px){
  .nav-links{gap:18px}
  .nav-right>.btn-gold{padding:11px 16px;font-size:14px}
}
@media(max-width:920px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;display:none;background:#fff;border-bottom:1px solid var(--line-d);padding:6px 0 14px;box-shadow:0 24px 40px -18px rgba(9,26,35,.3)}
  .nav-links.open{display:flex}
  .nav-links>a:not(.nav-mcta){padding:15px 28px;font-size:16px;border-bottom:1px solid var(--line-d);color:var(--t-light)}
  .nav-mcta{display:flex!important;justify-content:center;margin:14px 24px 2px}
  .nav-links .nav-mlogin{display:block}
  .nav-right>.btn-gold,.nav-right>.nav-login{display:none}
  .burger{display:grid;place-items:center}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* =========================================================
   White-theme adjustments for elements the pages styled for a dark site
   (body-prefixed so they win over each page's own <style>)
   ========================================================= */
body .btn-gold:hover{background:var(--gold-2)}
body .chip.on,body .jchip.on,body .secnav a.cta,body .gal-tabs button.on,body .b-gold{background:var(--gold-fill);border-color:var(--gold-fill);color:#1a1206}
body .secnav a.cta:hover{background:var(--gold-2)}
body .cta-band,body .path-emp{background:linear-gradient(150deg,var(--gold-2),var(--gold-fill))}
body .cta-band .btn-dark,body .path-emp .btn{background:var(--brand-ink);color:#fff}
body .cta-band .btn-dark:hover,body .path-emp .btn:hover{background:#123140}
body .rec,body .crec,body .snap,body .scope,body .trk,body .dash-ui{background:#fff;border:1px solid var(--line-l);box-shadow:0 30px 60px -36px rgba(9,26,35,.28)}
body .dash-body{background:var(--paper)}
body .dash-row{background:#fff;border:1px solid var(--line-l)}
body .rec-person{background:var(--paper)}
body .rec-live{background:var(--cyan-soft)}
body .dcard-ic,body .ecard-ic{background:var(--brand-ink)}
body .pstep,body .s6{background:#fff}
body .pstep:hover,body .s6:hover{background:var(--paper-2)}
body .proc,body .steps6{background:var(--line-l);border-color:var(--line-l)}
body .stat{border-color:var(--gold-fill)}
body .sec-card .si svg,body .tr .ti svg,body .ind .ii svg,body .vcard-ic svg,body .cap-ic svg,body .inforow .ic svg{color:var(--cyan)}
body .sec-card .si,body .tr .ti{background:var(--cyan-soft)}
body .field input,body .field select,body .field textarea,body .search,body .jsearch{background:#fff;border-color:var(--line-l);color:var(--t-ink)}
body .field input:focus,body .field select:focus,body .field textarea:focus{background:#fff;border-color:var(--gold-fill);box-shadow:0 0 0 3px rgba(216,166,74,.2)}
body .req,body .form,body .reg,body .safe,body .fraud{background:#fff;border-color:var(--line-l);box-shadow:0 20px 50px -38px rgba(9,26,35,.3)}
body .inforow,body .mcard,body .vcard,body .ind,body .job,body .path-tal{background:#fff;border-color:var(--line-l)}
body .inforow:hover,body .mcard:hover,body .vcard:hover,body .ind:hover,body .job:hover{border-color:var(--gold-fill)}
body .strip,body .secnav{background:var(--paper)}
body .toast{color:#fff;background:var(--cyan)}
body .urgent{color:#b42318;background:#fdecea}
body .gal-sec{background:var(--paper)}
body .gal-item .cap{color:#fff}
body .gal-item .cap small{color:#f3cf86}
body .lightbox .lb-cap{color:#eaf1f2}
body .lightbox .lb-x{color:#eaf1f2;border-color:rgba(255,255,255,.2)}
body .quote p{color:var(--t-ink)}
body .hero-corridor{opacity:.35}
body .wa-float{box-shadow:0 14px 30px -12px rgba(9,26,35,.45)}
/* site-wide announcement bar (edited in admin → Website) */
.site-banner{background:var(--brand-ink);color:#eaf1f2;font-size:14px;text-align:center;padding:9px 44px 9px 16px;position:relative}
.site-banner a{color:#f3cf86;font-weight:600;text-decoration:underline;margin-inline-start:8px}
.site-banner button{position:absolute;top:50%;right:12px;transform:translateY(-50%);background:none;border:none;color:#9fb4bd;font-size:20px;cursor:pointer;line-height:1}
[dir="rtl"] .site-banner{padding:9px 16px 9px 44px}
[dir="rtl"] .site-banner button{right:auto;left:12px}
body .b-cy{color:var(--cyan)}
body .tav,body .rec-av{background:linear-gradient(135deg,#123140,#1c4254);color:#e9bf6d}