/* =========================
   Hope for Gaza - Main Stylesheet
   ========================= */

/* =========================
   Design Tokens
   ========================= */
:root{
  --hfg-blue:#00AEEF;
  --hfg-green:#8DC63F;
  --hfg-black:#000000;
  --primary:var(--hfg-blue);
  --primary-600:#0099d4;
  --teal:var(--hfg-green);
  --accent:var(--hfg-green);
  --dark:var(--hfg-black);
  --muted:#475569;
  --light:#F8FAFC;
  --surface:#ffffff;
  --border:#e5e7eb;
  --warning:#F59E0B;
  --danger:#EF4444;
  --shadow: 0 10px 28px rgba(16,24,40,.08);
  --ring: 0 0 0 3px rgba(0,174,239,.25);
  --grad: var(--hfg-blue);
  --grad-soft: rgba(0,174,239,.08);
}

/* Dark Theme Variables */
[data-theme="dark"]{
  --dark:#E6EDF3;
  --muted:#A6B3C2;
  --light:#0b1321;
  --surface:#0f172a;
  --border:#1f2a44;
  --shadow: 0 10px 28px rgba(0,0,0,.35);
  --ring: 0 0 0 3px rgba(16,183,167,.35);
  --grad-soft: linear-gradient(135deg,rgba(10,122,92,.18),rgba(16,183,167,.18));
}

[data-theme="dark"] .lang-toggle{
  background: var(--surface); border-color: var(--primary); color: var(--primary);
}
[data-theme="dark"] .lang-toggle:hover{
  background: var(--primary); color: #fff;
}
[data-theme="dark"] .camp-tag{
  background: rgba(16,183,167,.15); border-color: var(--teal); color: var(--teal);
}
[data-theme="dark"] .camp-card:hover .camp-tag{
  background: var(--teal); color: var(--dark);
}
[data-theme="dark"] .story-overlay, [data-theme="dark"] .gallery-overlay{
  background: linear-gradient(transparent, rgba(15,23,42,.9));
}
[data-theme="dark"] .progress{
  background: var(--border);
}

/* =========================
   Base Styles
   ========================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--dark); background:var(--surface); line-height:1.8;
  accent-color: var(--primary);
  margin: 0;
  padding: 0;
}
a{ text-decoration:none; color: inherit; }
.container-narrow{max-width:980px}
img{max-width:100%;height:auto}

/* =========================
   Layout Components
   ========================= */
.page-wrapper{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main-content{
  flex: 1;
}
.page-header{
  background: var(--primary);
  color: #fff;
  padding: 4rem 0 2rem;
  text-align: center;
}
.page-header h1{
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  margin-bottom: 1rem;
}
.page-header p{
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

/* =========================
   Enhanced Topbar
   ========================= */
.topbar{
  background: var(--primary);
  color: #fff; 
  font-size: .9rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.1);
  will-change: transform;
}
.topbar::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  animation: shimmer 4s ease-in-out infinite;
  will-change: left;
}
.topbar::after{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.05), transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(16,183,167,.08), transparent 50%);
  pointer-events: none;
}
@keyframes shimmer{
  0%{ left: -100%; opacity: 0; }
  50%{ opacity: 1; }
  100%{ left: 100%; opacity: 0; }
}
.topbar-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.topbar-links{
  display: flex;
  align-items: center;
  gap: 1rem;
}
.quick-links{
  display: flex;
  align-items: center;
  gap: .75rem;
}
.topbar-link{
  display: flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  padding: .4rem .7rem;
  border-radius: 8px;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  font-size: .85rem;
  position: relative;
  overflow: hidden;
  will-change: transform;
}
.topbar-link::before{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.2);
  border-radius: 8px;
  opacity: 0;
  transform: scale(0.8);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.topbar-link:hover::before{
  opacity: 1;
  transform: scale(1);
}
.topbar-link:hover{
  color: #fff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.topbar-link:active{
  transform: translateY(0) scale(0.98);
  transition: transform .1s ease;
}
.topbar-link i{
  font-size: .8rem;
  opacity: .8;
}
.topbar-news{
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.ticker{
  position: relative; 
  overflow: hidden; 
  max-width: 400px; 
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  background: rgba(255,255,255,.12);
  border-radius: 20px;
  padding: .4rem 1rem;
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  will-change: contents;
}
.ticker::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation: tickerShine 2s ease-in-out infinite;
  pointer-events: none;
}
.ticker span{
  display: inline-block; 
  padding-inline-start: 1rem; 
  animation: ticker 18s linear infinite;
  font-weight: 600;
  will-change: transform;
}
.ticker:hover span{
  animation-play-state: paused;
}
@keyframes ticker{
  0%{ transform: translateX(100%); }
  100%{ transform: translateX(-100%); }
}
@keyframes tickerShine{
  0%, 100%{ transform: translateX(-100%); opacity: 0; }
  50%{ transform: translateX(100%); opacity: 1; }
}
/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce){
  .ticker span{ 
    animation: none; 
    transform: translateX(0);
    text-align: center;
  }
  .ticker::before{ animation: none; }
}
.topbar-actions{
  display: flex;
  align-items: center;
  gap: 1rem;
}
.contact-info{
  display: flex;
  align-items: center;
  gap: .75rem;
}
.contact-item{
  display: flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  padding: .4rem .6rem;
  border-radius: 8px;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  font-size: .85rem;
  position: relative;
  overflow: hidden;
  will-change: transform;
}
.contact-item::before{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.2);
  border-radius: 8px;
  opacity: 0;
  transform: scale(0.8);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-item:hover::before{
  opacity: 1;
  transform: scale(1);
}
.contact-item:hover{
  color: #fff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.contact-item.whatsapp:hover{
  background: #25d366;
  color: #fff;
  box-shadow: 0 4px 16px rgba(37,211,102,.4);
}
.contact-item.whatsapp:hover::before{
  background: rgba(255,255,255,.1);
}
.contact-item:active{
  transform: translateY(0) scale(0.98);
  transition: transform .1s ease;
}
.topbar-divider{
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,.3);
  margin: 0 .5rem;
}
.btn-donate.enhanced{
  background: #fff;
  color: var(--primary);
  border: none;
  border-radius: 20px;
  padding: .5rem 1rem;
  font-weight: 800;
  font-size: .85rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: .5rem;
  position: relative;
  overflow: hidden;
  will-change: transform;
}
.btn-donate.enhanced::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  opacity: 0;
  transition: opacity .3s ease;
}
.btn-donate.enhanced:hover::before{
  opacity: 1;
}
.btn-donate.enhanced:hover{
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0,0,0,.35);
}
.btn-donate.enhanced:active{
  transform: translateY(-1px) scale(1.02);
  transition: transform .1s ease;
}
.btn-donate.enhanced i{
  font-size: .9rem;
  position: relative;
  z-index: 1;
  transition: transform .3s ease;
}
.btn-donate.enhanced:hover i{
  transform: rotate(12deg) scale(1.1);
}
.btn-donate.enhanced span{
  position: relative;
  z-index: 1;
}

