/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue-50:  #f0f8ff;
  --blue-100: #daf0fb;
  --blue-200: #b3e0f7;
  --blue-300: #7cc8f0;
  --blue-400: #3daee0;
  --blue-500: #1a8fc4;
  --blue-600: #1474a4;
  --blue-700: #0e5a84;
  --blue-800: #0a3f5e;
  --blue-900: #062840;
  --white: #ffffff;
  --yt-red: #1a8fc4;
  --yt-red-dark: #0e5a84;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-500: #64748b;
  --gray-700: #334155;
  --gold: #c8a84b;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.1);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.13);
  --radius: 12px;
  --radius-lg: 20px;
  --transition: .3s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--gray-700);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  letter-spacing: -.005em;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -.02em;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--blue-50); }
::-webkit-scrollbar-thumb { background: var(--blue-300); border-radius: 3px; }

/* ===== BUTTONS ===== */
.btn-primary {
  display: inline-block;
  background: var(--blue-500);
  color: var(--white);
  padding: .75rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: .95rem;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: var(--blue-600); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,143,196,.35); }

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--white);
  padding: .73rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: .95rem;
  border: 2px solid rgba(255,255,255,.7);
  transition: all var(--transition);
  cursor: pointer;
}
.btn-secondary:hover { background: rgba(255,255,255,.15); border-color: var(--white); transform: translateY(-2px); }

.btn-white {
  display: inline-block;
  background: var(--white);
  color: var(--blue-700);
  padding: .8rem 2.2rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.footer-contact i {
  color: var(--blue-300);
  width: 16px;
  margin-right: .4rem;
}

/* ===== LOGO ===== */
.nav-logo {
  height: 96px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter var(--transition), opacity var(--transition);
}
.navbar.scrolled .nav-logo {
  filter: brightness(0) saturate(100%) invert(18%) sepia(60%) saturate(600%) hue-rotate(185deg) brightness(90%);
}
.nav-logo:hover { opacity: .8; }

.footer-logo {
  height: 130px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .9;
}

/* ===== NAVBAR — modern glass pill ===== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1rem 0;
  transition: all var(--transition);
  background: transparent;
}
.navbar.scrolled {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 30px -10px rgba(10,63,94,.18);
  padding: .55rem 0;
  border-bottom: 1px solid rgba(255,255,255,.6);
}

.nav-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity var(--transition);
}
.nav-brand:hover { opacity: .85; }

/* Glass-pill nav links (desktop) */
.nav-links {
  display: flex;
  align-items: center;
  gap: .25rem;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.14);
  padding: .4rem;
  border-radius: 50px;
  transition: all var(--transition);
}
.navbar.scrolled .nav-links {
  background: var(--blue-50);
  border-color: var(--blue-100);
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1.1rem;
  font-size: .87rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  border-radius: 50px;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.nav-links a i { display: none; font-size: .85rem; }
.nav-links a:hover {
  background: rgba(255,255,255,.14);
  color: var(--white);
}
.navbar.scrolled .nav-links a { color: var(--gray-700); }
.navbar.scrolled .nav-links a:hover {
  background: var(--white);
  color: var(--blue-600);
  box-shadow: 0 4px 12px rgba(26,143,196,.18);
}

/* CTA wrap (donate + hamburger) */
.nav-cta-wrap {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-shrink: 0;
}

.nav-donate-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-300));
  color: var(--white);
  padding: .65rem 1.3rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: .85rem;
  transition: all var(--transition);
  box-shadow: 0 8px 20px rgba(26,143,196,.32);
  text-decoration: none;
}
.nav-donate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(26,143,196,.45);
}
.nav-donate-btn i { font-size: .78rem; }

/* Mobile-only items hidden on desktop */
.nav-mobile-header,
.nav-mobile-contact-block,
.nav-mobile-cta { display: none; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all var(--transition);
}
.navbar.scrolled .hamburger {
  background: var(--blue-50);
  border-color: var(--blue-100);
}
.hamburger:hover {
  background: rgba(255,255,255,.18);
}
.navbar.scrolled .hamburger:hover {
  background: var(--white);
  box-shadow: 0 4px 12px rgba(26,143,196,.18);
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all .35s ease;
  transform-origin: center;
}
.navbar.scrolled .hamburger span { background: var(--blue-700); }

/* Body open state — hamburger morphs to X */
body.nav-open .hamburger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
body.nav-open .hamburger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
body.nav-open .hamburger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Backdrop */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6,40,64,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
body.nav-open .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.nav-open { overflow: hidden; }

/* YouTube quick-link button (navbar) */
.nav-youtube {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--white);
  font-size: 1.1rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all var(--transition);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-youtube:hover {
  background: var(--yt-red);
  border-color: var(--yt-red);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26,143,196,.4);
}
.navbar.scrolled .nav-youtube {
  background: var(--blue-50);
  border-color: var(--blue-100);
  color: var(--yt-red);
}
.navbar.scrolled .nav-youtube:hover {
  background: var(--yt-red);
  border-color: var(--yt-red);
  color: #fff;
}

/* YouTube icon in mobile drawer = brand red */
.nav-mobile-contact .ico-youtube { color: var(--yt-red); }

/* Footer social icons */
.footer-social {
  display: flex;
  gap: .6rem;
  margin-top: 1.2rem;
}
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all var(--transition);
  text-decoration: none;
}
.footer-social a:hover {
  background: var(--yt-red);
  border-color: var(--yt-red);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(26,143,196,.35);
}

/* ===== HERO — modern mesh gradient ===== */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background:
    radial-gradient(ellipse at 20% 25%, rgba(124,200,240,.25) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(26,143,196,.35) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(61,174,224,.3) 0%, transparent 60%),
    linear-gradient(160deg, #062840 0%, #0a3f5e 40%, #0e5a84 100%);
  overflow: hidden;
  padding: 8rem 2rem 6rem;
  text-align: center;
}

@keyframes patternMove {
  0% { transform: translate(0,0); }
  100% { transform: translate(60px, 60px); }
}

/* Soft glowing orbs */
.hero::before, .hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: floatOrb 10s ease-in-out infinite;
  pointer-events: none;
}
.hero::before {
  width: 600px; height: 600px;
  top: -200px; right: -150px;
  background: radial-gradient(circle, rgba(124,200,240,.35), transparent 70%);
  animation-delay: 0s;
}
.hero::after {
  width: 450px; height: 450px;
  bottom: -150px; left: -100px;
  background: radial-gradient(circle, rgba(26,143,196,.3), transparent 70%);
  animation-delay: 5s;
}

@keyframes floatOrb {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.08); }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.95);
  padding: .45rem 1.2rem;
  border-radius: 50px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.3);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,.3); }
  50% { box-shadow: 0 0 0 8px rgba(34,197,94,.12); }
}
@keyframes haloRotate { to { transform: rotate(360deg); } }

@keyframes floatIcon {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(5deg); }
}
@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); opacity: .5; }
  50% { transform: rotate(45deg) translateY(6px); opacity: 1; }
}

/* ===== STATS BAR — floating glass card ===== */
.stats-bar {
  position: relative;
  z-index: 10;
  margin-top: -70px;
  padding: 0 2rem 5rem;
  background: transparent;
}
.stats-wrap {
  max-width: 1140px;
  margin: 0 auto;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 28px;
  box-shadow:
    0 30px 70px -20px rgba(10,63,94,.35),
    0 14px 30px -10px rgba(26,143,196,.18),
    inset 0 1px 0 rgba(255,255,255,.7);
  padding: 1.4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  position: relative;
  overflow: hidden;
}
/* subtle ambient glow inside the card */
.stats-wrap::before {
  content: '';
  position: absolute;
  top: -50%; left: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(124,200,240,.25), transparent 60%);
  pointer-events: none;
  filter: blur(40px);
}
.stats-wrap::after {
  content: '';
  position: absolute;
  bottom: -50%; right: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(168,216,234,.22), transparent 60%);
  pointer-events: none;
  filter: blur(40px);
}

.stat-tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(240,248,255,.85), rgba(255,255,255,.5));
  border: 1px solid var(--blue-100);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.stat-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(61,174,224,.06) 100%);
  opacity: 0;
  transition: opacity var(--transition);
}
.stat-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -8px rgba(26,143,196,.25);
  border-color: var(--blue-300);
}
.stat-tile:hover::after { opacity: 1; }

.stat-tile-icon {
  width: 54px; height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-400));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow:
    0 8px 18px rgba(26,143,196,.4),
    inset 0 1px 0 rgba(255,255,255,.3);
  position: relative;
  z-index: 2;
}

.stat-tile-content {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  min-width: 0;
}
.stat-tile-num {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--blue-800), var(--blue-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.02em;
}
.stat-tile-num small {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--blue-400);
  -webkit-text-fill-color: var(--blue-400);
}
.stat-tile-label {
  font-size: .76rem;
  color: var(--gray-500);
  margin-top: .4rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ===== SECTIONS ===== */
.section { padding: 6rem 2rem; }
.section-alt { background: var(--blue-50); }

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-tag {
  display: inline-block;
  background: var(--blue-100);
  color: var(--blue-600);
  padding: .3rem 1rem;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.section-title {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: 1rem;
}
.section-title .accent {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-200));
  border-radius: 2px;
  margin: 0 auto 1rem;
}
.section-desc {
  color: var(--gray-500);
  font-size: 1rem;
  max-width: 500px;
  margin: 0 auto;
}

/* ===== ABOUT — modern asymmetric layout ===== */
.about-section { padding-top: 5rem; }

.about-modern {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 4rem;
}

/* LEFT: framed showcase */
.about-showcase { display: flex; justify-content: center; }

.about-showcase-card {
  position: relative;
  background: linear-gradient(160deg, var(--blue-50) 0%, #fff 60%, var(--blue-50) 100%);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem 2.5rem;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 30px 60px -25px rgba(10,63,94,.25), var(--shadow-md);
  text-align: center;
  overflow: hidden;
}
.about-showcase-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(124,200,240,.15), transparent 60%);
  pointer-events: none;
}

.showcase-corner {
  position: absolute;
  width: 30px; height: 30px;
  border: 2px solid var(--blue-400);
}
.showcase-corner-tl { top: 14px; left: 14px;  border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.showcase-corner-tr { top: 14px; right: 14px; border-left: 0;  border-bottom: 0; border-top-right-radius: 8px; }
.showcase-corner-bl { bottom: 14px; left: 14px;  border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.showcase-corner-br { bottom: 14px; right: 14px; border-left: 0;  border-top: 0; border-bottom-right-radius: 8px; }

.showcase-emblem {
  position: relative;
  width: 170px; height: 170px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--white) 0%, var(--blue-50) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  box-shadow:
    0 14px 36px rgba(26,143,196,.22),
    inset 0 0 0 1px var(--blue-100);
}
.showcase-emblem img { width: 100%; height: auto; }
.showcase-emblem::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed var(--blue-200);
  animation: haloRotate 30s linear infinite;
}

.showcase-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue-400), transparent);
  margin: 0 auto 1.2rem;
  position: relative;
  z-index: 1;
}

.showcase-quote {
  position: relative;
  z-index: 1;
  color: var(--blue-800);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: .5rem;
  font-family: 'Amiri', serif;
}
.showcase-cite {
  position: relative;
  z-index: 1;
  color: var(--blue-500);
  font-size: .78rem;
  font-weight: 600;
  display: block;
  margin-bottom: 1.6rem;
  letter-spacing: .04em;
}

.showcase-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--blue-100);
}
.showcase-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.showcase-stat strong {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.showcase-stat span {
  font-size: .7rem;
  color: var(--gray-500);
  margin-top: .35rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}

/* RIGHT: content */
.about-content .section-tag { margin-bottom: 1rem; }
.about-heading {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: 1.4rem;
  line-height: 1.15;
}
.about-heading .accent {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.about-lead {
  font-size: 1.05rem;
  color: var(--blue-800);
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 1.1rem;
}
.about-content p {
  color: var(--gray-500);
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.about-checklist {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-bottom: 2rem;
}
.about-checklist li {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .94rem;
  color: var(--blue-800);
  font-weight: 500;
  padding-left: 0;
}
.about-checklist li i {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-300));
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(26,143,196,.3);
}

/* Values strip at bottom */
.values-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 1.8rem;
  align-items: center;
  background: linear-gradient(135deg, var(--blue-50), #fff);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  box-shadow: var(--shadow-sm);
}
.value-item {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.value-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-400));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(26,143,196,.3);
}
.value-item h4 {
  font-size: 1rem;
  color: var(--blue-900);
  font-weight: 700;
  margin-bottom: .25rem;
}
.value-item p {
  font-size: .82rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin: 0;
}
.value-divider {
  width: 1px;
  height: 50px;
  background: linear-gradient(180deg, transparent, var(--blue-200), transparent);
}

/* ===== MISSION — bento 2x2 ===== */
.mission-section { padding-top: 6rem; padding-bottom: 6rem; }

.pillars-bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.pillar-card {
  position: relative;
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  min-height: 320px;
  display: flex;
  flex-direction: column;
}
.pillar-card:hover { transform: translateY(-6px); }

.pillar-light {
  background: linear-gradient(155deg, var(--white) 0%, var(--blue-50) 100%);
  border: 1px solid var(--blue-100);
  box-shadow: 0 14px 36px -16px rgba(26,143,196,.25);
}
.pillar-light:hover { box-shadow: 0 24px 50px -16px rgba(26,143,196,.35); }

