/* AK47 site styles */

:root {
  --bg: #060606;
  --bg-2: #0d0d0d;
  --bg-3: #131313;
  --ink: #f2f2f2;
  --ink-dim: #a8a8a8;
  --ink-mute: #6a6a6a;
  --line: #1a1a1a;
  --line-2: #232323;
  --y: #C13584;
  --y-2: #E1306C;
  --y-glow: rgba(193, 53, 132, 0.28);
  --y-soft: rgba(193, 53, 132, 0.06);

  --f-body: 'Inter', system-ui, sans-serif;
  --f-display: 'Bebas Neue', Impact, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  --nav-h: 84px;
  --pad: clamp(20px, 4vw, 60px);
  --maxw: 1280px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
}

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

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: thin;
  scrollbar-color: rgba(193, 53, 132, 0.45) var(--bg);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: rgba(193, 53, 132, 0.4);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(193, 53, 132, 0.65); }

body {
  min-height: 100vh;
  position: relative;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input { font-family: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--y); color: #fff; }

/* corner glows, centers pushed off-screen, extra stops so it doesn't band */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* left */
    radial-gradient(ellipse 950px 750px at -10% 8%,
      rgba(193, 53, 132, 0.06) 0%,
      rgba(193, 53, 132, 0.035) 22%,
      rgba(193, 53, 132, 0.016) 42%,
      rgba(193, 53, 132, 0.006) 62%,
      transparent 82%),
    /* right */
    radial-gradient(ellipse 1050px 850px at 110% 32%,
      rgba(193, 53, 132, 0.055) 0%,
      rgba(193, 53, 132, 0.03) 22%,
      rgba(193, 53, 132, 0.014) 42%,
      rgba(193, 53, 132, 0.005) 62%,
      transparent 82%),
    /* bottom-center — kept as is */
    radial-gradient(ellipse 850px 650px at 50% 118%,
      rgba(193, 53, 132, 0.09) 0%,
      rgba(193, 53, 132, 0.05) 22%,
      rgba(193, 53, 132, 0.025) 42%,
      rgba(193, 53, 132, 0.01) 62%,
      transparent 82%);
  animation: bgGlowShift 24s ease-in-out infinite;
}
@keyframes bgGlowShift {
  0%,100% { transform: translate3d(0, 0, 0); }
  50%     { transform: translate3d(0, -14px, 0); }
}

@media (max-width: 700px) {
  body::before {
    background:
      radial-gradient(ellipse 620px 520px at -22% 8%,
        rgba(193, 53, 132, 0.06) 0%,
        rgba(193, 53, 132, 0.03) 25%,
        rgba(193, 53, 132, 0.012) 50%,
        transparent 80%),
      radial-gradient(ellipse 620px 520px at 122% 32%,
        rgba(193, 53, 132, 0.05) 0%,
        rgba(193, 53, 132, 0.028) 25%,
        rgba(193, 53, 132, 0.01) 50%,
        transparent 80%),
      radial-gradient(ellipse 520px 420px at 50% 118%,
        rgba(193, 53, 132, 0.08) 0%,
        rgba(193, 53, 132, 0.04) 25%,
        rgba(193, 53, 132, 0.015) 50%,
        transparent 80%);
  }
}

.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
}

/* faint blueprint grid, fades out toward the edges */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(193, 53, 132, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193, 53, 132, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 0%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 0%, transparent 88%);
}

/* small floating crosshair marks in the bg, transform-only */
.bg-dots {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.bg-dots i {
  position: absolute;
  width: 9px;
  height: 9px;
  opacity: 0.55;
  transform: translate3d(0, 0, 0);
  background:
    linear-gradient(#C13584, #C13584) center / 1.5px 9px no-repeat,
    linear-gradient(#C13584, #C13584) center / 9px 1.5px no-repeat;
}
.bg-dots i::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(193, 53, 132, 0.35);
  border-radius: 50%;
}
.bg-dots i:nth-child(1)  { top:  8%; left: 15%; animation: drift-a 14s ease-in-out infinite; }
.bg-dots i:nth-child(2)  { top: 22%; left: 78%; animation: drift-b 16s ease-in-out infinite; width: 7px; height: 7px; opacity: 0.4; }
.bg-dots i:nth-child(3)  { top: 45%; left: 10%; animation: drift-c 15s ease-in-out infinite; width: 11px; height: 11px; }
.bg-dots i:nth-child(4)  { top: 60%; left: 88%; animation: drift-a 18s ease-in-out infinite reverse; opacity: 0.45; }
.bg-dots i:nth-child(5)  { top: 35%; left: 55%; animation: drift-b 17s ease-in-out infinite; width: 7px; height: 7px; opacity: 0.35; }
.bg-dots i:nth-child(6)  { top: 82%; left: 22%; animation: drift-c 13s ease-in-out infinite reverse; width: 9px; height: 9px; }
.bg-dots i:nth-child(7)  { top: 15%; left: 45%; animation: drift-a 15s ease-in-out infinite reverse; width: 6px; height: 6px; opacity: 0.35; }
.bg-dots i:nth-child(8)  { top: 55%; left: 40%; animation: drift-b 19s ease-in-out infinite reverse; width: 7px; height: 7px; opacity: 0.4; }
.bg-dots i:nth-child(9)  { top: 72%; left: 62%; animation: drift-c 12s ease-in-out infinite; width: 9px; height: 9px; opacity: 0.45; }
.bg-dots i:nth-child(10) { top: 90%; left: 70%; animation: drift-a 16s ease-in-out infinite; width: 7px; height: 7px; opacity: 0.35; }

@keyframes drift-a {
  0%,100% { transform: translate3d(0, 0, 0); }
  50%     { transform: translate3d(140px, -110px, 0); }
}
@keyframes drift-b {
  0%,100% { transform: translate3d(0, 0, 0); }
  50%     { transform: translate3d(-130px, 130px, 0); }
}
@keyframes drift-c {
  0%,100% { transform: translate3d(0, 0, 0); }
  50%     { transform: translate3d(160px, 90px, 0); }
}

@media (max-width: 700px) {
  .bg-dots i:nth-child(n+8) { display: none; }
  /* this one lands right next to the ENTER SHOP button on small screens, looks like clutter */
  .bg-dots i:nth-child(2) { display: none; }
  /* Smaller travel on mobile so dots don't run off-screen */
  @keyframes drift-a {
    0%,100% { transform: translate3d(0, 0, 0); }
    50%     { transform: translate3d(70px, -60px, 0); }
  }
  @keyframes drift-b {
    0%,100% { transform: translate3d(0, 0, 0); }
    50%     { transform: translate3d(-65px, 70px, 0); }
  }
  @keyframes drift-c {
    0%,100% { transform: translate3d(0, 0, 0); }
    50%     { transform: translate3d(80px, 50px, 0); }
  }
}

/* loader */
.loader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10000;
  display: grid;
  place-items: center;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.loader.done {
  opacity: 0;
  visibility: hidden;
}
.loader-inner { text-align: center; }
.loader-logo {
  font-family: var(--f-display);
  font-size: clamp(60px, 12vw, 80px);
  letter-spacing: 4px;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 20px;
}
.loader-logo span { color: var(--y); }
.loader-bar {
  width: 180px;
  height: 2px;
  background: var(--line);
  overflow: hidden;
  margin: 0 auto 12px;
  border-radius: 2px;
}
.loader-bar span {
  display: block;
  height: 100%;
  background: var(--y);
  width: 0%;
  animation: loadFill 1s var(--ease-out) forwards;
}
@keyframes loadFill { to { width: 100%; } }
.loader-text {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 3px;
}

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #833AB4, #E1306C, #833AB4);
  box-shadow: 0 0 8px var(--y-glow);
  z-index: 101;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* nav */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(6, 6, 6, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}

.nav-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 40px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s var(--ease-out);
}
.brand:hover { transform: scale(1.04); }
.brand:hover .brand-mark { transform: rotate(-4deg) scale(1.08); }
.brand-mark {
  color: var(--y);
  display: inline-flex;
  align-items: center;
  transition: transform 0.4s var(--ease-out);
}
.brand-mark img {
  /* Logo art is a wide landscape image (rifle silhouette) —
     size by width, let height follow the aspect ratio */
  width: 76px;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 6px var(--y-glow));
}
.brand-text {
  font-family: var(--f-display);
  font-size: 30px;
  letter-spacing: 3px;
  line-height: 1;
}
.brand-text em {
  color: var(--y);
  font-style: normal;
  text-shadow: 0 0 12px var(--y-glow);
}

