/* =====================================================================
   AURAMAXX — styles.css
   All colours, spacing and type live in the :root tokens below.
   Change a token once and it updates everywhere.
   ===================================================================== */

:root {
  /* Colour */
  --black:        #000000;
  --bg:           #030403;
  --bg-panel:     #070907;
  /* Brand neon, sampled from the AURAMAXX logo (hue ~88deg, a yellow-green).
     This is the ONE place to change the accent colour: --green-rgb feeds
     every glow, border and tint on the page via rgb(var(--green-rgb) / a),
     and script.js reads it for the particles. Keep it as "R G B" numbers,
     space-separated and unbracketed, or those alpha tints will break. */
  --green-rgb:    152 231 60;
  --green:        rgb(var(--green-rgb));

  /* Glow intensity dial. Scales every neon bloom on the page — the wordmark
     halo, button shadows, the hero and CTA background washes — without
     touching the colour itself. 1 = full blast, 0 = flat with no glow.
     Purely cosmetic: nothing here affects legibility or layout. */
  --glow:         0.6;
  --white:        #F2F5F1;
  --gray:         #8D948C;
  --gray-dim:     #6B726A;
  --card-border:  rgb(var(--green-rgb) / 0.16);
  --card-top:     #0A0D09;
  --card-bottom:  #050705;
  --cta-bg:       #0B0710;

  /* Type */
  --font-display: 'Archivo', 'Arial Black', 'Helvetica Neue', sans-serif;
  --font-body:    'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Layout */
  --wrap:         1200px;
  --gutter:       clamp(20px, 5vw, 56px);
  --nav-h:        54px;
}

/* ----------------------------- Reset ----------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--gray);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p { margin: 0; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------- Particles --------------------------- */

#particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.nav, main, .footer { position: relative; z-index: 1; }

/* ------------------------------ Nav ------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav__inner {
  height: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__brand {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.09em;
  color: var(--green);
  text-shadow: 0 0 18px rgb(var(--green-rgb) / calc(0.45 * var(--glow)));
}

.nav__x {
  color: var(--white);
  opacity: 0.75;
  display: flex;
  padding: 8px;
  margin-right: -8px;
  transition: opacity 0.2s, color 0.2s;
}

.nav__x:hover { opacity: 1; color: var(--green); }

/* ---------------------------- Eyebrow ---------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--green);
  text-transform: uppercase;
}

.eyebrow--center { justify-content: center; }

.eyebrow__rule {
  width: 46px;
  height: 1px;
  background: var(--green);
  opacity: 0.8;
  flex: none;
}

/* ------------------------------ Hero ------------------------------ */

.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(60px, 10vh, 110px);
  overflow: hidden;
}

/* Soft green bloom behind the wordmark */
.hero__glow {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(1100px, 130vw);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
              rgb(var(--green-rgb) / calc(0.16 * var(--glow))) 0%,
              rgb(var(--green-rgb) / calc(0.06 * var(--glow))) 38%,
              transparent 70%);
  pointer-events: none;
}

/* Full-bleed on purpose: the wordmark runs nearly edge to edge, so this is
   not wrapped in .wrap. Avoids 100vw, which would overflow by the width of
   the scrollbar. Inner text blocks carry their own max-widths. */
.hero__inner {
  position: relative;
  width: 100%;
  padding-inline: clamp(14px, 2.6vw, 40px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__title {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 125, 'wght' 900;
  font-weight: 900;
  /* Sized so the wordmark fills ~92% of the viewport without ever colliding
     with the gutter or the scrollbar. Narrow screens get a smaller ratio in
     the 720px media query below. */
  font-size: clamp(2rem, 11.7vw, 13rem);
  line-height: 0.92;
  letter-spacing: -0.005em;
  color: var(--green);
  margin-top: clamp(22px, 4vh, 40px);
  text-shadow:
    0 0 24px rgb(var(--green-rgb) / calc(0.55 * var(--glow))),
    0 0 70px rgb(var(--green-rgb) / calc(0.38 * var(--glow))),
    0 0 150px rgb(var(--green-rgb) / calc(0.22 * var(--glow)));
  width: 100%;
  max-width: 100%;
}

.hero__tagline {
  margin-top: clamp(20px, 3.5vh, 36px);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.6vw, 1.85rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--white);
}

.hero__desc {
  margin-top: clamp(18px, 3vh, 30px);
  max-width: 620px;
  font-size: clamp(0.92rem, 1.35vw, 1.02rem);
  line-height: 1.75;
  color: var(--gray);
}

.hero__scroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 64px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, rgb(var(--green-rgb) / 0.55));
}