.pillar-dark {
  background: linear-gradient(155deg, var(--blue-800) 0%, var(--blue-600) 100%);
  border: 1px solid var(--blue-700);
  color: rgba(255,255,255,.9);
  box-shadow: 0 14px 36px -10px rgba(10,63,94,.45);
}
.pillar-dark:hover { box-shadow: 0 24px 50px -10px rgba(10,63,94,.55); }
.pillar-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(255,255,255,.12), transparent 60%);
  pointer-events: none;
}

.pillar-num {
  position: absolute;
  top: 1.2rem;
  right: 1.6rem;
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  pointer-events: none;
}
.pillar-light .pillar-num { color: var(--blue-100); }
.pillar-dark .pillar-num { color: rgba(255,255,255,.08); }

.pillar-icon-box {
  width: 64px; height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.pillar-light .pillar-icon-box {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-300));
  color: var(--white);
  box-shadow: 0 12px 26px rgba(26,143,196,.35);
}
.pillar-dark .pillar-icon-box {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--white);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

.pillar-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: .8rem;
  position: relative;
  z-index: 1;
}
.pillar-light h3 { color: var(--blue-900); }
.pillar-dark h3 { color: var(--white); }

.pillar-card p {
  font-size: .92rem;
  line-height: 1.75;
  margin-bottom: 1.3rem;
  position: relative;
  z-index: 1;
}
.pillar-light p { color: var(--gray-500); }
.pillar-dark p { color: rgba(255,255,255,.78); }

.pillar-features {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  position: relative;
  z-index: 1;
  margin-top: auto;
}
.pillar-features li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .85rem;
  font-weight: 500;
}
.pillar-light .pillar-features li { color: var(--blue-800); }
.pillar-dark .pillar-features li { color: rgba(255,255,255,.88); }
.pillar-features li i {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  flex-shrink: 0;
}
.pillar-light .pillar-features li i {
  background: var(--blue-100);
  color: var(--blue-600);
}
.pillar-dark .pillar-features li i {
  background: rgba(255,255,255,.18);
  color: var(--white);
}

@media (max-width: 820px) {
  .pillars-bento { grid-template-columns: 1fr; }
  .pillar-card { padding: 2rem; min-height: auto; }
  .pillar-num { font-size: 3rem; top: 1rem; right: 1.2rem; }

}

/* ===== COURSES — simple cards ===== */
.courses-section { background: var(--gray-50); }
.courses-simple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
}
.course-card {
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.course-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--blue-200); }
.course-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.3rem; }
.course-card-icon {
  width: 58px; height: 58px; border-radius: 16px;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-400));
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  box-shadow: 0 10px 22px rgba(26,143,196,.28);
}
.course-card-count {
  background: var(--blue-50); color: var(--blue-600); font-size: .72rem; font-weight: 700;
  padding: .4rem .85rem; border-radius: 50px; border: 1px solid var(--blue-100); white-space: nowrap;
}
.course-card h3 { font-size: 1.3rem; font-weight: 800; color: var(--blue-900); margin-bottom: .5rem; }
.course-card > p { font-size: .88rem; color: var(--gray-500); line-height: 1.7; margin-bottom: 1.3rem; }
.course-card-subjects { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.course-card-subjects span {
  background: var(--blue-50); color: var(--blue-700); font-size: .75rem; font-weight: 600;
  padding: .35rem .75rem; border-radius: 50px; border: 1px solid var(--blue-100);
}
.course-card-foot { margin-top: auto; }
.course-card-link {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 700;
  color: var(--yt-red); text-decoration: none; transition: gap var(--transition);
}
.course-card-link i { font-size: 1rem; }
.course-card:hover .course-card-link { gap: .75rem; }

@media (max-width: 900px) { .courses-simple { grid-template-columns: repeat(2, 1fr); } 
}
@media (max-width: 620px) { .courses-simple { grid-template-columns: 1fr; } 
}

.courses-cta-row {
  text-align: center;
  margin-top: 2.5rem;
}

/* ===========================================================
   COURSES PAGE — stats strip, YouTube, video grid, CTA
   =========================================================== */

/* hero gradient accent (reuse .accent inside donate-hero h1) */
.donate-hero h1 .accent {
  background: linear-gradient(135deg, var(--blue-300), var(--white));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Stats strip under hero */
.courses-strip {
  background: var(--white);
  border-bottom: 1px solid var(--blue-100);
  box-shadow: 0 10px 30px -16px rgba(10,63,94,.18);
}
.courses-strip-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.6rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.cs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .4rem 2.2rem;
}
.cs-item strong {
  font-size: 1.7rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.cs-item span {
  font-size: .76rem;
  color: var(--gray-500);
  margin-top: .35rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cs-divider {
  width: 1px;
  height: 38px;
  background: var(--blue-100);
}

/* YouTube button */
.yt-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--yt-red);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  padding: .7rem 1.4rem;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(26,143,196,.32);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  cursor: pointer;
  border: none;
}
.yt-btn:hover {
  background: var(--yt-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(26,143,196,.45);
}
.yt-btn i { font-size: 1.15rem; }
.yt-btn-lg { padding: .9rem 1.8rem; font-size: .95rem; }

/* ===== VIDEO LESSONS — modern ===== */
.video-section { background: var(--white); }
.vlessons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.vlesson-card {
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 40px -22px rgba(10,63,94,.22);
  transition: transform var(--transition), box-shadow var(--transition);
}
.vlesson-card:hover { transform: translateY(-6px); box-shadow: 0 28px 54px -22px rgba(10,63,94,.32); }
.vlesson-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.vlesson-thumb::before {
  content: '';
  position: absolute; inset: -50%;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 0, transparent 28px);
  pointer-events: none;
}
.vlesson-thumb-1 { background: linear-gradient(145deg, var(--blue-800), var(--blue-500)); }
.vlesson-thumb-2 { background: linear-gradient(145deg, #0a3f5e, var(--blue-600)); }
.vlesson-thumb-3 { background: linear-gradient(145deg, var(--blue-700), var(--blue-400)); }
.vlesson-thumb-4 { background: linear-gradient(145deg, var(--blue-900), var(--blue-600)); }
.vlesson-thumb-5 { background: linear-gradient(145deg, var(--blue-600), var(--blue-300)); }
.vlesson-thumb-6 { background: linear-gradient(145deg, #0a3f5e, var(--blue-500)); }
.vlesson-thumb .bg-ic {
  position: absolute; right: -8px; bottom: -16px;
  font-size: 6.5rem; color: rgba(255,255,255,.12);
  transition: transform .5s ease;
}
.vlesson-card:hover .vlesson-thumb .bg-ic { transform: scale(1.12) rotate(-6deg); }
.vlesson-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,40,64,.72) 0%, transparent 55%);
  pointer-events: none;
}
.vlesson-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255,255,255,.92); color: var(--blue-700);
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: .3rem .7rem; border-radius: 50px;
}
.vlesson-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(0,0,0,.4); backdrop-filter: blur(6px);
  color: #fff; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: .25rem .6rem; border-radius: 50px;
}
.vlesson-play {
  position: relative; z-index: 2;
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transition: transform var(--transition);
}
.vlesson-play i { margin-left: 3px; }
.vlesson-card:hover .vlesson-play { transform: scale(1.14); }
.vlesson-title {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
  color: #fff; font-size: 1.04rem; font-weight: 700; line-height: 1.25; margin: 0;
}
.vlesson-body { padding: 1.1rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.vlesson-body p { font-size: .83rem; color: var(--gray-500); line-height: 1.55; margin: 0; }
.vlesson-watch {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 700; color: var(--yt-red);
  transition: gap var(--transition);
}
.vlesson-watch i:last-child { font-size: .72rem; }
.vlesson-card:hover .vlesson-watch { gap: .75rem; }

/* ===== LIVE CLASSES — simple ===== */
.live-section { background: var(--gray-50); }
.live-tag .live-dot { vertical-align: middle; }
.live-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #e23b34;
  box-shadow: 0 0 0 4px rgba(226,59,52,.22);
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(226,59,52,.22); }
  50% { box-shadow: 0 0 0 7px rgba(226,59,52,.05); }
}

.live-card {
  max-width: 820px; margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 50px -26px rgba(10,63,94,.25);
  overflow: hidden;
}

/* head */
.live-card-head {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
  color: #fff;
  padding: 2rem 2.2rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.live-card-head::after {
  content: ''; position: absolute; top: -50px; right: -40px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,59,52,.28), transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.live-head-text { flex: 1; min-width: 220px; position: relative; z-index: 1; }
.live-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #e23b34; color: #fff;
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: 50px; margin-bottom: .9rem;
}
.live-badge .live-dot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.35); animation: livePulseW 1.6s ease-in-out infinite; }
@keyframes livePulseW { 0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.35)} 50%{box-shadow:0 0 0 7px rgba(255,255,255,.08)} }
.live-card-head h3 { font-size: 1.35rem; font-weight: 800; margin-bottom: .35rem; }
.live-card-head p { font-size: .86rem; color: rgba(255,255,255,.75); line-height: 1.6; max-width: 460px; margin: 0; }
.live-watch-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: .55rem;
  background: #fff; color: var(--blue-800);
  font-weight: 700; font-size: .88rem;
  padding: .75rem 1.4rem; border-radius: 50px; text-decoration: none;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  transition: transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.live-watch-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(0,0,0,.3); }
.live-watch-btn i { color: var(--yt-red); }

/* body / schedule */
.live-card-body { padding: 1.6rem 2.2rem 1.8rem; }
.live-body-title {
  display: flex; align-items: center; gap: .55rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--blue-600); margin-bottom: 1rem;
}
.live-body-title i { color: var(--blue-400); }
.live-list { display: flex; flex-direction: column; }
.live-item {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--blue-50);
}
.live-item:last-child { border-bottom: none; }
.live-item-day { width: 108px; flex-shrink: 0; font-size: .84rem; font-weight: 700; color: var(--blue-800); }
.live-item-name { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; color: var(--blue-900); }
.live-item-time { font-size: .82rem; color: var(--gray-500); white-space: nowrap; }
.live-item-status {
  font-size: .66rem; font-weight: 700; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 50px; width: 86px;
  background: #fdeceb; color: #c0392b;
}
.live-item-status.soon { background: var(--blue-50); color: var(--blue-600); }
.live-foot { font-size: .74rem; color: var(--gray-500); margin-top: 1.1rem; }

@media (max-width: 640px) {
  .live-card-head { padding: 1.6rem; }
  .live-card-body { padding: 1.4rem 1.6rem 1.6rem; }
  .live-watch-btn { width: 100%; justify-content: center; }
  .live-item { flex-wrap: wrap; row-gap: .15rem; }
  .live-item-day { width: 100%; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--blue-400); }
  .live-item-name { order: 2; }
  .live-item-time { order: 3; margin-left: auto; }
  .live-item-status { order: 4; width: auto; }

}

/* ===== YOUTUBE CHANNEL CTA ===== */
.yt-cta-section { padding: 5rem 2rem; background: var(--gray-50); }
.yt-cta {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(155deg, var(--blue-900), var(--blue-700));
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(10,63,94,.5);
}
.yt-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(26,143,196,.12), transparent 55%);
  pointer-events: none;
}
.yt-cta-icon {
  width: 80px; height: 80px;
  border-radius: 22px;
  background: var(--yt-red);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 16px 36px rgba(26,143,196,.45);
  position: relative;
  z-index: 1;
}
.yt-cta h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  color: var(--white);
  font-weight: 800;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}
.yt-cta p {
  color: rgba(255,255,255,.8);
  line-height: 1.8;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}
.yt-cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.btn-outline-light {
  display: inline-flex;
  align-items: center;
  padding: .9rem 1.8rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.05);
  text-decoration: none;
  transition: all var(--transition);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.5);
  transform: translateY(-2px);
}

/* Courses page responsive */
@media (max-width: 900px) {
  .vlessons-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-item { padding: .4rem 1.4rem; }
}
@media (max-width: 600px) {
  .vlessons-grid { grid-template-columns: 1fr; }
  .courses-strip-inner { padding: 1.2rem; gap: .4rem 0; }
  .cs-item { padding: .5rem 1rem; flex: 1 1 40%; }
  .cs-divider { display: none; }
  .yt-cta { padding: 2.2rem 1.4rem; }
  .yt-cta-actions { flex-direction: column; }
  .yt-cta-actions a { width: 100%; justify-content: center; }

}

/* ===== MARKAZ DONATION CTA — modern split ===== */
.mosque-cta {
  position: relative;
  padding: 5rem 2rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(124,200,240,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(26,143,196,.28) 0%, transparent 55%),
    linear-gradient(160deg, #062840 0%, #0a3f5e 40%, #0e5a84 100%);
}
.mosque-cta::before,
.mosque-cta::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.mosque-cta::before {
  width: 520px; height: 520px;
  top: -180px; right: -120px;
  background: radial-gradient(circle, rgba(124,200,240,.32), transparent 70%);
  animation: floatOrb 12s ease-in-out infinite;
}
.mosque-cta::after {
  width: 420px; height: 420px;
  bottom: -140px; left: -120px;
  background: radial-gradient(circle, rgba(26,143,196,.28), transparent 70%);
  animation: floatOrb 14s ease-in-out infinite reverse;
}

.cta-modern {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
}

/* ===== LEFT: glass visual panel ===== */
.cta-visual {
  position: relative;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
}
.cta-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.1) 0%, transparent 65%);
  pointer-events: none;
}

.cta-status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.32);
  color: #22c55e;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .4rem 1rem;
  border-radius: 50px;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}
.cta-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.3);
  animation: dotPulse 2s ease-in-out infinite;
}

