/* ═══════════════════════════════════════════════════════
   Cubloids — Main Stylesheet
   Desktop 1440px
═══════════════════════════════════════════════════════ */

/* ── Fonts ── */
@font-face {
  font-family: 'KreKeTanBubble';
  src: url('../assets/fonts/KreKeTanBubble.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'KreKeTanBubbleLarge';
  src: url('../assets/fonts/KreKeTanBubbleLarge.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'KreKeTanStandard';
  src: url('../assets/fonts/KreKeTanStandard.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* ── Variables ── */
:root {
  --dark:        #444443;
  --orange:      #ffa560;
  --mint:        #65ffcc;
  --salmon:      #e29191;
  --purple:      #b394cc;
  --font-bubble: 'KreKeTanBubble', sans-serif;
  --font-body:   'KreKeTanStandard', sans-serif;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; }
img { display: block; }

/* ── Page ── */
body {
  background: #fff;
  overflow-x: hidden;
}
.page {
  width: 100%;
  position: relative;
}

/* ═══════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════ */
.s-hero {
  position: relative;
  width: 100%;
  height: 749px;
  background: var(--orange);
  overflow: hidden;
}

/* Nav bar — 690×60, centered, top:32 */
.nav-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 32px;
  width: 690px;
  height: 60px;
  background: var(--dark);
  border-radius: 8px;
}

/* Logo group */
.nav-logo {
  position: absolute;
  left: 0;
  top: 0;
  height: 60px;
}
.nav-favicon {
  position: absolute;
  left: 12px;
  top: 6px;
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.nav-wordmark {
  position: absolute;
  left: 72px;
  top: 18px;
  font-family: var(--font-bubble);
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
}
/* Vertical divider line */
.nav-rule {
  position: absolute;
  left: 155px;
  top: 0;
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,0.2);
}

/* Nav items — disabled (Workshop, Shop) */
.nav-item {
  position: absolute;
  font-family: var(--font-bubble);
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
}
.nav-item--disabled {
  color: rgba(255,255,255,0.5);
}
.nav-item--workshop {
  left: 177px;
  top: 18px;
  width: 141px;
  height: 25px;
}
.nav-item--shop {
  left: 342px;
  top: 18px;
  width: 100px;
  height: 25px;
}
.nav-item--yourstuff {
  left: 466px;
  top: 18px;
  width: 92px;
  height: 25px;
}
/* "coming soon" labels */
.nav-soon {
  font-family: var(--font-bubble);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  opacity: 1;
  margin-left: 4px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.nav-item--disabled .nav-soon {
  color: rgba(255,255,255,1);
}

/* Connect button */
.btn-connect {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 92px;
  height: 36px;
  background: #65ffcc;
  border-radius: 8px;
  font-family: var(--font-bubble);
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
}

/* ── CUBLOIDS title letters ── */
.hero-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center top;
  top: 182px;
  width: 1408px;
  height: 250px;
}
.hl {
  position: absolute;
  top: 0;
  height: 250px;
  cursor: pointer;
}
.hl img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  image-rendering: pixelated;
  transition: opacity 0.12s ease;
}
.hl-flat { opacity: 1; }
.hl-3d   { opacity: 0; }
.hl:hover .hl-flat,
.hl.is-expanded .hl-flat { opacity: 0; }
.hl:hover .hl-3d,
.hl.is-expanded .hl-3d   { opacity: 1; }
.hl-c { left: 0;      width: 179px; }
.hl-u { left: 179px;  width: 179px; }
.hl-b { left: 358px;  width: 179px; }
.hl-l { left: 537px;  width: 179px; }
.hl-o { left: 716px;  width: 179px; }
.hl-i { left: 895px;  width: 155px; }
.hl-d { left: 1050px; width: 179px; }
.hl-s { left: 1229px; width: 179px; }

/* ── CTA Buttons (all variants share base) ── */
.btn-cta {
  position: absolute;
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.btn-cta span {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-bubble);
  font-size: 40px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
}

/* Standard CTA — 267×80, #93d8b9 face */
.btn-cta--standard {
  width: 267px;
  height: 80px;
  left: 50%;
  transform: translateX(-50%);
  top: 472px;
}
.btn-cta--standard::before {
  content: '';
  position: absolute;
  left: 2px; top: 0;
  width: 265px; height: 78px;
  background: var(--dark);
  border: 4px solid var(--dark);
  border-radius: 8px;
}
.btn-cta--standard::after {
  content: '';
  position: absolute;
  left: 0; top: 2px;
  width: 265px; height: 78px;
  background: #93d8b9;
  border: 4px solid var(--dark);
  border-radius: 8px;
}
.btn-cta--standard span {
  top: 21px;
  color: var(--dark);
}

/* Hero available count */
.hero-available {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 556px;
  font-family: var(--font-body);
  font-size: 36px;
  color: #fffdfd;
  white-space: nowrap;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════
   NFT STRIP
═══════════════════════════════════════════════════════ */
.s-nft-strip {
  position: relative;
  width: 100%;
  height: 625px;
  margin-top: -139px;
  overflow: hidden;
}
/* Dark band starts at y=139 (= page y=799, where hero ends) */
.nft-band {
  position: absolute;
  left: 0; right: 0;
  top: 139px; bottom: 0;
  background: var(--dark);
}
/* Inner strip: 2298px wide, center at x≈784 */
.nft-inner {
  position: absolute;
  width: 2298px;
  height: 625px;
  left: calc(54.17% + 4px);
  transform: translateX(-50%);
  top: 0;
}
/* OG Cubloids grid: 2250px wide, at x=24 */
.nft-grid {
  position: absolute;
  left: 24px;
  top: 0;
  width: 2250px;
  height: 625px;
}
.nft-grid img {
  position: absolute;
  width: 250px;
  height: 250px;
  object-fit: cover;
  image-rendering: pixelated;
}

/* ═══════════════════════════════════════════════════════
   GET SECTION
═══════════════════════════════════════════════════════ */
.s-get {
  position: relative;
  width: 100%;
  height: 1026px;
  background: var(--mint);
  overflow: hidden;
}

/* Section title images (GET, RARITY, FAQ) */
.s-title-img {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: fill;
  display: block;
  max-width: none;
  z-index: 0;
}
.s-title-img--get    { width: 684px;  height: 288px; }
.s-title-img--rarity { width: 1296px; height: 288px; }
.s-title-img--faq    { width: 612px;  height: 288px; }

/* Get card — 534×786, centered, top:120 */
.get-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 120px;
  width: 534px;
  height: 786px;
}
.get-card-back {
  position: absolute;
  left: 2px; top: 98px;
  width: 532px; height: 686px;
  background: var(--dark);
  border: 6px solid var(--dark);
  border-radius: 8px;
}
.get-card-front {
  position: absolute;
  left: 0; top: 100px;
  width: 532px; height: 686px;
  background: #dfe592;
  border: 6px solid var(--dark);
  border-radius: 8px;
}
.get-card-portrait-wrap {
  position: absolute;
  left: 166px; top: 0;
  width: 200px; height: 200px;
  border-radius: 100px;
  border: 6px solid var(--dark);
  overflow: hidden;
  z-index: 3;
}
.get-card-portrait-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.get-card-heading {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 224px;
  font-family: var(--font-bubble);
  font-size: 72px;
  font-weight: 500;
  color: var(--dark);
  white-space: nowrap;
  z-index: 3;
  line-height: 1;
}
.get-card-title {
  position: absolute;
  left: 74px; top: 322px;
  width: 384px; height: 60px;
  object-fit: fill;
  max-width: none;
  z-index: 3;
}
.get-card-desc {
  position: absolute;
  left: 38px; top: 406px;
  width: 456px;
  font-family: var(--font-body);
  font-size: 44px;
  line-height: 24px;
  color: var(--dark);
  text-align: center;
  z-index: 3;
}

/* Wide CTA — 457×64, #69d363 face */
.btn-cta--wide {
  width: 457px;
  height: 64px;
  left: 37px;
  top: 622px;
  z-index: 3;
}
.btn-cta--wide::before {
  content: '';
  position: absolute;
  left: 2px; top: 0;
  width: 455px; height: 62px;
  background: var(--dark);
  border: 4px solid var(--dark);
  border-radius: 8px;
}
.btn-cta--wide::after {
  content: '';
  position: absolute;
  left: 0; top: 2px;
  width: 455px; height: 62px;
  background: #69d363;
  border: 4px solid var(--dark);
  border-radius: 8px;
}
.btn-cta--wide span {
  top: 13px;
  color: var(--dark);
}

.get-card-avail {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 710px;
  background: #ccc;
  border-radius: 4px;
  padding: 2px 12px 6px;
  z-index: 3;
  white-space: nowrap;
}
.get-card-avail span {
  font-family: var(--font-body);
  font-size: 36px;
  color: var(--dark);
  white-space: nowrap;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════
   RARITY SECTION
═══════════════════════════════════════════════════════ */
.s-rarity {
  position: relative;
  width: 100%;
  height: 882px;
  background: var(--salmon);
  overflow: hidden;
}
.rarity-cards {
  position: absolute;
  left: 0; right: 0;
  top: 120px;
}

/* Rarity card base */
.r-card {
  position: absolute;
  width: 384px;
  height: 642px;
}
.r-card--cubloids      { left: max(24px, calc((100% - 1200px) / 2)); }
.r-card--dudeloids     { left: 50%; transform: translateX(-50%); width: 384px; }
.r-card--incubatoloids { right: max(24px, calc((100% - 1200px) / 2)); }

.r-card-back {
  position: absolute;
  left: 3px; top: 97px;
  width: 382px; height: 541px;
  background: var(--dark);
  border: 6px solid var(--dark);
  border-radius: 8px;
}
.r-card-front {
  position: absolute;
  left: 0; top: 100px;
  width: 382px; height: 541px;
  border: 6px solid var(--dark);
  border-radius: 8px;
}
.r-card-front--cubloids      { background: #94c4d3; }
.r-card-front--dudeloids     { background: #b465ae; }
.r-card-front--incubatoloids { background: #8abb85; }

.r-card-portrait-wrap {
  position: absolute;
  left: 105px; top: 0;
  width: 175px; height: 175px;
  border-radius: 88px;
  border: 6px solid var(--dark);
  overflow: hidden;
  z-index: 3;
}
.r-card-portrait-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.r-card-title {
  position: absolute;
  top: 224px;
  height: 42px;
  object-fit: fill;
  max-width: none;
  z-index: 3;
}
.r-card-title--cubloids      { left: 58px;  width: 269px; }
.r-card-title--dudeloids     { left: 40px;  width: 304px; }
.r-card-title--incubatoloids { left: 32px;  width: 321px; height: 32px; }

.r-card-badge {
  position: absolute;
  top: 290px;
  left: 50%;
  transform: translateX(-50%);
  background: #ccc;
  border-radius: 4px;
  padding: 2px 12px 6px;
  font-family: var(--font-body);
  font-size: 36px;
  color: var(--dark);
  white-space: nowrap;
  z-index: 3;
  line-height: 1;
}

.r-card-desc {
  position: absolute;
  left: 24px; top: 354px;
  width: 336px;
  font-family: var(--font-body);
  font-size: 44px;
  line-height: 28px;
  color: var(--dark);
  text-align: center;
  z-index: 3;
}

/* ═══════════════════════════════════════════════════════
   FAQ SECTION
═══════════════════════════════════════════════════════ */
.s-faq {
  position: relative;
  width: 100%;
  background: var(--purple);
  padding: 120px 0;
}
.faq-body {
  position: relative;
  z-index: 1;
  max-width: 792px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.faq-item {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.faq-q {
  font-family: var(--font-bubble);
  font-size: 62px;
  font-weight: 500;
  line-height: 24px;
  color: var(--dark);
}
.faq-a {
  font-family: var(--font-body);
  font-size: 44px;
  line-height: 28px;
  color: var(--dark);
}

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.footer {
  position: relative;
  width: 100%;
  height: 618px;
  background: var(--dark);
  overflow: hidden;
}
.footer-heading {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 120px;
  font-family: var(--font-bubble);
  font-size: 140px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}

/* Footer CTA — 362×80, #ffa560 face, brown shadow */
.btn-cta--footer {
  width: 362px;
  height: 80px;
  left: 50%;
  transform: translateX(-50%);
  top: 304px;
}
.btn-cta--footer::before {
  content: '';
  position: absolute;
  left: 2px; top: 0;
  right: 0; height: 78px;
  background: #9d7c63;
  border: 4px solid #9d7c63;
  border-radius: 8px;
}
.btn-cta--footer::after {
  content: '';
  position: absolute;
  left: 0; top: 2px;
  right: 2px; height: 78px;
  background: var(--orange);
  border: 4px solid #9d7c63;
  border-radius: 8px;
}
.btn-cta--footer span {
  top: 21px;
  color: #fff;
}

.footer-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 36px;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}
.footer-text:nth-of-type(2) { top: 396px; }
.footer-text:nth-of-type(3) { top: 430px; }

.footer-am      { color: #ff6565; }
.footer-twitter { color: #65c4ff; }
.footer-discord { color: #656bff; }

.footer-contract {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 464px;
  font-family: var(--font-body);
  font-size: 36px;
  color: var(--mint);
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
   BUTTON HOVER STATES
   All shifts from Figma State=Hovered variants:
   – Shadow layer (::before) shifts to left:4, top:−2
   – Face layer  (::after)  shifts to left:−2, top:4
   – Face color changes per button
   – Connect: opacity fade to 75%
═══════════════════════════════════════════════════════ */

/* ── Connect ── */
.btn-connect {
  transition: background 0.12s ease;
}
.btn-connect:hover {
  background: rgba(101, 255, 204, 0.75);
}

/* ── Standard CTA (hero) — green → sky blue ── */
.btn-cta--standard::before,
.btn-cta--standard::after {
  transition: left 0.12s ease, top 0.12s ease, background 0.12s ease;
}
.btn-cta--standard span {
  transition: color 0.12s ease;
}
.btn-cta--standard:hover::before {
  left: 4px;
  top: -2px;
}
.btn-cta--standard:hover::after {
  left: -2px;
  top: 4px;
  background: #65c4ff;
}
.btn-cta--standard:hover span {
  color: #fff;
}

/* ── Wide CTA (Get section) — green → coral red ── */
.btn-cta--wide::before,
.btn-cta--wide::after {
  transition: left 0.12s ease, top 0.12s ease, background 0.12s ease;
}
.btn-cta--wide span {
  transition: color 0.12s ease;
}
.btn-cta--wide:hover::before {
  left: 4px;
  top: -2px;
}
.btn-cta--wide:hover::after {
  left: -2px;
  top: 4px;
  background: #ff6565;
}
.btn-cta--wide:hover span {
  color: #fff;
}

/* ── Footer CTA — orange → bright green ── */
.btn-cta--footer::before,
.btn-cta--footer::after {
  transition: left 0.12s ease, top 0.12s ease, right 0.12s ease, background 0.12s ease;
}
.btn-cta--footer:hover::before {
  left: 4px;
  top: -2px;
  right: -2px;
}
.btn-cta--footer:hover::after {
  left: -2px;
  top: 4px;
  right: 4px;
  background: #6bff63;
}

/* ═══════════════════════════════════════════════════════
   MOBILE NAV + MOBILE CUBLOIDS GRID + MENU OVERLAY
   (hidden by default, shown via mobile media query)
═══════════════════════════════════════════════════════ */

/* Mobile nav bar */
.nav-mobile {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 74px;
  z-index: 10;
}
.nav-mobile-logo {
  position: absolute;
  left: 16px; top: 12px;
  width: 50px; height: 50px;
  background: var(--dark);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.nav-mobile-logo img {
  width: 34px; height: 34px;
  object-fit: contain;
}
.nav-mobile-menu {
  position: absolute;
  right: 16px; top: 12px;
  width: 50px; height: 50px;
  background: var(--dark);
  border-radius: 6px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.nav-mobile-menu span {
  display: block;
  width: 24px; height: 3px;
  background: #fff;
  border-radius: 2px;
}

/* Mobile CUBLOIDS grid */
.hero-title-mobile {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 92px;
  width: 360px;
  height: 504px;
}

/* Mobile dropdown menu — slides in from the right.
   Spans left:16px to right edge of hamburger (right:16px), so width = 100% - 32px.
   Uses transform so the CSS transition fires on both open and close. */
.menu-dropdown {
  position: fixed;
  top: 86px;
  left: 16px;
  width: calc(100% - 32px);
  background: var(--dark);
  border-radius: 6px;
  padding: 24px;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(120%);
  /* On close: slide out first (0.3s), then hide (0s delay = after slide) */
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.menu-dropdown.is-open {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  /* On open: show immediately, then slide in */
  transition: transform 0.3s ease, visibility 0s linear 0s;
}
.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.menu-link {
  font-family: var(--font-bubble);
  font-size: 32px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}
.menu-link--disabled { color: #fff; }
.menu-connect-btn {
  width: 100%;
  height: 36px;
  background: var(--mint);
  border-radius: 8px;
  font-family: var(--font-bubble);
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
  border: none;
}

/* ═══════════════════════════════════════════════════════
   WIDE-DESKTOP SCALE  —  max-width: 1439px
   Hero title: scale proportionally so letters never clip
═══════════════════════════════════════════════════════ */
@media (max-width: 1439px) and (min-width: 1200px) {
  .hero-title {
    transform: translateX(-50%) scale(0.85);
  }
}

/* ═══════════════════════════════════════════════════════
   NARROW-DESKTOP  —  1024px – 1199px
   Rarity cards can't fit 3-across below 1200px;
   stack to single column. Hero title scaled further.
═══════════════════════════════════════════════════════ */
@media (max-width: 1199px) and (min-width: 1024px) {
  /* Hero title */
  .hero-title {
    transform: translateX(-50%) scale(0.72);
  }

  /* Rarity section — single column, 459×583 cards */
  .s-rarity { height: 2169px; }
  .r-card--cubloids      { left: 50%; transform: translateX(-50%); top: 90px; }
  .r-card--dudeloids     { top: 793px; }
  .r-card--incubatoloids { right: auto; left: 50%; transform: translateX(-50%); top: 1496px; }
}

/* ═══════════════════════════════════════════════════════
   RARITY CARDS — tablet size  (≤1199px, overridden by mobile)
═══════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .r-card { width: 459px; height: 583px; }
  .r-card-back  { left: 3px; top: 97px; width: 456px; height: 483px; }
  .r-card-front { left: 0;   top: 100px; width: 456px; height: 483px; }
  .r-card-portrait-wrap { left: 128px; width: 200px; height: 200px; border-radius: 250px; }
  .r-card-title--cubloids      { left: 94px; width: 269px; height: 42px; }
  .r-card-title--dudeloids     { left: 76px; width: 304px; height: 42px; }
  .r-card-title--incubatoloids { left: 17px; width: 422px; height: 42px; }
  .r-card-desc { left: 40px; width: 376px; }
}

/* ═══════════════════════════════════════════════════════
   TABLET  —  max-width: 1023px  (768px design)
═══════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Hero */
  .hero-title { left: 50%; transform: translateX(-50%); width: 700px; height: 125px; top: 152px; }
  .hl { height: 125px; }
  .hl-c { left: 0;     width: 89px; }
  .hl-u { left: 89px;  width: 89px; }
  .hl-b { left: 178px; width: 89px; }
  .hl-l { left: 267px; width: 89px; }
  .hl-o { left: 356px; width: 89px; }
  .hl-i { left: 445px; width: 77px; }
  .hl-d { left: 522px; width: 89px; }
  .hl-s { left: 611px; width: 89px; }

  /* Hero CTA — small variant (206×62, font 32px) */
  .btn-cta--standard { width: 206px; height: 62px; top: 317px; }
  .btn-cta--standard::before { width: 204px; height: 60px; }
  .btn-cta--standard::after  { width: 204px; height: 60px; }
  .btn-cta--standard span { font-size: 32px; top: 16px; }
  .hero-available { top: 383px; }

  /* NFT Strip */
  .s-nft-strip { height: 400px; margin-top: -342px; }
  .nft-band { top: 90px; }
  .nft-inner { left: 50%; height: 400px; }
  .nft-grid { transform: scale(0.64); transform-origin: 50% 0; }

  /* Section title SVGs */
  .s-title-img--get    { width: 380px; height: 160px; }
  .s-title-img--rarity { width: 720px; height: 160px; }
  .s-title-img--faq    { width: 340px; height: 160px; }

  /* Get section */
  .s-get { height: 966px; }
  .get-card { top: 90px; }

  /* Rarity section — cards stacked vertically (768px Figma) */
  .s-rarity { height: 2169px; }
  .rarity-cards { top: 0; }
  .r-card { position: absolute; left: 50%; transform: translateX(-50%); }
  .r-card--cubloids      { top: 90px; }
  .r-card--dudeloids     { top: 793px; left: 50%; transform: translateX(-50%); width: 460px; }
  .r-card--incubatoloids { top: 1496px; right: auto; left: 50%; transform: translateX(-50%); }

  /* FAQ section */
  .s-faq { padding: 90px 128px 90px 129px; }
  .faq-a { font-size: 40px; line-height: 26px; }

  /* Footer */
  .footer { height: 416px; }
  .footer-heading { font-size: 80px; top: 101px; }
  .btn-cta--footer { width: 271px; height: 60px; top: 182px; }
  .btn-cta--footer::before { height: 58px; }
  .btn-cta--footer::after  { height: 58px; }
  .btn-cta--footer span { font-size: 32px; top: 16px; }
  .footer-text:nth-of-type(2) { top: 254px; }
  .footer-text:nth-of-type(3) { top: 288px; }
  .footer-contract { top: 322px; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE  —  max-width: 767px  (360px design)
═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Show mobile nav, hide desktop nav */
  .nav-bar { display: none; }
  .nav-mobile { display: block; }

  /* Hero */
  .s-hero { height: 756px; }
  .hero-title { display: none; }
  .hero-title-mobile { display: block; }

  /* Disable hover states — not applicable on touch */
  .btn-cta--standard:hover::before { left: 2px; top: 0; }
  .btn-cta--standard:hover::after  { left: 0; top: 2px; background: var(--mint); }
  .btn-cta--standard:hover span    { color: var(--dark); }
  .hl:hover .hl-flat { opacity: 1; }
  .hl:hover .hl-3d   { opacity: 0; }

  /* Mobile letter grid positions */
  .hl { height: 168px; }
  .hl-c { left: 0;     width: 120px; top: 0; }
  .hl-u { left: 120px; width: 120px; top: 0; }
  .hl-b { left: 240px; width: 120px; top: 0; }
  .hl-l { left: 0;     width: 120px; top: 168px; }
  .hl-o { left: 120px; width: 120px; top: 168px; }
  .hl-i { left: 16px;  width: 104px; top: 336px; }
  .hl-d { left: 120px; width: 120px; top: 336px; }
  .hl-s { left: 240px; width: 120px; top: 336px; }

  /* Hero CTA — small */
  .btn-cta--standard { width: 206px; height: 62px; top: 608px; }
  .btn-cta--standard::before { width: 204px; height: 60px; }
  .btn-cta--standard::after  { width: 204px; height: 60px; }
  .btn-cta--standard span { font-size: 32px; top: 16px; }
  .hero-available { top: 682px; font-size: 36px; }

  /* NFT Strip — hidden on mobile */
  .s-nft-strip { display: none; }

  /* Section title SVGs */
  .s-title-img--get    { width: 171px; height: 72px; }
  .s-title-img--rarity { width: 324px; height: 72px; }
  .s-title-img--faq    { width: 153px; height: 72px; }

  /* Get section */
  .s-get { height: 570px; }
  .get-card { width: 289px; height: 490px; top: 40px; }
  .get-card-back  { left: 1px; top: 50px; width: 285px; height: 438px; border-width: 3px; }
  .get-card-front { left: 0;   top: 52px; width: 285px; height: 438px; border-width: 3px; }
  .get-card-portrait-wrap { left: 93px; width: 100px; height: 100px; border-radius: 50px; border-width: 3px; }
  .get-card-heading { font-size: 42px; top: 112px; }
  .get-card-title { left: 47px; top: 166px; width: 192px; height: 30px; }
  .get-card-desc { left: 18px; top: 213px; width: 246px; font-size: 24px; line-height: 16px; }
  .get-card-avail { top: 441px; }
  .get-card-avail span { font-size: 24px; }

  /* Wide CTA — mobile size (247×64) */
  .btn-cta--wide { width: 247px; height: 64px; left: 18px; top: 365px; }
  .btn-cta--wide::before { width: 245px; height: 62px; }
  .btn-cta--wide::after  { width: 245px; height: 62px; }
  .btn-cta--wide span { font-size: 32px; top: 17px; }

  /* Rarity section — stacked small cards */
  .s-rarity { height: 1505px; }
  .rarity-cards { top: 0; }
  .r-card { width: 286px; height: 435px; position: absolute; left: 50%; transform: translateX(-50%); }
  .r-card--cubloids      { top: 40px; }
  .r-card--dudeloids     { top: 535px; left: 50%; transform: translateX(-50%); width: 286px; }
  .r-card--incubatoloids { top: 1030px; right: auto; left: 50%; transform: translateX(-50%); }

  .r-card-back { left: 2px; top: 50px; width: 284px; height: 382px; border-width: 3px; }
  .r-card-back--dudeloids { left: 2px; }
  .r-card-front { left: 0; top: 53px; width: 284px; height: 382px; border-width: 3px; }
  .r-card-portrait-wrap { left: 93px; width: 100px; height: 100px; border-radius: 50px; border-width: 3px; }
  .r-card-title { top: 112px; height: 30px; }
  .r-card-title--cubloids      { left: 47px;  width: 192px; }
  .r-card-title--dudeloids     { left: 35px;  width: 217px; }
  .r-card-title--incubatoloids { left: 17px;  width: 241px; height: 24px; }
  .r-card-badge { top: 154px; font-size: 24px; }
  .r-card-desc { top: 195px; left: 20px; width: 246px; font-size: 32px; line-height: 24px; }

  /* FAQ section */
  .s-faq { padding: 40px 16px; }
  .faq-body { gap: 20px; }
  .faq-item { gap: 16px; }
  .faq-q { font-size: 48px; line-height: 42px; }
  .faq-a { font-size: 32px; line-height: 24px; }

  /* Footer */
  .footer { height: 289px; }
  .footer-heading { font-size: 36px; top: 59px; }
  .btn-cta--footer { width: 271px; height: 60px; top: 101px; }
  .btn-cta--footer::before { height: 58px; }
  .btn-cta--footer::after  { height: 58px; }
  .btn-cta--footer span { font-size: 32px; top: 16px; }
  .footer-text { font-size: 24px; }
  .footer-text:nth-of-type(2) { top: 185px; }
  .footer-text:nth-of-type(3) { top: 209px; }
  .footer-contract { top: 233px; font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════
   LARGE DESKTOP  —  min-width: 1600px  (1920px design)
   Three 459px rarity cards need ≥1510px inner width;
   1600px is the lowest viewport where they fit with
   comfortable padding on both sides.
═══════════════════════════════════════════════════════ */
@media (min-width: 1600px) {

  /* ── Hero section — 1920px Figma ── */
  .s-hero { height: 835px; }
  .hero-title { width: 1888px; height: 336px; }
  .hl         { height: 336px; }
  .hl-c { left: 0;      width: 240px; }
  .hl-u { left: 240px;  width: 240px; }
  .hl-b { left: 480px;  width: 240px; }
  .hl-l { left: 720px;  width: 240px; }
  .hl-o { left: 960px;  width: 240px; }
  .hl-i { left: 1200px; width: 208px; }
  .hl-d { left: 1408px; width: 240px; }
  .hl-s { left: 1648px; width: 240px; }
  .btn-cta--standard { top: 558px; }
  .hero-available    { top: 642px; }

  /* NFT strip — re-center for wider viewports */
  .nft-inner { left: 50%; }

  /* ── Rarity section ── */
  .s-rarity { height: 823px; }

  /* Switch to flexbox; padding compresses below 1920 but
     never drops below 24px minimum on each side */
  .rarity-cards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 66px;
    padding: 0 max(24px, calc((100% - 1510px) / 2));
  }

  /* Cards become flex items — clear absolute offsets */
  .r-card            { position: relative; flex-shrink: 0; width: 459px; height: 583px; }
  .r-card--cubloids      { left: auto; }
  .r-card--dudeloids     { left: auto; transform: none; width: 460px; }
  .r-card--incubatoloids { left: auto; right: auto; }

  /* Back & front panels */
  .r-card-back  { left: 3px; top: 97px; width: 456px; height: 483px; }
  .r-card-front { left: 0;   top: 100px; width: 456px; height: 483px; }

  /* Portrait — original 200px size */
  .r-card-portrait-wrap { left: 128px; width: 200px; height: 200px; border-radius: 250px; }

  /* Title image positions — original layout */
  .r-card-title--cubloids      { left: 94px; width: 269px; height: 42px; }
  .r-card-title--dudeloids     { left: 76px; width: 304px; height: 42px; }
  .r-card-title--incubatoloids { left: 17px; width: 422px; height: 42px; }

  /* Description — original width, tighter line-height */
  .r-card-desc { left: 40px; width: 376px; line-height: 24px; }

  /* ── FAQ section ── */
  .faq-body { max-width: 1112px; }
  .faq-a    { font-size: 42px; line-height: 28px; }

  /* ── Footer ── */
  .footer-heading { font-size: 180px; top: 100px; }
  .btn-cta--footer { top: 305px; }
  .footer-text:nth-of-type(2) { top: 397px; }
  .footer-text:nth-of-type(3) { top: 431px; }
  .footer-contract { top: 465px; }
}