/* =========================================================
   RUGME — The Casino Lounge
   Palette: Bordeaux velvet · Brushed gold · Carbon black
   ========================================================= */

:root {
  --bordeaux: #4a0d10;
  --bordeaux-deep: #2a0608;
  --bordeaux-dark: #1a0405;
  --carbon: #0c0708;
  --gold: #d4af6a;
  --gold-bright: #f0cf85;
  --gold-dim: #8a6f43;
  --cream: #f3e7c9;
  --shadow-deep: 0 30px 80px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* compensates for the sticky header */
}

body {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  color: var(--cream);
  background-color: #4a0e12;
  line-height: 1.6;
  overflow-x: hidden;
  /* Diamond-tufted Chesterfield leather (bordeaux-forward):
     1. Warm top vignette (chandelier above)
     2. Two warm spotlights (brighter bordeaux pools)
     3. Soft edge vignette (subtle, not crushing)
     4. Tufted leather pattern with gold buttons
     5. Subtle velvet noise on top (fine grain)
     6. Rich bordeaux base */
  background-image:
    radial-gradient(ellipse 95% 55% at 50% 0%,
      rgba(255, 210, 130, 0.12), transparent 70%),
    radial-gradient(ellipse 50% 35% at 22% 28%,
      rgba(180, 40, 50, 0.38), transparent 70%),
    radial-gradient(ellipse 55% 40% at 78% 72%,
      rgba(160, 30, 40, 0.34), transparent 70%),
    radial-gradient(ellipse 140% 100% at 50% 50%,
      transparent 65%, rgba(20, 4, 6, 0.35) 100%),
    url("imgs/texture-velvet.svg"),
    url("imgs/texture-tufted.svg"),
    linear-gradient(180deg, #5a141a 0%, #3a0a0e 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    320px 320px,
    160px 160px,
    100% 100%;
  background-blend-mode:
    normal,
    normal,
    normal,
    normal,
    overlay,
    normal,
    normal;
  background-attachment: fixed;
}

::selection { background: var(--gold); color: var(--carbon); }

/* =========================================================
   REVEAL ON SCROLL — sections fade up when in viewport
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger the 3 Hall of Fame frames so they reveal one by one */
.hall .frame.reveal:nth-of-type(1) { transition-delay: 0.05s; }
.hall .frame.reveal:nth-of-type(2) { transition-delay: 0.18s; }
.hall .frame.reveal:nth-of-type(3) { transition-delay: 0.32s; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   TRADE TAPE — live recent buys/sells inside Pump card
   ========================================================= */
.trade-tape {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed rgba(212, 175, 55, 0.22);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: "Roboto Mono", "Courier New", monospace;
  font-size: 12px;
  text-align: left;
}

.trade-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.32);
  border-left: 2px solid transparent;
  color: var(--cream);
  line-height: 1.2;
  opacity: 0;
  animation: tradeIn 0.45s ease-out forwards;
}
/* Stagger so rows appear one after the other on first render */
.trade-row:nth-child(1) { animation-delay: 0.00s; }
.trade-row:nth-child(2) { animation-delay: 0.09s; }
.trade-row:nth-child(3) { animation-delay: 0.18s; }
.trade-row:nth-child(4) { animation-delay: 0.27s; }
.trade-row:nth-child(5) { animation-delay: 0.36s; }

