:root{
  --primary: #2B6CB0;
  --accent: #22C55E;
  --text: #0B111A;
  --muted: #6B7280;
  --bg: #F6F8FB;
  --card: #FFFFFF;
}

* { box-sizing: border-box; }
body { margin:0; font-family: 'Inter', sans-serif; color:var(--text); background:var(--bg); }
.container { max-width:1100px; margin:0 auto; padding:0 20px; }
.nav { position:sticky; top:0; background:#fff; border-bottom:1px solid #e5e7eb; }
.nav .container { display:flex; align-items:center; justify-content:space-between; height:70px; }
.nav nav a { color:var(--text); margin-left:18px; text-decoration:none; font-weight:600; }
.logo { height:46px; }

.hero { background-size:cover; background-position:center; min-height:70vh; display:flex; align-items:center; }
.overlay { background:rgba(0,0,0,0.4); width:100%; padding:80px 0; }
.hero-text { color:#fff; max-width:640px; }
.hero h1 { font-size:52px; margin:0 0 14px; }
.hero p { font-size:18px; margin:0 0 22px; }
.cta .btn, .cta .btn-secondary { display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; margin-right:10px; }
.btn { background:var(--accent); color:#0b111a; font-weight:800; }
.btn-secondary { background:#fff; color:#0b111a; font-weight:700; }

.features { padding:60px 0; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card { background:var(--card); border-radius:16px; padding:24px; box-shadow:0 8px 20px rgba(0,0,0,0.05); }

.how { padding:60px 0; }
.grid2 { display:grid; grid-template-columns:1.2fr 0.8fr; gap:24px; }
.mono { font-family:monospace; }

.beta { background:#fff; }
.contact { padding:60px 0; text-align:center; }
.footer { background:#0f172a; color:#cbd5e1; padding:20px 0; text-align:center; }

@media(max-width:900px){
  .grid3,.grid2{grid-template-columns:1fr;}
  .hero h1{font-size:36px;}
  .nav nav{display:none;}
}


/* Expanded sections */
.health, .app, .howitworks, .subscription {
  padding: 70px 20px;
}
.health ul, .app ul, .howitworks ol, .subscription ul {
  line-height: 1.6;
  margin: 15px 0;
}
.subscription .grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media(max-width:900px){
  .subscription .grid2 { grid-template-columns: 1fr; }
}


.app-preview img, .tech img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  margin: 10px;
}


.details { padding: 80px 20px; background: #fdfdfd; }
.details h2 { font-size: 32px; margin-bottom: 20px; }
.details h3 { margin-top: 30px; color: #2B6CB0; }
.details ul { margin: 10px 0 20px 20px; line-height: 1.6; }