.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  margin-right: auto;
  padding: 6px;
  background: rgba(15, 15, 15, 0.5);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.nav-indicator {
  position: absolute;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  background: var(--y-soft);
  border: 1px solid rgba(193, 53, 132, 0.35);
  border-radius: 999px;
  transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out), opacity 0.3s var(--ease);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  box-shadow: 0 0 20px rgba(193, 53, 132, 0.15) inset;
}
.nav-indicator.ready { opacity: 1; }
.nav-link {
  position: relative;
  z-index: 1;
  padding: 12px 20px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--ink-dim);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease-out);
  border-radius: 999px;
}
.nav-link:hover {
  color: var(--y);
  transform: translateY(-1px);
}
.nav-link.active { color: var(--y); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--y);
  color: var(--y);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 600;
  border-radius: 999px;
  transition: all 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}
.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--y);
  transform: translateX(-101%);
  transition: transform 0.4s var(--ease-out);
  z-index: -1;
}
.nav-cta:hover::before { transform: translateX(0); }
.nav-cta:hover {
  color: #fff;
  box-shadow: 0 8px 24px var(--y-glow);
  transform: translateY(-2px);
}
.nav-cta svg { transition: transform 0.3s var(--ease-out); }
.nav-cta:hover svg { transform: translateX(3px); }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--y);
  transition: transform 0.3s var(--ease);
}
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  /* nav becomes a bottom tab bar on mobile — see .mobile-tabbar below */
  .nav-links { display: none; }
  .nav-burger { display: none; }
  .nav-cta {
    margin-left: auto;
    padding: 10px 16px;
    font-size: 11px;
  }
}

/* bottom tab bar, mobile only */
.mobile-tabbar { display: none; }
@media (max-width: 900px) {
  .mobile-tabbar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(8, 8, 8, 0.96);
    border-top: 1px solid var(--line-2);
    padding: 8px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    /* bottoms line up, so every label sits on the same baseline even though
       the cart orb sticks up above the bar */
    align-items: flex-end;
    justify-content: space-between;
  }
  .tab-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 44px;
    min-height: 48px;
    /* tighter than before: the bar carries five items now, and 44px
       min-width still holds the tap target */
    padding: 4px 6px;
    color: var(--ink-mute);
    transition: color 0.2s var(--ease);
  }
  .tab-link svg { width: 20px; height: 20px; }
  .tab-link span {
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .tab-link.active { color: var(--y); }

  /* ---- raised cart, centre of the bar (phone only) ----
     The orb is pulled up out of the bar with a negative margin so it reads as
     the one primary action down there. The bar has no overflow clipping, so
     it simply paints above it. */
  .tab-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    flex: none;
    color: var(--ink-mute);
    background: none;
  }
  .tab-cart-orb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    border-radius: 999px;
    background: var(--y);
    color: #fff;
    /* dark ring cuts the orb out of the bar instead of floating on top of it */
    border: 3px solid #080808;
    box-shadow: 0 6px 20px rgba(193, 53, 132, 0.3);
    transition: transform 0.2s var(--ease-out);
  }
  .tab-cart:active .tab-cart-orb { transform: scale(0.9); }
  /* Same lopsided glyph as the top-bar cart: the basket sits at x 7-20 while
     the handle stroke trails back to x 4, so box-centring reads as pushed
     right. Nudged back, scaled for the larger 23px icon. */
  .tab-cart-orb svg {
    width: 23px;
    height: 23px;
    transform: translate3d(-1.8px, 0, 0);
  }

  .tab-cart-label {
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .tab-cart.has-items .tab-cart-label { color: var(--y); }

  /* dark badge: the orb is already gold, so a gold badge would vanish */
  .tab-cart-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #0a0a0a;
    color: var(--y);
    border: 2px solid var(--y);
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }
  .tab-cart-badge[hidden] { display: none; }

  .tab-cart.bump .tab-cart-orb { animation: cartBump 0.45s var(--ease-out); }

  /* (the top-bar pill is hidden further down, after its base rule) */

  body { padding-bottom: 64px; }
}
.hero {
  position: relative;
  min-height: 100vh;              /* fallback */
  min-height: 100svh;             /* iOS/Android — excludes dynamic URL bar */
  padding: calc(var(--nav-h) + 40px) var(--pad) 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  text-align: center;
}

.hero-glow {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 1100px;
  height: 620px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse,
    rgba(193, 53, 132, 0.11) 0%,
    rgba(193, 53, 132, 0.05) 30%,
    rgba(193, 53, 132, 0.02) 50%,
    transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

.hero-content {
  max-width: 900px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--line-2);
  background: rgba(15, 15, 15, 0.6);
  backdrop-filter: blur(8px);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink-dim);
  margin-bottom: 32px;
  border-radius: 999px;
  animation: fadeUp 0.7s var(--ease-out) 0.3s both;
}

.pulse-dot {
  position: relative;
  width: 8px;
  height: 8px;
  background: var(--y);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--y);
  animation: pulseBlink 1.6s ease-in-out infinite;
}
.pulse-dot::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--y);
  animation: pulseRing 1.6s ease-out infinite;
  opacity: 0;
}
@keyframes pulseBlink {
  0%, 100% { opacity: 1;    transform: scale(1); }
  45%      { opacity: 0.15; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1); }
}
@keyframes pulseRing {
  0%   { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ─── hero stock counter (left side) ─── */
.hero-stock {
  position: absolute;
  left: calc(var(--pad) + 40px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 0.9s both;
}
.hero-stock-num-wrap {
  display: flex;
  align-items: baseline;
  gap: 2px;
  overflow: hidden;
}
.hero-stock-num {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 46px;
  color: var(--y);
  line-height: 1;
}
/* blinking cursor while typing */
.hero-stock-num.typing {
  border-right: 2.5px solid var(--y);
  animation: stockCaret 0.65s step-end infinite;
}
@keyframes stockCaret {
  from, to { border-color: transparent; }
  50% { border-color: var(--y); }
}
.hero-stock-plus {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 32px;
  color: var(--y);
  opacity: 0;
  line-height: 1;
  transition: opacity 0.3s ease;
}
.hero-stock-plus.show { opacity: 0.6; }
.hero-stock-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.8px;
  color: var(--ink-mute);
  text-align: center;
  line-height: 1.5;
}
.hero-stock-label em {
  font-style: normal;
  color: var(--y);
}
@media (max-width: 1100px) {
  .hero-stock {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    flex-direction: row;
    gap: 12px;
    margin-bottom: 16px;
  }
  .hero-stock-num { font-size: 30px; }
  .hero-stock-plus { font-size: 22px; }
  .hero-stock-label { font-size: 9px; text-align: left; }
}
@media (max-width: 700px) {
  /* stack hero vertically so stock counter can sit below content */
  .hero { flex-direction: column; }
  .hero-stock {
    position: relative;
    left: auto; top: auto; transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    order: 10;
  }
  .hero-stock-num { font-size: 22px; }
  .hero-stock-plus { font-size: 16px; }
  .hero-stock-label { font-size: 8px; letter-spacing: 2px; text-align: left; }
  .hero-stock-label br { display: none; }
}

.hero-title {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: clamp(46px, 7vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  animation: fadeUp 0.8s var(--ease-out) 0.45s both;
}
.hero-title .accent {
  color: var(--y);
  position: relative;
  /* Instagram gradient with a bright highlight that shimmers across */
  background:
    linear-gradient(100deg,
      #833AB4 0%,
      #C13584 30%,
      #F0C0D8 46%,
      #ffffff 50%,
      #F0C0D8 54%,
      #E1306C 70%,
      #833AB4 100%
    );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: instaShine 5.5s ease-in-out infinite;
}
@keyframes instaShine {
  0%   { background-position: 200% 0; }
  60%  { background-position: -80% 0; }
  100% { background-position: -80% 0; }
}
/* Instagram icon before "Instagram" — same line as text */
.hero-discord {
  display: inline-block;
  width: 0.52em;
  height: 0.52em;
  vertical-align: baseline;
  transform: translateY(-0.08em);
  margin-right: 0.1em;
  color: var(--y);
  fill: var(--y);
  filter: drop-shadow(0 0 10px rgba(193, 53, 132, 0.35));
}
@media (min-width: 701px) { .hero-title { white-space: nowrap; } }

.hero-sub {
  max-width: 520px;
  margin: 0 auto 16px;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.6;
  color: var(--ink-dim);
  font-weight: 400;
  animation: fadeUp 0.8s var(--ease-out) 0.6s both;
}

.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--ink-dim);
  animation: fadeUp 0.8s var(--ease-out) 0.75s both;
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-trust .dot {
  width: 5px;
  height: 5px;
  background: var(--y);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--y);
  display: inline-block;
}

.hero-tagline {
  display: inline-block;
  margin: -6px auto 16px;
  font-family: var(--f-mono);
  font-size: clamp(11px, 1.15vw, 13px);
  letter-spacing: 1.5px;
  color: var(--ink-mute);
  text-transform: uppercase;
  padding: 8px 18px;
  border: 1px dashed rgba(193, 53, 132, 0.25);
  border-radius: 999px;
  background: rgba(193, 53, 132, 0.04);
  animation: fadeUp 0.8s var(--ease-out) 0.82s both;
}
.hero-tagline .tg-accent {
  color: var(--y);
  font-weight: 700;
  text-shadow: 0 0 10px var(--y-glow);
}

/* "How it works" swap explainer in hero */
.how-swap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 16px 24px;
  background: rgba(193, 53, 132, 0.04);
  border: 1px solid rgba(193, 53, 132, 0.2);
  border-radius: var(--radius);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  animation: fadeUp 0.8s var(--ease-out) 0.88s both;
}
.how-swap-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(193, 53, 132, 0.12);
  border: 1px solid rgba(193, 53, 132, 0.35);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--y);
}
.how-swap-badge svg { color: var(--y); }
.how-swap-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
  text-align: center;
}
.how-swap-text strong { color: var(--y); }
.how-swap-video {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease-out), background 0.25s var(--ease);
}
.how-swap-video:hover {
  border-color: var(--y);
  background: rgba(193, 53, 132, 0.06);
  transform: translateY(-2px);
}
.how-swap-play {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #E1306C, #833AB4);
  color: #fff;
  box-shadow: 0 4px 16px rgba(193, 53, 132, 0.3);
}
.how-swap-video-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.how-swap-video-text strong {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ink);
}
.how-swap-video-text em {
  font-style: normal;
  font-size: 11px;
  color: var(--ink-mute);
}
.how-swap-arrow {
  margin-left: auto;
  color: var(--ink-mute);
  transition: transform 0.25s var(--ease-out), color 0.25s var(--ease);
}
.how-swap-video:hover .how-swap-arrow {
  transform: translateX(3px);
  color: var(--y);
}

