:root{
  --bg:#0a1c28; --panel:#0e2634; --card:rgba(14,38,52,.78); --border:#1e3a4d;
  --text:#eaf6ff; --muted:#9ec9e8; --brand1:#66b3ff; --brand2:#1e40af;
  --accent:#3ba0ff; --accent2:#6ee7ff; --ok:#22c55e; --bad:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 50% -10%,#12344a,transparent),var(--bg); color:var(--text); font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:26px 20px}
.nav{position:sticky;top:0;z-index:10;background:rgba(10,28,40,.7);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav .row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-size:26px;font-weight:900}
.brand img{width:36px;height:36px}
.menu{display:flex;gap:8px;align-items:center}
.menu a{padding:10px 14px;border-radius:12px;border:1px solid transparent}
.menu a:hover{border-color:var(--border);background:rgba(255,255,255,.04)}
.switch{padding:8px 12px;border-radius:12px;border:1px solid var(--border);cursor:pointer;color:var(--muted)}

.section{padding:38px 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){ .grid3{grid-template-columns:1fr} }
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 12px 30px rgba(0,0,0,.25) inset}
.badge{display:inline-block;padding:6px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted)}
.btn{padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#102a3a;color:var(--text);cursor:pointer}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#042033;border:none}
.hero{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.logo{width:56px;height:56px;border-radius:14px;overflow:hidden}
h1,h2{margin:0 0 14px 0}
.stat{display:flex;align-items:center;justify-content:space-between}
.stat b{font-size:32px}
.kpi{display:flex;gap:20px;margin-top:10px;align-items:center}
.pill{padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.status{font-weight:800;padding:6px 10px;border-radius:999px}
.status.ok{background:#0d2b19;border:1px solid #164e2a;color:#86efac}
.status.bad{background:#2b1111;border:1px solid #5a1e1e;color:#fecaca}
.copy{display:flex;gap:10px;align-items:center;margin-top:10px}
.small{color:var(--muted);font-size:13px}
.footer{padding:26px 0;border-top:1px solid var(--border);text-align:center;color:var(--muted)}

.staff{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){ .staff{grid-template-columns:1fr} }
.member{border:1px solid var(--border);border-radius:18px;background:var(--card);overflow:hidden}
.member .photo{height:170px}
.member .photo img{width:100%;height:100%;object-fit:cover;display:block}
.member .body{padding:14px}
.member h3{margin:0 0 4px 0}
.role{color:var(--muted);font-weight:700;margin-bottom:8px}

/* --- Team badges like contact page --- */
.member{display:grid;grid-template-columns:84px 1fr;gap:16px;padding:18px}
.member .photo{height:auto}
.badge-avatar{width:64px;height:64px;border-radius:999px;display:grid;place-items:center;
  font-weight:900;font-size:24px;color:white;
  background:linear-gradient(145deg,#5ab0ff,#1f49c6);box-shadow:inset 0 2px 10px rgba(255,255,255,.2)}
.member h3{font-size:18px;margin:0 0 4px}
.member .role{margin:0 0 8px;color:var(--muted)}
.member p{margin:0;color:#cfe9ff;line-height:1.4}
/* cards slightly deeper for staff */
#echipa .member{background:linear-gradient(180deg, rgba(14,38,52,.9), rgba(14,38,52,.75));}

/* ===== Light theme tokens ===== */
:root[data-theme="light"]{
  --bg:#f5fbff; --panel:#ffffff; --card:#ffffffcc; --border:#d5e6f3;
  --text:#06293d; --muted:#3f6b86; --brand1:#0ea5e9; --brand2:#1d4ed8;
  --accent:#3793ff; --accent2:#7ed2ff; --ok:#16a34a; --bad:#dc2626;
  background: radial-gradient(1200px 600px at 50% -10%, #dff1ff, #f5fbff);
}
:root[data-theme="light"] .nav{background:rgba(255,255,255,.85)}
:root[data-theme="light"] .btn{background:#e9f5ff; border-color:#cfe6f6; color:#08324a}
:root[data-theme="light"] .btn.primary{color:#042033}

/* Navbar small icon */
.nav-icon{font-size:18px; margin-right:6px; filter:drop-shadow(0 0 8px rgba(99,179,237,.6))}

/* Role chips (gradient labels) */
.role-chip{display:inline-block;padding:4px 10px;border-radius:999px;font-weight:800;font-size:12px;color:white;letter-spacing:.2px}
.role-founder{background:linear-gradient(135deg,#fb7185,#ef4444)}
.role-director{background:linear-gradient(135deg,#38bdf8,#2563eb)}
.role-scripter{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.role-web{background:linear-gradient(135deg,#10b981,#059669)}
.role-co{background:linear-gradient(135deg,#a78bfa,#6366f1)}
.role-support{background:linear-gradient(135deg,#f472b6,#ec4899)}

/* Staff card animations */
.member{transform:translateY(12px); opacity:0; transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s}
.member.appear{transform:none; opacity:1}
.member:hover{box-shadow:0 10px 24px rgba(0,0,0,.25), 0 0 0 1px var(--border)}
.badge-avatar{transition:transform .25s}
.member:hover .badge-avatar{transform:scale(1.06)}

/* nicer footer center */
.footer .container{display:flex;justify-content:center;align-items:center}

/* --- Staff animations hard --- */
#echipa .member{
  opacity:0;
  transform:translateY(16px);
  will-change: transform, opacity;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .55s;
}
#echipa .member.appear{
  opacity:1;
  transform:none;
}
@keyframes pop-in{
  from{opacity:0; transform:translateY(18px) scale(.98)}
  to{opacity:1; transform:none}
}
#echipa .member.pop { animation: pop-in .55s both; }
.role-chip{ box-shadow: 0 2px 10px rgba(0,0,0,.25), inset 0 1px 6px rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.15); }

/* === Staff polished layout === */
.member .head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.member .name{font-weight:900;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member:hover{border-color:rgba(99,179,237,.5); box-shadow:0 10px 24px rgba(0,0,0,.25), 0 0 0 1px rgba(99,179,237,.2), 0 0 22px rgba(99,179,237,.15) inset}
.badge-avatar{background:linear-gradient(145deg,#5ab0ff,#2463eb);}
/* staggered delay via nth-child */
#echipa .member:nth-child(1){transition-delay:0ms} 
#echipa .member:nth-child(2){transition-delay:90ms}
#echipa .member:nth-child(3){transition-delay:180ms}
#echipa .member:nth-child(4){transition-delay:0ms}
#echipa .member:nth-child(5){transition-delay:90ms}
#echipa .member:nth-child(6){transition-delay:180ms}

/* === v8.5 — Gradient roles + animated staff cards === */
#echipa .member{
  background: linear-gradient(145deg, #0b1925, #112535);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 18px 22px;
  position: relative;
  overflow: hidden;
  transition: transform .40s ease, box-shadow .40s ease, border-color .40s ease;
  opacity:0;
  animation: fadeUp .8s ease forwards;
}
#echipa .member:nth-child(1){animation-delay:.10s}
#echipa .member:nth-child(2){animation-delay:.25s}
#echipa .member:nth-child(3){animation-delay:.40s}
#echipa .member:nth-child(4){animation-delay:.55s}
#echipa .member:nth-child(5){animation-delay:.70s}
#echipa .member:nth-child(6){animation-delay:.85s}

#echipa .member::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(600px 200px at 20% -10%, rgba(59,130,246,.18), transparent 60%);
  opacity:0; transition:opacity .4s ease;
}
#echipa .member:hover{
  transform: translateY(-6px);
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 22px rgba(59,130,246,.22);
}
#echipa .member:hover::before{ opacity:1; }

/* gradient text for roles */
.role-chip{
  background: linear-gradient(90deg, #60a5fa, #818cf8, #c084fc);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; color:transparent;
  font-weight:800; letter-spacing:.35px; text-transform:none;
  border:none; box-shadow:none;
}

/* optional stronger variants per-role */
.role-founder{ background-image:linear-gradient(90deg,#60a5fa,#22d3ee,#34d399); }
.role-director{ background-image:linear-gradient(90deg,#93c5fd,#60a5fa,#3b82f6); }
.role-scripter{ background-image:linear-gradient(90deg,#fbbf24,#fb7185,#f472b6); }
.role-web{ background-image:linear-gradient(90deg,#34d399,#22c55e,#10b981); }
.role-co{ background-image:linear-gradient(90deg,#a78bfa,#8b5cf6,#6366f1); }
.role-support{ background-image:linear-gradient(90deg,#f472b6,#ec4899,#fb7185); }

/* entrance */
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(25px) scale(.98); }
  to{ opacity:1; transform:none; }
}

/* === v8.5.2 — fix name truncation in staff cards === */
.member .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.member .name{flex:1 1 auto;min-width:180px;white-space:normal;overflow:visible;text-overflow:unset;font-weight:900;font-size:18px}
.member .role-chip{flex:0 0 auto;white-space:nowrap}
@media (max-width: 980px){
  .member .name{min-width:140px}
}
@media (max-width: 760px){
  .member .name{min-width:120px}
}

/* === v8.6 — Cinematic Staff Animations === */

/* Animated neon border using a masked spinning conic gradient */
#echipa .member{
  position:relative;
  isolation:isolate;
  transform-style:preserve-3d;
}
#echipa .member::after{
  content:""; position:absolute; inset:-1px; border-radius:18px;
  background:
    conic-gradient(from 0deg, #60a5fa, #a78bfa, #34d399, #60a5fa);
  filter: blur(0.5px);
  z-index:-1;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding:1px;
  opacity:.0;
  transition:opacity .35s ease;
  animation: spinBorder 8s linear infinite;
}
#echipa .member:hover::after{ opacity:.6; }
@keyframes spinBorder{ to{ transform: rotate(360deg); } }

/* Floating avatar + inner glow */
#echipa .badge-avatar{
  box-shadow: inset 0 6px 18px rgba(255,255,255,.25), 0 6px 18px rgba(64,139,255,.35);
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
}

/* Role chips shimmering */
.role-chip{
  background-size: 200% 100%;
  animation: shine 6s ease-in-out infinite;
}
@keyframes shine{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}

/* Slight 3D tilt shadow */
#echipa .member.hovered{
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #echipa .member::after, .role-chip, #echipa .badge-avatar{ animation:none }
}