/* ورقنا — base tokens & primitives */
:root{
  --primary:#15803d; --primary-2:#166534; --primary-3:#0f4c2c;
  --accent:#d97706; --accent-2:#f0c460; --gold:#e8b64c;
  --bg:#0f172a; --bg-2:#0b1220; --muted:#0f1f2b; --card:#131f33;
  --fg:#ffffff; --fg-2:#c7d2e0; --fg-3:#8ea0b8;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14);
  --danger:#dc2626; --ok:#22c55e;
  --felt:#0f5c37; --felt-2:#0b3f26;
  --r-sm:10px; --r-md:16px; --r-lg:22px;
  --shadow:0 18px 40px -20px rgba(0,0,0,.75);
  --glass:rgba(255,255,255,.05);
  --head:'Cairo',system-ui,sans-serif; --body:'IBM Plex Sans Arabic','Cairo',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--body);
  line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--head); font-weight:800; line-height:1.3; margin:0}
h1{font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-.5px}
h2{font-size:clamp(1.5rem,3.4vw,2.3rem)}
h3{font-size:clamp(1.1rem,2vw,1.4rem)}
p{margin:0 0 .8rem; color:var(--fg-2)}
a{color:inherit; text-decoration:none}
button{font-family:inherit; font-size:inherit; cursor:pointer}
img{max-width:100%; display:block}
.wrap{width:min(1240px,92vw); margin-inline:auto}
.grad{background:linear-gradient(100deg,var(--accent-2),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent}
.ic{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.ic-star{fill:var(--gold); stroke:var(--gold)}
.is-hidden{display:none !important}
.skip{position:absolute; inset-inline-start:-9999px}
.skip:focus{inset-inline-start:8px; top:8px; z-index:99; background:var(--accent); color:#1a1206; padding:8px 14px; border-radius:8px}
::selection{background:rgba(217,119,6,.35)}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:var(--r-sm); border:1px solid transparent;
  font-weight:700; font-family:var(--head); font-size:.98rem;
  transition:transform .18s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.btn-primary{background:linear-gradient(120deg,var(--primary),#1a9e4d); color:#fff; box-shadow:0 12px 28px -14px rgba(21,128,61,.9)}
.btn-primary:hover{box-shadow:0 18px 32px -14px rgba(21,128,61,1)}
.btn-accent{background:linear-gradient(120deg,var(--accent),#f2a93b); color:#1c1204}
.btn-outline{background:var(--glass); border-color:var(--border-2); color:var(--fg); backdrop-filter:blur(10px)}
.btn-outline:hover{background:rgba(255,255,255,.09)}
.btn-ghost{background:transparent; color:var(--fg-2); border-color:var(--border)}
.btn-ghost:hover{color:var(--fg); background:var(--glass)}
.btn-sm{padding:9px 15px; font-size:.88rem}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none !important}
.btn-block{width:100%}

/* chips, pills, seg */
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px;
  background:rgba(21,128,61,.16); border:1px solid rgba(34,197,94,.35); color:#b6f0cd;
  font-size:.82rem; font-weight:600
}
.eyebrow{
  display:inline-block; font-family:var(--head); font-weight:700; font-size:.78rem;
  letter-spacing:2px; text-transform:uppercase; color:var(--accent-2); margin-bottom:8px
}
.seg{display:inline-flex; padding:4px; gap:4px; background:var(--glass); border:1px solid var(--border); border-radius:999px}
.seg-btn{background:none; border:0; color:var(--fg-3); padding:8px 16px; border-radius:999px; font-weight:600; font-size:.88rem; transition:background .2s,color .2s}
.seg-btn:hover{color:var(--fg)}
.seg-btn.is-on{background:var(--primary); color:#fff}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important} html{scroll-behavior:auto}}