/* ════════════════════════════════════════════════════════════
   NEXGEN SCHOLAR — Premium SaaS Design System
   Based on Pitch Deck | Inspired by Stripe, Linear, Notion
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ─── Design Tokens ─── */
:root {
  /* Brand — Pitch Deck Colors */
  --brand:         #003DA5;  /* Deep Blue */
  --brand-dark:    #001F4D;  /* Dark Navy */
  --brand-light:   #5DADE2;  /* Light Blue */
  --brand-subtle:  #E3F2FD;  /* Subtle Blue */
  --gold:          #F0AD4E;  /* Gold/Yellow */
  --gold-dark:     #D4A574;  /* Darker Gold */
  --gold-subtle:   #FEF9EE;  /* Subtle Gold */

  /* Ink */
  --ink:           #111827;
  --ink-2:         #374151;
  --ink-3:         #6B7280;
  --ink-4:         #9CA3AF;

  /* Surfaces */
  --surface:       #FFFFFF;
  --surface-1:     #F9FAFB;
  --surface-2:     #F3F4F6;
  --surface-dark:  #0F1117;

  /* Borders */
  --border:        #E5E7EB;
  --border-strong: #D1D5DB;

  /* Semantic */
  --success:       #059669;
  --success-bg:    #ECFDF5;
  --success-border:#6EE7B7;
  --danger:        #DC2626;
  --danger-bg:     #FEF2F2;
  --danger-border: #FECACA;
  --warning:       #D97706;
  --warning-bg:    #FFFBEB;
  --warning-border:#FDE68A;
  --info:          #2563EB;
  --info-bg:       #EFF6FF;
  --info-border:   #BFDBFE;

  /* Legacy aliases */
  --blue:          var(--brand);
  --blue-dark:     var(--brand-dark);
  --blue-light:    var(--brand-light);
  --blue-50:       var(--brand-subtle);
  --blue-100:      var(--brand-light);
  --dark:          var(--ink);
  --white:         var(--surface);
  --gray-50:       var(--surface-1);
  --gray-100:      var(--surface-2);
  --gray-200:      var(--border);
  --gray-300:      var(--border-strong);
  --gray-400:      #9CA3AF;
  --gray-500:      var(--ink-4);
  --gray-600:      var(--ink-3);
  --gray-700:      var(--ink-2);
  --gray-800:      #374151;
  --gray-900:      var(--ink);

  --font:          'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --max-w:         1280px;
  --content-w:     1080px;
  --nav-h:         64px;
  --sec-pad:       72px;

  /* Deliberately more contrast between steps than a flat scale — small,
     frequently-seen interactive elements (buttons, inputs, badges) read
     crisp and precise; only large content containers stay generously
     rounded. Uniform soft-rounding everywhere is one of the more
     recognizable "generated from a template" tells. */
  --r-sm:          4px;
  --r:             6px;
  --r-lg:          12px;
  --r-xl:          16px;
  --r-2xl:         24px;
  --r-full:        9999px;

  /* Apple-style layered shadows */
  --shadow-xs:     0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:     0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow:        0 4px 6px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.03);
  --shadow-md:     0 10px 15px rgba(0,0,0,.07), 0 4px 6px rgba(0,0,0,.04);
  --shadow-lg:     0 20px 25px rgba(0,0,0,.08), 0 8px 10px rgba(0,0,0,.04);
  --shadow-xl:     0 25px 50px rgba(0,0,0,.10), 0 12px 20px rgba(0,0,0,.05);

  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --spring:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t:             all 0.2s var(--ease);
  --t-fast:        all 0.15s var(--ease);
}

/* ─── Reset ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 450;
  color: var(--ink);
  background: var(--surface);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Explicit, not implicit: leaving overflow-y unset here lets the spec's
     overflow-x/y coupling silently turn it into `auto`, which in Safari can
     break position:sticky on descendants (e.g. the profile page sidebar). */
  overflow-y: visible;
}
img { max-width: 100%; height: auto; display: block; }

