:root{
  --bg:#0b0b0c; --fg:#f6f6f6; --muted:#b9bcc3;
  --accent:#9ad1c9; --accent-2:#89b6ff;
  --card:#131316; --glass:rgba(255,255,255,.06);
  --ring: #b5e3de;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1200px 800px at 80% -10%, #172026, transparent 60%),
    linear-gradient(180deg,#0a0a0b, #0e0e11);
  display:flex; min-height:100vh; align-items:center; justify-content:center; padding:24px;
}

/* Card */
.card{
  width:min(980px,100%);
  background:linear-gradient(to bottom right, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px; overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.4);
}

/* Hero layout */
.hero{position:relative; display:grid; grid-template-columns: 1.25fr 1fr; gap:0;}
.hero-media{position:relative; min-height:420px; background:#0e0e11}
.hero-media img{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* Right column */
.hero-right{padding:36px 32px 28px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));}
h1{margin:0 0 12px; font-size:clamp(28px, 3vw, 44px); letter-spacing:.3px;}
.kicker{display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; text-transform:uppercase; letter-spacing:.2em}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
p{color:#e7e7e7; line-height:1.65; font-size:clamp(15px, 1.6vw, 18px)}

/* Buttons */
.cta-row{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.btn{
  appearance:none; border:none; cursor:pointer;
  padding:14px 18px; border-radius:14px; font-weight:700; font-size:16px;
  background:linear-gradient(180deg, var(--accent), #7ac6bd);
  color:#052a27; text-decoration:none; display:inline-flex; align-items:center; gap:10px;
  box-shadow:0 6px 18px rgba(122,198,189,.35);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 10px 22px rgba(122,198,189,.45);}
.btn:active{ transform: translateY(0);}
.btn.secondary{
  background:rgba(255,255,255,.02);
  color:var(--fg);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:none;
}
.btn.secondary:hover{ border-color: rgba(255,255,255,.36); }

/* Focus visibility */
:where(a,button).btn:focus-visible,
:where(.pill):focus-visible{
  outline: 0; box-shadow: 0 0 0 3px var(--ring);
}

/* Footer */
.age{margin-top:10px; font-size:12px; color:#cfcfcf}
.footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; border-top:1px solid rgba(255,255,255,.06);
  font-size:13px; color:var(--muted)
}
.name{font-weight:700; letter-spacing:.02em}
.links{display:flex; gap:14px; flex-wrap:wrap}
.pill{
  padding:8px 12px; border:1px solid rgba(255,255,255,.14);
  border-radius:999px; color:#eaeaea; text-decoration:none; line-height:1;
}
.pill:hover{ border-color: rgba(255,255,255,.28); }

/* Mobile tweaks */
@media (max-width: 860px){
  .hero{grid-template-columns:1fr}
  .hero-media{min-height:300px}
  .hero-right{padding:24px 20px 20px}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn{ transition:none }
}