/* red "price includes swap" notices — 3 placements */
.swap-price-notice {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ff4d4d;
  text-align: center;
  animation: swapNoticeGlow 2s ease-in-out infinite;
}
@keyframes swapNoticeGlow {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
.swap-price-notice-sm {
  font-size: 9px;
  letter-spacing: 0.6px;
  text-align: left;
  margin-bottom: 6px;
}
.swap-price-notice-form {
  margin: 6px 24px 0;
  padding: 8px 14px;
  background: rgba(255, 77, 77, 0.06);
  border: 1px solid rgba(255, 77, 77, 0.25);
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  text-align: center;
}

@media (max-width: 700px) {
  .how-swap { padding: 18px 20px; gap: 12px; }
  .how-swap-text { font-size: 12px; }
  .swap-price-notice-form { margin: 4px 16px 0; padding: 6px 12px; }
}

.hero-actions {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
  animation: fadeUp 0.8s var(--ease-out) 0.95s both;
}

@keyframes fadeUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* primary cta, chamfered corners instead of a plain pill */
.btn-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 17px 28px 17px 26px;
  background: linear-gradient(135deg, #E1306C 0%, #833AB4 100%);
  color: #fff;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  box-shadow: 0 10px 26px rgba(131, 58, 180, 0.18);
  transition: transform 0.25s var(--ease-out), box-shadow 0.3s var(--ease);
}
.btn-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(131, 58, 180, 0.3);
}
.btn-cta-arrow {
  display: inline-flex;
  transition: transform 0.3s var(--ease-out);
}
.btn-cta:hover .btn-cta-arrow { transform: translateX(4px); }

/* secondary cta, icon + label chip */
.btn-dock {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 22px 7px 7px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(18, 18, 18, 0.6);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease-out), background 0.25s var(--ease);
}
.btn-dock-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1a1a1a;
  color: var(--y);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn-dock-label {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: var(--ink-dim);
  transition: color 0.25s var(--ease);
}
.btn-dock:hover {
  border-color: var(--y);
  transform: translateY(-3px);
  background: rgba(193, 53, 132, 0.05);
}
.btn-dock:hover .btn-dock-circle { background: var(--y); color: #fff; }
.btn-dock:hover .btn-dock-label { color: var(--y); }

.btn-dock-circle-img { padding: 7px; }
.btn-dock-circle-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.btn-dock-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.btn-dock-note {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--ink-mute);
  text-align: center;
  max-width: 170px;
  line-height: 1.4;
}
.btn-dock-note em {
  color: var(--y);
  font-style: normal;
  font-weight: 700;
}

/* stat bar with a thin light sweeping the top edge */
.stat-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 820px;
  margin: 0 auto;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.7) 0%, rgba(10, 10, 10, 0.7) 100%);
  animation: fadeUp 0.8s var(--ease-out) 1.05s both;
}
.stat-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: -25%;
  width: 25%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--y), transparent);
  animation: statScan 5.5s linear infinite;
}
@keyframes statScan {
  to { left: 125%; }
}

.stat-cell {
  position: relative;
  padding: 22px 24px;
  text-align: left;
  transition: background 0.3s var(--ease);
}
.stat-cell:hover { background: rgba(193, 53, 132, 0.03); }
.stat-cell + .stat-cell {
  border-left: 1px solid var(--line-2);
}

.stat-cell-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 2.2px;
  color: var(--ink-mute);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.stat-cell-num {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 38px);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}

@media (max-width: 700px) {
  .stat-strip { grid-template-columns: 1fr; }
  .stat-cell + .stat-cell {
    border-left: 0;
    border-top: 1px solid var(--line-2);
  }
  .hero-trust { gap: 14px; font-size: 10px; }
}

/* scope-ring logo badge, transform/opacity only */
.hero-orbit {
  position: absolute;
  top: 50%;
  right: 6vw;
  transform: translateY(-50%);
  width: 250px;
  height: 250px;
  z-index: 1;
  pointer-events: none;
  animation: orbitIntro 1.1s var(--ease-out) 1.1s both;
}
@keyframes orbitIntro {
  from { opacity: 0; transform: translateY(-50%) scale(0.8) rotate(-15deg); }
  to   { opacity: 1; transform: translateY(-50%) scale(1) rotate(0deg); }
}

.orbit-glow {
  position: absolute;
  inset: -110px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(193, 53, 132, 0.09) 0%,
    rgba(193, 53, 132, 0.05) 25%,
    rgba(193, 53, 132, 0.02) 45%,
    transparent 65%);
  filter: blur(34px);
}

.orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.orbit-ring-out {
  border: 1px dashed rgba(193, 53, 132, 0.4);
  animation: orbitSpin 26s linear infinite;
}
.orbit-ring-in {
  inset: 26px;
  border: 1px solid rgba(193, 53, 132, 0.18);
  animation: orbitSpin 19s linear infinite reverse;
}
.orbit-ring-in::before,
.orbit-ring-in::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--y);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--y-glow);
  top: 50%; left: -3px;
  transform: translateY(-50%);
}
.orbit-ring-in::after { left: auto; right: -3px; }

@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

/* Scope-style crosshair ticks (static — sells the "reticle" look) */
.orbit-tick {
  position: absolute;
  background: rgba(193, 53, 132, 0.35);
}
.t-top,    .t-bottom { width: 1px; height: 16px; left: 50%; margin-left: -0.5px; }
.t-left,   .t-right  { height: 1px; width: 16px; top: 50%; margin-top: -0.5px; }
.t-top    { top: -8px; }
.t-bottom { bottom: -8px; }
.t-left   { left: -8px; }
.t-right  { right: -8px; }

.orbit-logo {
  position: absolute;
  top: 50%; left: 50%;
  width: 62%;
  transform: translate(-50%, -50%) rotate(-8deg);
  filter: drop-shadow(0 0 20px rgba(193, 53, 132, 0.45));
  animation: orbitFloat 4.5s ease-in-out infinite;
}
.orbit-logo img {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes orbitFloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  50%      { transform: translate(-50%, -53%) rotate(-4deg) scale(1.05); }
}

