/** Shopify CDN: Minification failed

Line 3224:0 Comments in CSS use "/* ... */" instead of "//"
Line 3271:8 Expected ":"

**/
:root {
  --black: #000000;
  --bg: #0a0a0a;
  --red: #e01818;
  --red-bright: #ff1f1f;
  --white: #ffffff;
  --grey: #b8b8b8;
}

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

html,
body {
  background: var(--black);
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* hide the default browser scrollbar (scrolling still works) */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE / old Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Chrome / Safari / Edge */
}

#root {
  width: 100%;
  min-height: 100vh;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  animation: navIn 0.8s ease 0.1s both;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

@keyframes navIn {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navbar.scrolled {
  background: rgba(8, 8, 8, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

/* ---------- Top utility bar ---------- */
.nav-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 56px;
  max-height: 40px;
  overflow: hidden;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #141414;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease,
    border-color 0.3s ease;
}
.navbar.scrolled .nav-topbar {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
}
.nav-topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-topbar-sep {
  color: var(--red);
}
.nav-topbar-ic {
  width: 17px;
  height: 17px;
  color: var(--red);
}
.nav-flag {
  display: inline-flex;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.nav-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Main bar ---------- */
.nav-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 56px;
  transition: padding 0.3s ease;
}
.navbar.scrolled .nav-main {
  padding: 8px 56px;
}

/* ---------- Logo ---------- */
.logo {
  display: flex;
  align-items: center;
  line-height: 1;
}
.logo-img {
  height: 48px;
  width: auto;
  display: block;
}
.logo-just {
  color: var(--white);
}
.logo-smash {
  color: var(--red);
}
.logo-in {
  color: var(--white);
  font-size: 12px;
  font-weight: 400;
  margin-left: 2px;
  letter-spacing: 1px;
}

/* ---------- Links ---------- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 44px;
}
.nav-links a {
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--white);
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px;
  height: 1.5px;
  width: 0;
  background: var(--red);
  transition: width 0.25s ease;
}
.nav-links a:hover {
  color: #fff;
}
.nav-links a:hover::after {
  width: 100%;
}

/* ---------- Right actions ---------- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ---------- Hamburger (mobile) ---------- */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-burger.open span:nth-child(2) {
  opacity: 0;
}
.nav-burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Mobile dropdown menu ---------- */
.nav-mobile {
  display: none;
  flex-direction: column;
  overflow: hidden;
  max-height: 0;
  background: #0a0a0a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transition: max-height 0.32s ease;
}
.nav-mobile.open {
  max-height: 380px;
}
.nav-mobile a,
.nav-mobile-cta {
  padding: 16px 24px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #d2d2d2;
  text-decoration: none;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-mobile-cta {
  background: var(--red);
  color: #fff;
  font-weight: 600;
  border: none;
  border-bottom: none;
  cursor: pointer;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  padding: 11px 24px;
  background: var(--red);
  border: 1.5px solid var(--red);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.nav-cta:hover {
  background: #b00f0f;
  border-color: #b00f0f;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(224, 24, 24, 0.3);
}

/* ---------- Cart ---------- */
.cart-btn {
  position: relative;
  color: var(--white);
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}
.cart-btn:hover {
  color: var(--red);
}
.cart-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #000;
}

@media (max-width: 900px) {
  .nav-topbar {
    padding: 7px 24px;
    font-size: 10.5px;
    gap: 12px;
  }
  .nav-main {
    padding: 10px 24px;
  }
  .navbar.scrolled .nav-main {
    padding: 7px 24px;
  }
  .nav-links {
    gap: 24px;
  }
  .nav-links a {
    font-size: 13px;
    letter-spacing: 1px;
  }
}

/* switch to hamburger menu on mobile */
@media (max-width: 768px) {
  .nav-links,
  .nav-cta {
    display: none;
  }
  .nav-burger {
    display: flex;
  }
  .nav-mobile {
    display: flex;
  }
  .nav-topbar-sep,
  .nav-topbar-item:last-child {
    display: none;
  }
}
/* Zuume Rough (commercial font — add the licensed file to src/assets/fonts/).
   Until the file is present, the headline falls back to Anton (free) below. */
/* Moho (commercial font — add the licensed file to src/assets/fonts/).
   Until the file is present, the headline falls back to Anton (free) below. */
@font-face {
  font-family: 'Moho';
  src: url('../assets/fonts/Moho-Bold.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* avoids mobile browser-chrome jump; falls back to 100vh */
  min-height: 720px;
  overflow: hidden;
  background: #050505;
}

/* ---------- Background art stage (emulates `cover`) ---------- */
/* The stage is sized to the rendered size of the background image so that any
   child positioned in % stays locked to a point inside the image, on every
   screen size. AR of Smash-bg.png = 1672 / 941 = 1.7768. */
/* Full-bleed scene — fills the whole hero (no blank areas) */
.hero-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, calc(100vh * 1.7768));
  height: max(100vh, calc(100vw / 1.7768));
  z-index: 1;
  pointer-events: none;
}

.hero-bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
}

/* ---------- Bat planted over the rock (positioned within the stage) ---------- */
.hero-bat {
  position: absolute;
  left: 51%;
  bottom: 14%;
  height: 37%;
  width: auto;
  transform: rotate(-44deg);
  transform-origin: bottom left;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.65));
  animation: heroBatIn 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both;
}

@keyframes heroBatIn {
  from {
    opacity: 0;
    transform: rotate(-44deg) translateY(40px);
  }
  to {
    opacity: 1;
    transform: rotate(-44deg) translateY(0);
  }
}

