@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --pink: #f05ee8;
  --pink-light: #ff9bf5;
  --pink-dark: #a83ba7;
  --black: #080709;
  --panel: #111014;
  --panel-2: #17151a;
  --text: #f8f4f8;
  --muted: #aaa3ad;
  --line: rgba(255,255,255,.09);
  --radius: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--text);
  font-family: Inter, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .035; z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.navbar { height: 82px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; position: absolute; top: 0; width: 100%; z-index: 10; }
.brand img { width: 150px; display: block; }
nav { display: flex; gap: 34px; margin-left: auto; margin-right: 36px; }
nav a { color: #c3bdc5; font-size: 13px; font-weight: 600; transition: .2s; }
nav a:hover { color: white; }
.nav-button { border: 1px solid var(--line); padding: 10px 17px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.035); }
.nav-button span, .button span { margin-left: 8px; }

.hero { min-height: 900px; min-height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 48%, rgba(240,94,232,.13), transparent 35%), linear-gradient(180deg,#0c090d 0%,#080709 100%); }
.hero:after { content:""; position:absolute; left:0; right:0; bottom:0; height:180px; background: linear-gradient(transparent,var(--black)); }
.hero-content { width: min(920px, 90%); text-align: center; position: relative; z-index: 2; padding-top: 65px; }
.eyebrow { display:inline-flex; gap:9px; align-items:center; padding: 7px 13px; border:1px solid var(--line); border-radius:999px; color:#c9c2cb; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.025); }
.dot { width:7px; height:7px; display:inline-block; border-radius:50%; background:#61e58a; box-shadow:0 0 12px #61e58a; }
.hero-logo { width:min(650px,85vw); margin: 35px auto 5px; filter: drop-shadow(0 18px 40px rgba(240,94,232,.17)); }
h1 { font-size: clamp(42px, 7vw, 78px); line-height: .98; letter-spacing: -.06em; font-weight: 900; margin-top: 22px; }
h1 em { color: var(--pink-light); font-style: normal; }
.hero-text { max-width: 600px; margin: 25px auto 0; color: var(--muted); font-size: 16px; }
.hero-actions { display:flex; justify-content:center; gap:12px; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:12px; font-size:13px; font-weight:800; transition:.25s; }
.button:hover { transform: translateY(-2px); }
.primary { background:linear-gradient(135deg,#ff8df4,#d84bd2); box-shadow:0 12px 35px rgba(225,77,215,.2); }
.secondary { border:1px solid var(--line); background:rgba(255,255,255,.035); }
.light { background:white; color:#111; }
.quick-stats { display:flex; justify-content:center; gap:0; margin-top:65px; }
.quick-stats div { padding:0 27px; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.quick-stats div:last-child { border:0; }
.quick-stats strong { font-size:13px; }
.quick-stats span { color:#817b84; font-size:10px; text-transform:uppercase; letter-spacing:.1em; margin-top:2px; }
.scroll-hint { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:3; font-size:9px; letter-spacing:.18em; color:#77717a; }
.scroll-hint span { margin-left:8px; }
.hero-glow { position:absolute; width:380px; height:380px; border-radius:50%; filter:blur(90px); opacity:.11; background:var(--pink); }
.glow-one { left:-200px; top:30%; } .glow-two { right:-200px; top:45%; }

.section { width:min(1120px,90%); margin:0 auto; padding:130px 0; }
.section-label { color:#7f7881; font-size:10px; letter-spacing:.18em; font-weight:800; margin-bottom:45px; }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
h2 { font-size:clamp(42px,5vw,66px); line-height:1.02; letter-spacing:-.055em; font-weight:850; }
h2 span { color:var(--pink-light); }
.large-copy { font-size:20px; line-height:1.65; color:#ddd7de; }
.muted { color:#817a84; margin-top:25px; font-size:14px; }

.join-section { padding-top:40px; }
.join-card { display:grid; grid-template-columns:.9fr 1.1fr; background:linear-gradient(145deg,#151218,#0e0c10); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.join-copy { padding:58px; background:radial-gradient(circle at 10% 10%,rgba(240,94,232,.12),transparent 50%); }
.server-badge { display:inline-flex; align-items:center; gap:9px; font-size:10px; letter-spacing:.13em; font-weight:800; color:#aaa3ad; margin-bottom:28px; }
.join-copy h2 { font-size:clamp(42px,5vw,60px); }
.join-copy p { color:#8d8790; font-size:14px; max-width:390px; margin-top:25px; }
.server-panel { padding:35px; display:flex; flex-direction:column; justify-content:center; gap:13px; }
.server-row { border:1px solid var(--line); background:#0b0a0d; border-radius:16px; padding:19px 20px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.server-row small { display:block; color:#6e6870; font-size:9px; letter-spacing:.15em; font-weight:800; margin-bottom:4px; }
.server-row strong { font-size:16px; letter-spacing:-.02em; }
.copy-btn { border:0; background:#211d23; color:#ddd6df; border-radius:9px; padding:9px 13px; font-size:11px; font-weight:800; cursor:pointer; }
.copy-btn:hover { background:#2b2630; }
.port { color:#8e8790; font-size:11px; white-space:nowrap; }
.server-note { text-align:center; color:#5e5961; font-size:10px; margin-top:5px; }

.community { padding-top:40px; }
.community-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.community-copy p { max-width:450px; color:#918b93; margin:25px 0; }
.tiny { font-size:10px !important; color:#5f5961 !important; margin-top:13px !important; }
code { color:#cfc7d0; }
.feature-card { border:1px solid var(--line); border-radius:var(--radius); padding:50px; min-height:320px; background:radial-gradient(circle at 80% 10%,rgba(240,94,232,.14),transparent 45%),#121015; display:flex; flex-direction:column; justify-content:flex-end; }
.card-icon { font-size:38px; color:var(--pink-light); margin-bottom:auto; }
.feature-card h3 { font-size:25px; letter-spacing:-.04em; }
.feature-card p { color:#817a84; font-size:13px; margin-top:10px; }
.card-line { width:45px; height:2px; background:var(--pink); margin:24px 0 10px; }
.feature-card > span { color:#6e6870; font-size:9px; letter-spacing:.16em; font-weight:800; }

.cta { width:min(1120px,90%); margin:20px auto 120px; padding:50px 55px; border-radius:var(--radius); background:linear-gradient(110deg,#c847c1,#f37aeb); color:#120c12; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.cta span { font-size:10px; font-weight:900; letter-spacing:.18em; opacity:.6; }
.cta h2 { font-size:clamp(30px,4vw,48px); margin-top:4px; }

footer { border-top:1px solid var(--line); padding:32px 5vw; display:flex; align-items:center; justify-content:space-between; color:#68626a; font-size:10px; }
.footer-brand img { width:110px; opacity:.65; }
footer a:hover { color:white; }

@media (max-width: 760px) {
  .navbar { padding:0 6%; height:70px; }
  .brand img { width:115px; }
  nav { display:none; }
  .nav-button { padding:8px 12px; }
  .hero { min-height:820px; }
  .hero-content { padding-top:50px; }
  .hero-logo { margin-top:28px; }
  .hero-text { font-size:14px; }
  .hero-actions { flex-direction:column; width:min(320px,90%); margin-left:auto; margin-right:auto; }
  .quick-stats { margin-top:42px; }
  .quick-stats div { padding:0 12px; }
  .quick-stats strong { font-size:11px; }
  .quick-stats span { font-size:8px; }
  .section { padding:90px 0; }
  .intro-grid,.community-grid,.join-card { grid-template-columns:1fr; gap:35px; }
  .intro-grid { gap:30px; }
  .join-copy { padding:38px 28px; }
  .server-panel { padding:20px; }
  .server-row { align-items:flex-start; }
  .server-row strong { font-size:13px; }
  .port { font-size:9px; }
  .feature-card { padding:35px; min-height:290px; }
  .cta { padding:35px 28px; flex-direction:column; align-items:flex-start; margin-bottom:80px; }
  footer { flex-direction:column; gap:15px; text-align:center; }
}