/* Hide on tablets/mobile — no room next to centered hero content */
@media (max-width: 1180px) {
  .hero-orbit { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orbit { animation: none; opacity: 1; }
  .orbit-ring-out, .orbit-ring-in, .orbit-logo { animation: none; }
}

.scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--ink-mute);
  animation: fadeUp 1s var(--ease-out) 1.4s both;
}
.scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, var(--y), transparent);
  animation: scrollDown 2.2s ease-in-out infinite;
}
@keyframes scrollDown {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* marquee ticker */
.marquee {
  position: relative;
  background: linear-gradient(90deg, #833AB4, #C13584, #E1306C, #F77737);
  color: #fff;
  padding: 14px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  z-index: 2;
  margin: 0;
}
.marquee-track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: marqueeScroll 22s linear infinite;
  font-family: var(--f-display);
  font-size: 18px;
  letter-spacing: 3px;
  will-change: transform;
}
.marquee-track span { flex-shrink: 0; }
@keyframes marqueeScroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
/* Pause on hover for readability */
.marquee:hover .marquee-track { animation-play-state: paused; }

.section {
  position: relative;
  padding: 100px var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
  z-index: 2;
}

.section-head {
  margin-bottom: 50px;
  position: relative;
}
.section-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--y);
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-num::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--y);
  display: inline-block;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out) 0.15s;
}
.section-head.in .section-num::before { transform: scaleX(1); }

.section-title {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  color: var(--ink);
  display: inline-block;
  position: relative;
  padding-right: 22px;
}
.section-title span {
  position: relative;
  display: inline-block;
  transform: translate3d(0, 40px, 0);
  opacity: 0;
  transition: transform 0.9s var(--ease-out) 0.1s, opacity 0.9s var(--ease-out) 0.1s;
}
.section-head.in .section-title span {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.section-title span::after {
  content: '';
  position: absolute;
  bottom: 8px;
  right: -14px;
  width: 8px;
  height: 8px;
  background: var(--y);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s var(--ease-out) 0.9s, transform 0.5s var(--ease-out) 0.9s;
  box-shadow: 0 0 14px var(--y-glow);
}
.section-head.in .section-title span::after {
  opacity: 1;
  transform: scale(1);
  animation: sectionPing 2.4s ease-out 1.6s infinite;
}
/* box-shadow ripple instead of a scaled bordered ring — a scaled
   border can render slightly uneven at fractional pixel widths,
   a box-shadow spread is always a perfectly uniform circle */
@keyframes sectionPing {
  0%   { box-shadow: 0 0 14px var(--y-glow), 0 0 0 0 rgba(193, 53, 132, 0.55); }
  70%  { box-shadow: 0 0 14px var(--y-glow), 0 0 0 9px rgba(193, 53, 132, 0); }
  100% { box-shadow: 0 0 14px var(--y-glow), 0 0 0 9px rgba(193, 53, 132, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .section-head.in .section-title span::after { animation: none; }
}
.section-sub {
  max-width: 520px;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.6;
}
.section-sub em {
  color: var(--y);
  font-style: normal;
  font-weight: 600;
}

/* hot / featured grid */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.feature-card { grid-column: span 2; }
.feature-card-lg { grid-column: span 3; }

@media (max-width: 900px) {
  .featured-grid { grid-template-columns: 1fr 1fr; }
  .feature-card, .feature-card-lg { grid-column: span 1; }
}
@media (max-width: 600px) {
  .featured-grid { grid-template-columns: 1fr; }
}

.feature-card {
  position: relative;
  aspect-ratio: 1 / 1;
  transition: transform 0.3s var(--ease-out);
}
.feature-card-lg { aspect-ratio: 1.5 / 1; }
.feature-card:hover { transform: translateY(-6px); }

.fc-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.7), rgba(10, 10, 10, 0.7));
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.fc-inner::before {
  content: '';
  position: absolute;
  top: -40%; right: -40%;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(193, 53, 132, 0.15), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.feature-card:hover .fc-inner {
  border-color: rgba(193, 53, 132, 0.6);
  box-shadow: 0 0 30px rgba(193, 53, 132, 0.08);
}
.feature-card:hover .fc-inner::before { opacity: 1; }

.fc-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 4px 10px;
  background: var(--y);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  z-index: 2;
  border-radius: 999px;
}


.fc-handle {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1;
  margin: auto 0 8px;
  color: var(--ink);
  letter-spacing: -0.02em;
  transition: color 0.3s var(--ease);
}
.feature-card:hover .fc-handle { color: var(--y); }

.fc-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--ink-mute);
  margin-bottom: 12px;
}

.fc-price {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 22px;
  color: var(--y);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.fc-btn {
  align-self: flex-start;
  padding: 8px 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--y);
  border: 1px solid var(--y);
  border-radius: 999px;
  transition: all 0.25s var(--ease);
}
.feature-card:hover .fc-btn {
  background: var(--y);
  color: #fff;
}

/* shop filters + grid */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.chip {
  padding: 9px 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--ink-dim);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  transition: all 0.2s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip-ico {
  display: inline-flex;
  flex-shrink: 0;
}
.chip-ico svg {
  width: 13px;
  height: 13px;
  display: block;
}
@media (hover: hover) {
  .chip:hover {
    color: var(--y);
    border-color: var(--y);
  }
}
.chip-active {
  background: var(--y);
  color: #fff;
  border-color: var(--y);
}
.chip-active:hover {
  color: #fff;
  border-color: var(--y);
}
.filter-spacer { flex: 1; }

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-mute);
  min-width: 240px;
  border-radius: 999px;
  transition: border-color 0.25s var(--ease);
}
.search-box:focus-within {
  border-color: var(--y);
  color: var(--y);
}
.search-box input {
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
}
.search-box input::placeholder { color: var(--ink-mute); }

.armory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  /* start, not stretch — expanding one card's details shouldn't stretch
     every other card in the same row */
  align-items: start;
}

/* ─── sticky "SCROLL FOR MORE" bar ─── */
.scroll-more-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 20px 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 50%);
  color: var(--y);
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 4px;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.scroll-more-bar.visible {
  opacity: 1;
  transform: translateY(0);
}
.scroll-more-bar svg { animation: scrollArrowBounce 1.2s ease-in-out infinite; }
.scroll-more-bar span { animation: scrollTextPulse 2s ease-in-out infinite; }
@keyframes scrollArrowBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(5px); opacity: 1; }
}
@keyframes scrollTextPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@media (max-width: 900px) {
  .scroll-more-bar {
    bottom: 62px;
    font-size: 11px;
    letter-spacing: 2.2px;
    gap: 8px;
    padding: 10px 120px 12px 16px;
  }
  .scroll-more-bar svg { width: 13px; height: 13px; }
}

/* ─── shop inventory banner ─── */
.shop-inventory-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(131,58,180,0.08), rgba(193,53,132,0.1));
  border: 1px solid rgba(193,53,132,0.2);
  border-radius: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.6);
  flex-wrap: wrap;
  justify-content: center;
}
.sib-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: sibPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes sibPulse {
  0%, 100% { opacity: 0.5; box-shadow: 0 0 0 0 rgba(74,222,128,0.3); }
  50% { opacity: 1; box-shadow: 0 0 6px 2px rgba(74,222,128,0.2); }
}
.sib-count {
  color: var(--y);
  font-weight: 800;
  font-size: 14px;
}
.sib-label { color: rgba(255,255,255,0.7); }
.sib-sep { color: rgba(255,255,255,0.2); }
.sib-hint { color: rgba(255,255,255,0.4); font-size: 10px; }
.smb-count {
  background: linear-gradient(135deg, #833AB4, #C13584);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 1px;
}
@media (max-width: 500px) {
  .sib-sep, .sib-hint { display: none; }
}

/* ─── load-more / show-all controls ─── */
.load-more-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding-top: 28px;
}

/* teaser banner — big eye-catching prompt */
.more-teaser {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  background: linear-gradient(135deg, rgba(131,58,180,0.12), rgba(193,53,132,0.12), rgba(225,48,108,0.08));
  border: 1px solid rgba(193,53,132,0.25);
  border-radius: 10px;
  max-width: 460px;
}
.more-teaser-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 36px;
  padding: 0 10px;
  background: linear-gradient(135deg, #833AB4, #C13584, #E1306C);
  border-radius: 8px;
  color: #fff;
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
}
.more-teaser-text {
  color: rgba(255,255,255,0.7);
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

/* hint text — draws attention that more handles exist */
.more-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--y);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  animation: hintPulse 2s ease-in-out infinite;
}
.more-hint svg { opacity: 0.5; }
@keyframes hintPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* primary action — chamfered, outlined, two-line layout */
.load-more {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 44px;
  min-width: 270px;
  background: transparent;
  border: 1.5px solid rgba(193, 53, 132, 0.5);
  color: var(--y);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2.4px;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease-out);
}
.load-more-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (hover: hover) {
  .load-more:hover {
    background: rgba(193, 53, 132, 0.12);
    border-color: var(--y);
  }
}
.load-more:active { transform: scale(0.97); }
.load-more-count {
  color: rgba(193, 53, 132, 0.5);
  font-weight: 600;
  font-size: 12px;
}
.load-more-sub {
  font-size: 9px;
  letter-spacing: 3.5px;
  color: var(--ink-mute);
  font-weight: 600;
}