.trade-row.is-buy  { border-left-color: #2ec27e; }
.trade-row.is-sell { border-left-color: #c04c4c; }

.trade-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.trade-user {
  color: #D4AF37;
  font-weight: 500;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.trade-action { opacity: 0.7; flex-shrink: 0; }
.trade-amount {
  color: #f0cf85;
  font-weight: 700;
  margin-left: auto;
  flex-shrink: 0;
}
.trade-row.is-sell .trade-amount { color: #d97070; }
.trade-age {
  opacity: 0.55;
  font-size: 11px;
  flex-shrink: 0;
}

@keyframes tradeIn {
  from { opacity: 0; }
  to   { opacity: 0.9; }
}

@media (max-width: 480px) {
  .trade-action { display: none; }
  .trade-row { font-size: 11px; gap: 8px; padding: 6px 8px; }
}

/* =========================================================
   CUSTOM CURSOR — rolled rug
   Active only on devices with a fine pointer (mouse/trackpad).
   On touch screens, falls back to the system default.
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  html, body,
  a, button, input, textarea, select,
  [role="button"], .frame, .floater {
    cursor: none;
  }

  .cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .cursor.ready { opacity: 1; }

  .cursor-inner {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left; /* keep top-left fixed on the click point */
    transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1),
                filter 0.18s ease;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.55));
  }

  /* Hovering interactive — bigger, slight tilt, gold glow */
  .cursor.hover .cursor-inner {
    transform: scale(1.3) rotate(-8deg);
    filter:
      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55))
      drop-shadow(0 0 12px rgba(212, 175, 55, 0.7));
  }

  /* Mouse pressed — small "squish" + opposite tilt */
  .cursor.click .cursor-inner {
    transform: scale(0.85) rotate(5deg);
    transition-duration: 0.08s;
  }

  /* When mouse is over hovering AND clicked, click wins */
  .cursor.hover.click .cursor-inner {
    transform: scale(1.05) rotate(2deg);
  }
}

@media (hover: none) {
  .cursor { display: none; }
}

h1, h2, h3, .serif {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

a { color: inherit; text-decoration: none; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(12, 7, 8, 0.95), rgba(12, 7, 8, 0.78));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(212, 175, 106, 0.25);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-mark {
  height: 56px;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.brand-word {
  font-family: "Playfair Display", serif;
  font-weight: 900;
  font-size: 22px;
  color: #D4AF37;
  letter-spacing: 0.04em;
}

.nav {
  display: flex;
  gap: 28px;
  margin-left: 12px;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
}

.nav a {
  position: relative;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.nav a:hover { color: var(--gold-bright); }
.nav a:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--gold);
}

.header-cta {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-ghost {
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(212, 175, 106, 0.4);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* "Buy RUGME" — bordeaux nameplate with gold border.
   Sits in the velvet theme; secondary to the gold-filled Pump CTA. */
.btn-buy {
  position: relative;
  overflow: hidden;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0cf85;
  background: linear-gradient(180deg, #5a141a 0%, #3a0a0e 100%);
  border: 1px solid #D4AF37;
  padding: 10px 22px;
  box-shadow:
    inset 0 1px 0 rgba(212, 175, 55, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 3px 12px rgba(0, 0, 0, 0.45);
  transition: color 0.25s ease, border-color 0.25s ease,
              background 0.25s ease, box-shadow 0.25s ease,
              transform 0.18s ease;
}

/* Diagonal gold sweep on hover */
.btn-buy::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 175, 55, 0.32),
    transparent
  );
  transform: skewX(-22deg);
  transition: left 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.btn-buy:hover {
  color: #fff5c2;
  border-color: #f0cf85;
  background: linear-gradient(180deg, #6c181d 0%, #4a0d12 100%);
  box-shadow:
    inset 0 1px 0 rgba(240, 207, 133, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 6px 22px rgba(212, 175, 55, 0.28);
  transform: translateY(-1px);
}
.btn-buy:hover::before { left: 160%; }

/* =========================================================
   HAMBURGER + MOBILE DRAWER MENU
   ========================================================= */
.hamburger {
  display: none;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 4px;
  padding: 9px 10px;
  cursor: pointer;
  margin-left: auto;
  transition: border-color 0.2s ease;
  position: relative;
  z-index: 110;
}
.hamburger:hover { border-color: #D4AF37; }

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: #D4AF37;
  border-radius: 1px;
  margin: 5px 0;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.hamburger.open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger.open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-menu-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background:
    linear-gradient(180deg, rgba(12, 7, 8, 0.97), rgba(26, 4, 5, 0.97)),
    url("imgs/texture-tufted.svg");
  background-size: auto, 140px 140px;
  border-left: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.5);
  z-index: 100;
  padding: 90px 28px 28px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
}
.mobile-menu-nav a {
  display: block;
  padding: 16px 0;
  color: #D4AF37;
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a:focus {
  color: #f0cf85;
  padding-left: 8px;
}

.ca-pill--mobile {
  display: inline-flex !important;
  align-self: flex-start;
  margin-top: 8px;
}

.mobile-menu-socials {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.mobile-menu-buy {
  margin-top: auto;
  text-align: center;
  padding: 16px 24px;
  font-size: 16px;
}

body.menu-open {
  overflow: hidden;
}

/* =========================================================
   SOCIAL BUTTONS — header (compact) and footer (large)
   ========================================================= */
.social-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.5);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.75));
  color: #D4AF37;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.social-btn:hover {
  border-color: #D4AF37;
  color: #f0cf85;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.35);
  transform: translateY(-1px);
}

/* Disabled state — when no URL configured */
.social-btn[data-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto;
}
.social-btn[data-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(212, 175, 55, 0.5);
  color: #D4AF37;
}
.social-btn[data-disabled="true"]::after {
  content: "Soon";
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #D4AF37;
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 10;
}
.social-btn[data-disabled="true"] {
  position: relative;
}
.social-btn[data-disabled="true"]:hover::after {
  opacity: 1;
}

/* Large variant (footer) — pill with text label */
.social-btn--lg {
  width: auto;
  height: auto;
  padding: 10px 18px;
  border-radius: 6px;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.social-btn--lg .social-label {
  font-size: 12px;
  letter-spacing: 0.14em;
}

/* Footer-specific row layout */
.social-row--footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

@media (max-width: 720px) {
  .social-row--header { gap: 6px; }
  .social-btn { width: 32px; height: 32px; }
  .social-btn--lg .social-label { display: none; }
  .social-btn--lg { width: 42px; height: 42px; padding: 0; border-radius: 50%; }
}

/* =========================================================
   CONTRACT ADDRESS — header pill, main card, footer line
   ========================================================= */

/* Header mini pill (truncated address + copy) */
.ca-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.75));
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 999px;
  color: #D4AF37;
  font-family: "Roboto Mono", "Courier New", monospace;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ca-pill:hover {
  border-color: #D4AF37;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.3);
  transform: translateY(-1px);
}
.ca-pill.copied {
  background: linear-gradient(180deg, #2e5a2e, #1a3a1a);
  border-color: #4a8e4a;
  color: #c8f0c8;
}
.ca-pill .ca-pill-icon,
.ca-pill .ca-pill-action {
  font-size: 13px;
  line-height: 1;
}

/* Main contract card (between hero and Hall of Fame) */
.contract-section {
  max-width: 760px;
  margin: 50px auto 30px;
  padding: 0 24px;
}

.contract-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)),
    radial-gradient(ellipse at top, rgba(212, 175, 55, 0.10), transparent 70%);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 6px;
  padding: 28px 32px;
  text-align: center;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.45),
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(212, 175, 55, 0.1);
}

