/* HealthApprise — static HTML build (no React) */
:root{
  --bg1:#020617;
  --bg2:#030712;
  --text:#ffffff;
  --muted: rgba(255,255,255,.7);
  --accent1:#67e8f9;
  --accent2:#6ee7b7;
}

*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(circle at 20% 10%, rgba(0,170,255,.25), transparent 40%),
             radial-gradient(circle at 80% 30%, rgba(0,255,170,.18), transparent 35%),
             linear-gradient(to bottom, var(--bg1) 80%, var(--bg2));
}

a{color:inherit;text-decoration:none}
button{cursor:pointer;}

.container{max-width:1200px;margin:0 auto;padding:0 1rem;}

.nav{
  position:fixed;inset:0 0 auto 0;height:64px;
  display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  background: rgba(0,0,0,.3);
  z-index:50;
}
.nav .container{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-badge{
  width:32px;height:32px;border-radius:12px;background:rgba(255,255,255,.1);
  display:grid;place-items:center;font-weight:700;
}
.nav-links{display:none;gap:1.25rem;color:rgba(255,255,255,.8)}
@media(min-width:860px){ .nav-links{display:flex;} }

.btn{
  border:1px solid rgba(255,255,255,.25);
  color: #000;
  background:#fff;
  padding:.6rem 1rem;border-radius:12px;font-weight:600;
}
.btn.ghost{background:transparent;color:#fff;border-color:transparent}
.btn.outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}

.hero{
  min-height:90vh;position:relative;overflow:hidden;padding-top:96px;
}
.canvas-wrap{position:absolute;inset:0;z-index:0}
.hero-content{position:relative;z-index:1;}
.grid{display:grid;gap:2rem}
@media(min-width:900px){ .grid-2{grid-template-columns:1fr 1fr;} }

.badge{display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);font-size:.75rem;
}

.h1{font-size:clamp(2rem, 5vw, 3.5rem);line-height:1.1;font-weight:700;margin:.6rem 0 0;}
.h1 .gradient{background: linear-gradient(90deg, var(--accent1), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.p{color:var(--muted);font-size:1.125rem;max-width:60ch}

.kpis{display:flex;gap:1.5rem;flex-wrap:wrap;color:rgba(255,255,255,.7);font-size:.95rem}

.section{padding:4.5rem 0;border-top:1px solid rgba(255,255,255,.06);background: linear-gradient(to bottom, rgba(2,6,23,0), rgba(3,7,18,.4));}
.section .header{text-align:center;max-width:720px;margin:0 auto 2.25rem}
.overline{letter-spacing:.18em;text-transform:uppercase;font-size:.7rem;color:rgba(255,255,255,.7)}
.h2{font-size:1.9rem;margin:.3rem 0 .2rem}
.sub{color:rgba(255,255,255,.7)}

.cards{display:grid;gap:1rem}
@media(min-width:900px){ .cards{grid-template-columns:repeat(3,1fr);} }
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1rem}
.card h3{margin:.4rem 0 0;font-size:1.05rem}
.card p{color:rgba(255,255,255,.75);font-size:.95rem}

.pricing .price{color:rgba(255,255,255,.75);font-weight:600}

.newsletter .box{display:grid;gap:1rem;align-items:center}
@media(min-width:900px){ .newsletter .box{grid-template-columns:1.2fr .8fr;} }
.input{
  width:100%;padding:.9rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.1);color:#fff;outline:none;
}
.footer{padding:2rem 0;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.7);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
/* Floating tags for 3D */ 
.tag{
  position:absolute;z-index:2;transform:translate(-50%, -50%);
  padding:.4rem .8rem;border-radius:999px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);backdrop-filter: blur(6px);font-size:.8rem;
  pointer-events:none; /* purely decorative */
}
#tag1{left:66%;top:28%}
#tag2{left:28%;top:58%}
#tag3{left:62%;top:70%}