:root{
  --bg:#0b0b12;
  --panel:#111325;
  --muted:#a0a8b8;
  --text:#f1f4fb;
  --accent:#6c4bf4;
  --accent-2:#8a6cff;
  --ring: rgba(108,75,244,.45);
}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 700px at 50% -10%, rgba(108,75,244,.16), transparent 55%), var(--bg);
  color:var(--text);
  line-height:1.6;
}

.container{max-width:1080px;margin:auto;padding:20px}
img{max-width:100%;display:block}

.nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(150%) blur(8px);
  background:rgba(11,11,18,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav .inner{display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:800}
.brand img{width:32px;height:32px;border-radius:50%;filter:drop-shadow(0 0 18px var(--ring))}
.links{margin-left:auto;display:flex;gap:6px}
.links a{
  color:var(--text);text-decoration:none;opacity:.9;
  padding:10px 12px;border-radius:12px;
}
.links a:hover{background:rgba(255,255,255,.06)}
.links a.active{background:rgba(108,75,244,.14); outline:1px solid rgba(108,75,244,.35)}

.hero{
  display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;
  padding:28px 0 8px;
}
.hero h1{font-size:clamp(28px, 4vw, 46px);line-height:1.1;margin:0 0 10px}
.hero p{color:var(--muted);font-size:1.06rem;margin:0}
.actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.button{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(108,75,244,.18), rgba(108,75,244,.06));
  color:var(--text);text-decoration:none;font-weight:700;
  box-shadow:0 8px 24px -12px var(--ring);
}
.button:hover{border-color:rgba(108,75,244,.35); background:linear-gradient(180deg, rgba(108,75,244,.28), rgba(108,75,244,.1))}
.button.secondary{background:rgba(255,255,255,.04)}

.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;padding:18px;
}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px}
.card h3{margin:0 0 8px}
.small{font-size:.95rem;color:var(--muted)}
.kbd{font-family: ui-monospace, monospace;background:rgba(255,255,255,.06); padding:2px 6px; border-radius:6px; border:1px solid rgba(255,255,255,.12)}

.footer{opacity:.8;padding:26px 0;border-top:1px dashed rgba(255,255,255,.1);margin-top:34px;font-size:.95rem}

.command{display:flex;align-items:flex-start;gap:12px}
.command .slash{font-weight:800;color:var(--accent);filter:drop-shadow(0 0 10px var(--ring))}
.command .desc{color:var(--muted)}

.staff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.staff-card{
  background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:12px;
  max-width: 240px; margin: 0 auto; text-align:center;
}
.staff-card img{width:100%;height:150px;object-fit:cover;border-radius:10px; box-shadow:0 10px 28px -16px var(--ring)}
.staff-card h3{margin:8px 0 4px;font-size:1.02rem}
.badge{display:inline-block;font-size:.78rem;padding:4px 8px;border-radius:999px;border:1px solid rgba(108,75,244,.35);background:rgba(108,75,244,.12);color:#dcd6ff}

@media (max-width: 860px){
  .hero{grid-template-columns:1fr}
  .container{padding:16px}
}
@media (max-width: 420px){
  .brand span{display:none}
  .staff-card{max-width:200px}
}