/* secondary — show all, outlined pill with icon + subtle border animation */
.show-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 32px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--ink-mute);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-top: 4px;
  animation: showAllGlow 3s ease-in-out infinite;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.show-all svg { opacity: 0.5; }
@keyframes showAllGlow {
  0%, 100% { border-color: rgba(255, 255, 255, 0.1); }
  50% { border-color: rgba(193, 53, 132, 0.25); }
}
.show-all-count {
  color: rgba(193, 53, 132, 0.5);
  font-weight: 600;
}
@media (hover: hover) {
  .show-all:hover {
    color: var(--y);
    border-color: rgba(193, 53, 132, 0.4);
    background: rgba(193, 53, 132, 0.06);
    animation: none;
  }
  .show-all:hover svg { opacity: 1; }
  .show-all:hover .show-all-count { color: var(--y); }
}

@media (max-width: 700px) {
  .load-more {
    min-width: 200px;
    padding: 14px 28px;
    font-size: 13px;
  }
  .show-all {
    font-size: 11px;
    padding: 10px 24px;
  }
}

.item {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.6), rgba(10, 10, 10, 0.6));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  /* min-height instead of a locked square so the details dropdown can
     expand without being clipped */
  min-height: 260px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease-out), background 0.25s var(--ease);
}
.item:hover {
  border-color: rgba(193, 53, 132, 0.5);
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(25, 25, 25, 0.8), rgba(15, 15, 15, 0.8));
}

.item-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--y);
  margin-bottom: 14px;
  padding: 6px 13px;
  border: 1px solid rgba(193, 53, 132, 0.35);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: var(--y-soft);
}
.item-tag-ico {
  display: inline-flex;
  flex-shrink: 0;
}
.item-tag-ico svg {
  width: 13px;
  height: 13px;
  display: block;
}

.item-handle {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  transition: color 0.3s var(--ease);
}
.item:hover .item-handle { color: var(--y); }

.item-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 1.2px;
  margin-top: auto;
  margin-bottom: 20px;
}

/* collapsible per-product spec sheet */
.item-spec {
  margin-bottom: 12px;
}
.item-spec summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--y);
  padding: 7px 13px;
  border: 1px solid rgba(193, 53, 132, 0.35);
  background: var(--y-soft);
  border-radius: 999px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.item-spec summary::-webkit-details-marker { display: none; }
.item-spec summary:hover {
  background: rgba(193, 53, 132, 0.13);
  border-color: var(--y);
}
.item-spec summary svg {
  transition: transform 0.25s var(--ease-out);
}
.item-spec[open] summary svg { transform: rotate(180deg); }

/* pulsing gold dot — draws the eye to the toggle so it reads as clickable.
   Off by default: "Show all" can put hundreds of cards in the DOM, and an
   infinite animation on every one of them is the exact "many elements
   animating forever" pattern that caused real lag elsewhere on this site
   (see CLAUDE.md). script.js toggles `.in-view` via IntersectionObserver,
   so only cards actually on screen (~10-15 at once, regardless of catalogue
   size) ever animate. */
.spec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--y);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(193, 53, 132, 0.6);
}
.item.in-view .spec-dot {
  animation: specDot 2s ease-out infinite;
}
@keyframes specDot {
  0%   { box-shadow: 0 0 0 0 rgba(193, 53, 132, 0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(193, 53, 132, 0); }
  100% { box-shadow: 0 0 0 7px rgba(193, 53, 132, 0); }
}
/* once opened it's served its purpose — stop pulsing */
.item-spec[open] .spec-dot { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .spec-dot, .item.in-view .spec-dot { animation: none; }
}

.item-spec ul {
  list-style: none;
  margin-top: 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: specOpen 0.25s var(--ease-out);
}
.item-spec li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: #cdcdcd;
}
.item-spec li b {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--y);
  border: 1px solid rgba(193, 53, 132, 0.3);
  background: var(--y-soft);
  border-radius: 4px;
  padding: 3px 6px;
  flex-shrink: 0;
  /* keep the labels a consistent width so the descriptions line up —
     sized off the longest one (INSTANT), or it alone would sit out of line */
  min-width: 62px;
  text-align: center;
}
@keyframes specOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* price stacked above a full-width buy button — the layout that was
   previously mobile-only, now used at every width */
.item-bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.item-price {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 20px;
  color: var(--y);
  letter-spacing: -0.01em;
  min-width: 0;
}

.item-buy {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 13px 16px;
  border-radius: 999px;
  border: 1px solid var(--y);
  color: var(--y);
  background: transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease-out);
  white-space: nowrap;
  width: 100%;
}
/* Fills only when the pointer is on the button itself. Hovering anywhere on
   the card used to light it up, which made an already-added handle look like
   it was reacting to nothing. Gated on (hover: hover) so touch devices don't
   get a stuck state after a tap. */
@media (hover: hover) {
  .item-buy:hover:not(:disabled) {
    background: var(--y);
    color: #fff;
  }
}
.item-buy:active { transform: scale(0.96); }
.item-buy:disabled {
  border-color: var(--line-2);
  color: var(--ink-mute);
  cursor: not-allowed;
}

.armory-note {
  margin-top: 32px;
}
.an-inner {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  border: 1px dashed rgba(193, 53, 132, 0.4);
  background: var(--y-soft);
  color: var(--y);
  border-radius: var(--radius);
}
.an-icon { flex-shrink: 0; width: 28px; height: 28px; color: var(--y); }
.an-icon svg { width: 100%; height: 100%; }
.an-inner strong {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.an-inner p {
  color: var(--ink-dim);
  font-size: 13px;
  margin: 0;
}

/* faq */
.faq-list {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  overflow: hidden;
}
.faq-item:hover { border-color: rgba(193, 53, 132, 0.3); }
.faq-item[open] {
  border-color: rgba(193, 53, 132, 0.5);
  background: linear-gradient(180deg, rgba(193, 53, 132, 0.04), transparent);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  list-style: none;
  transition: color 0.2s var(--ease);
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--y); }

.faq-q {
  font-family: var(--f-body);
  font-size: 16px;
  letter-spacing: -0.01em;
}
.faq-toggle {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transition: all 0.3s var(--ease);
}
.faq-item[open] .faq-toggle {
  background: var(--y);
  border-color: var(--y);
}
.faq-toggle::before,
.faq-toggle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--y);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.faq-toggle::before { width: 10px; height: 1.5px; }
.faq-toggle::after  { width: 1.5px; height: 10px; }
.faq-item[open] .faq-toggle::before,
.faq-item[open] .faq-toggle::after { background: #fff; }
.faq-item[open] .faq-toggle::after { transform: translate(-50%, -50%) scaleY(0); }

.faq-a {
  padding: 0 24px 22px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.7;
  animation: faqOpen 0.35s var(--ease-out);
}
.faq-a a {
  color: var(--y);
  font-weight: 600;
  border-bottom: 1px solid rgba(193, 53, 132, 0.35);
  transition: border-color 0.2s var(--ease);
}
.faq-a a:hover {
  border-bottom-color: var(--y);
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* contact cards */
.comms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 800px) {
  .comms-grid { grid-template-columns: 1fr; }
}

.comms-card {
  position: relative;
  display: block;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out);
  border-radius: var(--radius-lg);
}
.cc-inner {
  position: relative;
  padding: 36px;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.8), rgba(10, 10, 10, 0.8));
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  transition: all 0.35s var(--ease);
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}
.cc-inner::before {
  content: '';
  position: absolute;
  top: -40%; right: -40%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(193, 53, 132, 0.18), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.comms-card:hover .cc-inner {
  border-color: rgba(193, 53, 132, 0.5);
}
.comms-card:hover .cc-inner::before { opacity: 1; }


.cc-icon {
  width: 44px;
  height: 44px;
  color: var(--y);
  margin-bottom: 22px;
  transition: transform 0.35s var(--ease-out);
}
.cc-icon svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 8px var(--y-glow));
}
.comms-card:hover .cc-icon {
  transform: scale(1.1) rotate(-4deg);
}

.cc-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--ink-mute);
  margin-bottom: 6px;
}

.cc-handle {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 30px;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  transition: color 0.3s var(--ease);
  word-break: break-all;
}
.comms-card:hover .cc-handle { color: var(--y); }

.cc-desc {
  color: var(--ink-dim);
  font-size: 14px;
  margin-bottom: auto;
  padding-bottom: 20px;
  line-height: 1.5;
}

.cc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--y);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  transition: transform 0.3s var(--ease-out);
}
.comms-card:hover .cc-cta { transform: translateX(6px); }

