:root{
  --bg:#0b1020; --bg2:#0a0f1c; --panel:#10182a; --card:#121a28;
  --ink:#eef2f7; --muted:#a8b3c7; --line:#2a3650;
  --accent:#e9cf7d; --accent2:#8de0c7;
  --radius-xl:26px; --radius:18px;
  --shadow-sm:0 4px 14px rgba(0,0,0,.28);
  --shadow:0 18px 40px rgba(4,12,30,.45);
  --max:1160px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--ink);
  background:
    radial-gradient(60% 50% at 15% -10%, rgba(233,207,125,.10), transparent 60%),
    radial-gradient(60% 40% at 85% -10%, rgba(141,224,199,.10), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
header{
  position:sticky;top:0;z-index:20;background:rgba(10,15,28,.6);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(168,179,199,.18)
}
nav{display:flex;justify-content:space-between;align-items:center;min-height:66px}
nav .links{display:flex;gap:.6rem;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.65rem 1rem;border:1px solid rgba(255,255,255,.14);
  border-radius:999px;background:linear-gradient(180deg,#1a2336,#0f172a);
  box-shadow:var(--shadow-sm);font-weight:600;transition:.2s;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.27)}
.hero{
  padding:86px 0 48px;border-bottom:1px solid rgba(168,179,199,.15)
}
.h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.04;margin:0 0 .8rem}
.h2{font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.18;margin:.2rem 0 .7rem}
.lead{color:var(--muted);max-width:62ch}
.grid{display:grid;gap:1.2rem}
@media(min-width:900px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{
  background:linear-gradient(180deg, #10172a 0%, #0e1626 100%);
  border:1px solid rgba(168,179,199,.22);
  border-radius:var(--radius-xl);
  padding:1.2rem; box-shadow:var(--shadow)
}
ul.clean{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
li.dot{display:flex;align-items:flex-start;gap:.6rem}
li.dot::before{content:"•";color:var(--accent);margin-top:.05rem}
footer{padding:30px 0;color:var(--muted);border-top:1px solid rgba(168,179,199,.18);text-align:center;margin-top:24px}
.pill{background:rgba(233,207,125,.14);border:1px solid rgba(233,207,125,.35);color:#fff3cd;padding:.38rem .75rem;border-radius:999px;font-size:.82rem}
.yin{width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;
  background:linear-gradient(160deg,#1a2336,#0f172a);box-shadow:var(--shadow-sm)}
.badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(12,18,34,.7);
  border:1px solid rgba(168,179,199,.3);border-radius:999px;padding:.42rem .7rem}
.kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:8px;padding:.15rem .35rem;background:#0a1122}
.gallery{display:grid;gap:1rem}
@media(min-width:900px){.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
.profile-card{
  overflow:hidden;border-radius:22px;border:1px solid rgba(168,179,199,.2);background:linear-gradient(180deg,#0f1628,#0b1323);
}
.profile-card img{width:100%;height:260px;object-fit:cover;display:block;filter:contrast(1.05) saturate(1.02)}
.profile-card .meta{padding:.9rem}
.meta .name{font-weight:700}
.meta .role{color:var(--muted);font-size:.95rem}
.soft-ring{box-shadow:0 0 0 8px rgba(233,207,125,.06), 0 0 0 2px rgba(233,207,125,.18);border-radius:999px}