.cta-icon-frame {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.cta-icon-frame::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,200,240,.35), transparent 70%);
  filter: blur(20px);
  z-index: 0;
}
.cta-icon-frame i {
  font-size: 3.6rem;
  background: linear-gradient(135deg, var(--blue-200), var(--white));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 8px 16px rgba(124,200,240,.4));
}
.cta-icon-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  animation: haloRotate 30s linear infinite;
}
.cta-icon-ring-2 {
  inset: -24px;
  border: 1px dashed rgba(124,200,240,.35);
  animation: haloRotate 50s linear infinite reverse;
}

.cta-mini-progress {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  position: relative;
  z-index: 1;
}
.cta-mini-progress-stats {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .55rem;
}
.cta-mini-progress-stats strong {
  font-size: 1.9rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--blue-200), var(--white));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.cta-mini-progress-stats span {
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cta-mini-progress-bar {
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: .55rem;
}
.cta-mini-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-300), var(--white));
  border-radius: 50px;
  animation: fillBar 2s cubic-bezier(.4,0,.2,1) .3s both;
  position: relative;
}
.cta-mini-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 16px; height: 100%;
  background: rgba(255,255,255,.55);
  border-radius: 50px;
  animation: shimmer 2s ease-in-out infinite;
}
@keyframes fillBar { from { width: 0 !important; } }
.cta-mini-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  color: rgba(255,255,255,.5);
  font-weight: 500;
}

/* ===== RIGHT: content ===== */
.cta-modern .cta-content {
  position: relative;
  text-align: left;
  max-width: none;
  margin: 0;
  z-index: 1;
}

.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  padding: .45rem 1.1rem;
  border-radius: 50px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.cta-badge i { color: var(--blue-300); font-size: .7rem; }

.cta-modern .cta-content h2 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 1rem;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.cta-modern .cta-content h2 .accent {
  background: linear-gradient(135deg, var(--blue-300), var(--white));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cta-modern .cta-content p {
  font-size: 1rem;
  color: rgba(255,255,255,.78);
  line-height: 1.75;
  margin-bottom: 1.6rem;
  max-width: 500px;
}

.cta-features {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-bottom: 2rem;
}
.cta-feature {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: rgba(255,255,255,.88);
  font-weight: 500;
}
.cta-feature i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.4);
  color: #22c55e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  flex-shrink: 0;
}

.cta-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-300));
  color: var(--white);
  padding: 1rem 1.8rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(26,143,196,.45);
  transition: all var(--transition);
}
.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(26,143,196,.6);
}
.cta-primary .cta-arrow {
  font-size: .78rem;
  margin-left: .2rem;
  transition: transform var(--transition);
}
.cta-primary:hover .cta-arrow { transform: translateX(4px); }

.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: .9rem;
  padding: .85rem 1.4rem;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  text-decoration: none;
  transition: all var(--transition);
}
.cta-secondary:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.4);
}
.cta-secondary i { color: var(--blue-300); font-size: .8rem; }

@media (max-width: 900px) {
  .mosque-cta { padding: 4rem 1.5rem; }
  .cta-modern { grid-template-columns: 1fr; gap: 2rem; max-width: 560px; }
  .cta-visual { padding: 2.2rem 1.8rem 1.8rem; }
  .cta-modern .cta-content { text-align: center; }
  .cta-modern .cta-content p { margin-left: auto; margin-right: auto; }
  .cta-features { justify-content: center; }
  .cta-actions { justify-content: center; }

}

@media (max-width: 480px) {
  .mosque-cta { padding: 3rem 1rem; }
  .cta-icon-frame { width: 120px; height: 120px; }
  .cta-icon-frame i { font-size: 3rem; }
  .cta-mini-progress-stats strong { font-size: 1.6rem; }
  .cta-features { flex-direction: column; align-items: flex-start; max-width: 240px; margin-left: auto; margin-right: auto; gap: .6rem; }
  .cta-actions { flex-direction: column; width: 100%; }
  .cta-primary, .cta-secondary { width: 100%; justify-content: center; }

}

/* ===== CONTACT — floating cards + modern form ===== */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 2.5rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.contact-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg);
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;
  box-shadow: 0 8px 24px -8px rgba(10,63,94,.12);
}
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -10px rgba(26,143,196,.28);
  border-color: var(--blue-300);
}

.contact-card-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-300));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 10px 22px rgba(26,143,196,.32);
}

.contact-card-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-400);
  margin-bottom: .5rem;
}
.contact-card-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: 1rem;
  line-height: 1.4;
}
.contact-card-link {
  font-size: .82rem;
  font-weight: 600;
  color: var(--blue-500);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: gap var(--transition);
}
.contact-card-link i { font-size: .7rem; }
.contact-card:hover .contact-card-link { gap: .8rem; }

/* Primary/dark card (middle) */
.contact-card-primary {
  background: linear-gradient(155deg, var(--blue-800), var(--blue-600));
  border-color: var(--blue-700);
  color: var(--white);
  box-shadow: 0 14px 36px -10px rgba(10,63,94,.45);
}
.contact-card-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 60%);
  pointer-events: none;
}
.contact-card-primary:hover {
  box-shadow: 0 22px 44px -10px rgba(10,63,94,.55);
  border-color: var(--blue-500);
}
.contact-card-primary .contact-card-icon {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
.contact-card-primary .contact-card-label { color: rgba(255,255,255,.65); }
.contact-card-primary .contact-card-value { color: var(--white); }
.contact-card-primary .contact-card-link { color: rgba(255,255,255,.92); }

/* Form card */
.contact-form-modern {
  max-width: 820px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(10,63,94,.25);
}

.contact-form-header {
  padding: 2rem 2.5rem;
  background: linear-gradient(135deg, var(--blue-50), #fff);
  border-bottom: 1px solid var(--blue-100);
  text-align: center;
}
.contact-form-header h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: .4rem;
}
.contact-form-header p {
  color: var(--gray-500);
  font-size: .9rem;
  margin: 0;
}

.contact-form-modern .contact-form { padding: 2rem 2.5rem 2.5rem; }
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group { margin-bottom: 1.2rem; }
.form-group label {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--blue-800);
  margin-bottom: .4rem;
}
.form-group label i {
  color: var(--blue-400);
  font-size: .72rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid var(--blue-200);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .92rem;
  color: var(--gray-700);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 4px rgba(61,174,224,.15);
}

.contact-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 1rem;
}

.form-success {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
  background: #dcfce7;
  color: #166534;
  border-radius: var(--radius);
  text-align: center;
  font-weight: 500;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--blue-900);
  padding: 4rem 2rem 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-links h4, .footer-contact h4 {
  color: var(--white);
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.footer-links ul { display: flex; flex-direction: column; gap: .7rem; }
.footer-links a { color: rgba(255,255,255,.6); font-size: .9rem; transition: color var(--transition); }
.footer-links a:hover { color: var(--blue-200); }
.footer-contact p { color: rgba(255,255,255,.6); font-size: .88rem; margin-bottom: .6rem; }
.footer-contact a { color: rgba(255,255,255,.6); transition: color var(--transition); }
.footer-contact a:hover { color: var(--blue-200); }

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.footer-hadith {
  font-style: italic;
  color: rgba(255,255,255,.4);
  font-size: .85rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
}
.footer-bottom p { color: rgba(255,255,255,.3); font-size: .82rem; }

/* ===== ANIMATIONS ===== */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp .7s ease forwards;
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== DONATE PAGE ===== */
.donate-hero {
  background: linear-gradient(145deg, var(--blue-800) 0%, var(--blue-600) 100%);
  padding: 10rem 2rem 6rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.donate-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 0, transparent 50%);
  background-size: 30px 30px;
}
.donate-hero-content { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.donate-hero h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--white); font-weight: 700; margin-bottom: 1rem; }
.donate-hero p { color: rgba(255,255,255,.8); margin: 0 auto 2rem; font-size: 1.05rem; line-height: 1.8; }
.donate-hero-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
@keyframes shimmer { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(61,174,224,.15); }
  50% { box-shadow: 0 0 0 7px rgba(61,174,224,.08); }
}
.phase-icon-box.active   { background: #fef3c7; color: #92400e; }
.form-card-body { padding: 1.8rem 2rem; }
.preset-btn:hover, .preset-btn.active {
  border-color: var(--blue-500);
  background: var(--blue-500);
  color: var(--white);
}

.form-group { margin-bottom: .9rem; }
.form-group label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--blue-800);
  margin-bottom: .35rem;
}
.form-group label i { color: var(--blue-400); font-size: .72rem; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .65rem .9rem;
  border: 1.5px solid var(--blue-200);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .88rem;
  color: var(--gray-700);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(61,174,224,.12);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .about-modern { grid-template-columns: 1fr; gap: 2.5rem; }
  .values-strip { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.8rem; }
  .value-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--blue-200), transparent); }
  .hero-logo-wrap { max-width: 100%; height: auto; padding: 2rem 0; }
  .float-icon { width: 44px; height: 44px; font-size: 1.1rem; }
  .float-icon-1 { top: 0; left: 0; }
  .float-icon-2 { top: 0; right: 0; }
  .float-icon-3 { bottom: 0; left: 0; }
  .float-icon-4 { bottom: 0; right: 0; }
  .contact-cards { grid-template-columns: 1fr; gap: 1rem; }
  .contact-form-modern .contact-form { padding: 1.5rem; }
  .contact-form-header { padding: 1.5rem; }
  .contact-form-row { grid-template-columns: 1fr; }
  .course-spread, .course-spread.reverse { grid-template-columns: 1fr; }
  .course-spread.reverse .course-visual { order: 0; }
  .course-spread.reverse .course-detail { order: 0; }
  .course-visual { min-height: 220px; }
  .course-big-icon { width: 88px; height: 88px; font-size: 2.2rem; }
  .course-detail { padding: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .donate-layout { grid-template-columns: 1fr; }
  .donate-right { position: static; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Show hamburger, hide desktop donate */
  .hamburger { display: flex; }
  .nav-cta-wrap .nav-donate-btn { display: none; }

  /* Off-canvas drawer panel */
  .nav-links {
    position: fixed;
    top: 0; right: -100%;
    width: 340px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, var(--blue-900) 0%, var(--blue-800) 100%);
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem 1.2rem 1.5rem;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: -20px 0 60px rgba(0,0,0,.4);
    overflow-y: auto;
    transition: right .4s cubic-bezier(.4,0,.2,1);
    gap: 0;
    z-index: 1001;
  }
  body.nav-open .nav-links { right: 0; }
  .navbar.scrolled .nav-links {
    background: linear-gradient(180deg, var(--blue-900) 0%, var(--blue-800) 100%);
    border: none;
  }

  .nav-links li { width: 100%; list-style: none; }
  .nav-links a {
    color: rgba(255,255,255,.85);
    padding: .85rem 1rem;
    font-size: .98rem;
    border-radius: 12px;
    background: transparent;
    width: 100%;
    margin-bottom: .15rem;
    transition: all .25s;
  }
  .nav-links a i {
    display: inline-flex;
    width: 22px;
    color: var(--blue-300);
    font-size: .9rem;
    justify-content: center;
  }
  .nav-links a:hover,
  .navbar.scrolled .nav-links a:hover {
    background: rgba(255,255,255,.08);
    color: var(--white);
    box-shadow: none;
    transform: translateX(4px);
  }
  .navbar.scrolled .nav-links a { color: rgba(255,255,255,.85); }

  /* Mobile header inside drawer */
  .nav-mobile-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-mobile-logo {
    height: 56px;
    width: auto;
    filter: brightness(0) invert(1);
  }
  .nav-close {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    color: var(--white);
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    flex-shrink: 0;
    padding: 0;
  }
  .nav-close:hover {
    background: rgba(255,255,255,.18);
    transform: rotate(90deg);
  }

  /* Contact block in drawer */
  .nav-mobile-contact-block {
    display: flex !important;
    flex-direction: column;
    gap: .2rem;
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .nav-mobile-label {
    font-size: .7rem;
    font-weight: 700;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 0 1rem;
    margin-bottom: .4rem;
  }
  .nav-mobile-contact {
    color: rgba(255,255,255,.7) !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
    padding: .55rem 1rem !important;
    background: transparent !important;
    border-radius: 10px !important;
    transition: all .25s !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .65rem;
  }
  .nav-mobile-contact:hover {
    background: rgba(255,255,255,.06) !important;
    color: var(--white) !important;
    transform: none !important;
  }
  .nav-mobile-contact i {
    display: inline-flex !important;
    width: 18px;
    color: var(--blue-300);
    font-size: .8rem;
  }

  /* CTA at bottom of drawer */
  .nav-mobile-cta {
    display: block !important;
    margin-top: auto;
    padding-top: 1.2rem;
  }
  .nav-mobile-donate {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-300));
    color: var(--white);
    padding: 1rem !important;
    border-radius: 14px;
    font-weight: 700;
    font-size: .95rem;
    width: 100%;
    box-shadow: 0 12px 28px rgba(26,143,196,.45);
    text-decoration: none;
    transition: all var(--transition);
  }
  .nav-mobile-donate:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(26,143,196,.55);
  }
  .nav-mobile-donate i {
    display: inline-flex !important;
    color: var(--white) !important;
    font-size: .9rem !important;
  }

  .section { padding: 4rem 1.5rem; }
  .stats-bar { padding: 0 1rem 4rem; margin-top: -50px; }
  .stats-wrap { grid-template-columns: repeat(2, 1fr); padding: 1rem; border-radius: 22px; }
  .stat-tile-num { font-size: 1.6rem; }
  .footer-grid { grid-template-columns: 1fr; }

}

@media (max-width: 480px) {
  .stats-wrap { grid-template-columns: 1fr; }

}

/* ===========================================================
   DONATE PAGE — responsive
   =========================================================== */
