:root{
  --bg:#fbfcfc;
  --ink:#0b2430;
  --muted:#4b5b66;
  --teal:#007C85;
  --teal-2:#00949F;
  --teal-soft:#cce8e9;
  --card:#ffffff;
  --ring: rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap{width:min(1100px, calc(100% - 32px)); margin-inline:auto}

.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background:rgba(255,255,255,.75);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.site-header .wrap{display:flex; align-items:center; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand-mark{width:28px; height:28px; border-radius:6px; box-shadow:0 1px 3px var(--ring)}
.brand-name{font-weight:700; letter-spacing:.03em}

.badges{margin-left:auto; display:flex; gap:12px; flex-wrap:wrap}
.badge{padding:8px 14px; border-radius:999px; background:#e6f6f7; color:#0f4f54; font-weight:600; font-size:.9rem}
.badge-outline{background:transparent; border:1px solid #d9eeef; color:#0f4f54}

.hero{padding:28px 0 40px}
/* add breathing room under badges on desktop */
.hero .wrap{padding-top:12px}

.hero-title{
  font-size: clamp(2rem, 5vw, 3rem);
  line-height:1.15;
  letter-spacing:.03em;
  margin: 8px 0 8px;
  opacity:0; transform:translateY(8px);
  animation:fadeUp .7s ease forwards;
}
.kicker{font-weight:700; margin:0 0 10px}
.lede{max-width: 65ch; color:var(--muted)}

.hero-art{margin:28px 0 20px}
.hero-art img{width:100%; height:auto; display:block; border-radius:14px; box-shadow:0 10px 30px var(--ring)}
.hero-art.waves{margin-top:24px}

.grid{
  display:grid; gap:22px; align-items:start;
  grid-template-columns: repeat(12,1fr);
}

.card{grid-column: span 3; background:var(--card); border-radius:14px; box-shadow:0 1px 1px rgba(0,0,0,.04), 0 8px 24px var(--ring); overflow:hidden}
.card-top{height:3px; background: linear-gradient(90deg, var(--teal), var(--teal-2));}
.card-inner{padding:18px}
.card-icon{font-size:1.4rem; margin-bottom:6px}
.card.lift{transition: transform .25s ease, box-shadow .25s ease}
.card.lift:hover{transform: translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.08)}

.invite{grid-column: span 6; background:var(--card); border-radius:12px; padding:2rem; box-shadow:0 8px 24px var(--ring)}
.invite h3{margin-top:0}
.invite input{
  width:100%; margin:10px 0; padding:14px 16px; border-radius:10px; border:1px solid #e7ecee;
  font-size:16px; /* iOS zoom fix */
  outline-color: var(--teal-2);
  background:#f8fbfb;
}
.button.primary{
  cursor:pointer; border:none; display:inline-flex; align-items:center; gap:10px;
  padding:14px 18px; border-radius:999px; background: linear-gradient(90deg, var(--teal), var(--teal-2));
  color:white; font-weight:700; box-shadow:0 10px 24px rgba(0,0,0,.15);
  transition: all .25s ease;
}
.button.primary:hover{opacity:.95; transform: translateY(-1px)}
.invite .help{color:var(--muted); margin-top:12px}

.site-footer{border-top:1px solid #e5e5e5; margin-top:28px}
.site-footer .wrap{padding:22px 0}
.site-footer p{margin:0; opacity:.9}

/* Responsive */
@media (max-width: 900px){
  .grid{grid-template-columns: 1fr}
  .card{grid-column: auto}
  .invite{grid-column: auto}
  .hero-title{font-size: clamp(1.75rem, 5vw, 2.25rem)}
  .site-footer .wrap{text-align:center}
  .hero .wrap{padding-top:16px} /* under sticky badges */
  .card-top{height:2px; background: linear-gradient(90deg, var(--teal), var(--teal))}
}

/* Animations */
.fade-up-start{opacity:1}
@keyframes fadeUp{to{opacity:1; transform:translateY(0)}}

/* Accessibility helpers */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
a{color:#0f4f54; text-decoration:none; transition: all .25s ease}
a:hover{text-decoration:underline; color:#004f54}