:root{
  --bg:#03040a; --ink:#e8edf6; --muted:#9fb0c8;
  --accent:#5eead4; --accent2:#7c9cff;
  --card:#0c1322; --line:#1e2b45;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{min-height:100%}
body{
  background:
    radial-gradient(1100px 620px at 18% -8%, rgba(94,234,212,.10), transparent 60%),
    radial-gradient(1000px 640px at 88% 6%, rgba(124,156,255,.12), transparent 60%),
    var(--bg);
  color:var(--ink); font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
  display:flex; align-items:center; justify-content:center; padding:40px 22px;
}
.wrap{width:100%; max-width:920px}

/* hero */
.hero{text-align:center; margin-bottom:34px}
.avatar{width:104px; height:104px; border-radius:50%; object-fit:cover; border:2px solid var(--accent);
  box-shadow:0 12px 40px rgba(94,234,212,.22); margin-bottom:20px}
.eyebrow{color:var(--accent); letter-spacing:.26em; text-transform:uppercase; font-size:12px; font-weight:600; margin-bottom:14px}
.hero h1{font-size:clamp(28px,4.6vw,44px); font-weight:800; letter-spacing:-.03em; line-height:1.08}
.hero h1 span{background:linear-gradient(120deg,#fff 20%,var(--accent) 62%,var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.bio{color:var(--muted); font-size:16px; max-width:660px; margin:18px auto 0; line-height:1.65}

/* cards */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:30px}
@media(max-width:680px){ .cards{grid-template-columns:1fr} }
.card{position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 24px 22px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); opacity:.9}
.card.brief::before{background:linear-gradient(90deg,var(--accent2),var(--accent))}
.card:hover{transform:translateY(-4px); border-color:#33507a; box-shadow:0 18px 50px rgba(0,0,0,.45)}
.tag{align-self:flex-start; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); background:rgba(94,234,212,.10); border:1px solid rgba(94,234,212,.28); border-radius:999px; padding:4px 11px}
.card.brief .tag{color:var(--accent2); background:rgba(124,156,255,.10); border-color:rgba(124,156,255,.30)}
.card h2{font-size:23px; font-weight:800; letter-spacing:-.02em; margin:16px 0 8px}
.card p{color:var(--muted); font-size:14.5px; line-height:1.6; flex:1}
.go{margin-top:20px; font-weight:700; font-size:14.5px; color:var(--accent); display:inline-flex; align-items:center; gap:8px}
.card.brief .go{color:var(--accent2)}
.go b{transition:transform .18s ease}
.card:hover .go b{transform:translateX(4px)}

/* contact */
.contact{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{text-decoration:none; font-weight:700; font-size:14.5px; padding:12px 22px; border-radius:999px;
  border:1px solid var(--line); background:rgba(18,26,42,.7); color:var(--ink); transition:border-color .18s, transform .18s}
.btn:hover{border-color:var(--accent); transform:translateY(-2px)}
.btn.primary{color:#04121a; border:none; background:linear-gradient(120deg,var(--accent),var(--accent2)); box-shadow:0 10px 32px rgba(94,234,212,.26)}
.fine{text-align:center; color:#5b6b86; font-size:12px; margin-top:22px}