/* ============================================= */
/* Dark Mode Palette Refinement (Beautiful Theme) */
/* ============================================= */
body.dark-mode {
  --color-bg:#050d16;
  --color-bg-alt:#071320;
  --color-surface:#0f1e2c;
  --color-surface-alt:#132737;
  --color-elevated:#162c3d;
  --color-border:#1e3244;
  --color-border-strong:#2a4860;
  --color-text:#d9e2ec;
  --color-text-soft:#b4cad7;
  --color-text-muted:#7fa1b8;
  --color-accent:var(--primary);
  --color-accent-alt:var(--accent);
  background:radial-gradient(circle at 35% 25%, #0e1d2c,#050d16 65%);
  color:var(--color-text);
}
/* Dropzone drag-over highlight */
.mng-dropzone.is-dragover{
  background: #eef2ff !important;
  border-color: #6366f1 !important;
}
body.dark-mode header.site-header { background:rgba(7,19,32,.9); backdrop-filter:saturate(180%) blur(14px); }
/* Image actions overlay */
.impact-gallery .impact-gallery-item{ position: relative; }
.impact-gallery .impact-gallery-item .img-actions{
  position:absolute; right:8px; bottom:8px; display:flex; gap:6px;
}
.btn.tiny{ font-size:.7rem; padding:6px 8px; border-radius:6px; }

/* Lightbox modal */
.mng-lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999; }
.mng-lightbox .mng-lightbox-backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.7); }
.mng-lightbox .mng-lightbox-content{ position:relative; max-width:min(98vw,1200px); max-height:min(92vh,1200px); background:#0b1220; padding:10px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.mng-lightbox .mng-lightbox-content img{ display:block; max-width:calc(98vw - 40px); max-height:70vh; width:auto; height:auto; margin:auto; background:#0f172a; border-radius:6px; }
.mng-lightbox .mng-lightbox-close{ position:absolute; top:8px; right:8px; border:0; background:#ef4444; color:#fff; width:36px; height:36px; border-radius:8px; font-size:20px; line-height:36px; cursor:pointer; }
.mng-lightbox .mng-lightbox-actions{ display:flex; gap:10px; justify-content:center; margin-top:10px; }
/* Perceived performance tweaks */
.impact-gallery .impact-gallery-item img{ display:block; width:100%; height:auto; background:#f1f5f9; }
.impact-gallery .impact-gallery-item{ animation:fadein .2s ease-in; }
@keyframes fadein{ from{opacity:0} to{opacity:1} }
/* Mobile parity tweaks */
@media (max-width: 480px){
  .impact-gallery.cols-4, .impact-gallery.cols-3{ grid-template-columns: repeat(2, 1fr) !important; }
  .impact-gallery .impact-gallery-item .img-actions{ right:6px; bottom:6px; }
  .btn.small, .btn.tiny{ padding:8px 10px; font-size:.8rem; }
  .mng-lightbox .mng-lightbox-content img{ max-height:60vh; }
  .mng-previews{ gap:8px; }
}
@media (max-width: 360px){
  .impact-gallery.cols-4, .impact-gallery.cols-3{ grid-template-columns: 1fr !important; }
}
/* Tablet spacing & alignment polish */
@media (min-width:641px) and (max-width:1024px){
  /* Gallery: prefer 3 columns with tighter gap for medium screens */
  .impact-gallery{ gap:16px; }
  .impact-gallery.cols-3,
  .impact-gallery.cols-4,
  .impact-gallery.cols-5,
  .impact-gallery.cols-6{ grid-template-columns:repeat(3,1fr) !important; }
  .impact-gallery .impact-gallery-item .img-actions{ right:10px; bottom:10px; }

  /* Lightbox: fit image comfortably on tablets */
  .mng-lightbox .mng-lightbox-content{ max-width:min(96vw,1000px); }
  .mng-lightbox .mng-lightbox-content img{ max-height:68vh; }

  /* Buttons and container rhythm */
  .btn.small{ padding:10px 16px; font-size:.78rem; }
  .container{ padding:0 30px; }
  .section{ padding:60px 0; }

  /* Uploader previews spacing */
  .mng-previews{ gap:12px; }
}
body.dark-mode .panel-card,
body.dark-mode .feature-card,
body.dark-mode .support-card,
body.dark-mode .example-card,
body.dark-mode .story-facts li,
body.dark-mode .mission-highlight .mini-stat,
body.dark-mode .trust-badges .badge,
body.dark-mode .bank-lines,
body.dark-mode details.bank-accordion,
body.dark-mode .impact-item,
body.dark-mode .toast,
body.dark-mode .copy-id-pill { background:var(--color-surface-alt); border-color:var(--color-border); }
body.dark-mode details.bank-accordion[open] { background:var(--color-elevated); }
body.dark-mode .support-card:hover,
body.dark-mode .feature-card:hover,
body.dark-mode .example-card:hover { box-shadow:0 20px 48px -22px rgba(0,0,0,.75); }
body.dark-mode .impact-item::after { background:linear-gradient(145deg,#102433,#0d1d29); }
body.dark-mode .impact-item strong { filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
body.dark-mode .mission-highlight .mini-stat { box-shadow:0 12px 30px -18px rgba(0,0,0,.7); }
body.dark-mode .toast { border-color:var(--color-border-strong); }
body.dark-mode .toast.error { background:#3f1d1d; border-color:#5b2b2b; }
body.dark-mode .membership-form input,
body.dark-mode .membership-form textarea,
body.dark-mode .membership-form select,
body.dark-mode .donation-form input,
body.dark-mode .donation-form textarea,
body.dark-mode .donation-form select,
body.dark-mode .modal-form input,
body.dark-mode .modal-form textarea,
body.dark-mode .modal-form select { background:var(--color-surface-alt); border-color:var(--color-border); color:var(--color-text); }
body.dark-mode .membership-form input:focus,
body.dark-mode .membership-form textarea:focus,
body.dark-mode .membership-form select:focus,
body.dark-mode .donation-form input:focus,
body.dark-mode .donation-form textarea:focus,
body.dark-mode .donation-form select:focus,
body.dark-mode .modal-form input:focus,
body.dark-mode .modal-form textarea:focus,
body.dark-mode .modal-form select:focus { background:#102433; border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(14,165,233,.18); }
body.dark-mode .validate-form .field.error input,
body.dark-mode .validate-form .field.error textarea,
body.dark-mode .validate-form .field.error select { background:#2b0f17; }
body.dark-mode .amount-presets .preset { background:var(--color-surface); border-color:var(--color-border); color:var(--color-text-muted); }
body.dark-mode .amount-presets .preset.active, body.dark-mode .amount-presets .preset:hover { color:#fff; }
body.dark-mode .social-proof-band { background:#0c1a25; color:var(--color-text-muted); }
body.dark-mode .milestone-banner { color:#fff; }
body.dark-mode .calc-tooltip .tip-card { background:var(--color-surface-alt); border-color:var(--color-border); }
body.dark-mode ::placeholder { color:#5d7484; }
body.dark-mode .modal-form label, body.dark-mode .membership-form label { color:var(--color-text-muted); }
body.dark-mode .section.alt { background:#071320; }
body.dark-mode .section { background:transparent; }
body.dark-mode .story-facts li:before { color:var(--color-accent); }
body.dark-mode .support-card h3 { background:linear-gradient(90deg,var(--primary),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.dark-mode .hero-centered-actions .hero-pill { box-shadow:0 18px 40px -22px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08) inset; }
body.dark-mode .bank-accordion summary { color:var(--color-text-soft); }
body.dark-mode .mission-highlight .mission-quote .sub-line { color:var(--color-text-muted); }
body.dark-mode .testimonials-carousel .carousel-controls button { background:var(--color-surface-alt); border-color:var(--color-border); color:var(--color-text-muted); }
body.dark-mode .testimonials-carousel .carousel-controls button:hover { background:var(--color-elevated); color:var(--color-text); }
body.dark-mode .carousel-dots button { background:#2b4455; }
body.dark-mode .carousel-dots button.active { background:var(--accent); }
body.dark-mode .verify-result .ok { background:#0d3b26; color:#bffbd9; }
body.dark-mode .verify-result .fail { background:#3f1d1d; color:#fcb7b7; }
body.dark-mode .copy-id-pill { color:var(--color-text-soft); }
body.dark-mode .copy-id-pill:hover { background:var(--color-elevated); }
body.dark-mode .membership-form.enhanced:before { background:linear-gradient(135deg,rgba(14,165,233,.05),rgba(99,102,241,.04)); }
body.dark-mode .panel { background:linear-gradient(145deg,#0f1e2c,#0a1620); border-color:#1e3244; }
body.dark-mode .panel h2 { color:#e2f3ff; }
body.dark-mode #backToTop { background:linear-gradient(135deg,var(--primary),var(--accent)); }
body.dark-mode .impact-gallery-item { background:#142533; }
body.dark-mode .impact-gallery-item img { filter:brightness(.92); }
body.dark-mode .impact-gallery-item:hover img { filter:brightness(1); }
body.dark-mode .dev-credit { background:linear-gradient(135deg,#081725,#071320 55%,#081725); }

/* Accessible focus ring */
body.dark-mode :focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
/* Smooth entering animation for prepended social proof items */
.proof-track .proof-item { animation:proofFade .6s ease; }
@keyframes proofFade { 0%{opacity:0; transform:translateY(6px);} 100%{opacity:1; transform:none;} }
/* Member tier badges */
.member-badge{ display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:20px; font-size:.55rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; background:linear-gradient(135deg,#142533,#0f1e2c); border:1px solid #1e3244; color:#9fb4c5; position:relative; }
.member-badge:before{ content:""; width:8px; height:8px; border-radius:50%; background:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.3); }
.member-badge.supporter:before{ background:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.35); }
.member-badge.sustainer:before{ background:#ff8d23; box-shadow:0 0 0 3px rgba(255,141,35,.35); }
.member-badge.champion:before{ background:#ff2674; box-shadow:0 0 0 3px rgba(255,38,116,.35); }
.member-badge.supporter{ background:linear-gradient(135deg,#132737,#0f1e2c); }
.member-badge.sustainer{ background:linear-gradient(135deg,#172c3d,#142433); }
.member-badge.champion{ background:linear-gradient(135deg,#2a1730,#1a0e20); }
body.amoled-mode .member-badge{ background:#050a0f; border-color:#14202a; color:#7fa1b8; }
body.amoled-mode .member-badge.supporter{ background:#050f17; }
body.amoled-mode .member-badge.sustainer{ background:#0d1820; }
body.amoled-mode .member-badge.champion{ background:#140916; }
/* Universal verification badge */
.verify-badge{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(140deg,#0ea5e9,#1d4ed8); color:#fff; font-size:.68rem; font-weight:700; line-height:1; box-shadow:0 0 0 2px #0b1621,0 2px 4px -1px rgba(0,0,0,.5); margin-right:4px; position:relative; }
body.dark-mode .verify-badge{ box-shadow:0 0 0 2px #050d16,0 2px 4px -1px rgba(0,0,0,.6); }
body.amoled-mode .verify-badge{ box-shadow:0 0 0 2px #000,0 2px 4px -1px rgba(0,0,0,.7); }
.verify-badge.large{ width:20px; height:20px; font-size:.75rem; }
.proof-track .proof-item .verify-badge{ margin-right:6px; }
/* ================= AMOLED PURE BLACK MODE ================= */
body.amoled-mode {
  --amoled-bg:#000; --amoled-surface:#050a0f; --amoled-surface-alt:#0b1217; --amoled-border:#14202a; --amoled-border-soft:#0e161d; --amoled-text:#e6eef5; --amoled-text-soft:#a9bcc9; --amoled-muted:#6e8594;
  background:#000 !important; color:var(--amoled-text);
}
body.amoled-mode header.site-header { background:rgba(0,0,0,.82); backdrop-filter:saturate(180%) blur(12px); }
body.amoled-mode .section.alt { background:#000; }
body.amoled-mode .panel-card,
body.amoled-mode .feature-card,
body.amoled-mode .support-card,
body.amoled-mode .example-card,
body.amoled-mode .story-facts li,
body.amoled-mode .mission-highlight .mini-stat,
body.amoled-mode .trust-badges .badge,
body.amoled-mode .bank-lines,
body.amoled-mode details.bank-accordion,
body.amoled-mode .impact-item,
body.amoled-mode .toast,
body.amoled-mode .copy-id-pill { background:var(--amoled-surface); border:1px solid var(--amoled-border-soft); }
body.amoled-mode details.bank-accordion[open] { background:var(--amoled-surface-alt); }
body.amoled-mode .impact-item::after { background:linear-gradient(145deg,#050a0f,#050a0f); }
body.amoled-mode .impact-item::before { opacity:.2; }
body.amoled-mode .impact-item strong { text-shadow:0 0 8px rgba(14,165,233,.25); }
body.amoled-mode .membership-form input,
body.amoled-mode .membership-form textarea,
body.amoled-mode .membership-form select,
body.amoled-mode .donation-form input,
body.amoled-mode .donation-form textarea,
body.amoled-mode .donation-form select,
body.amoled-mode .modal-form input,
body.amoled-mode .modal-form textarea,
body.amoled-mode .modal-form select { background:var(--amoled-surface-alt); border-color:var(--amoled-border); color:var(--amoled-text); }
body.amoled-mode .membership-form input:focus,
body.amoled-mode .membership-form textarea:focus,
body.amoled-mode .membership-form select:focus,
body.amoled-mode .donation-form input:focus,
body.amoled-mode .donation-form textarea:focus,
body.amoled-mode .donation-form select:focus,
body.amoled-mode .modal-form input:focus,
body.amoled-mode .modal-form textarea:focus,
body.amoled-mode .modal-form select:focus { background:#050a0f; border-color:var(--primary); box-shadow:0 0 0 3px rgba(14,165,233,.22); }
body.amoled-mode .amount-presets .preset { background:var(--amoled-surface-alt); border-color:var(--amoled-border); color:var(--amoled-muted); }
body.amoled-mode .amount-presets .preset.active, body.amoled-mode .amount-presets .preset:hover { color:#fff; }
body.amoled-mode .social-proof-band { background:#050a0f; color:var(--amoled-muted); }
body.amoled-mode .calc-tooltip .tip-card { background:var(--amoled-surface); border-color:var(--amoled-border); }
body.amoled-mode .mission-highlight .mission-quote .sub-line { color:var(--amoled-muted); }
body.amoled-mode .support-card h3 { background:linear-gradient(90deg,#0ea5e9,#6366f1); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.amoled-mode .hero-centered-actions .hero-pill { box-shadow:0 18px 44px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06) inset; }
body.amoled-mode #backToTop { background:linear-gradient(135deg,#0ea5e9,#6366f1); }
body.amoled-mode .dev-credit { background:#050a0f; border-color:#0e161d; }
body.amoled-mode .metrics-bar { background:#000; }
body.amoled-mode .auto-strip { background:#000; }
body.amoled-mode .toast.error { background:#351516; border-color:#662d2d; }
body.amoled-mode .verify-result .ok { background:#0a2d1f; }
body.amoled-mode .verify-result .fail { background:#351516; }
body.amoled-mode ::placeholder { color:#4d5f6b; }
body.amoled-mode :focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
body.amoled-mode .section-title { background:linear-gradient(90deg,#0ea5e9,#6366f1); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.amoled-mode .milestone-banner { background:linear-gradient(90deg,#0ea5e9,#6366f1,#ff8d23); }
.hero-slide { position:absolute; inset:0; }
.hero-slide picture.hero-media, .hero-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-slide picture::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); }
/* Slider smoothing */
.hero-slider { position:relative; overflow:hidden; }
.hero-slide { opacity:0; transition:opacity .6s ease; will-change:opacity; }
.hero-slide.active { opacity:1; z-index:2; }
@media (prefers-reduced-motion: reduce){ .hero-slide { transition:opacity .4s ease; } }
/*
Theme Name: Mariyinanbu NGO Theme
Theme URI: https://example.org/mariyinanbu
Author: Mariyinanbu
Author URI: https://example.org
Description: Custom NGO theme with hero slider, membership, donations, and real-time member counter.
Version: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mariyinanbu-ngo
*/

/* Basic resets and typography */
body { margin:0; font-family: 'Roboto', Arial, sans-serif; line-height:1.5; color:#d9e2ec; background:radial-gradient(circle at 30% 25%,#132a40,#050c14 60%); -webkit-font-smoothing:antialiased; }
:root { --primary:#0ea5e9; --primary-dark:#0284c7; --accent:#6366f1; --accent-alt:#1d4ed8; --bg:#0b1621; --muted:#7a8a99; --radius:10px; --gradient:linear-gradient(135deg,#0ea5e9,#6366f1); --shadow:0 8px 28px -8px rgba(0,0,0,.55); }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
header.site-header { background:rgba(10,24,36,.85); border-bottom:1px solid #142c3e; position:sticky; top:0; z-index:1000; backdrop-filter:saturate(180%) blur(14px); transition:box-shadow .4s, background .6s; }
header.site-header.colorful { background:rgba(10,24,36,.85); }
body.scrolled header.site-header { box-shadow:0 6px 24px -12px rgba(0,0,0,.25); }
.membership-form button.btn.loading { position:relative; pointer-events:none; opacity:.75; }
.membership-form button.btn.loading:after { content:""; position:absolute; right:14px; top:50%; width:16px; height:16px; margin-top:-8px; border:2px solid rgba(255,255,255,.6); border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg);} }
.site-header-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; min-height:70px; }
.site-branding { display:flex; align-items:center; gap:12px; }
.site-title { font-size:1.35rem; margin:0; font-weight:700; letter-spacing:.5px; }
.tagline { color:#555; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600; }
.logo { font-size:1.9rem; line-height:1; font-weight:800; color:var(--primary); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; filter:drop-shadow(0 0 6px rgba(14,165,233,.55)); }
.nav-primary { display:flex; gap:28px; }
.nav-primary a { padding:14px 8px; display:inline-block; font-weight:600; text-transform:uppercase; font-size:.75rem; letter-spacing:.08em; position:relative; }
.nav-primary a::after { content:""; position:absolute; left:8px; right:8px; bottom:10px; height:2px; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:.35s; }
.nav-primary a:hover::after, .nav-primary a:focus::after { transform:scaleX(1); }
.nav-ctas { display:flex; gap:10px; align-items:center; }
.nav-primary ul { list-style:none; margin:0; padding:0; display:flex; gap:30px; align-items:center; }
.nav-primary li { position:relative; }
.nav-primary li.current-menu-item > a, .nav-primary li.current-page-ancestor > a { color:var(--primary); }
.nav-primary li.current-menu-item > a::after { transform:scaleX(1); }
.nav-primary a { border-radius:6px; }
.nav-primary a:not(.cta):hover { color:var(--primary-dark); }
.nav-primary a:not(.cta)::before { content:""; position:absolute; inset:0; border-radius:6px; background:linear-gradient(120deg,rgba(230,57,70,.12),rgba(230,57,70,0)); opacity:0; transition:.35s; }
.nav-primary a:not(.cta):hover::before { opacity:1; }

/* Base button */
.btn { display:inline-block; padding:12px 24px; border-radius:var(--radius); background:var(--gradient); color:#fff; font-weight:600; font-size:.85rem; letter-spacing:.05em; position:relative; overflow:hidden; transition:filter .4s, transform .25s, box-shadow .4s; box-shadow:0 10px 25px -10px rgba(14,165,233,.5); }
.btn:hover { filter:brightness(.95); text-decoration:none; }
.btn:active { transform:translateY(2px); }
/* Button size variants */
.btn.small { padding:8px 14px; font-size:.75rem; box-shadow:0 8px 18px -10px rgba(14,165,233,.45); }
.btn.tiny  { padding:6px 10px; font-size:.68rem; border-radius:8px; box-shadow:0 6px 14px -10px rgba(14,165,233,.4); }

/* Metrics bar */
.metrics-bar { background:#081521; color:#9fb3c8; font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; display:flex; gap:40px; justify-content:center; padding:10px 14px; flex-wrap:wrap; border-bottom:1px solid #11293c; }
.metrics-bar .metric { display:flex; flex-direction:column; align-items:center; gap:4px; }
.metrics-bar .metric strong { font-size:1.05rem; letter-spacing:0; font-weight:600; color:#e2f3ff; }
@media (max-width:600px){ .metrics-bar { gap:18px; } .metrics-bar .metric strong { font-size:.95rem; } }
.nav-primary .cta { background:linear-gradient(135deg,#1d4ed8,#0ea5e9); color:#fff; padding:10px 18px; border-radius:var(--radius); box-shadow:0 6px 18px -6px rgba(14,165,233,.45); font-size:.7rem; letter-spacing:.1em; }
.nav-primary .cta.alt { background:linear-gradient(135deg,#6366f1,#0ea5e9); }
.nav-primary .cta:hover { background:var(--primary-dark); text-decoration:none; }
.nav-primary .cta, .nav-primary .cta.alt { position:relative; overflow:hidden; background:var(--gradient); }
.nav-primary .cta.alt { background:linear-gradient(135deg,var(--accent),var(--accent-alt)); }
.nav-primary .cta.gradient-anim, .btn.gradient-anim { background:linear-gradient(90deg,#ff512f,#dd2476,#1d8cf8,#1d3557); background-size:300% 300%; animation:gradientFlow 6s ease infinite; }
.nav-primary .cta.gradient-anim:hover, .btn.gradient-anim:hover { animation-play-state:paused; filter:brightness(1); }
@keyframes gradientFlow { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }

/* Header CTA emphasis */
/* Animated CTA styles */
.nav-primary .cta.primary-donate { font-size:.72rem; padding:12px 26px 12px 24px; border-radius:34px; font-weight:700; letter-spacing:.16em; box-shadow:0 8px 26px -10px rgba(255,107,45,.55),0 0 0 1px rgba(255,255,255,.05) inset; position:relative; display:inline-flex; align-items:center; gap:8px; background:linear-gradient(120deg,#ff6b2d,#ff2674,#ff9f1c,#ff6b2d); background-size:300% 100%; animation:donateShift 7s ease-in-out infinite; }
.nav-primary .cta.primary-donate:before { content:""; position:absolute; inset:-3px; border-radius:inherit; background:linear-gradient(140deg,rgba(255,255,255,.35),rgba(255,255,255,0)); opacity:.25; pointer-events:none; mix-blend-mode:overlay; }
.nav-primary .cta.primary-donate:after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(255,107,45,.6); animation:donatePulse 2.8s ease-in-out infinite; pointer-events:none; }
.nav-primary .cta.primary-donate:hover { filter:brightness(1.05); }
.nav-primary .cta.member-free { background:linear-gradient(135deg,#0ea5e9 0%,#6366f1 45%,#4f46e5 100%); color:#fff; font-weight:700; letter-spacing:.14em; padding:10px 24px; border-radius:34px; position:relative; display:inline-flex; align-items:center; gap:8px; overflow:hidden; }
.nav-primary .cta.member-free:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,0),rgba(255,255,255,.18)); background-size:200% 100%; animation:freeSheen 5.5s linear infinite; mix-blend-mode:overlay; }
.nav-primary .cta.member-free:hover { filter:brightness(1.07); text-decoration:none; }
.nav-primary .cta .cta-icon { font-size:.9rem; line-height:1; }
body.dark-mode .nav-primary .cta.member-free { color:#fff; }
@keyframes donateShift { 0%{background-position:0 50%;} 50%{background-position:100% 50%;} 100%{background-position:0 50%;} }
@keyframes donatePulse { 0%,100%{ box-shadow:0 0 0 0 rgba(255,107,45,.55); } 50%{ box-shadow:0 0 0 10px rgba(255,107,45,0); } }
@keyframes freeSheen { 0%{background-position:0 0;} 100%{background-position:200% 0;} }
@media (prefers-reduced-motion: reduce){ .nav-primary .cta.primary-donate, .nav-primary .cta.member-free { animation:none; } .nav-primary .cta.primary-donate:after { animation:none; } .nav-primary .cta.member-free:before { animation:none; } }
@media (max-width:1100px){ .nav-primary .cta.primary-donate, .nav-primary .cta.member-free { font-size:.68rem; } }

/* Mobile persistent action bar */
.mobile-action-bar { position:fixed; left:0; right:0; bottom:0; background:rgba(5,12,20,.9); backdrop-filter:blur(14px) saturate(180%); display:none; z-index:1050; padding:10px 14px 12px; box-shadow:0 -4px 16px -6px rgba(0,0,0,.55), 0 0 0 1px #142c3e inset; gap:14px; }
.mobile-action-bar .action-btn { flex:1 1 50%; text-align:center; font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.62rem; border-radius:18px; padding:14px 14px 13px; position:relative; overflow:hidden; text-decoration:none; }
.mobile-action-bar .action-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.mobile-action-bar .action-btn.donate { background:linear-gradient(135deg,#ff6b2d,#ff2674,#ff9f1c); background-size:250% 100%; animation:donateShift 8s ease-in-out infinite; color:#fff; box-shadow:0 10px 30px -12px rgba(221,36,118,.55); }
.mobile-action-bar .action-btn.member { background:linear-gradient(135deg,#0ea5e9,#6366f1,#4f46e5); background-size:220% 100%; animation:freeSheen 7s linear infinite; color:#fff; box-shadow:0 10px 30px -12px rgba(14,165,233,.55); }
.mobile-action-bar .action-btn .cta-icon { font-size:1rem; }
@media (prefers-reduced-motion: reduce){ .mobile-action-bar .action-btn.donate, .mobile-action-bar .action-btn.member { animation:none; } }
.mobile-action-bar .action-btn:active { transform:translateY(2px); }
@media (max-width:780px){ body { padding-bottom:78px; } .mobile-action-bar { display:flex; } }
@media (max-width:440px){ .mobile-action-bar .action-btn { font-size:.58rem; padding:13px 10px 12px; } }

/* removed duplicate metrics/cta block */
.nav-primary .cta, .nav-primary .cta.alt { position:relative; overflow:hidden; background:var(--gradient); }
.nav-primary .cta.alt { background:linear-gradient(135deg,var(--accent),var(--accent-alt)); }
.nav-primary .cta.gradient-anim, .btn.gradient-anim { background:linear-gradient(90deg,#ff512f,#dd2476,#1d8cf8,#1d3557); background-size:300% 300%; animation:gradientFlow 6s ease infinite; }
.nav-primary .cta.gradient-anim:hover, .btn.gradient-anim:hover { animation-play-state:paused; filter:brightness(1); }
@keyframes gradientFlow { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }

/* Mission Timeline */
.mission-timeline { position:relative; margin:50px 0; padding-left:12px; }
.mission-timeline:before { content:""; position:absolute; left:28px; top:0; bottom:0; width:4px; background:linear-gradient(to bottom,#e63946,#ffb347,#1d3557); border-radius:2px; }
.timeline-item { position:relative; display:flex; gap:30px; margin:0 0 36px; align-items:flex-start; }
.timeline-item:last-child { margin-bottom:0; }
.timeline-marker { width:20px; height:20px; background:linear-gradient(135deg,#e63946,#ff8d23); border-radius:50%; position:relative; margin-left:17px; box-shadow:0 0 0 4px #fff,0 6px 18px -4px rgba(0,0,0,.2); animation:popIn .9s cubic-bezier(.19,1,.22,1); }
@keyframes popIn { 0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.15); opacity:1;} 100%{transform:scale(1);} }
.timeline-content { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:18px 22px 20px; flex:1; box-shadow:0 10px 40px -14px rgba(0,0,0,.15); position:relative; }
.timeline-content h3 { margin:0 0 6px; font-size:1.05rem; letter-spacing:.04em; }
.timeline-content .timeline-meta { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:#64748b; margin-bottom:6px; }
.timeline-content p { margin:0; font-size:.85rem; line-height:1.55; color:#334155; }
@media (max-width:900px){
  .mission-timeline:before { left:22px; }
  .timeline-item { gap:20px; }
  .timeline-content { padding:16px 18px 18px; }
}
@media (max-width:640px){
  .mission-timeline { padding-left:0; }
  .mission-timeline:before { left:14px; }
  .timeline-marker { margin-left:3px; }
  .timeline-content { border-radius:14px; }
  .impact-gallery { gap:14px; }
  .impact-gallery.cols-3, .impact-gallery.cols-4, .impact-gallery.cols-5, .impact-gallery.cols-6 { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  .faq-item summary { font-size:.9rem; }
  .hero-ctas .btn { flex:1 1 auto; min-width:140px; text-align:center; }
}

/* Impact Gallery */
.impact-gallery { display:grid; gap:18px; margin:40px 0; }
.impact-gallery.cols-2 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.impact-gallery.cols-3 { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.impact-gallery.cols-4 { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.impact-gallery.cols-5 { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.impact-gallery.cols-6 { grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.impact-gallery-item { position:relative; overflow:hidden; border-radius:18px; aspect-ratio:4/3; background:#142533; box-shadow:0 8px 30px -12px rgba(0,0,0,.5); }
.impact-gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.19,1,.22,1), filter .8s; }
.impact-gallery-item:before { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(0,0,0,.0),rgba(0,0,0,.35)); opacity:0; transition:.7s; }
.impact-gallery-item:hover img { transform:scale(1.12); filter:brightness(.9); }
.impact-gallery-item:hover:before { opacity:1; }

/* FAQ */
.faq-list { margin:50px 0; display:grid; gap:16px; }
.faq-item { background:#142533; border:1px solid #1e3244; border-radius:14px; box-shadow:0 6px 26px -10px rgba(0,0,0,.55); padding:0 18px; position:relative; overflow:hidden; }
.faq-item[open] { background:linear-gradient(135deg,#1b3042,#142433); }
.faq-item summary { cursor:pointer; display:flex; align-items:center; list-style:none; gap:14px; padding:16px 0; font-weight:600; font-size:.95rem; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item .faq-q { flex:1; }
.faq-icon { font-size:1.2rem; line-height:1; color:var(--primary); transition:transform .4s; font-weight:700; }
.faq-item[open] .faq-icon { transform:rotate(45deg); }
.faq-a { padding:0 0 18px 0; font-size:.85rem; line-height:1.6; color:#334155; animation:faqIn .55s ease; }
@keyframes faqIn { 0%{opacity:0; transform:translateY(-6px);} 100%{opacity:1; transform:none;} }

/* Utility to apply animated gradient to existing hero buttons */
.hero-ctas .btn.gradient-anim { background:linear-gradient(90deg,#ff512f,#dd2476,#1d8cf8,#1d3557); background-size:300% 300%; animation:gradientFlow 6s ease infinite; }
/* Dark mode support */
@media (prefers-color-scheme: dark){ body:not(.light-mode){ background:#0d1117; color:#e2e8f0; } body:not(.light-mode) header.site-header{ background:#0d1117e6; } body:not(.light-mode) .membership-form, body:not(.light-mode) .donation-box, body:not(.light-mode) .panel { background:#161b22cc; border-color:#1f242c; } body:not(.light-mode) .feature-card { background:#161b22ee; border-color:#1f242c; } body:not(.light-mode) .impact-item{ background:linear-gradient(160deg,#1e2530,#151b23); border-color:#252f3a; } body:not(.light-mode) .impact-item strong{ color:#ff8d23; } body:not(.light-mode) .faq-item{ background:#161b22; border-color:#1f242c; } body:not(.light-mode) .faq-item[open]{ background:linear-gradient(135deg,#161b22,#1e2530); } body:not(.light-mode) .metrics-bar{ background:#010409; } }
body.dark-mode { background:#050c14; color:#d9e2ec; }
body.dark-mode header.site-header{ background:#071320e6; }
body.dark-mode .membership-form, body.dark-mode .donation-box, body.dark-mode .panel { background:#161b22cc; border-color:#1f242c; }
body.dark-mode .feature-card { background:#161b22ee; border-color:#1f242c; }
body.dark-mode .impact-item{ background:linear-gradient(160deg,#1e2530,#151b23); border-color:#252f3a; }
body.dark-mode .impact-item strong{ color:var(--accent); }
body.dark-mode .faq-item{ background:#161b22; border-color:#1f242c; }
body.dark-mode .faq-item[open]{ background:linear-gradient(135deg,#161b22,#1e2530); }
body.dark-mode .metrics-bar{ background:#010409; }
body.dark-mode .nav-primary a:not(.cta){ color:#e2e8f0; }
body.dark-mode .nav-primary a:not(.cta):hover{ color:#fff; }
/* Scroll reveal (lightweight) */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1); }
.revealed[data-reveal]{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }
/* Member count pulse */
.member-count.count-pulse { animation:countPulse 1.2s ease; display:inline-block; }
@keyframes countPulse { 0%{transform:scale(1); filter:brightness(1);} 35%{transform:scale(1.18); filter:brightness(1.35);} 70%{transform:scale(1); filter:brightness(1);} 100%{transform:none;} }
@media (prefers-reduced-motion: reduce){ .member-count.count-pulse { animation:none; } }
/* Quick Modal */
.quick-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1200; padding:28px 20px; }
.quick-modal.active{ display:flex; }
.quick-modal .quick-modal-backdrop{ position:absolute; inset:0; background:rgba(10,20,30,.62); backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); animation:backdropFade .4s ease; z-index:1; }
@keyframes backdropFade{ from{opacity:0;} to{opacity:1;} }
.quick-modal .quick-modal-dialog{ position:relative; background:linear-gradient(155deg,#142533cc,#0f1e2ccc); width:100%; max-width:600px; border-radius:28px; padding:0; box-shadow:0 30px 70px -18px rgba(0,0,0,.65),0 0 0 1px #1f3446; animation:modalPop .55s cubic-bezier(.19,1,.22,1); overflow:hidden; max-height:90vh; display:flex; flex-direction:column; backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); z-index:2; }
body.dark-mode .quick-modal .quick-modal-dialog{ background:linear-gradient(155deg,#0f1e2ccc,#0a1724cc); box-shadow:0 30px 70px -18px rgba(0,0,0,.8),0 0 0 1px #1d3242; }
@keyframes modalPop{ 0%{transform:translateY(34px) scale(.96); opacity:0;} 55%{transform:translateY(-4px) scale(1.01);} 100%{transform:translateY(0) scale(1); opacity:1;} }
.quick-modal .modal-close{ position:absolute; top:14px; right:14px; background:#132737; border:1px solid #1e3244; width:42px; height:42px; border-radius:14px; font-size:24px; line-height:1; cursor:pointer; color:#9fb4c5; display:flex; align-items:center; justify-content:center; transition:.35s; z-index:3; pointer-events:auto; }
.quick-modal .modal-close:hover{ background:#173143; color:#fff; }
body.dark-mode .quick-modal .modal-close{ background:#132535; border-color:#203546; color:#95adc0; }
body.dark-mode .quick-modal .modal-close:hover{ background:#173142; color:#fff; }
.quick-modal .modal-title{ margin:0; font-size:1.55rem; letter-spacing:.02em; line-height:1.25; background:linear-gradient(90deg,#0ea5e9,#6366f1,#ff8d23); -webkit-background-clip:text; background-clip:text; color:transparent; }
.quick-modal .modal-sub{ margin:8px 0 0; font-size:.78rem; line-height:1.5; color:#9fb4c5; }
.quick-modal .modal-meta{ margin:10px 0 0; font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:#628196; font-weight:600; }
.quick-modal .modal-icon{ width:56px; height:56px; border-radius:18px; background:linear-gradient(135deg,#0ea5e9,#6366f1); display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; margin-right:18px; box-shadow:0 6px 18px -6px rgba(99,102,241,.55); flex-shrink:0; }
.quick-modal .modal-icon.heart{ background:linear-gradient(135deg,#ff6b2d,#ff2674); box-shadow:0 6px 18px -6px rgba(255,96,64,.55); }
.quick-modal .modal-header{ display:flex; padding:42px 48px 8px; position:relative; }
.quick-modal .modal-body{ padding:8px 48px 44px; overflow-y:auto; }
/* Drag handle (mobile sheet visual cue) */
.quick-modal .modal-handle{ position:absolute; top:12px; left:50%; transform:translateX(-50%); width:54px; height:6px; background:linear-gradient(90deg,#26465b,#2c566c); border-radius:4px; display:none; }
@media (max-width:700px){ .quick-modal .modal-handle{ display:block; } }
@media (max-width:700px){
  .quick-modal{ align-items:flex-end; padding:0; }
  .quick-modal .quick-modal-dialog{ width:100%; max-width:none; border-radius:30px 30px 0 0; max-height:85vh; animation:sheetSlide .55s cubic-bezier(.19,1,.22,1); }
  @keyframes sheetSlide{ 0%{transform:translateY(60px); opacity:0;} 55%{transform:translateY(-6px);} 100%{transform:translateY(0); opacity:1;} }
  .quick-modal .modal-header{ padding:28px 26px 4px; }
  .quick-modal .modal-body{ padding:6px 26px 34px; }
  .quick-modal .modal-icon{ width:50px; height:50px; border-radius:16px; font-size:22px; margin-right:16px; }
  .quick-modal .modal-close{ top:10px; right:10px; width:46px; height:46px; border-radius:16px; }
}
/* size modifiers */
.quick-modal .modal-sm{ max-width:420px; }
.quick-modal .modal-md{ max-width:600px; }
.quick-modal .modal-lg{ max-width:760px; }
@media (max-width:900px){ .quick-modal .modal-lg{ max-width:640px; } }
@media (max-width:780px){ .quick-modal .modal-lg{ max-width:100%; } }
/* Panel card legacy mapping */
.quick-modal .panel-card { background:transparent; border:0; box-shadow:none; padding:0; border-radius:0; }
body.dark-mode .quick-modal .panel-card { background:transparent; }
.modal-form label { font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:#9fb4c5; margin:16px 0 6px; display:block; }
.modal-form label:first-of-type { margin-top:0; }
.modal-form input, .modal-form textarea, .modal-form select { width:100%; background:#132737; border:1px solid #1e3244; border-radius:14px; padding:14px 16px; font:inherit; color:#e2f3ff; box-sizing:border-box; transition:border-color .25s, background .35s, box-shadow .35s; }
.modal-form input:focus, .modal-form textarea:focus, .modal-form select:focus { outline:0; border-color:#0ea5e9; background:#0f1e2c; box-shadow:0 0 0 3px rgba(14,165,233,.18); }
.modal-form textarea { resize:vertical; min-height:90px; }
.modal-form button.btn { width:100%; margin-top:24px; }
@media (max-width:640px){ .quick-modal .panel-card { padding:38px 34px 46px; border-radius:22px; } }
/* Donation modal compact layout */
.quick-modal .membership-form h2, .quick-modal .membership-form h3 { color:#e2f3ff; }
.quick-modal form.membership-form label { margin-top:14px; }
.quick-modal form.membership-form input, .quick-modal form.membership-form textarea { font-size:.8rem; }
.quick-modal form.membership-form { font-size:.85rem; }
.quick-modal form.membership-form input, .quick-modal form.membership-form textarea { background:#132737; border:1px solid #1e3244; }
.quick-modal form.membership-form input:focus, .quick-modal form.membership-form textarea:focus { background:#0f1e2c; }
.quick-modal .donation-progress-wrapper { margin-top:24px; }
.quick-modal form.membership-form label { font-size:.55rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:#86a8bb; }
/* Scrollbars inside modal body (only show when needed) */
.quick-modal .modal-body::-webkit-scrollbar{ width:10px; }
.quick-modal .modal-body::-webkit-scrollbar-track{ background:transparent; }
.quick-modal .modal-body::-webkit-scrollbar-thumb{ background:#173143; border-radius:40px; border:2px solid transparent; background-clip:padding-box; }
body.dark-mode .quick-modal .modal-body::-webkit-scrollbar-thumb{ background:#1d3a4d; border-color:transparent; }
/* Grid for donation form first row */
/* removed empty guard selectors */
form.membership-form label[for="donor_name"],
form.membership-form label[for="donor_email"],
form.membership-form label[for="donor_phone"],
form.membership-form label[for="donation_amount"],
form.membership-form label[for="donation_reference"],
form.membership-form label[for="donation_message"] { display:block; }
.donation-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.donation-form-grid .field { display:flex; flex-direction:column; }
.donation-form-grid .field input { width:100%; }
@media (max-width:640px){ .donation-form-grid { grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; } }
body.dark-mode .panel h2, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4 { color:#f1f5f9; }
.theme-toggle { background:#f1f5f9; border:1px solid #d0d7de; border-radius:50%; width:38px; height:38px; font-size:18px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.4s; }
body.dark-mode .theme-toggle { background:#1f242c; color:#ffb347; border-color:#30363d; }
body.dark-mode a { color:#ff8d23; }
body.dark-mode .benefits li { background:#1e2530; }

/* Inline field error styling */
.membership-form.enhanced input.error, .membership-form.enhanced textarea.error, .membership-form.enhanced select.error { border-color:#dc2626; background:#fff5f5; }
.membership-form.enhanced .field.error label { color:#dc2626; }
.membership-form.enhanced .field-msg { font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; margin-top:4px; color:#dc2626; }
/* Inline validation modern */
.validate-form .field{ margin:14px 0 4px; }
.validate-form .field:first-child{ margin-top:0; }
.validate-form .input-wrap{ position:relative; display:flex; align-items:center; }
.validate-form .input-wrap input{ flex:1; }
.validate-form .status-icon{ position:absolute; right:12px; width:18px; height:18px; pointer-events:none; opacity:0; transform:scale(.8); transition:.3s; display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.validate-form .field.valid .status-icon{ opacity:1; transform:scale(1); color:#16a34a; }
.validate-form .field.error .status-icon{ opacity:1; transform:scale(1); color:#dc2626; }
.validate-form .field.error input, .validate-form .field.error textarea, .validate-form .field.error select{ border-color:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.15); }
.validate-form .field.valid input, .validate-form .field.valid textarea, .validate-form .field.valid select{ border-color:#16a34a; }
.validate-form .field-msg{ font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; margin-top:6px; min-height:14px; color:#dc2626; }
.validate-form .field.valid .field-msg{ color:#16a34a; }
.validate-form input:focus + .status-icon, .validate-form textarea:focus + .status-icon, .validate-form select:focus + .status-icon{ opacity:.25; }
.form-live-region{ font-size:.75rem; margin-bottom:10px; }
.form-live-region .success{ background:#0d3b26; color:#bffbd9; padding:10px 14px; border-radius:10px; }
.form-live-region .error{ background:#3f1d1d; color:#fcb7b7; padding:10px 14px; border-radius:10px; }
@media (prefers-reduced-motion: reduce){ .validate-form .status-icon{ transition:none; } }

/* Modern unified input styling (donation & membership) */
.membership-form input, .membership-form textarea, .membership-form select,
.donation-form input, .donation-form textarea, .donation-form select {
  background:#132737; color:#e2f3ff; border:1px solid #1e3244; border-radius:14px; padding:14px 16px; font:inherit; box-sizing:border-box; transition:border-color .25s, background .35s, box-shadow .35s; -webkit-appearance:none; appearance:none;
}
.membership-form input:focus, .membership-form textarea:focus, .membership-form select:focus,
.donation-form input:focus, .donation-form textarea:focus, .donation-form select:focus { outline:0; border-color:#0ea5e9; background:#0f1e2c; box-shadow:0 0 0 3px rgba(14,165,233,.18); }
/* Ensure number input text color isn't overridden to black in some browsers */
input[type=number] { color:#e2f3ff; background:#132737; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
/* Placeholder styling */
::placeholder { color:#5d7484; opacity:1; }
/* Small label styling tweak for donation modal */
.membership-form label, .donation-form label { font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:#9fb4c5; }

/* Hero refinements */
.hero-slider { height:68vh; min-height:560px; background:radial-gradient(circle at 40% 30%,rgba(14,165,233,.15),rgba(99,102,241,.08) 40%,transparent 70%); }
/* Hide empty slider dots bar (prevent thin line) */
.slider-dots:empty{ display:none; }
.slider-dots{ display:flex; gap:10px; position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:5; }
.slider-dots .dot{ width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.35); border:1px solid rgba(255,255,255,.6); cursor:pointer; transition:.4s; box-shadow:0 0 0 2px rgba(0,0,0,.25); }
.slider-dots .dot.active{ background:linear-gradient(135deg,#0ea5e9,#6366f1); border-color:#fff; box-shadow:0 0 0 2px rgba(99,102,241,.4),0 4px 10px -2px rgba(0,0,0,.5); }
@media (max-width:700px){ .slider-dots{ bottom:12px; } .slider-dots .dot{ width:10px; height:10px; } }
@media (max-width:900px){ .hero-slider { height:60vh; min-height:520px; } }
.hero-slide img { object-position:center center; }
.hero-slider.parallax-enabled .hero-slide.active picture.hero-media, .hero-slider.parallax-enabled .hero-slide.active img { will-change:transform; }
.hero-slider.header-offset { margin-top:0; }
body.admin-bar .hero-slider.header-offset { margin-top:0; }
/* Hero text removed per request (no overlay text) */
.hero-slide-content { display:none !important; }
/* Skip link */
.skip-link{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ position:fixed; left:12px; top:12px; width:auto; height:auto; padding:10px 14px; background:#0ea5e9; color:#fff; border-radius:8px; z-index:3000; }
/* Milestone banner */
.milestone-banner{ background:linear-gradient(90deg,#0ea5e9,#6366f1,#ff8d23); color:#fff; padding:6px 0; text-align:center; font-size:.85rem; position:relative; }
.milestone-inner{ display:inline-flex; align-items:center; gap:8px; }
.milestone-emoji{ font-size:1.1rem; }
.milestone-close{ background:rgba(255,255,255,.18); border:0; color:#fff; width:28px; height:28px; border-radius:8px; cursor:pointer; }
/* Social proof band */
.social-proof-band{ background:#0f1e2c; overflow:hidden; position:relative; font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:#9fb4c5; }
.social-proof-band .proof-track{ display:flex; gap:40px; padding:8px 0 8px 100%; animation:proofScroll 30s linear infinite; }
@keyframes proofScroll{ 0%{transform:translateX(0);} 100%{transform:translateX(-100%);} }
.proof-item{ white-space:nowrap; }
/* Toast stack */
.toast-stack{ position:fixed; top:16px; right:16px; display:flex; flex-direction:column; gap:10px; z-index:2600; width:clamp(240px,30vw,360px); }
.toast{ background:#142533; border:1px solid #1e3244; color:#e2f3ff; padding:14px 16px 14px 44px; border-radius:16px; font-size:.8rem; line-height:1.4; position:relative; animation:toastIn .5s cubic-bezier(.19,1,.22,1); box-shadow:0 12px 30px -12px rgba(0,0,0,.6); }
.toast:before{ content:'✓'; position:absolute; left:14px; top:50%; transform:translateY(-50%); background:#0d3b26; color:#bffbd9; width:22px; height:22px; border-radius:8px; font-size:.65rem; display:flex; align-items:center; justify-content:center; font-weight:700; }
.toast.error{ background:#3f1d1d; border-color:#5b2b2b; }
.toast.error:before{ content:'!'; background:#5b2b2b; color:#fcb7b7; }
@keyframes toastIn{ 0%{transform:translateY(-20px) scale(.95); opacity:0;} 60%{transform:translateY(4px) scale(1.01);} 100%{transform:translateY(0) scale(1); opacity:1;} }
.toast button.toast-close{ position:absolute; top:6px; right:8px; background:transparent; border:0; color:#8fa5b5; cursor:pointer; font-size:16px; }
/* Trust badges */
.trust-badges{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin:38px auto 10px; }
.trust-badges .badge{ background:#142533; border:1px solid #1e3244; color:#9fb4c5; padding:10px 14px; border-radius:14px; display:flex; align-items:center; gap:8px; font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600; }
.trust-badges .badge .icon{ font-size:1rem; }
/* Transparency mini */
.transparency-mini{ font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; text-align:center; margin:24px auto 0; color:#628196; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.transparency-mini .label{ color:#9fb4c5; }
.transparency-mini .how-calc{ background:transparent; border:1px solid #1e3244; color:#9fb4c5; padding:4px 10px; border-radius:8px; cursor:pointer; font-size:.6rem; letter-spacing:.15em; }
/* Impact calculation tooltip */
.calc-tooltip{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:2500; }
.calc-tooltip.active{ display:flex; }
.calc-tooltip .tip-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); }
.calc-tooltip .tip-card{ position:relative; background:#142533; border:1px solid #1e3244; padding:34px 36px; max-width:520px; width:100%; border-radius:22px; color:#9fb4c5; font-size:.8rem; line-height:1.55; box-shadow:0 22px 50px -18px rgba(0,0,0,.7); }
.calc-tooltip .tip-card h3{ margin:0 0 12px; font-size:1.05rem; color:#e2f3ff; }
.calc-tooltip .tip-close{ position:absolute; top:10px; right:12px; background:transparent; border:0; font-size:22px; color:#9fb4c5; cursor:pointer; }
/* Bank accordion */
details.bank-accordion{ background:#142533; border:1px solid #1e3244; border-radius:14px; padding:10px 16px; font-size:.8rem; }
details.bank-accordion summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; font-weight:600; }
details.bank-accordion summary::-webkit-details-marker{ display:none; }
details.bank-accordion[open]{ background:#162c3d; }
details.bank-accordion .acc-body{ margin-top:10px; }
/* Donation amount presets */
.amount-presets{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 18px; }
.amount-presets .preset{ background:#142533; border:1px solid #1e3244; color:#9fb4c5; padding:8px 14px; border-radius:14px; cursor:pointer; font-size:.75rem; transition:.35s; }
.amount-presets .preset.active, .amount-presets .preset:hover{ background:linear-gradient(135deg,#0ea5e9,#6366f1); color:#fff; border-color:#0ea5e9; }
.amount-presets .monthly-toggle{ display:flex; align-items:center; gap:6px; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; margin-left:auto; }
.amount-presets .monthly-toggle input{ accent-color:#6366f1; }
/* Testimonial carousel */
.testimonials-carousel .carousel{ position:relative; overflow:hidden; }
.testimonials-carousel .carousel-track{ display:flex; transition:transform .7s cubic-bezier(.19,1,.22,1); }
.testimonials-carousel .t-slide{ flex:0 0 100%; padding:10px 4px; box-sizing:border-box; }
.testimonials-carousel blockquote{ margin:0 0 10px; font-size:.9rem; line-height:1.55; color:#334155; position:relative; }
body.dark-mode .testimonials-carousel blockquote{ color:#9fb4c5; }
.testimonials-carousel .carousel-controls{ display:flex; gap:10px; justify-content:center; margin-top:14px; }
.testimonials-carousel .carousel-controls button{ background:#142533; border:1px solid #1e3244; color:#9fb4c5; width:38px; height:38px; border-radius:12px; cursor:pointer; }
.testimonials-carousel .carousel-controls button:hover{ background:#173143; color:#fff; }
.carousel-dots{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
.carousel-dots button{ width:10px; height:10px; border-radius:50%; background:#d0d8dd; border:0; cursor:pointer; opacity:.5; }
.carousel-dots button.active{ opacity:1; background:#6366f1; }
/* Tooltip hidden utility */
.visually-hidden{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
/* Copy ID pill placeholder (toast covers primary need) */
.copy-id-pill{ display:inline-flex; align-items:center; gap:8px; background:#142533; border:1px solid #1e3244; padding:8px 12px; border-radius:14px; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
/* Adjust dark mode contrast improvements */
body.dark-mode .trust-badges .badge{ background:#0f1e2c; }
/* Bank accordion dark */
body.dark-mode details.bank-accordion{ background:#0f1e2c; border-color:#1d3242; }
body.dark-mode details.bank-accordion[open]{ background:#132535; }
/* Mission highlight */
.mission-highlight .mission-quote { text-align:center; max-width:900px; margin:0 auto 34px; }
.mission-highlight .mission-quote .lead-line { font-size:1.4rem; font-weight:600; letter-spacing:.02em; margin:0 0 12px; background:linear-gradient(90deg,#ff8d23,#ff6b2d,#ff2674,#6366f1); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:impactText 9s linear infinite; }
.mission-highlight .mission-quote .sub-line { font-size:.95rem; color:#9fb4c5; margin:0; }
.mission-highlight .mission-quote .accent { color:#ff8d23; font-weight:600; }
.mission-highlight .mission-stats-inline { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.mission-highlight .mini-stat { background:#142533; border:1px solid #1e3244; padding:16px 20px; border-radius:18px; text-align:center; min-width:140px; position:relative; overflow:hidden; }
.mission-highlight .mini-stat:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.08),rgba(255,255,255,0) 70%); opacity:.4; mix-blend-mode:overlay; }
.mission-highlight .mini-stat strong { font-size:1.35rem; display:block; background:linear-gradient(90deg,#0ea5e9,#6366f1,#ff8d23); -webkit-background-clip:text; background-clip:text; color:transparent; animation:impactText 7s ease-in-out infinite; margin:0 0 4px; }
.mission-highlight .mini-stat span { font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:#9fb4c5; }
@media (max-width:700px){ .mission-highlight .mission-quote .lead-line{ font-size:1.15rem; } }
/* Steps (How it works) */
.steps-grid { display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.step-card { background:#142533; border:1px solid #1e3244; border-radius:18px; padding:22px 22px 26px; position:relative; overflow:hidden; box-shadow:0 12px 32px -18px rgba(0,0,0,.6); transition:transform .7s cubic-bezier(.19,1,.22,1), box-shadow .7s, background .9s; }
.step-card:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(14,165,233,.08),rgba(99,102,241,.05)); opacity:.9; pointer-events:none; }
.step-card .icon { font-size:2rem; line-height:1; margin:0 0 12px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.step-card h3 { margin:0 0 8px; font-size:1rem; color:#e2f3ff; letter-spacing:.05em; }
.step-card p { margin:0; font-size:.78rem; line-height:1.55; color:#9fb4c5; }
.step-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px -18px rgba(0,0,0,.75); }
/* Support grid */
.support-grid { display:grid; gap:34px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.support-card { background:#142533; border:1px solid #1e3244; border-radius:20px; padding:26px 26px 30px; position:relative; overflow:hidden; box-shadow:0 10px 38px -18px rgba(0,0,0,.6); transition:transform .65s cubic-bezier(.19,1,.22,1), box-shadow .65s; }
.support-card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.09),transparent 70%); opacity:.35; mix-blend-mode:overlay; }
.support-card h3 { margin:0 0 12px; font-size:1.05rem; letter-spacing:.05em; background:linear-gradient(90deg,#0ea5e9,#6366f1); -webkit-background-clip:text; background-clip:text; color:transparent; }
.support-card p { margin:0 0 14px; font-size:.78rem; line-height:1.6; color:#9fb4c5; }
.support-card.donate { border-color:#ff6b2d40; }
.support-card.member { border-color:#0ea5e940; }
.support-card.share { border-color:#6366f140; }
.support-card.volunteer { border-color:#ff8d2340; }
.support-card:hover { transform:translateY(-8px); box-shadow:0 22px 50px -22px rgba(0,0,0,.85); }
/* Story spotlight */
.story-panel { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:50px; align-items:center; }
.story-panel .story-media { position:relative; min-height:340px; border-radius:28px; background:linear-gradient(120deg,#142533,#0e1f2d); overflow:hidden; }
.story-panel .story-media:before { content:""; position:absolute; inset:0; background:url('images/slider/WhatsApp Image 2025-08-15 at 9.42.24 PM.jpeg') center/cover; filter:brightness(.85); opacity:.9; }
.story-panel .story-media:after { content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(0,0,0,.4),rgba(0,0,0,.2)); }
.story-content .story-title { margin:0 0 14px; font-size:1.3rem; letter-spacing:.04em; }
.story-content .story-text { margin:0 0 14px; font-size:.9rem; line-height:1.55; color:#bcd3e1; }
.story-content .story-text .small-note { font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; opacity:.7; }
.story-facts { list-style:none; padding:0; margin:0 0 20px; display:grid; gap:10px; font-size:.75rem; }
.story-facts li { background:#142533; border:1px solid #1e3244; padding:10px 14px; border-radius:12px; position:relative; color:#9fb4c5; }
.story-facts li:before { content:"✔"; position:absolute; left:10px; top:10px; font-size:.6rem; color:#0ea5e9; }
.story-facts li { padding-left:28px; }
@media (max-width:800px){ .story-panel { gap:34px; } }
/* Story examples grid */
.story-examples { margin:80px 0 0; }
.story-examples .examples-title { margin:0 0 28px; font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; color:#6fa7c7; text-align:center; }
.examples-grid { display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.example-card { background:#142533; border:1px solid #1e3244; border-radius:22px; overflow:hidden; position:relative; display:flex; flex-direction:column; box-shadow:0 12px 36px -18px rgba(0,0,0,.65); transition:transform .7s cubic-bezier(.19,1,.22,1), box-shadow .7s; }
.example-card:hover { transform:translateY(-6px); box-shadow:0 18px 46px -20px rgba(0,0,0,.75); }
.example-card .ex-media { height:140px; background:#0e1f2d; position:relative; }
.example-card .ex-media:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(14,165,233,.2),rgba(99,102,241,.05)); mix-blend-mode:overlay; }
.example-card .ex-body { padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; }
.example-card h5 { margin:0; font-size:.95rem; letter-spacing:.04em; color:#e2f3ff; }
.example-card .ex-line { margin:0; font-size:.73rem; line-height:1.55; color:#9fb4c5; }
.example-card .ex-points { list-style:none; padding:0; margin:0; display:grid; gap:6px; font-size:.68rem; color:#86a8bb; }
.example-card .ex-points li { position:relative; padding-left:14px; }
.example-card .ex-points li:before { content:"•"; position:absolute; left:0; top:0; color:#0ea5e9; }
.examples-cta { text-align:center; margin:46px 0 0; }
.examples-cta .btn.small.alt { background:linear-gradient(135deg,#0ea5e9,#6366f1); }
/* Placeholder background images (can be replaced with real) */
.example-card .ex-media.ex1 { background:url('images/slider/WhatsApp Image 2025-08-15 at 9.42.23 PM (1).jpeg') center/cover; }
.example-card .ex-media.ex2 { background:url('images/slider/WhatsApp Image 2025-08-15 at 9.42.23 PM (2).jpeg') center/cover; }
.example-card .ex-media.ex3 { background:url('images/slider/WhatsApp Image 2025-08-15 at 9.42.23 PM (3).jpeg') center/cover; }
@media (max-width:640px){ .story-examples { margin-top:60px; } .example-card .ex-media { height:120px; } }
/* Centered hero action pills */
.hero-centered-actions { position:absolute; left:50%; top:50%; transform:translate(-50%,-10%); display:flex; gap:24px; flex-wrap:wrap; justify-content:center; width:100%; max-width:960px; padding:10px 20px; pointer-events:none; z-index:30; }
.hero-centered-actions .hero-pill { pointer-events:auto; position:relative; display:inline-flex; align-items:center; justify-content:center; padding:18px 42px 16px; font-size:1rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; border-radius:46px; text-decoration:none; overflow:hidden; backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%); color:#fff; box-shadow:0 12px 32px -16px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12) inset; isolation:isolate; }
.hero-centered-actions .hero-pill:before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%); mix-blend-mode:overlay; opacity:.55; transition:.6s; }
.hero-centered-actions .hero-pill:after { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.25),rgba(255,255,255,0) 60%); opacity:.25; mix-blend-mode:overlay; }
.hero-centered-actions .hero-pill span { position:relative; z-index:2; background:linear-gradient(90deg,#fff,#dbeafe,#fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-centered-actions .hero-pill.donate { background:linear-gradient(135deg,rgba(255,107,45,.68),rgba(255,38,116,.68),rgba(255,159,28,.68)); background-size:220% 100%; animation:heroDonate 12s ease-in-out infinite; }
.hero-centered-actions .hero-pill.member { background:linear-gradient(135deg,rgba(14,165,233,.68),rgba(99,102,241,.68),rgba(79,70,229,.68)); background-size:220% 100%; animation:heroMember 14s ease-in-out infinite; }
.hero-centered-actions .hero-pill:hover { box-shadow:0 25px 60px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.3) inset; }
.hero-centered-actions .hero-pill:hover:before { opacity:.9; }
@keyframes heroDonate { 0%{background-position:0 50%;} 50%{background-position:100% 50%;} 100%{background-position:0 50%;} }
@keyframes heroMember { 0%{background-position:100% 50%;} 50%{background-position:0 50%;} 100%{background-position:100% 50%;} }
@media (max-width:1000px){ .hero-centered-actions { transform:translate(-50%,-5%); gap:18px; } .hero-centered-actions .hero-pill { padding:18px 34px 16px; font-size:.9rem; } }
@media (max-width:720px){ .hero-centered-actions { top:58%; padding:0 10px; gap:16px; } .hero-centered-actions .hero-pill { flex:1 1 calc(50% - 12px); text-align:center; padding:16px 20px 14px; font-size:.8rem; letter-spacing:.12em; } }
@media (max-width:540px){ .hero-centered-actions { top:60%; gap:14px; } .hero-centered-actions .hero-pill { padding:16px 20px 14px; font-size:.75rem; letter-spacing:.12em; } }
@media (prefers-reduced-motion: reduce){ .hero-centered-actions .hero-pill.donate, .hero-centered-actions .hero-pill.member { animation:none; } }
/* Enhanced membership layout */
.membership-layout { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:60px; align-items:start; margin-top:20px; }
@media (max-width:1100px){ .membership-layout { grid-template-columns:1fr; } }
.membership-form.enhanced { padding:40px 42px 46px; position:relative; overflow:hidden; }
.membership-form.enhanced:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(230,57,70,.07),rgba(255,141,35,.07)); pointer-events:none; }
.membership-form.enhanced .form-title { margin:0 0 4px; font-size:1.6rem; letter-spacing:.5px; }
.membership-form.enhanced .form-sub { margin:0 0 26px; font-size:.9rem; color:#475569; max-width:640px; }
.membership-form.enhanced .field-row { display:flex; gap:26px; }
.membership-form.enhanced .field-row.two-cols > .field { flex:1; }
.membership-form.enhanced .field { display:flex; flex-direction:column; margin-bottom:20px; }
.membership-form.enhanced label { font-size:.65rem; letter-spacing:.15em; font-weight:700; text-transform:uppercase; margin-bottom:6px; }
.membership-form.enhanced input, .membership-form.enhanced textarea, .membership-form.enhanced select { background:#132737; border:1px solid #1e3244; border-radius:12px; padding:14px 16px; font:inherit; transition:border-color .25s, background .4s, box-shadow .4s; color:#e2f3ff; }
.membership-form.enhanced input:focus, .membership-form.enhanced textarea:focus, .membership-form.enhanced select:focus { outline:0; border-color:#0ea5e9; background:#0f1e2c; box-shadow:0 0 0 3px rgba(14,165,233,.15); }
.membership-form.enhanced textarea { resize:vertical; }
.membership-form.enhanced .req { color:var(--primary); margin-left:3px; }
.membership-form.enhanced .form-footer { margin-top:14px; display:flex; flex-direction:column; gap:14px; }
.membership-form.enhanced .privacy-hint { font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; opacity:.65; margin:0; }
@media (max-width:640px){ .membership-form.enhanced { padding:30px 26px 34px; } .membership-form.enhanced .field-row { flex-direction:column; gap:0; } }
.membership-column.side-column { display:flex; flex-direction:column; gap:34px; }
.panel { background:rgba(255,255,255,.92); backdrop-filter:blur(12px); padding:26px 30px 30px; border:1px solid #eef0f4; border-radius:20px; box-shadow:0 10px 40px -16px rgba(0,0,0,.12); position:relative; overflow:hidden; }
.panel h2 { margin:0 0 14px; font-size:1rem; letter-spacing:.1em; text-transform:uppercase; }
.panel .small { font-size:.7rem; letter-spacing:.1em; margin-top:-4px; color:#475569; }
.benefits { list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:.83rem; }
.benefits li { background:#f1f5f9; padding:10px 12px; border-radius:10px; line-height:1.45; }
.mini-impact .impact-grid.highlights { margin:20px 0 0; }

/* Header refinement for wide screens */
header.site-header .site-header-inner { max-width:1400px; margin:0 auto; padding:0 40px; }
header.site-header .nav-primary ul.menu { display:flex; gap:38px; align-items:center; }
header.site-header .nav-primary ul.menu > li > a { font-size:.78rem; }
@media (min-width:1200px){ .site-title { font-size:1.55rem; } }

/* Metrics bar distribution */
.metrics-bar { justify-content:space-around; }

/* ========== Layout Enhancements ========== */
.section { padding:70px 0; }
.section.alt { background:#0b1621; }
.section-title { text-align:center; margin:0 0 40px; font-size:1.9rem; letter-spacing:.04em; background:linear-gradient(90deg,#0ea5e9,#6366f1); -webkit-background-clip:text; background-clip:text; color:transparent; }
.container { width:100%; max-width:1250px; margin:0 auto; padding:0 38px; box-sizing:border-box; }
.section-features .features-grid { display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.features-grid .feature-card { background:#142533; padding:20px 20px 24px; border:1px solid #1e3244; border-radius:16px; box-shadow:0 10px 30px -12px rgba(0,0,0,.55); position:relative; overflow:hidden; }
.features-grid .feature-card h3 { margin:0 0 10px; font-size:1.05rem; color:#e6f6ff; }
.features-grid .feature-card p { margin:0; font-size:.8rem; line-height:1.5; color:#96b1c2; }
.two-col-responsive { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:50px; align-items:start; }
.panel-card { background:#142533; border:1px solid #1e3244; border-radius:20px; padding:34px 36px 38px; position:relative; box-shadow:0 15px 40px -18px rgba(0,0,0,.6); }
.panel-card.emphasis { background:linear-gradient(145deg,#142533,#0e1f2d 55%); }
.panel-card .lead { margin:0 0 20px; font-size:.9rem; line-height:1.55; color:#9fb4c5; }
.panel-card .btn.small { margin-top:10px; }
.panel-card .btn.small.alt { background:linear-gradient(135deg,#6366f1,#0ea5e9); }
.check-list { list-style:none; padding:0 0 4px; margin:0 0 14px; display:grid; gap:10px; font-size:.8rem; }
.check-list li { position:relative; padding-left:20px; color:#b4cad7; }
.check-list li:before { content:"✔"; position:absolute; left:0; top:0; font-size:.7rem; color:#0ea5e9; }
.bank-lines { display:grid; gap:6px; font-size:.7rem; letter-spacing:.05em; background:#132737; padding:16px 18px; border:1px solid #1e3244; border-radius:12px; margin:0 0 16px; }
.bank-lines div { color:#b9cedb; }
.panel-card .hint { font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; opacity:.7; margin:6px 0 12px; }
@media (max-width:800px){ .section { padding:54px 0; } .section-title { font-size:1.55rem; margin-bottom:30px; } .panel-card { padding:28px 26px 32px; } .container { padding:0 22px; } }
@media (max-width:500px){ .features-grid { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); } }

/* Testimonials spacing & alignment */
.testimonials { display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.testimonial-card { background:#142533; border:1px solid #1e3244; border-radius:18px; padding:26px 24px 30px; display:flex; gap:16px; box-shadow:0 10px 30px -16px rgba(0,0,0,.55); }
.testimonial-card .quote { font-size:.78rem; line-height:1.55; color:#bcd3e1; margin:0 0 10px; }
.testimonial-card .name { margin:0; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#7ca7c0; }

/* Impact grid refinement */
.impact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:22px; margin:10px 0 40px; }
.impact-item { background:linear-gradient(135deg,#142533,#10263a); border:1px solid #1e3244; padding:18px 14px 20px; text-align:center; border-radius:18px; box-shadow:0 8px 28px -14px rgba(0,0,0,.55); position:relative; overflow:hidden; isolation:isolate; }
.impact-item::before { content:""; position:absolute; inset:0; background:conic-gradient(from 0deg, #0ea5e980, #6366f180, #ff8d2380, #0ea5e980); animation:impactRotate 6s linear infinite; z-index:0; opacity:.15; }
.impact-item::after { content:""; position:absolute; inset:1px; background:linear-gradient(145deg,#132838,#152e42); border-radius:17px; z-index:0; }
.impact-item strong { position:relative; z-index:1; display:block; font-size:1.2rem; margin:0 0 4px; letter-spacing:.5px; background:linear-gradient(90deg,#0ea5e9,#6366f1,#ff8d23,#0ea5e9); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:impactText 5s ease-in-out infinite; }
.impact-item span { position:relative; z-index:1; font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:#93b1c5; display:inline-block; background:linear-gradient(90deg,#6da9c9,#b4c5d6,#6da9c9); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:impactText 8s linear infinite; }
.impact-item:hover::before { opacity:.28; filter:brightness(1.15); }
.impact-item:hover strong { animation-play-state:paused; }
@keyframes impactRotate { to { transform:rotate(360deg); } }
@keyframes impactText { 0%{background-position:0 0;} 50%{background-position:100% 0;} 100%{background-position:0 0;} }
/* Auto scrolling horizontal strip */
.auto-strip { overflow:hidden; padding:18px 0 8px; background:#0b1621; position:relative; }
.auto-strip:before, .auto-strip:after { content:""; position:absolute; top:0; bottom:0; width:120px; pointer-events:none; z-index:2; }
.auto-strip:before { left:0; background:linear-gradient(90deg,#0b1621 10%,rgba(11,22,33,0)); }
.auto-strip:after { right:0; background:linear-gradient(-90deg,#0b1621 10%,rgba(11,22,33,0)); }
.auto-strip .strip-track { display:flex; gap:18px; animation:stripScroll 40s linear infinite; width:max-content; }
.auto-strip:hover .strip-track { animation-play-state:paused; }
.strip-item { flex:0 0 auto; width:220px; aspect-ratio:4/3; position:relative; border-radius:16px; overflow:hidden; background:#142533; box-shadow:0 6px 24px -12px rgba(0,0,0,.55); }
.strip-item img { width:100%; height:100%; object-fit:cover; filter:brightness(.9); transition:transform 3s ease, filter .6s; }
.strip-item:hover img { transform:scale(1.12); filter:brightness(1); }
@keyframes stripScroll { 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }
@media (max-width:700px){ .strip-item { width:160px; } }
/* Developer credit pill */
.dev-credit { position:relative; margin:0 0 40px; background:linear-gradient(135deg,#041724,#031019); border:1px solid #112b3c; padding:28px 42px; display:flex; flex-wrap:wrap; gap:38px; align-items:flex-start; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:#7aa2b7; border-radius:70px; box-shadow:0 28px 70px -28px rgba(0,0,0,.75), 0 4px 18px -6px rgba(14,165,233,.25), 0 0 0 1px rgba(14,165,233,.15) inset; backdrop-filter:blur(16px) saturate(180%); transition:box-shadow .65s, transform .65s, background .85s, color .6s; overflow:hidden; }
.dev-credit:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 12% 18%,rgba(14,165,233,.4),rgba(99,102,241,.05) 55%,rgba(14,165,233,.08)); opacity:.55; pointer-events:none; mix-blend-mode:overlay; }
.dev-credit:after { content:""; position:absolute; top:-40%; right:-10%; width:60%; height:180%; background:conic-gradient(from 180deg at 50% 50%,rgba(14,165,233,.0),rgba(14,165,233,.35),rgba(99,102,241,.0) 70%); filter:blur(60px) saturate(180%); opacity:.35; pointer-events:none; animation:spinGlow 18s linear infinite; }
@keyframes spinGlow { to { transform:rotate(360deg); } }
.dev-credit strong.credit-name { font-size:1rem; letter-spacing:.12em; background:linear-gradient(90deg,#0ea5e9,#6366f1); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; margin:0 6px 0 8px; position:relative; }
.dev-credit .credit-intro { font-weight:600; color:#5e87a0; }
.dev-credit .credit-brand a { color:#4cc9f0; font-weight:600; letter-spacing:.05em; }
.dev-credit .credit-desc { display:block; margin-top:6px; font-size:.55rem; letter-spacing:.3em; text-transform:uppercase; max-width:780px; line-height:1.5; color:#89b4c9; }
.dev-credit a { position:relative; text-transform:none; letter-spacing:.04em; }
.dev-credit a:after { content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%; background:linear-gradient(90deg,#0ea5e9,#6366f1); transform:scaleX(0); transform-origin:left; transition:.6s cubic-bezier(.19,1,.22,1); border-radius:2px; }
.dev-credit a:hover:after { transform:scaleX(1); }
.dev-credit-contact { font-size:.6rem; letter-spacing:.25em; color:#8dbbce; padding-top:6px; }
.dev-credit:hover { box-shadow:0 40px 90px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(14,165,233,.35), 0 0 0 6px rgba(99,102,241,.15); transform:translateY(-6px); background:linear-gradient(135deg,#042031,#041724 45%,#03141f); }
.dev-credit:active { transform:translateY(-2px); }
.dev-credit-main { flex:1 1 auto; min-width:320px; }
@media (max-width:900px){ .dev-credit { padding:24px 30px 30px; gap:24px; border-radius:48px; } .dev-credit strong.credit-name { font-size:.95rem; } }
@media (max-width:640px){ .dev-credit { padding:22px 22px 28px; gap:18px; font-size:.62rem; } .dev-credit .credit-desc { letter-spacing:.22em; } }
/* Powered by footer line */
.powered-by { margin-top:12px; font-size:.55rem; letter-spacing:.25em; text-transform:uppercase; color:#5d7484; }
.powered-by a { color:#0ea5e9; font-weight:600; letter-spacing:.2em; text-decoration:none; }
.powered-by a:hover { text-decoration:underline; }
/* Verification result styles */
.verify-result .ok { background:#0d3b26; color:#bffbd9; padding:14px 16px; border-radius:14px; font-size:.8rem; line-height:1.5; }
.verify-result .fail { background:#3f1d1d; color:#fcb7b7; padding:14px 16px; border-radius:14px; font-size:.8rem; line-height:1.5; }
.verify-result .next-actions { margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.verify-result .next-actions .btn { font-size:.7rem; padding:10px 18px; }
/* Page hero & breadcrumb */
.page-hero { position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#0b1621; min-height:clamp(300px,42vh,460px); padding:70px 0 80px; width:100%; }
.page-hero .hero-media { position:absolute; inset:0; width:100%; }
.page-hero .hero-media img { width:100%; height:100%; object-fit:cover; object-position:center center; }
.page-hero .container { max-width:980px; }
.full-bleed { width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }
section.full-bleed { padding-left:0; padding-right:0; }
section.full-bleed > .container { padding-left:38px; padding-right:38px; }
@media (max-width:800px){ section.full-bleed > .container { padding-left:22px; padding-right:22px; } }
/* Stretch utility for sections where inner content should also span full width (e.g., large galleries) */
.section.stretch > .container { max-width:100%; width:100%; padding-left:clamp(16px,3vw,46px); padding-right:clamp(16px,3vw,46px); }
.section.stretch .impact-gallery { max-width:100%; }
.section.stretch .features-grid { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
body { overflow-x:hidden; }
/* Force top structural bars to span full viewport width */
body > header.site-header, body > .metrics-bar { width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }
/* Keep inner content centered */
header.site-header .site-header-inner { max-width:1400px; margin:0 auto; }
/* Footer full-bleed */
body > footer.site-footer { width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; background:#060e16; border-top:1px solid #142c3e; padding:70px 0 50px; }
footer.site-footer .container { max-width:1400px; margin:0 auto; padding:0 38px; box-sizing:border-box; }
@media (max-width:800px){ footer.site-footer { padding:60px 0 46px; } footer.site-footer .container { padding:0 22px; } }
footer.site-footer .mini-grid { display:grid; gap:40px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin:10px 0 52px; }
footer.site-footer h4 { margin:0 0 14px; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:#79b4d4; }
footer.site-footer p, footer.site-footer li, footer.site-footer a { font-size:.75rem; line-height:1.55; color:#9fb4c5; }
footer.site-footer a:hover { color:#0ea5e9; text-decoration:none; }
footer.site-footer .copyright { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:#5d7484; margin-top:10px; }
/* Back to top button */
#backToTop { position:fixed; right:18px; bottom:90px; width:50px; height:50px; border-radius:50%; border:0; background:linear-gradient(135deg,#0ea5e9,#6366f1); color:#fff; font-size:1.3rem; cursor:pointer; box-shadow:0 12px 30px -10px rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .5s, transform .5s; transform:translateY(12px); z-index:1400; }
#backToTop:hover { filter:brightness(1.1); }
#backToTop.show { opacity:1; visibility:visible; transform:none; }
@media (max-width:780px){ #backToTop { bottom:120px; width:46px; height:46px; font-size:1.1rem; } }
@media (prefers-reduced-motion: reduce){ #backToTop { transition:none; } }
.page-hero:before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.55)); mix-blend-mode:normal; }
.page-hero .container { position:relative; z-index:2; }
@media (max-width:800px){ .page-hero { min-height:340px; padding:60px 0 70px; } }
@media (max-width:520px){ .page-hero { min-height:300px; padding:54px 0 60px; } .page-hero .section-title { font-size:1.55rem; } }
.breadcrumb a { text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.dev-credit:before, .dev-credit:after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.3; }
.dev-credit:before { background:linear-gradient(135deg,rgba(14,165,233,.35),rgba(99,102,241,.0)); mix-blend-mode:overlay; }
.dev-credit:after { background:radial-gradient(circle at 70% 40%,rgba(255,255,255,.08),transparent 60%); }
.dev-credit strong { color:#e2f3ff; letter-spacing:.12em; }
.dev-credit a { color:#0ea5e9; font-weight:600; text-transform:none; letter-spacing:0; position:relative; }
.dev-credit a:after { content:""; position:absolute; left:0; bottom:-3px; height:2px; width:100%; background:linear-gradient(90deg,#0ea5e9,#6366f1); transform:scaleX(0); transform-origin:left; transition:.5s; border-radius:2px; }
.dev-credit a:hover:after { transform:scaleX(1); }
.dev-credit:hover { box-shadow:0 18px 55px -18px rgba(0,0,0,.65), 0 0 0 1px rgba(14,165,233,.25), 0 0 0 4px rgba(99,102,241,.12); transform:translateY(-4px); background:radial-gradient(circle at 35% 25%,rgba(14,165,233,.18),rgba(99,102,241,.12) 55%,rgba(14,165,233,.07)); }
.dev-credit:active { transform:translateY(-1px); transition:.2s; }
.dev-credit-main { flex:1 1 auto; min-width:240px; }
.dev-credit-contact { flex:0 0 auto; }
@media (max-width:640px){ .dev-credit { padding:18px 22px; gap:14px; font-size:.62rem; } }
/* Contact form styling */
.contact-form { position:relative; }
.contact-form .field-row { display:flex; gap:24px; }
.contact-form .field-row.two-cols > .field { flex:1; }
.contact-form .field { display:flex; flex-direction:column; margin:0 0 18px; }
.contact-form label { font-size:.6rem; letter-spacing:.15em; font-weight:700; text-transform:uppercase; margin:0 0 6px; color:#9fb4c5; }
.contact-form input, .contact-form textarea { background:#132737; border:1px solid #1e3244; border-radius:12px; padding:14px 16px; font:inherit; color:#e2f3ff; resize:vertical; transition:border-color .25s, background .4s, box-shadow .4s; }
.contact-form input:focus, .contact-form textarea:focus { outline:0; border-color:#0ea5e9; background:#0f1e2c; box-shadow:0 0 0 3px rgba(14,165,233,.15); }
.contact-form .req { color:var(--primary); }
.contact-form .form-footer { margin-top:8px; display:flex; flex-direction:column; }
@media (max-width:700px){ .contact-form .field-row { flex-direction:column; gap:0; } }
/* Hide nav toggle (hamburger) on wide screens */
.nav-toggle { display:none; }
@media (max-width:900px){
  .nav-toggle { display:inline-flex; flex-direction:column; gap:4px; background:transparent; border:0; cursor:pointer; padding:8px; position:relative; z-index:1501; }
  .nav-toggle span { display:block; width:26px; height:3px; background:#e2f3ff; border-radius:2px; transition:.4s; }
  body.dark-mode .nav-toggle span { background:#fff; }
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  body.nav-open { overflow:hidden; }
  body.nav-open #primary-nav { opacity:1; visibility:visible; transform:translateY(0); }
  .nav-primary { position:fixed; inset:0 0 0 0; top:70px; background:rgba(5,12,20,.96); backdrop-filter:blur(18px) saturate(180%); display:flex; flex-direction:column; align-items:center; padding:40px 32px 80px; width:100%; height:calc(100vh - 70px); overflow-y:auto; box-shadow:0 0 0 1px #142c3e inset; transform:translateY(10px); opacity:0; visibility:hidden; transition:opacity .45s cubic-bezier(.19,1,.22,1), transform .5s cubic-bezier(.19,1,.22,1); }
  .nav-primary ul.menu { flex-direction:column; align-items:center; gap:14px; width:100%; margin:0 0 30px; }
  .nav-primary ul.menu > li > a { font-size:.95rem; letter-spacing:.2em; padding:14px 6px; display:inline-block; }
  .nav-primary a { padding:12px 6px; }
  .nav-primary a::after { bottom:6px; height:3px; }
  .nav-ctas { margin-top:0; width:100%; display:flex; flex-direction:column; gap:16px; }
  .nav-ctas .cta { width:100%; justify-content:center; font-size:.78rem; letter-spacing:.18em; padding:18px 26px; border-radius:46px; }
  .nav-ctas .cta.primary-donate { box-shadow:0 18px 40px -18px rgba(255,107,45,.55); }
  .nav-ctas .cta.member-free { box-shadow:0 18px 40px -18px rgba(99,102,241,.55); }
  .nav-primary .nav-ctas .cta .cta-icon { font-size:1.05rem; }
  .mobile-action-bar { display:none !important; } /* Avoid duplicated actions when menu is open */
}

/* ========== Dashboard Uploader & Manager (Responsive) ========== */
.mng-dropzone { border:2px dashed #94a3b8; border-radius:12px; background:#f8fafc; display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px; transition:background .25s, border-color .25s; }
.mng-dropzone:hover { background:#f1f5f9; }
.mng-dropzone.is-dragover { background:#eef2ff; border-color:#6366f1; }
.mng-dropzone .dz-invite { color:#475569; font-size:.9rem; }
.mng-previews { display:flex; flex-wrap:wrap; gap:10px; }
.mng-preview-card { width:120px; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 6px 16px -12px rgba(0,0,0,.2); }
.mng-preview-card img { display:block; width:120px; height:90px; object-fit:cover; background:#f1f5f9; }
.mng-preview-card .bar { height:6px; background:#e5e7eb; }
.mng-preview-card .bar > span { display:block; height:6px; width:0; background:#3b82f6; }
@media (max-width:900px){ .mng-preview-card { width:110px; } .mng-preview-card img { width:110px; height:82px; } }
@media (max-width:640px){
  .mng-dropzone { padding:14px; gap:12px; }
  .mng-dropzone .dz-invite { flex:1 1 100%; font-size:.85rem; }
  .mng-preview-card { width:98px; }
  .mng-preview-card img { width:98px; height:74px; }
}

/* Gallery manager action buttons in corner */
.impact-gallery .btn.small { padding:6px 10px; font-size:.68rem; border-radius:10px; box-shadow:0 6px 14px -10px rgba(0,0,0,.35); }
@media (max-width:640px){ .impact-gallery .btn.small { padding:6px 8px; font-size:.65rem; } }

/* Confirm modal polish */
#mng-confirm { backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
#mng-confirm .btn { font-size:.82rem; }
@media (max-width:480px){ #mng-confirm .btn { flex:1 1 auto; } }