/* ─── Icon restyle ───
   All content icons are inline SVGs sharing the same thin (1.75-2px),
   fully-rounded outline style — the single most recognizable "AI-generated
   site" tell, since it's the default of every Lucide/Feather-style icon
   pack template generators reach for. CSS stroke-width/linecap/linejoin
   override the SVGs' own presentation attributes, so this one rule reskins
   every icon on the site — bolder and more geometric — without touching
   markup. Google's brand-logo SVGs (sign-in buttons) use fill, not stroke,
   so the [fill="none"] selector naturally excludes them. */
svg[fill="none"] {
  stroke-width: 2.25;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.btn-profile svg { stroke-width: 2.25; stroke-linecap: square; stroke-linejoin: miter; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }
input, textarea, select { font-family: var(--font); }
ul, ol { list-style: none; }

/* ─── Navigation ─── */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--nav-h);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.navbar.scrolled {
  background: rgba(255,255,255,0.96);
  border-bottom-color: var(--border);
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo { width: 42px; height: 42px; flex-shrink: 0; }
.nav-logo-img { height: 42px; width: auto; flex-shrink: 0; }
.nav-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.nav-name .accent { color: var(--brand); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  padding: 7px 13px;
  border-radius: var(--r);
  transition: var(--t-fast);
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); background: var(--surface-1); }
.nav-link.active { color: var(--ink); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.btn-profile {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: var(--t-fast);
  overflow: hidden; cursor: pointer;
}
.btn-profile:hover { border-color: var(--brand); background: var(--brand-subtle); }
.btn-profile svg { width: 16px; height: 16px; color: var(--ink-3); stroke: currentColor; fill: none; stroke-width: 1.75; }
.btn-profile.signed-in { border-color: var(--brand); background: var(--brand-subtle); }
.btn-profile.signed-in svg { color: var(--brand); }
.btn-profile .profile-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.nav-hamburger {
  display: none;
  flex-direction: column; gap: 4px;
  cursor: pointer; padding: 7px;
  border-radius: var(--r-sm);
}
.nav-hamburger span { display: block; width: 20px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: var(--t-fast); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 16px 16px;
  z-index: 999;
  flex-direction: column; gap: 2px;
}
.nav-mobile.open { display: flex; }
.nav-mobile .nav-link { padding: 11px 13px; font-size: 15px; border-radius: var(--r); color: var(--ink-2); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 20px;
  font-size: 14px; font-weight: 600; font-family: var(--font);
  border-radius: var(--r);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: var(--t-fast);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}
.btn-primary { background: var(--brand); color: white; border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

.btn-secondary { background: transparent; color: white; border-color: rgba(255,255,255,.4); }
.btn-secondary:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }

.btn-outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: var(--brand-subtle); }

.btn-outline-white { background: transparent; color: white; border-color: rgba(255,255,255,.5); }
.btn-outline-white:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.8); }

.btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); }

