/* -------- Reset / Base -------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
:root {
  --bg: #0b0f14;
  --ink: #c59f35;
  --muted: #c57e43;
  --accent: #d89e32;
  --accent-2: #ffce8e;
  --glass: rgba(8,14,12,0.5);
  --card: rgba(20,26,24,0.65);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: radial-gradient(1200px 800px at 50% -10%, #0e1714, #070a0c 60%, #050607);
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
}
html { scroll-behavior: smooth; }

/* -------- Shared -------- */
.view {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: 6vmin 5vmin;
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.container { width: min(1100px, 100%); margin: 0 auto; }
.container.narrow { width: min(900px, 100%); }

.card {
  background: var(--card);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(40, 59, 143, 0.25);
  border-radius: 18px;
  padding: clamp(16px, 2.5vmin, 28px);
  box-shadow: var(--shadow);
}

h1, h2, h3 { margin: 0 0 .6em; line-height: 1.05; }
h1 { font-size: clamp(42px, 8vmin, 96px); letter-spacing: .5px; }
h2 { font-size: clamp(28px, 4.8vmin, 48px); }
h3 { font-size: clamp(20px, 3.2vmin, 28px); }
p, li, summary { font-size: clamp(15px, 2.2vmin, 18px); color: #ffd195; opacity: .95; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* -------- Chips / Buttons -------- */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgba(51, 89, 170, 0.35);
  background: rgba(10, 11, 20, 0.35);
  color: var(--ink); text-decoration: none;
  backdrop-filter: blur(6px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 4px 18px rgba(15, 24, 77, 0.12);
}
.chip:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 8px 26px rgba(246, 181, 61, 0.22); }
.chip.primary { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #261a07; border: none; font-weight: 700; }
.chip.outline { background: transparent; }
.chip.copy { cursor: pointer; }

.link-grid { display: flex; flex-wrap: wrap; gap: 10px; }

/* -------- Hero -------- */
#hero { padding: 0; }
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  z-index: -2;
}
.vignette { position:absolute; inset:0; background: radial-gradient(1200px 800px at 50% 20%, transparent 40%, rgba(0,0,0,.55)); z-index:-1; }

.brand { position: absolute; top: 10%; left: 6%; }
.brand h1 .glow { text-shadow: 0 0 24px rgba(255, 133, 32, 0.65), 0 0 48px rgba(61,246,158,.35); color: var(--accent); }
.tag { opacity: .9; margin-top: 6px; }

.cta-row {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.scroll-hint {
  position: absolute; bottom: 70px; right: 24px; opacity: .7; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
}

/* -------- Lore (Page 2) -------- */
#lore { overflow: hidden; }
.bg-wrap { position:absolute; inset:0; z-index:-2; }
.bg { width:100%; height:100%; object-fit: cover; filter: saturate(1.05) brightness(.8); }
.bg-blur { position:absolute; inset:0; backdrop-filter: blur(6px); }

.lore-grid {
  display: grid; gap: 24px; width: min(1200px, 100%);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: stretch;
}
.lore-visual.card { padding: 0; overflow: hidden; }
.lore-visual.card img { width: 100%; height: 100%; object-fit: cover; display:block; }
.lore-grid > .card { height: 100%; display: flex; flex-direction: column; }
.lore-text p { line-height: 1.6; }
.bullets { margin: .2em 0 0 1.1em; line-height: 1.6; }

@media (max-width: 900px) {
  .brand { top: 8%; left: 6%; }
  .lore-grid { grid-template-columns: 1fr; }
  .lore-grid > .card { height: auto; }
  .lore-visual.card img { height: auto; object-fit: contain; }
}

/* -------- Token (Page 3) -------- */
.view.alt { background: radial-gradient(1000px 600px at 50% 0%, rgba(72, 71, 173, 0.08), transparent 60%) , var(--bg); }
.token-wrap { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.token-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}
#token { position: relative; overflow: hidden; }
.token-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: brightness(0.45) saturate(1.1) blur(18px);
}
.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.7));
  z-index: -1;
}

