/* Healthspan AI colorful theme */
:root{
  --bg:#0b1020;
  --surface:#0d1226;
  --card:#0f1630;
  --muted:#9aa3b2;
  --text:#eaf2ff;
  --primary:#00c2a8;
  --primary-700:#009a87;
  --accent:#6ee7b7;
  --emerald:#10b981;
  --blue:#3b82f6;
  --amber:#f59e0b;
  --rose:#f43f5e;
  --indigo:#6366f1;
  --ring:#203055;
  --border:#203055;
  --shadow: 0 10px 30px rgba(2,10,30,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,#070a18 0%, #0b1020 40%, #0e1428 100%);color:var(--text)}

.container{max-width:1120px;margin:0 auto;padding:0 1rem}
.maxw{max-width:68ch}

.site-header{position:sticky;top:0;z-index:50;background:rgba(13,18,38,.7);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
.brand.small .brand-text{font-size:1rem}
.brand-text{font-weight:700;letter-spacing:.2px;color:#fff;font-size:1.2rem}
.brand-accent{color:var(--accent)}
.logo-dot{width:12px;height:12px;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 0 0 3px rgba(0,194,168,.25)}
.nav a{color:#dbe7ff;text-decoration:none;margin-left:1rem;opacity:.9}
.nav a:hover{opacity:1}

.hero{position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;padding:4.5rem 0}
.hero-copy h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.1;margin:0 0 .6rem}
.hero-copy .accent{color:var(--accent)}
.lede{font-size:1.125rem;opacity:.95}
.cta{margin-top:1.2rem;display:flex;gap:.8rem;flex-wrap:wrap}
.pill{display:inline-block;border:1px solid var(--ring);background:rgba(255,255,255,.05);padding:.4rem .7rem;border-radius:999px;font-size:.9rem}
.badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.hero-card{background:linear-gradient(180deg,#111a3a,#0f1630);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:16px;padding:1.2rem}
.hero-card h3{margin-top:0}
.hero-bg{position:absolute;inset:-40% -20% auto -20%;height:70vh;background:radial-gradient(60% 60% at 20% 20%,rgba(0,194,168,.30),transparent 60%), radial-gradient(50% 50% at 70% 10%,rgba(99,102,241,.25),transparent 60%), radial-gradient(60% 60% at 80% 40%,rgba(59,130,246,.20),transparent 60%);z-index:-1;filter:blur(30px)}

.section{padding:3.2rem 0}
.alt{background:linear-gradient(180deg,#0c1226,#0d152e);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}

.grid3{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.grid2{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.split{display:grid;gap:1.2rem;grid-template-columns:1.1fr .9fr}

.card{background:linear-gradient(180deg,#101735,#0f1630);border:1px solid var(--border);border-radius:16px;padding:1.2rem;box-shadow:var(--shadow)}
.card.tone-emerald{border-color:rgba(16,185,129,.45)}
.card.tone-blue{border-color:rgba(59,130,246,.45)}
.card.tone-amber{border-color:rgba(245,158,11,.45)}
.card.tone-rose{border-color:rgba(244,63,94,.45)}
.card.tone-indigo{border-color:rgba(99,102,241,.45)}

.icon{width:38px;height:38px;border-radius:12px;margin-bottom:.6rem;border:1px solid var(--ring);background:rgba(255,255,255,.05)}
.icon-spark{background:linear-gradient(135deg,#22d3ee,#34d399)}
.icon-wave{background:linear-gradient(135deg,#60a5fa,#a78bfa)}
.icon-shield{background:linear-gradient(135deg,#f59e0b,#f43f5e)}

ul{margin:.5rem 0;padding-left:1.2rem}
.check li{list-style:none;margin:.4rem 0;position:relative;padding-left:1.4rem}
.check li::before{content:"✓";position:absolute;left:0;color:var(--accent)}

.bullets li{margin:.4rem 0}

.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--ring);padding:.7rem 1.05rem;border-radius:12px;text-decoration:none;cursor:pointer;transition:.15s;font-weight:600;color:#eaf2ff;background:rgba(255,255,255,.04)}
.btn:hover{transform:translateY(-1px)}
.btn.small{padding:.45rem .7rem;border-radius:10px;font-weight:500}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--accent));border-color:transparent;color:#071222}
.btn.soft{background:rgba(0,194,168,.12);border-color:rgba(0,194,168,.35)}
.btn.ghost{background:transparent}

.body{font-size:1.05rem;opacity:.95}
.muted{color:var(--muted);font-size:.9rem}

.contact-form{max-width:620px;margin-top:1rem}
.field{margin:.6rem 0}
input,textarea{width:100%;padding:.8rem;border-radius:12px;border:1px solid var(--ring);background:#0a1228;color:#eaf2ff}
input::placeholder,textarea::placeholder{color:#9fb0c9}

.site-footer{border-top:1px solid rgba(255,255,255,.08);margin-top:2rem}
.footer-grid{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:2rem 0}
.footer-nav a{color:#cfe0ff;text-decoration:none;margin-left:1rem;opacity:.9}
.footer-nav a:hover{opacity:1}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
}


/* Contact form card style */
.contact-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 0 30px rgba(0, 194, 168, 0.15);
  padding: 2.5rem;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
  transition: all 0.3s ease;
}

.contact-card:hover {
  box-shadow: 0 0 40px rgba(0, 194, 168, 0.25);
  transform: translateY(-4px);
}

.contact-card h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  color: var(--text);
  line-height: 1.3;
}

.contact-card p.body {
  color: var(--muted);
  margin-bottom: 1.5rem;
}

/* Form fields */
.contact-form .field {
  margin-bottom: 1rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--ring);
  background: #0a1228;
  color: var(--text);
  font-size: 1rem;
  transition: all 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 194, 168, 0.25);
  outline: none;
  background: #0d1632;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--muted);
}

/* Button */
.contact-form .btn.primary {
  width: 100%;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #071222;
  font-weight: 600;
  transition: all 0.25s ease;
}

.contact-form .btn.primary:hover {
  background: linear-gradient(135deg, var(--accent), var(--primary));
  transform: translateY(-2px);
}

/* Sub text */
.contact-form .muted {
  margin-top: 0.8rem;
  text-align: center;
  display: block;
}