:root {
  --gh-primary: #5b2ca0;       /* logo purple */
  --gh-primary-2: #2d1b6b;     /* deep indigo */
  --gh-deep: #101430;           /* near-navy text */
  --gh-gold: #d6aa1b;           /* calligraphic gold accent */
  --gh-cream: #fff8e8;          /* soft paper */
  --gh-green: #1f8f4e;          /* supportive green (secondary actions) */
  --gh-muted: #6c6f86;
}

body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', 'Amiri', serif;
  color: var(--gh-deep);
}

.bg-cream { background: var(--gh-cream); }
.text-gold { color: var(--gh-gold); }

.text-gradient {
  background: linear-gradient(90deg, var(--gh-primary) 0%, var(--gh-primary-2) 35%, #2a9d8f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-gh-primary {
  --bs-btn-bg: var(--gh-primary);
  --bs-btn-border-color: var(--gh-primary);
  --bs-btn-hover-bg: var(--gh-primary-2);
  --bs-btn-hover-border-color: var(--gh-primary-2);
  --bs-btn-color: #fff;
}

.btn-outline-gh-primary {
  --bs-btn-color: var(--gh-primary);
  --bs-btn-border-color: var(--gh-primary);
  --bs-btn-hover-bg: var(--gh-primary);
  --bs-btn-hover-border-color: var(--gh-primary);
  --bs-btn-hover-color: #fff;
}

.btn-gh-success {
  --bs-btn-bg: var(--gh-green);
  --bs-btn-border-color: var(--gh-green);
  --bs-btn-hover-bg: #17703c;
  --bs-btn-hover-border-color: #17703c;
  --bs-btn-color: #fff;
}

.btn-outline-gh-muted {
  --bs-btn-color: var(--gh-muted);
  --bs-btn-border-color: #d0d3dc;
  --bs-btn-hover-bg: #f4f5f7;
  --bs-btn-hover-border-color: #c7cad6;
}

.navbar {
  box-shadow: 0 3px 16px rgba(16,20,48,.05);
}

.navbar .nav-link {
  color: var(--gh-deep);
  font-weight: 500;
}

.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--gh-primary) !important; }

.section-title-accent {
  position: relative;
  padding-left: 1rem;
}

.section-title-accent::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 6px;
  height: 1.2em;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--gh-gold), #ffd36b);
}

.pattern-geo {
  --p: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23ead9b9' stroke-width='1'><path d='M60 0v120M0 60h120'/><circle cx='60' cy='60' r='30'/><path d='M0 0l60 60L120 0M0 120l60-60 60 60'/></g></svg>");
  background-image: var(--p);
  background-size: 140px 140px;
  background-position: center;
}

.pattern-geo-soft {
  --p: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M0 40h80M40 0v80' stroke='%23efe5cf' fill='none'/><circle cx='40' cy='40' r='16' stroke='%23efe5cf' fill='none'/></svg>");
  background-image: var(--p);
  background-size: 100px 100px;
  background-repeat: repeat;
}

.arabic-bism {
  font-family: 'Amiri', serif;
  font-size: 2rem;
  color: var(--gh-gold);
  text-shadow: 0 1px 0 #fff;
}

.teacher-img { aspect-ratio: 1/1; object-fit: cover; }
.feature .icon-wrap {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: #f3f6f5;
  border-radius: 1rem;
  margin-inline: auto;
}

.cta-bg { background: #fffdf6; }
.cta-bg .bism { position: absolute; top: 16px; right: 24px; font-size: 1.4rem; color: #d6c08d; }

.card img { object-fit: cover; }
.ratio img { width: 100%; height: 100%; }

.topbar { background: #fbf7ee; border-bottom: 1px solid #f1ead9; }
.card.highlight { outline: 2px solid rgba(91,44,160,.15); }

.progress { height: 10px; background: #f0f2f6; }
.progress-bar { background: linear-gradient(90deg, var(--gh-primary), var(--gh-primary-2)); }

footer hr { border-color: #eee; }
footer a.btn { --bs-btn-padding-y: .45rem; }

@media (min-width: 992px) { .py-lg-6 { padding-block: 6rem; } }