@media (max-width: 768px) {
  /* hero */
  .donate-hero { padding: 7rem 1.2rem 3.5rem; }
  .donate-hero h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .donate-hero p { font-size: .92rem; line-height: 1.7; margin-bottom: 1.5rem; }
  .donate-hero-actions { gap: .6rem; }

  /* hadith strip */
  .hadith-banner { padding: 1rem 1.2rem; flex-direction: column; gap: .4rem; text-align: center; }
  .hadith-banner p { font-size: .85rem; line-height: 1.6; }
  .hadith-quote-icon { font-size: .95rem; }

  /* main layout container */
  .donate-main { padding: 2.5rem 1rem 3rem; }
  .donate-layout { gap: 1.2rem; }
  .donate-left { gap: 1.2rem; }
  .donate-right { gap: 1rem; }

  /* progress card */
  .progress-card { padding: 1.4rem; }
  .progress-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1.4rem;
  }
  .progress-card h2 { font-size: 1.1rem; }
  .progress-subtitle { font-size: .8rem; }

  .progress-amounts { gap: 1rem; align-items: center; }
  .amount-raised { font-size: 1.6rem; }
  .amount-goal { font-size: .76rem; }
  .progress-percent-circle { width: 56px; height: 56px; }
  .progress-percent-circle span { font-size: .78rem; }

  .progress-bar-wrap { height: 8px; }

  .progress-meta {
    gap: .8rem 1.2rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
  }
  .meta-item { font-size: .78rem; }
  .meta-item strong { font-weight: 700; }

  /* MILESTONES — convert horizontal track to vertical timeline */
  .milestones-title { font-size: .7rem; margin-bottom: 1rem; }
  .milestones-track {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .milestone-item {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: .9rem;
    padding: .4rem 0;
  }
  .milestone-node {
    width: 36px;
    height: 36px;
    font-size: .75rem;
    margin: 0;
    flex-shrink: 0;
  }
  .milestone-info {
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
  }
  .milestone-label { font-size: .82rem; line-height: 1.3; text-align: left; }
  .milestone-amount { font-size: .82rem; }
  .milestone-line {
    width: 2px;
    height: 16px;
    margin: 0 0 0 17px;
    flex: 0 0 16px;
    align-self: flex-start;
    background: var(--blue-100);
  }
  .milestone-line.reached-line { background: var(--blue-400); }

  /* progress stats */
  .progress-stats { gap: .5rem; }
  .p-stat { padding: .7rem .3rem; }
  .p-stat-num { font-size: 1.1rem; }
  .p-stat-label { font-size: .66rem; }

  /* info cards */
  .donate-info-card { padding: 1.3rem; }
  .info-card-header {
    gap: .8rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
  .info-card-icon { width: 40px; height: 40px; font-size: .9rem; border-radius: 10px; }
  .info-card-header h3 { font-size: .95rem; }
  .info-card-header p { font-size: .76rem; line-height: 1.5; }

  /* phases — keep horizontal but tighter; let badge wrap below if narrow */
  .phase-row {
    gap: .7rem;
    padding: .8rem 0;
    flex-wrap: wrap;
    align-items: center;
  }
  .phase-icon-box { width: 34px; height: 34px; font-size: .78rem; }
  .phase-content { flex: 1; min-width: 0; }
  .phase-name { font-size: .82rem; }
  .phase-detail { font-size: .74rem; }
  .phase-badge {
    font-size: .62rem;
    padding: .2rem .55rem;
    margin-top: 0;
  }

  /* why donate */
  .why-grid { gap: .8rem; }
  .why-icon-box { width: 34px; height: 34px; font-size: .82rem; border-radius: 9px; }
  .why-item { gap: .8rem; }
  .why-item strong { font-size: .85rem; }
  .why-item p { font-size: .76rem; line-height: 1.5; }

  /* form card */
  .form-card-header { padding: 1.4rem 1.5rem; }
  .form-card-header h2 { font-size: 1.15rem; }
  .form-card-header p { font-size: .8rem; }
  .form-header-icon { font-size: 1.5rem; margin-bottom: .6rem; }

  .form-card-body { padding: 1.3rem 1.4rem 1.5rem; }

  .amount-presets { gap: .4rem; }
  .preset-btn { padding: .55rem .3rem; font-size: .78rem; }

  .custom-amount-label { font-size: .74rem; }
  .currency-prefix { padding: .65rem .8rem; font-size: .82rem; }
  .custom-amount-input { padding: .65rem .8rem; font-size: 1rem; }

  .form-group { margin-bottom: .75rem; }
  .form-group label { font-size: .76rem; margin-bottom: .3rem; }
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: .6rem .85rem;
    font-size: .86rem;
  }

  .anon-row {
    padding: .6rem .8rem;
    margin-bottom: 1rem;
  }
  .anon-row label { font-size: .78rem; }

  .donate-submit {
    font-size: .92rem;
    padding: .85rem;
    margin-bottom: 1rem;
  }

  .donate-contact-note { font-size: .73rem; padding: .8rem; line-height: 1.6; }
  .donate-contact-links { gap: .6rem; }
  .donate-contact-links a { font-size: .75rem; }

  /* quick contact card */
  .quick-contact-box { padding: 1.2rem 1.4rem; }
  .qc-title { font-size: .72rem; }
  .qc-link { font-size: .85rem; padding: .45rem; }

  /* success */
  .donation-success { padding: 2rem 1.2rem; }
  .success-icon { width: 56px; height: 56px; font-size: 1.4rem; }
  .donation-success h3 { font-size: 1.1rem; }
  .donation-success p { font-size: .82rem; }
}

@media (max-width: 480px) {
  .donate-hero { padding: 6rem 1rem 3rem; }
  .donate-hero h1 { font-size: 1.5rem; }
  .donate-hero p { font-size: .85rem; margin-bottom: 1.3rem; }
  .donate-hero-actions { flex-direction: column; width: 100%; align-items: stretch; }
  .donate-hero-actions a { width: 100%; text-align: center; }
  .form-card-body { padding: 1.1rem 1.2rem 1.3rem; }

}

/* Large desktop refinement — keep content centered with extra breathing room */
@media (min-width: 1400px) {
  .donate-layout { max-width: 1220px; gap: 2.5rem; }
  .progress-card { padding: 2.5rem; }
  .form-card-header { padding: 2.2rem 2.5rem; }
  .form-card-body { padding: 2.2rem 2.5rem 2.5rem; }
  .donate-info-card { padding: 2rem; }
}

/* Small laptops + iPad landscape (900–1100px): keep 2-col but tighten interior padding */
@media (min-width: 901px) and (max-width: 1100px) {
  .donate-layout { gap: 1.4rem; }
  .progress-card { padding: 1.6rem; }
  .form-card-header { padding: 1.5rem 1.7rem; }
  .form-card-body { padding: 1.5rem 1.7rem 1.7rem; }
  .donate-info-card { padding: 1.4rem; }
  .amount-presets { gap: .45rem; }
  .preset-btn { padding: .55rem .35rem; font-size: .82rem; }
}

/* iPad portrait + larger phones (640–820px): give back some side padding */
@media (min-width: 640px) and (max-width: 820px) {
  .donate-main { padding: 3rem 1.6rem 3.5rem; }
  .donate-layout { max-width: 620px; }
}

/* Very small phones (≤360px): folding phones, older devices */
@media (max-width: 360px) {
  .donate-hero h1 { font-size: 1.35rem; }
  .donate-hero p { font-size: .8rem; }
  .donate-main { padding: 1.6rem .55rem 2rem; }

  .progress-card { padding: .95rem; }
  .donate-info-card { padding: .95rem; }
  .form-card-header { padding: 1rem 1rem; }
  .form-card-body { padding: 1rem 1rem 1.2rem; }

  .amount-presets { grid-template-columns: repeat(2, 1fr); }
  .preset-btn { font-size: .76rem; padding: .55rem .25rem; }

  .amount-raised { font-size: 1.35rem; }
  .progress-percent-circle { width: 50px; height: 50px; margin-top: -2.5rem; }
  .progress-percent-circle span { font-size: .72rem; }

  .meta-item { font-size: .7rem; }
  .p-stat-num { font-size: .92rem; }
  .p-stat-label { font-size: .56rem; }

  .milestone-label,
  .milestone-amount { font-size: .76rem; }
  .milestone-node { width: 32px; height: 32px; font-size: .68rem; }
  .milestone-line { margin-left: 15px; }

  .phase-row { flex-wrap: wrap; gap: .6rem; }
  .phase-badge { margin-left: 50px; align-self: flex-start; }

  .donate-contact-links { flex-direction: column; gap: .35rem; }

  .form-group input,
  .form-group select,
  .form-group textarea { font-size: .82rem; padding: .55rem .75rem; }
}

/* Landscape phones: prevent the hero from taking the whole viewport */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) {
  .donate-hero { padding: 5rem 1.5rem 2rem; min-height: auto; }
  .donate-hero h1 { font-size: 1.4rem; margin-bottom: .5rem; }
  .donate-hero p { margin-bottom: 1rem; font-size: .82rem; line-height: 1.55; }
  .donate-hero-actions { flex-direction: row; width: auto; }
  .donate-hero-actions a { width: auto; }
  .hadith-banner { padding: .7rem 1rem; }
  .hadith-banner p { font-size: .8rem; }
}

/* Touch-friendly tap targets on coarse pointers (phones/tablets) */
@media (pointer: coarse) {
  .preset-btn { min-height: 46px; }
  .donate-submit { min-height: 52px; }
  .form-group input,
  .form-group select,
  .form-group textarea { min-height: 46px; }
  .anon-row { min-height: 44px; }
  .qc-link { min-height: 44px; }
  .donate-contact-links a { min-height: 36px; display: inline-flex; align-items: center; }
}

/* ===========================================================
   HERO LOGO — clean centered treatment on tablet/mobile
   (orbiting icons + rotating ring only suit the desktop layout)
   =========================================================== */
@media (max-width: 900px) {
  .hero-logo-wrap {
    position: relative;
    height: auto;
    min-height: 0;
    max-width: 100%;
    padding: 0;
    margin: 1.4rem auto 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .float-icon { display: none !important; }
  .hero-logo-halo { padding: 14px 18px; }
  .hero-logo-halo::after { display: none; }   /* hide rotating dashed ring */
  .hero-logo { height: 210px; }
}

/* ===== LISAAN AL-ARAB ANNOUNCEMENT ===== */
.lisaan-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-900), var(--blue-700) 55%, var(--blue-600));
  padding: 5.5rem 1.5rem;
  color: var(--white);
}
.lisaan-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(200,168,75,.20), transparent 42%),
    radial-gradient(circle at 85% 78%, rgba(61,174,224,.30), transparent 45%);
  pointer-events: none;
}
.lisaan-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--white);
  padding: .5rem 1.15rem;
  border-radius: 50px;
  font-size: .82rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  margin-bottom: 1.6rem;
}
.lisaan-arabic {
  /* Tajawal is a contemporary geometric Arabic — cleaner and less blocky
     than Cairo 800, and it pairs with the geometric Latin sans.
     NOTE: never letter-space Arabic; it severs the cursive joins. */
  font-family: 'Tajawal', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1.3;
  letter-spacing: normal;
  direction: rtl;
  margin: 0 0 .4rem;

  /* Flat gold + a hard drop shadow read embossed. A vertical gradient
     clipped to the glyphs gives the metal depth instead. */
  color: var(--gold);                     /* fallback if clip is unsupported */
  background: linear-gradient(175deg, #f4e6b4 0%, #d9bc63 46%, #ab8a39 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 8px 26px rgba(200,168,75,.28));
}
.lisaan-desc { max-width: 640px; margin: 1.3rem auto 2.2rem; color: rgba(255,255,255,.85); font-size: 1.05rem; line-height: 1.8; }
.lisaan-desc strong { color: var(--white); }

.lisaan-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.lisaan-actions .btn-white { display: inline-flex; align-items: center; gap: .5rem; }
.lisaan-note { margin-top: 1.8rem; font-size: .82rem; color: rgba(255,255,255,.6); }
.lisaan-note i { color: var(--blue-200); margin-right: .3rem; }
@media (max-width: 600px) {
  .lisaan-section { padding: 3.5rem 1.2rem; }

}

/* ===== LANGUAGE TOGGLE ===== */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 44px;
  padding: 0 .85rem;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--white);
  font-family: inherit;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: all var(--transition);
  flex-shrink: 0;
}
.lang-toggle i { font-size: .92rem; }
.lang-toggle:hover {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26,143,196,.4);
}
.navbar.scrolled .lang-toggle {
  background: var(--blue-50);
  border-color: var(--blue-100);
  color: var(--blue-700);
}
.navbar.scrolled .lang-toggle:hover {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: #fff;
}
@media (max-width: 500px) {
  .lang-toggle { padding: 0 .6rem; height: 40px; }
  .lang-toggle .lang-code { font-size: .78rem; }

}

/* ===========================================================
   HERO — simple centered · LISAAN — editorial split
   =========================================================== */

/* ---------- HERO: simple, centered ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 9.5rem 1.5rem 7rem;
}

@media (max-width: 700px) {
  .hero { padding: 8rem 1.3rem 5.5rem; }

}

/* ---------- LISAAN: editorial split + spec panel ---------- */
.lisaan-section { padding: 6.5rem 1.5rem; }

.lisaan-grid {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 4rem;
  align-items: center;
  text-align: left;
}