.btn-dark { background: var(--ink); color: white; border-color: var(--ink); }
.btn-dark:hover { background: #1f2937; }

.btn-white { background: white; color: var(--brand); border-color: rgba(255,255,255,.9); }
.btn-white:hover { background: rgba(255,255,255,.92); }

.btn-ghost { background: transparent; color: var(--ink-3); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn-lg { padding: 13px 28px; font-size: 15px; }
.btn-sm { padding: 7px 14px; font-size: 13px; }

.btn-icon { padding: 9px; border-radius: 50%; }
.btn-full { width: 100%; justify-content: center; }
.btn-loading { pointer-events: none; opacity: .65; }

/* Google Sign In Button */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 18px;
  font-size: 14px; font-weight: 600;
  color: var(--ink); background: white;
  border: 1.5px solid var(--border); border-radius: var(--r);
  cursor: pointer; transition: var(--t-fast);
  font-family: var(--font);
}
.btn-google:hover { background: var(--surface-1); border-color: var(--border-strong); }
.btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ─── Layout ─── */
.section { padding: var(--sec-pad) 0; }
.section-sm { padding: 72px 0; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
}
.container-sm {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;
}
.container-xs {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 40px;
}

.section-white  { background: var(--surface); color: var(--ink); }
.section-subtle { background: var(--surface-1); color: var(--ink); }
.section-blue   { background: var(--brand); color: white; }
.section-dark   { background: var(--surface-dark); color: white; }
.section-gray   { background: var(--surface-1); color: var(--ink); }

/* ─── Grid ─── */
.grid { display:grid; gap:24px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }

/* ─── Typography ─── */
.hero-heading {
  font-size: clamp(48px, 6.5vw, 88px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.03em;
}
.section-heading {
  font-size: clamp(30px, 3.8vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 20px;
}
.subheading {
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.eyebrow-blue { color: var(--brand); }
.eyebrow-gold { color: var(--gold-dark); }

.divider {
  width: 36px; height: 3px;
  background: var(--brand); border-radius: 2px;
  margin: 10px 0 24px;
}
.divider-blue  { background: var(--brand); }
.divider-white { background: rgba(255,255,255,.25); }
.divider-gold  { background: var(--gold); }
.divider-center { margin: 10px auto 24px; }

/* ─── Cards ─── */
.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: border-color var(--t-fast);
}
.card-elevated { border: 1px solid var(--border); }
/* No more boxed/tinted icon container — the icon sits directly on the
   card, sized up slightly to keep the same visual weight the box used to
   provide, with tighter margin since there's no padding of its own to
   account for. */
.card-icon {
  display: flex; align-items: center; justify-content: center;
  width: fit-content;
  margin: 0 auto 14px; flex-shrink: 0;
}
.card-icon svg { width: 30px; height: 30px; stroke: var(--brand); fill: none; }
.card-icon.gold svg { stroke: var(--gold-dark); }

/* ─── Callout Boxes ─── */
.callout {
  padding: 13px 16px;
  border-radius: var(--r);
  border-left: 3px solid;
  display: flex; gap: 11px; align-items: flex-start;
}
.callout-info    { background: var(--info-bg);    border-color: var(--info);    color: #1e40af; }
.callout-success { background: var(--success-bg); border-color: var(--success); color: #065f46; }
.callout-warning { background: var(--warning-bg); border-color: var(--warning); color: #78350f; }
.callout-danger  { background: var(--danger-bg);  border-color: var(--danger);  color: #7f1d1d; }
.callout-icon  { font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.callout-title { font-weight: 600; margin-bottom: 3px; font-size: 13px; }
.callout-body  { font-size: 13px; line-height: 1.65; }

/* ─── Accordion ─── */
.accordion-item {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.accordion-item:first-child { border-top: 1px solid var(--border); }
.accordion-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 15px 0;
  font-family: var(--font); font-size: 15px; font-weight: 600;
  color: var(--ink); background: transparent;
  cursor: pointer; transition: color var(--t-fast);
  text-align: left; border: none;
  gap: 12px;
}
.accordion-btn:hover { color: var(--brand); }
.accordion-btn[aria-expanded="true"] { color: var(--brand); }
.accordion-btn[aria-expanded="true"] .acc-icon { transform: rotate(45deg); color: var(--brand); }
.acc-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--ink-4); transition: transform 0.25s var(--ease), color var(--t-fast); }
.accordion-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s var(--ease);
}
.accordion-body.open { max-height: 3000px; }
.accordion-content {
  padding: 0 0 18px;
  font-size: 14px; line-height: 1.7; color: var(--ink-3);
}
.accordion-content ul { padding-left: 18px; list-style: disc; margin-top: 8px; }
.accordion-content ul li { margin-bottom: 4px; }
.accordion-content p + p { margin-top: 10px; }
.accordion-content strong { color: var(--ink-2); }

/* Danger variant */
.accordion-danger .accordion-btn[aria-expanded="true"] { color: var(--danger); }
.accordion-danger .accordion-btn[aria-expanded="true"] .acc-icon { color: var(--danger); }

/* ─── Table ─── */
.table-wrap { overflow-x:auto; border-radius:var(--r); border:1px solid var(--gray-200); }
.table { width:100%; border-collapse:collapse; font-size:15px; }
.table th {
  padding:12px 18px; font-weight:600; font-size:12px;
  letter-spacing:.05em; text-transform:uppercase;
  background:var(--gray-50); color:var(--gray-600);
  text-align:left; border-bottom:1px solid var(--gray-200);
}
.table td {
  padding:13px 18px; color:var(--gray-700);
  border-bottom:1px solid var(--gray-100);
}
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:var(--gray-50); }

/* ── Service Entries Table (Giving Hours application form) ── */
.service-entries-table th,
.service-entries-table td { padding:10px 8px; vertical-align:middle; }
.service-entries-table .form-control { padding:9px 10px; font-size:14px; min-width:130px; }
.service-entries-table input[type="date"],
.service-entries-table input[type="number"] { min-width:110px; }
.service-entries-table input[type="file"] { min-width:160px; }
.service-entries-table th:last-child,
.service-entries-table td:last-child { padding-left:0; padding-right:4px; }

/* ─── Checklist ─── */
.checklist { display:flex; flex-direction:column; gap:10px; }
.check-item { display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.5; color:var(--gray-700); }
.check-icon {
  width:20px; height:20px; border-radius:50%; flex-shrink:0; margin-top:1px;
  background:var(--success-bg); color:var(--success);
  display:flex; align-items:center; justify-content:center; font-size:11px;
}
.check-icon.x { background:var(--danger-bg); color:var(--danger); }

/* ─── Form Elements ─── */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--dark); margin-bottom:7px; letter-spacing:.01em; }
.form-label .req { color:var(--danger); margin-left:3px; }
.form-control {
  width:100%; padding:13px 15px;
  font-size:15px; font-family:var(--font); font-weight:500;
  color:var(--dark); background:var(--white);
  border:1.5px solid var(--gray-300); border-radius:var(--r);
  transition:var(--t-fast); outline:none;
  appearance: none;
}
.form-control::placeholder { color:var(--gray-400); font-weight:400; }
.form-control.is-error { border-color:var(--danger); box-shadow:0 0 0 3px rgba(239,68,68,.1); }
.form-control:disabled { background:var(--gray-100); color:var(--gray-500); cursor:not-allowed; }
.form-error { font-size:12px; color:var(--danger); margin-top:5px; }
.form-hint  { font-size:12px; color:var(--gray-500); margin-top:5px; }

select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; min-height:100px; }

/* ─── Modal ─── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--ease);
  padding: 20px;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: white;
  border-radius: var(--r-xl);
  padding: 40px;
  max-width: 480px; width: 100%;
  position: relative;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.28s var(--ease);
  max-height: 92vh; overflow-y: auto;
  border: 1px solid var(--border);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-lg { max-width: 780px; }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--t-fast);
  border: none; color: var(--ink-3); font-size: 15px; font-family: var(--font);
}
.modal-close:hover { background: var(--surface-2); color: var(--ink); }

/* ─── Tabs ─── */
.tabs { display:flex; gap:4px; border-bottom:2px solid var(--gray-200); margin-bottom:28px; }
.tab-btn {
  padding:10px 22px; font-size:14px; font-weight:600;
  color:var(--gray-600); border-bottom:2px solid transparent;
  margin-bottom:-2px; cursor:pointer; background:none;
  border-top:none; border-left:none; border-right:none;
  font-family:var(--font); transition:var(--t-fast); border-radius:var(--r) var(--r) 0 0;
}
.tab-btn:hover { color:var(--blue); background:var(--blue-50); }
.tab-btn.active { color:var(--blue); border-bottom-color:var(--blue); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ─── Badges ─── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 11px; border-radius:var(--r-full);
  font-size:12px; font-weight:600;
}
.badge-blue    { background:var(--blue-50);    color:var(--blue); }
.badge-success { background:var(--success-bg); color:var(--success); }
.badge-danger  { background:var(--danger-bg);  color:var(--danger); }
.badge-warning { background:var(--warning-bg); color:var(--warning); }
.badge-gray    { background:var(--gray-100);   color:var(--gray-600); }

/* ─── Spinner ─── */
.spinner {
  width:20px; height:20px;
  border:2.5px solid var(--gray-200);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin .7s linear infinite;
  display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── Toast ─── */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  background: var(--ink); color: white;
  padding: 12px 16px; border-radius: var(--r);
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 9px;
  transform: translateX(110%); opacity: 0;
  transition: all 0.3s var(--ease);
  pointer-events: all; max-width: 320px;
  border-left: 3px solid var(--brand);
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.toast-success { border-left-color: var(--success); }
.toast.toast-error   { border-left-color: var(--danger); }
.toast.toast-warning { border-left-color: var(--warning); }

/* ─── Hero ─── */
.hero {
  position: relative; height: 100vh; min-height: 640px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  background-attachment: fixed;
  background-image: url('../Hero_Image.webp');
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    160deg,
    rgba(5, 10, 35, 0.72) 0%,
    rgba(1, 30, 100, 0.5) 50%,
    rgba(0, 0, 0, 0.38) 100%
  );
}
.hero-content {
  position: relative; z-index: 2;
  text-align: center; color: white;
  padding: 0 40px; max-width: 860px;
}
.hero-title {
  font-size: clamp(52px, 7.5vw, 88px);
  font-weight: 800; line-height: 1.0; letter-spacing: -0.03em;
  margin-bottom: 40px;
}
.hero-cta { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* Same hero image/overlay treatment as .hero, but sized by .section's normal
   padding instead of height:100vh — for page headers that want the hero look
   without taking over the full viewport (e.g. the donate page). */
.section-hero-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  background-image: url('../Hero_Image.webp');
}
.section-hero-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    160deg,
    rgba(5, 10, 35, 0.72) 0%,
    rgba(1, 30, 100, 0.5) 50%,
    rgba(0, 0, 0, 0.38) 100%
  );
}
.section-hero-bg > * { position: relative; z-index: 1; }