/* ---------- Foreground readability gradient ---------- */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.82) 30%, rgba(5, 5, 5, 0.3) 46%, rgba(5, 5, 5, 0) 64%),
    linear-gradient(to top, rgba(5, 5, 5, 0.8) 0%, rgba(5, 5, 5, 0) 30%);
}

/* ---------- Floating ashes / embers ---------- */
.hero-ashes {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.6;
}
.ash {
  position: absolute;
  bottom: -24px;
  width: var(--size);
  height: var(--size);
  animation: ashRise var(--dur) linear var(--delay) infinite;
}
.ash::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: ashSway var(--sway) ease-in-out infinite alternate;
}
.ash.ember::before {
  background: radial-gradient(circle, #ff8a4a 0%, #ff4d22 55%, rgba(224, 24, 24, 0) 100%);
  box-shadow: 0 0 var(--glow) rgba(255, 90, 40, 0.85);
}
.ash.fleck::before {
  background: rgba(180, 180, 185, 0.55);
}

@keyframes ashRise {
  0% {
    transform: translateY(0) scale(0.7);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  88% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(-104vh) scale(1.15);
    opacity: 0;
  }
}
@keyframes ashSway {
  from {
    transform: translateX(-9px);
  }
  to {
    transform: translateX(9px);
  }
}

/* ---------- Eyebrow (top-left) ---------- */
.hero-eyebrow {
  position: absolute;
  top: clamp(96px, 15vh, 140px);
  left: clamp(24px, 5vw, 72px);
  z-index: 10;
  animation: heroFadeUp 0.8s ease 0.7s both;
}
.hero-eyebrow span {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 3.5px;
  color: var(--red);
  text-transform: uppercase;
}
.eyebrow-line {
  display: block;
  width: 50px;
  height: 2px;
  margin-top: 11px;
  background: var(--red);
}

/* ---------- Foreground copy (left, vertically centered) ---------- */
.hero-content {
  position: absolute;
  left: clamp(48px, 12vw, 200px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40%;
  max-width: 560px;
  min-width: 300px;
  animation: heroFadeUp 0.9s ease 0.85s both;
}

.headline {
  font-family: 'Moho', 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(54px, 7.4vw, 120px);
  line-height: 0.86;
  letter-spacing: 0.5px;
  color: #cfcfcf;
  text-transform: uppercase;
  margin-bottom: 26px;
}

.headline-red {
  display: inline-block;
  margin-top: 0.18em;
  color: #b51616;
}

.subtext {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  color: #a6a6a6;
  max-width: 400px;
  margin-bottom: 42px;
}

/* ---------- Buttons ---------- */
.hero-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}

.btn {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 15px 28px;
  min-height: 48px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  touch-action: manipulation; /* removes 300ms tap delay */
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease,
    color 0.2s ease, transform 0.12s ease;
}

/* visible keyboard focus (a11y CRITICAL) */
.btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* subtle press feedback (scale-feedback) — no layout shift */
.btn:active {
  transform: scale(0.97);
}

.btn .arrow {
  font-size: 17px;
  transition: transform 0.2s ease;
}
.btn:hover .arrow {
  transform: translateX(4px);
}

.btn-red {
  background: var(--red);
  color: var(--white);
}
.btn-red:hover {
  background: var(--red-bright);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  padding-left: 20px;
}
.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.07);
}
.btn-ghost:hover .play-icon {
  border-color: var(--white);
}

.play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color 0.2s ease;
}
.play-icon svg {
  width: 12px;
  height: 12px;
  margin-left: 2px;
}

/* ---------- Rating (right, above feature bar) ---------- */
.hero-rating {
  position: absolute;
  right: clamp(24px, 5vw, 72px);
  bottom: clamp(150px, 22vh, 200px);
  z-index: 10;
  text-align: right;
  animation: heroFadeUp 0.9s ease 1.05s both;
}
.rating-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--red);
}
.stars svg {
  width: 14px;
  height: 14px;
}
.rating-score {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--white);
}
.rating-sub {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: #888;
  margin-top: 5px;
}

/* ---------- Bottom feature strip ---------- */
.hero-features {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 20px clamp(24px, 5vw, 72px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(8px);
}

.feature {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 26px;
  /* staggered entrance (stagger-sequence) */
  animation: heroFadeUp 0.7s ease both;
  animation-delay: calc(1s + var(--i, 0) * 0.08s);
}
.feature + .feature {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.feature:first-child {
  padding-left: 0;
}

.feature-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--red);
  opacity: 0.9;
}
.feature-icon svg {
  width: 27px;
  height: 27px;
}

.feature-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.8px;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.feature-desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.4;
  color: #9a9a9a;
}

