:root {
  --bg: #000;
  --glass: rgba(15,15,15,0.6);
  --line: rgba(255,255,255,0.1);
  --text: #f3f5f7;
  --muted: #b3b7bd;
  --brand: #e60000;
  --brand-2: #ff1515;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #000;
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
}
.snow { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.snow::before,.snow::after{content:"";position:absolute;inset:-200%;background-image:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.8),transparent),radial-gradient(1.5px 1.5px at 80% 40%,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 50% 70%,rgba(255,255,255,.5),transparent);background-size:400px 400px;animation:snow 60s linear infinite}
.snow::after{animation-duration:120s;opacity:.6}
@keyframes snow{from{transform:translateY(0)}to{transform:translateY(50%)}}
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; position: relative; z-index: 1; }
.profile {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
}
.banner { position: relative; height: 220px; }
.banner img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(40%) brightness(.45); }
.banner::after { content: ""; position:absolute; inset:0; background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.85)); }
.profile-body { padding: 0 24px 28px; text-align: center; margin-top: -78px; position: relative; z-index: 3; }
.avatar {
  width: 122px;
  height: 122px;
  border-radius: 50%;
  border: 4px solid #070707;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0 auto;
  box-shadow: 0 8px 26px rgba(0,0,0,.55);
  background: #000;
}
.title { margin: 14px 0 4px; font-size: 42px; letter-spacing: .8px; }
.subtitle { color: var(--muted); font-family: 'Poppins', sans-serif; margin: 0; }
.nav { margin: 20px 0 8px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.nav a {
  text-decoration: none;
  color: #fff;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  padding: 10px 16px;
  border-radius: 999px;
  font: 600 14px 'Poppins', sans-serif;
}
.nav a.active, .nav a:hover { background: linear-gradient(90deg,var(--brand),var(--brand-2)); border-color: transparent; }
.search { margin: 24px auto 10px; max-width: 520px; }
.search input { width: 100%; border: 1px solid var(--line); background: rgba(0,0,0,.6); color: #fff; border-radius: 14px; padding: 14px 16px; font: 500 15px 'Poppins', sans-serif; }
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-top: 20px; }
.card {
  position: relative;
  min-height: 165px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #060606;
  text-decoration: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.card::before { content:""; position:absolute; inset:0; background: var(--bg-img) center/cover no-repeat; filter: grayscale(100%) brightness(.35); transition:.35s; }
.card::after { content:""; position:absolute; inset:0; background: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.75)); }
.card:hover::before { transform: scale(1.08); filter: grayscale(0%) brightness(.6); }
.card > div { position: relative; z-index: 1; }
.card h3 { margin: 8px 0; font-size: 20px; }
.badge { display:inline-block; background: linear-gradient(90deg,var(--brand),var(--brand-2)); border-radius: 999px; padding: 6px 14px; font: 700 12px 'Poppins', sans-serif; }
.panel { background: var(--glass); border:1px solid var(--line); border-radius:16px; padding:16px; font-family:'Poppins',sans-serif; }
.table-row { border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px; background: rgba(255,255,255,.03); }
@media (max-width: 760px) {
  .title { font-size: 30px; }
  .banner { height: 180px; }
  .profile-body { margin-top: -72px; }
  .avatar { width: 110px; height: 110px; }
}


/* DFS TECH text palette */
.title{color:#f7f8fa;text-shadow:0 0 14px rgba(255,22,22,.18);}
.subtitle{color:#b9bec6;}
.nav a{color:#f4f6f8;}
.nav a.active,.nav a:hover{color:#fff;}
.card h3{color:#f2f4f7;text-shadow:0 0 10px rgba(255,20,20,.16);}
.txt-white{color:#f4f6f8;}
.txt-red{color:#ff2a2a;text-shadow:0 0 12px rgba(255,42,42,.35);}
.txt-muted{color:#b8bdc4;}

.wa-link{display:inline-flex;align-items:center;gap:6px;margin-left:6px;padding:3px 8px;border-radius:999px;background:#25D366;color:#fff;text-decoration:none;font:700 11px Poppins,sans-serif;border:1px solid rgba(0,0,0,.18)}
.wa-link:hover{filter:brightness(1.05)}
.wa-dot{font-weight:900;line-height:1}

.site-footer{
  margin: 44px auto 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align:center;
  font: 600 12px 'Poppins', sans-serif;
  color:#b8bdc4;
  opacity:.95;
  max-width: 980px;
}
.site-footer .dfs{
  color:#e60000;
}