.comms-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: 1px solid rgba(193, 53, 132, 0.4);
  background: var(--y-soft);
  color: var(--y);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 1px;
  border-radius: var(--radius);
}
.comms-warning svg { flex-shrink: 0; }

/* terms & privacy modal */
.policy-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.policy-modal.open { display: flex; }
.policy-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}
.policy-panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.98), rgba(10, 10, 10, 0.98));
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.policy-modal.open .policy-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.policy-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.policy-head h3 {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 4px;
}
.policy-updated {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-mute);
}
.policy-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--ink-dim);
  flex-shrink: 0;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.policy-close:hover { border-color: var(--y); color: var(--y); }

.policy-body {
  padding: 18px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(193, 53, 132, 0.4) transparent;
}
.policy-body::-webkit-scrollbar { width: 6px; }
.policy-body::-webkit-scrollbar-track { background: transparent; }
.policy-body::-webkit-scrollbar-thumb {
  background: rgba(193, 53, 132, 0.4);
  border-radius: 999px;
}
.policy-body::-webkit-scrollbar-thumb:hover { background: rgba(193, 53, 132, 0.65); }

/* sticky fade at the bottom of the scroll area — a visual cue that
   there's more to scroll, settles naturally once you hit the end */
.policy-scroll-fade {
  position: sticky;
  bottom: -1px;
  height: 30px;
  margin-top: -30px;
  background: linear-gradient(to bottom, transparent, rgba(9, 9, 9, 0.96));
  pointer-events: none;
}
.policy-item {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.policy-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--y-soft);
  color: var(--y);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.policy-icon svg { width: 18px; height: 18px; }
.policy-item h4 {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
}
.policy-item p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-dim);
}
.policy-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-mute);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .policy-modal { padding: 0; align-items: flex-end; }
  .policy-panel {
    max-height: 88vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

.footer {
  position: relative;
  border-top: 1px solid var(--line);
  padding: 56px var(--pad) 26px;
  margin-top: 80px;
  z-index: 2;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 60px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 800px) {
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
}

.footer-brand p {
  color: var(--ink-dim);
  max-width: 380px;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 600px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
.footer-col h4 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--y);
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  color: var(--ink-dim);
  font-size: 13px;
  padding: 5px 0;
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.footer-col a:hover {
  color: var(--y);
  transform: translateX(3px);
}

.footer-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-dim);
  font-size: 13px;
}

.footer-bottom {
  max-width: var(--maxw);
  margin: 26px auto 0;
  color: var(--ink-mute);
  font-size: 12px;
}
@media (max-width: 600px) {
  .footer-bottom { text-align: center; }
}

/* scroll reveal variants, transform/opacity only */
.reveal {
  opacity: 0;
  transform: translate3d(0, 90px, 0);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-scale {
  opacity: 0;
  transform: translate3d(0, 60px, 0) scale(0.85);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal-scale.in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.reveal-left {
  opacity: 0;
  transform: translate3d(-90px, 0, 0);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.reveal-left.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-right {
  opacity: 0;
  transform: translate3d(90px, 0, 0);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.reveal-right.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* On mobile, cut horizontal reveals in half (avoid overflow) and shorten durations slightly */
@media (max-width: 700px) {
  .reveal            { transform: translate3d(0, 50px, 0); transition-duration: 0.85s; }
  .reveal-scale      { transform: translate3d(0, 40px, 0) scale(0.9); transition-duration: 0.8s; }
  .reveal-left       { transform: translate3d(-40px, 0, 0); transition-duration: 0.85s; }
  .reveal-right      { transform: translate3d( 40px, 0, 0); transition-duration: 0.85s; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale, .reveal-left, .reveal-right {
    transition-duration: 0.01ms !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* mobile */
@media (max-width: 700px) {
  :root {
    --pad: 18px;
    --nav-h: 68px;
  }

  /* Backdrop-blur is expensive on mid-range Android; use solid bg instead */
  .nav.scrolled,
  .nav-links,
  .hero-tag,
  .btn-dock {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .nav.scrolled { background: rgba(6, 6, 6, 0.95); }
  .nav-links    { background: rgba(15, 15, 15, 0.9); }
  .hero-tag     { background: rgba(15, 15, 15, 0.9); }
  .btn-dock     { background: rgba(20, 20, 20, 0.9); }
  .brand-mark img { width: 58px; }
  .brand-text { font-size: 24px; }

  .hero { padding: calc(var(--nav-h) + 40px) var(--pad) 60px; }
  .hero-title { font-size: clamp(38px, 10vw, 60px); }
  .hero-sub br { display: none; }
  .hero-tag { font-size: 10px; padding: 7px 14px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn-cta { justify-content: center; width: 100%; }
  .btn-dock { justify-content: center; width: 100%; padding: 7px; }
  .hero-trust { gap: 10px 14px; font-size: 10px; }
  .hero-tagline {
    font-size: 10px;
    padding: 7px 14px;
    letter-spacing: 1.2px;
    margin: -8px 12px 28px;
    max-width: calc(100% - 24px);
    line-height: 1.5;
  }

  .stat-cell { padding: 18px 20px; }
  .stat-cell-num { font-size: 30px; }

  .marquee { padding: 12px 0; }
  .marquee-track { font-size: 14px; gap: 28px; letter-spacing: 2px; }

  .section { padding: 70px var(--pad); }
  .section-title { font-size: clamp(32px, 8vw, 44px); }
  .section-head { margin-bottom: 36px; }

  .filters {
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
  .filters::-webkit-scrollbar { display: none; }
  .chip { padding: 7px 11px; font-size: 9px; letter-spacing: 1.2px; flex-shrink: 0; }
  .filter-spacer { display: none; }
  .search-box { min-width: 0; width: 100%; flex-shrink: 0; order: 99; }
  .section-head { margin-bottom: 20px; }

  .armory-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .item { padding: 18px; min-height: 215px; }
  .item-handle { font-size: 20px; word-break: break-word; }
  .item-tag { margin-bottom: 10px; font-size: 9px; padding: 5px 10px; white-space: nowrap; }
  .item-spec { margin-bottom: 10px; }
  .item-spec li { font-size: 12px; }
  .item-spec summary { font-size: 10px; padding: 6px 11px; letter-spacing: 1.3px; }

  .item-price { font-size: 18px; }
  .item-buy { padding: 12px 14px; font-size: 11.5px; }

  /* The hero grows well past one screen once everything stacks, so a
     "scroll" cue pinned to its bottom edge just lands on top of the stat
     cards. It's redundant at this width anyway. */
  .scroll-hint { display: none; }

  .fc-inner { padding: 20px; }
  .fc-handle { font-size: 32px; }

  .cc-inner { padding: 28px; min-height: 240px; }
  .cc-handle { font-size: 24px; }

  .faq-item summary { padding: 18px 20px; }
  .faq-q { font-size: 14px; }
  .faq-a { padding: 0 20px 18px; font-size: 13px; }

  .footer { padding: 40px var(--pad) 20px; margin-top: 40px; }

  /* min tap targets — WCAG 44px */
  .nav-link, .chip, .fc-btn, .btn-cta, .btn-dock, .faq-item summary, .footer-col a {
    min-height: 44px;
  }

  /* disable tilt transforms on mobile */
  [data-tilt] { transform: none !important; }
}

/* show hover-only affordances on touch */
@media (hover: none) {
  .fc-btn {
    background: var(--y);
    color: #fff;
  }
}

@media (max-width: 380px) {
  .armory-grid { grid-template-columns: 1fr; }
  .featured-grid { grid-template-columns: 1fr; }
  .feature-card, .feature-card-lg { grid-column: span 1; }
  .item { min-height: 190px; }
  .fc-inner, .feature-card { aspect-ratio: auto; }
  .feature-card .fc-inner { min-height: 180px; }

  .hero-title { font-size: clamp(28px, 10vw, 40px); letter-spacing: -0.02em; }
  .hero-discord { width: 0.45em; height: 0.45em; }
  .hero-tag { letter-spacing: 1.4px; }
  .hero-trust {
    gap: 8px 10px;
    font-size: 10px;
    letter-spacing: 1px;
  }
  .hero-tagline {
    font-size: 10.5px;
    letter-spacing: 0.8px;
    padding: 7px 12px;
    line-height: 1.55;
  }
  .brand-text { font-size: 20px; }
  .loader-logo { font-size: clamp(56px, 18vw, 80px); }
}

/* Extra safety: prevent any horizontal overflow on mobile */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  /* let the title wrap at natural word boundaries only — word-break
     was splitting "Usernames" mid-word on narrow screens */
  .hero-title { overflow-wrap: normal; }
}

/* ============================================================
   CART — nav trigger, drawer, rows, toast
   Drawer slides on transform only; the scrim fades on opacity.
   Nothing here animates a paint-triggering property.
   ============================================================ */

/* --- trigger in the top bar --- */
.nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /* .nav-links already carries margin-right:auto, which pushes this and the
     CTA to the right edge. A third auto margin here would re-split the free
     space and knock the centred nav pill off-centre — so pull in with a
     negative margin against the 40px .nav-inner gap instead. */
  margin-left: 0;
  margin-right: -26px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.02);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              transform 0.25s var(--ease-out);
  flex: none;
}
.nav-cart + .nav-cta { margin-left: 0; }

/* The glyph's mass sits in the basket (x 7-20) while the handle stroke runs
   back to x 4, so a box-centred icon reads as pushed right. Nudge it back. */
.nav-cart svg { transform: translate3d(-1.5px, 0, 0); }

/* Phones get the cart from the raised orb in the tab bar instead, so the
   top-bar pill goes away entirely below 900px.
   This has to live *after* the base `.nav-cart { display: inline-flex }`
   above — an identical-specificity `display: none` in the earlier tab-bar
   media block was simply losing to it on source order. */
@media (max-width: 900px) {
  .nav-cart { display: none; }
  .nav-cart + .nav-cta { margin-left: auto; }
}
@media (hover: hover) {
  .nav-cart:hover { color: var(--y); border-color: rgba(193, 53, 132, 0.55); }
}
.nav-cart:active { transform: scale(0.93); }

/* filled state once something is in it */
.nav-cart.has-items {
  color: var(--y);
  border-color: rgba(193, 53, 132, 0.5);
  background: rgba(193, 53, 132, 0.07);
}

.nav-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--y);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px rgba(193, 53, 132, 0.35);
}
.nav-cart-badge[hidden] { display: none; }

/* one-shot pop when the count changes — no infinite loop */
.nav-cart.bump { animation: cartBump 0.45s var(--ease-out); }
@keyframes cartBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* --- scrim --- */
.cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(0, 0, 0, 0.66);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease), visibility 0.32s;
}
.cart-scrim.open { opacity: 1; visibility: visible; }

/* --- drawer --- */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 200;
  width: min(400px, 92vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  border-left: 1px solid var(--line-2);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.7);
  transform: translate3d(102%, 0, 0);
  visibility: hidden;
  transition: transform 0.42s var(--ease-out), visibility 0.42s;
}
.cart-drawer.open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

/* thin gold rail down the leading edge — the tactical tell */
.cart-drawer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(193, 53, 132, 0.5) 18%,
    rgba(193, 53, 132, 0.5) 82%,
    transparent 100%);
  pointer-events: none;
}