/* ---------- Load animations ---------- */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* keep the vertically-centred block centred while it fades up */
.hero-content {
  animation-name: heroFadeUpCentered;
}
@keyframes heroFadeUpCentered {
  from {
    opacity: 0;
    transform: translateY(calc(-50% + 28px));
  }
  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero-content,
  .hero-rating,
  .hero-features,
  .feature,
  .hero-bat {
    animation: none;
  }
  .hero-ashes {
    display: none;
  }
  .btn:active {
    transform: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .feature {
    padding: 0 18px;
  }
  .feature-desc {
    font-size: 12px;
  }
}

@media (max-width: 1000px) {
  .hero-content {
    width: auto;
    max-width: 62%;
  }
}

@media (max-width: 900px) {
  .hero-rating {
    display: none;
  }
  .hero-features {
    flex-wrap: wrap;
    gap: 18px 0;
    padding: 20px 24px;
  }
  .feature {
    flex: 0 0 50%;
    padding: 0 18px;
  }
  .feature:nth-child(3) {
    border-left: none;
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  .hero-content {
    width: auto;
    max-width: 88%;
  }
  .hero-stage {
    left: 50%;
  }
  .hero-eyebrow {
    top: 92px;
  }
  .hero-features {
    display: none;
  }
}

@media (max-width: 560px) {
  .hero {
    min-height: 600px;
  }
  .hero-content {
    left: 22px;
    right: 22px;
    width: auto;
    max-width: none;
  }
  .subtext {
    font-size: 13px;
    line-height: 1.5;
    max-width: 210px;
    margin-bottom: 26px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
  }
  .hero-actions .btn {
    width: auto;
    flex: 0 0 auto;
    padding: 11px 18px;
    min-height: 42px;
    font-size: 11px;
    letter-spacing: 0.6px;
    gap: 8px;
  }
}
.everyday {
  background: #000;
  padding: 120px 40px;
  font-family: 'Poppins', sans-serif;
}

.ev-inner {
  max-width: 1140px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.ev-head {
  text-align: center;
  margin-bottom: 60px;
}
.ev-eyebrow {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.ev-title {
  font-size: 42px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.2px;
  margin-bottom: 16px;
}
.ev-sub {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: #9a9a9a;
  max-width: 580px;
  margin: 0 auto;
}

/* ---------- Spotlight ---------- */
.ev-stage {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 56px;
  margin-bottom: 28px;
}

.ev-stage-media {
  background: #fff;
  border-radius: 22px;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ev-stage-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 34px;
  animation: ev-fade 0.45s ease;
}
@keyframes ev-fade {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ev-stage-spec {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.ev-stage-name {
  font-size: 38px;
  font-weight: 400;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 16px;
}
.ev-stage-tag {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: #9c9c9c;
  margin-bottom: 26px;
  max-width: 440px;
}

.ev-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}
.ev-tags li {
  font-size: 12px;
  font-weight: 300;
  color: #d0d0d0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 7px 13px;
}

.ev-stage-foot {
  display: flex;
  align-items: center;
  gap: 30px;
}
.ev-price {
  display: flex;
  flex-direction: column;
}
.ev-price-label {
  font-size: 12px;
  font-weight: 300;
  color: #7c7c7c;
}
.ev-price-val {
  font-size: 26px;
  font-weight: 500;
  color: #fff;
}
.ev-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(135deg, #e8201f, #b00f0f);
  border-radius: 10px;
  padding: 14px 26px;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ev-btn svg {
  width: 17px;
  height: 17px;
}
.ev-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(224, 24, 24, 0.3);
}
.ev-btn-choose {
  background: #2a2a2a;
  color: #9a9a9a;
  cursor: not-allowed;
}
.ev-btn-choose:hover {
  transform: none;
  box-shadow: none;
}

/* ---------- Colour selector ---------- */
.ev-colors {
  margin-bottom: 32px;
}
.ev-colors-label {
  display: block;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.4px;
  color: #9a9a9a;
  margin-bottom: 12px;
}
.ev-colors-label strong {
  font-weight: 500;
  color: #fff;
}
.ev-swatches {
  display: flex;
  gap: 12px;
}
.ev-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.ev-swatch-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.ev-swatch:hover {
  transform: scale(1.1);
}
.ev-swatch.active {
  border-color: var(--red);
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .everyday {
    padding: 80px 20px;
  }
  .ev-stage {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ev-stage-media {
    height: 320px;
  }
  .ev-title {
    font-size: 32px;
  }
}
.cz2 {
  background: #000;
  padding: 120px 40px;
  font-family: 'Poppins', sans-serif;
}

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

.cz2-inner {
  max-width: 1180px;
  margin: 0 auto;
  animation: cz2Reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .cz2-inner {
    animation: none;
  }
}

/* ---------- Two-column stage ---------- */
.cz2-stage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 48px;
}

/* ---------- Back button ---------- */
.cz2-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 9px 16px 9px 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: #cfcfcf;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.cz2-back svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.cz2-back:hover {
  color: #fff;
  border-color: var(--red);
  transform: translateX(-2px);
}
.cz2-back:hover svg {
  transform: translateX(-3px);
}

/* ---------- Header ---------- */
.cz2-head {
  text-align: center;
  margin-bottom: 48px;
}
.cz2-eyebrow {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.cz2-title {
  font-size: 42px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.2px;
  margin-bottom: 16px;
}
.cz2-sub {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: #9a9a9a;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Bat preview ---------- */
.cz2-preview {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  overflow: hidden;
  background: #fbfbfb;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.cz2-bat {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cz2-engrave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cz2-text {
  font-family: 'Poppins', sans-serif;
  font-size: 96px;
}

/* ---------- Controls ---------- */
.cz2-controls {
  max-width: 100%;
  margin: 0;
  text-align: left;
}

/* font selector */
.cz2-fonts {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.cz2-font {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 76px;
  padding: 12px 8px 10px;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.cz2-font:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.25);
}
.cz2-font.active {
  border-color: var(--red);
  background: #141414;
}
.cz2-font-aa {
  font-size: 24px;
  line-height: 1;
  color: #fff;
}
.cz2-font-label {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: #8f8f8f;
}
.cz2-font.active .cz2-font-label {
  color: #fff;
}

/* finish selector */
.cz2-finishes {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.cz2-finish {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cz2-finish:hover {
  border-color: rgba(255, 255, 255, 0.25);
}
.cz2-finish.active {
  border-color: var(--red);
  background: #141414;
}
.cz2-finish-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cz2-finish-label {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #9a9a9a;
}
.cz2-finish.active .cz2-finish-label {
  color: #fff;
}
.cz2-label {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9a9a9a;
  margin-bottom: 14px;
}

/* bat colour swatches */
.cz2-colours {
  margin-bottom: 22px;
}
.cz2-colours .cz2-label {
  margin-bottom: 10px;
}
.cz2-colours .cz2-label strong {
  color: #fff;
  font-weight: 600;
  text-transform: none;
}
.cz2-swatches {
  display: flex;
  gap: 12px;
}
.cz2-swatch {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cz2-swatch:hover {
  transform: translateY(-2px);
}
.cz2-swatch.active {
  border-color: var(--red);
}
.cz2-swatch-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* engraving size slider */
.cz2-size {
  margin-bottom: 22px;
}
.cz2-size .cz2-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cz2-size-val {
  color: var(--red);
  font-weight: 500;
}
.cz2-size-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 50px;
  background: #2a2a2a;
  cursor: pointer;
}
.cz2-size-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.cz2-size-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid #fff;
  cursor: pointer;
}
.cz2-input-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cz2-input-wrap {
  position: relative;
  display: flex;
  width: 100%;
}
.cz2-input {
  flex: 1;
  min-width: 0;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 16px 70px 16px 18px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Hindi convert button inside the input */
.cz2-hindi-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 44px;
  padding: 0 10px;
  font-family: 'Mukta', 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--red);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.cz2-hindi-btn:hover:not(:disabled) {
  background: #b00f0f;
}
.cz2-hindi-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cz2-input::placeholder {
  color: #6a6a6a;
}
.cz2-input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(224, 24, 24, 0.15);
}
.cz2-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(135deg, #e8201f, #b00f0f);
  border-radius: 12px;
  padding: 16px 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cz2-btn svg {
  width: 17px;
  height: 17px;
  transition: transform 0.2s ease;
}
.cz2-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(224, 24, 24, 0.3);
}
.cz2-btn:hover svg {
  transform: translateX(3px);
}
.cz2-hint {
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 300;
  color: #7c7c7c;
}
.cz2-count {
  color: var(--red);
  font-weight: 400;
}

@media (max-width: 900px) {
  .cz2-stage {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cz2-preview {
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
  }
  .cz2-controls {
    max-width: 560px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .cz2 {
    padding: 80px 20px;
  }
  .cz2-title {
    font-size: 30px;
  }
}
.process {
  background: #000;
  padding: 120px 40px;
  font-family: 'Poppins', sans-serif;
}

.proc-inner {
  max-width: 1240px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.proc-head {
  text-align: center;
  margin-bottom: 70px;
}
.proc-eyebrow {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.proc-title {
  font-size: 42px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.2px;
  margin-bottom: 16px;
}
.proc-sub {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: #9a9a9a;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Step cards ---------- */
.proc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.proc-card {
  position: relative;
  background: linear-gradient(180deg, #0f0f0f 0%, #090909 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 34px 28px 30px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.proc-card:hover {
  transform: translateY(-8px);
  border-color: rgba(224, 24, 24, 0.45);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55);
}

/* big number watermark */
.proc-card-num {
  position: absolute;
  top: 4px;
  right: 18px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 78px;
  line-height: 1;
  color: rgba(224, 24, 24, 0.22);
  -webkit-text-stroke: 0;
  pointer-events: none;
  transition: color 0.3s ease;
}
.proc-card:hover .proc-card-num {
  color: rgba(224, 24, 24, 0.5);
}

/* red arrow connector between cards */
.proc-card:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 78px;
  right: -16px;
  width: 9px;
  height: 9px;
  border-top: 2px solid rgba(224, 24, 24, 0.55);
  border-right: 2px solid rgba(224, 24, 24, 0.55);
  transform: rotate(45deg);
  z-index: 3;
}

.proc-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  margin-bottom: 22px;
}
.proc-icon svg {
  width: 34px;
  height: 34px;
}

.proc-step-title {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 10px;
}
.proc-step-desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: #8f8f8f;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .proc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .proc-card:not(:last-child)::after {
    display: none;
  }
  .proc-title {
    font-size: 32px;
  }
}
@media (max-width: 520px) {
  .proc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .proc-card {
    padding: 18px 15px;
  }
  .proc-card-num {
    font-size: 46px;
    top: 8px;
    right: 12px;
  }
  .proc-icon {
    margin-bottom: 12px;
  }
  .proc-icon svg {
    width: 28px;
    height: 28px;
  }
  .proc-step-title {
    font-size: 15.5px;
    margin-bottom: 6px;
  }
  .proc-step-desc {
    font-size: 12px;
    line-height: 1.45;
  }
  .proc-title {
    font-size: 26px;
  }
  .proc-sub {
    font-size: 14px;
  }
}
.bento {
  background: #000;
  padding: 70px 40px 110px;
  font-family: 'Poppins', sans-serif;
}

.bento-grid {
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 240px);
  grid-template-areas:
    't1 t2 imgA'
    'imgB imgC imgA'
    'imgB t3 imgD';
  gap: 16px;
}

.b-tile {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.area-t1 { grid-area: t1; }
.area-t2 { grid-area: t2; }
.area-t3 { grid-area: t3; }
.area-imgA { grid-area: imgA; }
.area-imgB { grid-area: imgB; }
.area-imgC { grid-area: imgC; }
.area-imgD { grid-area: imgD; }

/* image tiles */
.b-img {
  background: #0b0b0b;
}
.b-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s ease;
}
.b-img:hover img {
  transform: scale(1.06);
}
.b-img img.pos-hand {
  object-position: center 55%;
}
/* interior shot: feature the bat + wheel band in the wide tile */
.area-imgD img {
  object-position: center 58%;
}
.b-img.contain img {
  object-fit: contain;
  padding: 16px;
}
.b-img.contain:hover img {
  transform: scale(1.04);
}

/* text tiles */
.t-red,
.t-cream {
  padding: clamp(30px, 3vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: filter 0.25s ease;
}
.t-red {
  background: linear-gradient(135deg, #e8201f 0%, #b00f0f 100%);
  color: #fff;
}
.t-cream {
  background: #ece4d6;
  color: #1c1c1c;
}
.t-red:hover,
.t-cream:hover {
  filter: brightness(1.06);
}
.t-red h3,
.t-cream h3 {
  font-weight: 500;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.18;
  margin-bottom: 14px;
}
.area-t1 h3 {
  font-size: clamp(28px, 2.6vw, 42px);
  font-weight: 600;
}
.t-red p {
  font-weight: 300;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.t-cream p {
  font-weight: 300;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.5;
  color: #5c5c5c;
}

/* responsive */
@media (max-width: 900px) {
  .bento {
    height: auto;
    padding: 40px 24px 70px;
  }
  /* 2-column bento with mixed sizes */
  .bento-grid {
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: 150px;
    gap: 12px;
    /* portrait bat photos (imgA/imgB) and the player (imgC) get tall
       tiles that match their orientation so they aren't over-cropped */
    grid-template-areas:
      't1 t1'
      'imgA imgB'
      'imgA imgB'
      'imgC t2'
      'imgC t3'
      'imgD imgD';
  }
  .t-red,
  .t-cream {
    padding: 22px;
  }
  .area-t1 h3 {
    font-size: 26px;
  }
  .t-red h3,
  .t-cream h3 {
    font-size: 19px;
    margin-bottom: 8px;
  }
  .t-red p,
  .t-cream p {
    font-size: 12.5px;
  }
  /* interior shot: keep the bat + wheel band centred in the wide tile */
  .area-imgD img {
    object-position: center 55%;
  }
  .area-imgC {
    background: #000;
  }
  .area-imgC img {
    object-fit: cover;
  }
  .b-img img.pos-hand {
    object-position: center 45%;
  }
}

@media (max-width: 420px) {
  .bento {
    padding: 30px 16px 60px;
  }
  .bento-grid {
    grid-auto-rows: 140px;
    gap: 10px;
  }
  .area-t1 h3 {
    font-size: 22px;
  }
  .t-red,
  .t-cream {
    padding: 16px;
  }
}
.marquee {
  background: var(--red);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding: 26px 0;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-track {
  display: inline-flex;
  align-items: center;
  animation: marquee-scroll 28s linear infinite;
  will-change: transform;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.mq-solid {
  color: #fff;
}
.mq-outline {
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.85);
}

.mq-star {
  margin: 0 32px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

@media (max-width: 600px) {
  .marquee-item {
    font-size: 22px;
  }
  .mq-star {
    margin: 0 20px;
  }
}
.testimonials {
  background: #000;
  padding: 120px 40px;
  font-family: 'Poppins', sans-serif;
}

.tst-inner {
  max-width: 1140px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.tst-head {
  text-align: center;
  margin-bottom: 56px;
}
.tst-eyebrow {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.tst-title {
  font-size: 42px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.2px;
  margin-bottom: 24px;
}
.tst-rating {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  background: #0b0b0b;
}
.tst-rating-num {
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}
.tst-rating-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.tst-rating-text {
  font-size: 12.5px;
  font-weight: 300;
  color: #8f8f8f;
}

.vt-stars {
  display: flex;
  gap: 3px;
  color: var(--red);
}
.vt-stars svg {
  width: 17px;
  height: 17px;
}
.tst-rating .vt-stars svg {
  width: 15px;
  height: 15px;
}

/* ---------- Big split box ---------- */
.vt-box {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  background: linear-gradient(135deg, #111111 0%, #0a0a0a 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 28px;
  overflow: hidden;
  min-height: 580px;
}

/* media side */
.vt-media {
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
}
.vt-media img,
.vt-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vt-video {
  /* shift the framing down so the lower part of the footage shows
     (container size stays exactly the same) */
  object-position: center 82%;
  cursor: pointer;
}
.vt-media img {
  animation: vt-fade 0.5s ease;
}
@keyframes vt-fade {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.vt-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.55) 100%);
}
.vt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(224, 24, 24, 0.45);
  transition: transform 0.2s ease, background 0.2s ease;
}
.vt-play::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(224, 24, 24, 0.5);
  animation: vt-pulse 2s ease-out infinite;
}
@keyframes vt-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.vt-play svg {
  width: 30px;
  height: 30px;
  margin-left: 4px;
}
.vt-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}
.vt-media-tag {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 400;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  padding: 8px 14px;
}
.vt-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
}

/* content side */
.vt-content {
  position: relative;
  padding: 52px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vt-quote-mark {
  position: absolute;
  top: 24px;
  right: 40px;
  font-family: 'Poppins', sans-serif;
  font-size: 130px;
  line-height: 1;
  color: rgba(224, 24, 24, 0.12);
  pointer-events: none;
}
.vt-content .vt-stars {
  margin-bottom: 22px;
}
.vt-quote {
  position: relative;
  z-index: 1;
  font-size: 23px;
  font-weight: 300;
  line-height: 1.55;
  color: #eaeaea;
  margin-bottom: 34px;
}
.vt-person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}
.vt-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(224, 24, 24, 0.5);
}
.vt-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}
.vt-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
}
.vt-verified svg {
  width: 10px;
  height: 10px;
}
.vt-role {
  font-size: 13px;
  font-weight: 300;
  color: #8f8f8f;
  margin-top: 2px;
}

/* slider (arrows flank the box, outside) */
.vt-slider {
  display: flex;
  align-items: center;
  gap: 22px;
}
.vt-slider .vt-box {
  flex: 1;
  min-width: 0;
}
.vt-arrow {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #0c0c0c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.vt-arrow svg {
  width: 22px;
  height: 22px;
}
.vt-arrow:hover {
  border-color: var(--red);
  background: rgba(224, 24, 24, 0.16);
  color: var(--red);
  transform: scale(1.08);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .vt-box {
    grid-template-columns: 1fr;
  }
  .vt-media {
    height: 320px;
  }
  .vt-content {
    padding: 40px 30px;
  }
  .vt-quote {
    font-size: 20px;
  }
  .tst-title {
    font-size: 32px;
  }
  .vt-slider {
    gap: 10px;
  }
  .vt-arrow {
    width: 42px;
    height: 42px;
  }
  .vt-arrow svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 560px) {
  /* full-width card with the arrows moved below it */
  .vt-slider {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  .vt-slider .vt-box {
    order: -1;
    flex: 1 1 100%;
    min-height: 0;
  }
  .vt-arrow {
    order: 1;
    width: 46px;
    height: 46px;
  }
  .vt-media {
    height: 260px;
  }
  .vt-content {
    padding: 28px 24px 32px;
  }
  .vt-quote {
    font-size: 17px;
    line-height: 1.5;
  }
}
.faq {
  background: #000;
  padding: 120px 40px;
  font-family: 'Poppins', sans-serif;
}

.faq-inner {
  max-width: 820px;
  margin: 0 auto;
}

.faq-head {
  text-align: center;
  margin-bottom: 52px;
}
.faq-eyebrow {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.faq-title {
  font-size: 42px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.2px;
}

/* ---------- Accordion (borderless, centered) ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.faq-item:last-child {
  border-bottom: none;
}

.faq-q {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 54px;
  font-family: 'Poppins', sans-serif;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  transition: color 0.2s ease;
}
.faq-q:hover {
  color: #fff;
}
.faq-item.open .faq-q {
  color: #fff;
}

/* +/- toggle pinned to the right */
.faq-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
}
.faq-icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2.5px;
  background: var(--red);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq-icon i:nth-child(2) {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item.open .faq-icon i:nth-child(2) {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* answer */
.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}
.faq-item.open .faq-a-wrap {
  grid-template-rows: 1fr;
}
.faq-a {
  overflow: hidden;
  margin: 0 auto;
  max-width: 640px;
  padding: 0 20px;
  text-align: center;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.75;
  color: #a2a2a2;
}
.faq-item.open .faq-a {
  padding-bottom: 30px;
}

@media (max-width: 600px) {
  .faq {
    padding: 80px 20px;
  }
  .faq-title {
    font-size: 30px;
  }
  .faq-q {
    font-size: 18px;
    padding: 24px 40px;
  }
  .faq-a {
    font-size: 15px;
  }
}
.footer {
  background: #050505;
  border-top: 1px solid #181818;
  padding: 0 40px 28px;
  font-family: 'Poppins', sans-serif;
}

/* CTA banner */
.ftr-cta {
  position: relative;
  max-width: 1240px;
  margin: 64px auto 72px;
  border-radius: 26px;
  overflow: hidden;
  padding: 72px 60px;
  text-align: center;
  background:
    radial-gradient(70% 130% at 82% 0%, rgba(255, 110, 110, 0.5), transparent 55%),
    linear-gradient(120deg, #e01818 0%, #b00f0f 55%, #7c0a0a 100%);
  box-shadow: 0 30px 70px rgba(224, 24, 24, 0.2);
}

/* big ghost wordmark */
.ftr-cta-bgword {
  position: absolute;
  right: -18px;
  bottom: -52px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 210px;
  line-height: 0.8;
  letter-spacing: -6px;
  color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
  user-select: none;
}

/* corner slashes */
.ftr-cta-slashes {
  position: absolute;
  top: 28px;
  left: 32px;
  display: flex;
  gap: 5px;
}
.ftr-cta-slashes span {
  display: block;
  width: 5px;
  height: 20px;
  background: rgba(255, 255, 255, 0.7);
  transform: skewX(-22deg);
}

.ftr-cta-content {
  position: relative;
  z-index: 2;
}
.ftr-cta-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 14px;
}
.ftr-cta-title {
  font-size: 52px;
  font-weight: 600;
  line-height: 1.04;
  color: #fff;
  margin-bottom: 16px;
}
.ftr-cta-desc {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 520px;
  margin: 0 auto 34px;
}
.ftr-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #c11414;
  background: #fff;
  border-radius: 12px;
  padding: 17px 34px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ftr-cta-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}
.ftr-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
.ftr-cta-btn:hover svg {
  transform: translateX(4px);
}

/* Columns */
.ftr-cols {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 64px 0 56px;
}
.ftr-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
}
.ftr-logo-img {
  height: 130px;
  width: auto;
  display: block;
}
.ftr-logo-red {
  color: var(--red);
}
.ftr-logo-in {
  font-size: 12px;
  font-weight: 400;
  margin-left: 2px;
}
.ftr-tag {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: #8d8d8d;
  max-width: 320px;
  margin-bottom: 22px;
}
.ftr-socials {
  display: flex;
  gap: 12px;
}
.ftr-socials a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #262626;
  color: #b5b5b5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.ftr-socials a:hover {
  color: #fff;
  border-color: var(--red);
  background: rgba(224, 24, 24, 0.15);
}

.ftr-col h4 {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 18px;
}
.ftr-col ul {
  list-style: none;
}
.ftr-col li {
  margin-bottom: 12px;
}
.ftr-col a {
  font-size: 14px;
  font-weight: 300;
  color: #8d8d8d;
  transition: color 0.2s ease;
}
.ftr-col a:hover {
  color: #fff;
}

/* Bottom bar */
.ftr-bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 26px;
  border-top: 1px solid #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ftr-bottom p {
  font-size: 13px;
  font-weight: 300;
  color: #7a7a7a;
}
.ftr-legal {
  display: flex;
  gap: 26px;
}
.ftr-legal a {
  font-size: 13px;
  font-weight: 300;
  color: #7a7a7a;
  transition: color 0.2s ease;
}
.ftr-legal a:hover {
  color: #fff;
}

@media (max-width: 900px) {
  .ftr-cta {
    padding: 54px 26px;
    margin: 40px auto 56px;
  }
  .ftr-cta-title {
    font-size: 38px;
  }
  .ftr-cta-bgword {
    font-size: 140px;
  }
  .ftr-cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .ftr-brand {
    grid-column: 1 / -1;
  }
  .ftr-bottom {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }
}
.about {
  background: #000;
  min-height: 100vh;
  padding: 80px 40px 120px;
  font-family: 'Poppins', sans-serif;
}

.about-inner {
  max-width: 1080px;
  margin: 0 auto;
  animation: aboutReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

/* back button */
.about-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 44px;
  padding: 9px 16px 9px 12px;
  font-size: 13px;
  color: #cfcfcf;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.about-back svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.about-back:hover {
  color: #fff;
  border-color: var(--red);
  transform: translateX(-2px);
}
.about-back:hover svg {
  transform: translateX(-3px);
}

/* hero */
.about-hero {
  max-width: 760px;
  margin-bottom: 64px;
}
.about-eyebrow {
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}
.about-title {
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 300;
  line-height: 1.08;
  color: #fff;
  margin-bottom: 24px;
}
.about-title-red {
  color: var(--red);
  font-weight: 500;
}
.about-lead {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: #a6a6a6;
}

/* stats */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 36px 0;
  margin-bottom: 64px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.about-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.about-stat-value {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  color: #fff;
}
.about-stat-label {
  font-size: 13.5px;
  font-weight: 300;
  color: #8f8f8f;
}

/* mission */
.about-mission {
  max-width: 760px;
  margin-bottom: 72px;
}
.about-h2 {
  font-size: 26px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 18px;
}
.about-mission p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: #a6a6a6;
}

/* values */
.about-values-h {
  margin-bottom: 28px;
}
.about-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 80px;
}
.about-value {
  background: #0c0c0c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.about-value:hover {
  border-color: rgba(224, 24, 24, 0.4);
  transform: translateY(-3px);
}
.about-value-num {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--red);
  margin-bottom: 14px;
}
.about-value-title {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 10px;
}
.about-value-text {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.65;
  color: #9a9a9a;
}

