/* Modern RYL EN - enhanced animations, particle-friendly, shimmer and MMORPG vibe */
:root{
  --accent-a: #ff6b6b;
  --accent-b: #ffd36b;
  --bg-color: #071127;
  --glass: rgba(255,255,255,0.04);
  --muted: #9fb0c8;
  --container: 1300px;
  --glass-blur: 10px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
}

/* Background & effects canvas */
.has-bg .site-bg {
  position: fixed; inset: 0;
  background-color: var(--bg-color);
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center center;
  filter: saturate(0.95) brightness(0.72) contrast(0.95);
  z-index: -3;
  transition: transform 0.9s cubic-bezier(.2,.9,.2,1), opacity .6s ease;
  will-change: transform, opacity;
}
.has-bg::after{
  content: "";
  position: fixed; inset:0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.6) 70%);
  z-index:-2;
}

/* canvas overlays particles */
.effects-canvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* base */
*{box-sizing:border-box}
body{ margin:0; color:#eaf4ff; line-height:1.45; background:var(--bg-color) }
.container{ max-width:var(--container); margin:0 auto; padding:1rem; }

/* header */
.site-header{
  position: sticky; top:0; z-index:60;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.header-inner{ display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;gap:1rem; }
.brand{ display:flex;align-items:center;text-decoration:none;color:inherit }
.brand-logo{
  width:52px;height:52px;border-radius:12px;
  background: linear-gradient(135deg,var(--accent-a),var(--accent-b));
  display:flex;align-items:center;justify-content:center;font-weight:800;margin-right:0.75rem;box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  color:#081022;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease;
}
.brand-logo:hover{ transform: translateY(-4px) scale(1.03); box-shadow: 0 18px 50px rgba(255,107,107,0.18); }
.brand-text h1{ margin:0; font-size:1rem }
.brand-text small{ color:var(--muted); font-size:.82rem }

/* nav */
.main-nav{ display:flex;align-items:center;gap:.6rem }
.nav-link{ color:var(--muted); text-decoration:none; padding:.48rem .6rem; border-radius:8px; transition:all .16s ease; }
.nav-link:hover{ color:#fff; background: rgba(255,255,255,0.02) }
.nav-cta{ background: linear-gradient(90deg,var(--accent-a),var(--accent-b)); color:#081022; padding:.5rem .9rem; border-radius:999px; font-weight:700; text-decoration:none; box-shadow: 0 12px 36px rgba(255,107,107,0.12) }

/* hamburger */
.nav-toggle{ display:none; background:transparent; border:0; padding:.4rem; border-radius:8px; }
.hamburger{ display:block; width:22px; height:2px; background:#fff; position:relative; }
.hamburger::before,.hamburger::after{ content:''; position:absolute; left:0; right:0; height:2px; background:#fff; }
.hamburger::before{ top:-7px } .hamburger::after{ bottom:-7px }

/* hero */
.hero{ padding:4rem 0 }
.hero-grid{ display:grid; grid-template-columns: 1fr 360px; gap:2rem; align-items:start }
.hero-card{ padding:2.2rem; border-radius:16px; box-shadow: 0 18px 60px rgba(2,6,23,0.7) }
.glass{ background: var(--glass); backdrop-filter: blur(var(--glass-blur)); border:1px solid rgba(255,255,255,0.03) }

/* shimmer title */
.hero-title{ font-size:2.8rem; margin:0 0 .4rem; letter-spacing: -1px; font-weight:800; position:relative; z-index:2; }
.shimmer{
  display:inline-block;
  position:relative;
  background: linear-gradient(90deg, rgba(255,255,255,0.92), rgba(255,255,255,0.6));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 3.5s linear infinite;
  background-size: 200% 100%;
}
@keyframes shimmer {
  0%{ background-position: 0% 50% }
  50%{ background-position: 100% 50% }
  100%{ background-position: 0% 50% }
}

.hero-sub{ color:var(--muted); margin-bottom:1rem }
.hero-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem }
.btn{ display:inline-flex; align-items:center; gap:.45rem; padding:.6rem .95rem; border-radius:12px; color:inherit; text-decoration:none; font-weight:700; border:1px solid transparent; transition: all .16s cubic-bezier(.2,.9,.2,1) }
.btn.primary{ background: linear-gradient(90deg,var(--accent-a),var(--accent-b)); color:#081022; box-shadow: 0 18px 40px rgba(255,107,107,0.12) }
.btn.ghost{ background: rgba(255,255,255,0.03) }
.btn.outline{ background: transparent; border:1px solid rgba(255,255,255,0.06) }
.btn.discord{ background:#5865F2 }

/* chips */
.meta-chips{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:8px }
.chip{ background: rgba(255,255,255,0.03); padding:.45rem .8rem; border-radius:999px; color:var(--muted); font-size:.95rem }

/* hero note */
.hero-note{ color:var(--muted); margin-top:1rem; font-size:.95rem }

/* side cards */
.hero-side .card{ margin-bottom:1rem; padding:1rem; border-radius:12px }
.card.mini h4{ margin:0 0 .55rem }

/* news */
/* make news sit higher under the hero */
.section#news { margin-top: -28px; padding-top: 8px; position: relative; z-index: 5; }

/* keep original spacing fallback for other sections */
.section { padding: 3rem 0; }

/* responsive: reduce negative overlap on small screens */
@media (max-width: 900px) {
  .section#news { margin-top: -8px; padding-top: 12px; }
}
.section{ padding:1rem 0 } /* 3rem was original eykalzz*/
.news-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:1rem }
.news-card{ padding:1.1rem; border-radius:10px; transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease }
.news-card:hover{ transform: translateY(-8px); box-shadow: 0 20px 60px rgba(2,6,23,0.6) }

/* footer */
.site-footer{ padding:1.2rem 0; border-top:1px solid rgba(255,255,255,0.03); color:var(--muted) }
.site-footer .container{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap }

/* responsive behaviour */
@media (max-width:1000px){ .hero-grid{ grid-template-columns: 1fr 300px } }
@media (max-width:820px){
  .main-nav{ position:fixed; right:14px; top:64px; display:flex; flex-direction:column; background:rgba(6,10,20,0.82); padding:.6rem; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,0.6); backdrop-filter: blur(6px); opacity:0; transform:translateY(-6px); pointer-events:none; transition: all .18s ease }
  .main-nav.open{ opacity:1; transform:none; pointer-events:auto }
  .nav-toggle{ display:block }
  .hero-grid{ grid-template-columns: 1fr }
  .hero-side{ order:2 }
}

/* subtle aura around hero card */
.hero-card::before{
  content: "";
  position: absolute;
  inset: auto auto auto 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  pointer-events: none;
  filter: blur(40px);
  mix-blend-mode: screen;
  opacity: 0.08;
  background: linear-gradient(90deg, rgba(255,107,107,0.6), rgba(255,211,107,0.6));
  transform: translateY(-6px);
}