:root{
      --bg:#080b13;
      --card:#0f1724;
      --accent:#2563eb;
      --accent-hover:#1e40af;
      --muted:#cbd5e1;
    }
    *{box-sizing:border-box}
    body {
      font-family: Arial, sans-serif;
      background: var(--bg);
      color: white;
      margin: 0;
      padding: 40px 20px;
      -webkit-font-smoothing:antialiased;
    }
    .container{max-width:900px;margin:0 auto;text-align:center}
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:24px;border-radius:12px;margin-bottom:18px}
    h1,h2{margin:8px 0}
    h1{font-size:28px}
    p{color:var(--muted);margin:6px 0}
    .profile-img{border-radius:50%;width:200px;height:200px;object-fit:cover}
    .header-flex{display:block;text-align:center}
    .section{background:transparent;padding:18px 12px;border-radius:10px;margin-bottom:12px;text-align:left}
    .section h2{color:#ffffff;margin-bottom:8px}
    .placeholder{color:var(--muted)}
    .skills{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
    .skills li{background:#111827;padding:8px 12px;border-radius:8px;color:var(--muted)}
    .social{display:flex;gap:10px;flex-wrap:wrap}
    .social a{display:inline-block;padding:10px 14px;background:var(--accent);color:white;text-decoration:none;border-radius:8px;font-weight:600}
    .social a:hover{background:var(--accent-hover)}
    .header-social{display:flex;gap:8px;margin-top:12px}
    .social-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--accent);color:white;border-radius:10px;text-decoration:none}
    .social-btn svg{width:20px;height:20px}
    .social-btn:hover{background:var(--accent-hover);transform:translateY(-2px)}
    .intro{ text-align:justify; text-justify:inter-word; line-height:1.5; color:var(--muted)}
    @media(min-width:700px){
      .header-flex{display:flex;align-items:center;gap:20px;text-align:left}
      .header-info{flex:1}
    }