:root {
  --bg:#0b0b0c;
  --fg:#e7e7e7;
  --muted:#b5b5b5;
  --accent:#b9ff66;
  --card:#141417;
  --border:#1e1e22;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: url("../images/background.jpg") no-repeat center center fixed;
  background-size: cover;
  color: var(--fg);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  line-height:1.6;
}
.overlay{ position:fixed; inset:0; background: rgba(0,0,0,.55); z-index:0;}
.wrap{width:min(1100px,92%); margin-inline:auto; position:relative; z-index:1}
header{padding:48px 0 12px}
h1{margin:0 0 8px; font-weight:700; letter-spacing:2px; font-size:clamp(26px,4vw,44px)}
.tabs{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 6px}
.tablink{
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  transition: background .25s ease, transform .15s ease;
}
.tablink:hover{background: var(--accent); color: var(--bg); transform: translateY(-2px)}
.tablink.active{background: var(--accent); color: var(--bg)}
.card{
  background: rgba(20,20,23,.85);
  backdrop-filter: blur(6px);
  border:1px solid var(--border);
  border-radius:14px;
  padding:22px;
  margin:20px 0;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.tabcontent{display:none}
h2{margin:0 0 12px; font-size:1.1rem; color:var(--accent)}
.me-pic{
  max-width:320px; width:100%;
  margin-top:14px; border-radius:12px; border:1px solid var(--border); display:block;
}
.contact-list{list-style:none; padding:0; margin:0}
.contact-list li{margin:10px 0}
.contact-list a{color:var(--accent); font-weight:700; text-decoration:none}
.contact-list a:hover{text-decoration:underline}
.foot{display:flex; justify-content:space-between; align-items:center; padding:20px 0 60px; color:#cfcfcf}