/* ==========================================================
   ACTD — Modern design system, built around the brand logo's
   teal palette. Rich gradients, glass surfaces, motion, and a
   fully responsive layout from mobile up.
   ========================================================== */
:root{
  --brand-primary:#03898A;
  --brand-primary-light:#0FADA0;
  --brand-primary-dark:#02585C;
  --brand-ink:#08262A;
  --brand-accent:#F2A93B;
  --brand-accent-dark:#D68C1F;
  --brand-rose:#F0664A;
  --surface:#ffffff;
  --surface-soft:#F3F9F8;
  --surface-tint:#EAF6F4;
  --text-body:#324442;
  --text-muted:#6C817E;
  --border-soft:rgba(8,38,42,.08);
  --radius-sm:10px;
  --radius:18px;
  --radius-lg:28px;
  --shadow-sm:0 4px 16px rgba(3,45,47,.08);
  --shadow-md:0 16px 40px rgba(3,45,47,.14);
  --shadow-lg:0 30px 70px rgba(3,45,47,.20);
  --gradient-brand:linear-gradient(135deg,#02585C 0%,#03898A 55%,#0FADA0 100%);
  --gradient-warm:linear-gradient(135deg,#F2A93B 0%,#F0664A 100%);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text-body);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.brand-text,.font-heading{
  font-family:'Poppins',system-ui,sans-serif;
}
a{ text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--brand-primary); color:#fff; }

/* ---------- Section rhythm ---------- */
.section-title{
  font-weight:800;
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  color:var(--brand-ink);
  margin-bottom:.6rem;
  letter-spacing:-.02em;
}
.section-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brand-primary);
  background:var(--surface-tint);
  padding:.4rem 1rem;
  border-radius:50px;
  margin-bottom:1rem;
}
.section-eyebrow::before{ content:'●'; font-size:.55rem; color:var(--brand-accent); }
.section-subtitle{
  color:var(--text-muted);
  margin-bottom:2.75rem;
  font-size:1.08rem;
  max-width:640px;
}
.text-center .section-subtitle{ margin-left:auto; margin-right:auto; }
.section-pad{ padding:6rem 0; }
.section-pad-sm{ padding:3.5rem 0; }
.bg-soft{ background:var(--surface-soft); position:relative; }
.bg-ink{ background:var(--brand-ink); color:#fff; }

/* ---------- Buttons ---------- */
.btn-brand{
  background:var(--gradient-brand);
  background-size:160% 160%;
  border:none;
  color:#fff;
  font-weight:600;
  padding:.8rem 1.9rem;
  border-radius:50px;
  transition:.25s ease;
  box-shadow:0 10px 26px rgba(3,137,138,.28);
}
.btn-brand:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(3,137,138,.36); color:#fff; background-position:100% 0; }
.btn-outline-brand{
  border:2px solid var(--brand-primary);
  color:var(--brand-primary);
  font-weight:600;
  border-radius:50px;
  padding:.7rem 1.8rem;
  background:transparent;
  transition:.2s ease;
}
.btn-outline-brand:hover{ background:var(--brand-primary); color:#fff; transform:translateY(-2px); }
.btn-donate{
  background:var(--gradient-warm);
  color:#2c1503;
  font-weight:700;
  border-radius:50px;
  padding:.6rem 1.5rem;
  border:none;
  box-shadow:0 8px 20px rgba(240,102,74,.28);
  transition:.2s ease;
}
.btn-donate:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(240,102,74,.36); color:#2c1503; }
.btn-outline-light{ border-width:2px; font-weight:600; transition:.2s ease; }
.btn-outline-light:hover{ transform:translateY(-2px); }

/* ---------- Header / nav ---------- */
.site-header{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--border-soft);
  transition:.25s ease;
}
.site-header.scrolled{ background:rgba(255,255,255,.96); box-shadow:var(--shadow-sm); }
.navbar{ padding:.7rem 0; }
.brand-logo{ height:46px; width:auto; }
.brand-mark{ font-size:1.8rem; }
.brand-text{ font-weight:800; font-size:1.3rem; color:var(--brand-ink); letter-spacing:-.01em; }
.nav-link{
  font-weight:600; font-size:.94rem; color:var(--text-body) !important;
  padding:.55rem 1rem !important; position:relative;
}
.nav-link::after{
  content:''; position:absolute; left:1rem; right:1rem; bottom:.25rem; height:2px;
  background:var(--brand-primary); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.nav-link.active::after,.nav-link:hover::after{ transform:scaleX(1); }
.nav-link.active,.nav-link:hover{ color:var(--brand-primary) !important; }
.dropdown-menu{ border:none; border-radius:14px; box-shadow:var(--shadow-md); padding:.6rem; }
.dropdown-item{ border-radius:8px; padding:.55rem .9rem; font-weight:500; }
.dropdown-item:hover{ background:var(--surface-tint); color:var(--brand-primary); }

/* ---------- Hero ---------- */
.hero-section{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;
  background:var(--hero-bg, var(--gradient-brand));
  background-size:cover;
  background-position:center;
}
.hero-section::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(2,40,42,.90), rgba(3,137,138,.72));
  z-index:1;
}
.hero-section::after{
  content:'';
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(242,169,59,.28), transparent 70%);
  top:-180px; right:-160px; z-index:1; pointer-events:none;
}
.hero-blob{
  position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(15,173,160,.35), transparent 70%);
  bottom:-160px; left:-120px; z-index:1; pointer-events:none;
}
.hero-section .hero-content{ position:relative; z-index:2; max-width:840px; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  padding:.45rem 1.1rem; border-radius:50px; font-size:.82rem; font-weight:600;
  margin-bottom:1.5rem; backdrop-filter:blur(6px);
}
.hero-title{
  font-family:'Poppins',sans-serif; font-weight:800;
  font-size:clamp(2.3rem,5.4vw,3.9rem); line-height:1.12; margin-bottom:1.4rem;
  letter-spacing:-.02em;
}
.hero-title span{ display:block; }
.hero-title span:last-child{ color:var(--brand-accent); }
.hero-subtitle{ font-size:1.22rem; opacity:.92; margin-bottom:2.2rem; max-width:640px; line-height:1.6; }
.hero-stats{ display:flex; flex-wrap:wrap; gap:2.5rem; margin-top:3rem; position:relative; z-index:2; }
.hero-stats .stat-num{ font-family:'Poppins',sans-serif; font-weight:800; font-size:2rem; color:#fff; }
.hero-stats .stat-label{ font-size:.85rem; opacity:.8; }
.hero-scroll-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  z-index:2; color:rgba(255,255,255,.75); font-size:1.4rem; animation:bounce 2s infinite;
}
@keyframes bounce{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,10px);} }

