/* ═══════════════════════════════════════════════════════════════════════════
   WRAPPED CAT ($wCat) — styles
   Palette is sampled from the art: the blanket is the brand.
   Gold on the void. One accent, one accent only.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ink */
  --void:      #06060A;
  --void-deep: #040407;
  --surface:   #101017;
  --surface-2: #16161F;

  /* the blanket */
  --gold:      #F7B518;
  --gold-hi:   #FFD75E;
  --gold-deep: #8A5F06;

  /* type */
  --cream:     #FCF4E6;
  --cream-dim: #C9C2B4;
  --muted:     #918A7D;
  --faint:     #6C665B;

  --line:      rgba(252, 244, 230, 0.10);
  --line-gold: rgba(247, 181, 24, 0.26);

  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pad: clamp(20px, 5vw, 56px);
}

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

html {
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* film grain — texture, not a gradient */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

img, svg, canvas { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip:focus {
  left: 14px;
  top: 12px;
  background: var(--gold);
  color: #1A1302;
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
}

.wrap {
  width: min(1240px, 100% - var(--pad) * 2);
  margin-inline: auto;
}
.wrap-narrow { max-width: 880px; }

/* ── progress ─────────────────────────────────────────── */
.progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 70;
  pointer-events: none;
}
#progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi));
}

/* ── shared bits ──────────────────────────────────────── */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(247, 181, 24, 0.16);
}
.eyebrow .num { color: rgba(247, 181, 24, 0.5); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease),
              border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn-primary {
  background: var(--gold);
  color: #1A1302;
  box-shadow: 0 14px 36px -16px rgba(247, 181, 24, 0.75);
}
.btn-primary:hover { background: var(--gold-hi); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  border-color: var(--line-gold);
  color: var(--cream);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-hi); transform: translateY(-2px); }
.btn-sm { min-height: 44px; padding: 10px 20px; font-size: 0.92rem; }

.fine {
  margin: clamp(26px, 4vw, 38px) 0 0;
  max-width: 64ch;
  color: var(--muted);
  font-size: 0.95rem;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 90;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  padding: 13px 22px;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  background: rgba(16, 16, 23, 0.96);
  color: var(--cream);
  font-size: 0.92rem;
  box-shadow: 0 20px 50px -20px #000;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ═══ NAV ═════════════════════════════════════════════ */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav.scrolled,
.nav.open {
  background: rgba(6, 6, 10, 0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  height: 72px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--cream);
}
/* The mark is the artwork itself — the same file as the favicon, the Open Graph card and
   the generated share card, so the brand is one image everywhere. The cut-out fills its
   square frame corner-to-corner with transparent corners, so the ring sits on the disc's
   edge and the glow lifts it off the ink. */
.brand-mark {
  flex: none;
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(247, 181, 24, 0.18), 0 2px 12px -4px rgba(247, 181, 24, 0.5);
}
.brand-word {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}
.brand-tag {
  padding-left: 11px;
  border-left: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--cream-dim);
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.nav-links a:hover { color: var(--gold-hi); background: rgba(247, 181, 24, 0.08); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line-gold);
  border-radius: 13px;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 2.5px 0;
  background: var(--cream);
  transition: transform 0.25s var(--ease);
}
.nav.open .nav-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav.open .nav-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ═══ HERO ════════════════════════════════════════════ */
.hero {
  position: relative;
  padding: clamp(108px, 16vh, 168px) 0 0;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 90%;
  background: radial-gradient(60% 60% at 74% 30%, rgba(247, 181, 24, 0.17), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
  padding-bottom: clamp(46px, 8vh, 84px);
}

h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.032em;
}
/* Hand-drawn wave instead of text-decoration: Chrome over-runs a wavy underline
   past the end of the glyphs at these sizes, which reads as a bug. */
.hl {
  font-style: normal;
  color: var(--gold);
  padding-bottom: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10'%3E%3Cpath d='M0 7q3.5-4.5 7 0t7 0t7 0t7 0' fill='none' stroke='%23F7B518' stroke-width='2.6' stroke-linecap='round' opacity='.62'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 28px 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lede {
  margin: 24px 0 0;
  max-width: 47ch;
  color: var(--cream-dim);
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.62;
}
.lede strong { color: var(--cream); font-weight: 600; }
.lede.wide { max-width: 64ch; }

.cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(28px, 4vw, 38px);
}
/* Contract-address card. Deliberately TWO rows at every width — "CA …[Copy]" then the
   address on its own line — because letting it reflow produced a squashed pill with the
   Copy button orphaned on its own row at mid widths, and any single-row layout eventually
   has to break the address (which we never do). Predictable beats clever here. */
