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

:root {
  --red: #ff2b20;
  --dark: #1c1f26;
  --navy: #0f2744;
}

body { font-family: 'Inter', sans-serif; background: #000; color: #fff; }

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #05070c;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  transform: translateX(var(--hero-video-shift, 0%)) scale(calc(1 + var(--hero-progress, 0) * 0.14));
  filter: brightness(calc(1 - var(--hero-progress, 0) * 0.35));
  will-change: transform, filter;
}
/* No zoom — just slides the already-cropped frame right. The naked/empty sliver
   that was on the right edge gets pushed past the boundary and clipped, and the
   gap that opens on the left is filled by the hero's own dark background,
   reading as a clean margin rather than empty space. */
@media (max-width: 640px) {
  .hero-video { object-position: right center; --hero-video-shift: 20%; }
}
@media (prefers-reduced-motion: reduce) { .hero-video { transform: none; filter: none; } }

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(5,7,12,0.96) 0%, rgba(5,7,12,0.82) 32%, rgba(5,7,12,0.4) 55%, rgba(5,7,12,0) 78%);
}
/* The left-to-right fade only makes sense against the left-anchored desktop
   layout — once the hero content centers on mobile, a flat, slightly darker
   tint reads cleanly instead of unevenly lighting one side of centered text. */
@media (max-width: 640px) {
  .hero-overlay {
    background-image: none;
    background-color: rgba(5,7,12,0.55);
  }
  /* The video is shifted right (--hero-video-shift), leaving a solid-color gap
     on the left where it no longer covers. Left as a flat tint, that gap reads
     as a hard-edged black rectangle against the video. Fading solid black into
     the regular tint right where the video starts hides that seam instead. */
  .hero-overlay {
    background-image: linear-gradient(to right, rgba(5,7,12,1) 0%, rgba(5,7,12,1) 18%, rgba(5,7,12,0.55) 32%);
  }
}
.hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #05070c;
  opacity: var(--hero-progress, 0);
}

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  opacity: 0;
  transform: translateX(-50%);
  animation: hero-scroll-cue-in 0.8s ease-out 1.1s forwards;
  transition: opacity 0.3s ease;
}
@keyframes hero-scroll-cue-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.hero-scroll-cue.is-hidden { opacity: 0 !important; pointer-events: none; }
.hero-scroll-cue-mouse {
  position: relative;
  width: 24px;
  height: 38px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.28);
  box-shadow: 0 0 16px rgba(255,43,32,0.12);
  transition: border-color 0.2s ease;
}
.hero-scroll-cue:hover .hero-scroll-cue-mouse { border-color: rgba(255,43,32,0.6); }
.hero-scroll-cue-dot {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 7px;
  border-radius: 2px;
  background: var(--red);
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(255,43,32,0.8);
  animation: hero-scroll-cue-dot 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-cue-dot {
  0%   { opacity: 1; top: 6px; }
  60%  { opacity: 0; top: 20px; }
  61%  { opacity: 0; top: 6px; }
  100% { opacity: 0; top: 6px; }
}
.hero-scroll-cue-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue { animation: none; opacity: 1; }
  .hero-scroll-cue-dot { animation: none; }
}

/* Small rectangle sized to the cue, stretched down to meet the hero's bottom
   edge (the cue itself sits 1.75rem above it) so it reads as one connected
   panel instead of a floating chip. Rounded on top, flush/square on bottom. */
.hero-scroll-cue::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -0.75rem;
  left: -1.25rem;
  right: -1.25rem;
  bottom: -1.75rem;
  border-radius: 16px 16px 0 0;
  background: rgba(5,7,12,0.75);
}

/* ══════════════════════════════════════════════════════════════════
   Site navbar — one unified component used identically on every page.
   ══════════════════════════════════════════════════════════════════ */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 1.5rem; height: 84px;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
@media (min-width: 640px)  { .site-nav { padding: 0 2.5rem; } }
@media (min-width: 1024px) { .site-nav { padding: 0 3.5rem; height: 92px; } }

/* Transparent — hero only, before scrolling; fades out toward the art on the right.
   The fade-to-transparent mask only makes sense once nav-links/CTA fill the bar on
   desktop — on mobile the hamburger sits far enough right that the mask erased it. */