/* ---------------------------- Buttons ---------------------------- */

.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  border-radius: 7px;
  transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.2s ease;
}

.btn:hover { transform: translateY(-2px); }

/* Hero button — neon fill with a two-line label */
.btn--hero {
  margin-top: clamp(28px, 5vh, 46px);
  min-height: 68px;
  padding: 12px 40px;
  gap: 3px;
  background: var(--green);
  color: #04140A;
  box-shadow:
    0 0 26px rgb(var(--green-rgb) / calc(0.42 * var(--glow))),
    0 0 72px rgb(var(--green-rgb) / calc(0.22 * var(--glow)));
}

.btn--hero:hover {
  box-shadow:
    0 0 34px rgb(var(--green-rgb) / calc(0.6 * var(--glow))),
    0 0 96px rgb(var(--green-rgb) / calc(0.3 * var(--glow)));
}

.btn__label { font-size: clamp(0.88rem, 1.5vw, 1rem); }

.btn__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  opacity: 0.72;
}

/* Final CTA button — bigger, single line */
.btn--solid {
  margin-top: clamp(32px, 5vh, 52px);
  min-height: 78px;
  padding: 16px 58px;
  font-size: clamp(0.95rem, 1.7vw, 1.12rem);
  background: var(--green);
  color: #04140A;
  box-shadow:
    0 0 32px rgb(var(--green-rgb) / calc(0.45 * var(--glow))),
    0 0 90px rgb(var(--green-rgb) / calc(0.24 * var(--glow)));
}

.btn--solid:hover {
  box-shadow:
    0 0 42px rgb(var(--green-rgb) / calc(0.62 * var(--glow))),
    0 0 118px rgb(var(--green-rgb) / calc(0.32 * var(--glow)));
}

/* Pre-launch state: looks live, but the click does nothing.
   Remove the is-pending class in index.html once the buy URL is set. */
.btn.is-pending { cursor: default; }
.btn.is-pending:hover { transform: none; }

/* ---------------------------- Sections ---------------------------- */

.section { padding-block: clamp(80px, 13vh, 150px); }

.display {
  margin-top: 26px;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'wdth' 125, 'wght' 900;
  font-weight: 900;
  font-size: clamp(2.2rem, 5.8vw, 5.4rem);
  line-height: 0.94;
  letter-spacing: -0.015em;
  color: var(--white);
  text-transform: uppercase;
}

.display__bar {
  display: block;
  width: 92px;
  height: 3px;
  margin-top: 22px;
  background: linear-gradient(to right, var(--green), rgb(var(--green-rgb) / 0));
}

/* ------------------------- Tokenomics cards ------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 26px);
  margin-top: clamp(44px, 7vh, 76px);
}

.card {
  position: relative;
  padding: clamp(24px, 2.4vw, 32px);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0%, rgb(var(--green-rgb) / 0.12) 0%, transparent 46%),
    linear-gradient(160deg, var(--card-top) 0%, var(--card-bottom) 100%);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.card:hover {
  border-color: rgb(var(--green-rgb) / 0.38);
  transform: translateY(-3px);
}

.card__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--green);
  text-transform: uppercase;
}

.card__title {
  margin-top: 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.1vw, 1.62rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
}

.card__body {
  margin-top: 16px;
  font-size: 0.92rem;
  line-height: 1.72;
  color: var(--gray);
}

/* -------------------------- Contract rows -------------------------- */

.rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: clamp(44px, 7vh, 76px);
  max-width: 860px;
}

.row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 18px clamp(16px, 2vw, 24px);
  border: 1px solid rgb(var(--green-rgb) / 0.12);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  background: linear-gradient(100deg, rgb(var(--green-rgb) / 0.05) 0%, var(--bg-panel) 34%);
  box-shadow: -6px 0 22px -10px rgb(var(--green-rgb) / calc(0.55 * var(--glow)));
}