/* Dark theme topbar enhancements */
[data-theme="dark"] .topbar{
  background: rgba(0,174,239,.95);
  backdrop-filter: blur(20px) saturate(200%);
  border-bottom: 1px solid rgba(0,174,239,.2);
}
[data-theme="dark"] .ticker{
  background: rgba(141,198,63,.15);
  border-color: rgba(141,198,63,.25);
}
[data-theme="dark"] .btn-donate.enhanced{
  background: rgba(255,255,255,.95);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* Enhanced Responsive Topbar */
@media (max-width: 1400px) {
  .topbar-news{ max-width: 350px; }
  .contact-item span{ display: none !important; }
}
@media (max-width: 1200px) {
  .topbar-news{ max-width: 300px; }
  .topbar-link, .contact-item{ font-size: .8rem; padding: .35rem .6rem; }
}
@media (max-width: 992px) {
  .topbar{
    padding: .75rem 0;
    backdrop-filter: blur(12px) saturate(150%);
  }
  .topbar-content{
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    animation: fadeInStagger .6s ease-out;
  }
  .topbar-news{
    order: 1;
    width: 100%;
    animation: slideInFromTop .5s ease-out .1s both;
  }
  .ticker{
    max-width: 100%;
    font-size: .85rem;
    padding: .5rem 1.2rem;
  }
  .topbar-actions{
    order: 2;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    animation: slideInFromTop .5s ease-out .2s both;
  }
  .contact-info{
    flex: 1;
    justify-content: center;
    gap: 1rem;
  }
  .btn-donate.enhanced{
    align-self: center;
    animation: bounceIn .6s ease-out .4s both;
  }
  .topbar-links{
    order: 3;
    width: 100%;
    justify-content: center;
    animation: slideInFromTop .5s ease-out .3s both;
  }
  .quick-links{
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .topbar-link{
    padding: .4rem .7rem;
    font-size: .8rem;
    border-radius: 6px;
  }
}

/* Enhanced Mobile Animations */
@keyframes fadeInStagger{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@keyframes slideInFromTop{
  from{ 
    opacity: 0; 
    transform: translateY(-20px); 
  }
  to{ 
    opacity: 1; 
    transform: translateY(0); 
  }
}
@keyframes bounceIn{
  0%{ 
    opacity: 0; 
    transform: scale(0.3) translateY(-20px); 
  }
  50%{ 
    opacity: 1; 
    transform: scale(1.05) translateY(-5px); 
  }
  100%{ 
    opacity: 1; 
    transform: scale(1) translateY(0); 
  }
}
@media (max-width: 768px) {
  .topbar{
    padding: .5rem 0;
  }
  .topbar-content{
    gap: .75rem;
  }
  .contact-info{
    gap: .75rem;
  }
  .contact-item{
    padding: .3rem .5rem;
    font-size: .75rem;
  }
  .btn-donate.enhanced{
    padding: .4rem .8rem;
    font-size: .8rem;
  }
}
@media (max-width: 576px) {
  .topbar{
    padding: .4rem 0;
  }
  .topbar-links{ display: none; }
  .topbar-content{
    flex-direction: row;
    gap: .5rem;
  }
  .topbar-news{
    order: 1;
    flex: 1;
  }
  .topbar-actions{
    order: 2;
    width: auto;
    flex-direction: column;
    gap: .5rem;
  }
  .contact-info{
    gap: .5rem;
    flex-direction: row;
  }
  .ticker{
    max-width: 180px;
    font-size: .75rem;
    padding: .3rem .8rem;
  }
  .btn-donate.enhanced{
    padding: .35rem .7rem;
    font-size: .75rem;
  }
}
@media (max-width: 480px) {
  .topbar-actions{
    flex-direction: column;
    align-items: center;
  }
  .contact-info{
    flex-direction: column;
    align-items: center;
    gap: .4rem;
  }
  .ticker{
    max-width: 150px;
    font-size: .7rem;
  }
}
/* Enhanced Accessibility & Motion Preferences */
@media (prefers-reduced-motion: reduce){
  .ticker span{ animation: none }
  .topbar::before{ animation: none }
  .ticker::before{ animation: none }
  .topbar-content{ animation: none }
  .topbar-news{ animation: none }
  .topbar-actions{ animation: none }
  .topbar-links{ animation: none }
  .btn-donate.enhanced{ animation: none }
  .topbar-link{ transition: none }
  .contact-item{ transition: none }
}

/* Focus Management & Keyboard Navigation */
.topbar-link:focus-visible,
.contact-item:focus-visible,
.btn-donate.enhanced:focus-visible{
  outline: 2px solid rgba(255,255,255,.8);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.2);
}

/* Enhanced Print Styles */
@media print{
  .topbar{
    background: var(--hfg-blue) !important;
    color: white !important;
    position: static !important;
  }
  .topbar::before,
  .topbar::after,
  .ticker::before{
    display: none !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high){
  .topbar{
    border-bottom: 2px solid white;
  }
  .topbar-link,
  .contact-item{
    border: 1px solid rgba(255,255,255,.5);
  }
  .btn-donate.enhanced{
    border: 2px solid var(--primary);
  }
}

/* =========================
   Navigation (Enhanced)
   ========================= */
.navbar{ 
  backdrop-filter: saturate(180%) blur(20px); 
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1); 
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1rem 0;
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  will-change: transform, background, box-shadow;
}
[data-theme="dark"] .navbar{
  background: rgba(15,23,42,.95);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.navbar.is-scrolled{ 
  background: rgba(255,255,255,.98) !important; 
  box-shadow: 0 4px 20px rgba(2,8,23,.12), 0 1px 4px rgba(0,0,0,.05);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  transform: translateY(0) translateZ(0);
  backdrop-filter: saturate(180%) blur(24px);
}
[data-theme="dark"] .navbar.is-scrolled{ 
  background:rgba(15,23,42,.98) !important;
  border-bottom: 1px solid var(--border);
}
.navbar-brand{ 
  font-weight:900; letter-spacing:.2px; font-size: 1.25rem;
  transition: transform .2s ease;
}
.navbar-brand:hover{
  transform: scale(1.02);
}
.brand-mark{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-grid;
  place-items: center;
  margin-inline-end: .75rem;
  background: var(--primary);
  color: #fff; 
  box-shadow: 0 6px 20px rgba(16,183,167,.3), 0 1px 4px rgba(16,183,167,.1);
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.brand-mark:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(16,183,167,.35), 0 2px 6px rgba(16,183,167,.15);
}
.theme-toggle, .lang-toggle{ 
  border:1px solid var(--border); border-radius:999px; 
  padding:.5rem .9rem; font-weight:700; transition: all .3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  background: var(--surface); color: var(--dark);
}
.theme-toggle:hover, .lang-toggle:hover{
  transform:translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.lang-toggle{ 
  background:var(--surface); color:var(--primary); border-color:var(--primary);
}
.lang-toggle:hover{ 
  background:var(--primary); color:#fff;
}
[data-theme="dark"] .theme-toggle{
  background: var(--surface); border-color: var(--border); color: var(--dark);
}
[data-theme="dark"] .theme-toggle:hover{
  background: var(--primary); color: #fff;
}
[data-theme="dark"] .lang-toggle{
  background: var(--surface); border-color: var(--primary); color: var(--primary);
}
[data-theme="dark"] .lang-toggle:hover{
  background: var(--primary); color: #fff;
}
.navbar-controls{ 
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}

.nav-link{
  position: relative; 
  font-weight: 700; 
  padding: .8rem 1.2rem;
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1); 
  border-radius: 12px;
  margin: 0 .25rem; 
  overflow: hidden;
  isolation: isolate;
}
.nav-link::before{
  content: ""; 
  position: absolute; 
  inset: 0; 
  background: var(--grad-soft); 
  border-radius: 12px;
  opacity: 0; 
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0.85);
  z-index: -1;
}
.nav-link::after{
  content: ""; 
  position: absolute; 
  bottom: .2rem; 
  left: 50%; 
  height: 3px; 
  width: 0; 
  background: var(--primary); 
  border-radius: 2px;
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.nav-link:hover::before{ 
  opacity: 1; 
  transform: scale(1); 
}
.nav-link:hover::after, .nav-link.active::after{ 
  width: 70%; 
  left: 15%; 
}
.nav-link:hover{ 
  color: var(--primary); 
  transform: translateY(-2px);
  text-shadow: 0 1px 2px rgba(16,183,167,.1);
}
.nav-link.active{
  color: var(--primary); 
  background: var(--grad-soft);
  transform: translateY(-1px);
}

/* Navbar Navigation Lists */
.navbar-nav{ 
  display: flex; flex-direction: row; list-style: none; margin: 0; padding: 0; 
}
.navbar-expand-lg .navbar-collapse{ 
  display: flex !important; flex-basis: auto; 
}

/* Mobile Navbar Toggler */
.navbar-toggler{ 
  display: none; background: transparent; border: 2px solid var(--primary); 
  padding: 0.5rem; border-radius: 8px; transition: all .3s ease;
  position: relative; width: 44px; height: 44px;
}
.navbar-toggler:hover{
  background: var(--primary); transform: scale(1.05);
}
/* Enhanced Hamburger Animation */
.navbar-toggler-icon{
  display: block; 
  width: 22px; 
  height: 2px; 
  background: var(--primary);
  position: relative; 
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 1px;
}
.navbar-toggler:hover .navbar-toggler-icon{
  background: #fff;
  transform: scale(1.1);
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
  content: ''; 
  position: absolute; 
  width: 100%; 
  height: 2px;
  background: var(--primary); 
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 1px;
  left: 0;
}
.navbar-toggler:hover .navbar-toggler-icon::before,
.navbar-toggler:hover .navbar-toggler-icon::after{
  background: #fff;
}
.navbar-toggler-icon::before{ 
  top: -7px; 
  transform-origin: center;
}
.navbar-toggler-icon::after{ 
  bottom: -7px; 
  transform-origin: center;
}

/* Animated hamburger to X */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
  background: transparent;
  transform: rotate(180deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{
  transform: rotate(45deg) translate(5px, 5px);
  top: 0;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{
  transform: rotate(-45deg) translate(5px, -5px);
  bottom: 0;
}

/* Mobile Menu Backdrop */
.navbar-backdrop{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
}
.navbar-backdrop.show{
  opacity: 1;
  visibility: visible;
}

/* Enhanced Mobile Menu Container */
@media (max-width: 992px) {
  .navbar-expand-lg .navbar-collapse{
    transform-origin: top center;
    will-change: transform, opacity;
  }
  .navbar-expand-lg .navbar-collapse:not(.show){
    transform: translateY(-15px) scale(0.95);
    opacity: 0;
  }
}

/* Enhanced Responsive Navbar */
@media (max-width: 1200px) {
  .navbar-controls .btn{
    padding: .5rem .8rem;
    font-size: .85rem;
  }
  .brand-mark{
    width: 44px;
    height: 44px;
  }
}

/* Tablet Optimizations */
@media (min-width: 768px) and (max-width: 991px) {
  .navbar{
    padding: 0.8rem 0;
  }
  .navbar-brand{
    font-size: 1.15rem;
  }
  .brand-mark{
    width: 42px;
    height: 42px;
  }
  .navbar-controls{
    gap: .6rem;
  }
  .theme-toggle, .lang-toggle{
    padding: .45rem .75rem;
    font-size: .9rem;
  }
  .navbar-toggler{
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Mobile Responsive Design */
@media (max-width: 992px) {
  .navbar{ 
    padding: 0.7rem 0; 
    backdrop-filter: saturate(180%) blur(16px);
    transition: all .3s ease;
  }
  .navbar.is-scrolled{ 
    padding: 0.55rem 0;
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
  }
  .navbar-controls{ 
    gap: .5rem; 
    order: 2;
    flex-shrink: 0;
  }
  .theme-toggle, .lang-toggle{ 
    padding: .4rem .7rem; 
    font-size: .85rem;
    border-radius: 10px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .brand-mark{ 
    width: 40px; 
    height: 40px; 
    margin-inline-end: .6rem; 
  }
  .navbar .container{
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
  }
  
  /* Enhanced Mobile Menu */
  .navbar-expand-lg .navbar-collapse{ 
    background: rgba(255,255,255,.98); 
    backdrop-filter: saturate(180%) blur(24px);
    border-radius: 20px; 
    margin-top: 1rem;
    box-shadow: 0 12px 48px rgba(0,0,0,.15), 0 4px 12px rgba(0,0,0,.08);
    border: 1px solid rgba(255,255,255,.3);
    padding: 2rem 1.5rem;
    position: absolute;
    top: 100%;
    left: 1rem;
    right: 1rem;
    z-index: 1000;
    animation: slideDownMobile .3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  [data-theme="dark"] .navbar-expand-lg .navbar-collapse{
    background: rgba(15,23,42,.98);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 12px 48px rgba(0,0,0,.3);
  }
  @keyframes slideDownMobile{
    from{ 
      opacity: 0; 
      transform: translateY(-15px) scale(0.95); 
      filter: blur(4px);
    }
    to{ 
      opacity: 1; 
      transform: translateY(0) scale(1); 
      filter: blur(0);
    }
  }
  
  /* Enhanced Mobile Toggler */
  .navbar-toggler{ 
    display: flex;
    align-items: center;
    justify-content: center;
    order: 3;
    border-radius: 12px;
    border-width: 2px;
    width: 48px;
    height: 48px;
    padding: 0;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }
  .navbar-toggler:focus{
    box-shadow: 0 0 0 3px rgba(0,174,239,.25);
  }
  .navbar-toggler:hover{
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,174,239,.2);
  }
  
  /* Navigation List Styling */
  .navbar-nav{ 
    flex-direction: column; 
    padding: 0;
    gap: .5rem;
    width: 100%;
  }
  .nav-link{
    margin: 0; 
    padding: 1rem 1.5rem;
    border-radius: 16px; 
    width: 100%;
    text-align: center;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    font-size: .95rem;
    position: relative;
    background: transparent;
  }
  .nav-link:hover, .nav-link.active{
    background: var(--grad-soft);
    color: var(--primary);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0,174,239,.15);
  }
  .nav-link::after{
    display: none;
  }
  .d-lg-inline-flex{ display: none !important; }
  .navbar-controls{
    order: 2; 
    margin-left: auto;
    display: flex;
    align-items: center;
  }
  
  /* Enhanced Mobile Dropdown Styling */
  .dropdown-menu{
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    background: rgba(0,174,239,.08);
    margin: .5rem 0 1rem 0;
    border-radius: 16px;
    padding: .75rem;
    transform: scale(1);
    transition: all .25s ease;
  }
  .dropdown-menu.show{
    display: block;
    animation: fadeInScale .25s ease;
  }
  @keyframes fadeInScale{
    from{ 
      opacity: 0; 
      transform: translateY(-8px) scale(0.95); 
    }
    to{ 
      opacity: 1; 
      transform: translateY(0) scale(1); 
    }
  }
  .dropdown-item{
    padding: .8rem 1.2rem;
    font-size: .9rem;
    margin: .25rem 0;
    border-radius: 12px;
    font-weight: 600;
    transition: all .25s ease;
    text-align: start !important;
    position: relative;
    overflow: hidden;
  }
  .dropdown-item:hover, .dropdown-item:focus{
    background: rgba(0,174,239,.15);
    color: var(--primary);
    transform: translateX(6px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0,174,239,.1);
  }
  .dropdown-item i{
    margin-inline-end: .75rem;
    color: var(--primary);
    transition: transform .25s ease;
  }
  .dropdown-item:hover i{
    transform: scale(1.1);
  }
  .nav-item.dropdown:hover .dropdown-menu{
    display: none;
  }
  
  /* Mobile donate button */
  .nav-item.d-lg-none .btn{
    margin-top: 1rem;
    padding: .8rem 1.5rem;
    font-size: .95rem;
    border-radius: 16px;
    font-weight: 700;
  }
}

/* Small Mobile Devices */
@media (max-width: 576px) {
  .navbar{
    padding: 0.6rem 0;
  }
  .navbar-brand{
    font-size: 1rem;
  }
  .brand-mark{
    width: 36px;
    height: 36px;
    margin-inline-end: .5rem;
  }
  .navbar-controls{
    gap: .4rem;
  }
  .theme-toggle, .lang-toggle{
    padding: .35rem .6rem;
    font-size: .8rem;
    min-width: 40px;
    min-height: 40px;
  }
  .navbar-toggler{
    width: 44px;
    height: 44px;
  }
  .navbar-expand-lg .navbar-collapse{
    left: 0.5rem;
    right: 0.5rem;
    padding: 1.5rem 1rem;
    border-radius: 16px;
  }
  .nav-link{
    padding: .9rem 1.2rem;
    font-size: .9rem;
  }
  .dropdown-item{
    padding: .7rem 1rem;
    font-size: .85rem;
  }
}

/* Ultra Small Devices */
@media (max-width: 375px) {
  .navbar{
    padding: 0.5rem 0;
  }
  .navbar-expand-lg .navbar-collapse{
    left: 0.25rem;
    right: 0.25rem;
    padding: 1.25rem 0.75rem;
  }
  .container{
    padding: 0 0.75rem;
  }
}

/* Bootstrap Collapse Classes */
.collapse{ 
  display: none; 
  transition: all .3s ease;
}
.collapse.show{ 
  display: block;
  animation: slideDown .3s ease;
}
@keyframes slideDown{
  from{ opacity: 0; transform: translateY(-10px); }
  to{ opacity: 1; transform: translateY(0); }
}



/* =========================
   Hero Section
   ========================= */
header.hero{
  position:relative;min-height:76vh;display:grid;place-items:center;
  color:#fff;text-align:center;overflow:hidden;background:#123;
  isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:url('https://images.unsplash.com/photo-1524253482453-3fed8d2fe12b?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat;
  filter:brightness(.55);
  transform: translateY(var(--pY,0px));
  will-change: transform;
  transition: transform .2s linear;
}
.hero::after{
  content:"";position:absolute;inset:0; pointer-events:none;
  background: rgba(0,174,239,.4);
  mix-blend-mode:screen;
}
.hero .content{ position:relative; z-index:2; padding:2rem 1rem; }
.eyebrow{
  display:inline-flex;gap:.5rem;align-items:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);border-radius:999px;
  padding:.35rem .9rem;font-weight:800;backdrop-filter: blur(6px);
}
.hero h1{
  font-weight:900; margin:1rem 0 .75rem; font-size:clamp(1.6rem,4vw,3rem);
  background: linear-gradient(90deg,#fff, #e9fffa 30%, #d6fff6); 
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{ 
  color:#eef; max-width:900px; margin:0 auto 1.25rem;
}
.hero .btn{ 
  padding:.9rem 1.25rem; font-weight:800; border-radius:14px; 
  box-shadow:0 10px 24px rgba(0,0,0,.18); position:relative; overflow:hidden;
}
.hero .btn::after{
  content:""; position:absolute; inset:0; 
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.2) 20%, transparent 40%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.hero .btn:hover::after{ transform: translateX(120%) }

/* =========================
   Sections & Typography
   ========================= */
section{scroll-margin-top:90px; padding: 4rem 0;}
.section-title{ 
  font-weight:900; font-size:clamp(1.3rem,3vw,2rem);
  margin-bottom: 1rem;
}
.section-sub{ 
  color:var(--muted); margin-bottom: 2rem;
}

/* =========================
   Cards & Features
   ========================= */
.feature-card{
  border:1px solid var(--border); border-radius:18px; 
  background:var(--surface); height:100%; transition:.28s ease;
  background-image: var(--grad-soft);
  padding: 2rem;
}
.feature-card:hover{ 
  transform:translateY(-6px); box-shadow:var(--shadow);
}
.feature-icon{
  width:54px;height:54px;display:grid;place-items:center;border-radius:14px;
  background:var(--primary);
  border:1px solid var(--border); color:#fff; 
  box-shadow: 0 8px 20px rgba(16,183,167,.25);
  transition: all .3s ease;
}
.feature-icon:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 28px rgba(16,183,167,.35);
}
.feature-icon i{
  font-size: 1.2rem;
  transition: transform .3s ease;
}
.feature-icon:hover i{
  transform: scale(1.1);
}

/* =========================
   Statistics
   ========================= */
.stat{ 
  border:1px dashed var(--border); border-radius:16px; 
  background: var(--light); padding:1.25rem; text-align:center; 
  transition:.25s;
}
.stat:hover{ 
  transform: translateY(-4px); box-shadow: var(--shadow);
}
.stat .num{ 
  font-weight:900; font-size:clamp(1.4rem,3.2vw,2.2rem); 
  color:var(--primary);
}
.stat .label{ 
  color:var(--muted); font-weight:700;
}

/* =========================
   Campaigns
   ========================= */
.camp-card{ 
  border:1px solid var(--border); border-radius:20px; overflow:hidden; 
  background:var(--surface); height:100%; transition:all .35s ease;
  box-shadow: 0 4px 12px rgba(16,183,167,.08);
  position:relative;
}
.camp-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--grad-soft); opacity:0; transition:opacity .35s ease;
}
.camp-card:hover{ 
  transform: translateY(-8px) scale(1.02); 
  box-shadow: 0 12px 32px rgba(16,183,167,.15);
  border-color:var(--primary);
}
.camp-card:hover::before{ opacity:1 }
.camp-img{ 
  aspect-ratio:16/9; object-fit:cover; width:100%; 
  transition: transform .5s ease;
  border-radius:16px 16px 0 0;
}
.camp-card:hover .camp-img{ transform: scale(1.08) }
.camp-tag{ 
  font-size:.75rem; border:1px solid var(--primary); 
  padding:.3rem .7rem; border-radius:999px; 
  color:var(--primary); background:rgba(10,122,92,.08);
  font-weight:600; transition:all .25s ease;
}
.camp-card:hover .camp-tag{ 
  background:var(--primary); color:#fff; transform:scale(1.05);
}
.progress{ 
  height:12px; background:var(--light); border-radius:6px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.08);
}
.progress-bar{ border-radius:6px; transition:width .8s ease }
.campaign-stats{ 
  display:flex; justify-content:space-between; align-items:center;
  font-size:.85rem; font-weight:600;
}
.campaign-btn{
  border-radius:12px; font-weight:700; padding:.6rem 1.2rem;
  transition:all .25s ease; position:relative; overflow:hidden;
}
.campaign-btn:hover{ 
  transform:translateY(-2px); box-shadow:0 6px 20px rgba(10,122,92,.3);
}

/* =========================
   Organization Activities
   ========================= */
.organization-activities{
  background: linear-gradient(135deg, var(--light) 0%, rgba(248,250,252,0.8) 100%);
}
[data-theme="dark"] .organization-activities{
  background: linear-gradient(135deg, var(--light) 0%, rgba(11,19,33,0.8) 100%);
}
.activity-main-card, .activity-card{
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
}
.activity-main-card:hover, .activity-card:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(16,183,167,.25);
}
.activity-img{
  transition: transform .6s cubic-bezier(0.4, 0, 0.2, 1);
}
.activity-main-card:hover .activity-img, .activity-card:hover .activity-img{
  transform: scale(1.1);
}
.activity-overlay{
  background: linear-gradient(transparent 20%, rgba(0,0,0,.7) 70%, rgba(0,0,0,.9));
  transition: background .4s ease;
}
.activity-main-card:hover .activity-overlay, .activity-card:hover .activity-overlay{
  background: linear-gradient(transparent 10%, rgba(0,0,0,.8) 60%, rgba(0,0,0,.95));
}
.activity-badge{
  padding: .4rem .8rem; border-radius: 20px; font-size: .8rem; font-weight: 600;
  backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2);
  transition: all .3s ease;
}
.activity-badge.ongoing{
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff; box-shadow: 0 4px 16px rgba(34,197,94,.3);
}
.activity-badge.education{
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff; box-shadow: 0 4px 16px rgba(59,130,246,.3);
}
.activity-badge.medical{
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff; box-shadow: 0 4px 16px rgba(239,68,68,.3);
}
.activity-content:hover .activity-badge{
  transform: translateY(-2px) scale(1.05);
}
.activity-stats{
  background: rgba(255,255,255,.1); 
  border-radius: 12px; padding: 1rem;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
}

/* =========================
   Gallery
   ========================= */
.gallery-item, .success-story-card{
  transition: all .35s ease; cursor: pointer; position: relative;
}
.gallery-item:hover, .success-story-card:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 15px 40px rgba(16,183,167,.2);
}
.gallery-overlay, .story-overlay{
  background: linear-gradient(transparent, rgba(0,0,0,.8));
  backdrop-filter: blur(8px);
  transition: opacity .3s ease;
}
.gallery-item:hover .gallery-overlay{
  opacity: 1 !important;
}
.story-badge{
  font-size: .75rem; font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.gallery-img{
  transition: transform .5s ease;
}
.gallery-item:hover .gallery-img{
  transform: scale(1.1);
}

/* =========================
   Contact Section
   ========================= */
.contact-info-card, .contact-form-card{
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.contact-info-card::before, .contact-form-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: var(--primary);
  transition: left .6s ease;
}
.contact-info-card:hover::before, .contact-form-card:hover::before{
  left: 0;
}
.contact-info-card:hover, .contact-form-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(16,183,167,.15);
  border-color: var(--primary);
}
.contact-icon{
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  transition: all .3s ease;
  box-shadow: 0 4px 16px rgba(16,183,167,.2);
}
.contact-item:hover .contact-icon{
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 8px 24px rgba(16,183,167,.3);
}
.contact-item{
  transition: all .3s ease;
  padding: .5rem;
  border-radius: 12px;
}
.contact-item:hover{
  background: var(--grad-soft);
  transform: translateX(8px);
}
.social-btn{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light);
  color: var(--muted);
  text-decoration: none;
  transition: all .3s ease;
  border: 2px solid var(--border);
}
.social-btn:hover{
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 8px 20px rgba(16,183,167,.3);
  border-color: var(--primary);
}
.enhanced-input{
  transition: all .3s ease;
  border: 2px solid var(--border);
  padding: 1rem;
  font-size: .95rem;
}
.enhanced-input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(16,183,167,.15);
  transform: translateY(-1px);
}
.enhanced-btn{
  transition: all .3s ease;
  font-weight: 700;
  padding: 1rem 2rem;
  position: relative;
  overflow: hidden;
}
.enhanced-btn::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .5s ease;
}
.enhanced-btn:hover::before{
  left: 100%;
}
.enhanced-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(16,183,167,.3);
}

