/* الخطوط من الموقع نفسه (رخصة SIL OFL في fonts/) */
@font-face { font-family: "Tajawal"; src: url("fonts/Tajawal-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("fonts/Tajawal-Bold.ttf") format("truetype"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("fonts/Tajawal-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Lalezar"; src: url("fonts/Lalezar-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

/* موقع غطاوي: نفس ألوان اللعبة وخطوطها، تصميم ليلي واحد مقصود */
:root {
  --bg: #12142b;
  --panel: #1f2347;
  --line: #3a4078;
  --text: #f4f1ea;
  --muted: #a9acc9;
  --gold: #f4c04e;
  --gold-deep: #c9932a;
  --teal: #2ec4b6;
  --coral: #ff7a59;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: radial-gradient(1100px 600px at 50% -10%, #2a2f66 0%, var(--bg) 60%) no-repeat, var(--bg);
  color: var(--text);
  font: 400 17px/1.75 "Tajawal", "Geeza Pro", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); }
.wrap { max-width: 880px; margin: 0 auto; padding-inline: 20px; }

header.top { padding-block: 18px; }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.brand span { font: 400 26px/1 "Lalezar", "Tajawal", sans-serif; color: var(--gold); }
nav { display: flex; gap: 18px; font-size: 15px; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover, nav a[aria-current] { color: var(--text); }

/* الواجهة: مشهد السمرة (رسم كوديكس art/brand-v1/hero-samra.png) والنص على اليمين حيث الجدار الهادئ */
header.top { position: relative; z-index: 2; }
.hero {
  position: relative; margin-top: -76px; padding-block: 120px 64px;
  background: linear-gradient(270deg, rgba(10,11,30,.92) 0%, rgba(10,11,30,.72) 38%, rgba(10,11,30,.15) 70%, rgba(10,11,30,.35) 100%),
              linear-gradient(0deg, var(--bg) 0%, transparent 22%),
              url("hero.jpg") center / cover no-repeat;
  min-height: min(88vh, 760px); display: flex; align-items: center;
}
.hero-in { width: 100%; }
.hero-in > * { max-width: 30rem; }
.hero-icon { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.hero h1 { margin: 18px 0 6px; font: 400 clamp(56px, 10vw, 96px)/1.05 "Lalezar", "Tajawal", sans-serif; color: var(--gold); text-shadow: 0 6px 24px rgba(0,0,0,.6); }
.hero .lead { margin: 0; color: var(--text); font-size: clamp(17px, 2.2vw, 20px); text-wrap: pretty; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
@media (max-width: 700px) {
  .hero { background-position: 30% center; text-align: center; min-height: 0; padding-block: 110px 48px;
    background-image: linear-gradient(0deg, rgba(10,11,30,.95) 0%, rgba(10,11,30,.6) 55%, rgba(10,11,30,.4) 100%), url("hero.jpg"); }
  .hero-in > * { margin-inline: auto; }
}
.price {
  display: inline-flex; align-items: baseline; gap: 8px; margin-top: 22px;
  padding: 10px 22px; border-radius: 999px; border: 2px solid var(--gold-deep);
  font-weight: 800; font-size: 20px;
}
.price small { font-weight: 500; color: var(--muted); font-size: 15px; }
.soon { margin-top: 14px; font-size: 15px; color: var(--muted); }

.board {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  max-width: 420px; margin: 34px auto 8px;
}
.board div {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  text-align: center; padding-block: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.board div:nth-child(3n+1) { color: var(--teal); }
.board div:nth-child(3n+2) { color: var(--gold); }
.board div:nth-child(3n) { color: var(--coral); }

section { padding-block: 26px; }
h2 { font-size: 26px; margin: 0 0 14px; text-wrap: balance; }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.features div { background: var(--panel); border-radius: 16px; padding: 16px 18px; min-width: 0; }
.features b { display: block; font-size: 18px; margin-bottom: 2px; }
.features p { margin: 0; color: var(--muted); font-size: 16px; }

.doc { padding-block: 10px 40px; }
.doc h1 { font-size: clamp(30px, 6vw, 40px); margin: 10px 0 4px; color: var(--gold); }
.doc .date { color: var(--muted); margin: 0 0 22px; font-size: 15px; }
.doc h2 { font-size: 22px; margin: 28px 0 8px; }
.doc p, .doc li { max-width: 40em; }
.doc ul { padding-inline-start: 22px; }
.mail {
  display: inline-block; direction: ltr; font: 700 19px/1.4 ui-monospace, Menlo, monospace;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px;
  user-select: all;
}

footer { border-top: 1px solid var(--line); margin-top: 30px; padding-block: 22px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
footer a { color: var(--muted); }

@media (max-width: 560px) {
  .features { grid-template-columns: 1fr; }
  nav { gap: 12px; font-size: 14px; }
}