/* تخطيطُ الصفحة — لا تعريفاتٍ هنا ولا مكوّناتٍ جديدة، فقط ترتيب ما سبق على الصفحة.
   يقابل core/theme في تطبيق دفتري: يقرأ الأرقام من tokens.css ولا يكتبها. */

* { box-sizing: border-box; }
body {
  font-family: var(--font);
  background: var(--bg); color: var(--ink); line-height: 1.9; margin: 0;
}
.wrap { max-width: 900px; margin: 0 auto; padding: 28px 20px 60px; }

header.hero {
  background: linear-gradient(160deg, var(--brand-dark), var(--brand));
  color: #fff; border-radius: 24px; padding: 52px 36px; margin: 24px 0 36px;
  box-shadow: var(--shadow-hover);
}
header.hero h1 { margin: 0 0 12px; font-size: 2.1rem; font-weight: 800; line-height: 1.5; }
header.hero p { margin: 0 0 22px; opacity: .92; font-size: 1.04rem; max-width: 60ch; }
.tag {
  display: inline-block; background: rgba(255, 255, 255, .16);
  padding: 5px 14px; border-radius: 999px; font-size: .82rem; margin-bottom: 16px;
}
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-cta .btn.ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .55); }
.hero-cta .btn.ghost:hover { background: rgba(255, 255, 255, .12); }

section { margin-bottom: 34px; scroll-margin-top: 76px; }
h2 { font-size: 1.25rem; margin: 0 0 16px; color: var(--ink); font-weight: 800; }
.grid { display: grid; gap: var(--gap-md); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

a { color: var(--brand); }
footer {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .86rem; text-align: center;
}