:root{
  --bg:#f7fafc;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --accent:#0ea5e9;
  --accent-2:#22d3ee;
  --ring: rgba(14,165,233,.25);
  --border:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  color: var(--text);
  background:
    linear-gradient(0deg, rgba(255,255,255,.9), rgba(255,255,255,.9)),
    url('assets/volleyball-bg.svg') center/cover fixed,
    var(--bg);
  line-height:1.6;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{color:#0284c7}
.container{width:min(1100px,92%); margin-inline:auto}
.nav{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.85); backdrop-filter: blur(8px); border-bottom:1px solid var(--border)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px}
.brand img{height:42px; width:auto; border-radius:.25rem}
.menu{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.menu a{padding:.55rem .85rem; border-radius:.55rem; color:var(--text)}
.menu a:hover{background:#f1f5f9}
/* dropdown */
.menu ul, .menu li{list-style:none; margin:0; padding:0}
.menu .has-dropdown{position:relative}
.menu .has-dropdown > a::after{content:"▾"; font-size:.8rem; margin-left:.35rem; color:#64748b}
.dropdown{position:absolute; top:100%; left:0; min-width:180px; background:#ffffff; border:1px solid var(--border); border-radius:.6rem; box-shadow:0 10px 20px rgba(2,6,23,.08); padding:.4rem; display:none}
.dropdown a{display:block; color:var(--text); padding:.5rem .6rem; border-radius:.45rem}
.dropdown a:hover{background:#f1f5f9}
.has-dropdown:hover .dropdown{display:block}
.hero{padding:72px 0 40px}
.hero h1{font-size:clamp(2rem,6vw,3.2rem); line-height:1.08; margin:0 0 .6rem 0}
.hero p{color:var(--muted); font-size:clamp(1rem,2.4vw,1.15rem)}
.cta{margin-top:1rem; display:flex; gap:.6rem; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; padding:.7rem 1rem; border-radius:.6rem; border:1px solid var(--border); background:#ffffff; color:var(--text); transition:.15s all ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 12px rgba(2,6,23,.08)}
.btn-accent{border-color:transparent; color:white; background:linear-gradient(90deg, var(--accent), var(--accent-2)); font-weight:700}
.section{padding:28px 0}
.h{margin:1.2rem 0 .6rem; font-weight:800; letter-spacing:.2px}
.grid{display:grid; gap:1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){ .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} }
.card{background: var(--panel); border:1px solid var(--border); border-radius:.9rem; padding:1.1rem}
.table{width:100%; border-collapse:collapse; font-size:.95rem}
.table th,.table td{padding:.7rem .6rem; border-bottom:1px solid var(--border); text-align:left}
.table th{color:var(--muted); font-weight:600}
.input, textarea, select, input[type='date']{width:100%; padding:.8rem 1rem; border-radius:.6rem; border:1px solid var(--border); background:#fff; color:var(--text); outline:none}
.input:focus, textarea:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--ring)}
footer{margin:50px 0; color:var(--muted); font-size:.95rem}
.small{font-size:.9rem; color:var(--muted)}
hr{border:none; height:1px; background:var(--border); margin:2rem 0}