.lisaan-grid .lisaan-arabic {
  margin: 1.4rem 0 .1rem;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  text-align: left;
  line-height: 1.15;
}
.lisaan-title {
  margin: 0;
  font-size: clamp(1.75rem, 3.1vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--white);
}
.lisaan-kicker {
  margin: .5rem 0 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-200);
}
.lisaan-grid .lisaan-desc {
  margin: 1.3rem 0 2rem;
  max-width: 34rem;
}
.lisaan-grid .lisaan-actions { justify-content: flex-start; }
.lisaan-grid .lisaan-note { margin-top: 1.5rem; }

.lisaan-panel {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  padding: 1.6rem 1.8rem;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 26px 64px -26px rgba(0,0,0,.6);
}
.lisaan-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.lisaan-panel-head span {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.lisaan-panel-head strong {
  /* Amiri's old-style numerals read dated for a year range — the sans
     with tabular lining figures keeps the digits even and modern. */
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  color: var(--gold);
  white-space: nowrap;
}
.lisaan-specs { margin: 0; }
.spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.1);
}
.spec-row:last-child { border-bottom: none; padding-bottom: 0; }
.spec-row dt { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.55); }
.spec-row dd { margin: 0; font-size: .88rem; font-weight: 700; color: var(--white); text-align: right; }

@media (max-width: 980px) {
  .lisaan-section { padding: 4.5rem 1.3rem; }
  .lisaan-grid { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
  .lisaan-grid .lisaan-arabic { text-align: center; }
  .lisaan-grid .lisaan-desc { margin-left: auto; margin-right: auto; }
  .lisaan-grid .lisaan-actions { justify-content: center; }
  .spec-row { text-align: left; }
}

/* ---------- NAV: optically centre the links (desktop only) ----------
   space-between positions the links by leftover space, so they drift
   off-centre. A 1fr | auto | 1fr grid pins the middle column to the
   true centre no matter how wide the brand or the CTA cluster get.
   Scoped to desktop so the mobile off-canvas drawer is untouched.     */
@media (min-width: 901px) {
  .nav-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .nav-brand    { justify-self: start; }
  .nav-links    { justify-self: center; }
  .nav-cta-wrap { justify-self: end; }
}

/* ===========================================================
   HERO v3 — glassmorphism card on layered mesh gradient
   =========================================================== */
.hero {
  background:
    radial-gradient(1000px at 12% 18%, rgba(61,174,224,.34), transparent 62%),
    radial-gradient(760px at 88% 12%, rgba(200,168,75,.15), transparent 55%),
    radial-gradient(1000px at 85% 88%, rgba(26,143,196,.38), transparent 62%),
    radial-gradient(720px at 20% 96%, rgba(124,200,240,.22), transparent 55%),
    linear-gradient(168deg, #04182a 0%, #073350 42%, #0d517a 100%);
}
/* richer, slower orbs behind the glass */
.hero::before {
  width: 720px; height: 720px;
  top: -240px; right: -180px;
  background: radial-gradient(circle, rgba(124,200,240,.4), transparent 70%);
}
.hero::after {
  width: 560px; height: 560px;
  bottom: -180px; left: -140px;
  background: radial-gradient(circle, rgba(200,168,75,.22), transparent 70%);
}

.hero-inner { max-width: 900px; }

.hero-glass {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3.4rem 3.2rem 2.4rem;
  border-radius: 30px;
  background: linear-gradient(165deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.045) 55%, rgba(255,255,255,.09) 100%);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  box-shadow:
    0 44px 110px -34px rgba(2,16,28,.72),
    inset 0 1px 0 rgba(255,255,255,.22);
}
/* top hairline shimmer */
.hero-glass::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
}

.hero-glass .hero-logo-mark { margin-bottom: 1.7rem; }

.hero-glass-foot {
  width: 100%;
  margin-top: 2.3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
}
.hero-hadith-line {
  margin: 0;
  font-family: 'Amiri', serif;
  font-style: italic;
  font-size: .98rem;
  line-height: 1.75;
  color: rgba(255,255,255,.78);
}
.hero-glass-foot cite {
  display: block;
  margin-top: .45rem;
  font-style: normal;
  font-size: .7rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.42);
}

@media (max-width: 700px) {
  .hero { padding: 7.5rem 1rem 5rem; }
  .hero-glass { padding: 2.4rem 1.4rem 1.9rem; border-radius: 22px; }
  .hero-glass-foot { margin-top: 1.8rem; padding-top: 1.2rem; }
  .hero-hadith-line { font-size: .9rem; }
}

/* ===========================================================
   LISAAN v3 — light section, contained gradient shell
   =========================================================== */
.lisaan-section {
  position: relative;
  padding: 5.5rem 1.5rem;
  scroll-margin-top: 6rem;
  background:
    radial-gradient(700px at 92% 8%, rgba(26,143,196,.07), transparent 60%),
    radial-gradient(600px at 6% 92%, rgba(200,168,75,.07), transparent 55%),
    var(--gray-50);
}
.lisaan-section::before { content: none; }

.lisaan-shell {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 3.8rem 4rem;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(660px at 88% -12%, rgba(61,174,224,.32), transparent 62%),
    radial-gradient(540px at -6% 112%, rgba(200,168,75,.16), transparent 55%),
    linear-gradient(140deg, var(--blue-900) 0%, var(--blue-800) 45%, var(--blue-600) 100%);
  border: 1px solid rgba(10,63,94,.12);
  box-shadow: 0 44px 96px -34px rgba(6,40,64,.5);
}
/* top hairline shimmer to match the hero glass */
.lisaan-shell::after {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}

.lisaan-shell .lisaan-grid { max-width: none; gap: 3.5rem; }

.halaqah-headline {
  margin: 1.5rem 0 .9rem;
  max-width: 30rem;
  color: var(--white);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  line-height: 1.35;
}
.lisaan-grid .lisaan-desc { margin: .8rem 0; }
.halaqah-method {
  margin: 1.35rem 0 1.7rem;
  padding-left: 1rem;
  border-left: 3px solid var(--gold);
  color: rgba(255,255,255,.88);
  line-height: 1.7;
}
.halaqah-method strong { color: var(--white); }
.halaqah-subjects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin: 1.2rem 0 .7rem;
  padding: 0;
  list-style: none;
}
.halaqah-subjects li {
  padding: .55rem .75rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  background: rgba(255,255,255,.07);
  color: var(--white);
  font-size: .8rem;
  font-weight: 600;
}
.halaqah-extra {
  margin: 0 0 1rem;
  color: rgba(255,255,255,.7);
  font-size: .8rem;
}
.lisaan-panel .spec-row { flex-wrap: wrap; }
.lisaan-panel .spec-row dt,
.lisaan-panel .spec-row dd { min-width: 0; }

@media (max-width: 980px) {
  .lisaan-section { padding: 4rem 1rem; }
  .lisaan-shell { padding: 2.6rem 1.5rem; border-radius: 24px; }
  .halaqah-headline { margin-left: auto; margin-right: auto; }
  .lisaan-grid .lisaan-desc { margin-left: auto; margin-right: auto; }
  .halaqah-method { max-width: 34rem; margin-left: auto; margin-right: auto; text-align: left; }
}

@media (max-width: 420px) {
  .lisaan-panel { padding: 1.35rem 1.1rem; }
  .lisaan-panel .spec-row dd { max-width: 58%; }
}

/* ===========================================================
   HERO v4 — luminous white mark · khatam lattice · grain
   =========================================================== */

/* Deeper, richer mesh: cool at top, gold undertone right, warm depth low */
.hero {
  background:
    radial-gradient(1100px at 14% 14%, rgba(61,174,224,.36), transparent 60%),
    radial-gradient(820px at 86% 10%, rgba(200,168,75,.17), transparent 55%),
    radial-gradient(1000px at 88% 86%, rgba(26,143,196,.40), transparent 60%),
    radial-gradient(760px at 16% 94%, rgba(124,200,240,.20), transparent 55%),
    linear-gradient(168deg, #03121f 0%, #062a45 38%, #0a4468 72%, #0d5580 100%);
}

/* 8-point khatam star lattice — replaces the generic diagonal hatch */
.geometric-pattern {
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M106 66L81.2 72.3L94.3 94.3L72.3 81.2L66 106L59.7 81.2L37.7 94.3L50.8 72.3L26 66L50.8 59.7L37.7 37.7L59.7 50.8L66 26L72.3 50.8L94.3 37.7L81.2 59.7Z'/%3E%3Ccircle cx='66' cy='66' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 132px 132px;
  opacity: .55;
  animation: none;
}

/* Film grain — breaks up banding, kills the flat "CSS gradient" look */
.hero-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .15;
  mix-blend-mode: overlay;
}

/* Vignette — focuses the centre, adds real depth */
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 64% at 50% 44%, transparent 38%, rgba(2,12,22,.58) 100%);
}

/* ---------- The mark: white, large, luminous ---------- */
.hero-logo-halo {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 1.5rem;
}
.hero-logo-halo::before {
  content: "";
  position: absolute;
  width: 168%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(124,200,240,.30), rgba(124,200,240,.07) 44%, transparent 68%);
}
.hero-glass .hero-logo-mark {
  position: relative;
  width: auto;
  height: clamp(132px, 15vw, 205px);
  margin-bottom: 0;
  /* brightness(0) crushes the navy to black, invert(1) lifts it to pure white */
  filter: brightness(0) invert(1) drop-shadow(0 12px 34px rgba(0,0,0,.55));
}

/* ---------- Gold ornament divider (manuscript detail) ---------- */
.hero-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin-bottom: 1.3rem;
}
.hero-ornament i {
  display: block;
  width: clamp(38px, 7vw, 72px);
  height: 1px;
}
.hero-ornament i:first-child { background: linear-gradient(90deg, transparent, rgba(200,168,75,.72)); }
.hero-ornament i:last-child  { background: linear-gradient(90deg, rgba(200,168,75,.72), transparent); }
.orn-diamond {
  width: 7px; height: 7px;
  flex-shrink: 0;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(200,168,75,.85);
}

/* ---------- Glass, refined ---------- */
.hero-glass {
  padding: 3rem 3.2rem 2.3rem;
  border-radius: 34px;
  background: linear-gradient(160deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 48%, rgba(255,255,255,.10) 100%);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  box-shadow:
    0 50px 120px -38px rgba(1,10,20,.80),
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(255,255,255,.06);
}
.hero-glass .hero-eyebrow { margin-bottom: 1.3rem; }

@media (max-width: 700px) {
  .hero-glass { padding: 2.2rem 1.3rem 1.8rem; border-radius: 24px; }
  .hero-glass .hero-logo-mark { height: clamp(96px, 26vw, 132px); }
  .hero-logo-halo { margin-bottom: 1.1rem; }
  .hero-ornament { margin-bottom: 1rem; gap: .7rem; }
  .geometric-pattern { background-size: 104px 104px; opacity: .42; }
}

/* ---------- Logo sizing, corrected for the asset's transparent padding ----------
   logo.png is 1080x1080, but the calligraphy ink occupies only
   x38..1042 , y370..710  →  34.3% of the height is empty air top AND bottom.
   So we size the box generously, then pull the dead space back in with
   negative block margins of exactly 0.343 x the box height. Result: the mark
   reads ~3x larger without blowing a hole in the layout.                       */
.hero-logo-halo {
  --mark: clamp(280px, 32vw, 460px);
  margin-bottom: 1.35rem;
}
.hero-glass .hero-logo-mark {
  height: var(--mark);
  width: auto;
  margin-block: calc(var(--mark) * -0.343) calc(var(--mark) * -0.343);
}
/* glow retuned to the mark's true 2.95:1 ink ratio (a circle would balloon) */
.hero-logo-halo::before {
  width: 118%;
  height: 300%;
  aspect-ratio: auto;
  background: radial-gradient(ellipse at center, rgba(124,200,240,.30), rgba(124,200,240,.06) 48%, transparent 72%);
}

@media (max-width: 700px) {
  .hero-logo-halo { --mark: clamp(230px, 62vw, 300px); margin-bottom: 1rem; }
  .hero-glass .hero-logo-mark { height: var(--mark); }
}

/* ===========================================================
   MOBILE HEADER — floating island
   The bar was a full-width white slab carrying a 96px logo (the
   desktop size) plus three same-sized boxes crowding the right.
   Float it, shrink the mark, and drop the YouTube button — it
   already lives inside the drawer, so it was a duplicate.
   =========================================================== */
