:root{
  --bg:#0b0c10;
  --card:#12141b;
  --text:#e8eaf0;
  --muted:#a8b0c2;
  --line:#24293a;
  --accent:#7aa2ff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{color:inherit}
.container{max-width:980px;margin:0 auto;padding:24px}

.nav{display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand-group{display:flex;align-items:center;gap:12px}
.brand{font-weight:700;text-decoration:none}
.nav-links a{margin-left:14px;text-decoration:none;color:var(--muted)}
.nav-links a:hover{color:var(--text)}
.lang-switch{padding:4px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;font-weight:600}
.lang-switch:hover{border-color:var(--accent);color:var(--accent)}

.hero{padding:44px 0 18px;border-bottom:1px solid var(--line)}
.hero-header{display:flex;align-items:center;gap:24px;margin-bottom:10px}
.profile-pic{width:120px;height:120px;border-radius:50%;object-fit:cover;border:2px solid var(--line);flex-shrink:0}
.hero h1{font-size:44px;margin:0}
.subtitle{color:var(--muted);max-width:70ch;margin:0 0 18px}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.chip{
  padding:6px 10px;border:1px solid var(--line);border-radius:999px;
  color:var(--muted);font-size:13px;background:rgba(255,255,255,0.02);
}

.cta{display:flex;gap:10px;margin-top:10px}
.button{
  display:inline-block;padding:10px 14px;border-radius:12px;text-decoration:none;
  background:var(--accent);color:#0b0c10;font-weight:700;
}
.button.secondary{background:transparent;color:var(--text);border:1px solid var(--line);font-weight:600}
.button.secondary:hover{border-color:var(--muted)}

.section{padding:28px 0;border-bottom:1px solid var(--line)}
.section h2{margin:0 0 14px;font-size:22px}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card{
  display:block;padding:16px;border-radius:16px;background:var(--card);
  text-decoration:none;border:1px solid var(--line);
}
.card:hover{border-color:rgba(122,162,255,0.55)}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0 0 10px;color:var(--muted)}
.meta{font-size:12px;color:var(--muted)}
.thumb{width:100%;border-radius:14px;border:1px solid var(--line);margin-bottom:12px;display:block}

.timeline .item{display:grid;grid-template-columns:180px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.timeline .item:first-child{border-top:none}
.when{color:var(--muted);white-space:nowrap}
.what h3{margin:0 0 6px;font-size:16px}
.what p{margin:0 0 10px;color:var(--muted)}
.what ul{margin:0;padding-left:18px}
.what li{margin:6px 0}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.panel{padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.panel h3{margin:0 0 10px;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.panel ul{margin:0;padding-left:18px}
.panel li{margin:6px 0}

.kv{display:grid;grid-template-columns:140px 1fr;gap:8px;align-items:start}
.kv div{padding:4px 0}
.kv .k{color:var(--muted)}

.contact a{color:var(--accent);text-decoration:none}
.contact a:hover{text-decoration:underline}

.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.blog-card{
  display:flex;flex-direction:column;padding:0;border-radius:16px;background:var(--card);
  text-decoration:none;border:1px solid var(--line);overflow:hidden;
}
.blog-card:hover{border-color:rgba(122,162,255,0.55)}
.blog-thumb{width:100%;height:160px;object-fit:cover;border-bottom:1px solid var(--line)}
.blog-content{padding:16px}
.blog-content h3{margin:0 0 6px;font-size:16px}
.blog-content p{margin:0 0 10px;color:var(--muted);font-size:14px}
.loading{color:var(--muted)}
.error{color:#ff7a7a}

.footer{padding-top:18px;color:var(--muted)}

@media (max-width:720px){
  .nav{flex-direction:column;align-items:flex-start;gap:12px}
  .nav-links{margin-left:0}
  .nav-links a{margin-left:0;margin-right:14px}
  .cards{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .timeline .item{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  .hero-header{flex-direction:column;align-items:flex-start;gap:16px}
  .kv{grid-template-columns:1fr}
}