/* ─── Footer ─── */
.footer {
  background: var(--surface-dark); color: white;
  padding: 80px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 56px;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-logo  { display: flex; align-items: center; gap: 10px; }
.footer-logo-img { height: 32px; width: auto; opacity: 0.85; }
.footer-logo-text { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: white; }
.footer-description { font-size: 13px; color: #6B7280; line-height: 1.75; max-width: 280px; }
.footer-contact-info { font-size: 13px; color: #6B7280; line-height: 1.9; }
.footer-contact-info a { color: #9CA3AF; transition: var(--t-fast); }
.footer-contact-info a:hover { color: white; }
.footer-col-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #6B7280; margin-bottom: 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-link { font-size: 13px; color: #6B7280; transition: var(--t-fast); }
.footer-link:hover { color: #D1D5DB; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07); padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.footer-copyright { font-size: 13px; color: #4B5563; }

/* ─── Scroll Animations ─── */
.fade-up {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

[data-delay="1"] { transition-delay: 60ms; }
[data-delay="2"] { transition-delay: 120ms; }
[data-delay="3"] { transition-delay: 180ms; }
[data-delay="4"] { transition-delay: 240ms; }
[data-delay="5"] { transition-delay: 300ms; }
[data-delay="6"] { transition-delay: 360ms; }

/* ─── Utility ─── */
.text-center { text-align:center; }
.text-blue   { color:var(--blue); }
.text-gold   { color:var(--gold); }
.text-white  { color:var(--white); }
.text-muted  { color:var(--gray-500); }
.text-danger { color:var(--danger); }
.text-success{ color:var(--success); }
.mt-auto { margin-top:auto; }
.hidden  { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.flex    { display:flex; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.gap-2   { gap:8px; }
.gap-3   { gap:12px; }
.gap-4   { gap:16px; }
.w-full  { width:100%; }

/* ─── Section Hero Placeholder ─── */
.placeholder-section {
  height:400px;
  background:var(--gray-100);
  border-radius:var(--r-xl);
  display:flex; align-items:center; justify-content:center;
  border:2px dashed var(--gray-300);
  color:var(--gray-500); font-size:14px; text-align:center;
  padding:24px;
}

/* ─── Responsive ─── */
@media (max-width: 1200px) {
  .container { padding: 0 32px; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .footer-grid > *:last-child { display: none; }
}
@media (max-width: 1024px) {
  :root { --sec-pad: 60px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  :root { --sec-pad: 48px; }
  .container, .container-sm, .container-xs { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-inner { padding: 0 20px; }
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn { min-width: 200px; }
  .hero-content { padding: 0 24px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid > *:last-child { display: block; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .modal { padding: 28px 22px; }
}
@media (max-width: 480px) {
  .btn-lg { padding: 12px 24px; font-size: 14px; }
  .hero-title { font-size: clamp(40px, 11vw, 60px); }
}