/* Corner brackets like the Rug-O-Meter */
.contract-card::before,
.contract-card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #D4AF37;
}
.contract-card::before { top: -7px;    left: -7px;  border-right: none; border-bottom: none; }
.contract-card::after  { bottom: -7px; right: -7px; border-left: none;  border-top: none; }

.contract-eyebrow {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #D4AF37;
  margin-bottom: 18px;
}

.contract-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.contract-address {
  font-family: "Roboto Mono", "Courier New", monospace;
  font-size: clamp(13px, 1.5vw, 16px);
  color: #D4AF37;
  background: rgba(0, 0, 0, 0.4);
  padding: 12px 18px;
  border-radius: 4px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  letter-spacing: 0.02em;
  word-break: break-all;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
}

.contract-copy-btn {
  background: linear-gradient(180deg, #D4AF37, #a07d28);
  color: #1a0405;
  border: none;
  padding: 0 22px;
  border-radius: 4px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
  white-space: nowrap;
}
.contract-copy-btn:hover {
  background: linear-gradient(180deg, #f0cf85, #c89a2a);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.contract-copy-btn.copied {
  background: linear-gradient(180deg, #4a8e4a, #2a6a2a);
  color: #fff;
  box-shadow: 0 2px 8px rgba(74, 142, 74, 0.4);
}

.contract-network {
  font-size: 11px;
  color: var(--cream);
  opacity: 0.7;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contract-network .net-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #14F195;
  box-shadow: 0 0 8px rgba(20, 241, 149, 0.7);
  animation: netPulse 2.4s ease-in-out infinite;
}
@keyframes netPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(20, 241, 149, 0.7); }
  50%      { box-shadow: 0 0 14px rgba(20, 241, 149, 1); }
}

/* Footer line */
.footer-contract {
  margin: 4px 0 14px;
  font-size: 12px;
  color: var(--cream);
  opacity: 0.7;
  font-family: "Roboto Mono", monospace;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-contract code {
  color: #D4AF37;
  background: rgba(0, 0, 0, 0.35);
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  letter-spacing: 0.02em;
  word-break: break-all;
  max-width: 90vw;
}
.footer-contract-label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
}
.footer-contract-copy {
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #D4AF37;
  padding: 4px 9px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: all 0.2s ease;
}
.footer-contract-copy:hover {
  border-color: #D4AF37;
  background: rgba(212, 175, 55, 0.12);
}
.footer-contract-copy.copied {
  border-color: #4a8e4a;
  background: rgba(74, 142, 74, 0.2);
  color: #c8f0c8;
}

@media (max-width: 900px) {
  .ca-pill { display: none; }
  .contract-row { gap: 8px; }
  .contract-card { padding: 22px 20px; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  text-align: center;
  padding: 90px 24px 50px;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 760px;
  height: 760px;
  max-width: 95vw;
  background: radial-gradient(circle, rgba(212, 175, 106, 0.22), transparent 65%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-rug {
  width: 380px;
  max-width: 78vw;
  height: auto;
  display: block;
  margin: 0 auto;
  filter:
    drop-shadow(0 24px 40px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 30px rgba(212, 175, 106, 0.18));
  animation: float 6s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

/* Scattered "manifesto" quotes — different sizes, angles, positions */
.floater {
  position: absolute;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 400;
  color: #D4AF37;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.75);
  z-index: 2;
  pointer-events: none;
  transition: transform 0.4s ease;
}

.floater-1 { /* "Born to Rug" — top right, biggest */
  top: 8%;
  right: 6%;
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 700;
  transform: rotate(-11deg);
}

.floater-2 { /* "Cynical" — top left */
  top: 16%;
  left: 4%;
  font-size: clamp(20px, 2.4vw, 32px);
  transform: rotate(7deg);
}

.floater-3 { /* "Transparent" — bottom left */
  bottom: 14%;
  left: 7%;
  font-size: clamp(18px, 2.1vw, 28px);
  transform: rotate(-6deg);
}

.floater-4 { /* "Inevitable" — bottom right */
  bottom: 6%;
  right: 4%;
  font-size: clamp(20px, 2.6vw, 34px);
  transform: rotate(13deg);
}

.floater-5 { /* "Liquidity is optional" — middle right, slightly higher */
  top: 48%;
  right: -2%;
  font-size: clamp(16px, 1.9vw, 24px);
  transform: rotate(-8deg);
  color: #c89a2a;
}

.floater-6 { /* "Bahamas soon..." — middle left, mirror of floater-5 */
  top: 48%;
  left: -2%;
  font-size: clamp(16px, 1.9vw, 24px);
  transform: rotate(3deg);
  color: #c89a2a;
}

/* Wrapper is invisible on desktop — children behave as direct flex items
   of .hero-stage so the scattered layout stays intact. */
.floater-tags { display: contents; }

@media (max-width: 760px) {
  .hero-stage {
    display: block;
    text-align: center;
  }
  .hero-rug { margin-bottom: 18px; }

  /* "Born to Rug" — main tagline, no rotation */
  .floater-1 {
    display: block;
    position: static;
    white-space: normal;
    text-align: center;
    transform: none;
    font-size: clamp(26px, 6.5vw, 34px);
    font-weight: 700;
    color: #f0cf85;
    margin: 4px 0 12px;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.85);
  }

  /* Secondary floaters become a centered wrap of gold pills (inline-block).
     Inline-block wraps naturally without flex min-content quirks. */
  .floater-tags {
    display: block;
    text-align: center;
    line-height: 0;
  }
  .floater-tags .floater {
    display: inline-block;
    position: static;
    white-space: nowrap;
    transform: none;
    margin: 3px;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1.3;
    color: #D4AF37;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 999px;
    padding: 4px 11px;
    text-shadow: none;
    letter-spacing: 0.04em;
  }
}

/* Very small phones — drop the longest pill so 4 short ones fit cleanly */
@media (max-width: 400px) {
  .floater-tags .floater-5 { display: none; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero-pillars {
  margin: 28px auto 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px;
  position: relative;
  z-index: 1;
}

.hero-pillars .pillar {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-style: italic;
  color: #D4AF37;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: 0.02em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.65);
}

@media (max-width: 600px) {
  .hero-pillars {
    flex-direction: column;
    gap: 8px;
  }
}

/* =========================================================
   PITCH
   ========================================================= */
/* =========================================================
   RUG-MAP — three acts of the show
   ========================================================= */
.rugmap {
  max-width: 860px;
  margin: 60px auto;
  padding: 40px 32px;
  text-align: center;
  border-top: 1px solid rgba(212, 175, 106, 0.2);
  border-bottom: 1px solid rgba(212, 175, 106, 0.2);
}

.ornament {
  font-size: 22px;
  color: var(--gold);
  opacity: 0.6;
  letter-spacing: 0.5em;
  margin: 6px 0;
}

/* Vintage cinema marquee panel for "Rug-Map" */
.marquee {
  display: inline-block;
  position: relative;
  padding: 30px 64px 26px;
  margin: 14px auto 40px;
  background: #060102;
  border: 2px solid #5a141a;
  border-radius: 5px;
  transform: rotate(-1.4deg);
  box-shadow:
    0 0 32px rgba(230, 36, 41, 0.35),
    inset 0 0 26px rgba(0, 0, 0, 0.75),
    0 10px 28px rgba(0, 0, 0, 0.6);
}

/* Gold bulbs along top and bottom edges */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 10px;
  background-image: radial-gradient(
    circle,
    #fff5c2 0%,
    #f0cf85 28%,
    #c89a2a 48%,
    transparent 58%
  );
  background-size: 24px 16px;
  background-repeat: repeat-x;
  background-position: 0 center;
  filter: drop-shadow(0 0 4px rgba(240, 207, 133, 0.7));
  animation: bulbsPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

.marquee::before { top: 6px; }
.marquee::after  { bottom: 6px; animation-delay: 1.2s; }

@keyframes bulbsPulse {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(240, 207, 133, 0.6)) brightness(0.9);
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(240, 207, 133, 1)) brightness(1.35);
  }
}

.rugmap-title {
  font-family: "Bebas Neue", "Impact", "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(52px, 9vw, 96px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #E62429;
  line-height: 1;
  margin: 0;
  text-shadow:
    0 0 8px rgba(230, 36, 41, 0.85),
    0 0 18px rgba(230, 36, 41, 0.6),
    0 0 38px rgba(230, 36, 41, 0.35),
    0 2px 0 #8a0a0e,
    0 4px 0 #5a050a,
    0 6px 12px rgba(0, 0, 0, 0.7);
}

@media (max-width: 600px) {
  .marquee {
    padding: 24px 36px 22px;
    transform: rotate(-1deg);
  }
  .marquee::before { top: 4px; height: 7px; }
  .marquee::after  { bottom: 4px; height: 7px; }
}

.rugmap-acts {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0 auto;
  text-align: left;
}

.rugmap-act {
  position: relative;
  padding: 26px 28px 26px 32px;
  background: linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.18));
  border-left: 3px solid #D4AF37;
  border-radius: 4px;
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.28),
    0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Small gold corner decoration on the right */
.rugmap-act::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-top: 1px solid rgba(212, 175, 55, 0.5);
  border-right: 1px solid rgba(212, 175, 55, 0.5);
}