.ca-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px 12px;
  flex-wrap: wrap;
  min-height: 50px;
  padding: 9px 10px 10px 18px;
  border: 1px solid var(--line-gold);
  border-radius: 18px;
  background: rgba(247, 181, 24, 0.05);
}
.ca-label {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.ca-pill code,
.footer-ca {
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--cream);
}
/* A contract address is one indivisible string. An ellipsis hides the characters people
   compare; breaking it mid-string splits them over two lines, which is just as bad — and
   is what this used to do below 400px and in the two-column band. So it never breaks: the
   pill wraps the address onto its own line when the row is tight, and the font scales with
   the viewport so 44 characters still fit on ONE line down to 320px. */
.ca-pill code {
  flex: 1 0 100%;   /* always its own row… */
  order: 3;         /* …which requires painting it after the label AND the Copy button,
                       or line-breaking would push Copy onto a row of its own */
  min-width: max-content;
  white-space: nowrap;
  font-size: clamp(0.58rem, calc(3.6vw - 3px), 0.84rem);
  user-select: all;
}
.ca-copy {
  margin-left: auto;   /* pinned top-right of the card, on every width */
  min-height: 34px;
  padding: 6px 15px;
  border: 0;
  border-radius: 999px;
  background: rgba(247, 181, 24, 0.14);
  color: var(--gold-hi);
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s var(--ease);
}
.ca-copy:hover { background: rgba(247, 181, 24, 0.26); }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin: clamp(34px, 5vw, 48px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.facts dt {
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.facts dd {
  margin: 0;
  color: var(--cream);
  font-size: 0.98rem;
  font-weight: 600;
}

/* ── the medallion ────────────────────────────────────── */
.hero-art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  translate: var(--px, 0) var(--py, 0);
  transition: translate 0.5s var(--ease);
}
.art-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}
.art-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 116%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 44%,
              rgba(247, 181, 24, 0.30), rgba(247, 181, 24, 0.08) 44%, transparent 70%);
  pointer-events: none;
}
.art-rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}
.ring-static { fill: none; stroke: rgba(247, 181, 24, 0.20); stroke-width: 1; }
.ring-fine   { fill: none; stroke: rgba(252, 244, 230, 0.10); stroke-width: 1;
               stroke-dasharray: 34 6 2 6; }
.ring-dash   { fill: none; stroke: rgba(247, 181, 24, 0.42); stroke-width: 1.4;
               stroke-dasharray: 2 11; stroke-linecap: round; }
.ring-spin {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: spin 56s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.medallion {
  position: relative;
  width: min(100%, 552px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.45s var(--ease);
}
/* hover/wobble live on the button, so they can't fight the animations that own
   `transform` on the two layers inside it */
.medallion:hover,
.medallion:focus-visible { transform: scale(1.014); }

.medallion-art {
  position: relative;
  display: block;
  animation: cat-breathe 7.5s ease-in-out infinite;
}
/* <picture> is inline by default, and its line box adds a few px of height around the
   block <img> — which stretched the absolutely-positioned nose overlay's box and
   mis-scaled its background against the still. Make it block, or the patch drifts. */
.medallion picture { display: block; line-height: 0; }
.medallion img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 40px 110px -40px rgba(247, 181, 24, 0.5),
              0 0 0 1px rgba(247, 181, 24, 0.16);
  transition: box-shadow 0.45s var(--ease);
}
.medallion:hover img,
.medallion:focus-visible img {
  box-shadow: 0 46px 130px -38px rgba(247, 181, 24, 0.66),
              0 0 0 1px rgba(247, 181, 24, 0.3);
}
.medallion.poked { animation: wobble 0.62s var(--ease); }

/* The moving nose. It is a second copy of the SAME photo, so it lines up pixel for
   pixel with the still underneath; the radial-gradient mask is what turns that layer
   into a small feathered patch, and transforming it nudges only the patch. The mask
   solid core sits on the nose (42.5%, 61% of the square) and feathers out before it
   reaches the high-contrast gold/cream boundary above, where a displaced edge WOULD
   be visible. */
.nose {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("assets/logo-864.webp") 0 0 / 100% 100% no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 8% 9% at 42.5% 61%,
      #000 0 32%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 8% 9% at 42.5% 61%,
      #000 0 32%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
  transform-origin: 42.5% 61%;
  animation: nose-twitch 10s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}
@keyframes cat-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.006); }
}
@keyframes nose-twitch {
  /* long stretches of near-stillness, with a short double-tap of a twitch —
     a continuous bob would read as a loop, this reads as an animal */
  0%, 8%   { transform: translate(0, 0) scale(1); }
  16%      { transform: translate(0, -0.28%) scale(1.006); }
  26%, 52% { transform: translate(0, 0) scale(1); }
  55%      { transform: translate(-0.42%, 0.12%) scale(1.034); }
  58%      { transform: translate(0.46%, -0.16%) scale(1.028); }
  61%      { transform: translate(-0.26%, 0.05%) scale(1.016); }
  65%      { transform: translate(0.1%, 0) scale(1.008); }
  72%, 100% { transform: translate(0, 0) scale(1); }
}
@keyframes wobble {
  0%, 100% { transform: rotate(0) scale(1); }
  22% { transform: rotate(-2.4deg) scale(1.022); }
  48% { transform: rotate(2.1deg) scale(1.018); }
  74% { transform: rotate(-1.1deg) scale(1.008); }
}
.art-hint {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
}