@media (max-width: 900px) {
  .navbar,
  .navbar.scrolled {
    padding: .7rem;
    background: transparent;
    box-shadow: none;
    border-bottom: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav-container {
    padding: .45rem .45rem .45rem .85rem;
    border-radius: 16px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(6,40,64,.07);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 10px 28px -14px rgba(6,40,64,.34);
  }

  .nav-logo { height: 52px; }

  /* duplicate of the drawer's YouTube link — remove the clutter */
  .nav-cta-wrap .nav-youtube { display: none; }
  .nav-cta-wrap { gap: .4rem; }

  .lang-toggle {
    height: 38px;
    padding: 0 .68rem;
    gap: .3rem;
    border-radius: 11px;
    font-size: .74rem;
  }
  .lang-toggle i { font-size: .82rem; }

  .hamburger {
    width: 38px;
    height: 38px;
    gap: 5px;
    border-radius: 11px;
  }
  .hamburger span { width: 17px; height: 1.5px; }
  /* bar centres are 6.5px apart now (1.5px bar + 5px gap) */
  body.nav-open .hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.nav-open .hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

@media (max-width: 400px) {
  .nav-logo { height: 44px; }
  .nav-container { padding: .4rem .4rem .4rem .7rem; }

}

/* ===========================================================
   DESKTOP HEADER — floating island
   Was a 114px-tall full-width slab: a 96px logo, links boxed in
   their own outlined pill, and three mismatched control shapes.
   Float it, halve the height, drop the inner pill, and unify every
   control on one radius so the cluster reads as a set.
   =========================================================== */
@media (min-width: 901px) {
  .navbar,
  .navbar.scrolled {
    padding: 1.1rem 1.5rem;
    background: transparent;
    box-shadow: none;
    border-bottom: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav-container {
    max-width: 1120px;
    padding: .5rem .5rem .5rem 1.5rem;
    border-radius: 999px;
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    backdrop-filter: blur(22px) saturate(165%);
    box-shadow:
      0 14px 36px -18px rgba(6,40,64,.34),
      inset 0 1px 0 rgba(255,255,255,.9);
    transition: background .35s var(--transition), box-shadow .35s var(--transition);
  }
  .navbar.scrolled .nav-container {
    background: rgba(255,255,255,.9);
    box-shadow:
      0 16px 40px -18px rgba(6,40,64,.4),
      inset 0 1px 0 rgba(255,255,255,.95);
  }

  /* 96px was the whole reason the bar was 114px tall */
  .nav-logo { height: 48px; }

  /* Links: no boxed container — let the island itself be the surface */
  .nav-links,
  .navbar.scrolled .nav-links {
    background: transparent;
    border: none;
    padding: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    gap: .15rem;
  }
  .nav-links a,
  .navbar.scrolled .nav-links a {
    padding: .52rem .95rem;
    font-size: .875rem;
    font-weight: 600;
    color: rgba(6,40,64,.68);
    border-radius: 999px;
  }
  .nav-links a:hover,
  .navbar.scrolled .nav-links a:hover {
    background: rgba(26,143,196,.09);
    color: var(--blue-700);
    box-shadow: none;
  }

  /* One radius, one height — the cluster reads as a set */
  .nav-cta-wrap { gap: .4rem; }

  .lang-toggle,
  .navbar.scrolled .lang-toggle {
    height: 40px;
    padding: 0 .85rem;
    border-radius: 999px;
    font-size: .78rem;
    background: rgba(6,40,64,.045);
    border: 1px solid rgba(6,40,64,.07);
    color: var(--blue-700);
  }
  .lang-toggle:hover,
  .navbar.scrolled .lang-toggle:hover {
    background: var(--blue-500);
    border-color: var(--blue-500);
    color: #fff;
  }

  .nav-youtube,
  .navbar.scrolled .nav-youtube {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(6,40,64,.045);
    border: 1px solid rgba(6,40,64,.07);
    color: var(--yt-red);
    font-size: 1rem;
  }

  .nav-donate-btn {
    padding: 0 1.35rem;
    height: 40px;
    font-size: .82rem;
    box-shadow: 0 10px 24px -10px rgba(26,143,196,.6);
  }
}

/* ===========================================================
   MOBILE HEADER — lock contents to the light island
   The island surface is always light on mobile, but the logo and
   controls only turned dark under `.scrolled`. Pages without the
   `.nav-solid` flag (courses.html) therefore rendered a white mark,
   white "SW" and white hamburger bars on a near-white pill —
   invisible until the user scrolled. Pin them dark regardless.
   =========================================================== */
@media (max-width: 900px) {
  .navbar .nav-logo,
  .navbar.scrolled .nav-logo {
    filter: brightness(0) saturate(100%) invert(18%) sepia(60%) saturate(600%) hue-rotate(185deg) brightness(90%);
  }

  .navbar .lang-toggle,
  .navbar.scrolled .lang-toggle {
    background: rgba(6,40,64,.05);
    border: 1px solid rgba(6,40,64,.08);
    color: var(--blue-700);
  }
  .navbar .lang-toggle:hover,
  .navbar.scrolled .lang-toggle:hover {
    background: var(--blue-500);
    border-color: var(--blue-500);
    color: #fff;
  }

  .navbar .hamburger,
  .navbar.scrolled .hamburger {
    background: rgba(6,40,64,.05);
    border: 1px solid rgba(6,40,64,.08);
  }
  .navbar .hamburger span,
  .navbar.scrolled .hamburger span {
    background: var(--blue-700);
  }

  /* the drawer's own header sits on dark navy — keep that mark white */
  .nav-mobile-logo { filter: brightness(0) invert(1); }
}

/* ===========================================================
   MOBILE DRAWER — floating glass panel to match the header
   Was an edge-to-edge, full-height dark navy slab with square
   corners. Float it off every edge, round it, and switch to the
   same light glass as the island so the two read as one system.
   =========================================================== */
@media (max-width: 900px) {
  .nav-links,
  .navbar.scrolled .nav-links {
    top: .7rem;
    bottom: .7rem;
    height: auto;
    width: 330px;
    max-width: calc(100vw - 1.4rem);
    padding: 1rem 1rem 1.1rem;
    border-radius: 22px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.9);
    -webkit-backdrop-filter: blur(24px) saturate(165%);
    backdrop-filter: blur(24px) saturate(165%);
    box-shadow:
      0 26px 60px -20px rgba(6,40,64,.45),
      inset 0 1px 0 rgba(255,255,255,.95);
    transition: right .42s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  }
  body.nav-open .nav-links { right: .7rem; }

  /* the drawer is light now — the mark must go dark again */
  .nav-mobile-logo {
    filter: brightness(0) saturate(100%) invert(18%) sepia(60%) saturate(600%) hue-rotate(185deg) brightness(90%);
  }

  .nav-mobile-header {
    padding-bottom: .9rem;
    border-bottom: 1px solid rgba(6,40,64,.08);
  }

  .nav-close {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(6,40,64,.05);
    border: 1px solid rgba(6,40,64,.08);
    color: var(--blue-700);
  }
  .nav-close:hover {
    background: var(--blue-500);
    border-color: var(--blue-500);
    color: #fff;
  }

  /* Menu rows */
  .nav-links a,
  .navbar.scrolled .nav-links a {
    color: rgba(6,40,64,.78);
    font-weight: 600;
    padding: .78rem .85rem;
    border-radius: 14px;
  }
  .nav-links a i { color: var(--blue-500); }
  .nav-links a:hover,
  .navbar.scrolled .nav-links a:hover {
    background: rgba(26,143,196,.1);
    color: var(--blue-700);
  }

  /* Contact block */
  .nav-mobile-contact-block { border-top-color: rgba(6,40,64,.08); }
  .nav-mobile-label { color: rgba(6,40,64,.42); }
  .nav-mobile-contact {
    color: rgba(6,40,64,.7) !important;
    border-radius: 14px !important;
    font-weight: 500;
  }
  .nav-mobile-contact:hover {
    background: rgba(26,143,196,.1) !important;
    color: var(--blue-700) !important;
  }
  .nav-mobile-contact i { color: var(--blue-500); }
  .nav-mobile-contact .ico-youtube { color: var(--yt-red); }

  /* CTA keeps its gradient — it's the one saturated thing in the panel */
  .nav-mobile-cta { border-top-color: rgba(6,40,64,.08); }
  .nav-mobile-donate { border-radius: 999px; }

  /* Scrim: darker + blurred so the light panel separates from the page */
  .nav-backdrop {
    background: rgba(4,22,38,.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
}

/* ===========================================================
   FIX — stop the header island trapping the drawer
   A non-none backdrop-filter makes an element a containing block for
   position:fixed descendants. Because the drawer (#navLinks) lives
   inside .nav-container, the island's blur was anchoring it to the
   58px pill rather than the viewport. Move the glass onto a
   pseudo-element: the blur still paints, but .nav-container no longer
   establishes a containing block, so the drawer is viewport-fixed again.
   =========================================================== */
@media (max-width: 900px) {
  .nav-container {
    position: relative;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(6,40,64,.07);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 10px 28px -14px rgba(6,40,64,.34);
  }
}


/* ===========================================================
   HERO — light bento (variant 4b)
   Copy on the left, framed photo card on the right with floating
   badges. Class names stay distinct from the older .hero-title /
   .hero-inner rules above, which courses.html still leans on
   (.hero-badge, .donate-hero*).
   =========================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 0;
  text-align: left;
  /* Layered mesh instead of a flat fill: two soft off-axis tints over a
     warm-to-cool vertical ramp, so the field has direction and depth. */
  background:
    radial-gradient(48% 42% at 6% 74%, rgba(26,143,196,.10), transparent 62%),
    radial-gradient(40% 38% at 96% 44%, rgba(124,200,240,.14), transparent 60%),
    linear-gradient(168deg, #fcfdfe 0%, #f2f7fa 46%, #e8f0f6 100%);
}
.hero::before, .hero::after { content: none; }   /* kill old glow orbs */

.hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -3;
}
.hero-glow-top {
  left: 46%;
  top: -420px;
  width: 1180px; height: 1180px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(124,200,240,.30), rgba(124,200,240,.09) 44%, transparent 68%);
  filter: blur(8px);
}
.hero-glow-bottom {
  right: -220px;
  bottom: -300px;
  width: 760px; height: 760px;
  background: radial-gradient(circle, rgba(200,168,75,.20), rgba(200,168,75,.06) 46%, transparent 68%);
  filter: blur(8px);
}

.hero-girih {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .055;
  pointer-events: none;
  /* Fade the lattice out where the copy sits (left of centre on desktop)
     so it reads as texture at the edges, never behind the headline. */
  -webkit-mask-image: radial-gradient(66% 72% at 26% 46%, transparent 16%, #000 74%);
          mask-image: radial-gradient(66% 72% at 26% 46%, transparent 16%, #000 74%);

  /* Rub el hizb — two overlapping squares. The Islamic star reduced to its
     simplest geometry: no inner circle, no corner ticks, just the outline. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cg fill='none' stroke='%23062840' stroke-width='1'%3E%3Crect x='33' y='33' width='44' height='44'/%3E%3Cpath d='M55 24L86 55L55 86L24 55Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 110px 110px;
}

/* Stacked layout: the copy moves to the top-centre, so the clearing has to
   move with it — otherwise the pattern sits straight under the headline. */
@media (max-width: 1080px) {
  .hero-girih {
    -webkit-mask-image: radial-gradient(96% 42% at 50% 27%, transparent 12%, #000 72%);
            mask-image: radial-gradient(96% 42% at 50% 27%, transparent 12%, #000 72%);
  }
}
@media (max-width: 640px) {
  .hero-girih {
    background-size: 88px 88px;
    -webkit-mask-image: radial-gradient(112% 40% at 50% 26%, transparent 10%, #000 70%);
            mask-image: radial-gradient(112% 40% at 50% 26%, transparent 10%, #000 70%);
  }
}

/* ---------- bento grid ---------- */
.hero-bento {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 470px;
  gap: 56px;
  align-items: center;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 150px 24px 80px;
}

/* ---------- left column ---------- */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--blue-100);
  box-shadow: 0 8px 20px -10px rgba(6,40,64,.25);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.hero-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-500);
}

.hero-heading {
  margin: 26px 0 0;
  font-size: clamp(2.5rem, 5.2vw, 4.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.045em;
  color: var(--blue-900);
}
.hero-heading em {
  display: block;
  margin-top: 6px;
  font-family: 'Amiri', serif;
  font-style: italic;
  font-weight: 400;
  font-size: .84em;
  color: var(--blue-500);
}

.hero-copy {
  max-width: 32em;
  margin: 24px 0 0;
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(6,40,64,.6);
}

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* Both actions share one height and one radius so they read as a pair
   rather than a button next to a stray text link. */
.hero-cta,
.hero-link {
  --btn-h: 54px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .3s var(--transition), background .3s var(--transition),
              border-color .3s var(--transition), color .3s var(--transition);
}
.hero-cta:focus-visible,
.hero-link:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
}

/* ---- primary: gradient pill with the arrow riding its right edge ---- */
.hero-cta-label {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: var(--btn-h);
  padding: 0 74px 0 30px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--blue-700), var(--blue-500));
  color: var(--white);
  box-shadow: 0 12px 24px -12px rgba(4,18,30,.44),
              0 4px 12px -7px rgba(26,143,196,.24);
  transition: transform .3s var(--transition), box-shadow .3s var(--transition);
}
.hero-cta-arrow {
  position: absolute;
  right: 0;
  display: grid;
  place-items: center;
  width: var(--btn-h); height: var(--btn-h);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue-500);
  font-size: 15px;
  border: 1px solid rgba(26,143,196,.15);
  box-shadow: 0 12px 26px -10px rgba(6,40,64,.45);
  transform: translateX(8px);
  transition: transform .3s var(--transition);
  pointer-events: none;
}
.hero-cta-arrow i { transform: rotate(-45deg); }
.hero-cta:hover .hero-cta-label {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -12px rgba(4,18,30,.5),
              0 5px 14px -7px rgba(26,143,196,.3);
}
.hero-cta:hover .hero-cta-arrow { transform: translateX(12px) translateY(-2px); }
.hero-cta:active .hero-cta-label { transform: translateY(0); }
.hero-cta:active .hero-cta-arrow { transform: translateX(10px); }

/* ---- secondary: ghost pill, same height, low emphasis ---- */
.hero-link {
  gap: 8px;
  padding: 0 26px;
  color: rgba(6,40,64,.72);
  border: 1.5px solid rgba(6,40,64,.16);
  background: rgba(255,255,255,.45);
}
.hero-link i { font-size: .72em; transition: transform .3s var(--transition); }
.hero-link:hover {
  color: var(--blue-900);
  border-color: rgba(6,40,64,.3);
  background: rgba(255,255,255,.85);
  transform: translateY(-2px);
}
.hero-link:hover i { transform: translateX(4px); }
.hero-link:active { transform: translateY(0); }

/* ---- responsive: stack full-width once the row would crowd ---- */
@media (max-width: 560px) {
  .hero-buttons {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .hero-cta { width: 100%; }
  /* pull the arrow flush so it cannot overhang the viewport edge */
  .hero-cta-arrow { transform: translateX(0); }
  .hero-cta:hover .hero-cta-arrow,
  .hero-cta:active .hero-cta-arrow { transform: translateX(0) translateY(-2px); }
  .hero-cta-label { padding: 0 66px 0 26px; }
  .hero-link { width: 100%; }
}

/* ---------- stats row ---------- */
.hero-stats {
  /* Grid, not flex-wrap: the old divider <span>s wrapped with the cells and
     left an orphan rule at the head of the second row. Borders on the cells
     can not wrap, so the rhythm holds at every width. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 44px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(6,40,64,.1);
}
.hero-stat {
  min-width: 0;
  padding-left: 20px;
  border-left: 1px solid rgba(6,40,64,.1);
}
.hero-stat:first-child { padding-left: 0; border-left: none; }
.hero-stat dt {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--blue-900);
}
.hero-stat dt span { color: var(--blue-500); }
.hero-stat dd {
  margin: 5px 0 0;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* ---------- right column: framed photo ---------- */
.hero-photo-col { position: relative; }

/* offset tint sitting behind the frame */
.hero-photo-back {
  position: absolute;
  inset: 18px -18px -18px 18px;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--blue-200), var(--blue-100));
}

.hero-photo {
  position: relative;
  height: 560px;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 40px 80px -30px rgba(6,40,64,.45);
}
/* <picture> is only a format switch — it must not add a line box of its
   own inside the frame. display:contents drops it from the box tree. */
.hero-photo picture { display: contents; }

.hero-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 0;
  transition: opacity .7s ease;
}
.hero-shot.is-active { opacity: 1; }

.hero-photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(4,22,38,.55) 100%);
}

