.page-products{
  --page-clip: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --page-clip-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --page-hero-grad: radial-gradient(120% 80% at 85% 10%, rgba(0,255,136,0.12) 0%, transparent 60%),
                     radial-gradient(100% 60% at 5% 90%, rgba(0,210,255,0.08) 0%, transparent 55%);
  background: var(--c-deep);
  color: var(--c-white);
  font-family: var(--font-body);
}
.page-products *,
.page-products *::before,
.page-products *::after{
  box-sizing: border-box;
}
.page-products img{
  max-width: 100%;
  height: auto;
  display: block;
}
.page-products section[id]{
  scroll-margin-top: 80px;
}
.page-products .products-hero{
  position: relative;
  padding: 28px 16px 0;
  background: var(--page-hero-grad);
  overflow: hidden;
}
.page-products .products-hero__inner{
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  gap: 24px;
}
.page-products .products-hero__content{
  order: 1;
}
.page-products .products-hero__media{
  position: relative;
  order: 2;
}
.page-products .products-hero__breadcrumb{
  margin-bottom: 20px;
}
.page-products .products-hero__eyebrow{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--c-green);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-products .products-hero__eyebrow .section-number{
  color: var(--c-cyan);
  font-size: var(--text-lg);
}
.page-products .products-hero h1{
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 8vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.page-products .products-hero__lead{
  margin: 0 0 16px;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: var(--c-mist);
}
.page-products .products-hero__desc{
  max-width: 640px;
  margin: 0 0 24px;
  color: var(--c-mist);
  font-size: var(--text-base);
  line-height: 1.8;
}
.page-products .products-hero__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.page-products .products-hero__meta span{
  padding: 6px 12px;
  background: rgba(0,255,136,0.08);
  border: 1px solid rgba(0,255,136,0.3);
  color: var(--c-white);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  clip-path: var(--page-clip-sm);
}
.page-products .products-hero__media::after{
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--page-clip);
  border: 1px solid var(--c-line);
  pointer-events: none;
}
.page-products .products-hero__media img{
  width: 100%;
  height: auto;
  object-fit: cover;
  clip-path: var(--page-clip);
}
.page-products .products-hero__float{
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 16px;
  background: var(--c-green);
  color: var(--c-deep);
  font-family: var(--font-mono);
  box-shadow: 0 4px 16px rgba(0,255,136,0.25);
  clip-path: var(--page-clip-sm);
}
.page-products .products-hero__float strong{
  font-size: var(--text-2xl);
  line-height: 1;
}
.page-products .products-hero__float span{
  font-size: var(--text-xs);
  font-weight: 500;
}
.page-products .products-scroll{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  padding: 28px 16px 36px;
  max-width: var(--max-width);
  margin: 28px auto 0;
  scrollbar-width: thin;
  scrollbar-color: var(--c-green) var(--c-night);
}
.page-products .products-scroll::-webkit-scrollbar{
  height: 6px;
}
.page-products .products-scroll::-webkit-scrollbar-track{
  background: var(--c-night);
}
.page-products .products-scroll::-webkit-scrollbar-thumb{
  background: var(--c-green);
}
.page-products .products-scroll__card{
  position: relative;
  flex: 0 0 86%;
  max-width: 320px;
  scroll-snap-align: start;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  clip-path: var(--page-clip);
  background: linear-gradient(145deg, var(--c-night) 0%, #13263D 100%);
  transition: transform 0.2s ease;
}
.page-products .products-scroll__card::after{
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--page-clip);
  border: 1px solid var(--c-line);
  pointer-events: none;
  transition: border-color 0.2s ease;
}
.page-products .products-scroll__card:hover{
  transform: translateY(-4px);
}
.page-products .products-scroll__card:hover::after{
  border-color: var(--c-green);
}
.page-products .products-scroll__tag{
  min-height: 28px;
}
.page-products .products-scroll__title{
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.page-products .products-scroll__desc{
  margin: 0;
  color: var(--c-mist);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.page-products .products-scroll__stats{
  margin-top: auto;
  color: var(--c-mist);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.page-products .products-scroll__stats strong{
  display: block;
  color: var(--c-green);
  font-size: var(--text-xl);
}
.page-products .products-client,
.page-products .products-member,
.page-products .products-scenes{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 60px 16px;
}
.page-products .products-client__header,
.page-products .products-api__header,
.page-products .products-member__header,
.page-products .products-scenes__header{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
}
.page-products .products-client__header .section-number,
.page-products .products-api__header .section-number,
.page-products .products-member__header .section-number,
.page-products .products-scenes__header .section-number{
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--c-green);
}
.page-products .products-api__header .section-number{
  color: var(--c-cyan);
}
.page-products .products-member__header .section-number{
  color: var(--c-orange);
}
.page-products .products-client__header h2,
.page-products .products-api__header h2,
.page-products .products-member__header h2,
.page-products .products-scenes__header h2{
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.page-products .products-client__subtitle,
.page-products .products-api__subtitle,
.page-products .products-member__subtitle,
.page-products .products-scenes__subtitle{
  flex-basis: 100%;
  margin: 0;
  color: var(--c-mist);
  font-size: var(--text-sm);
}
.page-products .products-client__grid{
  display: grid;
  gap: 28px;
}
.page-products .products-client__lead,
.page-products .products-api__lead,
.page-products .products-member__lead{
  margin: 0 0 16px;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-white);
}
.page-products .products-client__list,
.page-products .products-api__list,
.page-products .products-member__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-products .products-client__list li,
.page-products .products-api__list li,
.page-products .products-member__list li{
  position: relative;
  padding-left: 22px;
  color: var(--c-mist);
  font-size: var(--text-base);
  line-height: 1.75;
}
.page-products .products-client__list li::before,
.page-products .products-api__list li::before,
.page-products .products-member__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 2px;
  background: var(--c-green);
}
.page-products .products-client__list li strong,
.page-products .products-api__list li strong,
.page-products .products-member__list li strong{
  color: var(--c-white);
  font-weight: 700;
}
.page-products .products-client__compat{
  position: relative;
  margin-top: 24px;
  padding: 20px;
  display: grid;
  gap: 10px;
  background: rgba(255,107,0,0.07);
  clip-path: var(--page-clip);
}
.page-products .products-client__compat::after{
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--page-clip);
  border: 1px solid rgba(255,107,0,0.4);
  pointer-events: none;
}
.page-products .products-client__compat p{
  margin: 0;
  color: var(--c-mist);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.page-products .products-client__actions,
.page-products .products-member__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.page-products .products-client__media img,
.page-products .products-api__media img,
.page-products .products-member__media img{
  width: 100%;
  height: auto;
  object-fit: cover;
  clip-path: var(--page-clip);
}
.page-products .products-api{
  background: linear-gradient(180deg, rgba(0,210,255,0.05) 0%, transparent 50%), var(--c-deep);
  padding: 60px 16px;
}
.page-products .products-api__wrap{
  max-width: var(--max-width);
  margin: 0 auto;
}
.page-products .products-api__grid{
  display: grid;
  gap: 28px;
}
.page-products .products-api__note{
  margin-top: 20px;
  padding: 14px 16px;
  background: rgba(0,210,255,0.06);
  border-left: 3px solid var(--c-cyan);
  color: var(--c-mist);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.page-products .products-api__code{
  position: relative;
  margin-top: 36px;
  background: var(--c-ink);
  clip-path: var(--page-clip);
}
.page-products .products-api__code::after{
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--page-clip);
  border: 1px solid var(--c-line);
  pointer-events: none;
}
.page-products .products-api__code-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-line);
}
.page-products .products-api__code-label{
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.page-products .products-api__code-tag{
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-mist);
}
.page-products .products-api__code pre{
  margin: 0;
  padding: 22px 20px 28px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--c-white);
  white-space: pre-wrap;
  word-break: break-word;
}
.page-products .products-member__grid{
  display: grid;
  gap: 28px;
}
.page-products .products-member__media{
  order: 2;
}
.page-products .products-member__content{
  order: 1;
}
.page-products .products-scenes__grid{
  display: grid;
  gap: 16px;
}
.page-products .products-scenes__card{
  position: relative;
  padding: 28px 24px;
  display: grid;
  gap: 12px;
  align-content: start;
  clip-path: var(--page-clip);
  background: linear-gradient(145deg, rgba(0,255,136,0.05) 0%, transparent 60%), var(--c-night);
  transition: transform 0.2s ease;
}
.page-products .products-scenes__card::after{
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--page-clip);
  border: 1px solid var(--c-line);
  pointer-events: none;
  transition: border-color 0.2s ease;
}
.page-products .products-scenes__card:hover{
  transform: translateY(-4px);
}
.page-products .products-scenes__card:hover::after{
  border-color: rgba(0,255,136,0.65);
}
.page-products .products-scenes__num{
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--c-green);
}
.page-products .products-scenes__card:nth-child(2) .products-scenes__num{
  color: var(--c-cyan);
}
.page-products .products-scenes__card:nth-child(3) .products-scenes__num{
  color: var(--c-orange);
}
.page-products .products-scenes__card h3{
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.page-products .products-scenes__card p{
  margin: 0;
  color: var(--c-mist);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.page-products .products-scenes__media{
  margin-top: 48px;
}
.page-products .products-scenes__media img{
  width: 100%;
  height: auto;
  object-fit: cover;
  clip-path: var(--page-clip);
}
@media (min-width: 880px){
  .page-products .products-hero{
    padding: 40px 24px 0;
  }
  .page-products .products-hero__inner{
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
  }
  .page-products .products-hero__meta{
    margin-bottom: 0;
  }
  .page-products .products-scroll{
    gap: 20px;
    padding: 40px 24px 48px;
    scroll-padding-left: 24px;
  }
  .page-products .products-scroll__card{
    flex-basis: 38%;
    max-width: 380px;
  }
  .page-products .products-client,
  .page-products .products-member,
  .page-products .products-scenes{
    padding: 80px 24px;
  }
  .page-products .products-api{
    padding: 80px 24px;
  }
  .page-products .products-client__grid{
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
  }
  .page-products .products-api__grid{
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  .page-products .products-member__grid{
    grid-template-columns: 0.95fr 1.05fr;
    gap: 48px;
    align-items: center;
  }
  .page-products .products-member__media{
    order: 1;
  }
  .page-products .products-member__content{
    order: 2;
  }
  .page-products .products-client__subtitle,
  .page-products .products-api__subtitle,
  .page-products .products-member__subtitle,
  .page-products .products-scenes__subtitle{
    flex-basis: auto;
    margin-left: auto;
  }
  .page-products .products-scenes__grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .page-products .products-scenes__media{
    margin-top: 56px;
  }
}