/* Ultra Modern Health-Themed Styles for FTM */
:root{
  --ftm-red:#ff3344;
  --ftm-blue:#00b3ff;
  --ftm-green:#27d17f;
  --ink:#0a0f1a;
  --surface:#0f1524;
  --muted:#91a0b6;
  --white:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 90% -10%, rgba(0,179,255,.10), transparent 60%),
              radial-gradient(900px 500px at -10% 110%, rgba(255,51,68,.08), transparent 60%),
              linear-gradient(180deg,#0b1020 0%, #0f1524 100%);
  color:#e7ecf6;
}
a{color:var(--ftm-blue); text-decoration:none}
a:hover{opacity:.9}
.navbar{ backdrop-filter:saturate(180%) blur(14px); background:rgba(14,20,35,.72)!important; border-bottom:1px solid rgba(255,255,255,.06)}
.navbar .nav-link{color:#e7ecf6}
.navbar .btn{border-radius:14px}

.hero{
  min-height: 92vh; display:flex; align-items:center; position:relative; overflow:hidden;
}
.hero .bg-canvas{
  position:absolute; inset:0; z-index:-1; opacity:.9;
  background:
    radial-gradient(800px 400px at 20% 15%, rgba(0,179,255,.30), transparent 60%),
    radial-gradient(900px 500px at 80% 90%, rgba(255,51,68,.28), transparent 60%),
    conic-gradient(from 180deg at 70% 40%, rgba(255,255,255,.04), transparent 60%);
}
.hero .grid{
  position:absolute; inset:-10% -10% -10% -10%; background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:40px 40px; mask-image:radial-gradient(closest-side, black 60%, transparent 100%);
}
.gradient-text{background:linear-gradient(90deg, #8be9ff, #61ffa7, #7aa7ff, #ffb3c1); -webkit-background-clip:text; background-clip:text; color:transparent}
.btn-ftm{background:linear-gradient(135deg,var(--ftm-red),#ff6a3d); border:none; color:#fff; border-radius:16px; padding:.75rem 1.1rem; box-shadow:0 10px 30px rgba(255,90,76,.25)}
.btn-ftm:hover{transform:translateY(-1px)}
.btn-outline-glass{border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:14px}
.section{padding:96px 0}
.section-title{font-weight:800; letter-spacing:.3px}
.card{
  border:0; border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:0 20px 60px rgba(0,0,0,.3); backdrop-filter: blur(10px);
}
.card img{border-radius:16px}
.badge-soft{background:linear-gradient(180deg, rgba(0,179,255,.15), rgba(0,179,255,.08)); color:#9be3ff; border:1px solid rgba(0,179,255,.25)}
.icon-circle{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, rgba(0,179,255,.22), rgba(39,209,127,.22));}
.counter{font-weight:900; font-size:clamp(2rem, 4vw, 3rem)}

.gallery img{width:100%; height:280px; object-fit:cover; border-radius:18px}
.gallery .item{position:relative; overflow:hidden}
.gallery .item:after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.35)); opacity:.6}

.stats-card{border:1px solid rgba(255,255,255,.12)}
.kpi{display:flex; align-items:center; gap:12px}
.kpi .dot{width:12px; height:12px; border-radius:50%; background:var(--ftm-blue); box-shadow:0 0 0 6px rgba(0,179,255,.15)}
.kpi .value{font-weight:800; font-size:1.6rem}

footer{background:rgba(4,7,14,.95); border-top:1px solid rgba(255,255,255,.06)}

/* reveal animations */
.reveal{opacity:0; transform:translateY(18px); transition: all .7s ease; }
.reveal.visible{opacity:1; transform:none}

.badge-outline{border:1px solid rgba(255,255,255,.2); color:#cfe7ff; padding:.35rem .6rem; border-radius:999px}

.navbar-brand img{height:46px}
@media (max-width: 991px){ .hero{min-height:78vh} }

/* decorative floating blobs */
.blob{
  position:absolute; filter: blur(40px); opacity:.5; border-radius:50%;
  animation: float 14s ease-in-out infinite;
}
.blob.b1{background: radial-gradient(circle at 30% 30%, #00b3ff, transparent 60%); width:400px; height:400px; top:-80px; left:-80px}
.blob.b2{background: radial-gradient(circle at 70% 40%, #ff3344, transparent 60%); width:360px; height:360px; bottom:-60px; right:-60px; animation-delay: -6s}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}