/* 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: #ffd400;
  --y-2: #ffe74a;
  --y-glow: rgba(255, 212, 0, 0.28);
  --y-soft: rgba(255, 212, 0, 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(255, 212, 0, 0.45) var(--bg);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: rgba(255, 212, 0, 0.4);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 212, 0, 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: #000; }

/* 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(255, 212, 0, 0.06) 0%,
      rgba(255, 212, 0, 0.035) 22%,
      rgba(255, 212, 0, 0.016) 42%,
      rgba(255, 212, 0, 0.006) 62%,
      transparent 82%),
    /* right */
    radial-gradient(ellipse 1050px 850px at 110% 32%,
      rgba(255, 212, 0, 0.055) 0%,
      rgba(255, 212, 0, 0.03) 22%,
      rgba(255, 212, 0, 0.014) 42%,
      rgba(255, 212, 0, 0.005) 62%,
      transparent 82%),
    /* bottom-center — kept as is */
    radial-gradient(ellipse 850px 650px at 50% 118%,
      rgba(255, 212, 0, 0.09) 0%,
      rgba(255, 212, 0, 0.05) 22%,
      rgba(255, 212, 0, 0.025) 42%,
      rgba(255, 212, 0, 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(255, 212, 0, 0.06) 0%,
        rgba(255, 212, 0, 0.03) 25%,
        rgba(255, 212, 0, 0.012) 50%,
        transparent 80%),
      radial-gradient(ellipse 620px 520px at 122% 32%,
        rgba(255, 212, 0, 0.05) 0%,
        rgba(255, 212, 0, 0.028) 25%,
        rgba(255, 212, 0, 0.01) 50%,
        transparent 80%),
      radial-gradient(ellipse 520px 420px at 50% 118%,
        rgba(255, 212, 0, 0.08) 0%,
        rgba(255, 212, 0, 0.04) 25%,
        rgba(255, 212, 0, 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(255, 212, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 212, 0, 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(#ffd400, #ffd400) center / 1.5px 9px no-repeat,
    linear-gradient(#ffd400, #ffd400) center / 9px 1.5px no-repeat;
}
.bg-dots i::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(255, 212, 0, 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, #ffb800, #ffe74a, #ffb800);
  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(255, 212, 0, 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(255, 212, 0, 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: #000;
  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 4px calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
  }
  .tab-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 44px;
    min-height: 48px;
    padding: 4px 10px;
    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); }

  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) + 80px) var(--pad) 80px;
  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(255, 212, 0, 0.11) 0%,
    rgba(255, 212, 0, 0.05) 30%,
    rgba(255, 212, 0, 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-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: 24px;
  animation: fadeUp 0.8s var(--ease-out) 0.45s both;
}
.hero-title .accent {
  color: var(--y);
  position: relative;
  /* Gold gradient with a bright highlight that shimmers across */
  background:
    linear-gradient(100deg,
      #ffb800 0%,
      #ffd400 30%,
      #fff6cc 46%,
      #ffffff 50%,
      #fff6cc 54%,
      #ffd400 70%,
      #ffb800 100%
    );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShine 5.5s ease-in-out infinite;
}
@keyframes goldShine {
  0%   { background-position: 200% 0; }
  60%  { background-position: -80% 0; }
  100% { background-position: -80% 0; }
}
.hero-title .accent i {
  font-style: normal;
  color: var(--y);
  -webkit-text-fill-color: var(--y);
}

.hero-sub {
  max-width: 520px;
  margin: 0 auto 30px;
  font-size: clamp(15px, 1.4vw, 17px);
  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: 40px;
  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: -14px auto 36px;
  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(255, 212, 0, 0.25);
  border-radius: 999px;
  background: rgba(255, 212, 0, 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);
}

.hero-actions {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 70px;
  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, #ffe74a 0%, #ffb800 100%);
  color: #000;
  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(255, 184, 0, 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(255, 184, 0, 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(255, 212, 0, 0.05);
}
.btn-dock:hover .btn-dock-circle { background: var(--y); color: #000; }
.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(255, 212, 0, 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(255, 212, 0, 0.09) 0%,
    rgba(255, 212, 0, 0.05) 25%,
    rgba(255, 212, 0, 0.02) 45%,
    transparent 65%);
  filter: blur(34px);
}

.orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.orbit-ring-out {
  border: 1px dashed rgba(255, 212, 0, 0.4);
  animation: orbitSpin 26s linear infinite;
}
.orbit-ring-in {
  inset: 26px;
  border: 1px solid rgba(255, 212, 0, 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(255, 212, 0, 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(255, 212, 0, 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: var(--y);
  color: #000;
  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(255, 212, 0, 0.55); }
  70%  { box-shadow: 0 0 14px var(--y-glow), 0 0 0 9px rgba(255, 212, 0, 0); }
  100% { box-shadow: 0 0 14px var(--y-glow), 0 0 0 9px rgba(255, 212, 0, 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(255, 212, 0, 0.15), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.feature-card:hover .fc-inner {
  border-color: rgba(255, 212, 0, 0.6);
  box-shadow: 0 0 30px rgba(255, 212, 0, 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: #000;
  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: #000;
}

/* 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: #000;
  border-color: var(--y);
}
.chip-active:hover {
  color: #000;
  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;
}

/* reveal-more control — outline chamfer, same family as the hero CTA but
   secondary (transparent), so it doesn't compete with ADD/BUY on the cards */
.load-more-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.load-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: transparent;
  border: 1px solid rgba(255, 212, 0, 0.4);
  color: var(--y);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.2px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease-out);
}
@media (hover: hover) {
  .load-more:hover { background: rgba(255, 212, 0, 0.1); border-color: var(--y); }
}
.load-more:active { transform: scale(0.98); }
.load-more-count { color: var(--ink-mute); font-weight: 600; }

/* plain text-link, deliberately quieter than MORE — this reveals the whole
   remaining list in one go, so it shouldn't read as the default action */
.show-all {
  background: none;
  border: none;
  color: var(--ink-mute);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px;
  transition: color 0.2s var(--ease);
}
@media (hover: hover) {
  .show-all:hover { color: var(--y); }
}

.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(255, 212, 0, 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(255, 212, 0, 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(255, 212, 0, 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(255, 212, 0, 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(255, 212, 0, 0.6);
}
.item.in-view .spec-dot {
  animation: specDot 2s ease-out infinite;
}
@keyframes specDot {
  0%   { box-shadow: 0 0 0 0 rgba(255, 212, 0, 0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 212, 0, 0); }
  100% { box-shadow: 0 0 0 7px rgba(255, 212, 0, 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(255, 212, 0, 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: #000;
  }
}
.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(255, 212, 0, 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(255, 212, 0, 0.3); }
.faq-item[open] {
  border-color: rgba(255, 212, 0, 0.5);
  background: linear-gradient(180deg, rgba(255, 212, 0, 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: #000; }
.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(255, 212, 0, 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(255, 212, 0, 0.18), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.comms-card:hover .cc-inner {
  border-color: rgba(255, 212, 0, 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(255, 212, 0, 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(255, 212, 0, 0.4) transparent;
}
.policy-body::-webkit-scrollbar { width: 6px; }
.policy-body::-webkit-scrollbar-track { background: transparent; }
.policy-body::-webkit-scrollbar-thumb {
  background: rgba(255, 212, 0, 0.4);
  border-radius: 999px;
}
.policy-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 212, 0, 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; }
  .chip { padding: 8px 12px; font-size: 10px; letter-spacing: 1.5px; }
  .search-box { min-width: 0; width: 100%; }

  .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: 10px; padding: 5px 11px; }
  .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: #000;
  }
}

@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(32px, 12vw, 46px); letter-spacing: -0.02em; }
  .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; }
  .hero-title { word-break: break-word; overflow-wrap: break-word; }
}

/* ============================================================
   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); }

/* nav pill is gone below 900px — the cart takes over pushing the CTA right */
@media (max-width: 900px) {
  .nav-cart { margin-left: auto; margin-right: 0; }
  .nav-cart + .nav-cta { margin-left: 12px; }
}
@media (hover: hover) {
  .nav-cart:hover { color: var(--y); border-color: rgba(255, 212, 0, 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(255, 212, 0, 0.5);
  background: rgba(255, 212, 0, 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: #000;
  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(255, 212, 0, 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(255, 212, 0, 0.5) 18%,
    rgba(255, 212, 0, 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(255, 212, 0, 0.12);
  border: 1px solid rgba(255, 212, 0, 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(255, 212, 0, 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: #000;
  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: #000;
  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(255, 212, 0, 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: ADD stacked over BUY, both full width --- */
.item-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.item-actions .item-buy { width: 100%; }

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

.item-zap {
  width: 100%;
  padding: 12px 16px;
  /* Readable at rest — it sat on --ink-dim with a neutral border and read as
     a disabled control until you hovered it. */
  border: 1px solid rgba(255, 212, 0, 0.22);
  border-radius: 999px;
  color: #dcdcdc;
  background: rgba(255, 212, 0, 0.03);
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2px;
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease-out);
}
@media (hover: hover) {
  .item-zap:hover {
    color: var(--y);
    border-color: rgba(255, 212, 0, 0.65);
    background: rgba(255, 212, 0, 0.09);
  }
}
.item-zap:active { transform: scale(0.97); }

/* in-cart state on the ADD button */
.item-buy.in-cart {
  background: rgba(255, 212, 0, 0.12);
  border-color: var(--y);
  color: var(--y);
}
@media (hover: hover) {
  .item-buy.in-cart:hover { background: var(--y); color: #000; }
}

/* ---------- 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(255, 212, 0, 0.5) 20%,
      rgba(255, 212, 0, 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: 14px 16px;
    font-size: 12px;
  }
  .item-actions .item-buy { padding: 14px 16px; }
}

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