/* Gallery (no scroll, 1 or 2 rows) */
.gallery {
  margin-top: 2vh;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: 16px;
  grid-auto-flow: dense;
  place-items: center;
  overflow: hidden;
}
.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery img:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 24px rgba(41, 51, 146, 0.3);
}
@media (min-width: 1400px) {
  .gallery { grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr; }
}
@media (min-width: 900px) and (max-width: 1399px) {
  .gallery { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); }
  .gallery img { max-width: 220px; }
}
@media (max-width: 899px) {
  .gallery { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
  .gallery img { max-width: 180px; }
}

/* -------- FAQ (Page 4) -------- */
details { background: var(--glass); border: 1px solid rgba(45, 47, 128, 0.2); border-radius: 14px; padding: 12px 14px; margin: 10px 0; }
summary { cursor: pointer; font-weight: 600; }
.footer { margin-top: 28px; opacity: .7; text-align: center; font-size: 12px; }

/* Particles Canvas */
#stars { position: fixed; inset: 0; z-index: -3; background: transparent;}
/* Reveal */
[data-reveal] { opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .6s ease, transform .6s ease; will-change: transform; }
[data-reveal].visible { opacity: 1; transform: none; }


/* ===== Buy Page (Page 4) ===== */
.buy-page { position: relative; overflow: hidden; }
.buy-wrap {
  width: min(1100px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding-bottom: 14vh; /* space for big button */
}
.buy-header h2 { font-size: clamp(32px, 5.2vmin, 64px); }
.buy-header p { opacity: .85; margin-top: 6px; }

.buy-art {
  width: min(860px, 90%);
  height: min(62vh, 560px);
  padding: 0;
  overflow: hidden;
  background: rgba(10,20,16,.45);
}
.buy-art img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(1.05) contrast(1.03);
}

/* Big BUY button centered at bottom */
.buy-cta {
  position: absolute;
  left: 50%; bottom: 5.5vh; transform: translateX(-50%);
  text-decoration: none;
  padding: 18px 34px;
  border-radius: 999px;
  font-size: clamp(20px, 3vmin, 28px);
  font-weight: 900; letter-spacing: .8px;
  color: #062a16;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:
    0 14px 40px rgba(61,246,158,.35),
    inset 0 2px 8px rgba(255,255,255,.35);
  border: 0;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  animation: pulseGlow 2.2s ease-in-out infinite;
  z-index: 3;
}
.buy-cta:hover { transform: translateX(-50%) scale(1.04); box-shadow: 0 18px 60px rgba(61,246,158,.5), inset 0 2px 10px rgba(255,255,255,.5); }
.buy-cta:active { transform: translateX(-50%) scale(0.98); }

@keyframes pulseGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(61,246,158,0.0)); }
  50% { filter: drop-shadow(0 0 24px rgba(246, 160, 61, 0.55)); }
}

@media (max-width: 900px) {
  .buy-wrap { padding-bottom: 12vh; }
  .buy-art { height: min(50vh, 460px); }
}

/* ===== Buy Page (square art, static button) ===== */
.buy-page { position: relative; overflow: hidden; }
.buy-wrap {
  width: min(1100px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  gap: 22px;
  height: 100%;
  padding: 4vmin 4vmin;
}
.buy-header { text-align: center; max-width: 900px; }
.buy-header h2 { font-size: clamp(34px, 5.4vmin, 66px); }
.buy-header .lead { font-size: clamp(18px, 2.6vmin, 22px); opacity: .95; margin: 6px 0; }
.buy-header .sub { font-size: clamp(15px, 2.2vmin, 18px); opacity: .85; }
.buy-art {
  width: min(64vh, 720px);
  max-width: 90vmin;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  background: rgba(10,20,16,.45);
  display: grid;
}
.buy-art img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(1.05) contrast(1.03);
}
.buy-cta-static {
  text-decoration: none;
  padding: 18px 38px;
  border-radius: 999px;
  font-size: clamp(20px, 3vmin, 28px);
  font-weight: 900; letter-spacing: .8px;
  color: #062a16;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:
    0 10px 32px rgba(246, 160, 61, 0.35),
    inset 0 2px 8px rgba(255,255,255,.35);
  border: 0;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  animation: pulseGlow 2.2s ease-in-out infinite;
}
.buy-cta-static:hover { transform: scale(1.04); box-shadow: 0 18px 60px rgba(61,246,158,.5), inset 0 2px 10px rgba(255,255,255,.5); }
.buy-cta-static:active { transform: scale(0.98); }
@keyframes pulseGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(61,246,158,0.0)); }
  50% { filter: drop-shadow(0 0 24px rgba(246, 160, 61, 0.55)); }
}
@media (max-width: 900px) {
  .buy-art { width: 80vmin; }
}


/* ===== Slider on Buy Page + Lightning BG ===== */
.slider-page { position: relative; overflow: hidden; }
#lightning {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: -1; /* behind content */
  pointer-events: none;
  filter: blur(0.3px);
  opacity: 0.6;
}
.slider-wrap { gap: 22px; }
.slider {
  position: relative;
  width: min(900px, 92%);
  height: min(62vh, 560px);
  overflow: hidden;
  padding: 0;
}
.slider .slides { width: 100%; height: 100%; position: relative; }
.slide {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: 1fr auto;
  opacity: 0; transform: scale(.98);
  transition: opacity .5s ease, transform .5s ease;
}
.slide.is-active { opacity: 1; transform: none; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide figcaption {
  text-align: center; padding: 10px 12px; font-weight: 700; letter-spacing: .3px; color: var(--ink);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(15,25,20,.65));
  border-top-left-radius: 12px; border-top-right-radius: 12px;
}
.slider .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid rgba(109,242,143,.35); background: rgba(10,20,16,.45); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.slider .nav:hover { border-color: var(--accent); }
.slider .nav.prev { left: 10px; }
.slider .nav.next { right: 10px; }
.slider .dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.slider .dots button {
  width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.28); border: none; cursor: pointer; transition: transform .2s ease, background .2s ease;
}
.slider .dots button.active { background: var(--accent); transform: scale(1.3); }
.under-cta { opacity: .8; }





