html { scroll-behavior: smooth; }
  body { font-family: 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui; color:#0a0a0a; -webkit-font-smoothing: antialiased; }
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
  .scroll-snap-x { scroll-snap-type: x mandatory; }
  .snap-start { scroll-snap-align: start; }
  .grain {
    background-image:
      radial-gradient(1200px 600px at 110% -10%, rgba(145,195,0,0.10), transparent 60%),
      radial-gradient(900px 500px at -10% 110%, rgba(10,10,10,0.05), transparent 60%),
      linear-gradient(180deg, #ffffff 0%, #f6f7f5 100%);
  }
  .hairline { border-color: rgba(10,10,10,0.08); }
  .text-balance { text-wrap: balance; }
  .text-pretty { text-wrap: pretty; }

  /* Marquee */
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .marquee-track { animation: marquee 40s linear infinite; }

  .lift { transition: transform .25s ease, box-shadow .25s ease; }
  .lift:hover { transform: translateY(-2px); }
  button:focus-visible, a:focus-visible { outline: 2px solid #91c300; outline-offset: 2px; border-radius: 6px; }
  .nav-shadow { box-shadow: 0 1px 0 rgba(10,10,10,0.06); }

  .swatch { width: 18px; height: 18px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(10,10,10,0.12); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
  .swatch:hover { transform: scale(1.08); }
  .swatch.active { box-shadow: 0 0 0 2px #91c300, 0 0 0 4px rgba(145,195,0,0.2); }

  .grid-lines {
    background-image:
      linear-gradient(rgba(10,10,10,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(10,10,10,0.05) 1px, transparent 1px);
    background-size: 56px 56px;
  }
  .product-card:hover { box-shadow: 0 2px 0 rgba(10,10,10,0.04), 0 22px 48px -18px rgba(10,10,10,0.22); transform: translateY(-3px); }
  .product-card { transition: transform .25s ease, box-shadow .25s ease; }
  .spec-chip { background:#f6f7f5; border:1px solid rgba(10,10,10,0.06); }
  .stripe-lime { background-image: repeating-linear-gradient(45deg, #91c300 0 8px, #0a0a0a 8px 16px); }

  /* Image w/ gradient fallback (so empty unsplash still looks intentional) */
  .img-fallback-1 { background: linear-gradient(135deg, #1a1a1a 0%, #3a4250 100%); }
  .img-fallback-2 { background: linear-gradient(135deg, #91c300 0%, #6e9700 100%); }
  .img-fallback-3 { background: linear-gradient(135deg, #d1d5db 0%, #f4f5f6 100%); }
  .img-fallback-4 { background: linear-gradient(135deg, #2d3a2a 0%, #0a0a0a 100%); }

  /* Play button bloom */
  @keyframes pulse-lime {
    0%, 100% { box-shadow: 0 0 0 0 rgba(145,195,0,0.5); }
    50% { box-shadow: 0 0 0 14px rgba(145,195,0,0); }
  }
  .play-pulse { animation: pulse-lime 2.2s infinite; }

  /* Color dot swatch palettes */
  .col-onyx  { background:#0a0a0a; }
  .col-orange{ background:#f06a17; }
  .col-blue  { background:#1e63b8; }
  .col-camo  { background: repeating-linear-gradient(45deg, #5a6650 0 4px, #3d4636 4px 7px, #2a3122 7px 11px); }
  .col-lime  { background:#91c300; }
  .col-steel { background:#5a6770; }
  .col-sand  { background:#d8cdb6; }
  .col-white { background:#f4f5f6; }
  .col-red   { background:#d61f2a; }
  .col-forest{ background:#1f3a2a; }
</style>