.page-products{
  --pd-block:clamp(52px,7vw,104px);
  --pd-gap:clamp(14px,2vw,22px);
  --pd-tl:clamp(16px,3vw,28px);
  background:var(--deep);
  color:var(--white);
  font-family:var(--font-body);
  overflow-x:clip;
}

.page-products .pd-h2{
  margin:.32em 0 0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.55rem,3.4vw,2.5rem);
  line-height:1.16;
  letter-spacing:.005em;
  color:var(--white);
}

.page-products .eyebrow{
  color:var(--cyan);
}

/* ---------- hero ---------- */
.page-products .pd-hero{
  position:relative;
  padding-block:clamp(18px,2.6vw,32px) 0;
  background:
    radial-gradient(120% 78% at 88% -12%,rgba(61,224,208,.16),transparent 62%),
    linear-gradient(178deg,var(--deep) 0%,var(--night) 92%);
  border-bottom:1px solid var(--line);
}
.page-products .pd-hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-22px;
  height:44px;
  background:linear-gradient(178deg,var(--night),var(--deep));
  clip-path:polygon(0 0,100% 0,100% 34%,0 100%);
  pointer-events:none;
}
.page-products .pd-hero .breadcrumb{
  margin:0 0 clamp(16px,2.4vw,26px);
}
.page-products .pd-hero__grid{
  display:grid;
  gap:clamp(24px,4vw,48px);
  padding-block:clamp(10px,2vw,26px) clamp(30px,4.4vw,54px);
  align-items:end;
}
.page-products .pd-hero__title{
  margin:.16em 0 0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.05rem,6.4vw,4rem);
  line-height:1.06;
  letter-spacing:-.012em;
  transform:skewX(-1.2deg);
  transform-origin:left bottom;
}
.page-products .pd-hero .lead{
  margin:clamp(14px,2vw,22px) 0 0;
  max-width:60ch;
  color:var(--soft);
  font-size:clamp(.98rem,1.4vw,1.1rem);
  line-height:1.78;
}
.page-products .pd-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:clamp(20px,3vw,30px);
}
.page-products .pd-hero__meta{
  display:grid;
  gap:14px;
}
.page-products .pd-hero__meta dl{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:0;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.page-products .pd-hero__meta dl>div{
  padding:clamp(12px,1.6vw,18px);
  background:rgba(7,23,38,.78);
}
.page-products .pd-hero__meta dt{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--soft);
}
.page-products .pd-hero__meta dd{
  margin:6px 0 0;
  font-family:var(--font-mono);
  font-size:clamp(1.05rem,2vw,1.4rem);
  font-weight:500;
  color:var(--white);
}
.page-products .pd-hero__meta dd .data-num{
  color:var(--cyan);
}
.page-products .pd-hero__note{
  margin:0;
  font-size:.88rem;
  line-height:1.7;
  color:var(--soft);
  border-left:2px solid var(--orange);
  padding-left:12px;
}

/* ---------- horizontal track ---------- */
.page-products .pd-track-wrap{
  position:relative;
  z-index:1;
}
.page-products .pd-track__hint{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--soft);
}
.page-products .pd-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:min(82vw,392px);
  gap:var(--pd-gap);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:clamp(16px,4vw,56px);
  padding:6px clamp(16px,4vw,56px) clamp(26px,4vw,44px);
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.page-products .pd-track:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:-2px;
}
.page-products .pd-card{
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:clamp(18px,2.2vw,24px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(158deg,rgba(28,59,82,.86),rgba(7,23,38,.94));
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.page-products .pd-card:hover,
.page-products .pd-card:focus-within{
  border-color:var(--line-strong);
  box-shadow:0 0 0 1px rgba(61,224,208,.24),0 22px 46px -32px rgba(61,224,208,.6);
}
.page-products .pd-card__num{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  color:var(--cyan);
}
.page-products .pd-card__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.14rem;
  line-height:1.3;
  color:var(--white);
}
.page-products .pd-card__img{
  display:block;
  width:100%;
  height:auto;
  max-height:230px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--line);
}
.page-products .pd-card__text{
  margin:0;
  font-size:.92rem;
  line-height:1.72;
  color:var(--soft);
}
.page-products .pd-card__facts{
  list-style:none;
  margin:auto 0 0;
  padding:10px 0 0;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--soft);
}
.page-products .pd-card__facts .data-num{
  color:var(--cyan);
  margin-right:3px;
}

