/* ===== 1. Design tokens ===== */
:root{
  --cream:#FFF8EE; --paper:#FFFDF8; --ink:#12304A; --ink-soft:#3A5A75;
  --teal:#0E7C74; --teal-dk:#0A5C56; --gold:#F2A93B; --gold-dk:#C97F14;
  --coral:#F2694B; --blue:#2C6FBF; --violet:#7B5EA7;
  --line:#F0D9B8; --shadow-1:0 2px 0 rgba(18,48,74,.06); 
  --shadow-2:0 10px 24px -12px rgba(18,48,74,.35), inset 0 -3px 0 rgba(18,48,74,.06);
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --fs:1; --font-ui:"Baloo Bhaijaan 2",system-ui,sans-serif;
  --font-body:"Noto Sans Arabic",system-ui,sans-serif;
  --font-dua:"Noto Naskh Arabic","Noto Sans Arabic",serif;
  --maxw:920px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:
    radial-gradient(1100px 520px at 88% -8%, #FFE9C9 0%, transparent 60%),
    radial-gradient(900px 460px at 4% 4%, #DCF3F0 0%, transparent 55%), var(--cream);
  color:var(--ink); font-family:var(--font-body); line-height:1.85;
  font-size:calc(1rem * var(--fs)); -webkit-text-size-adjust:100%;
}
img,svg{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--font-ui); line-height:1.35; margin:0}
button{font-family:var(--font-ui); cursor:pointer}
.skip{position:absolute; inset-inline-start:-9999px}
.skip:focus{inset-inline-start:12px; top:12px; z-index:99; background:#fff; padding:8px 14px; border-radius:10px}

/* ===== 2. Top bar ===== */
.topbar{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(14px); background:rgba(255,253,248,.86);
  border-bottom:2px solid var(--line);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px clamp(12px,4vw,28px);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem}
.brand span{background:linear-gradient(90deg,var(--teal),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent}
.tools{display:flex; gap:8px; margin-inline-start:auto; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:7px; border:2px solid var(--line);
  background:#fff; color:var(--ink); padding:8px 14px; border-radius:999px;
  font-weight:600; font-size:.86rem; transition:transform .2s ease, box-shadow .2s ease, background .2s;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 16px -10px rgba(18,48,74,.5)}
.btn.primary{background:linear-gradient(135deg,var(--teal),var(--teal-dk)); color:#fff; border-color:transparent}
.btn.round{padding:0; width:46px; height:46px; justify-content:center; border-radius:50%}
.btn.ghost{background:#fff}
.bar{height:5px; width:100%; background:#F3E4CE; border-radius:99px; overflow:hidden}
.bar span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--coral)); transition:width .25s}