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

:root{
  --bg-deep:#0a0a0f;
  --bg-mid:#151420;
  --panel:rgba(20,18,30,.6);
  --panel-border:rgba(255,255,255,.1);
  --ink:#f2f0f7;
  --ink-dim:#a29dbd;
  --accent-a:#ff0090;
  --accent-b:#00fff6;
  --accent-gradient: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  color-scheme: dark;
}
*{ box-sizing:border-box; }
html, body{ margin:0; }
body{
  background: var(--bg-deep);
  color: var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  overflow-x:hidden;
}
a{ color:inherit; }
.wrap{ max-width:1080px; margin:0 auto; padding-inline:20px; }

/* ===================== Nav ===================== */
nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  background: rgba(10,10,15,.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid var(--panel-border);
}
.nav-inner{ max-width:1080px; margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; }
.nav-brand{
  display:flex; align-items:center; gap:9px;
  font-family:'Rajdhani', sans-serif; font-weight:700; font-size:16px; letter-spacing:.06em;
}
.nav-brand img{ width:28px; height:28px; object-fit:contain; }
.nav-brand span{
  background: var(--accent-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav-links{ display:flex; gap:22px; }
.nav-links a{
  font-family:'Rajdhani', sans-serif; font-weight:600; font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; text-decoration:none; color: var(--ink-dim);
}
.nav-links a:hover{ color: var(--ink); }
.nav-cta{
  font-family:'Rajdhani', sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none; color:#0a0a0f;
  background: var(--accent-gradient);
  padding:8px 16px; border-radius:8px;
}

/* ===================== Hero ===================== */
.hero{
  position:relative;
  min-height:min(640px, 92vh);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 60px 20px 50px;
  overflow:hidden;
}
.haze{
  position:absolute; inset:-15%;
  background:
    radial-gradient(40% 32% at 18% 78%, rgba(255,0,144,.16), transparent 70%),
    radial-gradient(32% 26% at 84% 72%, rgba(0,255,246,.12), transparent 70%),
    radial-gradient(55% 45% at 50% 100%, rgba(255,0,144,.08), transparent 75%),
    radial-gradient(70% 60% at 50% -10%, #1d1830 0%, transparent 60%);
  animation: hazeDrift 20s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes hazeDrift{
  0%{ transform: translate3d(-1.5%,0,0) scale(1); }
  100%{ transform: translate3d(1.5%,-1%,0) scale(1.04); }
}
canvas#embers{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.grain{
  position:absolute; inset:0; z-index:0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px);
  mix-blend-mode: overlay;
  pointer-events:none;
}

.hero-crest{
  position:relative; z-index:1;
  width: clamp(110px, 16vw, 160px);
  filter: drop-shadow(0 0 26px rgba(0,255,246,.35)) drop-shadow(0 8px 20px rgba(0,0,0,.5));
  margin-bottom:8px;
}
.eyebrow{
  position:relative; z-index:1;
  font-family:'Rajdhani', sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.32em; text-transform:uppercase;
  color: var(--accent-b);
  margin:0 0 18px;
}
.hero h1{
  position:relative; z-index:1;
  font-family:'Great Vibes', cursive;
  font-weight:400;
  font-size: clamp(58px, 12vw, 128px);
  line-height:1;
  margin:0;
  text-shadow: 0 0 28px rgba(255,0,144,.55), 0 0 56px rgba(0,255,246,.28), 0 6px 24px rgba(0,0,0,.6);
}
.hero p{
  position:relative; z-index:1;
  max-width:480px;
  margin:18px 0 34px;
  font-size:15.5px;
  line-height:1.6;
  color: var(--ink-dim);
}
.hero-ctas{ position:relative; z-index:1; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.btn{
  font-family:'Rajdhani', sans-serif; font-weight:700; font-size:14px; letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; padding:13px 26px; border-radius:10px;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-primary{ color:#0a0a0f; background: var(--accent-gradient); box-shadow: 0 8px 24px rgba(255,0,144,.28); }
.btn-secondary{ color: var(--ink); background: rgba(255,255,255,.06); border:1px solid var(--panel-border); }
.btn svg{ width:16px; height:16px; }

.connect-hint{
  position:relative; z-index:1;
  margin-top:16px;
  font-family:'Rajdhani', sans-serif; font-size:12.5px; color: var(--ink-dim); letter-spacing:.03em;
}
.connect-hint code{
  background: rgba(255,255,255,.07);
  padding:2px 8px; border-radius:6px;
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce){ .haze{ animation:none; } }

/* ===================== Features ===================== */
section{ padding: 64px 0; }
.section-head{ text-align:center; max-width:560px; margin:0 auto 40px; }
.section-eyebrow{
  font-family:'Rajdhani', sans-serif; font-weight:600; font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color: var(--accent-b); margin:0 0 10px;
}
.section-head h2{
  font-family:'Rajdhani', sans-serif; font-weight:700; font-size: clamp(24px, 4vw, 32px);
  margin:0 0 10px; text-wrap:balance;
}
.section-head p{ margin:0; color: var(--ink-dim); font-size:14.5px; line-height:1.6; }

.feature-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
}
.feature-card{
  background: var(--panel);
  border:1px solid var(--panel-border);
  border-radius:14px;
  padding:22px 20px;
  backdrop-filter: blur(6px);
}
.feature-icon{
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,0,144,.12);
  margin-bottom:14px;
}
.feature-icon svg{ width:19px; height:19px; stroke: var(--accent-b); fill:none; stroke-width:1.8; }
.feature-card h3{
  font-family:'Rajdhani', sans-serif; font-weight:700; font-size:16px; margin:0 0 6px;
}
.feature-card p{ margin:0; font-size:13.5px; line-height:1.55; color: var(--ink-dim); }

/* ===================== Join steps ===================== */
.steps{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:16px;
}
.step{
  background: var(--panel);
  border:1px solid var(--panel-border);
  border-radius:14px;
  padding:20px;
}
.step-num{
  font-family:'Rajdhani', sans-serif; font-weight:700; font-size:13px;
  color: var(--accent-b); letter-spacing:.06em; margin-bottom:8px;
}
.step h3{ font-family:'Rajdhani', sans-serif; font-weight:700; font-size:15px; margin:0 0 6px; }
.step p{ margin:0; font-size:13px; line-height:1.55; color: var(--ink-dim); }

/* ===================== Footer ===================== */
footer{
  border-top:1px solid var(--panel-border);
  padding: 32px 0 40px;
  text-align:center;
}
footer .foot-brand{
  font-family:'Great Vibes', cursive; font-size:28px;
  background: var(--accent-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:12px;
}
footer .foot-links{ display:flex; gap:18px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }
footer .foot-links a{
  font-family:'Rajdhani', sans-serif; font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;
  text-decoration:none; color: var(--ink-dim);
}
footer .foot-links a:hover{ color: var(--ink); }
footer .copyright{ font-size:12px; color: var(--ink-dim); opacity:.7; }