.rugmap-act-num {
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #D4AF37;
  opacity: 0.9;
  margin-bottom: 8px;
}

.rugmap-act-title {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 30px);
  color: #D4AF37;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
}

.rugmap-act-sub {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 2vw, 20px);
  color: #c89a2a;
  margin-left: 6px;
  letter-spacing: 0.02em;
}

.rugmap-act p {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: var(--cream);
  opacity: 0.92;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 600px) {
  .rugmap { padding: 32px 18px; }
  .rugmap-act { padding: 22px 18px 22px 22px; }
}

/* =========================================================
   PUMP PROGRESS CARD — bonding curve tracker
   ========================================================= */
.pump-section {
  max-width: 760px;
  margin: 60px auto;
  padding: 0 24px;
  text-align: center;
}

.section-kicker {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 0.18em;
  color: #D4AF37;
  margin-bottom: 22px;
}

.pump-card {
  position: relative;
  padding: 32px 36px 28px;
  border: 2px solid #D4AF37;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.3)),
    radial-gradient(ellipse at top, rgba(212, 175, 55, 0.16), transparent 70%);
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.55),
    0 0 40px rgba(212, 175, 55, 0.12),
    var(--shadow-deep);
}
.pump-card::before, .pump-card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #D4AF37;
}
.pump-card::before { top: -7px;    left: -7px;  border-right: none; border-bottom: none; }
.pump-card::after  { bottom: -7px; right: -7px; border-left: none;  border-top: none; }