/* ---------- entry ---------- */
.page-products .pd-entry{
  padding-block:var(--pd-block);
}
.page-products .pd-entry__grid{
  display:grid;
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
.page-products .pd-entry__text p{
  max-width:58ch;
  margin:clamp(12px,1.8vw,18px) 0 0;
  color:var(--soft);
  line-height:1.78;
}
.page-products .pd-points{
  list-style:none;
  margin:clamp(16px,2.4vw,24px) 0 0;
  padding:0;
  display:grid;
  gap:12px;
}
.page-products .pd-points li{
  position:relative;
  padding-left:22px;
  font-size:.95rem;
  line-height:1.72;
  color:var(--soft);
}
.page-products .pd-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:9px;
  height:9px;
  border:1px solid var(--cyan);
  border-radius:2px;
  transform:rotate(45deg);
}
.page-products .pd-points li .data-num{
  color:var(--white);
}
.page-products .pd-phone-wrap{
  margin:0;
  padding:clamp(16px,2.4vw,26px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    linear-gradient(rgba(61,224,208,.05) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,rgba(61,224,208,.05) 1px,transparent 1px) 0 0/32px 32px,
    rgba(14,42,66,.55);
}
.page-products .pd-phone{
  display:block;
  width:100%;
  max-width:250px;
  height:auto;
  margin:0 auto;
}
.page-products .pd-caption{
  margin:14px 0 0;
  font-size:.82rem;
  line-height:1.68;
  color:var(--soft);
  border-top:1px solid var(--line);
  padding-top:12px;
}

/* ---------- forms / tabs ---------- */
.page-products .pd-forms{
  padding-block:var(--pd-block);
  border-top:1px solid var(--line);
}
.page-products .pd-tabs{
  margin-top:clamp(24px,3.4vw,40px);
}
.page-products .pd-tabs__list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:clamp(14px,2.2vw,22px);
}
.page-products .pd-tabs .tabs__tab{
  appearance:none;
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(14,42,66,.72);
  color:var(--soft);
  font-family:var(--font-body);
  font-size:.94rem;
  padding:10px 22px;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.page-products .pd-tabs .tabs__tab:hover{
  border-color:var(--line-strong);
  color:var(--white);
}
.page-products .pd-tabs .tabs__tab[aria-selected="true"]{
  background:var(--cyan);
  border-color:var(--cyan);
  color:var(--deep);
  font-weight:700;
}
.page-products .pd-tabs .tabs__tab:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
}
.page-products .pd-panel{
  padding:clamp(18px,2.6vw,32px);
  border:1px solid var(--line);
  border-left:2px solid var(--cyan);
  border-radius:var(--radius);
  background:linear-gradient(120deg,rgba(28,59,82,.72),rgba(7,23,38,.66));
}
.page-products .pd-panel__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  line-height:1.3;
  color:var(--white);
}
.page-products .pd-panel p{
  margin:12px 0 0;
  max-width:60ch;
  font-size:.95rem;
  line-height:1.78;
  color:var(--soft);
}
.page-products .pd-tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0 0;
  padding:0;
}
.page-products .pd-forms__media{
  margin:clamp(26px,3.6vw,44px) 0 0;
}
.page-products .pd-forms__media img,
.page-products .pd-sub__media img,
.page-products .pd-sub__wallimg img,
.page-products .pd-start__band img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius);
  border:1px solid var(--line);
  object-fit:cover;
}