.site-nav--transparent {
  background-image: linear-gradient(to right, rgba(5,7,12,0.88) 0%, rgba(5,7,12,0.6) 38%, rgba(5,7,12,0) 75%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
@media (min-width: 900px) {
  .site-nav--transparent {
    -webkit-mask-image: linear-gradient(to right, black 0%, black 55%, transparent 78%);
    mask-image: linear-gradient(to right, black 0%, black 55%, transparent 78%);
  }
}
/* Solid glass — every other page by default, and the hero once scrolled */
.site-nav--solid {
  background: rgba(7,9,15,0.85);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  -webkit-mask-image: none; mask-image: none;
  border-bottom-color: rgba(255,255,255,0.07);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.site-nav a, .site-nav .brand { text-shadow: 0 2px 10px rgba(0,0,0,0.5); }

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo { display: block; height: 56px; width: auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5)); }
@media (min-width: 640px) { .brand-logo { height: 64px; } }

.nav-links { display: none; align-items: center; gap: 0.2rem; margin-left: 0.5rem; }
@media (min-width: 900px) { .nav-links { display: flex; } }

.nav-links a {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.83rem; font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  transition: color 0.2s;
}
.nav-links a svg { width: 16px; height: 16px; opacity: 0.7; transition: opacity 0.2s, color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-links a:hover svg, .nav-links a.active svg { opacity: 1; color: var(--red); }
.nav-links a::after {
  content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.15rem; height: 2px;
  background: linear-gradient(90deg, var(--red), #ff6b5c);
  border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.nav-cta {
  display: none; align-items: center; gap: 0.5rem;
  margin-left: auto;
  background-image: linear-gradient(325deg, #8a0f0a 0%, #ff6b5c 55%, #8a0f0a 90%);
  background-size: 280% auto;
  background-position: 0% 0%;
  color: #fff; text-decoration: none;
  padding: 0.6rem 1.3rem; border-radius: 100px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
  box-shadow:
    0 0 22px rgba(255,68,56,0.5),
    0 5px 12px -2px rgba(179,20,10,0.4),
    inset 3px 3px 6px rgba(255,190,180,0.45),
    inset -3px -3px 6px rgba(120,10,6,0.4);
  transition: background-position 0.7s ease, transform 0.2s, box-shadow 0.2s;
}
@media (min-width: 900px) { .nav-cta { display: inline-flex; } }
.nav-cta svg { width: 16px; height: 16px; }
.nav-cta:hover {
  background-position: 100% 0%;
  transform: translateY(-1px);
  box-shadow:
    0 0 30px rgba(255,68,56,0.65),
    0 6px 16px -2px rgba(179,20,10,0.5),
    inset 3px 3px 6px rgba(255,190,180,0.5),
    inset -3px -3px 6px rgba(120,10,6,0.45);
}

.hamburger { display: flex; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; padding: 4px; margin-left: auto; }
@media (min-width: 900px) { .hamburger { display: none; } }
.hamburger div { height: 2px; background: #fff; border-radius: 2px; }
.hamburger div:nth-child(1), .hamburger div:nth-child(2) { width: 24px; }
.hamburger div:nth-child(3) { width: 16px; }

/* ── Hero Content ── */
.hero-content {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 2rem 1.5rem 3rem;
}
@media (min-width: 640px)  { .hero-content { padding: 2rem 2.5rem 3rem; } }
@media (min-width: 1024px) { .hero-content { padding: 0 3.5rem; } }

.hero-inner {
  max-width: min(50rem, 56vw);
  transform: translateY(calc(var(--hero-progress, 0) * -70px)) scale(calc(1 - var(--hero-progress, 0) * 0.06));
  opacity: clamp(0, calc(1 - var(--hero-progress, 0) * 1.3), 1);
  will-change: transform, opacity;
}
@media (max-width: 900px) { .hero-inner { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .hero-inner { transform: none; opacity: 1; } }

/* Below 640px there's no room for the left-anchored desktop composition to
   breathe, so everything centers as one column instead. */
@media (max-width: 640px) {
  .hero-content { justify-content: center; }
  .hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .heading { align-items: center; }
  .subtext { margin-left: auto; margin-right: auto; }
  .cta { justify-content: center; }
}

.heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-weight: 700;
}

.h-line {
  font-size: clamp(1.8rem, 5.5vw, 4.6rem);
  color: #fff;
  filter: drop-shadow(0 0 30px rgba(255,255,255,0.16));
}

.h-accent {
  font-size: clamp(1.8rem, 5.5vw, 4.6rem);
  margin-top: 0.05em;
  background: linear-gradient(100deg, #ff6b5c 0%, #ff2b20 45%, #b3140a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(255,43,32,0.4));
}

.subtext {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  max-width: 36rem;
}
@media (min-width: 1024px) { .subtext { margin-top: 2rem; } }

/* ── CTA ── */
.cta { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
@media (min-width: 1024px) { .cta { margin-top: 2.5rem; } }

.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.6875rem, 1.2vw, 0.875rem);
  font-weight: 600;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
@media (min-width: 640px) { .btn-primary, .btn-secondary { padding: 1rem 1.75rem; } }

.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: #e0180d; }
.btn-secondary { background: var(--dark); color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.btn-secondary:hover { border-color: rgba(255,255,255,0.3); }
.btn-primary svg, .btn-secondary svg { width: 16px; height: 16px; }

/* ── Stats bar ── */
.stats-bar {
  position: relative;
  background:
    radial-gradient(ellipse 50% 100% at 15% 50%, rgba(255,43,32,0.08), transparent 70%),
    #070a11;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 2.25rem 1.5rem;
  scroll-snap-align: start;
}
@media (min-width: 640px)  { .stats-bar { padding: 2.25rem 2.5rem; } }
@media (min-width: 1024px) { .stats-bar { padding: 2.5rem 3.5rem; } }

/* Cinematic reveal as the section scrolls into view — JS adds .reveal-pre on load
   (so the page degrades to always-visible without JS) then swaps to .reveal-in
   once it crosses the viewport threshold. */
.stats-bar.reveal-pre { opacity: 0; transform: translateY(56px) scale(0.97); }
.stats-bar {
  transition: opacity 0.9s cubic-bezier(.16,.84,.44,1), transform 0.9s cubic-bezier(.16,.84,.44,1);
}
.stats-bar.reveal-pre .stats-tagline,
.stats-bar.reveal-pre .stats-row { opacity: 0; transform: translateY(18px); }
.stats-tagline, .stats-row {
  transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
}
.stats-bar.reveal-pre .stats-row { transition-delay: 0s; }
.stats-bar.reveal-in .stats-row { transition-delay: 0.3s; }
/* Below ~768px, scroll-snap pulls this section into place fast enough on touch
   scroll that the opacity/transform reveal can't catch up — it reads as a jarring
   pop instead of a reveal. Simplest fix: just show it immediately on mobile. */
@media (prefers-reduced-motion: reduce), (max-width: 767px) {
  .stats-bar.reveal-pre,
  .stats-bar.reveal-pre .stats-tagline,
  .stats-bar.reveal-pre .stats-row { opacity: 1; transform: none; }
}

.stats-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.stats-glow::before {
  content: ''; position: absolute; top: 50%; left: 8%; width: 40%; height: 220%;
  transform: translateY(-50%);
  background: radial-gradient(ellipse at center, rgba(255,43,32,0.10), transparent 65%);
}

.stats-bar-inner {
  position: relative; z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.75rem 2.5rem;
  text-align: center;
}
@media (min-width: 900px) { .stats-bar-inner { text-align: left; flex-wrap: nowrap; } }
/* Below 900px, .stats-lead and .stats-row wrap onto separate lines. With only one
   item per line, "space-between" collapses to flex-start, so the eyebrow/tagline
   sat pinned to the left edge even though its own text was centered — a mismatch
   that read as broken alignment. Centering the container fixes both lines. */
@media (max-width: 899px) { .stats-bar-inner { justify-content: center; } }

.stats-lead { display: flex; flex-direction: column; gap: 0.55rem; align-items: center; flex-shrink: 0; }
@media (min-width: 900px) { .stats-lead { align-items: flex-start; } }
.stats-eyebrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.stats-eyebrow-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; animation: footer-pulse 2.2s ease-in-out infinite; }
.stats-tagline {
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.stats-tagline .accent {
  background: linear-gradient(100deg, #ff6b5c 0%, #ff2b20 45%, #b3140a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(255,43,32,0.4));
}

.stats-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  min-width: 0;
}
@media (max-width: 899px) { .stats-row { width: 100%; flex-shrink: 1; } }

.stat {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.9rem 1.25rem 0.9rem 0.9rem;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.stat:hover {
  transform: translateY(-3px);
  border-color: rgba(255,43,32,0.35);
  box-shadow: 0 16px 34px -20px rgba(255,43,32,0.5);
}
.stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; flex-shrink: 0;
  border-radius: 11px;
  background: linear-gradient(155deg, rgba(255,43,32,0.2), rgba(255,43,32,0.03));
  border: 1px solid rgba(255,43,32,0.3);
  color: var(--red);
}
.stat-icon svg { width: 1.35rem; height: 1.35rem; }
.stat-body { text-align: left; }

.stat-num {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffffff 30%, #ffb3ac 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(255,43,32,0.28));
  font-variant-numeric: tabular-nums;
}
.stat-slash { color: var(--red); -webkit-text-fill-color: var(--red); margin: 0 0.02em; }

.font-fallback { font-family: 'Inter', sans-serif; }
.stat-label {
  margin-top: 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .stat { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   Category cards — shared by the homepage carousel and catalog grid
   ══════════════════════════════════════════════════════════════════ */
.cat-card {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 260px;
  height: 220px;
  border-radius: 16px;
  overflow: hidden;
  background: #0d1117;
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.cat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,43,32,0.4);
  box-shadow: 0 20px 40px rgba(255,43,32,0.15);
}

.cat-card-media { position: absolute; inset: 0; }
.cat-card-media img { width: 100%; height: 100%; object-fit: cover; }
.cat-card-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1a0d0d 0%, #08090c 100%);
  overflow: hidden;
}
.cat-card-placeholder span {
  font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif;
  font-size: 3.4rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255,43,32,0.14);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.cat-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,6,10,0.95) 0%, rgba(5,6,10,0.5) 45%, transparent 75%);
}
.cat-card-logo {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(10,12,18,0.7);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cat-card-logo img { width: 100%; height: 100%; object-fit: cover; }

.cat-card-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 16px; }
.cat-card-count {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  margin-bottom: 6px;
}
.cat-card-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cat-card-name {
  font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-card-price { font-size: 0.7rem; color: rgba(255,255,255,0.5); white-space: nowrap; flex-shrink: 0; }
.cat-card-price b { color: var(--red); font-size: 0.95rem; }
.cat-card-soon { font-size: 0.66rem; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; flex-shrink: 0; }

/* ── Homepage category carousel (section 2) ── */
.cat-section { background: #05070c; padding: 4rem 1.5rem; }
@media (min-width: 640px)  { .cat-section { padding: 4rem 2.5rem; } }
@media (min-width: 1024px) { .cat-section { padding: 5rem 3.5rem; } }

.cat-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto 2rem;
}
.cat-eyebrow { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 0.5rem; }
.cat-title {
  font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.cat-title .accent {
  background: linear-gradient(100deg, #ff6b5c 0%, #ff2b20 45%, #b3140a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cat-viewall {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.cat-viewall:hover { color: #fff; border-color: var(--red); }

.cat-carousel-wrap { max-width: 1400px; margin: 0 auto; position: relative; display: flex; align-items: center; gap: 0.75rem; }
.cat-viewport { flex: 1; overflow: hidden; }
.cat-track { display: flex; gap: 1.25rem; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.cat-nav {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.cat-nav:hover { background: rgba(255,43,32,0.15); border-color: rgba(255,43,32,0.4); color: #fff; }
.cat-nav svg { width: 18px; height: 18px; }
.cat-nav[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }
/* Arrows stay visible on mobile — the track only moves via these clicks (the
   viewport is overflow:hidden, so there's no native touch-swipe fallback). */
@media (max-width: 700px) { .cat-nav { width: 34px; height: 34px; } .cat-nav svg { width: 15px; height: 15px; } }

/* ── Catalog page hero + grid ── */
.catalog-hero {
  position: relative;
  text-align: center;
  padding: 4rem 1.5rem 3rem;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(255,43,32,0.1), transparent 70%), #05070c;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.catalog-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 16px;
  background: linear-gradient(145deg, #ff4b3d 0%, #b3140a 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 8px 30px rgba(255,43,32,0.4);
  margin-bottom: 1.5rem;
}
.catalog-icon svg { width: 28px; height: 28px; color: #fff; }
.catalog-title {
  font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}
.catalog-title .accent {
  background: linear-gradient(100deg, #ff6b5c 0%, #ff2b20 45%, #b3140a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.catalog-sub { margin: 1rem auto 0; color: rgba(255,255,255,0.5); font-size: 0.95rem; max-width: 32rem; }
.catalog-search { margin: 2rem auto 0; max-width: 34rem; position: relative; }
.catalog-search input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 0.9rem 3rem 0.9rem 1.25rem;
  color: #fff;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}
.catalog-search input:focus { border-color: var(--red); }
.catalog-search input::placeholder { color: rgba(255,255,255,0.35); }
.catalog-search svg { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: rgba(255,255,255,0.4); pointer-events: none; }

.catalog-grid-section { padding: 3rem 1.5rem 5rem; background: #05070c; }
@media (min-width: 640px)  { .catalog-grid-section { padding: 3rem 2.5rem 5rem; } }
@media (min-width: 1024px) { .catalog-grid-section { padding: 3rem 3.5rem 5rem; } }
.catalog-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.catalog-grid .cat-card { width: 100%; }

/* ── Category detail page ── */
.category-banner { position: relative; min-height: 320px; display: flex; align-items: flex-end; overflow: hidden; padding: 3rem 1.5rem 2.5rem; }
@media (min-width: 640px)  { .category-banner { padding: 3rem 2.5rem 2.5rem; } }
@media (min-width: 1024px) { .category-banner { padding: 3rem 3.5rem 2.5rem; } }
.category-banner-media { position: absolute; inset: 0; z-index: 0; }
.category-banner-media img { width: 100%; height: 100%; object-fit: cover; }
.category-banner-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #1a0d0d 0%, #08090c 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.category-banner-placeholder span {
  font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif;
  font-size: 6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255,43,32,0.08);
  white-space: nowrap;
}
.category-banner-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,6,10,0.97) 0%, rgba(5,6,10,0.75) 40%, rgba(5,6,10,0.35) 100%);
}
.category-banner-content { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; width: 100%; }
.category-crumb { font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-bottom: 0.75rem; }
.category-crumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.category-crumb a:hover { color: #fff; }
.category-title {
  font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.05;
  max-width: 44rem;
}
.category-title .accent { color: var(--red); }
.category-desc { margin-top: 1rem; color: rgba(255,255,255,0.55); max-width: 40rem; line-height: 1.6; font-size: 0.92rem; }

.filter-bar {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
@media (min-width: 640px)  { .filter-bar { padding: 1.5rem 2.5rem; } }
@media (min-width: 1024px) { .filter-bar { padding: 1.5rem 3.5rem; } }
.filter-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1rem; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.65); font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.filter-btn svg { width: 14px; height: 14px; }
.filter-btn:hover { color: #fff; border-color: rgba(255,255,255,0.25); }
.filter-btn.active { background: linear-gradient(135deg, #ff2b20 0%, #8a0f0a 100%); border-color: transparent; color: #fff; }
.filter-search { margin-left: auto; position: relative; }
.filter-search input {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  padding: 0.55rem 2.4rem 0.55rem 0.9rem; color: #fff; font-size: 0.8rem; outline: none;
  width: 200px; transition: border-color 0.2s;
}
.filter-search input:focus { border-color: var(--red); }
.filter-search svg { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: rgba(255,255,255,0.35); pointer-events: none; }
.filter-count { font-size: 0.78rem; color: rgba(255,255,255,0.35); flex-shrink: 0; }

.prod-grid-section { max-width: 1400px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
@media (min-width: 640px)  { .prod-grid-section { padding: 2.5rem 2.5rem 5rem; } }
@media (min-width: 1024px) { .prod-grid-section { padding: 2.5rem 3.5rem 5rem; } }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }

.prod-card {
  position: relative; border-radius: 16px; overflow: hidden;
  background: #0d1117; border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.prod-card:hover { transform: translateY(-4px); border-color: rgba(255,43,32,0.4); box-shadow: 0 20px 40px rgba(255,43,32,0.15); }
.prod-card-media { position: relative; height: 170px; background: linear-gradient(160deg, #1a0d0d 0%, #08090c 100%); overflow: hidden; }
.prod-card-media img { width: 100%; height: 100%; object-fit: cover; }
.prod-card-media .placeholder-mark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif;
  font-size: 2.4rem; font-weight: 700; color: rgba(255,43,32,0.14); text-transform: uppercase;
}
.prod-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 100px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.prod-badge--undetected { background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.35); color: #4ade80; }
.prod-badge--popular { background: rgba(255,43,32,0.12); border: 1px solid rgba(255,43,32,0.4); color: var(--red); }
.prod-badge--promo { background: rgba(168,85,247,0.12); border: 1px solid rgba(168,85,247,0.4); color: #c084fc; }
.prod-card-body { padding: 1rem 1.1rem 1.1rem; }
.prod-name { font-size: 0.92rem; font-weight: 700; color: #fff; margin-bottom: 0.6rem; }
.prod-foot { display: flex; align-items: center; justify-content: space-between; }
.prod-price-label { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.prod-price { font-size: 1.05rem; font-weight: 700; color: var(--red); }
.prod-price--empty { color: rgba(255,255,255,0.3); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; }

.empty-state { grid-column: 1 / -1; text-align: center; padding: 4rem 2rem; color: rgba(255,255,255,0.3); }
.empty-state svg { width: 52px; height: 52px; margin-bottom: 1.25rem; opacity: 0.3; }
.empty-state p { font-size: 0.95rem; line-height: 1.6; }
.empty-state a { color: var(--red); text-decoration: none; font-weight: 600; }
.empty-state a:hover { text-decoration: underline; }

/* ── Mobile Menu ── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.95);
  backdrop-filter: blur(4px);
  display: flex; flex-direction: column;
  padding: 1.25rem 1.5rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; }
.close-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; }
.mobile-menu-links { display: flex; flex-direction: column; justify-content: center; flex: 1; gap: 1.5rem; }
.mobile-menu-links a {
  font-size: clamp(2rem, 8vw, 3rem);
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s, color 0.2s;
}
.mobile-menu.open .mobile-menu-links a { opacity: 1; transform: translateY(0); }
.mobile-menu.open .mobile-menu-links a:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.open .mobile-menu-links a:nth-child(2) { transition-delay: 0.18s; }
.mobile-menu.open .mobile-menu-links a:nth-child(3) { transition-delay: 0.26s; }
.mobile-menu.open .mobile-menu-links a:nth-child(4) { transition-delay: 0.34s; }
.mobile-menu-links a:hover, .mobile-menu-links a.active { color: var(--red); }

/* ── Fade-up animations ── */
@keyframes fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-up         { animation: fade-up 0.8s ease-out 0s    forwards; opacity: 0; }
.fade-up-delay-1 { animation: fade-up 0.8s ease-out 0.2s forwards; opacity: 0; }
.fade-up-delay-2 { animation: fade-up 0.8s ease-out 0.4s forwards; opacity: 0; }
.fade-up-delay-3 { animation: fade-up 0.8s ease-out 0.6s forwards; opacity: 0; }

/* ── Scroll snap ── */
html { scroll-snap-type: y proximity; scroll-behavior: smooth; }
body { overflow-y: scroll; height: 100%; }
.hero { scroll-snap-align: start; }

/* ══════════════════════════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════════════════════════ */
.site-footer {
  position: relative;
  overflow: hidden;
  background: #05070c;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 3.5rem 1.5rem 0;
}
@media (min-width: 640px)  { .site-footer { padding: 3.5rem 2.5rem 0; } }
@media (min-width: 1024px) { .site-footer { padding: 4.5rem 3.5rem 0; } }

/* lit top accent, echoing the step cards */
.site-footer::before {
  content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,43,32,0.5), transparent);
}
.footer-glow {
  position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 90%; max-width: 1000px; height: 380px;
  background: radial-gradient(ellipse at center, rgba(255,43,32,0.06), transparent 70%);
  pointer-events: none;
}

.footer-inner {
  position: relative; z-index: 1;
  max-width: 1300px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 2.5rem 2rem;
}
@media (max-width: 1000px) { .footer-inner { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px)  { .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } }

/* -- brand column -- */
.footer-brand { max-width: 22rem; }
.footer-logo { display: inline-block; }
.footer-logo img { height: 58px; width: auto; display: block; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5)); }
.footer-tagline { margin-top: 1rem; font-size: 0.83rem; line-height: 1.7; color: rgba(255,255,255,0.45); }

.footer-socials { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.footer-social svg { width: 17px; height: 17px; }
.footer-social:hover {
  color: #fff; border-color: rgba(255,43,32,0.5);
  background: rgba(255,43,32,0.12);
  transform: translateY(-2px);
}

.footer-status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.5);
}
.footer-status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 8px 2px rgba(74,222,128,0.5);
  animation: footer-pulse 2.4s ease-in-out infinite;
}
@keyframes footer-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* -- link columns -- */
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col h4 {
  font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; margin-bottom: 1rem;
}
.footer-col a {
  position: relative;
  font-size: 0.83rem; color: rgba(255,255,255,0.45);
  text-decoration: none; padding: 0.35rem 0;
  transition: color 0.2s, padding-left 0.2s;
}
.footer-col a::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 0; height: 1px; background: var(--red);
  transition: width 0.2s;
}
.footer-col a:hover { color: #fff; padding-left: 0.85rem; }
.footer-col a:hover::before { width: 0.6rem; }

/* -- bottom bar -- */
.footer-bottom {
  position: relative; z-index: 1;
  max-width: 1300px; margin: 3rem auto 0;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem 1.5rem;
}
.footer-bottom p { font-size: 0.76rem; color: rgba(255,255,255,0.32); }
.footer-disclaimer { flex: 1; min-width: 14rem; color: rgba(255,255,255,0.22) !important; }
@media (max-width: 700px) { .footer-bottom { justify-content: flex-start; } }

/* ══════════════════════════════════════════════════════════════════
   Product detail page
   ══════════════════════════════════════════════════════════════════ */
.product-crumb { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.5rem 0; font-size: 0.78rem; color: rgba(255,255,255,0.4); }
@media (min-width: 640px)  { .product-crumb { padding: 1.5rem 2.5rem 0; } }
@media (min-width: 1024px) { .product-crumb { padding: 1.5rem 3.5rem 0; } }
.product-crumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.product-crumb a:hover { color: #fff; }
.product-crumb span { color: rgba(255,255,255,0.75); }

.product-page-grid {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 380px; gap: 1.75rem;
  padding: 1.25rem 1.5rem 3rem;
  align-items: start;
}
@media (min-width: 640px)  { .product-page-grid { padding: 1.25rem 2.5rem 3rem; } }
@media (min-width: 1024px) { .product-page-grid { padding: 1.25rem 3.5rem 3rem; } }
@media (max-width: 960px)  { .product-page-grid { grid-template-columns: 1fr; } }
.product-main, .product-checkout { min-width: 0; }

/* ── Gallery + info card ── */
.product-card-main {
  background: #0d1117;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.product-media {
  position: relative;
  flex: 0 0 100%;
  max-width: 100%;
  min-height: 280px;
  background: linear-gradient(160deg, #1a0d0d 0%, #08090c 100%);
  overflow: hidden;
}
@media (min-width: 780px) { .product-media { flex: 0 0 40%; max-width: 40%; min-height: 460px; } }
.product-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-media .placeholder-mark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif;
  font-size: 2.6rem; font-weight: 700; text-transform: uppercase; color: rgba(255,43,32,0.14);
  text-align: center; padding: 1rem;
}

.product-info { flex: 1; min-width: 0; padding: 1.75rem; }
.product-info-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.product-cat-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.product-cat-pill img { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; }
.product-undetected {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #4ade80;
}
.product-undetected svg { width: 14px; height: 14px; }

.product-title {
  font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}

.product-meta-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; }
.product-meta-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 0.4rem 0.75rem;
  font-size: 0.76rem; color: rgba(255,255,255,0.65);
}
.product-meta-chip svg { width: 14px; height: 14px; color: var(--red); flex-shrink: 0; }
.product-meta-chip b { color: #fff; font-weight: 700; }

.product-desc { font-size: 0.88rem; line-height: 1.7; color: rgba(255,255,255,0.6); margin-bottom: 1.5rem; }
.product-desc.clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-desc-toggle { background: none; border: none; color: var(--red); font-weight: 700; font-size: 0.82rem; cursor: pointer; padding: 0; margin-bottom: 1.5rem; margin-top: -1rem; display: inline-block; }

.product-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; }
.product-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255,43,32,0.06); border: 1px solid rgba(255,43,32,0.25);
  border-radius: 8px; padding: 0.45rem 0.85rem;
  font-size: 0.8rem; font-weight: 600; color: #fff;
}
.product-tag svg { width: 14px; height: 14px; color: var(--red); }

.product-thumbs { display: flex; align-items: center; gap: 0.6rem; }
.product-thumbs-track { flex: 1; display: flex; gap: 0.6rem; overflow-x: auto; scrollbar-width: none; }
.product-thumbs-track::-webkit-scrollbar { display: none; }
.product-thumb { flex-shrink: 0; width: 84px; height: 56px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #0a0c12; opacity: 0.6; transition: opacity 0.2s, border-color 0.2s; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb:hover { opacity: 0.9; }
.product-thumb.active { opacity: 1; border-color: var(--red); }

/* ── Tabs ── */
.product-tabs { margin-top: 1.5rem; background: #0d1117; border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; overflow: hidden; }
.product-tabs-nav { display: flex; gap: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.07); padding: 0 1.5rem; overflow-x: auto; }
.product-tab-btn {
  background: none; border: none; padding: 1.1rem 0.25rem; margin-right: 1.75rem;
  font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.4);
  cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.product-tab-btn.active { color: #fff; border-color: var(--red); }
.product-tab-panel { display: none; padding: 1.5rem; }
.product-tab-panel.active { display: block; }

.feat-accordion-item { border-bottom: 1px solid rgba(255,255,255,0.06); }
.feat-accordion-item:last-child { border-bottom: none; }
.feat-accordion-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0.25rem; cursor: pointer; background: none; border: none; width: 100%; text-align: left; }
.feat-accordion-head-left { display: flex; align-items: center; gap: 0.7rem; font-size: 0.92rem; font-weight: 700; color: #fff; }
.feat-accordion-head-left svg { width: 17px; height: 17px; color: var(--red); flex-shrink: 0; }
.feat-accordion-head svg.chev { width: 16px; height: 16px; color: rgba(255,255,255,0.4); transition: transform 0.2s; flex-shrink: 0; }
.feat-accordion-item.open .chev { transform: rotate(180deg); }

/* max-height is set inline in JS to each item's real scrollHeight on toggle, so long feature lists never clip */
.feat-accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }

.feat-accordion-body p.feat-intro { margin: 0 0.25rem 0.75rem 2.35rem; font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.65); }
.feat-points { margin: 0 0.25rem 1.1rem 2.35rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.feat-points li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.83rem; line-height: 1.5; color: rgba(255,255,255,0.6); }
.feat-points li svg { width: 14px; height: 14px; margin-top: 0.15rem; color: rgba(74,222,128,0.8); flex-shrink: 0; }

.product-reqs { white-space: pre-line; font-size: 0.88rem; line-height: 1.8; color: rgba(255,255,255,0.6); }

/* ── Checkout sidebar ── */
.product-checkout {
  position: sticky; top: 100px;
  background: #0d1117; border: 1px solid rgba(255,255,255,0.08); border-radius: 18px;
  padding: 1.5rem;
}
.checkout-title { font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }

.tier-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; }
.tier-option {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: rgba(255,255,255,0.03); border: 1.5px solid rgba(255,255,255,0.09);
  border-radius: 10px; padding: 0.75rem 1rem; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.tier-option:hover { border-color: rgba(255,255,255,0.25); }
.tier-option.selected { border-color: var(--red); background: rgba(255,43,32,0.06); }
.tier-radio { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); flex-shrink: 0; position: relative; }
.tier-option.selected .tier-radio { border-color: var(--red); }
.tier-option.selected .tier-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--red); }
.tier-label-wrap { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; }
.tier-name { font-size: 0.86rem; font-weight: 700; color: #fff; }
.tier-per-day { font-size: 0.7rem; color: rgba(255,255,255,0.4); display: block; }
.tier-price-wrap { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.tier-price { font-size: 0.95rem; font-weight: 700; color: #fff; }
.tier-discount { font-size: 0.65rem; font-weight: 700; background: rgba(74,222,128,0.15); color: #4ade80; padding: 2px 6px; border-radius: 5px; }
.tier-best { position: absolute; top: -9px; right: 12px; background: var(--red); color: #fff; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; }

.checkout-trust { display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; color: rgba(255,255,255,0.4); margin-bottom: 1rem; }
.checkout-trust svg { width: 14px; height: 14px; color: #4ade80; flex-shrink: 0; }

.btn-checkout {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: linear-gradient(135deg, #ff2b20 0%, #8a0f0a 100%);
  color: #fff; border: none; border-radius: 10px; padding: 0.95rem; font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; transition: opacity 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(255,43,32,0.35);
}
.btn-checkout svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-checkout:hover { opacity: 0.9; }
.btn-checkout:disabled { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.3); box-shadow: none; cursor: not-allowed; }

.checkout-terms {
  display: flex; align-items: center; gap: 0.65rem;
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.02);
  font-size: 0.76rem; color: rgba(255,255,255,0.5); line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.checkout-terms:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.035); }
.checkout-terms input { position: absolute; opacity: 0; width: 0; height: 0; }

.checkout-terms-box {
  position: relative;
  flex-shrink: 0;
  width: 19px; height: 19px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.03);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.checkout-terms-box::after {
  content: '';
  position: absolute; left: 6px; top: 2px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}
.checkout-terms input:checked ~ .checkout-terms-box,
.checkout-terms-box.is-checked {
  border-color: var(--red);
  background: linear-gradient(135deg, #ff2b20 0%, #b3140a 100%);
}
.checkout-terms input:checked ~ .checkout-terms-box::after,
.checkout-terms-box.is-checked::after { transform: rotate(45deg) scale(1); }
.checkout-terms input:focus-visible ~ .checkout-terms-box { outline: 2px solid var(--red); outline-offset: 2px; }

.checkout-terms-text a { color: rgba(255,255,255,0.75); text-decoration: underline; text-underline-offset: 2px; }
.checkout-terms-text a:hover { color: var(--red); }

.checkout-terms.needs-attention {
  border-color: var(--red);
  background: rgba(255,43,32,0.07);
  animation: checkout-terms-shake 0.4s ease;
}
@keyframes checkout-terms-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

/* ── Related products ── */
.related-section { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem 5rem; }
@media (min-width: 640px)  { .related-section { padding: 0 2.5rem 5rem; } }
@media (min-width: 1024px) { .related-section { padding: 0 3.5rem 5rem; } }
.related-title { font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif; font-size: 1.4rem; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.6rem; }
.related-title svg { width: 20px; height: 20px; color: var(--red); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }

/* ══════════════════════════════════════════════════════════════════
   How It Works
   ══════════════════════════════════════════════════════════════════ */
.works-section {
  position: relative;
  overflow: hidden;
  background: #07090f;
  padding: 4rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
/* soft focal glow that draws the eye across the three steps */
.works-section::before {
  content: ''; position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
  width: 80%; max-width: 1100px; height: 320px;
  background: radial-gradient(ellipse at center, rgba(255,43,32,0.07), transparent 70%);
  pointer-events: none;
}
@media (min-width: 640px)  { .works-section { padding: 4rem 2.5rem; } }
@media (min-width: 1024px) { .works-section { padding: 5.5rem 3.5rem; } }

.works-header { position: relative; z-index: 1; text-align: center; max-width: 34rem; margin: 0 auto 3rem; }
.works-header .cat-eyebrow { justify-content: center; }
.works-title {
  font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 700; text-transform: uppercase; color: #fff;
}
.works-title .accent {
  background: linear-gradient(100deg, #ff6b5c 0%, #ff2b20 45%, #b3140a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.works-sub { margin-top: 0.85rem; color: rgba(255,255,255,0.5); font-size: 0.92rem; }

/* Cards and connectors are siblings in a 5-column grid (card, connector, card,
   connector, card) so the connector's position comes from grid layout itself
   instead of hand-calculated percentages that drift from the real column
   boundaries whenever the container width changes. */
.works-grid { position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; align-items: stretch; gap: 0 1.25rem; }
@media (max-width: 960px) { .works-grid { grid-template-columns: 1fr; max-width: 460px; gap: 1.5rem; } }

/* Clean directional connector: a soft line with a chevron centred on it,
   pointing to the next step. No moving parts to read as janky. */
.works-connector { position: relative; display: flex; align-items: center; justify-content: center; }
.works-connector::before,
.works-connector::after {
  content: ''; position: absolute; top: 50%; height: 1px;
  background: linear-gradient(90deg, rgba(255,43,32,0.35), rgba(255,43,32,0.05));
}
.works-connector::before { left: 0; right: 55%; }
.works-connector::after  { right: 0; left: 55%; background: linear-gradient(90deg, rgba(255,43,32,0.05), rgba(255,43,32,0.35)); }
.works-connector svg {
  position: relative; z-index: 1;
  width: 16px; height: 16px; color: var(--red);
  filter: drop-shadow(0 0 6px rgba(255,43,32,0.5));
  animation: works-nudge 2s ease-in-out infinite;
}
@keyframes works-nudge {
  0%, 100% { transform: translateX(-2px); opacity: 0.7; }
  50%      { transform: translateX(2px);  opacity: 1; }
}
@media (max-width: 960px) { .works-connector { display: none; } }

.works-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,43,32,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 1.75rem;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
/* lit top-accent bar — dim at rest, glows on hover */
.works-card::after {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  opacity: 0.4; transition: opacity 0.3s, left 0.3s, right 0.3s;
}
.works-card:hover {
  border-color: rgba(255,43,32,0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,43,32,0.1);
}
.works-card:hover::after { opacity: 1; left: 8%; right: 8%; }

.works-num {
  position: absolute; top: -0.6rem; right: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 4.5rem; font-weight: 800; line-height: 1;
  color: rgba(255,43,32,0.5);
  -webkit-text-stroke: 1.5px rgba(255,43,32,0.5);
  filter: drop-shadow(0 0 16px rgba(255,43,32,0.25));
  pointer-events: none;
  z-index: 0;
}
.works-step-head { position: relative; display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.works-step-head svg { width: 19px; height: 19px; color: var(--red); flex-shrink: 0; }
.works-step-title { position: relative; font-size: 1.1rem; font-weight: 700; color: #fff; }
.works-step-desc { position: relative; font-size: 0.83rem; line-height: 1.65; color: rgba(255,255,255,0.5); margin-bottom: 1.5rem; }

/* closing row: trust stat + conversion CTA */
.works-footer {
  position: relative; z-index: 1;
  max-width: 1300px; margin: 2.75rem auto 0;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 1.25rem 2rem;
}
.works-footer-stat {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.9rem; color: rgba(255,255,255,0.55);
}
.works-footer-stat svg { width: 17px; height: 17px; color: var(--red); flex-shrink: 0; }
.works-footer-stat b { color: #fff; font-weight: 700; }

/* -- shared mini mockup shell -- pinned to card bottom with a FIXED height
   so all three boxes are identical rectangles regardless of description length -- */
.works-mockup {
  position: relative;
  margin-top: auto;
  height: 285px;
  display: flex;
  flex-direction: column;
  background: #0a0c12; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 0.9rem; font-size: 0.72rem;
  overflow: hidden;
}
/* primary actions read best anchored to the box bottom */
.works-mockup .mock-buy-btn,
.works-mockup .mock-actions { margin-top: auto; }

/* Mockup 1: product + tier picker */
.mock-product-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.mock-avatar { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #ff4b3d, #8a0f0a); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; color: #fff; flex-shrink: 0; }
.mock-product-name { font-size: 0.8rem; font-weight: 700; color: #fff; }
.mock-product-meta { font-size: 0.64rem; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 0.4rem; margin-top: 2px; }
.mock-badge-undetected { color: #4ade80; display: inline-flex; align-items: center; gap: 4px; }
.mock-badge-undetected::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #4ade80; }

.mock-tier-list { display: flex; flex-direction: column; gap: 0.4rem; }
.mock-tier { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.6rem; border-radius: 8px; border: 1.5px solid rgba(255,255,255,0.08); transition: border-color 0.2s, background 0.2s; }
.mock-tier.is-selected { border-color: var(--red); background: rgba(255,43,32,0.07); }
.mock-tier-left { display: flex; align-items: center; gap: 0.5rem; }
.mock-tier-radio { position: relative; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); flex-shrink: 0; }
.mock-tier.is-selected .mock-tier-radio { border-color: var(--red); }
.mock-tier.is-selected .mock-tier-radio::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--red); }
.mock-tier-name { color: #fff; font-weight: 600; }
.mock-tier-price { color: #fff; font-weight: 700; }
.mock-tier-badge { font-size: 0.55rem; font-weight: 800; background: var(--red); color: #fff; padding: 1px 5px; border-radius: 4px; text-transform: uppercase; margin-right: 0.4rem; }

/* Mockup 2: checkout */
.mock-summary { display: flex; justify-content: space-between; color: rgba(255,255,255,0.55); margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.mock-summary b { color: #fff; }
.mock-pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.75rem; }
.mock-pay-option { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; border: 1.5px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 0.6rem; text-align: center; color: rgba(255,255,255,0.55); transition: border-color 0.2s, color 0.2s, background 0.2s; }
.mock-pay-option.is-selected { border-color: var(--red); color: #fff; background: rgba(255,43,32,0.07); }
.mock-pay-option svg { width: 16px; height: 16px; }
.mock-buy-btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; background: linear-gradient(135deg, #ff2b20, #8a0f0a); color: #fff; padding: 0.6rem; border-radius: 8px; font-weight: 700; box-shadow: 0 4px 16px rgba(255,43,32,0.3); }
.mock-buy-btn svg { width: 13px; height: 13px; }

/* Mockup 3: activation */
.mock-active-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.mock-active-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6rem; font-weight: 700; color: #4ade80; background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.3); padding: 3px 8px; border-radius: 100px; }
.mock-active-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #4ade80; }
.mock-key { font-family: 'Courier New', monospace; font-size: 0.64rem; color: #ff9188; background: rgba(255,43,32,0.06); border: 1px dashed rgba(255,43,32,0.3); border-radius: 6px; padding: 0.5rem 0.6rem; margin-bottom: 0.6rem; word-break: break-all; letter-spacing: 0.02em; }
.mock-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.6rem; }
.mock-date-box { border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0.5rem 0.6rem; }
.mock-date-label { font-size: 0.58rem; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.mock-date-value { font-size: 0.68rem; color: #fff; font-weight: 700; }
.mock-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.mock-action-btn { display: flex; align-items: center; justify-content: center; gap: 0.35rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 0.5rem; color: rgba(255,255,255,0.65); font-weight: 600; }
.mock-action-btn svg { width: 13px; height: 13px; }

/* -- window-chrome titlebar: makes each mockup read as a tiny live app -- */
.mock-titlebar {
  display: flex; align-items: center; gap: 5px;
  padding-bottom: 0.65rem; margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mock-titlebar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.1); }
.mock-titlebar span:first-child { background: rgba(255,43,32,0.55); }
.mock-titlebar b {
  margin-left: auto;
  font-family: 'Courier New', monospace;
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.28);
}

/* -- live-demo cursor: position is driven by JS measuring the real target
   elements, so it always lands exactly on them — no hand-tuned keyframe
   percentages that drift when the layout changes. -- */
.mock-cursor {
  position: absolute; top: 72%; left: 82%; z-index: 5; width: 14px; height: 14px;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
  pointer-events: none;
  transition:
    top  0.85s cubic-bezier(0.45, 0, 0.25, 1),
    left 0.85s cubic-bezier(0.45, 0, 0.25, 1),
    opacity 0.4s ease;
}
.mock-cursor.is-active { opacity: 1; }
.mock-cursor svg { display: block; width: 100%; height: 100%; }
.mock-click-ring {
  position: absolute; top: -5px; left: -5px; width: 22px; height: 22px;
  border: 2px solid var(--red); border-radius: 50%;
  opacity: 0; pointer-events: none;
}
.mock-cursor.is-clicking .mock-click-ring { animation: click-pulse 0.5s ease-out; }
@keyframes click-pulse {
  0%   { opacity: 1; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* -- interaction feedback the demo runner toggles -- */
.mock-buy-btn, .mock-action-btn { transition: transform 0.15s, filter 0.15s; }
.mock-buy-btn.is-pressed, .mock-action-btn.is-pressed { transform: scale(0.95); filter: brightness(1.3); }
.mock-key { transition: box-shadow 0.3s, color 0.3s; }
.mock-key.is-flash { box-shadow: 0 0 16px rgba(255,43,32,0.45); color: #fff; }

@media (max-width: 960px) { .mock-cursor { display: none; } }

/* ══════════════════════════════════════════════════════════════════
   About Us section
   ══════════════════════════════════════════════════════════════════ */
.about-section {
  position: relative;
  overflow: hidden;
  background: #07090f;
  padding: 5rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
@media (min-width: 640px)  { .about-section { padding: 6rem 2.5rem; } }
@media (min-width: 1024px) { .about-section { padding: 7rem 3.5rem; } }

.about-watermark {
  position: absolute;
  top: 50%; left: -0.05em;
  transform: translateY(-50%);
  font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif;
  font-size: clamp(10rem, 32vw, 26rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,43,32,0.08);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.about-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }

.about-head { margin-bottom: 2.5rem; }
.about-title {
  font-family: 'FSP DEMO - PODIUM Sharp 4.11', 'Inter', sans-serif;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 700; text-transform: uppercase; color: #fff; line-height: 1.05;
}
.about-title .accent {
  background: linear-gradient(100deg, #ff6b5c 0%, #ff2b20 45%, #b3140a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.about-lead {
  position: relative;
  max-width: 46rem;
  margin: 0 0 3.5rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--red);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}

/* ── Floating 3D brand icons — a small, deliberately-aligned cluster ── */
.about-icons { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
@media (max-width: 1100px) { .about-icons { display: none; } }

.about-icon { position: absolute; animation: about-icon-float ease-in-out infinite; will-change: transform; }
.about-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Cascading diagonal, all anchored to the same right-hand column so they
   read as one composed group instead of scattered clutter. */
.about-icon--5 {
  width: 84px; height: 71px; top: 4%; right: 40%; opacity: 0.55;
  filter: blur(2px) drop-shadow(0 0 24px rgba(255,43,32,0.35));
  animation-duration: 6.8s; animation-delay: -3.1s;
}
/* Centerpiece hero icon — bigger, centered, sharp (unblurred), with a
   sparkle-particle halo and a periodic shine sweep. Every other icon in
   the cluster is blurred so this one reads as the clear focal point. */
.about-icon-hero {
  position: absolute;
  top: 11%; right: 15%;
  width: 300px; height: 241px;
  z-index: 1;
}
.about-icon--hero {
  position: absolute; inset: 0;
  filter: drop-shadow(0 0 55px rgba(255,43,32,0.6));
  animation-duration: 6s;
  /* Mask the whole box (img + shine together) to the logo's own silhouette,
     so the shine overlay is guaranteed to align pixel-for-pixel with the
     logo instead of relying on a second, separately-positioned mask. */
  -webkit-mask-image: url('about-icon-1.png');
  mask-image: url('about-icon-1.png');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.about-icon-shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.8) 50%, transparent 58%);
  background-size: 260% 260%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  animation: about-icon-shine-sweep 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes about-icon-shine-sweep {
  0%, 62%  { background-position: 0% 0%; }
  90%      { background-position: 100% 100%; }
  100%     { background-position: 100% 100%; }
}

.about-icon-particles { position: absolute; inset: -50px; pointer-events: none; }
.about-particle {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #ff6b5c;
  box-shadow: 0 0 10px 3px rgba(255,68,56,0.85);
  animation: about-particle-twinkle ease-in-out infinite;
}
.about-particle:nth-child(1) { top: 6%;  left: 2%;  animation-duration: 3.2s; animation-delay: 0s; }
.about-particle:nth-child(2) { top: 0%;  left: 68%; animation-duration: 2.6s; animation-delay: -0.6s; }
.about-particle:nth-child(3) { top: 38%; left: -6%; animation-duration: 3.6s; animation-delay: -1.4s; }
.about-particle:nth-child(4) { top: 58%; left: 96%; animation-duration: 2.9s; animation-delay: -2.1s; }
.about-particle:nth-child(5) { top: 88%; left: 30%; animation-duration: 3.4s; animation-delay: -0.9s; }
.about-particle:nth-child(6) { top: 18%; left: 88%; animation-duration: 2.8s; animation-delay: -1.8s; }
.about-particle:nth-child(7) { top: 78%; left: 6%;  animation-duration: 3.1s; animation-delay: -2.6s; }

@keyframes about-particle-twinkle {
  0%, 100% { opacity: 0;   transform: translateY(0) scale(0.5); }
  50%      { opacity: 1;   transform: translateY(-14px) scale(1); }
}

.about-icon--3 {
  width: 190px; height: 161px; top: 40%; right: 24%;
  filter: blur(2px) drop-shadow(0 0 44px rgba(255,43,32,0.5));
  animation-duration: 5.5s; animation-delay: -1.2s;
}
.about-icon--2 {
  width: 88px; height: 79px; top: 32%; right: 0%; opacity: 0.65;
  filter: blur(2px) drop-shadow(0 0 26px rgba(255,43,32,0.35));
  animation-duration: 7.5s; animation-delay: -2.4s;
}

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

.about-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.09);
}
@media (max-width: 900px) { .about-specs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .about-specs { grid-template-columns: 1fr; } }

.about-spec {
  padding: 1.75rem 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid rgba(255,255,255,0.09);
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.about-specs > .about-spec:nth-child(4) { border-right: none; }
@media (max-width: 900px) { .about-specs > .about-spec:nth-child(2n) { border-right: none; } }
@media (max-width: 560px) { .about-specs > .about-spec { border-right: none !important; } }

.about-spec-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 6.5rem;
  margin-bottom: 1rem;
}
.about-spec-icon::before {
  content: '';
  position: absolute;
  inset: -0.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,43,32,0.22), rgba(255,43,32,0.06) 55%, transparent 75%);
  filter: blur(14px);
  z-index: 0;
}
.about-spec-icon img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255,43,32,0.2));
}
.about-spec h3 { font-size: 0.9rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
.about-spec p { font-size: 0.78rem; line-height: 1.6; color: rgba(255,255,255,0.4); max-width: 22rem; }

/* ── Legal pages: doc-with-sidebar layout ── */
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-size: 0.78rem; margin-bottom: 0.9rem; }
.breadcrumb-link { color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.2s ease; }
.breadcrumb-link:hover { color: var(--red); }
.breadcrumb-sep { color: rgba(255,255,255,0.25); }
.breadcrumb-current { color: rgba(255,255,255,0.7); font-weight: 600; }

.legal-topbar {
  position: relative;
  padding: 6.5rem 1.5rem 2rem;
  background: #05070c;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 640px) { .legal-topbar { padding: 7.5rem 2.5rem 2.25rem; } }
@media (min-width: 1024px) { .legal-topbar { padding: 8rem 4rem 2.5rem; } }
.legal-topbar-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.legal-topbar-title { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.15rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.legal-topbar-title::before { content: ''; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.65rem; border-radius: 2px; background: var(--red); box-shadow: 0 0 12px rgba(255,43,32,0.7); vertical-align: middle; }
.legal-updated { font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.4); white-space: nowrap; }

.legal-page {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 7rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  background: #05070c;
}
@media (min-width: 640px) { .legal-page { padding: 3rem 2.5rem 8rem; } }
@media (min-width: 1024px) { .legal-page { padding: 3.5rem 4rem 9rem; grid-template-columns: 210px 1fr; gap: 3.5rem; align-items: start; } }

.legal-toc { display: none; }
@media (min-width: 1024px) {
  .legal-toc { display: block; position: sticky; top: 6.5rem; }
  .legal-toc-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 0.9rem; }
  .legal-toc-list { display: flex; flex-direction: column; gap: 0.1rem; border-left: 1px solid rgba(255,255,255,0.09); }
  .legal-toc-list a {
    padding: 0.4rem 0 0.4rem 0.9rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .legal-toc-list a:hover { color: rgba(255,255,255,0.8); border-left-color: rgba(255,43,32,0.4); }
}

.legal-doc { display: flex; flex-direction: column; gap: 2.1rem; max-width: 720px; }

.legal-note {
  display: flex;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--red);
  background: rgba(255,43,32,0.06);
  border-radius: 0 10px 10px 0;
}
.legal-note-icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1.3; }
.legal-note h2 { margin: 0 0 0.3rem; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--red); }
.legal-note p { margin: 0; font-size: 0.85rem; line-height: 1.65; color: rgba(255,255,255,0.65); }

.legal-doc section { scroll-margin-top: 6rem; }
.legal-doc section + section { padding-top: 2.1rem; border-top: 1px solid rgba(255,255,255,0.07); }

.legal-doc h2 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}
.legal-doc h2 .idx { font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 800; color: rgba(255,43,32,0.6); }
.legal-doc h3 { margin: 1.1rem 0 0.5rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.4); }
.legal-doc p { margin: 0 0 0.85rem; font-size: 0.87rem; line-height: 1.75; color: rgba(255,255,255,0.6); }
.legal-doc p:last-child { margin-bottom: 0; }
.legal-doc ul { margin: 0 0 0.85rem; padding-left: 1.1rem; font-size: 0.87rem; line-height: 1.75; color: rgba(255,255,255,0.6); }
.legal-doc ul:last-child { margin-bottom: 0; }
.legal-doc li { margin-bottom: 0.3rem; padding-left: 0.2rem; }
.legal-doc li::marker { color: var(--red); }
.legal-doc strong { color: #fff; }
.legal-doc a { color: var(--red); }

.legal-crosslink { margin-top: -0.5rem; padding: 0.9rem 1.1rem; font-size: 0.82rem; line-height: 1.6; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.03); border-radius: 10px; }
.legal-crosslink a { color: var(--red); }

/* ── Status page ── */
.status-topbar {
  position: relative;
  padding: 6.5rem 1.5rem 2rem;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255,43,32,0.09), transparent 65%), #05070c;
}
@media (min-width: 640px) { .status-topbar { padding: 7.5rem 2.5rem 2rem; } }
@media (min-width: 1024px) { .status-topbar { padding: 8rem 4rem 2rem; } }
.status-topbar-inner { max-width: 1240px; margin: 0 auto; text-align: center; }
.status-live { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 0.6rem; }
.status-live-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 10px #3ddc84; animation: footer-pulse 2.4s ease-in-out infinite; }
.status-topbar-title { margin: 0 0 0.5rem; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.status-topbar-desc { margin: 0 auto; max-width: 560px; font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.5); }

.status-shell { max-width: 1240px; margin: 0 auto; padding: 1.75rem 1.5rem 6rem; }
@media (min-width: 640px)  { .status-shell { padding: 2rem 2.5rem 6rem; } }
@media (min-width: 1024px) { .status-shell { padding: 2rem 4rem 7rem; } }

/* Overall status banner */
.status-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.5rem 1.75rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.status-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;
}
.status-banner--live::before  { background: radial-gradient(ellipse 60% 130% at 0% 50%, rgba(61,220,132,0.16), transparent 60%); }
.status-banner--update::before{ background: radial-gradient(ellipse 60% 130% at 0% 50%, rgba(242,184,78,0.16), transparent 60%); }
.status-banner--down::before  { background: radial-gradient(ellipse 60% 130% at 0% 50%, rgba(255,43,32,0.18), transparent 60%); }
.status-banner--idle::before  { background: radial-gradient(ellipse 60% 130% at 0% 50%, rgba(120,130,150,0.12), transparent 60%); }
.status-banner > * { position: relative; z-index: 1; }

.status-banner-beacon { position: relative; width: 2.75rem; height: 2.75rem; flex-shrink: 0; }
.status-beacon-core {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 0.85rem; height: 0.85rem; border-radius: 50%;
}
.status-beacon-ring {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 0.85rem; height: 0.85rem; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0;
  animation: status-beacon 2.4s ease-out infinite;
}
.status-beacon-ring--2 { animation-delay: 1.2s; }
@keyframes status-beacon {
  0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(3.2); }
}
.status-banner--live  .status-banner-beacon { color: #3ddc84; }
.status-banner--live  .status-beacon-core   { background: #3ddc84; box-shadow: 0 0 14px rgba(61,220,132,0.9); }
.status-banner--update .status-banner-beacon { color: #f2b84e; }
.status-banner--update .status-beacon-core   { background: #f2b84e; box-shadow: 0 0 14px rgba(242,184,78,0.9); }
.status-banner--down   .status-banner-beacon { color: var(--red); }
.status-banner--down   .status-beacon-core   { background: var(--red); box-shadow: 0 0 14px rgba(255,43,32,0.9); }
.status-banner--idle   .status-banner-beacon { color: #8892a6; }
.status-banner--idle   .status-beacon-core   { background: #8892a6; }
.status-banner--idle   .status-beacon-ring   { animation: none; }

.status-banner-text { flex: 1; min-width: 200px; }
.status-banner-text h2 { margin: 0 0 0.2rem; font-size: 1.2rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.status-banner-text p { margin: 0; font-size: 0.82rem; color: rgba(255,255,255,0.5); }

.status-banner-counts { display: flex; gap: 0.5rem; }
.status-count {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 4.25rem; padding: 0.6rem 0.75rem;
  border-radius: 12px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06);
}
.status-count-num { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.status-count-label { margin-top: 0.25rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.status-count--live  .status-count-num { color: #3ddc84; }
.status-count--update .status-count-num { color: #f2b84e; }
.status-count--down  .status-count-num { color: #ff5c4d; }

/* Filter chips */
.status-filters { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.75rem 0 1.25rem; }

/* Card grid */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.1rem;
}
@media (max-width: 420px) { .status-grid { grid-template-columns: 1fr; } }

.status-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, #0d1017, #0a0c11);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.status-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
}
.status-card[data-state="live"]::before   { background: linear-gradient(90deg, transparent, #3ddc84, transparent); }
.status-card[data-state="update"]::before { background: linear-gradient(90deg, transparent, #f2b84e, transparent); }
.status-card[data-state="mixed"]::before  { background: linear-gradient(90deg, transparent, #f2b84e, transparent); }
.status-card[data-state="down"]::before    { background: linear-gradient(90deg, transparent, var(--red), transparent); }
.status-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.16); box-shadow: 0 18px 40px -20px rgba(0,0,0,0.9); }

.status-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.status-card-name { display: flex; align-items: baseline; gap: 0.55rem; min-width: 0; }
.status-card-name h2 { margin: 0; font-size: 0.98rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-card-count { font-size: 0.72rem; color: rgba(255,255,255,0.35); flex-shrink: 0; }

.status-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 100px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  flex-shrink: 0;
}
.status-pill::before { content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%; }
.status-pill--live { color: #3ddc84; background: rgba(61,220,132,0.1); border: 1px solid rgba(61,220,132,0.3); }
.status-pill--live::before { background: #3ddc84; box-shadow: 0 0 6px #3ddc84; }
.status-pill--mixed { color: #f2b84e; background: rgba(242,184,78,0.1); border: 1px solid rgba(242,184,78,0.3); }
.status-pill--mixed::before { background: #f2b84e; box-shadow: 0 0 6px #f2b84e; }
.status-pill--update { color: #f2b84e; background: rgba(242,184,78,0.1); border: 1px solid rgba(242,184,78,0.3); }
.status-pill--update::before { background: #f2b84e; box-shadow: 0 0 6px #f2b84e; animation: footer-pulse 1.6s ease-in-out infinite; }
.status-pill--down { color: #ff7a6e; background: rgba(255,43,32,0.1); border: 1px solid rgba(255,43,32,0.3); }
.status-pill--down::before { background: var(--red); box-shadow: 0 0 6px var(--red); }

.status-stat-dot--live   { background: #3ddc84; box-shadow: 0 0 8px rgba(61,220,132,0.7); }
.status-stat-dot--update { background: #f2b84e; box-shadow: 0 0 8px rgba(242,184,78,0.7); }
.status-stat-dot--down   { background: var(--red); box-shadow: 0 0 8px rgba(255,43,32,0.7); }

.status-rows { display: flex; flex-direction: column; padding: 0.35rem 0.5rem; }
.status-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.75rem;
  border-radius: 10px;
  transition: background 0.2s ease;
}
.status-row:hover { background: rgba(255,255,255,0.03); }
.status-row-dot { flex-shrink: 0; width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.status-row-name { flex: 1; min-width: 0; font-size: 0.84rem; font-weight: 600; color: rgba(255,255,255,0.82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 560px) {
  .status-banner { padding: 1.25rem; }
  .status-banner-counts { width: 100%; }
  .status-count { flex: 1; }
}