/* Progress bar */
.pump-progress {
  position: relative;
  margin-bottom: 14px;
}

.pump-bar-bg {
  position: relative;
  height: 38px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.4));
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.55),
    inset 0 -1px 0 rgba(212, 175, 55, 0.06);
  overflow: hidden;
}

.pump-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    #5a141a 0%,
    #a82a2a 22%,
    #c89a2a 55%,
    #f0cf85 82%,
    #fff5c2 100%);
  background-size: 220% 100%;
  border-radius: 3px 0 0 3px;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
  transition: width 1.6s cubic-bezier(0.34, 1.2, 0.64, 1);
  animation: pumpShimmer 5s linear infinite;
}

@keyframes pumpShimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 220% 50%; }
}

/* Glossy highlight strip on top of the fill */
.pump-bar-shine {
  position: absolute;
  top: 1px;
  left: 4px;
  right: 4px;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent);
  pointer-events: none;
}

.pump-percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Playfair Display", serif;
  font-weight: 900;
  font-size: 20px;
  color: #fff;
  text-shadow:
    0 0 6px rgba(0,0,0,0.85),
    0 0 14px rgba(0,0,0,0.6),
    0 2px 4px rgba(0,0,0,0.7);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* Tagline beneath the bar */
.pump-quote {
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: #D4AF37;
  font-size: clamp(15px, 1.8vw, 18px);
  margin: 0 0 22px;
  letter-spacing: 0.02em;
  min-height: 1.4em;
}