/* ---------- catalog ---------- */
.page-products .pd-catalog{
  padding-block:var(--pd-block);
  border-block:1px solid var(--line);
  background:
    linear-gradient(rgba(61,224,208,.06) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(61,224,208,.06) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(180deg,var(--deep),var(--night));
}
.page-products .pd-axes{
  list-style:none;
  margin:clamp(24px,3.4vw,38px) 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.page-products .pd-axes li{
  padding:clamp(16px,2.2vw,24px);
  background:rgba(7,23,38,.82);
}
.page-products .pd-axes__k{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--cyan);
}
.page-products .pd-axes li p{
  margin:8px 0 0;
  font-size:.94rem;
  line-height:1.74;
  color:var(--soft);
}
.page-products .pd-views{
  display:grid;
  gap:var(--pd-gap);
  margin-top:clamp(18px,2.6vw,28px);
}
.page-products .pd-view{
  padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(7,23,38,.72);
}
.page-products .pd-view--alt{
  border-color:rgba(255,107,44,.42);
  background:linear-gradient(150deg,rgba(255,107,44,.12),rgba(7,23,38,.86));
}
.page-products .pd-view__badge{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--soft);
}
.page-products .pd-view h3{
  margin:8px 0 0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.16rem;
  color:var(--white);
}
.page-products .pd-view p{
  margin:10px 0 0;
  font-size:.92rem;
  line-height:1.75;
  color:var(--soft);
}
.page-products .pd-arch-grid{
  display:grid;
  gap:var(--pd-gap);
  margin-top:clamp(18px,2.6vw,28px);
}
.page-products .pd-arch{
  padding:clamp(16px,2.2vw,22px);
  border-radius:var(--radius);
}
.page-products .pd-arch__k{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--cyan);
}
.page-products .pd-arch p{
  margin:10px 0 0;
  font-size:.92rem;
  line-height:1.74;
  color:var(--soft);
}
.page-products .pd-arch .data-num{
  color:var(--orange);
  font-size:1.05em;
}

/* ---------- subscribe ---------- */
.page-products .pd-sub{
  padding-block:var(--pd-block);
}
.page-products .pd-sub__grid{
  display:grid;
  gap:clamp(24px,4vw,48px);
  align-items:center;
}
.page-products .pd-sub__media{
  margin:0;
}
.page-products .pd-sub__text .pd-h2{
  margin-top:.34em;
}
.page-products .pd-sub__text>p{
  max-width:58ch;
  margin:clamp(12px,1.8vw,18px) 0 0;
  color:var(--soft);
  line-height:1.78;
}
.page-products .pd-sub__text .btn{
  margin-top:clamp(18px,2.6vw,26px);
}
.page-products .pd-sub__wall{
  display:grid;
  gap:clamp(16px,2.4vw,28px);
  margin-top:clamp(28px,4vw,52px);
  padding:clamp(16px,2.4vw,26px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(28,59,82,.6),rgba(7,23,38,.72));
}
.page-products .pd-sub__wallimg{
  margin:0;
}
.page-products .pd-sub__walltext h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  color:var(--white);
}
.page-products .pd-sub__walltext p{
  margin:10px 0 0;
  font-size:.94rem;
  line-height:1.78;
  color:var(--soft);
}

/* ---------- playback ---------- */
.page-products .pd-play{
  padding-block:var(--pd-block);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,42,66,.5),var(--deep));
}
.page-products .pd-quality{
  display:grid;
  gap:var(--pd-gap);
  margin-top:clamp(24px,3.4vw,38px);
}
.page-products .pd-quality__card{
  padding:clamp(16px,2.2vw,24px);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:radial-gradient(130% 130% at 18% 0%,rgba(61,224,208,.14),rgba(7,23,38,.92));
}
.page-products .pd-quality__card--low{
  border-color:rgba(255,107,44,.55);
  background:radial-gradient(130% 130% at 18% 0%,rgba(255,107,44,.18),rgba(7,23,38,.92));
}
.page-products .pd-quality__lv{
  display:inline-block;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  font-weight:500;
  color:var(--cyan);
  letter-spacing:.04em;
}
.page-products .pd-quality__card--low .pd-quality__lv{
  color:var(--orange-pale);
}
.page-products .pd-quality__card h3{
  margin:10px 0 0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  color:var(--white);
}
.page-products .pd-quality__card p{
  margin:8px 0 0;
  font-size:.9rem;
  line-height:1.72;
  color:var(--soft);
}
.page-products .pd-play__notes{
  list-style:none;
  margin:clamp(20px,3vw,32px) 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.page-products .pd-play__notes li{
  padding:14px clamp(14px,2vw,20px);
  background:rgba(7,23,38,.82);
  font-size:.92rem;
  line-height:1.7;
  color:var(--soft);
}
.page-products .pd-play__k{
  display:inline-block;
  min-width:78px;
  margin-right:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--cyan);
}
.page-products .pd-play__notes .data-num{
  color:var(--white);
}