/* ---------- Cards / grids ---------- */
.value-card,.area-card,.info-card,.project-card,.news-card,.team-card,.partner-card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:1.9rem;
  height:100%;
  transition:.28s cubic-bezier(.2,.8,.2,1);
  border:1px solid var(--border-soft);
}
.value-card:hover,.area-card:hover,.project-card:hover,.news-card:hover,.team-card:hover{
  box-shadow:var(--shadow-md); transform:translateY(-6px);
  border-color:transparent;
}
.card-icon{
  font-size:1.7rem; margin-bottom:1rem;
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-tint); border-radius:14px;
}
.value-card:hover .card-icon,.area-card:hover .card-icon{ background:var(--gradient-brand); transform:scale(1.06) rotate(-4deg); }

.mission-card{
  background:var(--gradient-brand);
  color:#fff;
  border-radius:var(--radius-lg);
  padding:2.5rem;
  height:100%;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.mission-card::after{
  content:''; position:absolute; width:220px; height:220px; border-radius:50%;
  background:rgba(255,255,255,.08); top:-80px; right:-80px;
}
.mission-card .mission-icon{
  font-size:1.6rem; margin-bottom:1.1rem; width:52px; height:52px;
  background:rgba(255,255,255,.15); border-radius:12px; display:flex; align-items:center; justify-content:center;
}
.mission-card h3{ font-weight:700; margin-bottom:1rem; }

/* ---------- Empower tabs ---------- */
.empower-tab{
  width:100%; text-align:left; background:var(--surface);
  border:1px solid var(--border-soft); border-radius:14px;
  padding:1.1rem 1.4rem; font-weight:700; margin-bottom:.7rem;
  display:flex; justify-content:space-between; align-items:center;
  color:var(--brand-ink); transition:.2s ease;
}
.empower-tab:hover{ border-color:var(--brand-primary); }
.empower-tab.active{ background:var(--gradient-brand); color:#fff; border-color:transparent; box-shadow:var(--shadow-sm); }
.empower-tab-content{ padding:1.4rem 0 .5rem; }
.empower-tab-content img{ border-radius:var(--radius); margin-bottom:1.2rem; width:100%; object-fit:cover; max-height:300px; }

/* ---------- Progress ---------- */
.progress-bar-track{ height:9px; background:var(--surface-tint); border-radius:20px; overflow:hidden; }
.progress-bar-fill{ height:100%; background:var(--gradient-warm); border-radius:20px; }

/* ---------- Gallery ---------- */
.gallery-thumb{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); position:relative; aspect-ratio:4/3; }
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.gallery-thumb:hover img{ transform:scale(1.08); }
.video-frame{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:16/9; }
.video-frame iframe{ width:100%; height:100%; border:0; }

/* ---------- News ---------- */
.news-card-image{ border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; aspect-ratio:16/10; }
.news-card-image img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.news-card:hover .news-card-image img{ transform:scale(1.05); }
.news-card{ padding:0; overflow:hidden; }
.news-card .news-card-body{ padding:1.6rem; }
.news-date{ color:var(--brand-primary); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; }

/* ---------- Donate ---------- */
.amount-btn{
  border:2px solid var(--border-soft); background:var(--surface);
  border-radius:12px; padding:.75rem; font-weight:700; color:var(--brand-ink);
  transition:.2s ease;
}
.amount-btn.active,.amount-btn:hover{ border-color:var(--brand-primary); color:var(--brand-primary); background:var(--surface-tint); }
.frequency-btn{ border:none; background:var(--surface-tint); padding:.65rem 1.5rem; border-radius:50px; font-weight:700; transition:.2s ease; }
.frequency-btn.active{ background:var(--gradient-brand); color:#fff; }

.info-icon{
  font-size:1.5rem; width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-tint); border-radius:12px; margin-bottom:.25rem;
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--brand-ink); color:#bfd8d5; padding:5rem 0 1.75rem; margin-top:5rem; position:relative; overflow:hidden; }
.site-footer::before{
  content:''; position:absolute; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(3,137,138,.18), transparent 70%);
  top:-220px; right:-160px;
}
.footer-brand{ color:#fff; font-weight:800; margin-bottom:1rem; font-size:1.3rem; }
.footer-heading{ color:#fff; font-weight:700; margin-bottom:1.1rem; font-size:1rem; }
.footer-text{ color:#9fc0bc; font-size:.95rem; line-height:1.7; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:.6rem; }
.footer-links a{ color:#9fc0bc; transition:.2s; }
.footer-links a:hover{ color:#fff; padding-left:4px; }
.social-links{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.25rem; }
.social-link{
  display:flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.08); border-radius:50px; padding:.45rem .9rem .45rem .5rem;
  color:#dff2f0; transition:.2s ease; text-decoration:none;
}
.social-icon{
  width:32px; height:32px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); border-radius:50%;
}
.social-username{ font-size:.85rem; font-weight:600; white-space:nowrap; }
.social-link:hover{ background:var(--brand-primary); color:#fff; transform:translateY(-3px); }
.social-link:hover .social-icon{ background:rgba(255,255,255,.2); }
.footer-inline-link{ color:inherit; text-decoration:underline; text-decoration-color:rgba(255,255,255,.3); transition:.2s ease; }
.footer-inline-link:hover{ color:#fff; text-decoration-color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:3rem; padding-top:1.75rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; font-size:.85rem; color:#7fa19d;
  position:relative;
}
.footer-bottom a{ color:#a9cac6; font-weight:600; }
.footer-bottom a:hover{ color:#fff; }

/* ---------- Floating contact buttons ---------- */
.floating-contact{
  position:fixed; right:22px; bottom:22px; z-index:1050;
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
.floating-btn{
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:var(--shadow-lg); transition:.2s ease; animation:floatPulse 2.6s ease-in-out infinite;
}
.floating-btn:hover{ transform:scale(1.08); color:#fff; animation-play-state:paused; }
.floating-whatsapp{ background:#25D366; }
.floating-telegram{ background:#229ED9; }
@keyframes floatPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,0), var(--shadow-lg); }
  50%{ box-shadow:0 0 0 8px rgba(255,255,255,.08), var(--shadow-lg); }
}
@media (max-width:576px){
  .floating-contact{ right:14px; bottom:14px; gap:10px; }
  .floating-btn{ width:50px; height:50px; }
}

/* ---------- Utilities ---------- */
.badge-soft{ background:var(--surface-tint); color:var(--brand-primary); font-weight:700; padding:.45rem 1rem; border-radius:50px; font-size:.78rem; }
.avatar-circle{ width:130px; height:130px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow-sm); border:4px solid var(--surface-tint); }
.rounded-img{ border-radius:var(--radius); }
.shadow-soft{ box-shadow:var(--shadow-md); }
.text-brand{ color:var(--brand-primary); }

/* Decorative blob backgrounds for sections */
.bg-soft::before{
  content:''; position:absolute; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(3,137,138,.06), transparent 70%);
  top:-100px; left:-120px; pointer-events:none;
}
.bg-soft > .container{ position:relative; z-index:1; }

/* Fade-in-on-scroll (progressive enhancement, safe if JS absent) */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (max-width:991.98px){
  .hero-section{ min-height:auto; padding:7rem 0 5rem; text-align:center; }
  .hero-section .hero-content{ margin:0 auto; }
  .hero-stats{ justify-content:center; }
  .section-pad{ padding:4rem 0; }
}
@media (max-width:575.98px){
  .hero-title{ font-size:2rem; }
  .section-title{ font-size:1.6rem; }
}