:root {
  --fg:#222; 
  --muted:#667085; 
  --bg:#fff; 
  --card:#f7f7f9;
  --accent:#ff1866; 
  --btn:#0e2740; 
  --border:#e5e7eb;
}* {
  box-sizing:border-box
}html, body {
  margin:0
}body {
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
}a {
  text-decoration:none
}header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; background:#fff;
  z-index:10;
}.brand {
  width:40px; height:40px; border:2px solid var(--accent); color:var(--accent);
  border-radius:50%; display:grid; place-items:center; font-weight:700;
}.nav-links {
  display:flex; gap:18px
}.nav-links a {
  color:#444; font-weight:600
}.nav-links a:hover {
  color:var(--accent)
}main {
  max-width:1100px; margin:0 auto; padding:24px 32px
}.hero {
  display:grid; grid-template-columns:420px 1fr; gap:48px; align-items:center;
  margin:24px 0 32px;
}.hero-media {
  position:relative; width:420px; height:420px
}.hero-blob {
  width:420px; height:420px; background:var(--accent);
  border-radius:50%; position:relative;
}.hero-photo {
  position:absolute; inset:0; width:420px; height:420px;
  border-radius:50%; object-fit:cover;
  z-index:1;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}.hero-title {
  font-size:52px; margin:0; white-space:nowrap; overflow:hidden;
}.hero-title.typing {
  border-right:none;
  animation:none;
}.hero-sub {
  font-size:20px;
  color:var(--muted);
  text-align: justify;
}.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:20px
}.avatar {
  width:90px; height:90px; border-radius:10px; border:1px solid var(--border);
  object-fit:cover; background:#fff
}.section {
  margin:28px 0
}.section h2 {
  margin:0 0 12px 0
}.accent {
  color:var(--accent)
}.btn {
  display:inline-block; padding:10px 14px; border-radius:8px;
  background:#e7eef8; color:#0e2740; border:1px solid #d7e2f0; font-weight:700;
}.btn:hover {
  filter:brightness(.95)
}.btn-dark {
  background:var(--btn); color:#fff; border-color:transparent
}.btn-dark:hover {
  filter:brightness(1.08)
}ul {
  padding-left:18px
}table {
  border-collapse:collapse; width:100%
}th, td {
  border:1px solid var(--border); padding:8px; text-align:left
}th {
  background:#f4f6f8
}input[type=text] {
  width:100%; padding:10px; border:1px solid var(--border); border-radius:8px;
}.center-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}.mt-12 {
  margin-top: 12px;
}.ml-8 {
  margin-left: 8px;
}.brand.centered {
  margin-left: auto;
  margin-right: auto;
}.block {
  display: block;
}.mt-10 {
  margin-top: 10px;
}.mt-14 {
  margin-top: 14px;
}.btn-row {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}.center-h {
  margin-left: auto;
  margin-right: auto;
}.full-center {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}