/* =========================
   Enhanced Touch-Friendly Forms & Buttons
   ========================= */
.contact-card{ 
  border:1px solid var(--border); border-radius:18px; 
  background:var(--surface);
}
.form-control, .form-select{ 
  border-radius:12px; border: 1px solid var(--border);
  padding: .75rem 1rem; background: var(--surface);
  color: var(--dark); transition: all .25s ease;
  min-height: 44px; /* Touch-friendly minimum height */
  font-size: 1rem; /* Prevent zoom on iOS */
}
.form-control:focus, .form-select:focus{
  outline: none; border-color: var(--primary);
  box-shadow: var(--ring);
  transform: translateY(-1px);
}
.btn{ 
  border-width:2px; transition: all .2s ease;
  padding: .75rem 1.5rem; border-radius: 12px;
  font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border: none;
  min-height: 44px; /* Touch-friendly minimum height */
  min-width: 44px; /* Touch-friendly minimum width */
  position: relative;
  overflow: hidden;
}
.btn:active{ 
  transform: translateY(1px) scale(.98);
  transition: transform .05s ease;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.btn-primary{ 
  background:var(--primary); border-color:var(--primary); color: #fff;
}
.btn-primary:hover{ 
  background:var(--primary-600); border-color:var(--primary-600);
  box-shadow: 0 6px 20px rgba(10,122,92,.3);
}
.btn-outline-light{ 
  border: 2px solid rgba(255,255,255,.3); color: #fff;
  background: transparent;
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.1);
  transform: translateY(-2px);
}

