*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: Arial, sans-serif;
  background:#0b1220;
  color:#e9eefc;
}

.wrap{ width:min(980px,92%); margin:0 auto; }

.top-header{
  position:sticky;
  top:0;
  background:#0b1220;
  border-bottom:1px solid rgba(255,255,255,0.12);
  z-index:10;
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:12px;
}

.logo{
  font-weight:700;
  color:#e9eefc;
  text-decoration:none;
  font-size:16px;
}

.menu{
  display:flex;
  gap:10px;
  align-items:center;
}

.menu-link{
  color:#b9c4e2;
  text-decoration:none;
  padding:8px 10px;
  border-radius:8px;
  font-size:14px;
}

.menu-link:hover{
  background:rgba(255,255,255,0.06);
  color:#fff;
}

.menu-btn{
  display:none;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
}

.hero{ padding:34px 0 18px; }

.hero-row{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:14px;
  align-items:start;
}

.tagline{
  display:inline-block;
  padding:7px 10px;
  border-radius:18px;
  background:rgba(79,140,255,0.12);
  border:1px solid rgba(79,140,255,0.25);
  color:#9fc0ff;
  font-size:13px;
  margin:0 0 12px;
}

h1{
  margin:0 0 10px;
  font-size:34px;
  line-height:1.2;
}

h2{ margin:0 0 10px; font-size:24px; }
h3{ margin:0 0 8px; font-size:18px; }

.text{ margin:0 0 12px; line-height:1.65; font-size:15px; }
.muted{ color:#b9c4e2; }

.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 14px; }

.button{
  display:inline-block;
  padding:10px 14px;
  background:#4f8cff;
  color:#071226;
  text-decoration:none;
  border-radius:8px;
  font-weight:700;
  border:1px solid #4f8cff;
  font-size:14px;
}

.button:hover{ opacity:0.95; }

.button.outline{
  background:transparent;
  color:#e9eefc;
  border:1px solid rgba(79,140,255,0.45);
}

.button.small{ padding:8px 12px; font-size:13px; }

.info-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.box{
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  border-radius:10px;
  padding:12px;
}

.box-title{ font-size:12px; color:#b9c4e2; margin-bottom:6px; }
.box-link{ color:#e9eefc; text-decoration:none; word-break:break-word; }
.box-link:hover{ text-decoration:underline; }

.info-box{
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  border-radius:12px;
  padding:14px;
}

.name-badge{
  display:inline-block;
  padding:7px 10px;
  border-radius:8px;
  background:rgba(79,140,255,0.18);
  border:1px solid rgba(79,140,255,0.30);
  color:#9fc0ff;
  font-weight:700;
  margin-bottom:10px;
  font-size:14px;
}

.section{ padding:26px 0; }

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.card{
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  border-radius:12px;
  padding:14px;
}

.list{ margin:0; padding-left:18px; color:#b9c4e2; line-height:1.8; }

.row-between{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.search{
  width:min(280px,92vw);
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:#e9eefc;
  outline:none;
  font-size:14px;
}

.projects{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:12px;
}

.project-box{
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  border-radius:12px;
  padding:14px;
}

.mini-tags{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; }
.mini-tag{
  font-size:12px;
  padding:6px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);
  color:#b9c4e2;
}

.btn-row.small{ margin:0; }
.hide{ display:none; }

.contact-row{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:12px;
  align-items:start;
}

.form{ display:grid; gap:8px; }

.label{ font-size:13px; color:#b9c4e2; }

.input{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:#e9eefc;
  outline:none;
  font-size:14px;
}

textarea.input{ resize:vertical; }

.simple-link{ color:#9fc0ff; text-decoration:none; }
.simple-link:hover{ text-decoration:underline; }

.footer{
  border-top:1px solid rgba(255,255,255,0.12);
  padding:16px 0;
}

.footer-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

@media (max-width: 900px){
  h1{ font-size:30px; }
  .hero-row{ grid-template-columns:1fr; }
  .info-row{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .projects{ grid-template-columns:1fr; }
  .contact-row{ grid-template-columns:1fr; }
}

@media (max-width: 720px){
  .wrap{ width:92%; }
  .menu-btn{ display:inline-block; }
  .menu{
    display:none;
    position:absolute;
    right:4%;
    top:58px;
    flex-direction:column;
    width:min(240px,92vw);
    padding:12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.12);
    background:#0b1220;
  }
  .menu.open{ display:flex; }
  .menu-link{ width:100%; }
}

@media (max-width: 420px){
  h1{ font-size:26px; }
  .button{ width:100%; text-align:center; }
  .btn-row{ gap:8px; }
  .search{ width:100%; }
}