/* ---------- timeline ---------- */
.page-products .pd-time{
  padding-block:var(--pd-block);
  border-top:1px solid var(--line);
}
.page-products .pd-time__grid{
  display:grid;
  gap:clamp(26px,4vw,52px);
}
.page-products .pd-time__intro p{
  margin:clamp(12px,1.8vw,18px) 0 0;
  max-width:52ch;
  color:var(--soft);
  line-height:1.78;
}
.page-products .pd-timeline{
  list-style:none;
  margin:0;
  padding:0 0 0 var(--pd-tl);
  border-left:1px solid var(--line);
  display:grid;
  gap:clamp(16px,2.4vw,26px);
}
.page-products .pd-timeline li{
  position:relative;
}
.page-products .pd-timeline li::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--pd-tl) - 5px);
  top:6px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 4px rgba(61,224,208,.16);
}
.page-products .pd-timeline__y{
  font-size:1.05rem;
  color:var(--orange);
  letter-spacing:.06em;
}
.page-products .pd-timeline p{
  margin:6px 0 0;
  font-size:.94rem;
  line-height:1.74;
  color:var(--soft);
}

/* ---------- start ---------- */
.page-products .pd-start{
  padding-block:var(--pd-block);
  border-top:1px solid var(--line);
}
.page-products .pd-start__cards{
  display:grid;
  gap:var(--pd-gap);
  margin-top:clamp(22px,3vw,34px);
}
.page-products .pd-start__card{
  display:block;
  padding:clamp(16px,2.2vw,24px);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--white);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.page-products .pd-start__card:hover,
.page-products .pd-start__card:focus-visible{
  border-color:var(--line-strong);
  box-shadow:0 0 0 1px rgba(61,224,208,.3),0 20px 42px -30px rgba(61,224,208,.7);
  transform:translateY(-2px);
}
.page-products .pd-start__k{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--cyan);
}
.page-products .pd-start__card strong{
  display:block;
  margin:8px 0 12px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.12rem;
  color:var(--white);
}
.page-products .pd-start__go{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--orange);
}
.page-products .pd-start__contact{
  margin:clamp(18px,2.6vw,26px) 0 0;
  max-width:64ch;
  font-size:.93rem;
  line-height:1.76;
  color:var(--soft);
}
.page-products .pd-start__contact a{
  color:var(--cyan);
  text-decoration:underline;
  text-underline-offset:3px;
}
.page-products .pd-start__band{
  margin:clamp(26px,4vw,44px) 0 0;
  clip-path:polygon(0 1.6%,100% 0,100% 98.4%,0 100%);
}

/* ---------- responsive ---------- */
@media (min-width:760px){
  .page-products .pd-quality{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-products .pd-views{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-products .pd-arch-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-products .pd-start__cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-products .pd-sub__wall{
    grid-template-columns:7fr 5fr;
    align-items:center;
  }
}

@media (min-width:900px){
  .page-products .pd-hero__grid{
    grid-template-columns:7fr 5fr;
  }
  .page-products .pd-entry__grid{
    grid-template-columns:7fr 5fr;
  }
  .page-products .pd-sub__grid{
    grid-template-columns:5fr 6fr;
  }
  .page-products .pd-time__grid{
    grid-template-columns:5fr 7fr;
  }
  .page-products .pd-axes{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-products .pd-play__notes{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:1100px){
  .page-products .pd-track{
    grid-auto-columns:min(30vw,380px);
  }
}

@media (min-width:1280px){
  .page-products .pd-track{
    padding-inline:max(clamp(16px,4vw,56px),calc((100vw - 1240px)/2));
  }
}

@media (max-width:599px){
  .page-products .pd-hero__title{
    transform:none;
  }
  .page-products .pd-card__img{
    max-height:200px;
  }
  .page-products .pd-play__k{
    display:block;
    margin:0 0 4px;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-products .pd-card,
  .page-products .pd-start__card,
  .page-products .pd-tabs .tabs__tab{
    transition:none;
  }
  .page-products .pd-start__card:hover,
  .page-products .pd-start__card:focus-visible{
    transform:none;
  }
}
<<<END>>>