/* Match the basic Tailwind CDN reset used by the supplied source HTML.
 * The animation and page-design CSS below is copied unchanged from that HTML. */
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4}
body,h1,h2,h3,h4,h5,h6,p,pre,blockquote,figure,hr,dl,dd{margin:0}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
ul,ol,menu{list-style:none;margin:0;padding:0}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}
button{-webkit-appearance:button;background-color:transparent;background-image:none}
a{color:inherit;text-decoration:inherit}
img,video,svg{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}

* {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      background-color: #f4f6fb;
      background-image: radial-gradient(#cbd5e1 1.15px, transparent 1.15px);
      background-size: 20px 20px;
      color: #0f172a;
      overflow-x: hidden;
    }

    /* Section Header Style (Matching Video 1:1) */
    .num-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, #1d6bf3 0%, #1557d8 100%);
      color: #ffffff;
      font-weight: 800;
      font-size: 0.85rem;
      line-height: 1;
      padding: 0.28rem 0.45rem;
      border-radius: 7px;
      box-shadow: 0 2px 6px rgba(29, 107, 243, 0.28);
      font-variant-numeric: tabular-nums;
    }
    .en-sub {
      color: #1d6bf3;
      font-weight: 700;
      font-size: 0.82rem;
      letter-spacing: -0.01em;
    }

    /* Stage Container Shadows */
    .stage-light {
      background: #ffffff;
      border-radius: 18px;
      border: 1px solid rgba(226, 232, 240, 0.95);
      box-shadow: 0 14px 34px -10px rgba(15, 23, 42, 0.07), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    }
    .stage-dark {
      background: #0b0e17;
      border-radius: 18px;
      border: 1px solid rgba(30, 41, 59, 0.9);
      box-shadow: 0 18px 38px -10px rgba(11, 14, 23, 0.35);
    }

    /* 01 Border Beam */
    @keyframes spinBeam {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .pro-beam-wrapper {
      position: relative;
      border-radius: 14px;
      padding: 2px;
      overflow: hidden;
      background: rgba(99, 102, 241, 0.22);
      box-shadow: 0 0 28px -4px rgba(124, 58, 237, 0.45);
    }
    .pro-beam-wrapper::before {
      content: '';
      position: absolute;
      inset: -130%;
      background: conic-gradient(from 0deg, transparent 0%, transparent 68%, #60a5fa 82%, #a855f7 93%, #ffffff 100%);
      animation: spinBeam var(--beam-duration, 3.2s) linear infinite;
    }
    .pro-beam-inner {
      position: relative;
      z-index: 1;
      border-radius: 12px;
      background: linear-gradient(180deg, #171836 0%, #101226 100%);
      height: 100%;
    }

    /* 02 Spotlight */
    .spotlight-grid {
      position: relative;
      background-image: radial-gradient(rgba(148, 163, 184, 0.14) 1px, transparent 1px);
      background-size: 12px 12px;
    }
    .spot-card {
      position: relative;
      background: rgba(17, 22, 37, 0.9);
      border: 1px solid rgba(51, 65, 85, 0.55);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color 0.2s;
    }
    .spot-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(
        170px circle at var(--sx, -999px) var(--sy, -999px),
        rgba(99, 102, 241, 0.34),
        rgba(56, 189, 248, 0.1) 50%,
        transparent 80%
      );
      pointer-events: none;
    }

    /* 03 3D Tilt Gold Card */
    .tilt-perspective {
      perspective: 900px;
    }
    .gold-vip-card {
      background: linear-gradient(135deg, #f6d365 0%, #d49b35 45%, #b57c1e 75%, #f0c75e 100%);
      border-radius: 14px;
      box-shadow: 0 22px 44px -10px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.65);
      transform-style: preserve-3d;
      transition: transform 0.14s ease-out, box-shadow 0.2s ease;
      position: relative;
      overflow: hidden;
    }
    .gold-vip-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(
        220px circle at var(--gx, 50%) var(--gy, 30%),
        rgba(255, 255, 255, 0.42),
        transparent 70%
      );
      pointer-events: none;
    }

    /* 04 Scroll Storytelling: 2026-11-04 requested edge-to-edge miniature phone. */
    .story-mini-device {
      box-sizing: border-box;
      padding: 3px;
      overflow: hidden;
      flex-shrink: 0;
      background: #0f172a;
    }
    .story-mini-device > #story-phone-screen {
      width: 100%;
      height: 100%;
      min-height: 0;
      margin: 0;
      border-radius: 17px;
    }
    .story-mini-home {
      width: 23px;
      height: 3px;
      min-height: 3px;
      flex-shrink: 0;
      margin: 1px auto 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.86);
    }
    /* 05 Scramble Text Glow */
    .scramble-glow-white {
      text-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
    }
    .scramble-glow-blue {
      color: #3b82f6;
      text-shadow: 0 0 22px rgba(59, 130, 246, 0.65);
    }

    /* 08 Typewriter Caret */
    @keyframes caretBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .tw-caret {
      display: inline-block;
      width: 2.5px;
      height: 1.05em;
      background: #2563eb;
      vertical-align: -2px;
      margin-left: 2px;
      animation: caretBlink 0.8s step-end infinite;
    }

    /* 09 Marquee Rows */
    @keyframes marqueeLeft {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @keyframes marqueeRight {
      0% { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }
    .marquee-row-left {
      display: flex;
      width: max-content;
      animation: marqueeLeft 18s linear infinite;
    }
    .marquee-row-right {
      display: flex;
      width: max-content;
      animation: marqueeRight 22s linear infinite;
    }
    .marquee-stage:hover .marquee-row-left,
    .marquee-stage:hover .marquee-row-right,
    .marquee-paused .marquee-row-left,
    .marquee-paused .marquee-row-right {
      animation-play-state: paused;
    }

    /* 10 Shimmer */
    @keyframes shimmerMove {
      0% { transform: translateX(-140%) skewX(-20deg); }
      100% { transform: translateX(240%) skewX(-20deg); }
    }
    .shimmer-surface {
      position: relative;
      overflow: hidden;
    }
    .shimmer-surface::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 48%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
      animation: shimmerMove 2.1s ease-in-out infinite;
    }
    .shimmer-cta::after {
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
    }

    /* 12 Scroll Reveal */
    .article-reveal-card {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .article-reveal-card.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    /* 15 Hover Lift — screenshot-based neutral, layered card elevation.
       Baseline has a faint contact shadow; hover casts a wider soft shadow below.
       Scoped to the reference effect, not the site's unrelated card navigation. */
    .outdoor-product-card {
      position: relative;
      z-index: 0;
      min-width: 0;
      transform: translate3d(0, 0, 0);
      border-color: rgba(226, 232, 240, 0.95);
      box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.045),
        0 7px 16px -9px rgba(15, 23, 42, 0.10);
      transition:
        transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.46s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.36s ease;
    }
    .outdoor-product-card:is(:hover, .active-lift, :focus-visible) {
      z-index: 1;
      transform: translate3d(0, -3px, 0);
      box-shadow:
        0 19px 36px -13px rgba(15, 23, 42, 0.26),
        0 9px 19px -10px rgba(15, 23, 42, 0.16),
        0 2px 6px rgba(15, 23, 42, 0.055);
      border-color: #e2e8f0;
    }
    .outdoor-product-card:focus-visible {
      outline: 2px solid #60a5fa;
      outline-offset: 3px;
    }

    /* Subtitle Pill from Video Bottom */
    .subtitle-pill {
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(226, 232, 240, 0.9);
      box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
      border-radius: 9999px;
    }

    /* Accessibility: prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
      *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

/* Independent effect index: this is a catalog, NOT a 390px phone detail page. */
.catalog-back{display:inline-flex;align-items:center;margin:0 auto 18px;padding:9px 14px;border:1px solid #dbe4f0;border-radius:999px;background:#fff;color:#334155;font-size:12px;font-weight:800;text-decoration:none;box-shadow:0 3px 10px #0f172a0c}
.catalog-back:hover{border-color:#93c5fd;color:#1d6bf3}
.catalog-intro{margin:12px auto 0;font-size:13px;line-height:1.6;color:#52647e;max-width:560px}
.catalog-count{margin:8px 0 0;color:#2563eb;font-size:12px;font-weight:800}
.catalog-results{max-width:1400px;margin:2px auto 10px;padding:0 24px;color:#64748b;font-size:12px;text-align:right}
.catalog-error{max-width:920px;margin:12px auto;padding:16px;border:1px solid #f59e0b;color:#9a3412;background:#fff7ed;border-radius:12px}
.catalog-collections{display:flex;flex-direction:column;gap:36px}
.catalog-section{min-width:0;scroll-margin-top:16px}
.catalog-section-heading{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 15px;padding-bottom:10px;border-bottom:1px solid #d4deed}
.catalog-section-heading h2{margin:0;font-size:21px;line-height:1.3;font-weight:900;letter-spacing:-.4px;color:#12223a}
.catalog-section-heading p{margin:0;color:#64748b;font-size:12px;line-height:1.6}
.catalog-section-heading .catalog-group-number{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#e6efff;color:#1d6bf3;font-size:12px;font-weight:900}
.catalog-section-heading .catalog-section-count{margin-left:auto;background:#fff;color:#54647c;padding:5px 10px;border:1px solid #d8e1ed;border-radius:99px;font-size:11px;font-weight:700}
.catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start}
.catalog-collections.is-large .catalog-grid{max-width:1100px;margin-inline:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.catalog-grid>.anim-card{min-width:0}
.catalog-memberships{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:0 0 9px;font-size:10px;font-weight:800}
.catalog-memberships span{background:#e8f1ff;color:#1759ac;border-radius:999px;padding:4px 7px;white-space:nowrap}
.catalog-memberships span.also{background:#f3edff;color:#7344b7}
.catalog-memberships a{color:#526176;text-decoration:underline;text-underline-offset:2px}
.catalog-memberships .catalog-detail-link{margin-left:auto;color:#1759ac;text-decoration:none;border:1px solid #cddcf0;border-radius:999px;padding:4px 8px;background:#fff}.catalog-detail-link:hover{text-decoration:underline;border-color:#93c5fd}
.catalog-crosslinks{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:13px;font-size:11px;color:#64748b}
.catalog-crosslinks a{display:inline-flex;background:#fff;border:1px solid #d9e2ed;color:#2c5a8d;border-radius:999px;padding:6px 9px;text-decoration:none;font-weight:700}
.catalog-crosslinks a:hover,.catalog-crosslinks a:focus-visible{border-color:#3b82f6;background:#eef5ff}
.cat-btn[aria-pressed="true"]{background:#dbeafe;color:#175dba;border-color:#93c5fd}
#cards-grid :focus-visible,.cat-btn:focus-visible,.catalog-back:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
[hidden]{display:none!important}
@media (max-width:1170px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:670px){.catalog-grid,.catalog-collections.is-large .catalog-grid{grid-template-columns:minmax(0,1fr);gap:20px}.catalog-collections{gap:26px}.catalog-results{text-align:left;padding:0 16px}.catalog-section-heading h2{font-size:18px}.catalog-section-heading .catalog-section-count{margin-left:0}.catalog-section-heading p{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.pro-beam-wrapper::before,.marquee-row-left,.marquee-row-right,.shimmer-surface::after,.cursor-blink{animation:none!important}html:focus-within{scroll-behavior:auto}}

.catalog-empty{margin:30px auto;padding:30px 25px;max-width:550px;text-align:center;border:1px dashed #c5d2e6;border-radius:16px;color:#52647e;background:#fff}
/* The original two-part filter toolbar must stack on narrow screens. */
@media(max-width:640px){#category-tabs{flex:1 1 100%;width:100%;min-width:0}#search-input{flex:0 1 320px;max-width:100%;min-width:0;margin-inline:auto}.anim-card{min-width:0}}

/* Reference toolbar/modal utilities absent from the shared compiled stage subset. */
.fixed {
  position: fixed;
}
.z-50 {
  z-index: 50;
}
.hidden {
  display: none;
}
.inline-flex {
  display: inline-flex;
}
.max-h-\[86vh\] {
  max-height: 86vh;
}
.min-h-screen {
  min-height: 100vh;
}
.max-w-\[1400px\] {
  max-width: 1400px;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-wrap {
  flex-wrap: wrap;
}
.overflow-x-auto {
  overflow-x: auto;
}
.bg-\[\#1d6bf3\] {
  background-color: #1d6bf3;
}
.text-\[\#1d6bf3\] {
  color: #1d6bf3;
}
.uppercase {
  text-transform: uppercase;
}
.opacity-0 {
  opacity: 0%;
}
.opacity-100 {
  opacity: 100%;
}
.focus\:outline-none {
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
}