/* ============================================================
   CONSCIOUS FAMILY CENTRE — style.css
   ============================================================ */

:root {
  --gd: #1F6B3A;
  --gm: #2d8a4e;
  --gl: #4CAF50;
  --ye: #F4C542;
  --or: #F28C28;
  --pk: #E94E77;
  --pu: #BE44AD;
  --bl: #3498DB;
  --wh: #FFFFFF;
  --gr: #F5F5F5;
  --tx: #333333;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; color: var(--tx); overflow-x: hidden; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #e8f5e9; }
::-webkit-scrollbar-thumb { background: var(--gl); border-radius: 3px; }

/* ===== NAV ===== */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 14px 44px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all 0.4s;
}
nav.scrolled {
  background: rgba(10, 30, 16, 0.96);
  backdrop-filter: blur(20px);
  padding: 10px 44px;
  box-shadow: 0 3px 24px rgba(0,0,0,0.28);
}
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo img {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: white;
  padding: 3px;
  box-shadow: 0 0 18px rgba(76,175,80,0.45);
  transition: box-shadow 0.3s;
  flex-shrink: 0;
}
.nav-logo img:hover { box-shadow: 0 0 30px rgba(76,175,80,0.75); }
.nav-logo-text {
  font-weight: 700; font-size: 0.82rem; line-height: 1.25;
  color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.nav-links { display: flex; gap: 5px; list-style: none; }
.nav-links a {
  color: rgba(255,255,255,0.85); text-decoration: none;
  font-size: 0.83rem; font-weight: 500;
  padding: 7px 15px; border-radius: 50px; transition: all 0.3s;
}
.nav-links a:hover { background: rgba(76,175,80,0.22); color: #fff; }
.nav-cta { background: var(--gl) !important; color: white !important; font-weight: 600 !important; }
.nav-cta:hover { background: var(--gd) !important; transform: translateY(-1px); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; z-index: 1001; }
.hamburger span { width: 24px; height: 2px; background: white; border-radius: 2px; transition: all 0.3s; }

/* ===== HERO ===== */
#home {
  position: relative; height: 100vh; min-height: 680px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.bg-base {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(144,238,144,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 10% 50%, rgba(31,107,58,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 60% 80% at 90% 50%, rgba(244,197,66,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(15,55,25,0.5) 0%, transparent 70%),
    linear-gradient(170deg, #061a0a 0%, #0d3018 25%, #143d20 50%, #0f2d16 75%, #071510 100%);
}
.ray {
  position: absolute; top: -10%; left: 50%;
  width: 2px; height: 110%;
  transform-origin: top center;
  opacity: 0;
  animation: rayAnim 8s ease-in-out infinite;
}
.ray:nth-child(1) { background: linear-gradient(to bottom, rgba(255,240,180,0.18), transparent); transform: rotate(-25deg); animation-delay: 0s; }
.ray:nth-child(2) { background: linear-gradient(to bottom, rgba(255,240,180,0.14), transparent); transform: rotate(-12deg); width: 3px; animation-delay: 1.2s; }
.ray:nth-child(3) { background: linear-gradient(to bottom, rgba(255,240,180,0.12), transparent); transform: rotate(0deg); width: 4px; animation-delay: 2.4s; }
.ray:nth-child(4) { background: linear-gradient(to bottom, rgba(255,240,180,0.14), transparent); transform: rotate(12deg); width: 3px; animation-delay: 3.6s; }
.ray:nth-child(5) { background: linear-gradient(to bottom, rgba(255,240,180,0.18), transparent); transform: rotate(25deg); animation-delay: 4.8s; }
@keyframes rayAnim { 0%,100%{ opacity:0; } 30%,70%{ opacity:1; } }

.bokeh-wrap { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bk { position: absolute; border-radius: 50%; filter: blur(40px); animation: bkFloat linear infinite; }
.bk1 { width:280px;height:280px;background:rgba(76,175,80,0.07);top:10%;left:-5%;animation-duration:28s;animation-delay:0s; }
.bk2 { width:200px;height:200px;background:rgba(244,197,66,0.06);top:5%;right:-5%;animation-duration:22s;animation-delay:-8s; }
.bk3 { width:320px;height:320px;background:rgba(52,152,219,0.05);bottom:20%;right:5%;animation-duration:32s;animation-delay:-15s; }
.bk4 { width:180px;height:180px;background:rgba(190,68,173,0.04);bottom:30%;left:8%;animation-duration:25s;animation-delay:-5s; }
.bk5 { width:150px;height:150px;background:rgba(242,140,40,0.05);top:40%;left:40%;animation-duration:20s;animation-delay:-12s; }
@keyframes bkFloat {
  0%   { transform: translateY(0) scale(1); }
  33%  { transform: translateY(-30px) scale(1.05); }
  66%  { transform: translateY(20px) scale(0.96); }
  100% { transform: translateY(0) scale(1); }
}

.leaf-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lf {
  position: absolute; width: 10px; height: 6px;
  border-radius: 50% 50% 50% 0; opacity: 0;
  animation: leafFall linear infinite;
}
.lf:nth-child(1)  { background:#4CAF50; left:8%;  animation-duration:12s; animation-delay:0s;   width:11px;height:7px; }
.lf:nth-child(2)  { background:#F4C542; left:18%; animation-duration:15s; animation-delay:-3s; }
.lf:nth-child(3)  { background:#F28C28; left:30%; animation-duration:11s; animation-delay:-6s;  width:8px;height:5px; }
.lf:nth-child(4)  { background:#E94E77; left:45%; animation-duration:14s; animation-delay:-2s; }
.lf:nth-child(5)  { background:#BE44AD; left:60%; animation-duration:13s; animation-delay:-8s;  width:9px;height:6px; }
.lf:nth-child(6)  { background:#3498DB; left:72%; animation-duration:16s; animation-delay:-4s; }
.lf:nth-child(7)  { background:#7dde81; left:85%; animation-duration:10s; animation-delay:-1s;  width:12px;height:7px; }
.lf:nth-child(8)  { background:#F4C542; left:93%; animation-duration:18s; animation-delay:-9s; }
.lf:nth-child(9)  { background:#4CAF50; left:3%;  animation-duration:13s; animation-delay:-7s;  width:8px; }
.lf:nth-child(10) { background:#F28C28; left:55%; animation-duration:11s; animation-delay:-5s; }
.lf:nth-child(11) { background:#E94E77; left:38%; animation-duration:17s; animation-delay:-11s; width:10px; }
.lf:nth-child(12) { background:#7dde81; left:25%; animation-duration:14s; animation-delay:-13s; }
@keyframes leafFall {
  0%   { top:-5%;  opacity:0; transform:rotate(0deg) translateX(0); }
  5%   { opacity:0.85; }
  80%  { opacity:0.7; }
  100% { top:105%; opacity:0; transform:rotate(540deg) translateX(60px); }
}

.ff-layer { position: absolute; inset: 0; pointer-events: none; }
.ff {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #b2f5b5;
  box-shadow: 0 0 8px 3px rgba(130,240,140,0.6);
  animation: ffGlow ease-in-out infinite, ffMove linear infinite;
}
.ff:nth-child(1){top:30%;left:15%;animation-duration:3s,18s;animation-delay:0s,-2s;}
.ff:nth-child(2){top:50%;left:80%;animation-duration:4s,22s;animation-delay:-1s,-8s;}
.ff:nth-child(3){top:65%;left:35%;animation-duration:3.5s,20s;animation-delay:-2s,-4s;}
.ff:nth-child(4){top:40%;left:60%;animation-duration:5s,25s;animation-delay:-0.5s,-12s;}
.ff:nth-child(5){top:20%;left:50%;animation-duration:4s,16s;animation-delay:-3s,-6s;}
.ff:nth-child(6){top:70%;left:70%;animation-duration:3s,21s;animation-delay:-1.5s,-3s;}
.ff:nth-child(7){top:55%;left:20%;animation-duration:6s,19s;animation-delay:-2.5s,-10s;}
.ff:nth-child(8){top:25%;left:90%;animation-duration:4.5s,24s;animation-delay:-0.8s,-7s;}
@keyframes ffGlow {
  0%,100%{ opacity:0.1; box-shadow:0 0 3px 1px rgba(130,240,140,0.2); }
  50%    { opacity:1;   box-shadow:0 0 14px 5px rgba(130,240,140,0.7); }
}
@keyframes ffMove {
  0%  { transform:translate(0,0); }
  25% { transform:translate(40px,-30px); }
  50% { transform:translate(-20px,50px); }
  75% { transform:translate(60px,20px); }
  100%{ transform:translate(0,0); }
}

.ground-glow {
  position: absolute; bottom: 0; left: 0; right: 0; height: 35%;
  background: linear-gradient(to top, rgba(5,20,10,0.9) 0%, rgba(10,40,18,0.6) 40%, transparent 100%);
}
.mist {
  position: absolute; bottom: 18%; left: 0; right: 0; height: 80px;
  background: linear-gradient(to top, rgba(130,200,150,0.06), transparent);
  filter: blur(8px);
  animation: mistDrift 12s ease-in-out infinite alternate;
}
@keyframes mistDrift { 0%{ transform:translateX(-20px) scaleX(1); } 100%{ transform:translateX(20px) scaleX(1.04); } }

.stars-layer { position: absolute; top: 0; left: 0; right: 0; height: 55%; pointer-events: none; }
.star {
  position: absolute; width: 2px; height: 2px;
  background: white; border-radius: 50%;
  animation: starTwinkle ease-in-out infinite;
}
@keyframes starTwinkle { 0%,100%{ opacity:0.15; } 50%{ opacity:0.7; } }

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(4,16,8,0.45) 0%, rgba(8,28,14,0.25) 40%, rgba(4,16,8,0.55) 100%);
}

.hero-content {
  position: relative; z-index: 10; text-align: center;
  max-width: 820px; padding: 0 22px;
  animation: fadeUp 1.1s ease both;
}
@keyframes fadeUp { from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:translateY(0); } }

.hero-badge {
  display: inline-block;
  background: rgba(76,175,80,0.16); border: 1px solid rgba(76,175,80,0.42);
  color: #8ee892; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 2.2px; text-transform: uppercase;
  padding: 7px 20px; border-radius: 50px; margin-bottom: 22px;
  backdrop-filter: blur(10px);
  animation: fadeUp 1.1s ease 0.15s both;
}
.hero-title {
  font-size: clamp(2.3rem,6vw,4.3rem); font-weight: 900; color: white;
  line-height: 1.1; margin-bottom: 18px;
  text-shadow: 0 3px 20px rgba(0,0,0,0.5);
  animation: fadeUp 1.1s ease 0.28s both;
}
.ay { color: var(--ye); }
.ag { color: #7dde81; }
.hero-sub {
  font-size: clamp(0.95rem,2vw,1.13rem); color: rgba(255,255,255,0.82);
  line-height: 1.76; margin-bottom: 36px; font-weight: 300;
  animation: fadeUp 1.1s ease 0.4s both;
}
.hero-btns {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  animation: fadeUp 1.1s ease 0.5s both;
}
.btn-p {
  background: var(--gl); color: white; padding: 14px 32px;
  border-radius: 50px; font-weight: 700; font-size: 0.92rem;
  text-decoration: none; transition: all 0.3s;
  box-shadow: 0 8px 28px rgba(76,175,80,0.38);
}
.btn-p:hover { background: #3da040; transform: translateY(-2px); box-shadow: 0 12px 38px rgba(76,175,80,0.52); }
.btn-s {
  background: rgba(255,255,255,0.1); color: white; padding: 14px 32px;
  border-radius: 50px; font-weight: 600; font-size: 0.92rem;
  text-decoration: none; transition: all 0.3s;
  backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.22);
}
.btn-s:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }

.hero-scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: bounce 2s infinite;
}
.hero-scroll span { font-size: 0.62rem; color: rgba(255,255,255,0.42); letter-spacing: 2px; text-transform: uppercase; }
.scroll-line { width: 1px; height: 36px; background: linear-gradient(to bottom, rgba(255,255,255,0.42), transparent); }
@keyframes bounce {
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(8px); }
}

/* ===== SHARED ===== */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.68s ease,transform 0.68s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.rd1{transition-delay:0.1s;} .rd2{transition-delay:0.2s;} .rd3{transition-delay:0.3s;} .rd4{transition-delay:0.4s;}
.sl { display:inline-flex; align-items:center; gap:8px; font-size:0.7rem; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:12px; }
.ld { width:8px; height:8px; border-radius:50%; display:inline-block; }
.st { font-size:clamp(1.85rem,4vw,2.7rem); font-weight:800; line-height:1.14; margin-bottom:14px; }

/* ===== ABOUT ===== */
#about { background: var(--gr); padding: 76px 0 52px; }
.a-inner { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.a-top { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:start; margin-bottom:50px; }
.a-left .sl { color:var(--gd); } .a-left .ld { background:var(--gl); }
.a-left .st { color:var(--gd); } .a-left .st span { color:var(--or); }
.a-desc { font-size:0.95rem; line-height:1.82; color:#555; margin-bottom:18px; }
.a-hours {
  display:flex; align-items:center; gap:12px; background:white;
  padding:14px 20px; border-radius:14px; border-left:4px solid var(--gl);
  box-shadow:0 4px 18px rgba(0,0,0,0.07);
}
.a-hours .ico { font-size:1.4rem; }
.a-hours-text strong { display:block; color:var(--gd); font-size:0.86rem; font-weight:700; }
.a-hours-text span { color:#777; font-size:0.82rem; }
.a-right { display:flex; flex-direction:column; gap:18px; }
.mvc {
  background:white; border-radius:18px; padding:24px 26px;
  box-shadow:0 8px 28px rgba(0,0,0,0.07);
  border-top:4px solid transparent; transition:transform 0.3s;
}
.mvc:hover { transform:translateY(-3px); }
.mvc.miss { border-top-color:var(--gl); } .mvc.vis { border-top-color:var(--or); }
.mvc .mvi { font-size:1.7rem; margin-bottom:10px; }
.mvc h3 { font-size:0.84rem; font-weight:800; color:var(--gd); margin-bottom:8px; letter-spacing:1px; text-transform:uppercase; }
.mvc p { font-size:0.87rem; line-height:1.76; color:#666; }

/* STATS */
.stats-bar {
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  background:var(--gd); border-radius:20px; padding:34px 38px; margin-bottom:50px;
}
.stat-item { text-align:center; }
.stat-num { font-size:clamp(1.9rem,3.8vw,2.7rem); font-weight:900; color:white; display:block; line-height:1; margin-bottom:6px; }
.stat-num .sc { color:var(--ye); }
.stat-lbl { font-size:0.74rem; color:rgba(255,255,255,0.66); font-weight:500; letter-spacing:0.5px; }

/* TESTIMONIALS */
.t-head { text-align:center; margin-bottom:30px; }
.t-head .sl { color:var(--pu); justify-content:center; } .t-head .ld { background:var(--pu); }
.t-head .st { color:var(--gd); }
.t-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.t-card {
  background:white; border-radius:18px; padding:22px;
  box-shadow:0 5px 20px rgba(0,0,0,0.07);
  transition:transform 0.3s,box-shadow 0.3s;
}
.t-card:hover { transform:translateY(-4px); box-shadow:0 10px 34px rgba(0,0,0,0.11); }
.qm { font-size:2.7rem; line-height:1; font-family:Georgia,serif; display:block; margin-bottom:-4px; }
.tc1 .qm{color:var(--gl);} .tc2 .qm{color:var(--or);} .tc3 .qm{color:var(--pk);}
.tc4 .qm{color:var(--pu);} .tc5 .qm{color:var(--bl);} .tc6 .qm{color:var(--ye);}
.t-stars { color:var(--ye); font-size:0.76rem; margin-bottom:8px; }
.t-text { font-size:0.85rem; line-height:1.77; color:#555; margin-bottom:15px; font-style:italic; }
.t-author { display:flex; align-items:center; gap:11px; }
.t-av { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.8rem; color:white; flex-shrink:0; }
.tc1 .t-av{background:var(--gl);} .tc2 .t-av{background:var(--or);} .tc3 .t-av{background:var(--pk);}
.tc4 .t-av{background:var(--pu);} .tc5 .t-av{background:var(--bl);} .tc6 .t-av{background:var(--ye);}
.t-name { font-weight:700; font-size:0.83rem; color:var(--tx); }
.t-role { font-size:0.71rem; color:#aaa; }

/* ===== PROGRAMS ===== */
#programs { background:#0d2818; padding:76px 0 52px; position:relative; overflow:hidden; }
#programs::before {
  content:''; position:absolute; top:-80px; right:-80px; width:460px; height:460px;
  border-radius:50%; background:radial-gradient(circle,rgba(76,175,80,0.07) 0%,transparent 70%); pointer-events:none;
}
#programs::after {
  content:''; position:absolute; bottom:-60px; left:-60px; width:380px; height:380px;
  border-radius:50%; background:radial-gradient(circle,rgba(244,197,66,0.05) 0%,transparent 70%); pointer-events:none;
}
.p-inner { max-width:1160px; margin:0 auto; padding:0 32px; position:relative; z-index:1; }
.p-head { text-align:center; margin-bottom:46px; }
.p-head .sl { color:var(--gl); justify-content:center; } .p-head .ld { background:var(--ye); }
.p-head .st { color:white; } .p-head .st span { color:var(--ye); }
.p-head p { color:rgba(255,255,255,0.58); max-width:540px; margin:0 auto; font-size:0.92rem; line-height:1.72; }
.sub-lbl { font-size:0.68rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--ye); margin-bottom:20px; display:block; }
.p-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:50px; }
.p-card {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09);
  border-radius:20px; padding:28px; transition:all 0.35s; position:relative; overflow:hidden;
}
.p-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:20px 20px 0 0; }
.p1::before { background:linear-gradient(90deg,var(--gl),var(--ye)); }
.p2::before { background:linear-gradient(90deg,var(--or),var(--pk)); }
.p3::before { background:linear-gradient(90deg,var(--pu),var(--bl)); }
.p4::before { background:linear-gradient(90deg,var(--ye),var(--or)); }
.p-card:hover { background:rgba(255,255,255,0.08); transform:translateY(-4px); border-color:rgba(255,255,255,0.18); box-shadow:0 14px 36px rgba(0,0,0,0.28); }
.p-ico { width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:15px; }
.p1 .p-ico{background:rgba(76,175,80,0.18);} .p2 .p-ico{background:rgba(242,140,40,0.18);}
.p3 .p-ico{background:rgba(190,68,173,0.18);} .p4 .p-ico{background:rgba(244,197,66,0.18);}
.p-title { font-size:1rem; font-weight:700; color:white; margin-bottom:8px; }
.p-desc { font-size:0.83rem; line-height:1.77; color:rgba(255,255,255,0.58); }
.a-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.a-card {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09);
  border-radius:18px; padding:22px 16px; text-align:center; transition:all 0.3s;
}
.a-card:hover { transform:translateY(-4px); border-color:rgba(76,175,80,0.36); background:rgba(76,175,80,0.07); }
.a-ico { font-size:2rem; margin-bottom:11px; display:block; }
.a-title { font-size:0.85rem; font-weight:700; color:white; margin-bottom:7px; }
.a-desc { font-size:0.75rem; color:rgba(255,255,255,0.52); line-height:1.6; }

/* ===== CONTACT ===== */
#contact { background:var(--gr); padding:76px 0 52px; }
.c-inner { max-width:1160px; margin:0 auto; padding:0 32px; }
.c-head { text-align:center; margin-bottom:46px; }
.c-head .sl { color:var(--gd); justify-content:center; } .c-head .ld { background:var(--pk); }
.c-head .st { color:var(--gd); } .c-head .st span { color:var(--or); }
.c-head p { color:#777; max-width:480px; margin:0 auto; font-size:0.92rem; }
.c-grid { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start; }
.c-info { display:flex; flex-direction:column; gap:15px; }
.c-card {
  background:white; border-radius:18px; padding:20px 22px;
  display:flex; align-items:flex-start; gap:15px;
  box-shadow:0 5px 20px rgba(0,0,0,0.07); transition:transform 0.3s;
}
.c-card:hover { transform:translateY(-2px); }
.c-ico { width:45px; height:45px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.cc1 .c-ico{background:rgba(76,175,80,0.11);} .cc2 .c-ico{background:rgba(242,140,40,0.11);}
.cc3 .c-ico{background:rgba(244,197,66,0.11);} .cc3{border-left:4px solid var(--ye);}
.c-body strong { display:block; font-size:0.73rem; font-weight:700; color:#bbb; letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; }
.c-body a, .c-body p { font-size:0.92rem; color:var(--tx); font-weight:500; text-decoration:none; line-height:1.55; }
.c-body a:hover { color:var(--gd); }
.s-cards { display:flex; flex-direction:column; gap:15px; }
.s-card {
  border-radius:18px; padding:22px 26px; display:flex; align-items:center; gap:16px;
  text-decoration:none; transition:all 0.35s; position:relative; overflow:hidden;
}
.s-card::after { content:'→'; position:absolute; right:20px; font-size:1.1rem; opacity:0; transform:translateX(-10px); transition:all 0.3s; color:white; }
.s-card:hover::after { opacity:1; transform:translateX(0); }
.s-ig { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); box-shadow:0 6px 22px rgba(220,39,67,0.3); }
.s-ig:hover { transform:translateY(-3px) scale(1.01); box-shadow:0 12px 44px rgba(220,39,67,0.56),0 0 0 2px rgba(255,255,255,0.12); }
.s-fb { background:linear-gradient(135deg,#1877f2,#0d6efd,#1565c0); box-shadow:0 6px 22px rgba(24,119,242,0.3); }
.s-fb:hover { transform:translateY(-3px) scale(1.01); box-shadow:0 12px 44px rgba(24,119,242,0.56),0 0 0 2px rgba(255,255,255,0.12); }
.s-ico { width:48px; height:48px; background:rgba(255,255,255,0.18); border-radius:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; animation:glowPulse 2.5s infinite; }
@keyframes glowPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,0.25); } 50%{ box-shadow:0 0 0 6px rgba(255,255,255,0); } }
.s-ico svg { width:23px; height:23px; fill:white; }
.s-text strong { display:block; color:white; font-weight:700; font-size:0.95rem; margin-bottom:3px; }
.s-text span { color:rgba(255,255,255,0.78); font-size:0.79rem; }
.map-card { background:white; border-radius:18px; padding:18px 22px; box-shadow:0 5px 20px rgba(0,0,0,0.07); display:flex; align-items:flex-start; gap:15px; }
.map-ico { width:45px; height:45px; background:rgba(31,107,58,0.09); border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.map-card strong { display:block; color:var(--gd); font-weight:700; font-size:0.83rem; margin-bottom:5px; }
.map-card p { color:#666; font-size:0.83rem; line-height:1.65; }

/* ===== FAQ ===== */
#faq { background:white; padding:76px 0 52px; }
.f-inner { max-width:760px; margin:0 auto; padding:0 32px; }
.f-head { text-align:center; margin-bottom:38px; }
.f-head .sl { color:var(--bl); justify-content:center; } .f-head .ld { background:var(--bl); }
.f-head .st { color:var(--gd); }
.f-item { border-bottom:1px solid #eee; }
.f-q {
  width:100%; background:none; border:none; padding:18px 0;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; text-align:left; font-family:'Poppins',sans-serif;
  font-size:0.92rem; font-weight:600; color:var(--tx); gap:14px; transition:color 0.2s;
}
.f-q:hover { color:var(--gd); } .f-q.open { color:var(--gd); }
.f-ic {
  width:26px; height:26px; border-radius:50%; background:var(--gr);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:1rem; transition:all 0.3s; color:var(--gd); font-weight:700;
}
.f-q.open .f-ic { background:var(--gl); color:white; transform:rotate(45deg); }
.f-ans { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.f-ans-in { padding:0 0 17px; font-size:0.88rem; line-height:1.82; color:#666; }

/* ===== FOOTER ===== */
footer { background:#071208; padding:30px 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.ft-logo { display:flex; align-items:center; gap:12px; }
.ft-logo img { width:44px; height:44px; border-radius:50%; object-fit:cover; background:white; padding:2px; flex-shrink:0; }
.ft-text { color:rgba(255,255,255,0.62); font-size:0.77rem; line-height:1.4; }
.ft-text strong { color:white; display:block; font-size:0.85rem; }
.ft-copy { color:rgba(255,255,255,0.32); font-size:0.74rem; text-align:center; }
.ft-links { display:flex; gap:16px; }
.ft-links a { color:rgba(255,255,255,0.44); text-decoration:none; font-size:0.76rem; transition:color 0.2s; }
.ft-links a:hover { color:var(--gl); }

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .nav-links {
    position:fixed; top:0; right:-100%; width:240px; height:100vh;
    background:rgba(6,20,10,0.98); flex-direction:column; justify-content:center;
    padding:36px 26px; gap:10px; transition:right 0.4s; backdrop-filter:blur(20px);
  }
  .nav-links.open { right:0; }
  .nav-links a { font-size:1rem; padding:10px 0; border-radius:0; }
  .hamburger { display:flex; }
  nav { padding:12px 20px; }
  nav.scrolled { padding:9px 20px; }
}
@media(max-width:840px){
  .a-top { grid-template-columns:1fr; gap:30px; }
  .stats-bar { grid-template-columns:repeat(2,1fr); }
  .t-grid { grid-template-columns:1fr 1fr; }
  .p-grid { grid-template-columns:1fr; }
  .a-grid { grid-template-columns:repeat(2,1fr); }
  .c-grid { grid-template-columns:1fr; }
}
@media(max-width:500px){
  .t-grid { grid-template-columns:1fr; }
  .stats-bar { padding:22px 18px; }
  footer { flex-direction:column; text-align:center; }
  .ft-links { justify-content:center; }
  .a-inner,.p-inner,.c-inner,.f-inner { padding:0 16px; }
}