/* Stats grid */
.pump-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px 0;
  margin-bottom: 22px;
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.pump-stat-value {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  color: #D4AF37;
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.pump-stat-label {
  font-family: "Roboto", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.6;
}

/* CTA button */
.pump-cta {
  display: inline-block;
  padding: 14px 34px;
  background: linear-gradient(180deg, #D4AF37, #a07d28);
  color: #1a0405;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  box-shadow:
    0 4px 14px rgba(212, 175, 55, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.pump-cta:hover {
  background: linear-gradient(180deg, #f0cf85, #c89a2a);
  transform: translateY(-1px);
  box-shadow:
    0 6px 20px rgba(212, 175, 55, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.pump-cta.disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
  filter: saturate(0.6);
}

.pump-status {
  margin-top: 18px;
  font-size: 11px;
  font-style: italic;
  color: var(--cream);
  opacity: 0.55;
  letter-spacing: 0.06em;
}

@media (max-width: 600px) {
  .pump-card { padding: 24px 18px; }
  .pump-stats { grid-template-columns: 1fr; gap: 4px; }
  .pump-stat { padding: 6px 0; }
  .pump-stats > .pump-stat:not(:last-child) {
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);
  }
}

/* =========================================================
   HALL OF FAME
   ========================================================= */
.hall {
  max-width: 1200px;
  margin: 30px auto 60px;
  padding: 0 24px;
  text-align: center;
}

.hall-title {
  font-size: clamp(36px, 5vw, 56px);
  color: #D4AF37;
  margin-bottom: 36px;
}
.hall-title::before, .hall-title::after {
  content: " ✦ ";
  color: var(--gold-dim);
  font-weight: 400;
}

.frames {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
  max-width: 1180px;
  margin: 0 auto;
}

.frame {
  position: relative;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.frame:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.55))
          drop-shadow(0 0 22px rgba(212, 175, 106, 0.25));
}

/* Image portraits — the PNG already includes its own ornate gold frame */
.portrait-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55));
  margin-bottom: 18px;
}