/* ===== Square Collage BUY Page ===== */
.collage-page { position: relative; overflow: hidden; }
.collage-wrap {
  width: min(1200px, 95%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 4vmin 0;
  background: radial-gradient(900px 600px at 50% 0%, rgba(109,242,143,0.10), transparent 80%);
}
.collage {
  width: min(100%, 1000px);
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}
.collage-left { grid-column: 1 / 2; grid-row: 1 / 3; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,.55); }
.collage-right { grid-column: 2 / 3; grid-row: 1 / 3; display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.collage-top, .collage-bottom { border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,.55); }
.collage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease, filter .35s ease; }
.collage-left img:hover, .collage-top img:hover, .collage-bottom img:hover { transform: scale(1.04); filter: brightness(1.05); }
.buy-cta-static { text-decoration: none; padding: 18px 40px; border-radius: 999px; font-size: clamp(22px, 3vmin, 28px); font-weight: 900; letter-spacing: .8px; color: #062a16; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 32px rgba(61,246,158,.35), inset 0 2px 8px rgba(255,255,255,.35); border: 0; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; animation: pulseGlow 2.2s ease-in-out infinite; }
.buy-cta-static:hover { transform: scale(1.04); box-shadow: 0 18px 60px rgba(61,246,158,.5), inset 0 2px 10px rgba(255,255,255,.5); }
.buy-cta-static:active { transform: scale(0.98); }
.under-cta { text-align: center; font-size: 1.1rem; opacity: .85; }
@media (max-width: 960px) {
  .collage { aspect-ratio: auto; grid-template-columns: 1fr; grid-template-rows: auto; }
  .collage-left { grid-column: 1; grid-row: 1; }
  .collage-right { grid-column: 1; grid-row: 2; grid-template-rows: auto; }
}


/* ===== BUY HERO (Page 4) ===== */
.buy-hero{ position:relative; overflow:hidden; display:grid; place-items:center; padding:0; isolation:isolate; }
.buy-hero::before{
  content:""; position:absolute; inset:0;
  background:url('assets/buy-bg.jpg') center/cover no-repeat;
  filter:blur(7px) brightness(.85) saturate(1.06);
  transform:scale(1.04);
  z-index:-2;
}
.buy-hero__overlay{ position:absolute; inset:0; background:radial-gradient(1100px 760px at 50% 10%, rgba(6,18,12,.25), rgba(0,0,0,.68)); z-index:-1; }
.buy-hero__content{}
.buy-title{ font-size:clamp(36px,6.2vmin,74px); margin-bottom:.25em; }
.buy-tag{ font-size:clamp(16px,2.6vmin,22px); opacity:.96; margin:0 0 1.1rem; }

.buy-cta-big{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  margin:.7rem 0 1.1rem; padding:20px 44px; border-radius:999px; border:0;
  font-weight:900; letter-spacing:.8px; font-size:clamp(20px,3vmin,28px);
  color:#06072a; text-decoration:none;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 16px 50px rgba(61, 89, 246, 0.329), inset 0 2px 8px rgba(255,255,255,.35);
  transition:transform .18s ease, box-shadow .18s ease;
  animation:pulseGlow 2.2s ease-in-out infinite;
}
.buy-cta-big::after{
  content:""; position:absolute; inset:40% -14% -60% -14%;
  background:radial-gradient(60% 80% at 50% 30%, rgba(109, 155, 242, 0.35), rgba(109,242,143,0));
  filter:blur(18px); z-index:-1;
}
.buy-cta-big:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 20px 68px rgba(246, 144, 61, 0.58), inset 0 2px 10px rgba(255,255,255,.5); }

@keyframes pulseGlow{ 0%,100%{filter:drop-shadow(0 0 0 rgba(61,246,158,0));} 50%{filter:drop-shadow(0 0 22px rgba(246, 181, 61, 0.5));} }
.buy-meme{ font-size:clamp(15px,2.2vmin,18px); opacity:.92; }

@media (max-width:780px){ .buy-hero__content{} }


/* Button-only layout on Buy page */
.buy-hero{ position:relative; overflow:hidden; padding:0; display:block; }
.buy-bottom{
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 8vh, 72px);
  transform: translateX(-50%);
  z-index: 5;
}


/* === HARD OVERRIDE: make BUY button 100% static (no pulse, no transform) === */
.buy-cta-big{ animation: none !important; transform: none !important; transition: none !important; }
.buy-cta-big:hover, .buy-cta-big:active, .buy-cta-big:focus{ transform: none !important; box-shadow: none !important; }


/* === FORCE CENTER BOTTOM === */
.buy-cta-big{ display: inline-block !important; }
.buy-bottom{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(5vh + env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 !important;
  z-index: 9999 !important;
  width: max-content !important;
  text-align: center !important;
}


/* === PAGE-4 ONLY bottom-centered button (no global fixed) === */
.buy-hero { position: relative !important; }
.buy-hero .buy-bottom{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: clamp(28px, 8vh, 72px) !important;
  margin: 0 !important;
  z-index: 5 !important;
  width: max-content !important;
  text-align: center !important;
}