*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --gold: #C9952A; --gold-dark: #A07820; --gold-light: #FBF0D8; --gold-faint: #FEF8EC;
  --brown: #2A1F0A; --brown-mid: #6B5339; --brown-light: #9A7A55;
  --cream: #FAF8F2; --cream-alt: #F2EAD8; --cream-dark: #E8DCC0;
  --surface: #FFFFFF;
  --green: #2E7D52; --green-light: #D4EDE2;
  --border: #E8DFC8; --border-strong: #C8B898;
  --shadow-sm: 0 1px 4px rgba(42,31,10,.06);
  --shadow-md: 0 4px 24px rgba(42,31,10,.10);
  --shadow-lg: 0 12px 48px rgba(42,31,10,.14);
  --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
  --heading: 'Playfair Display', Georgia, serif;
  --body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --arabic: 'Noto Sans Arabic', serif;
  --px: max(24px, calc((100vw - 1360px)/2));
}
html { scroll-behavior: smooth; }
body { font-family: var(--body); background: var(--cream); color: var(--brown); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
[dir="rtl"] body, [dir="rtl"] { font-family: var(--arabic); }

/* PATTERN */
.pat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpolygon points='30,3 33.7,19.6 49.1,10.9 40.5,26.2 57.1,30 40.5,33.8 49.1,49.1 33.7,40.4 30,57.1 26.3,40.4 10.9,49.1 19.5,33.8 3,30 19.5,26.2 10.9,10.9 26.3,19.6' fill='%23C9952A' opacity='0.045'/%3E%3C/svg%3E"); background-size: 60px 60px; }

/* TOP LANGUAGE BAR */
.top-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; height: 36px;
  background: var(--brown); display: flex; align-items: center; padding: 0 var(--px); }
.top-bar-inner { display: flex; align-items: center; justify-content: flex-end; gap: 20px;
  max-width: 1360px; width: 100%; margin: 0 auto; }
.top-bar-info { font-size: 12px; color: rgba(255,255,255,.35); letter-spacing: .03em; }
.top-bar-lang { display: flex; gap: 3px; }
.top-bar-lang .lang-link { padding: 3px 11px; border-radius: 14px; border: 1px solid rgba(255,255,255,.15);
  font-size: 12px; font-weight: 700; font-family: var(--body); cursor: pointer;
  transition: all .15s; background: transparent; color: rgba(255,255,255,.45); text-decoration: none; }
.top-bar-lang .lang-link.active { background: var(--gold); color: white; border-color: var(--gold); }
.top-bar-lang .lang-link:hover:not(.active) { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }

nav { position: fixed; top: 36px; left: 0; right: 0; z-index: 1000; height: 64px;
  display: flex; align-items: center; padding: 0 var(--px);
  background: rgba(250,248,242,.97); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; width: 100%; max-width: 1360px; margin: 0 auto; }
.nav-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-right: 40px; text-decoration: none; }
.nav-links { display: flex; gap: 28px; flex: 1; }
.nav-links a { font-size: 14px; color: var(--brown-mid); font-weight: 500; text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--gold-dark); }
.nav-right { display: flex; gap: 10px; align-items: center; }

/* push page content below the fixed bars */
main { padding-top: 100px; }
#hero { padding-top: 162px; }
main > #hero:first-child { margin-top: -100px; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; border-radius: var(--r-md); font-weight: 600; font-size: 14px; font-family: var(--body); cursor: pointer; border: none; transition: all .15s; text-decoration: none; }
.btn-primary { background: var(--gold); color: white; box-shadow: 0 2px 12px rgba(201,149,42,.3); }
.btn-primary:hover { background: var(--gold-dark); box-shadow: 0 6px 20px rgba(201,149,42,.45); }
.btn-secondary { background: var(--surface); color: var(--brown); border: 1.5px solid var(--border-strong); }
.btn-secondary:hover { background: var(--cream-alt); }
.btn-ghost { background: transparent; color: var(--gold-dark); border: 1.5px solid var(--gold); }
.btn-ghost:hover { background: var(--gold-faint); }
.btn-lg { padding: 14px 32px; font-size: 16px; border-radius: 13px; }
.btn-dark { background: rgba(255,255,255,.08); color: white; border: 1px solid rgba(255,255,255,.2); }
.btn-dark:hover { background: rgba(255,255,255,.16); }