@media (max-width: 760px) {
  .about-stats {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
  .about-values {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .about {
    padding: 60px 20px 90px;
  }
}
.policy {
  background: #000;
  min-height: 100vh;
  padding: 80px 40px 110px;
  font-family: 'Poppins', sans-serif;
}

.policy-inner {
  max-width: 820px;
  margin: 0 auto;
  animation: policyReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

/* back button */
.policy-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
  padding: 9px 16px 9px 12px;
  font-size: 13px;
  color: #cfcfcf;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.policy-back svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.policy-back:hover { color: #fff; border-color: var(--red); transform: translateX(-2px); }
.policy-back:hover svg { transform: translateX(-3px); }

/* header */
.policy-head {
  margin-bottom: 44px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.policy-eyebrow {
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.policy-title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 300;
  color: #fff;
  margin-bottom: 10px;
}
.policy-updated {
  font-size: 13px;
  color: #7c7c7c;
  margin-bottom: 18px;
}
.policy-lead {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: #a6a6a6;
  max-width: 640px;
}

/* sections */
.policy-section {
  margin-bottom: 34px;
}
.policy-h2 {
  font-size: 19px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 12px;
}
.policy-p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: #b0b0b0;
  margin-bottom: 12px;
}
.policy-p:last-child { margin-bottom: 0; }

/* agreement callout */
.policy-agree {
  margin: 44px 0 36px;
  padding: 22px 24px;
  background: rgba(224, 24, 24, 0.08);
  border: 1px solid rgba(224, 24, 24, 0.28);
  border-radius: 14px;
}
.policy-agree p {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.7;
  color: #e8e8e8;
}

/* cta */
.policy-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(135deg, #e8201f, #b00f0f);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.policy-cta svg { width: 17px; height: 17px; transition: transform 0.2s ease; }
.policy-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(224, 24, 24, 0.3); }
.policy-cta:hover svg { transform: translateX(3px); }

@media (max-width: 560px) {
  .policy { padding: 60px 20px 80px; }
  .policy-back { margin-bottom: 28px; }
}
.cm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  overflow-y: auto;
  padding: 24px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: cmFade 0.2s ease both;
}
@keyframes cmFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cm-modal {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 760px;
  background: #0c0c0c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  font-family: 'Poppins', sans-serif;
  animation: cmPop 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cmPop {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cfcfcf;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.cm-close svg { width: 17px; height: 17px; }
.cm-close:hover { color: #fff; background: rgba(224, 24, 24, 0.25); }

.cm-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}

/* form side */
.cm-formside {
  padding: 36px 32px;
}
.cm-eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.cm-title {
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 22px;
}
.cm-field { margin-bottom: 14px; }
.cm-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 300;
  color: #9a9a9a;
  margin-bottom: 7px;
}
.cm-field input,
.cm-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cm-field input::placeholder,
.cm-field textarea::placeholder { color: #6a6a6a; }
.cm-field input:focus,
.cm-field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(224, 24, 24, 0.15);
}

.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 4px;
  padding: 13px 26px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(135deg, #e8201f, #b00f0f);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cm-btn svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.cm-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(224, 24, 24, 0.3); }
.cm-btn:hover svg { transform: translateX(3px); }

/* success */
.cm-success { text-align: center; padding: 12px 0 6px; }
.cm-check {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #2bb24c, #169138);
  box-shadow: 0 12px 28px rgba(34, 170, 70, 0.35);
}
.cm-check svg { width: 30px; height: 30px; }
.cm-success h3 { font-size: 22px; font-weight: 500; color: #fff; margin-bottom: 10px; }
.cm-success p { font-size: 14.5px; font-weight: 300; color: #b5b5b5; margin-bottom: 22px; line-height: 1.6; }

/* info side */
.cm-infoside {
  padding: 36px 30px;
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(224, 24, 24, 0.16), transparent 60%),
    linear-gradient(160deg, #150808, #0a0505);
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}
.cm-info-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  margin-bottom: 6px;
}
.cm-info-tag {
  font-size: 13px;
  font-weight: 300;
  color: #a6a6a6;
  margin-bottom: 24px;
}
.cm-info-list { list-style: none; margin: 0 0 24px; padding: 0; }
.cm-info-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 300;
  color: #d2d2d2;
}
.cm-ic {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  background: rgba(224, 24, 24, 0.12);
  border: 1px solid rgba(224, 24, 24, 0.25);
  border-radius: 9px;
}
.cm-ic svg { width: 16px; height: 16px; }
.cm-info-list a { color: #d2d2d2; text-decoration: none; transition: color 0.2s ease; }
.cm-info-list a:hover { color: #fff; }

.cm-socials { display: flex; gap: 10px; }
.cm-socials a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cfcfcf;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cm-socials a svg { width: 18px; height: 18px; }
.cm-socials a:hover { color: #fff; border-color: var(--red); transform: translateY(-2px); }

@media (max-width: 640px) {
  .cm-grid { grid-template-columns: 1fr; }
  .cm-infoside { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .cm-formside { padding: 32px 24px 24px; }
}
// Shared store-policy content, used by the full Policy page and the popup.
export const POLICY_SECTIONS = [
  {
    title: '1. Intended Use',
    body: [
      'JUSTSMASH.IN designs, manufactures, and sells customized steel bats strictly for sports, training, practice, and recreational playing activities.',
      'Our products are intended solely for legitimate sporting use. They are not designed, marketed, or sold for any other purpose.',
    ],
  },
  {
    title: '2. Custom-Made Products',
    body: [
      'Every bat is built to order and personalised to your chosen colour, font, finish, and engraving. Because each piece is made specifically for you, it cannot be resold or restocked.',
      'Please review your customization carefully before completing payment — the bat is produced exactly as specified in your order.',
    ],
  },
  {
    title: '3. No Returns or Refunds',
    body: [
      'As all bats are custom-made and personally engraved, all sales are final. No returns, exchanges, or refunds will be accepted once the order has been delivered.',
      'Cancellations are only possible before the bat enters production. Once production has begun, the order cannot be cancelled or refunded.',
    ],
  },
  {
    title: '4. Limitation of Liability',
    body: [
      'Once an order has been delivered, the product becomes the sole responsibility of the buyer.',
      'JUSTSMASH.IN accepts no responsibility or liability for any use, misuse, handling, injury, damage, loss, or unlawful activity involving the product after delivery. The buyer assumes full responsibility for how the product is used and stored.',
    ],
  },
  {
    title: '5. Acceptable Use',
    body: [
      'By purchasing from JUSTSMASH.IN, you confirm that the product will be used only for lawful sporting and recreational purposes.',
      'Any use of the product outside of sports and playing activities is entirely at the buyer’s own risk and responsibility, and is not endorsed or supported by JUSTSMASH.IN.',
    ],
  },
  {
    title: '6. Damaged or Defective Items',
    body: [
      'If your order arrives damaged in transit or with a genuine manufacturing defect, contact us within 48 hours of delivery with clear photos or an unboxing video so we can review the issue.',
      'This applies only to verified transit damage or manufacturing faults and does not constitute a general right of return.',
    ],
  },
]

export default function PolicyContent() {
  return (
    <div className="policy-sections">
      {POLICY_SECTIONS.map((s) => (
        <div className="policy-section" key={s.title}>
          <h2 className="policy-h2">{s.title}</h2>
          {s.body.map((p, i) => (
            <p className="policy-p" key={i}>{p}</p>
          ))}
        </div>
      ))}
    </div>
  )
}