:root{
  --bg:#08040a;
  --card:#0f0b13cc;
  --muted:#bdb6d9;
  --accent1:#7c3aed;
  --accent2:#5b21b6;
  --glass: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.02);
  --radius: 14px;
  --maxwidth:1200px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:
  radial-gradient(1200px 600px at 10% 10%, rgba(124,58,237,0.08), transparent 6%),
  radial-gradient(900px 600px at 90% 80%, rgba(91,33,182,0.06), transparent 6%),
  var(--bg);
  color: #e9e7f8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{max-width:var(--maxwidth);margin:0 auto;padding:28px;}

.site-header{
  position:sticky;top:0;z-index:40;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}

.brand{font-weight:700;color:#fff;text-decoration:none;font-size:18px;letter-spacing:0.4px}
.main-nav{display:flex;gap:18px;align-items:center}
.main-nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px}
.main-nav a.active, .main-nav a:hover{background:linear-gradient(90deg, rgba(124,58,237,0.12), rgba(91,33,182,0.08));color:#fff}

.nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 10px;border-radius:9px;color:var(--muted)}

/* HERO */
.hero{padding:72px 0 40px}
.hero-inner{display:grid;grid-template-columns:1fr 520px;gap:40px;align-items:center}
.badge{display:inline-block;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#fff;padding:6px 10px;border-radius:999px;font-size:13px;margin-bottom:12px}
.hero h1{font-size:48px;margin:6px 0 12px;line-height:1.02}
.lead{color:var(--muted);max-width:540px}
.hero-cta{margin-top:18px;display:flex;gap:12px}
.btn{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

/* Features */
.features{list-style:none;padding:0;margin:18px 0 0;display:flex;gap:12px;color:var(--muted);flex-wrap:wrap}
.features li{background:var(--glass);padding:8px 12px;border-radius:8px;font-size:13px}

/* hero visual */
.hero-visual{position:relative;height:420px;display:flex;align-items:center;justify-content:center}
.blob{width:100%;max-width:480px;height:auto;display:block;filter:drop-shadow(0 20px 40px rgba(91,33,182,0.18))}
.visual-overlay{position:absolute;right:60px;bottom:40px;transform:translateZ(0)}
.glass-card{background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));backdrop-filter: blur(8px);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);min-width:200px}

/* QUICK INFO */
.quick-info{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.card{background:var(--card);padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,0.03)}
.card h3{margin:0 0 8px}

/* CTA */
/* CTA */
.cta{
  margin:42px 0;
  padding:28px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(124,58,237,0.06), rgba(91,33,182,0.03));
  border:1px solid rgba(255,255,255,0.02);
  display: flex;
  justify-content: center; /* center horizontally */
}
.cta-inner{
  display: flex;
  flex-direction: column;
  align-items: center; /* center content */
  text-align: center;
  gap: 16px;
  max-width: 720px; /* optional, limits width like hero text */
}
.cta-inner div{
  display: flex;
  gap: 12px;
  justify-content: center; /* center buttons */
}

/* CREDITS */
.credits{
  margin-top:16px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}
.credits span{
  display:block;
}


/* PAGE */
.page{padding:48px 0}
.sub{color:var(--muted);margin-top:8px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}
.panel{background:var(--card);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}

/* TIMELINE */
.timeline{margin-top:24px;display:flex;flex-direction:column;gap:18px}
.timeline-item{display:flex;gap:18px;align-items:flex-start;background:linear-gradient(180deg,var(--glass-2),transparent);padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
.timeline-item .time{min-width:130px;color:var(--muted);font-weight:700}
.timeline-item.alt{flex-direction:row-reverse;text-align:right}

/* POSTS */
.posts{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.post{background:var(--card);padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.post time{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.post-link{display:inline-block;margin-top:8px;color:var(--accent1);text-decoration:none}

/* FOOTER */
.site-footer{padding:20px 0;border-top:1px solid rgba(255,255,255,0.03);margin-top:36px}
.footer-inner{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:14px}

/* responsive */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:26px}
  .hero-visual{height:360px}
  .quick-info{grid-template-columns:1fr;gap:12px}
  .grid-2{grid-template-columns:1fr}
  .nav-toggle{display:inline-block}
  .main-nav{position:absolute;top:64px;right:24px;background:rgba(8,4,10,0.95);padding:12px;border-radius:10px;display:none;flex-direction:column}
  .main-nav.open{display:flex}
  .visual-overlay{position:absolute;right:20px;bottom:12px}

  /* CTA adjustments for mobile */
  .cta-inner div{
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  .cta-inner div a{
    width: 100%;
    text-align: center;
  }
}

/* small micro animation for blob morph */
@keyframes morph {
  0% { d: path("M426,332Q418,414,342,452Q266,490,191,446Q116,402,86,324Q56,246,106,180Q156,114,234,106Q312,98,372,142Q432,186,442,258Q452,330,426,332Z"); }
  50% { d: path("M432,324Q420,440,334,462Q248,484,176,436Q104,388,86,316Q68,244,128,184Q188,124,268,106Q348,88,396,150Q444,212,448,272Q452,332,432,324Z"); }
  100% { d: path("M426,332Q418,414,342,452Q266,490,191,446Q116,402,86,324Q56,246,106,180Q156,114,234,106Q312,98,372,142Q432,186,442,258Q452,330,426,332Z"); }
}
#blobpath{animation:morph 9s ease-in-out infinite;}
.btn.discord {
  background: linear-gradient(90deg, #7289da, #5b6eae);
}