/* ── marquee ──────────────────────────────────────────── */
.marquee {
  position: relative;
  overflow: hidden;
  background: var(--gold);
  border-top: 1px solid var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  padding: 12px 0;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1A1302;
  white-space: nowrap;
  animation: slide 42s linear infinite;
}
.marquee-track.rev { animation-direction: reverse; }
.marquee-track span:nth-child(even) { opacity: 0.45; }
/* the ticker keeps its on-chain casing — the symbol is `wCat`, not `WCAT`, and a
   visitor has to be able to match it against their wallet */
.marquee-track .tick { text-transform: none; letter-spacing: 0.08em; font-weight: 700; }
/* and the same for the quote token: the site writes wBNB everywhere, so the tape must not
   shout it into WBNB while the hero, the facts and the metas all say wBNB */
.marquee-track .sym { text-transform: none; }
@keyframes slide { to { transform: translateX(-50%); } }

.marquee-outline {
  background: var(--void);
  border-color: var(--line-gold);
}
.marquee-outline .marquee-track { color: var(--gold); }

/* ═══ SECTIONS ═════════════════════════════════════════ */
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section-tight { padding: clamp(44px, 5.5vw, 72px) 0; }

h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: -0.026em;
}
h3 { font-weight: 700; }


/* ── the story ────────────────────────────────────────── */
.story {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: clamp(26px, 3.6vw, 38px);
}
.story p {
  margin: 0;
  max-width: 46ch;
  color: var(--cream-dim);
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  line-height: 1.62;
}
.story .story-end {
  margin-top: 4px;
  color: var(--gold);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.42rem);
  letter-spacing: -0.02em;
}
.one-thing {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}
.one-thing strong { color: var(--cream); font-weight: 600; }

/* ── live chip ────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  background: rgba(247, 181, 24, 0.07);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(247, 181, 24, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.4; } }

/* ── the wrap ─────────────────────────────────────────── */
.make-grid {
  display: grid;
  /* capped: a square at a third of a wide screen is ~840px tall, which leaves the two
     buttons floating in a lot of nothing. 560 keeps the medallion big and the row tight. */
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
  margin-top: clamp(26px, 3.6vw, 42px);
}
.make-stage {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--void);
  box-shadow: 0 40px 100px -50px rgba(247, 181, 24, 0.5);
}
.wrap-play {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.wrap-play img { display: block; width: 100%; height: auto; }
.wrap-hint {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  padding: 7px 15px;
  border: 1px solid rgba(247, 181, 24, 0.35);
  border-radius: 999px;
  background: rgba(6, 6, 10, 0.74);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  transition: opacity 0.35s ease;
}
.wrap-play.playing .wrap-hint { opacity: 0; }
.make-panel { display: flex; flex-direction: column; gap: 16px; }
.make-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ═══ FOOTER ══════════════════════════════════════════ */
.footer {
  padding: clamp(50px, 7vw, 84px) 0 32px;
  border-top: 1px solid var(--line);
  background: var(--void-deep);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.footer-line { margin: 18px 0 0; max-width: 34ch; color: var(--muted); font-size: 0.94rem; }
.footer-ca-line {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.footer-ca { letter-spacing: 0; text-transform: none; color: var(--cream-dim);
             overflow-wrap: anywhere; word-break: break-all; }
.footer-legal {
  margin-top: clamp(38px, 5vw, 58px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.copyright {
  margin: 20px 0 0 !important;
  font-family: var(--mono);
  font-size: 0.7rem !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint) !important;
}

/* ── reveal ───────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ═══ RESPONSIVE ══════════════════════════════════════ */
@media (max-width: 1040px) {
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
  .nav-links {
    position: fixed;
    inset: 76px 14px auto;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 30px 70px -24px #000;
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: 14px 16px; border-radius: 12px; font-size: 1rem; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-art { order: -1; margin-bottom: clamp(30px, 6vw, 48px); }
  .medallion { width: min(100%, 420px); }
  .make-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .brand-tag { display: none; }
  .nav-cta .btn-sm { display: none; }
  .ca-pill { width: 100%; }
  .ca-copy { margin-left: auto; }
  .cta-row { gap: 12px; }
  .cta-row .btn { width: 100%; }
  .facts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .make-actions .btn { width: 100%; }
}

/* ═══ REDUCED MOTION ══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .marquee-track { animation: none !important; }
  .ring-spin { animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .medallion:hover img { transform: none; }
}