/* drag handle — only shown as a sheet on mobile */
.cart-grab { display: none; }

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 20px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.cart-head-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: var(--y);
}
.cart-head-count {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(193, 53, 132, 0.12);
  border: 1px solid rgba(193, 53, 132, 0.28);
  color: var(--y);
}
.cart-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ink-mute);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease-out);
  flex: none;
}
@media (hover: hover) {
  .cart-close:hover { color: var(--ink); border-color: var(--line-2); }
}
.cart-close:active { transform: scale(0.9); }

.cart-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 14px 14px;
}

/* --- one line item --- */
.cart-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "handle price"
    "qty    remove";
  align-items: center;
  gap: 8px 12px;
  padding: 15px 12px;
  border-bottom: 1px solid var(--line);
}
.cart-row:last-child { border-bottom: 0; }

.cart-row-handle {
  grid-area: handle;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-row-price {
  grid-area: price;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--y);
  white-space: nowrap;
}

.cart-qty {
  grid-area: qty;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 2px;
  width: max-content;
}
.cart-qty button {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--ink-dim);
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: 1;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
@media (hover: hover) {
  .cart-qty button:hover:not(:disabled) { color: var(--y); background: rgba(193, 53, 132, 0.1); }
}
.cart-qty button:disabled { color: #3a3a3a; cursor: not-allowed; }
.cart-qty span {
  min-width: 22px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.cart-remove {
  grid-area: remove;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--ink-dim);
  padding: 9px 15px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.cart-remove svg { width: 13px; height: 13px; flex: none; }
@media (hover: hover) {
  .cart-remove:hover {
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.55);
    background: rgba(255, 107, 107, 0.09);
  }
}
.cart-remove:active { transform: scale(0.95); }

/* row entrance — one-shot, class stripped by JS after it plays */
.cart-row.enter { animation: cartRowIn 0.34s var(--ease-out) both; }
@keyframes cartRowIn {
  from { opacity: 0; transform: translate3d(14px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* --- empty state --- */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  min-height: 260px;
  padding: 30px 24px;
  text-align: center;
}
.cart-empty svg { color: #2c2c2c; }
.cart-empty strong {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 2.2px;
  color: var(--ink-dim);
}
.cart-empty p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #cfcfcf;
  max-width: 252px;
}
.cart-empty p b {
  color: var(--y);
  font-weight: 700;
}

/* solid + chamfered, same family as the hero CTA and the checkout button */
.cart-empty button {
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: #fff;
  background: var(--y);
  border: 0;
  border-radius: 0;
  padding: 16px 30px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: transform 0.2s var(--ease-out);
}
@media (hover: hover) {
  .cart-empty button:hover { transform: translate3d(0, -1px, 0); }
}
.cart-empty button:active { transform: scale(0.98); }

/* --- footer --- */
.cart-foot {
  flex: none;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-2);
  background: #070707;
}
.cart-foot[hidden] { display: none; }

.cart-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cart-sum span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 2.4px;
  color: var(--ink-mute);
}
.cart-sum strong {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 26px;
  color: var(--y);
  letter-spacing: -0.02em;
}

/* chamfered like the hero CTA — same house style, not a generic pill */
.cart-checkout {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px 20px;
  background: var(--y);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.6px;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease);
}
@media (hover: hover) {
  .cart-checkout:hover { transform: translate3d(0, -1px, 0); }
}
.cart-checkout:active { transform: scale(0.985); }
.cart-checkout:disabled { opacity: 0.55; cursor: wait; }

.cart-fine {
  margin-top: 11px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  color: var(--ink-mute);
}

/* --- toast --- */
.cart-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 210;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #101010;
  border: 1px solid rgba(193, 53, 132, 0.4);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--y);
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, 16px, 0);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease-out);
}
.cart-toast.show {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

/* --- card actions: BUY on top, ADD TO CART under it, both full width ---
   Class names predate the swap: .item-zap is the BUY button (now the
   primary, larger one) and .item-buy is ADD TO CART (secondary, a step
   smaller). Renaming would touch the [data-add] handler and the .in-cart
   state, so the names stayed and the weights moved instead. */
.item-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}