/* SECTIONS */
section { padding: 96px var(--px); }
.section-inner { max-width: 1360px; margin: 0 auto; }
.section-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-dark); font-size: 13px; font-weight: 700; margin-bottom: 14px; letter-spacing: .04em; }
.section-tag::before { content: ''; width: 20px; height: 2px; background: var(--gold); border-radius: 1px; }
h1, h2, h3 { font-family: var(--heading); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: var(--arabic); }
.display-1 { font-size: clamp(38px, 5vw, 68px); font-weight: 700; line-height: 1.08; color: var(--brown); }
.display-2 { font-size: clamp(28px, 3.5vw, 46px); font-weight: 700; line-height: 1.15; color: var(--brown); }
/* Emphasis word in a headline (an <em> in CMS-editable rich copy) renders gold +
   italic — the styling lives here, NOT inline, so admins can mark a word with
   <em>…</em> and it survives sanitization. RTL (Arabic) stays upright. */
.display-1 em, .display-2 em { color: var(--gold); font-style: italic; }
[dir="rtl"] .display-1 em, [dir="rtl"] .display-2 em { font-style: normal; }
.lead { font-size: clamp(16px, 1.8vw, 19px); color: var(--brown-mid); line-height: 1.75; }

/* STAR */
.star-divider { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.star-divider::before, .star-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* CARD */
.card { background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.card-hover { transition: transform .2s, box-shadow .2s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* BADGE */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.badge-gold { background: var(--gold-light); color: var(--gold-dark); }
.badge-green { background: var(--green-light); color: var(--green); }
.badge-dark { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }

/* RTL support */
[dir="rtl"] .nav-links { direction: rtl; }
[dir="rtl"] .section-tag::before { margin-left: 0; margin-right: 0; }
[dir="rtl"] .nav-logo { margin-right: 0; margin-left: 40px; }

/* ANIMATIONS */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
.anim-1 { animation: fadeUp .5s .1s ease-out both; }
.anim-2 { animation: fadeUp .5s .2s ease-out both; }
.anim-3 { animation: fadeUp .5s .3s ease-out both; }
.anim-4 { animation: fadeUp .5s .4s ease-out both; }
.float { animation: float 4s ease-in-out infinite; }

/* STATS counter */
.stat-num { font-family: var(--heading); font-size: clamp(32px,4vw,52px); font-weight: 700; color: var(--gold); line-height: 1.1; }
.stat-label { font-size: 14px; color: var(--brown-mid); margin-top: 4px; }

/* SCROLLBAR */
::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
a { color: inherit; text-decoration: none; }

/* HORIZONTAL SCROLL */
.hscroll { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }

/* GRID */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
@media (max-width: 900px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .nav-links { display:none; }
  .hero-grid, .about-grid, .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .impact-stats { grid-template-columns: 1fr 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── Secondary pages (catalog / course / page / 404) ───────────────────────
   These compose with base + the new design system. Keep them legible. */
.catalog, .course-detail, .cms-page, .notfound { max-width: 1360px; margin: 0 auto; padding: 24px 0 64px; }
.catalog h1, .course-detail h1, .cms-page h1 { font-family: var(--heading); font-size: clamp(28px,3.5vw,44px); color: var(--brown); margin-bottom: 24px; }
.course-grid { list-style: none; display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.course-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.course-card a { display: block; padding: 22px; color: inherit; }
.course-card h3 { font-family: var(--heading); font-size: 18px; color: var(--brown); margin-bottom: 6px; }
.course-card .level { color: var(--gold-dark); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 8px; }
.course-card .desc { color: var(--brown-mid); font-size: 14px; line-height: 1.7; }
.course-detail .meta { display: flex; gap: 12px; margin-bottom: 18px; }
.course-detail .meta span { background: var(--cream-alt); color: var(--brown-mid); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.course-detail .desc { color: var(--brown-mid); line-height: 1.8; margin-bottom: 28px; max-width: 720px; }
.cms-page .body { color: var(--brown-mid); line-height: 1.8; max-width: 720px; }
.cms-page .body p { margin-bottom: 16px; }
.notfound { text-align: center; padding: 80px 0; }
.notfound h1 { font-size: 64px; color: var(--gold); }
.notfound p { color: var(--brown-mid); margin-top: 10px; }