:root {
  color-scheme: light;
  --purple: #4b2e83;
  --purple-deep: #2f1b61;
  --teal: #008a86;
  --teal-deep: #006d6a;
  --aqua: #e6f7f6;
  --ink: #1f2937;
  --muted: #5e706c;
  --line: #d9e4e2;
  --surface: #ffffff;
  --background: #f7faf9;
  font-family: Inter, Tajawal, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--background); color: var(--ink); scroll-behavior: smooth; }
body { margin: 0; min-width: 0; font-size: 16px; line-height: 1.65; }
a { color: var(--purple); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--teal-deep); }
a:focus-visible { outline: 3px solid rgba(0, 138, 134, .35); outline-offset: 4px; border-radius: 4px; }
img { display: block; max-width: 100%; }
h1, h2, h3 { color: var(--purple-deep); font-family: Cinzel, Georgia, Tajawal, serif; line-height: 1.22; }
h1 { margin: .35rem 0 .8rem; font-size: clamp(2rem, 8vw, 4.5rem); }
h2 { margin: 2.1rem 0 .55rem; font-size: clamp(1.35rem, 4vw, 1.9rem); }
h3 { margin: 1.35rem 0 .35rem; font-size: 1.08rem; }
p, ul, ol { margin: .45rem 0 1rem; }
li + li { margin-top: .45rem; }

.site-header, main, .site-footer { width: min(100% - 2rem, 74rem); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5.25rem; padding-block: .75rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--purple-deep); font-family: Cinzel, Georgia, serif; font-size: 1.15rem; font-weight: 700; text-decoration: none; }
.brand img { width: 3.25rem; height: 3.25rem; object-fit: contain; }
.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem .7rem; border-radius: .75rem; font-weight: 650; text-decoration: none; }
.nav a[aria-current="page"] { background: var(--aqua); color: var(--teal-deep); }

.hero { position: relative; overflow: hidden; padding: clamp(2rem, 7vw, 5.5rem); border: 1px solid var(--line); border-radius: 2rem; background: linear-gradient(135deg, #fff 0%, var(--aqua) 58%, #eee9f8 100%); box-shadow: 0 24px 64px rgba(47, 27, 97, .09); }
.hero::after { position: absolute; inset-block-start: -7rem; inset-inline-end: -5rem; width: 18rem; height: 18rem; border: 3rem solid rgba(75, 46, 131, .06); border-radius: 50%; content: ""; }
.hero > * { position: relative; z-index: 1; }
.eyebrow { color: var(--teal-deep); font-size: .82rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.lede { max-width: 46rem; font-size: clamp(1.05rem, 2.5vw, 1.3rem); }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .65rem 1rem; border: 2px solid var(--purple); border-radius: .85rem; background: var(--purple); color: #fff; font-weight: 750; text-decoration: none; }
.button.secondary { background: transparent; color: var(--purple); }
.button:hover, .button:focus-visible { border-color: var(--teal-deep); background: var(--teal-deep); color: #fff; }

.content { width: min(100%, 48rem); margin-inline: auto; padding-block: 1.5rem 4rem; }
.wide { width: min(100%, 68rem); }
.notice { margin: 1rem 0 1.5rem; padding: 1rem; border-inline-start: .3rem solid var(--teal); border-radius: .6rem; background: var(--aqua); }
.warning { border-color: #9a6700; background: #fff6dc; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin-block: 1.5rem; }
.card { padding: 1.15rem; border: 1px solid var(--line); border-radius: 1.1rem; background: var(--surface); box-shadow: 0 10px 30px rgba(31, 41, 55, .05); }
.card h2, .card h3 { margin-top: 0; }
.language-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 750; }
.meta { color: var(--muted); font-size: .92rem; }
.site-footer { padding-block: 2rem max(2rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.site-footer p { margin: .25rem 0; }
[dir="rtl"] { font-family: Tajawal, Inter, system-ui, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: Tajawal, Georgia, serif; }

@media (max-width: 700px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .nav { width: 100%; justify-content: flex-start; overflow: visible; flex-wrap: wrap; padding-bottom: .25rem; }
  .nav a { flex: 1 1 calc(50% - .35rem); justify-content: center; text-align: center; }
  .hero { border-radius: 1.35rem; }
  .actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .nav, .actions { display: none; } .hero, .card { box-shadow: none; } }