:root{--text:#e6f6ff;--muted:#9ac7da;--panel:#071527;--panel2:#0a213b;--blue1:#5ee7ff;--blue2:#4facfe}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;color:var(--text);
  background:url('../assets/bg-name.svg') center/cover fixed no-repeat #02162f;min-height:100vh}
.container{max-width:1000px;margin:0 auto;padding:24px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.id{display:flex;align-items:center;gap:12px}
.subtitle{color:var(--muted)}
.nav{display:flex;align-items:center;gap:10px}
.btn{border:1px solid rgba(255,255,255,.15);background:rgba(7,21,39,.6);color:var(--text);
  border-radius:12px;padding:8px 12px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px)}
.btn.primary{background:linear-gradient(90deg,var(--blue1),var(--blue2));color:#052035;border:0}
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:20px;margin:24px 0;box-shadow:0 6px 30px rgba(0,0,0,.35)}
.hero .top{display:flex;flex-direction:column;align-items:center}
.ring{width:200px;height:200px;border-radius:50%;display:grid;place-items:center;
  background: radial-gradient(closest-side,#ffffffee,#ffffff99 60%,transparent 62%);
  border:2px solid var(--blue2); box-shadow:0 0 0 6px rgba(94,231,255,.18), 0 0 0 12px rgba(79,172,254,.10)}
.avatar.big{width:160px;height:160px;border-radius:50%;object-fit:cover;border:4px solid #cae9ff}
.toolbar{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.node{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text);cursor:pointer}
.node img{width:76px;height:76px;border-radius:999px;padding:10px;background: radial-gradient(circle at 30% 30%, #031a2b, #05253b 60%, #031223 100%);
  border:2px solid var(--blue2);box-shadow:0 0 0 2px rgba(255,255,255,.06) inset,0 0 16px rgba(79,172,254,.35),0 10px 24px rgba(0,0,0,.28)}
.node:hover img{animation:spin var(--spin-speed, 2.2s) linear infinite, glow 2.8s ease-in-out infinite alternate}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(calc(360deg * var(--spin-dir, 1)))}}
@keyframes glow{
  0%{box-shadow:0 0 14px rgba(79,172,254,.34),0 0 34px rgba(94,231,255,.16),0 10px 24px rgba(0,0,0,.28)}
  100%{box-shadow:0 0 22px rgba(94,231,255,.48),0 0 54px rgba(79,172,254,.32),0 10px 24px rgba(0,0,0,.28)}
}
.node.is-active img{outline:3px solid rgba(94,231,255,.6);outline-offset:3px}
.node span{font-size:13px;color:#f4fbff;text-align:center;letter-spacing:.3px;padding:4px 10px;border-radius:10px;
  background:linear-gradient(180deg, rgba(7,21,39,.65), rgba(7,21,39,.35));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(4px);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.panel.dynamic .content{background:#ffffffee;color:#0b1020;border-radius:18px;padding:18px 20px;box-shadow:0 10px 30px rgba(0,0,0,.25);border:1px solid #dbe5ee}
.panel.dynamic .content h2{margin:0 0 8px 0}
.site-footer{color:var(--muted);text-align:center;font-size:14px;margin-top:12px}
@media print{.ring{width:90px;height:90px}.avatar.big{width:70px;height:70px;border-width:2px}}

/* ==== MATRIX FONAS (pridėta) ==== */
#matrix-bg{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
  mix-blend-mode: screen;
  opacity: .85;
}
.site-header, main, .site-footer{ position: relative; z-index: 1; }
@media print{ #matrix-bg{ display:none !important; } }