:root{
  --bg:#050406;
  --panel:#0f0b12;
  --accent:#ff4fa3;
  --muted:#9aa0a6;
  --glass: rgba(255,255,255,0.03);
  --maxw:920px;
  --radius:16px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(79,33,82,0.18), transparent 8%),
              radial-gradient(1000px 500px at 90% 90%, rgba(15,46,78,0.08), transparent 6%),
              var(--bg);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
.wrap{max-width:var(--maxw);margin:36px auto;padding:24px}
header{display:flex;gap:20px;align-items:center}
.avatar{
  width:140px;height:140px;border-radius:18px;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,0.6),0 0 30px rgba(255,79,163,0.06);
  border:1px solid rgba(255,255,255,0.04);
  background:linear-gradient(180deg,#1b0b1a,#0b0710);
  flex:0 0 140px;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.hero h1{margin:0;font-size:2.1rem;color:var(--accent);letter-spacing:0.6px}
.hero p.lead{margin:8px 0 0;color:var(--muted);font-size:0.98rem}
.badges{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:600;
  background:linear-gradient(90deg,var(--accent),#ff85c1);color:#000;
  box-shadow:0 6px 18px rgba(255,79,163,0.12);
}
.btn.ghost{
  background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--accent);
  box-shadow:none;
}
main{margin-top:28px;display:grid;grid-template-columns:1fr 320px;gap:28px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:var(--radius);padding:18px;border:1px solid rgba(255,255,255,0.03);
  box-shadow:0 6px 30px rgba(2,2,2,0.6);
}
.section h2{margin:0 0 10px;color:var(--accent);font-size:1.05rem}
.about p{color:var(--muted);margin:0 0 10px}
.links a{display:block;text-decoration:none;color:#fff;padding:8px 10px;border-radius:10px;margin:6px 0;background:var(--glass);border:1px solid rgba(255,255,255,0.02)}
.meta{font-size:0.9rem;color:var(--muted);margin-top:8px}
.right .widget{margin-bottom:18px}
.press a{display:inline-block;padding:8px 12px;border-radius:10px;background:rgba(255,79,163,0.09);color:var(--accent);text-decoration:none;font-weight:600}
footer{margin-top:28px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.02);color:#8d8d8d;font-size:0.9rem}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.02);color:var(--muted);font-size:0.9rem;margin-right:8px;}
.socials{display:flex;gap:10px;margin-top:10px}
.socials a{color:var(--muted);text-decoration:none;border-radius:8px;padding:8px;background:rgba(255,255,255,0.01);display:inline-flex;align-items:center;gap:8px}
/* responsive */
@media (max-width:880px){
  .wrap { margin: 20px auto; padding: 16px; }
  main{grid-template-columns:1fr; gap: 20px; }
  .avatar{width:110px;height:110px; flex: none; }
  header { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 16px; 
  }
  .hero { 
    width: 100%; 
    text-align: left; 
  }
  .hero h1 { 
    font-size: 1.8rem; 
    margin-top: -10px; /* Смещение hero вверх относительно аватара для визуального "подъема" аватара */
  }
  .badges { 
    flex-direction: column; 
    align-items: stretch; 
  }
  .btn { 
    text-align: center; 
    margin-bottom: 8px; 
  }
  .right { 
    order: -1; /* Сайдбар перемещается вверх в мобильной версии */
  }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 1.6rem; }
  .card { padding: 14px; }
  .section h2 { font-size: 1rem; }
}