/* Empty 4th frame keeps the CSS-built ornate frame as a placeholder */
.frame-empty {
  padding: 18px 18px 24px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.65)),
    var(--bordeaux-deep);
  border: 6px double var(--gold);
  border-radius: 4px;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.6),
    0 12px 30px rgba(0,0,0,0.5);
  opacity: 0.85;
}

.portrait-empty {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin: 0 auto 18px;
  border: 3px solid var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--bordeaux-dark), #000);
  color: var(--gold-dim);
  font-family: "Playfair Display", serif;
  font-size: 96px;
  font-weight: 900;
  font-style: italic;
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.5);
}

.plaque-name {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 700;
  color: #D4AF37;
  letter-spacing: 0.04em;
}
.plaque-role {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 19px;
  color: #D4AF37;
  opacity: 1;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.plaque-bio {
  font-size: 16px;
  color: var(--cream);
  opacity: 0.88;
  line-height: 1.55;
  margin-bottom: 14px;
}

/* =========================================================
   LOUNGE MUSIC
   ========================================================= */
.lounge-music {
  max-width: 720px;
  margin: 60px auto 80px;
  padding: 0 24px;
}

.lounge-card {
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
  border: 1px solid rgba(212, 175, 106, 0.3);
  border-radius: 6px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-deep);
}

.lounge-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 240px;
}

.vinyl {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--gold) 18%, transparent 19%),
    repeating-radial-gradient(circle, #1a1a1a 0 2px, #000 2px 4px);
  border: 1px solid var(--gold-dim);
  flex-shrink: 0;
  animation: spin 6s linear infinite;
  animation-play-state: paused;
}
.vinyl.playing { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }

.lounge-title {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 18px;
  color: #D4AF37;
}
.lounge-track {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.55;
}

.lounge-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

#vol {
  appearance: none;
  width: 110px;
  height: 3px;
  background: var(--gold-dim);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
#vol::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-bright);
  border: 1px solid var(--gold);
  cursor: pointer;
}
#vol::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-bright);
  border: 1px solid var(--gold);
  cursor: pointer;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  border-top: 1px solid rgba(212, 175, 106, 0.2);
  padding: 50px 24px 40px;
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.5));
}

.footer-mark {
  height: 84px;
  width: auto;
  opacity: 0.88;
  margin-bottom: 16px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6));
}

.footer-tagline {
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: #D4AF37;
  margin-bottom: 12px;
  letter-spacing: 0.06em;
}

.footer-disclaimer {
  font-size: 11px;
  color: var(--cream);
  opacity: 0.4;
  letter-spacing: 0.08em;
  max-width: 540px;
  margin: 0 auto;
}

.footer-meta {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer-meta a {
  color: var(--gold);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.footer-meta a:hover {
  opacity: 1;
  color: var(--gold-bright);
  text-decoration: underline;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .nav { display: none; }
  .header-cta { display: none; }
  .hamburger { display: block; }
  .header-inner { padding: 12px 16px; gap: 12px; justify-content: space-between; }
  .hero { padding-top: 50px; }
  .counter-frame { padding: 22px 28px; }
  .lounge-card { flex-direction: column; align-items: stretch; text-align: center; }
  .lounge-meta { justify-content: center; }
  .lounge-controls { justify-content: center; }
}

@media (min-width: 901px) {
  .hamburger,
  .mobile-menu,
  .mobile-menu-backdrop {
    display: none !important;
  }
}