*{box-sizing:border-box}
:root{
  --ink:#0f172a;
  --muted:#3b4750;     /* darken for higher contrast */
  --brand:#0f4c81;     /* link color */
  --bg:#b6c0cc;        /* darker neutral background */
  --card:#ffffff;
  --border:#bbc7d4;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
a{color:var(--brand);text-decoration:none}
.wrap{max-width:980px;margin:0 auto;padding:0 1.25rem}

/* Skyline banner (subtle) */
.hero{
  height:104px;
  background:url('skyline.jpg') left center / cover no-repeat;
  filter:saturate(.9) contrast(.96) brightness(.94);
  border-bottom:1px solid var(--border);
}

/* Intro */
.intro{display:flex;align-items:center;gap:1rem;padding:1rem 0 0}
.avatar{width:88px;height:88px;object-fit:cover;border-radius:50%;border:2px solid #fff;
  box-shadow:0 6px 18px rgba(2,12,27,.10);background:#fff}
.intro-text h1{margin:0 0 .2rem 0;font-size:1.95rem;font-weight:800;letter-spacing:.2px}
.tag{margin:0;color:var(--muted);font-weight:600;font-size:1.05rem;letter-spacing:.15px}

/* Buttons */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.25rem 0}
.card{
  display:flex;align-items:center;justify-content:center;min-height:60px;
  padding:.9rem 1rem;border-radius:16px;background:var(--card);
  border:1px solid var(--border);font-weight:700;box-shadow:0 2px 10px rgba(2,12,27,.06);
  transition:transform .07s ease, box-shadow .12s ease, border-color .12s ease
}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(2,12,27,.12);border-color:#aebfd0}

/* Details */
.details{background:#ffffff;border:1px solid #e1eaf1;border-radius:18px;padding:1.1rem 1.25rem;margin:1rem 0 2rem;
  box-shadow:0 4px 14px rgba(2,12,27,.06)}
.details h3{margin:.75rem 0 .25rem;font-size:.95rem;color:#18384d;letter-spacing:.2px}
.details ul.tight{margin:.25rem 0 .75rem 1.1rem;padding:0}
.details ul.tight li{margin:.15rem 0}

/* CTA */
.cta{margin-top:.75rem}
.btn.small{
  display:inline-block;padding:.35rem .6rem;border-radius:10px;font-weight:600;
  border:1px solid var(--border);background:#fff;cursor:pointer
}
.btn.small:hover{box-shadow:0 6px 16px rgba(2,12,27,.08);transform:translateY(-1px)}
.email-slot a{font-weight:600}

/* Footer (subtle) */
.site-footer{padding:2rem 1.25rem;text-align:center}
.site-footer .copyright{display:block;color:#7f8b94;font-size:.8rem;opacity:.85}
.site-footer .credit{display:block;margin-top:.2rem;color:#8c98a1;font-size:.75rem;opacity:.75}
.site-footer a{color:#6c879b}

/* Mobile tweaks */
@media (max-width:520px){
  .intro-text h1{font-size:1.7rem}
  .tag{font-size:1rem}
}