/* Aurora Winter Theme - fresh animated design */
:root{
  --bg1:#0b1220;
  --bg2:#152342;
  --aurora1:#2fa8ff;
  --aurora2:#8ad1ff;
  --aurora3:#b8e1ff;
  --accent:#49b3ff;
  --text:#e9f5ff;
  --muted:#bcd4f1;
  --glass: rgba(255,255,255,0.08);
  --glass-strong: rgba(255,255,255,0.12);
  --border: rgba(255,255,255,0.18);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 700px at 10% -10%, #11305c 0%, transparent 60%),
              radial-gradient(1200px 700px at 110% 10%, #0b2e57 0%, transparent 60%),
              linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  overflow-x:hidden;
}

/* Animated Aurora backdrop */
.aurora{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 80% at 20% 10%, rgba(47,168,255,.25) 0%, transparent 60%),
    radial-gradient(40% 60% at 80% 20%, rgba(138,209,255,.22) 0%, transparent 60%),
    radial-gradient(50% 70% at 50% 0%, rgba(184,225,255,.18) 0%, transparent 60%);
  filter: blur(30px) saturate(120%);
  animation: auroraShift 26s ease-in-out infinite alternate;
}
@keyframes auroraShift{
  0%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-3%) scale(1.05); }
  100%{ transform: translateY(2%) scale(1.02); }
}

/* Snow Canvas */
#snowCanvas{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
}

/* Header */
header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,14,25,.85), rgba(10,14,25,.55));
  border-bottom: 1px solid var(--border);
}
.nav{
  max-width: 1200px; margin: 0 auto; padding: 14px 18px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.3px;
}
.brand .badge{font-size:1.2rem}
.brand span{font-size:1.05rem; opacity:.85}
nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0;}
nav a{
  color: var(--text); text-decoration:none; font-weight:700; font-size:.98rem;
  padding:8px 12px; border-radius: 999px; opacity:.9;
}
nav a:hover{ background: var(--glass); }

/* Burger */
.burger{display:none; flex-direction:column; gap:4px; cursor:pointer;}
.burger div{ width:26px; height:3px; background:var(--text); border-radius:3px; }

@media (max-width: 860px){
  nav ul{ display:none; position:absolute; right:18px; top:58px; flex-direction:column; background:rgba(10,14,25,.92); padding:10px; border-radius:12px; border:1px solid var(--border); box-shadow: var(--shadow); }
  nav ul.show{ display:flex; }
  .burger{display:flex;}
}

/* Hero */
.hero{
  min-height: 82vh; display:grid; place-items:center; text-align:center; padding: 80px 18px 40px;
  position:relative;
}
.hero h1{
  font-size: clamp(2rem, 3.8vw + 1rem, 3.6rem);
  line-height: 1.1;
  text-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.hero p{ max-width: 760px; margin: 14px auto 24px; color: var(--muted); font-size: 1.1rem; }
.cta{ display:inline-flex; gap:12px; }
.btn{
  background: linear-gradient(180deg, #b8e1ff, #2fa8ff);
  color:#08243f; border: none; border-radius: 999px; padding: 12px 22px; font-weight:900;
  box-shadow: 0 8px 24px rgba(47,168,255,.35); text-decoration:none;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 30px rgba(47,168,255,.45); }
.btn.ghost{ background: transparent; color: var(--text); border:1px solid var(--border); box-shadow:none; }
.btn.ghost:hover{ background: var(--glass); }

/* Sections */
.section{ padding: 70px 18px; }
.container{ max-width: 1100px; margin:0 auto; }

.grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(12, 1fr);
}
.card{
  grid-column: span 12;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 20px; box-shadow: var(--shadow);
}
.card h3{margin-top:0}
.card p{color: var(--muted)}

@media (min-width: 860px){
  .span-6{ grid-column: span 6; }
  .span-4{ grid-column: span 4; }
  .span-8{ grid-column: span 8; }
}

/* Members */
.members{display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:14px;}
.member{
  background: var(--glass-strong); border:1px solid var(--border); border-radius:14px; padding:14px; font-weight:800;
}

/* Footer */
footer{
  border-top:1px solid var(--border);
  margin-top:40px;
  background: linear-gradient(180deg, rgba(10,14,25,.35), rgba(10,14,25,.75));
  backdrop-filter: blur(8px);
  text-align:center; padding: 22px 18px;
}
footer .social{
  margin-top:8px; display:inline-flex; gap:12px; align-items:center;
}
.social a{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; text-decoration:none; background:var(--glass); border:1px solid var(--border); color:var(--text);}
.social a:hover{ background: var(--glass-strong); }

/* Floating sparkle */
.sparkle{
  position:absolute; inset: -20% -10% -10% -10%; pointer-events:none; z-index:-1;
  background:
    radial-gradient(4px 4px at 20% 30%, rgba(255,255,255,.6) 0%, transparent 60%),
    radial-gradient(3px 3px at 40% 60%, rgba(255,255,255,.5) 0%, transparent 60%),
    radial-gradient(5px 5px at 70% 20%, rgba(255,255,255,.6) 0%, transparent 60%),
    radial-gradient(4px 4px at 80% 70%, rgba(255,255,255,.55) 0%, transparent 60%);
  animation: float 18s linear infinite;
  opacity:.4;
}
@keyframes float{
  from{ transform: translateY(0); }
  to{ transform: translateY(4%); }
}