.hero-photo-cap {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(6,32,52,.55);
  border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
.hero-cap-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), #a8863a);
  color: var(--white);
  font-size: 15px;
}
.hero-cap-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
}
.hero-cap-text span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255,255,255,.65);
}
.hero-cap-arrow { margin-left: auto; color: #e3c877; font-size: 13px; }

/* ---------- floating badges ---------- */
.hero-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  animation: riseIn .8s cubic-bezier(.22,1,.36,1) both;
}
.hero-float-light {
  top: 26px; left: -34px;
  background: var(--white);
  color: var(--blue-900);
  box-shadow: 0 16px 36px -14px rgba(6,40,64,.4);
  animation-delay: .45s;
}
.hero-float-light i { color: var(--blue-500); }
.hero-float-dark {
  top: 96px; right: -26px;
  background: var(--blue-900);
  color: var(--white);
  box-shadow: 0 16px 36px -14px rgba(6,40,64,.55);
  animation-delay: .6s;
}
.hero-float-dark i { color: var(--blue-300); }

/* ---------- entrance ---------- */
.rise {
  opacity: 0;
  transform: translateY(16px);
  animation: riseIn .7s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 100ms);
}
@keyframes riseIn { to { opacity: 1; transform: translateY(0); } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero-bento { grid-template-columns: 1fr; gap: 44px; padding: 140px 22px 72px; }
  .hero-photo { height: 440px; }
  .hero-photo-back { inset: 14px -14px -14px 14px; }
  .hero-float-light { left: -10px; }
  .hero-float-dark { right: -6px; }
}
@media (max-width: 640px) {
  .hero-bento { padding: 122px 18px 60px; }
  .hero-copy { font-size: 15.5px; }
  .hero-buttons { gap: 16px; }
  .hero-cta-label { padding: 15px 66px 15px 26px; font-size: 14.5px; }
  .hero-cta-arrow { width: 48px; height: 48px; }
  .hero-stats { gap: 18px; margin-top: 34px; }
  .hero-stat dt { font-size: 21px; }
  .hero-photo { height: 380px; border-radius: 26px; }
  .hero-photo-back { border-radius: 26px; }
  .hero-float { font-size: 11px; padding: 9px 13px; }
  .hero-float-light { top: 14px; left: -6px; }
  .hero-float-dark { top: 76px; right: -4px; }
  .hero-cap-text span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rise, .hero-float { opacity: 1; transform: none; animation: none; }
  .hero-shot { transition: none; }
}

/* Fine paper grain over the mesh — stops wide gradients banding and
   keeps the field from reading as flat vector colour. */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .04;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Soft light pooling along the bottom edge, so the hero settles into the
   stats bar below instead of stopping at a hard line. */
.hero-bento::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -120px;
  width: min(120%, 1300px);
  height: 260px;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.85), transparent 70%);
}

/* Caption bar is a real link now — give it interactive affordances. */
.hero-photo-cap {
  text-decoration: none;
  cursor: pointer;
  transition: background .3s var(--transition), border-color .3s var(--transition);
}
.hero-photo-cap:hover {
  background: rgba(6,32,52,.72);
  border-color: rgba(255,255,255,.32);
}
.hero-photo-cap .hero-cap-arrow {
  transition: transform .3s var(--transition);
}
.hero-photo-cap:hover .hero-cap-arrow { transform: translateX(4px); }
.hero-photo-cap:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ===========================================================
   TABLET + MOBILE — photo becomes a light frosted background
   From 1080px down the bento stacks, so the framed card is dropped and
   the shots fill the section instead. A pale scrim keeps the site's
   light ground: the photograph reads as texture behind dark ink rather
   than a dark hero with reversed type.
   =========================================================== */