/* Enhanced Touch Targets for Mobile */
@media (max-width: 768px) {
  .btn{
    padding: .8rem 1.6rem;
    min-height: 48px;
    font-size: .9rem;
  }
  .form-control, .form-select{
    padding: .9rem 1.2rem;
    min-height: 48px;
    font-size: 1rem;
  }
  .navbar-toggler{
    min-height: 48px;
    min-width: 48px;
    padding: .75rem;
  }
  .theme-toggle, .lang-toggle{
    min-height: 44px;
    padding: .6rem 1rem;
  }
  /* Larger touch targets for links */
  .nav-link{
    padding: .8rem 1.2rem;
    min-height: 44px;
  }
  .topbar-link, .contact-item{
    padding: .5rem .8rem;
    min-height: 40px;
  }
}

@media (max-width: 576px) {
  .btn{
    padding: .75rem 1.4rem;
    min-height: 46px;
  }
  .form-control, .form-select{
    padding: .85rem 1.1rem;
    min-height: 46px;
  }
}

/* =========================
   Footer
   ========================= */
footer{
  background: #0b1a16;
  color: #cfe8df;
}
footer a{
  color: #eaf7f2;
}
.footer-title{
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
}
.footer-simple{
  background: #0b1a16;
  color: #cfe8df;
}
.footer-main{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.footer-brand-block{
  display: flex;
  align-items: center;
  gap: 1rem;
}
.footer-brand{
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 900;
  font-size: 1.1rem;
  color: #fff;
}
.footer-logo{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 8px 20px rgba(16,183,167,.3);
}
.footer-name{
  font-weight: 900;
  font-size: 1.2rem;
  color: #fff;
  margin: 0;
}
.footer-tagline{
  color: rgba(207,232,223,.8);
  font-size: .9rem;
  margin: 0;
}
.footer-links,
.footer-contact{
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.footer-links a,
.footer-contact a{
  color: rgba(234,247,242,.85);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.footer-links a:hover,
.footer-contact a:hover{
  color: var(--teal);
  transform: translateY(-1px);
}
.footer-contact i{
  margin-inline-end: .35rem;
  color: var(--teal);
}
.footer-meta{
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 2rem;
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  color: rgba(207,232,223,.75);
  font-size: .9rem;
}
.footer-credit{
  color: rgba(207,232,223,.8);
  font-weight: 600;
}
.footer-cta{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.2rem;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(16,183,167,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.footer-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(16,183,167,.3);
}
@media (max-width: 768px) {
  .footer-main,
  .footer-meta{
    text-align: center;
    justify-content: center;
  }
  .footer-brand-block{
    justify-content: center;
  }
}

/* =========================
   Utilities
   ========================= */
.shadow-soft{ box-shadow:var(--shadow) }
.text-center{ text-align: center; }
.mb-0{ margin-bottom: 0; }
.mb-1{ margin-bottom: 0.25rem; }
.mb-2{ margin-bottom: 0.5rem; }
.mb-3{ margin-bottom: 1rem; }
.mb-4{ margin-bottom: 1.5rem; }
.mb-5{ margin-bottom: 3rem; }
.fw-bold{ font-weight: 700; }
.d-flex{ display: flex; }
.align-items-center{ align-items: center; }
.justify-content-center{ justify-content: center; }
.justify-content-between{ justify-content: space-between; }
.gap-2{ gap: 0.5rem; }
.gap-3{ gap: 1rem; }
.gap-4{ gap: 1.5rem; }
.position-relative{ position: relative; }
.position-absolute{ position: absolute; }
.overflow-hidden{ overflow: hidden; }
.w-100{ width: 100%; }
.h-100{ height: 100%; }
.mx-auto{ margin-left: auto; margin-right: auto; }

/* Enhanced Container System */
.container{ 
  max-width: 1200px; margin: 0 auto; padding: 0 1rem;
  width: 100%;
}

/* Progressive Container Padding */
@media (min-width: 576px) {
  .container{ padding: 0 1.5rem; }
}
@media (min-width: 768px) {
  .container{ padding: 0 2rem; }
}
@media (min-width: 992px) {
  .container{ padding: 0 2.5rem; }
}
@media (min-width: 1200px) {
  .container{ padding: 0 3rem; }
}

/* Enhanced Spacing System */
.section-spacing-sm{ padding: 1.5rem 0; }
.section-spacing{ padding: 3rem 0; }
.section-spacing-lg{ padding: 4rem 0; }

@media (max-width: 768px) {
  .section-spacing-sm{ padding: 1rem 0; }
  .section-spacing{ padding: 2rem 0; }
  .section-spacing-lg{ padding: 2.5rem 0; }
}

@media (max-width: 576px) {
  .section-spacing-sm{ padding: 0.75rem 0; }
  .section-spacing{ padding: 1.5rem 0; }
  .section-spacing-lg{ padding: 2rem 0; }
}

/* Mobile-First Margins */
.mb-mobile-2{ margin-bottom: 1rem; }
.mb-mobile-3{ margin-bottom: 1.5rem; }
.mb-mobile-4{ margin-bottom: 2rem; }

@media (min-width: 768px) {
  .mb-mobile-2{ margin-bottom: 0.5rem; }
  .mb-mobile-3{ margin-bottom: 1rem; }
  .mb-mobile-4{ margin-bottom: 1.5rem; }
}

/* Bootstrap-like utilities */
.py-1{ padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2{ padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3{ padding-top: 1rem; padding-bottom: 1rem; }
.py-4{ padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5{ padding-top: 3rem; padding-bottom: 3rem; }

.px-1{ padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2{ padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3{ padding-left: 1rem; padding-right: 1rem; }
.px-4{ padding-left: 1.5rem; padding-right: 1.5rem; }

.p-1{ padding: 0.25rem; }
.p-2{ padding: 0.5rem; }
.p-3{ padding: 1rem; }
.p-4{ padding: 1.5rem; }

.bg-light{ background-color: var(--light) !important; }
.bg-primary{ background-color: var(--primary) !important; }
.bg-success{ background-color: #198754 !important; }
.bg-warning{ background-color: var(--warning) !important; }
.bg-danger{ background-color: var(--danger) !important; }
.bg-transparent{ background-color: transparent !important; }

.text-white{ color: #fff !important; }
.text-white-50{ color: rgba(255,255,255,.5) !important; }
.text-dark{ color: var(--dark) !important; }
.text-muted{ color: var(--muted) !important; }
.text-primary{ color: var(--primary) !important; }
.text-success{ color: #198754 !important; }
.text-warning{ color: var(--warning) !important; }
.text-danger{ color: var(--danger) !important; }
.text-secondary{ color: #6c757d !important; }

.border-bottom-0{ border-bottom: 0 !important; }
.border-top{ border-top: 1px solid var(--border) !important; }
.border-opacity-25{ border-color: rgba(255,255,255,.25) !important; }

.d-none{ display: none !important; }
.d-block{ display: block !important; }
.d-inline{ display: inline !important; }
.d-inline-block{ display: inline-block !important; }
.d-inline-flex{ display: inline-flex !important; }

.small{ font-size: 0.875rem; }
.fs-1{ font-size: 2.5rem; }
.fs-2{ font-size: 2rem; }
.fs-3{ font-size: 1.75rem; }
.fs-4{ font-size: 1.5rem; }
.fs-5{ font-size: 1.25rem; }
.fs-6{ font-size: 1rem; }

.sticky-top{ position: sticky; top: 0; z-index: 1020; }
.position-fixed{ position: fixed; }
.inset-0{ top: 0; right: 0; bottom: 0; left: 0; }

.opacity-0{ opacity: 0; }
.opacity-25{ opacity: 0.25; }
.opacity-50{ opacity: 0.5; }
.opacity-75{ opacity: 0.75; }
.opacity-100{ opacity: 1; }

.flex-wrap{ flex-wrap: wrap; }
.flex-column{ flex-direction: column; }

.order-lg-2{ order: 2; }
@media (max-width: 992px) {
  .order-lg-2{ order: 0; }
}

.g-3 > *{ padding: 0.75rem; }
.g-4 > *{ padding: 1rem; }

.ms-1{ margin-inline-start: 0.25rem; }
.ms-2{ margin-inline-start: 0.5rem; }
.ms-3{ margin-inline-start: 1rem; }
.me-1{ margin-inline-end: 0.25rem; }
.me-2{ margin-inline-end: 0.5rem; }
.me-3{ margin-inline-end: 1rem; }
.mt-2{ margin-top: 0.5rem; }
.mt-3{ margin-top: 1rem; }

.rounded{ border-radius: 0.375rem; }
.rounded-3{ border-radius: 0.75rem; }
.rounded-4{ border-radius: 1rem; }
.rounded-pill{ border-radius: 50rem; }
.rounded-circle{ border-radius: 50%; }

.text-decoration-none{ text-decoration: none; }
.text-decoration-underline{ text-decoration: underline; }

.btn-sm{ padding: 0.25rem 0.5rem; font-size: 0.875rem; }

/* Grid System */
.row{ 
  display: flex; flex-wrap: wrap; margin: -0.75rem;
}
.col-12{ width: 100%; padding: 0.75rem; }
.col-6{ width: 50%; padding: 0.75rem; }
.col-4{ width: 33.333%; padding: 0.75rem; }
.col-3{ width: 25%; padding: 0.75rem; }

@media (min-width: 768px) {
  .col-md-6{ width: 50%; }
  .col-md-4{ width: 33.333%; }
  .col-md-3{ width: 25%; }
}

@media (min-width: 992px) {
  .col-lg-6{ width: 50%; }
  .col-lg-4{ width: 33.333%; }
  .col-lg-3{ width: 25%; }
}

/* =========================
   Animations & Effects
   ========================= */
.reveal{ 
  opacity:0; transform: translateY(14px); 
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.reveal-visible{ opacity:1; transform: none; }

.ripple{
  position:absolute; border-radius:50%; transform: scale(0); 
  animation: ripple .6s linear; background: rgba(255,255,255,.35);
  pointer-events:none; inset:auto;
}
@keyframes ripple{
  to{ transform:scale(12); opacity:0 }
}

/* Enhanced Focus States & Accessibility */
:focus-visible{ 
  outline: none; 
  box-shadow: var(--ring); 
}
.navbar-brand:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.theme-toggle:focus-visible,
.lang-toggle:focus-visible,
.dropdown-item:focus-visible{
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Enhanced Touch Interactions */
@media (hover: none) and (pointer: coarse) {
  .nav-link{
    min-height: 48px;
    padding: 1rem 1.5rem;
  }
  .dropdown-item{
    min-height: 44px;
    padding: 1rem 1.2rem;
  }
  .navbar-toggler{
    min-width: 48px;
    min-height: 48px;
  }
  .theme-toggle, .lang-toggle{
    min-width: 48px;
    min-height: 48px;
  }
}

/* Keyboard Navigation Enhancements */
.navbar-nav .nav-link:focus-visible,
.dropdown-menu .dropdown-item:focus-visible{
  background: var(--grad-soft);
  color: var(--primary);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,174,239,.15);
}

/* Skip Navigation Link */
.skip-nav{
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 2000;
  transition: top 0.3s;
}
.skip-nav:focus{
  top: 6px;
}

/* Improved Active States */
.nav-link.active{
  position: relative;
  font-weight: 700;
}
.nav-link.active::before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: var(--primary);
  border-radius: 2px;
}

@media (max-width: 992px) {
  .nav-link.active::before{
    left: 50%;
    top: auto;
    bottom: 8px;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
  }
}
@media (prefers-reduced-motion: reduce){
  .navbar,
  .nav-link,
  .brand-mark,
  .theme-toggle,
  .lang-toggle,
  .navbar-toggler{
    transition: none !important;
    animation: none !important;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  .nav-link::after, .camp-img, .feature-card, .camp-card, 
  .stat, .hero .btn::after, .gallery-img, .feature-icon{ 
    transition: none;
  }
  .ticker span{ animation:none }
  .reveal{ opacity: 1; transform: none; }
}

/* =========================
   Enhanced Typography & Responsive Design
   ========================= */

/* Improved Typography Scaling */
.hero h1{
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  line-height: 1.2;
}
.section-title{
  font-size: clamp(1.4rem, 4vw, 2.5rem);
  line-height: 1.3;
}
.section-sub{
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  line-height: 1.6;
}
.hero p.lead{
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  line-height: 1.6;
}

/* Progressive Typography Scaling */
@media (max-width: 1200px) {
  .hero h1{ font-size: clamp(1.6rem, 4.5vw, 3rem); }
  .section-title{ font-size: clamp(1.3rem, 3.8vw, 2.2rem); }
  section{ padding: 3rem 0; }
}

@media (max-width: 992px) {
  .hero h1{ font-size: clamp(1.5rem, 5vw, 2.8rem); }
  .section-title{ font-size: clamp(1.25rem, 4.2vw, 2rem); }
  .section-sub{ font-size: clamp(0.85rem, 2.2vw, 1rem); }
  section{ padding: 2.5rem 0; }
  .feature-card{ padding: 1.75rem; }
  .btn{ padding: .7rem 1.3rem; font-size: .95rem; }
}

@media (max-width: 768px) {
  .hero h1{ font-size: clamp(1.4rem, 6vw, 2.5rem); }
  .section-title{ font-size: clamp(1.2rem, 5vw, 1.8rem); }
  .section-sub{ font-size: clamp(0.8rem, 2vw, 0.95rem); }
  .hero p.lead{ font-size: clamp(0.95rem, 2.5vw, 1.1rem); }
  section{ padding: 2rem 0; }
  .feature-card{ padding: 1.5rem; }
  .btn{ padding: .6rem 1.2rem; font-size: .9rem; }
  .navbar-brand{ font-size: 1.1rem; }
  .nav-link{ font-size: .9rem; padding: .7rem 1rem; }
}

@media (max-width: 576px) {
  .hero h1{ font-size: clamp(1.3rem, 7vw, 2.2rem); }
  .section-title{ font-size: clamp(1.1rem, 6vw, 1.6rem); }
  .section-sub{ font-size: clamp(0.75rem, 1.8vw, 0.9rem); }
  .hero p.lead{ font-size: clamp(0.9rem, 2.2vw, 1rem); }
  section{ padding: 1.5rem 0; }
  .feature-card{ padding: 1.25rem; }
  .btn{ padding: .55rem 1.1rem; font-size: .85rem; }
  .navbar-brand{ font-size: 1rem; }
  .nav-link{ font-size: .85rem; padding: .6rem .9rem; }
  .stat .num{ font-size: clamp(1.2rem, 4vw, 1.8rem); }
  .stat .label{ font-size: clamp(0.75rem, 1.5vw, 0.85rem); }
}

@media (max-width: 480px) {
  .hero h1{ font-size: clamp(1.2rem, 8vw, 2rem); }
  .section-title{ font-size: clamp(1rem, 7vw, 1.4rem); }
  .hero{ padding: 1rem 0; min-height: 50vh; }
  section{ padding: 1.25rem 0; }
  .feature-card{ padding: 1rem; }
  .btn{ padding: .5rem 1rem; font-size: .8rem; }
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
  .col-6{ width: 100%; }
  .col-4{ width: 50%; }
  .col-3{ width: 50%; }
}

@media (max-width: 576px) {
  .col-6, .col-4, .col-3{ width: 100%; }
  .hero{ min-height: 60vh; }
  .organization-activities .activity-stats{
    font-size: .8rem;
  }
  .contact-info-card, .contact-form-card{
    padding: 1.5rem !important;
  }
  .footer-stats-mini{
    gap: .5rem;
  }
  .developer-credit{
    text-align: center;
    margin-top: 1rem;
  }
  /* Better mobile card layouts */
  .feature-card{
    margin-bottom: 1rem;
  }
  .camp-card{
    margin-bottom: 1.5rem;
  }
  .stat{
    margin-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  .col-6, .col-4, .col-3, .col-2{ width: 100%; }
  .feature-card, .camp-card, .stat{
    margin-bottom: 1rem;
  }
}

/* Tablet Specific Optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
  .col-lg-4{ width: 50%; }
  .col-lg-3{ width: 50%; }
  .navbar-controls{
    gap: .75rem;
  }
  .container{
    padding: 0 1.5rem;
  }
  /* Better tablet spacing */
  .feature-card{
    padding: 2rem 1.5rem;
  }
  .camp-card{
    margin-bottom: 1.5rem;
  }
  .hero{
    min-height: 65vh;
  }
  section{
    padding: 2.5rem 0;
  }
}

/* Additional Mobile Layout Improvements */
@media (max-width: 576px) {
  /* Improved mobile card spacing */
  .row{
    margin: -0.5rem;
  }
  .col-12, .col-6, .col-4, .col-3{
    padding: 0.5rem;
  }
  /* Better mobile footer */
  .footer-main{
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }
  /* Mobile hero adjustments */
  .hero .content{
    padding: 1.5rem 1rem;
  }
  .eyebrow{
    padding: .3rem .8rem;
    font-size: .8rem;
  }
  /* Mobile navbar improvements */
  .navbar{
    padding: 0.5rem 0;
  }
  .brand-mark{
    width: 36px;
    height: 36px;
    margin-inline-end: .5rem;
  }
  .navbar-brand{
    font-size: .95rem;
  }
}

/* Ultra-small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
  .container{
    padding: 0 0.75rem;
  }
  .feature-card{
    padding: 0.75rem;
  }
  .btn{
    padding: .65rem 1.2rem;
    font-size: .8rem;
  }
  .ticker{
    max-width: 120px;
    font-size: .65rem;
  }
  .navbar{
    padding: 0.4rem 0;
  }
}
 <>
    /* =========================
       Design Tokens
       ========================= */
    :root{
      --hfg-blue:#00AEEF;
      --hfg-green:#8DC63F;
      --hfg-black:#000000;
      --primary:var(--hfg-blue);
      --primary-600:#0099d4;
      --teal:var(--hfg-green);
      --accent:var(--hfg-green);
      --dark:var(--hfg-black);
      --muted:#475569;
      --light:#F8FAFC;
      --surface:#ffffff;
      --border:#e5e7eb;
      --warning:#F59E0B;
      --danger:#EF4444;
      --shadow: 0 10px 28px rgba(16,24,40,.08);
      --ring: 0 0 0 3px rgba(0,174,239,.25);
      --grad: var(--hfg-blue);
      --grad-soft: rgba(0,174,239,.08);
    }
    [data-theme="dark"]{
      --dark:#E6EDF3;
      --muted:#A6B3C2;
      --light:#0b1321;
      --surface:#0f172a;
      --border:#1f2a44;
      --shadow: 0 10px 28px rgba(0,0,0,.35);
      --ring: 0 0 0 3px rgba(0,174,239,.35);
      --grad-soft: rgba(0,174,239,.18);
    }
    [data-theme="dark"] .lang-toggle{
      background: var(--surface); border-color: var(--primary); color: var(--primary);
    }
    [data-theme="dark"] .lang-toggle:hover{
      background: var(--primary); color: #fff;
    }
    [data-theme="dark"] .camp-tag{
      background: rgba(141,198,63,.15); border-color: var(--teal); color: var(--teal);
    }
    [data-theme="dark"] .camp-card:hover .camp-tag{
      background: var(--teal); color: var(--dark);
    }
    [data-theme="dark"] .story-overlay{
      background: linear-gradient(transparent, rgba(15,23,42,.9));
    }
    [data-theme="dark"] .progress{
      background: var(--border);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:var(--dark); background:var(--surface); line-height:1.8;
      accent-color: var(--primary);
    }
    a{ text-decoration:none }
    .container-narrow{max-width:980px}
    img{max-width:100%;height:auto}

    /* =========================
       Topbar + News Ticker
       ========================= */
    .topbar{background:var(--primary); color:#fff; font-size:.95rem}
    .topbar a{ color:#fff; }
    .btn-donate{
      background:#fff;color:var(--primary);border-radius:999px;padding:.35rem .9rem;font-weight:800
    }
    /* =========================
       Hero (Parallax + Shine)
       ========================= */
    header.hero{
      position:relative;min-height:76vh;display:grid;place-items:center;color:#fff;text-align:center;overflow:hidden;background:#123;
      isolation:isolate;
    }
    .hero::before{
      content:"";position:absolute;inset:0;
      background:url('https://images.unsplash.com/photo-1524253482453-3fed8d2fe12b?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat;
      filter:brightness(.55);
      transform: translateY(var(--pY,0px));
      will-change: transform;
      transition: transform .2s linear;
    }
    .hero::after{
      content:"";position:absolute;inset:0; pointer-events:none;
      background: rgba(0,174,239,.4);
      mix-blend-mode:screen;
    }
    .hero .content{ position:relative; z-index:2; padding:2rem 1rem; }
    .eyebrow{
      display:inline-flex;gap:.5rem;align-items:center;background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.35rem .9rem;font-weight:800;backdrop-filter: blur(6px);
    }
    .hero h1{
      font-weight:900; margin:1rem 0 .75rem; font-size:clamp(1.6rem,4vw,3rem);
      background: linear-gradient(90deg,#fff, #e9fffa 30%, #d6fff6); -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .hero p.lead{ color:#eef; max-width:900px; margin:0 auto 1.25rem }
    .hero .btn{ padding:.9rem 1.25rem; font-weight:800; border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.18); position:relative; overflow:hidden }
    .hero .btn::after{
      content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.2) 20%, transparent 40%);
      transform: translateX(-120%); transition: transform .6s ease;
    }
    .hero .btn:hover::after{ transform: translateX(120%) }

    /* =========================
       Sections / Headings
       ========================= */
    section{scroll-margin-top:90px}
    .section-title{ font-weight:900; font-size:clamp(1.3rem,3vw,2rem) }
    .section-sub{ color:var(--muted) }

    /* =========================
       Cards & Features
       ========================= */
    .feature-card{
      border:1px solid var(--border); border-radius:18px; background:var(--surface); height:100%; transition:.28s ease;
      background-image: var(--grad-soft);
    }
    .feature-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
    .feature-icon{
      width:54px;height:54px;display:grid;place-items:center;border-radius:14px;
      background:var(--primary);
      border:1px solid var(--border); color:#fff; 
      box-shadow: 0 8px 20px rgba(16,183,167,.25);
      transition: all .3s ease;
    }
    .feature-icon:hover{
      transform: translateY(-2px) scale(1.05);
      box-shadow: 0 12px 28px rgba(16,183,167,.35);
    }
    .feature-icon i{
      font-size: 1.2rem;
      transition: transform .3s ease;
    }
    .feature-icon:hover i{
      transform: scale(1.1);
    }

    /* =========================
       Stats
       ========================= */
    .stat{ border:1px dashed var(--border); border-radius:16px; background: var(--light); padding:1.25rem; text-align:center; transition:.25s }
    .stat:hover{ transform: translateY(-4px); box-shadow: var(--shadow) }
    .stat .num{ font-weight:900; font-size:clamp(1.4rem,3.2vw,2.2rem); color:var(--primary) }
    .stat .label{ color:var(--muted); font-weight:700 }

    /* =========================
       Campaigns (Enhanced)
       ========================= */
    .camp-card{ 
      border:1px solid var(--border); border-radius:20px; overflow:hidden; 
      background:var(--surface); height:100%; transition:all .35s ease;
      box-shadow: 0 4px 12px rgba(16,183,167,.08);
      position:relative;
    }
    .camp-card::before{
      content:""; position:absolute; inset:0; z-index:-1;
      background:var(--grad-soft); opacity:0; transition:opacity .35s ease;
    }
    .camp-card:hover{ 
      transform: translateY(-8px) scale(1.02); 
      box-shadow: 0 12px 32px rgba(16,183,167,.15);
      border-color:var(--primary);
    }
    .camp-card:hover::before{ opacity:1 }
    .camp-img{ 
      aspect-ratio:16/9; object-fit:cover; width:100%; 
      transition: transform .5s ease;
      border-radius:16px 16px 0 0;
    }
    .camp-card:hover .camp-img{ transform: scale(1.08) }
    .camp-tag{ 
      font-size:.75rem; border:1px solid var(--primary); 
      padding:.3rem .7rem; border-radius:999px; 
      color:var(--primary); background:rgba(10,122,92,.08);
      font-weight:600; transition:all .25s ease;
    }
    .camp-card:hover .camp-tag{ 
      background:var(--primary); color:#fff; transform:scale(1.05);
    }
    .progress{ 
      height:12px; background:var(--light); border-radius:6px;
      box-shadow:inset 0 2px 4px rgba(0,0,0,.08);
    }
    .progress-bar{ border-radius:6px; transition:width .8s ease }
    .campaign-stats{ 
      display:flex; justify-content:space-between; align-items:center;
      font-size:.85rem; font-weight:600;
    }
    .campaign-btn{
      border-radius:12px; font-weight:700; padding:.6rem 1.2rem;
      transition:all .25s ease; position:relative; overflow:hidden;
    }
    .campaign-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(10,122,92,.3) }

    /* =========================
       Steps / Quotes
       ========================= */
    .step{ display:flex; gap:.9rem; align-items:flex-start; border-bottom:1px dashed var(--border); padding:1rem 0 }
    .step:last-child{ border-bottom:0 }
    .step .badge{ background:var(--light); color:var(--primary); border:1px solid var(--border); font-weight:800 }
    .quote{ background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:1rem 1.25rem; position:relative }
    .quote i{ color: var(--warning) }

    /* =========================
       Partners
       ========================= */
    .partner{ height:44px; filter: grayscale(.8) opacity(.85); transition:.25s ease }
    .partner:hover{ filter:none; transform: translateY(-3px) }

    /* =========================
       Forms / Buttons / Utilities
       ========================= */
    .contact-card{ border:1px solid var(--border); border-radius:18px; background:var(--surface) }
    .form-control, .form-select{ border-radius:12px }
    .btn{ border-width:2px; transition: transform .06s ease }
    .btn:active{ transform: translateY(1px) scale(.99) }
    .btn-primary{ background:var(--primary); border-color:var(--primary) }
    .btn-primary:hover{ background:var(--primary-600); border-color:var(--primary-600) }
    .btn-outline-light{ border-width:2px }

    /* Ripple */
    .btn, .feature-card, .camp-card{ position:relative; overflow:hidden }
    .ripple{
      position:absolute; border-radius:50%; transform: scale(0); animation: ripple .6s linear; background: rgba(255,255,255,.35);
      pointer-events:none; inset:auto;
    }
    @keyframes ripple{
      to{ transform:scale(12); opacity:0 }
    }

    /* Focus ring واضح */
    :focus-visible{ outline: none; box-shadow: var(--ring) }

    /* =========================
       FAQ / Footer
       ========================= */
    .accordion-button{ font-weight:700 }

    /* =========================
       Floating donate
       ========================= */
    .floating-donate{
      position:fixed;bottom:20px;inset-inline-start:20px;z-index:1050;width:56px;height:56px;border-radius:50%;
      display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:var(--shadow);cursor:pointer
    }
    .floating-donate:hover{ transform:translateY(-2px) }

    /* =========================
       Reveal on Scroll
       ========================= */
    .reveal{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease }
    .reveal.reveal-visible{ opacity:1; transform: none }

    /* Success Stories & Gallery */
    .success-story-card, .gallery-item{
      transition: all .35s ease; cursor: pointer; position: relative;
    }
    .success-story-card:hover, .gallery-item:hover{
      transform: translateY(-4px) scale(1.02);
      box-shadow: 0 15px 40px rgba(16,183,167,.2);
    }
    .story-overlay, .gallery-overlay{
      background: linear-gradient(transparent, rgba(0,0,0,.8));
      backdrop-filter: blur(8px);
      transition: opacity .3s ease;
    }
    .gallery-item:hover .gallery-overlay{
      opacity: 1 !important;
    }
    .story-badge{
      font-size: .75rem; font-weight: 600;
      box-shadow: 0 4px 12px rgba(0,0,0,.3);
    }
    .gallery-img{
      transition: transform .5s ease;
    }
    .gallery-item:hover .gallery-img{
      transform: scale(1.1);
    }
    
    /* Utility */
    .shadow-soft{ box-shadow:var(--shadow) }

    /* Motion safety */
    @media (prefers-reduced-motion: reduce){
      .nav-link::after, .camp-img, .feature-card, .camp-card, .stat, .hero .btn::after{ transition: none }
    }
    a.dropdown-item {
      text-align: start;
    }