.row__label {
  flex: none;
  width: 178px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--green);
  text-transform: uppercase;
}

.row__value {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.row__addr {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.05vw, 13.5px);
  letter-spacing: 0.01em;
  color: var(--white);
  overflow-wrap: anywhere;
}

.row__addr.is-pending {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--gray-dim);
  letter-spacing: 0.08em;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gray-dim);
  flex: none;
}

.copy {
  flex: none;
  padding: 6px 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--green);
  background: rgb(var(--green-rgb) / 0.07);
  border: 1px solid rgb(var(--green-rgb) / 0.35);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.copy:hover { background: rgb(var(--green-rgb) / 0.18); }
.copy.is-copied { background: var(--green); color: #04140A; border-color: var(--green); }

/* ---------------------------- Final CTA ---------------------------- */

.cta {
  padding-block: clamp(90px, 15vh, 170px);
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgb(var(--green-rgb) / calc(0.07 * var(--glow))) 0%, transparent 70%),
    linear-gradient(180deg, var(--cta-bg) 0%, #0A0610 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta__title {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'wdth' 125, 'wght' 900;
  font-weight: 900;
  font-size: clamp(2.2rem, 6.2vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--white);
  text-transform: uppercase;
}

.cta__title .accent {
  color: var(--green);
  text-shadow: 0 0 30px rgb(var(--green-rgb) / calc(0.4 * var(--glow)));
}

.cta__note {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--gray-dim);
}

.cta__x {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 8px 12px;
  font-size: 0.92rem;
  color: var(--gray);
  transition: color 0.2s;
}

.cta__x:hover { color: var(--white); }

/* ------------------------------ Footer ------------------------------ */

.footer {
  padding-block: clamp(40px, 6vh, 62px);
  background: var(--black);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer__disclaimer {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--gray);
}

.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(38px, 6vh, 60px);
  padding-top: clamp(26px, 4vh, 38px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer__brand { display: flex; flex-direction: column; gap: 4px; }

.footer__logo {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.09em;
  color: var(--green);
  text-shadow: 0 0 16px rgb(var(--green-rgb) / calc(0.35 * var(--glow)));
}

.footer__slogan {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--gray-dim);
}

.footer__x {
  color: var(--gray);
  display: flex;
  padding: 8px;
  transition: color 0.2s;
}

.footer__x:hover { color: var(--green); }

.footer__copy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gray-dim);
  text-align: right;
}

/* ============================ RESPONSIVE ============================ */

@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; }
  /* "TOKENOMICS" is the widest heading — these ratios keep every display
     heading inside the gutter right down to a 320px phone. */
  .display { font-size: clamp(2rem, 9.4vw, 4.6rem); }
  .cta__title { font-size: clamp(2rem, 8.6vw, 4.6rem); }
}

@media (max-width: 720px) {
  :root { --nav-h: 50px; }

  .display { font-size: clamp(1.5rem, 9vw, 4rem); }
  .cta__title { font-size: clamp(1.5rem, 8.4vw, 3.6rem); }

  .hero__inner { padding-inline: 10px; }
  .hero__title { font-size: clamp(1.7rem, 11.1vw, 5rem); }
  .hero__tagline { letter-spacing: 0.22em; text-indent: 0.22em; }
  .hero__desc { padding-inline: 8px; }
  .hero__desc br { display: none; }

  /* Contract rows go two-line so long addresses never squeeze */
  .row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
  }
  .row__label { width: auto; }
  .row__value { width: 100%; }
  .row__addr { font-size: 11.5px; }

  /* Comfortable tap targets */
  .btn--hero { width: 100%; max-width: 340px; padding-inline: 24px; }
  .btn--solid { width: 100%; max-width: 340px; min-height: 66px; padding-inline: 24px; }
  .copy { padding: 9px 14px; font-size: 10.5px; }

  .footer__bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  .footer__brand { align-items: center; }
  .footer__copy { text-align: center; }
}

@media (max-width: 420px) {
  .eyebrow { font-size: 10px; letter-spacing: 0.18em; gap: 10px; }
  .eyebrow__rule { width: 26px; }
}

/* Respect reduced-motion: no drift, no smooth scroll, no hover lift */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .btn:hover, .card:hover { transform: none; }
}