:root{
  --bg:#15131a; --surface:#201d29; --line:#3a3547;
  --text:#f1ece4; --muted:#b4adbd; --accent:#e8a9b8;
  --serif:'Fraunces',Georgia,serif; --sans:'Be Vietnam Pro',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--bg);color:var(--text);font:400 1rem/1.7 var(--sans)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:14px clamp(16px,5vw,64px);background:rgba(21,19,26,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{font:700 1.25rem var(--serif);text-decoration:none}
.nav nav{display:flex;gap:clamp(12px,3vw,28px)}
.nav nav a{color:var(--muted);text-decoration:none;font-size:.95rem}
.nav nav a:hover{color:var(--text)}

.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;
  max-width:1120px;margin:0 auto;padding:clamp(40px,8vw,96px) clamp(16px,5vw,32px)}
.hello{color:var(--accent)}
h1{font:700 clamp(2.6rem,7vw,4.8rem)/1.05 var(--serif);margin:8px 0 20px}
.lead{color:var(--muted);max-width:44ch;margin-bottom:28px}
.btn{display:inline-block;padding:12px 24px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);text-decoration:none;transition:background .2s,color .2s}
.btn:hover{background:var(--accent);color:var(--bg)}

.hero-media{display:grid;grid-template-columns:1fr 1.3fr;gap:16px;align-items:end}
.frame{margin:0;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:0 0 0 6px var(--bg),0 0 0 7px var(--line)}
.avatar img,.avatar-fallback{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.avatar-fallback{display:grid;place-items:center;background:#2a2535;font:700 2.5rem var(--serif);color:var(--accent)}
.clip video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#000;border-radius:2px}
figcaption{padding:8px 4px 2px;font-size:.8rem;color:var(--muted)}

.section{max-width:1120px;margin:0 auto;padding:clamp(40px,7vw,80px) clamp(16px,5vw,32px);border-top:1px solid var(--line)}
h2{font:700 clamp(1.8rem,4vw,2.5rem) var(--serif);margin-bottom:32px}
h3{font:500 1.2rem var(--serif);margin-bottom:6px}

.bars{display:grid;gap:20px;max-width:640px;margin-bottom:40px}
.bar-head{display:flex;justify-content:space-between;margin-bottom:6px}
.track{height:8px;background:var(--surface);border-radius:99px;overflow:hidden}
.track i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width 1s ease}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:4px}
.card p{color:var(--muted);font-size:.95rem}

.links{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.links a{display:inline-block;padding:12px 22px;border:1px solid var(--line);border-radius:999px;text-decoration:none;transition:border-color .2s,color .2s}
.links a:hover{border-color:var(--accent);color:var(--accent)}

footer{text-align:center;padding:32px 16px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr}
  .nav nav a{font-size:.85rem}
}
@media (max-width:420px){
  .logo{display:none}
  .nav{justify-content:center}
  .hero-media{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track i{transition:none}
}