/* Carrd-quality, honeycomb gradient vibe */
:root{
  --bg1:#0a0f1d; /* deep navy */
  --bg2:#0f1730; /* slightly lighter navy */
  --panel:rgba(255,255,255,.08);
  --panel-border:rgba(255,255,255,.12);
  --text:#e6eaf5;
  --muted:#b7c0d9;
  --accent:#73b7ff; /* soft blue */
  --accent2:#9ed8ff; /* lighter blue */
  --radius:22px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,var(--bg1),var(--bg2) 60%) fixed;line-height:1.6}

.bg{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(115,183,255,.18), transparent 60%),
    radial-gradient(800px 500px at -10% 10%, rgba(158,216,255,.12), transparent 60%),
    url('../images/bg_honeycomb.svg');
  background-size:cover, cover, 520px 300px;
  opacity:.9;
  filter: saturate(115%);
}

.wrap{max-width:980px;margin:0 auto;padding:28px}
.card{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter: blur(8px) saturate(120%);
}

.hero{display:grid;grid-template-columns:160px 1fr;gap:22px;padding:22px;margin:26px 0}
.headshot{width:160px;height:160px;border-radius:18px;object-fit:cover;border:1px solid var(--panel-border);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.intro h1{margin:0 0 2px;font-size:2rem;font-weight:800;letter-spacing:.2px}
.role{margin:0;color:var(--muted);font-weight:600}
.tagline{margin:.4rem 0 1rem;color:var(--text)}
.button{display:inline-block;padding:.8rem 1.1rem;border-radius:999px;font-weight:800;text-decoration:none;border:1px solid rgba(255,255,255,.14);transition:.2s transform, .2s filter}
.button.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b1020;border-color:transparent;box-shadow:var(--shadow)}
.button:hover{transform:translateY(-1px);filter:brightness(1.04)}

.section{padding:20px;margin:20px 0}
h2{margin:0 0 8px;font-size:1.3rem}
.muted{color:var(--muted);margin:0 0 12px}
.grid-2{display:grid;grid-template-columns:1fr;gap:16px}
.video{background:rgba(255,255,255,.06);border:1px solid var(--panel-border);border-radius:16px;padding:12px}
.ratio{position:relative;width:100%;padding-top:56.25%}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:12px}
.caption{margin:.5rem 0 0;color:var(--muted);font-size:.95rem}

.foot{color:var(--muted);text-align:center;padding:24px 8px}

@media (min-width: 820px){
  .hero{grid-template-columns:180px 1fr;padding:26px}
  .headshot{width:180px;height:180px;border-radius:20px}
  .grid-2{grid-template-columns:1fr 1fr}
}