/* shared layout for both: icon, word, small qualifier */
.item-actions .item-buy,
.item-zap {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.item-actions .item-buy svg,
.item-zap svg {
  line-height: 1;
  flex: none;
}
.item-actions .item-buy em,
.item-zap em {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: lowercase;
  opacity: 0.62;
}
.item-zap em { font-size: 9.5px; }
.item-actions .item-buy em { font-size: 9px; }

/* primary: the outright purchase */
.item-zap {
  padding: 13px 16px;
  border: 1px solid var(--y);
  border-radius: 999px;
  color: var(--y);
  background: transparent;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              background 0.2s var(--ease), transform 0.2s var(--ease-out);
}
@media (hover: hover) {
  .item-zap:hover { background: var(--y); color: #fff; }
}
.item-zap:active { transform: scale(0.97); }

/* secondary: a touch smaller so the two read as a hierarchy, not a pair */
.item-actions .item-buy {
  padding: 10px 14px;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  border-color: rgba(193, 53, 132, 0.3);
  color: #d2d2d2;
  background: rgba(193, 53, 132, 0.03);
}
@media (hover: hover) {
  .item-actions .item-buy:hover:not(:disabled) {
    background: rgba(193, 53, 132, 0.12);
    border-color: var(--y);
    color: var(--y);
  }
}

/* in-cart state on the ADD button */
.item-buy.in-cart {
  background: rgba(193, 53, 132, 0.12);
  border-color: var(--y);
  color: var(--y);
}
@media (hover: hover) {
  /* scoped to .item-actions so it outranks the secondary hover above it,
     which is one class deeper */
  .item-actions .item-buy.in-cart:hover { background: var(--y); color: #fff; }
}

/* ---------- mobile: drawer becomes a bottom sheet ---------- */
@media (max-width: 700px) {
  .nav-cart {
    width: 40px;
    height: 40px;
    margin-left: 0;
    margin-right: 8px;
  }

  .cart-drawer {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 86vh;
    max-height: 86dvh;
    border-left: 0;
    border-top: 1px solid var(--line-2);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.75);
    transform: translate3d(0, 102%, 0);
  }
  .cart-drawer.open { transform: translate3d(0, 0, 0); }

  /* the gold rail runs across the top edge instead of down the side */
  .cart-drawer::before {
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(193, 53, 132, 0.5) 20%,
      rgba(193, 53, 132, 0.5) 80%,
      transparent 100%);
  }

  .cart-grab {
    display: block;
    width: 42px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: #2e2e2e;
    flex: none;
  }

  .cart-head { padding: 14px 18px 13px; }
  .cart-body { max-height: 46vh; padding: 6px 10px 10px; }
  .cart-row { padding: 14px 10px; }
  .cart-row-handle { font-size: 15px; }

  /* clear the fixed bottom tab bar */
  .cart-foot { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

  .cart-toast { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

  /* keep tap targets at 44px */
  .cart-qty button { width: 32px; height: 32px; }
  .cart-remove { padding: 11px 15px; }

  /* Full-width, same footprint as ADD above it. (This carried a leftover
     width: 48px from when it was a square icon button, which squashed it
     into a small circle on phones.) */
  .item-zap {
    width: 100%;
    padding: 15px 16px;
    font-size: 12.5px;
  }
  /* one step down from BUY, but still a 44px tap target */
  .item-actions .item-buy {
    padding: 12px 14px;
    font-size: 11px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer { transition-duration: 0.18s; }
  .cart-row.enter { animation: none; }
  .nav-cart.bump { animation: none; }
}

/* ─── custom support button (opens Tawk.to chat) ─── */
.support-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: rgba(10, 10, 10, 0.92);
  border: 1.5px solid rgba(193, 53, 132, 0.4);
  border-radius: 50px;
  color: var(--y);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: visible;
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease), background 0.2s var(--ease), opacity 0.3s var(--ease);
  animation: supportGlow 2.5s ease-in-out infinite;
}
@keyframes supportGlow {
  0%, 100% { border-color: rgba(193, 53, 132, 0.3); }
  50% { border-color: rgba(193, 53, 132, 0.8); }
}
/* pulsing ring behind the button */
.support-ping {
  position: absolute;
  inset: -4px;
  border-radius: 50px;
  border: 1.5px solid var(--y);
  opacity: 0;
  animation: supportPing 3s ease-out infinite;
  pointer-events: none;
}
@keyframes supportPing {
  0% { opacity: 0.6; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.25); }
}
.support-btn svg { opacity: 0.8; }
@media (hover: hover) {
  .support-btn:hover {
    border-color: var(--y);
    background: rgba(193, 53, 132, 0.1);
    transform: scale(1.04);
    animation: none;
  }
  .support-btn:hover svg { opacity: 1; }
  .support-btn:hover .support-ping { animation: none; opacity: 0; }
}
.support-btn:active { transform: scale(0.97); }

/* hide button when chat is open */
.support-btn.chat-open {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

@media (max-width: 900px) {
  .support-btn {
    bottom: 74px;
    right: 16px;
    padding: 10px 18px;
    font-size: 10px;
  }
}

/* ============================================================
   SWAP FORM — pre-checkout modal for Instagram handles
   ============================================================ */
.swap-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.swap-modal.open { display: flex; }

.swap-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}

.swap-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.98), rgba(10, 10, 10, 0.98));
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.swap-modal.open .swap-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.swap-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 0;
}
.swap-title {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 4px;
}
.swap-sub {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.swap-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--ink-dim);
  flex-shrink: 0;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.swap-close:hover { border-color: var(--y); color: var(--y); }

.swap-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  margin: 16px 24px 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.swap-handle {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--y);
  min-width: 0;
  overflow-wrap: anywhere;
}
.swap-price {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

/* how-it-works steps — horizontal compact */
.swap-how {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 8px 24px 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.swap-step {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.swap-step b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--y-soft);
  border: 1px solid rgba(193, 53, 132, 0.3);
  color: var(--y);
  font-size: 9px;
  margin-right: 4px;
  vertical-align: middle;
}
.swap-how-arrow {
  color: var(--ink-mute);
  font-size: 14px;
  opacity: 0.4;
}

.swap-fields {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.swap-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.swap-label-text {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--ink-dim);
}
.swap-label-text svg { color: var(--y); flex-shrink: 0; }

.swap-label input[type="text"],
.swap-label input[type="password"] {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s var(--ease);
}
.swap-label input[type="text"]::placeholder,
.swap-label input[type="password"]::placeholder { color: var(--ink-mute); }
.swap-label input[type="text"]:focus,
.swap-label input[type="password"]:focus { border-color: var(--y); }

.swap-contact-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.swap-tab {
  flex: 1;
  cursor: pointer;
}
.swap-tab input { display: none; }
.swap-tab span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  min-height: 44px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--ink-mute);
  transition: all 0.2s var(--ease);
}
.swap-tab input:checked + span {
  background: var(--y-soft);
  border-color: var(--y);
  color: var(--y);
}
@media (hover: hover) {
  .swap-tab:hover span {
    border-color: rgba(193, 53, 132, 0.4);
    color: var(--ink-dim);
  }
}

.swap-info-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.swap-video-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(225, 48, 108, 0.1), rgba(131, 58, 180, 0.1));
  border: 1px solid rgba(193, 53, 132, 0.3);
  border-radius: 999px;
  color: var(--y);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
  align-self: flex-start;
}
.swap-video-link:hover {
  border-color: var(--y);
  background: linear-gradient(135deg, rgba(225, 48, 108, 0.18), rgba(131, 58, 180, 0.18));
}
.swap-video-link svg { flex-shrink: 0; }
.swap-info-rules {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.swap-info-rules p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-dim);
  margin: 0;
}
.swap-info-rules svg { color: var(--y); flex-shrink: 0; }

/* ============================================================
   INLINE VIDEO MODAL — YouTube embed without leaving the page
   ============================================================ */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.video-modal.open { display: flex; }

.video-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
}

.video-wrap {
  position: relative;
  width: 100%;
  max-width: 820px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.video-modal.open .video-wrap {
  opacity: 1;
  transform: scale(1);
}

.video-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: #fff;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.video-close:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.video-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 700px) {
  .video-modal { padding: 16px; }
  .video-close { font-size: 11px; padding: 12px 16px; min-height: 44px; }
}

.swap-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 16px 20px;
  margin-top: 4px;
  background: linear-gradient(135deg, #E1306C 0%, #833AB4 100%);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.2px;
  border: 0;
  border-radius: 999px;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease);
  cursor: pointer;
}
@media (hover: hover) {
  .swap-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(193, 53, 132, 0.3);
  }
}
.swap-submit:active { transform: scale(0.985); }

@media (max-width: 600px) {
  .swap-modal { padding: 0; align-items: flex-end; }
  .swap-panel {
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .swap-product { margin: 8px 16px 0; padding: 12px 14px; }
  .swap-how { margin: 6px 16px 0; padding: 8px 12px; gap: 5px; }
  .swap-step { font-size: 9px; }
  .swap-head { padding: 18px 16px 0; }
  .swap-fields { padding: 14px 16px 18px; gap: 10px; }
  .swap-handle { font-size: 15px; }
  .swap-price { font-size: 15px; }
  .swap-label { gap: 4px; }
  .swap-label input[type="text"],
  .swap-label input[type="password"] { padding: 12px 14px; font-size: 13px; }
  .swap-info-box { padding: 12px; gap: 8px; }
  .swap-submit { padding: 14px 18px; font-size: 12px; }
  .how-swap-video { padding: 12px 14px; gap: 10px; }
}

/* ---- advanced filter bar ------------------------------------------------ */
.adv-filters {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.adv-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.adv-label {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-mute);
  white-space: nowrap;
}
.adv-pills {
  display: flex;
  gap: 4px;
}
.adv-pill {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.adv-pill.adv-active {
  background: var(--y);
  color: #fff;
  border-color: var(--y);
}
@media (hover: hover) {
  .adv-pill:not(.adv-active):hover {
    border-color: var(--y);
    color: var(--ink);
  }
}
.adv-sep {
  width: 1px;
  height: 24px;
  background: var(--line-2);
  flex-shrink: 0;
}
.adv-count {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-mute);
  margin-left: auto;
  white-space: nowrap;
  letter-spacing: 0.5px;
}
@media (max-width: 700px) {
  .adv-filters {
    gap: 4px 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
  .adv-group { gap: 4px; }
  .adv-pill { font-size: 9px; padding: 4px 8px; min-height: 30px; }
  .adv-label { font-size: 7px; letter-spacing: 1px; min-width: 36px; }
  .adv-sep { display: none; }
  .adv-count { font-size: 9px; width: 100%; text-align: right; margin-top: 2px; }
}