@media (max-width: 1080px) {
  /* static so the photo positions against .hero, not the padded grid */
  .hero-bento { position: static; }
  .hero-bento::after { display: none; }

  /* these were built to lift a flat colour field — a photo doesn't need them */
  .hero-glow,
  .hero-girih,
  .hero-grain { display: none; }

  .hero-photo-col {
    position: absolute;
    inset: 0;
    z-index: -1;
    max-width: none;
    margin: 0;
    /* .rise would slide/fade the backdrop in — hold it still */
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero-photo-back { display: none; }

  .hero-photo {
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  /* lift the shelves so they survive being washed out by the pale scrim */
  .hero-shot {
    object-position: 50% 45%;
    filter: brightness(1.14) saturate(.88);
  }

  /* Pale frosted veil — light enough for dark ink, sheer enough to read
     as a photograph. Denser top and bottom anchor the copy and stats. */
  .hero-photo-scrim {
    background: linear-gradient(180deg,
      rgba(248,251,253,.92) 0%,
      rgba(248,251,253,.82) 42%,
      rgba(244,249,252,.95) 100%);
    -webkit-backdrop-filter: blur(2px) saturate(115%);
            backdrop-filter: blur(2px) saturate(115%);
  }

  /* frame furniture has no meaning once the photo is edge-to-edge */
  .hero-photo-cap,
  .hero-float { display: none; }

  /* Copy stays dark ink — only the pill needs a touch more body so it
     doesn't dissolve into the pale veil behind it. */
  .hero-pill {
    background: rgba(255,255,255,.9);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
  }
}

/* ---------- stats: modern numerals + responsive columns ---------- */
.hero-stat dt {
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--blue-900);
}
.hero-stat dd {
  margin: 7px 0 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* 4 across is too tight once the column narrows — fold to 2 x 2 */
@media (max-width: 720px) {
  .hero-stats {
    grid-template-columns: 1fr 1fr;
    row-gap: 22px;
  }
  .hero-stat { padding-left: 18px; }
  .hero-stat:nth-child(odd)  { padding-left: 0; border-left: none; }
  .hero-stat:nth-child(even) { border-left: 1px solid rgba(6,40,64,.12); }
}
@media (max-width: 360px) {
  .hero-stat dd { letter-spacing: .1em; font-size: 9.5px; }
}

/* ---------- veil: let the books read through ----------
   The previous 92/82/95% white washed the shelves out almost entirely.
   Now a bright pool sits behind the copy for legibility while the rest
   of the frame stays sheer, so the photograph is actually visible.     */
@media (max-width: 1080px) {
  .hero-photo-scrim {
    background:
      radial-gradient(125% 60% at 34% 40%,
        rgba(250,252,254,.94) 0%,
        rgba(250,252,254,.62) 52%,
        rgba(250,252,254,0) 80%),
      linear-gradient(180deg,
        rgba(246,250,252,.66) 0%,
        rgba(246,250,252,.34) 46%,
        rgba(242,248,251,.74) 100%);
  }
  /* less lift needed now that the veil is sheer */
  .hero-shot { filter: brightness(1.04) saturate(.95); }
}

/* ===========================================================
   TABLET + MOBILE — darker veil so the photograph reads
   A pale wash flattened the shelves to grey. A moderate dark scrim
   (not the near-opaque navy of the first pass) keeps the gilt and
   leather legible, with the copy reversed to light on top.
   =========================================================== */
@media (max-width: 1080px) {
  .hero-photo-scrim {
    /* The 44% stop is where the body copy lands on a tablet, and it is also
       the brightest part of the photograph (gilt spines). At .50 the worst
       patches behind the paragraph measured 3.8:1 against white — under the
       4.5:1 AA floor for text this size. .58 is the lowest value that clears
       it on all three shots (4.85–5.13), so the shelves stay as visible as
       legibility allows. */
    background: linear-gradient(180deg,
      rgba(4,18,30,.74) 0%,
      rgba(4,18,30,.58) 44%,
      rgba(4,18,30,.82) 100%);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  /* no lift needed against a dark veil — a touch of contrast instead */
  .hero-shot { filter: contrast(1.06) saturate(1.02); }

  /* ---- copy reverses to light ---- */
  .hero-pill {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.26);
    color: var(--white);
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }
  .hero-pill-dot { background: var(--blue-300); }

  .hero-heading { color: var(--white); }
  .hero-heading em { color: var(--gold); }
  .hero-copy { color: rgba(255,255,255,.8); }

  .hero-link { color: rgba(255,255,255,.8); }
  .hero-link:hover { color: var(--white); }

  .hero-stats { border-top-color: rgba(255,255,255,.22); }
  .hero-stat { border-left-color: rgba(255,255,255,.22); }
  .hero-stat dt { color: var(--white); }
  .hero-stat dt span { color: var(--blue-300); }
  .hero-stat dd { color: rgba(255,255,255,.66); }
}
@media (max-width: 720px) {
  .hero-stat:nth-child(even) { border-left-color: rgba(255,255,255,.22); }
}

/* Ghost button on the dark veil (tablet + mobile) */
@media (max-width: 1080px) {
  .hero-link {
    color: rgba(255,255,255,.85);
    border-color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
  }
  .hero-link:hover {
    color: var(--white);
    border-color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.16);
  }
  .hero-cta:focus-visible,
  .hero-link:focus-visible { outline-color: var(--gold); }
}

/* ===========================================================
   TABLET — let the hero actually fill the frame
   Between 641 and 1080px the heading clamp bottomed out at its 2.5rem
   floor (5.2vw of 768px ≈ 40px), so a tablet got mobile-sized type
   adrift in a 1024px-tall section with ~350px of dead air. Scale the
   type and rhythm up, and trim the padding that was inflating it.
   =========================================================== */
@media (min-width: 641px) and (max-width: 1080px) {
  .hero-bento {
    max-width: 700px;
    padding: 128px 32px 88px;
  }

  .hero-heading { font-size: clamp(2.9rem, 6.2vw, 3.9rem); }
  .hero-copy {
    max-width: 33em;
    margin-top: 26px;
    font-size: 17px;
    line-height: 1.7;
  }

  .hero-buttons { margin-top: 40px; gap: 18px; }

  .hero-stats {
    margin-top: 52px;
    padding-top: 30px;
  }
  .hero-stat { padding-left: 26px; }
  .hero-stat dt { font-size: 27px; }
  .hero-stat dd { margin-top: 8px; font-size: 10.5px; }
}

/* Landscape tablet / short viewports: there is no room to grow, so pull
   the vertical rhythm back in rather than letting the copy overflow. */
@media (min-width: 641px) and (max-width: 1080px) and (max-height: 820px) {
  .hero-bento { padding: 108px 32px 64px; }
  .hero-heading { font-size: clamp(2.5rem, 5vw, 3.2rem); }
  .hero-copy { margin-top: 20px; font-size: 16px; }
  .hero-buttons { margin-top: 30px; }
  .hero-stats { margin-top: 36px; padding-top: 24px; }
}

/* Tablet stat labels: "ONLINE + IN-PERSON" is 18 characters and at
   10.5px/.13em it needs ~128px inside a ~133px cell — it wrapped and
   left that column taller than the rest. Tighten it to fit on one line,
   and align tops so any future wrap still lines up. */
@media (min-width: 641px) and (max-width: 1080px) {
  .hero-stats { align-items: start; }
  .hero-stat dd {
    font-size: 9.5px;
    letter-spacing: .08em;
  }
  .hero-stat { padding-left: 20px; }
}

/* ===========================================================
   HERO COPY — vertical rhythm
   The gaps were 26/26/40/52: the badge sat as close to the headline as
   the headline did to the body, so nothing grouped. These four steps
   are now one scale, tuned per breakpoint, so related items sit closer
   than unrelated ones and the column uses the headroom it has.
   =========================================================== */
.hero-lead-col {
  --gap-badge: 34px;   /* pill    -> heading */
  --gap-head:  30px;   /* heading -> copy    */
  --gap-copy:  46px;   /* copy    -> buttons */
  --gap-btns:  60px;   /* buttons -> stats   */
}
.hero-lead-col .hero-heading { margin-top: var(--gap-badge); }
.hero-lead-col .hero-copy    { margin-top: var(--gap-head); }
.hero-lead-col .hero-buttons { margin-top: var(--gap-copy); }
.hero-lead-col .hero-stats   { margin-top: var(--gap-btns); }

/* Tablet had ~529px spare — spend it on air */
@media (min-width: 641px) and (max-width: 1080px) {
  .hero-lead-col {
    --gap-badge: 40px;
    --gap-head:  34px;
    --gap-copy:  54px;
    --gap-btns:  68px;
  }
}
/* Phone: looser than before, but the fold still has to hold */
@media (max-width: 640px) {
  .hero-lead-col {
    --gap-badge: 28px;
    --gap-head:  26px;
    --gap-copy:  40px;
    --gap-btns:  48px;
  }
}
/* Short landscape: rhythm compresses rather than pushing content away */
@media (max-height: 720px) and (min-width: 641px) {
  .hero-lead-col {
    --gap-badge: 26px;
    --gap-head:  22px;
    --gap-copy:  34px;
    --gap-btns:  40px;
  }
}

/* ===========================================================
   NAV — dark glass only while it overlaps the dark hero
   Below 1080px the hero is a dark photograph, so a white pill floated on
   it as a bright slab. But a permanently dark nav is wrong too: past the
   hero the page is light and it reads as a grey block. main.js toggles
   .nav-on-hero, so the island inverts over the photo and reverts after.
   The surface lives in two places — .nav-container above 900px, and
   .nav-container::before below (that pseudo-element exists so the pill's
   backdrop-filter cannot trap the fixed drawer).
   =========================================================== */
@media (min-width: 901px) and (max-width: 1080px) {
  .navbar.nav-on-hero .nav-container {
    background: rgba(6,26,42,.52);
    border-color: rgba(255,255,255,.15);
    box-shadow: 0 16px 38px -18px rgba(2,12,22,.7);
  }
}
@media (max-width: 900px) {
  .navbar.nav-on-hero .nav-container::before {
    background: rgba(6,26,42,.52);
    border-color: rgba(255,255,255,.15);
    box-shadow: 0 16px 38px -18px rgba(2,12,22,.7);
  }
}

@media (max-width: 1080px) {
  .navbar.nav-on-hero .nav-logo { filter: brightness(0) invert(1); }

  .navbar.nav-on-hero .lang-toggle,
  .navbar.nav-on-hero .nav-youtube,
  .navbar.nav-on-hero .hamburger {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: var(--white);
  }
  .navbar.nav-on-hero .lang-toggle:hover {
    background: var(--blue-500);
    border-color: var(--blue-500);
  }
  .navbar.nav-on-hero .nav-youtube:hover {
    background: var(--yt-red);
    border-color: var(--yt-red);
  }
  .navbar.nav-on-hero .hamburger span { background: var(--white); }

  /* the drawer sits on its own light panel — keep its contents dark
     even while the bar behind it is in hero mode */
  body.nav-open .navbar.nav-on-hero .hamburger span { background: var(--blue-700); }
}

/* The white nav-link colour belongs ONLY to the horizontal bar. Below
   901px .nav-links becomes the off-canvas drawer, which sits on its own
   light panel — reversing its text there made the menu unreadable. */
@media (min-width: 901px) and (max-width: 1080px) {
  .navbar.nav-on-hero .nav-links a { color: rgba(255,255,255,.82); }
  .navbar.nav-on-hero .nav-links a:hover {
    color: var(--white);
    background: rgba(255,255,255,.12);
    box-shadow: none;
  }
}

/* Drawer contents stay dark ink no matter what state the bar is in. */
@media (max-width: 900px) {
  .navbar .nav-links a,
  .navbar.scrolled .nav-links a,
  .navbar.nav-on-hero .nav-links a {
    color: rgba(6,40,64,.82);
  }
  .navbar .nav-links a:hover,
  .navbar.scrolled .nav-links a:hover,
  .navbar.nav-on-hero .nav-links a:hover {
    color: var(--blue-700);
    background: rgba(26,143,196,.1);
  }
  .navbar .nav-links a i,
  .navbar.nav-on-hero .nav-links a i { color: var(--blue-500); }
}

/* ===========================================================
   PHOTO CARD — modern stroke icons, glass caps, softer scrim
   Font Awesome ships solid glyphs; stroke icons at a consistent
   1.75 weight read lighter and sit better beside the type.
   =========================================================== */
.ico {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- scrim: hold the photo, darken only where the cap sits ----
   Desktop only. Unscoped, these sit after the max-width:1080px block
   above and would silently overwrite the mobile/tablet dark veil —
   same specificity, later in source wins. */
@media (min-width: 1081px) {
  .hero-photo-scrim {
    background:
      linear-gradient(180deg,
        rgba(4,22,38,0) 38%,
        rgba(4,22,38,.30) 66%,
        rgba(4,22,38,.80) 100%),
      /* faint inner vignette so the frame edges settle */
      radial-gradient(120% 100% at 50% 45%, rgba(4,22,38,0) 55%, rgba(4,22,38,.28) 100%);
  }
  /* crisp inner edge on the frame itself */
  .hero-photo { box-shadow: 0 40px 80px -30px rgba(6,40,64,.45), inset 0 0 0 1px rgba(255,255,255,.10); }
}

/* ---- floating caps ---- */
.hero-float {
  gap: 10px;
  padding: 10px 16px 10px 10px;
  font-size: 12.5px;
  letter-spacing: -.005em;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
}
/* icon sits in its own tinted tile rather than floating bare */
.hero-float-ico {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 9px;
  font-size: 15px;
  flex-shrink: 0;
}
.hero-float-light {
  background: rgba(255,255,255,.92);
  border-color: rgba(6,40,64,.06);
  box-shadow: 0 14px 32px -12px rgba(6,40,64,.38);
}
.hero-float-light .hero-float-ico {
  background: rgba(26,143,196,.12);
  color: var(--blue-600);
}
.hero-float-dark {
  background: rgba(6,32,52,.82);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 14px 32px -12px rgba(2,14,26,.6);
}
.hero-float-dark .hero-float-ico {
  background: rgba(255,255,255,.13);
  color: var(--blue-300);
}

/* ---- caption bar ---- */
.hero-photo-cap {
  gap: 13px;
  padding: 12px 15px;
  border-radius: 20px;
  background: rgba(6,32,52,.5);
  border-color: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
}
.hero-cap-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  font-size: 19px;
  background: linear-gradient(135deg, var(--gold), #a8863a);
  box-shadow: 0 6px 16px -6px rgba(200,168,75,.7);
}
.hero-cap-arrow { font-size: 17px; margin-left: auto; color: #e3c877; }

/* ===========================================================
   ICON SYSTEM — inline SVG sprite replaces Font Awesome
   The <i> wrapper is kept so the ~37 existing `... i { }` rules
   (font-size, colour, display, transform) still apply; the SVG
   inside sizes to 1em of that wrapper and inherits currentColor.
   =========================================================== */
.ico-sprite { display: none; }

.ico-w {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.ico-w > .ico {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* solid marks read better filled than stroked */
.ico-w.ico-youtube > .ico > use,
.ico-w.ico-youtube > .ico { stroke-width: 1.6; }

/* Online Halaqah — programme layout using the About section palette */
.halaqah-section {
  scroll-margin-top: 5rem;
  padding: 5.5rem 1.5rem;
  background: var(--blue-50);
}
.halaqah-shell {
  max-width: 1120px;
  padding: clamp(2rem, 4.5vw, 3.5rem);
  border: 1px solid var(--blue-100);
  border-radius: 28px;
  background: var(--white);
  color: var(--blue-900);
  box-shadow: 0 30px 60px -25px rgba(10,63,94,.25), var(--shadow-md);
}
.halaqah-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.halaqah-lead { max-width: 640px; }
.halaqah-badge {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.5rem;
  color: var(--blue-700);
  font-size: .77rem;
  font-weight: 700;
  letter-spacing: .025em;
}
.halaqah-badge-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--blue-500);
  box-shadow: 0 0 0 5px var(--blue-100);
}
.halaqah-title { max-width: 100%; margin: 0; }
.halaqah-title-ar {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: .2rem;
  color: var(--blue-600);
  font-family: 'Cairo', 'Tajawal', sans-serif;
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: right;
}
.halaqah-title-en {
  display: block;
  color: var(--blue-900);
  font-size: clamp(2.25rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.055em;
}
.halaqah-kicker {
  margin: 1.7rem 0 .65rem;
  color: var(--blue-700);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.halaqah-section .halaqah-headline {
  max-width: 35rem;
  margin: 0 0 1rem;
  color: var(--blue-900);
  font-size: clamp(1.65rem, 2.3vw, 2.1rem);
  line-height: 1.28;
  letter-spacing: -.035em;
}
.halaqah-copy {
  max-width: 58ch;
  margin: 0 0 .85rem;
  color: var(--gray-500);
  font-size: .95rem;
  line-height: 1.82;
}
.halaqah-intro { color: var(--blue-800); font-weight: 600; }
.halaqah-section .halaqah-method {
  max-width: 58ch;
  margin: 1.65rem 0 1.8rem;
  padding: 1.2rem;
  border: 1px solid var(--blue-100);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--white), var(--blue-50));
  color: var(--blue-800);
  box-shadow: 0 14px 30px -24px rgba(10,63,94,.35);
}
.halaqah-method-content { min-width: 0; }
.halaqah-method-label {
  display: block;
  margin: 0 0 .35rem;
  color: var(--blue-700);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.halaqah-method-copy {
  margin: 0;
  color: var(--blue-800);
  font-size: .92rem;
  line-height: 1.65;
}
.halaqah-method-copy strong { color: var(--blue-900); }
.halaqah-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.2rem; }
.halaqah-primary {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 48px;
  padding: .75rem 1.15rem;
  border-radius: 10px;
  background: var(--blue-600);
  color: var(--white);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.3;
  transition: background .2s ease, transform .2s ease;
}
.halaqah-primary:hover { background: var(--blue-700); transform: translateY(-2px); }
.halaqah-action-arrow { margin-left: .2rem; }
.halaqah-secondary {
  padding: .55rem .1rem;
  color: var(--blue-700);
  font-size: .86rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--blue-300);
  text-underline-offset: 5px;
}
.halaqah-secondary:hover { color: var(--blue-900); }
.halaqah-actions a:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 5px; }
.halaqah-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.35rem, 2.5vw, 2rem);
  border: 1px solid var(--blue-700);
  border-radius: 18px;
  background: linear-gradient(150deg, var(--blue-900), var(--blue-800) 55%, var(--blue-700));
  color: var(--white);
  box-shadow: 0 20px 45px -32px rgba(10,63,94,.25);
}
.halaqah-panel::before {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  right: -95px;
  top: -90px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(255,255,255,.025), 0 0 0 65px rgba(255,255,255,.018);
  pointer-events: none;
}
.halaqah-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.halaqah-panel-head span { font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 700; line-height: 1.3; }
.halaqah-panel-head strong {
  flex: none;
  color: var(--blue-200);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.4;
}
.halaqah-section .halaqah-subjects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.1rem;
  margin: 1rem 0 .8rem;
  padding: 0;
}
.halaqah-section .halaqah-subjects li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3.3rem;
  padding: .6rem .1rem .6rem 1.2rem;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.4;
}
.halaqah-subjects li::before {
  content: '';
  position: absolute;
  left: .1rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-300);
}
.halaqah-section .halaqah-extra { margin: 1.1rem 0 1.8rem; color: var(--blue-200); font-size: .82rem; line-height: 1.6; }
.halaqah-panel-rule { width: 2.2rem; height: 2px; margin-bottom: 1rem; background: var(--blue-300); }
.halaqah-panel-note { max-width: 29ch; color: var(--white); font-size: 1rem; font-weight: 600; line-height: 1.65; }
.halaqah-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 3rem 0 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--blue-100);
  border-bottom: 1px solid var(--blue-100);
}
.halaqah-fact { min-width: 0; padding: .25rem clamp(1rem, 3vw, 2rem); border-left: 1px solid var(--blue-100); }
.halaqah-fact:first-child { padding-left: 0; border-left: 0; }
.halaqah-fact dt { margin-bottom: .2rem; color: var(--gray-500); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.halaqah-fact dd { margin: 0; color: var(--blue-900); font-size: clamp(.86rem, 1.2vw, 1rem); font-weight: 700; line-height: 1.5; }
.halaqah-timetable { margin: .2rem 0 .55rem; padding: 0; }
.halaqah-timetable li {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--blue-100);
  color: var(--blue-800);
  font-size: .84rem;
  line-height: 1.4;
}
.halaqah-timetable li:last-child { border-bottom: 0; }
.halaqah-timetable li span:last-child { text-align: right; white-space: nowrap; }
.halaqah-timezone { display: block; color: var(--gray-500); font-size: .72rem; font-weight: 600; line-height: 1.4; }

@media (max-width: 900px) {
  .halaqah-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .halaqah-lead { max-width: 700px; }
  .halaqah-panel { max-width: 700px; }
}
@media (max-width: 650px) {
  .halaqah-section { padding: 3.5rem .85rem; }
  .halaqah-shell { padding: 2rem 1.2rem; border-radius: 22px; }
  .halaqah-title-ar { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .halaqah-kicker { margin-top: 1.4rem; }
  .halaqah-panel { padding: 1.4rem; }
  .halaqah-facts { grid-template-columns: 1fr; margin-top: 2.2rem; padding: .4rem 0; }
  .halaqah-fact, .halaqah-fact:first-child { padding: .8rem 0; border-left: 0; border-bottom: 1px solid var(--blue-100); }
  .halaqah-fact:last-child { border-bottom: 0; }
}
@media (max-width: 380px) {
  .halaqah-section .halaqah-subjects { grid-template-columns: 1fr; }
}