:root {
  --bg: #050318;
  --bg-soft: #0b0724;
  --panel: rgba(17, 10, 49, 0.76);
  --text: #f7f4ff;
  --muted: #aaa4c8;
  --line: rgba(255, 255, 255, 0.12);
  --pink: #f259ff;
  --purple: #9c5cff;
  --blue: #6687ff;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 75% 15%, rgba(127, 71, 255, 0.16), transparent 30%),
    radial-gradient(circle at 20% 40%, rgba(235, 56, 255, 0.08), transparent 26%),
    var(--bg);
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 78px;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 3, 24, 0.62);
  backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: 12px; font-family: Orbitron, sans-serif; font-weight: 800; letter-spacing: 0.08em; }
.brand img { width: 32px; height: 32px; object-fit: cover; border-radius: 8px; }
nav { display: flex; gap: 34px; color: var(--muted); font-size: 14px; }
nav a:hover { color: white; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 14px;
  font-weight: 800;
  color: #09041d;
  background: linear-gradient(135deg, #ff79f7, #a56bff 58%, #6f95ff);
  box-shadow: 0 14px 40px rgba(171, 80, 255, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 18px 52px rgba(171, 80, 255, 0.4); }
.button-small { min-height: 42px; padding: 0 17px; font-size: 13px; border-radius: 11px; }
.button-full { width: 100%; margin-top: 18px; }

.hero {
  min-height: 920px;
  position: relative;
  display: grid;
  align-items: end;
  overflow: hidden;
}
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 3, 18, 0.96) 0%, rgba(4, 3, 18, 0.76) 35%, rgba(4, 3, 18, 0.12) 68%),
    linear-gradient(0deg, var(--bg) 0%, transparent 35%, rgba(4, 3, 18, 0.22) 100%);
}
.hero-content { position: relative; z-index: 2; width: min(var(--max), 92vw); margin: 0 auto; padding: 170px 0 85px; }
.eyebrow { margin: 0 0 18px; color: #cf9aff; font-weight: 800; font-size: 12px; letter-spacing: 0.2em; }
h1, h2 { font-family: Orbitron, sans-serif; margin: 0; line-height: 0.98; }
h1 { max-width: 760px; font-size: clamp(58px, 7.2vw, 112px); letter-spacing: -0.055em; }
h1 span { color: transparent; background: linear-gradient(90deg, #fff, #f16aff 45%, #7b8dff); background-clip: text; }
.hero-copy { max-width: 620px; margin: 28px 0 0; color: #cdc8dd; font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.text-link { color: #d5cee8; font-weight: 700; }
.text-link span { color: var(--pink); }
.stats { display: flex; gap: 64px; margin-top: 68px; }
.stats div { display: grid; gap: 7px; }
.stats strong { font-family: Orbitron, sans-serif; font-size: 22px; }
.stats span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }

.section { width: min(var(--max), 92vw); margin: 0 auto; padding: 120px 0; }
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; border-top: 1px solid var(--line); }
h2 { font-size: clamp(38px, 5vw, 68px); letter-spacing: -0.04em; }
.intro-copy { color: #c8c3da; font-size: 18px; line-height: 1.8; }
.intro-copy p:first-child { margin-top: 0; }

.reveal-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 70px; align-items: center; }
.reveal-card { padding: 18px; border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: 0 35px 90px rgba(38, 8, 91, 0.45); }
.reveal-card img { border-radius: 20px; }
.reveal-copy p:not(.eyebrow) { color: #c5bfd8; font-size: 18px; line-height: 1.75; max-width: 540px; margin: 28px 0 34px; }

.mint-panel {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 70px;
  align-items: center;
  padding: 70px;
  border: 1px solid rgba(217, 130, 255, 0.24);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(192, 68, 255, 0.16), rgba(94, 77, 255, 0.05)),
    var(--panel);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 28px 80px rgba(20, 5, 65, .35);
}
.mint-panel > div:first-child > p:last-child { color: #c7c1d8; line-height: 1.7; max-width: 590px; }
.mint-box { padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: rgba(4, 2, 20, 0.58); }
.mint-row { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mint-row span { color: var(--muted); }
.mint-row strong { text-align: right; }
.mint-box small { display: block; color: #8982a7; font-size: 11px; line-height: 1.5; margin-top: 14px; word-break: break-all; }

.faq { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 80px; }
.accordion details { border-bottom: 1px solid var(--line); padding: 22px 0; }
.accordion summary { cursor: pointer; font-size: 18px; font-weight: 700; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; float: right; color: var(--pink); }
.accordion details[open] summary::after { content: "−"; }
.accordion p { color: var(--muted); line-height: 1.7; max-width: 690px; }

footer {
  width: min(var(--max), 92vw);
  margin: 30px auto 0;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.footer-brand { color: white; }
footer a { color: #d9a5ff; }

@media (max-width: 900px) {
  nav { display: none; }
  .site-header { height: 70px; }
  .hero { min-height: 820px; }
  .hero-image { object-position: 58% center; }
  .hero-shade { background: linear-gradient(0deg, var(--bg) 0%, rgba(4,3,18,.62) 50%, rgba(4,3,18,.38) 100%); }
  .hero-content { padding-bottom: 60px; }
  .intro, .reveal-grid, .mint-panel, .faq { grid-template-columns: 1fr; }
  .intro, .reveal-grid, .faq { gap: 40px; }
  .mint-panel { padding: 38px 28px; }
}

@media (max-width: 620px) {
  .brand span { font-size: 13px; }
  .site-header .button-small { display: none; }
  .hero { min-height: 760px; }
  .hero-image { object-position: 52% center; opacity: .84; }
  .hero-content { padding-top: 130px; }
  h1 { font-size: clamp(48px, 15vw, 68px); }
  .hero-copy { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .section { padding: 85px 0; }
  .mint-panel { width: 92vw; }
  footer { flex-direction: column; align-items: flex-start; padding: 38px 0; }
}