.page-products{
  --prod-card:var(--deep-2);
  --prod-glow:rgba(55,240,214,.16);
  background:var(--deep);
  color:var(--paper);
  font-family:var(--font-sans);
  line-height:1.7;
  overflow-x:clip;
}
.page-products h1,
.page-products h2,
.page-products h3{
  margin:0;
  line-height:1.28;
  letter-spacing:.02em;
}
.page-products p{margin:0;}
.page-products a{color:inherit;}
.page-products .crumbs a{color:var(--cyan-2);}
.page-products .crumbs span{color:var(--stone);}
.prod-crumb{padding-top:18px;padding-bottom:6px;font-size:13px;}

/* ---------- hero ---------- */
.prod-hero{
  position:relative;
  padding:18px 0 10px;
  background:
    radial-gradient(120% 90% at 6% 0%,rgba(55,240,214,.14),transparent 58%),
    radial-gradient(80% 70% at 96% 18%,rgba(43,168,201,.12),transparent 62%);
}
.prod-hero__grid{
  display:grid;
  gap:26px;
  align-items:start;
}
.prod-hero h1{
  margin-top:10px;
  font-size:clamp(28px,7.4vw,54px);
  font-weight:900;
  letter-spacing:.03em;
}
.prod-hero__lead{
  margin-top:16px;
  max-width:34em;
  color:rgba(242,239,230,.82);
  font-size:16px;
}
.prod-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.prod-hero__stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:28px 0 0;
}
.prod-stat{
  padding:14px 14px 12px;
  border:1px solid var(--line-soft);
  border-left:2px solid var(--cyan);
  background:rgba(14,42,64,.62);
}
.prod-stat dt{
  color:var(--stone);
  font-size:12px;
  letter-spacing:.06em;
}
.prod-stat dd{
  margin:4px 0 0;
  font-size:15px;
  color:var(--paper);
}
.prod-stat dd .mono{
  color:var(--cyan);
  font-size:24px;
  font-family:var(--font-mono);
  letter-spacing:.02em;
}
.prod-hero__card{
  position:relative;
  padding:24px 22px;
  background:linear-gradient(158deg,#0f2f47,#091f31 72%);
  border:1px solid var(--line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut-lg)),calc(100% - var(--cut-lg)) 100%,0 100%);
  box-shadow:0 22px 44px -28px rgba(0,0,0,.9);
}
.prod-hero__badge{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
.prod-hero__badge .mono{
  font-family:var(--font-mono);
  font-size:40px;
  line-height:1;
  color:var(--cyan);
  letter-spacing:.02em;
}
.prod-hero__badge span:last-child{
  font-size:12px;
  color:var(--sand);
  letter-spacing:.12em;
}
.prod-hero__facts{
  list-style:none;
  margin:16px 0 18px;
  padding:0;
  display:grid;
  gap:12px;
}
.prod-hero__facts li{
  display:grid;
  gap:2px;
  font-size:14px;
}
.prod-hero__facts span{
  color:var(--stone);
  font-size:12px;
  letter-spacing:.05em;
}
.prod-hero__facts strong{
  font-weight:600;
  color:var(--paper);
}
.prod-hero__facts .mono{color:var(--cyan);font-family:var(--font-mono);}

/* ---------- switch ---------- */
.prod-switch{
  padding:34px 0 8px;
}
.prod-switch__title{
  font-size:clamp(20px,4.6vw,26px);
  color:rgba(242,239,230,.9);
  margin-bottom:14px;
}
.prod-switch__bar{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:thin;
}
.prod-switch__btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  min-height:44px;
  padding:10px 16px;
  border:1px solid var(--line-soft);
  background:rgba(14,42,64,.55);
  color:var(--paper);
  text-decoration:none;
  font-size:14px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:border-color .24s var(--ease),background .24s var(--ease),color .24s var(--ease);
}
.prod-switch__btn .mono{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--cyan-2);
}
.prod-switch__btn:hover,
.prod-switch__btn:focus-visible{
  border-color:var(--cyan);
  background:rgba(55,240,214,.1);
}
.prod-switch__btn:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}
.prod-switch__btn--aux .mono{color:var(--sand);}
.prod-switch__trace{
  display:block;
  width:100%;
  height:auto;
  max-height:72px;
  margin-top:10px;
}

/* ---------- flow ---------- */
.prod-flow{padding:26px 0 46px;}
.prod-flow__title{
  font-size:clamp(24px,5.4vw,34px);
  margin-bottom:20px;
}
.prod-flow__grid{
  display:grid;
  gap:16px;
}
.prod-flow__card{
  position:relative;
  padding:22px 20px;
  background:var(--prod-card);
  border:1px solid var(--line-soft);
  border-top:2px solid var(--cyan-2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
}
.prod-flow__time{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--cyan);
  margin-bottom:8px;
}
.prod-flow__card h3{
  font-size:19px;
  margin-bottom:8px;
}
.prod-flow__card p{
  font-size:14px;
  color:rgba(242,239,230,.76);
}
.prod-flow__card .link-more{display:inline-block;margin-top:12px;font-size:13px;}
.prod-flow__card--mid{border-top-color:var(--sand);}
.prod-flow__card--mid .prod-flow__time{color:var(--sand);}
.prod-flow__card--low{border-top-color:var(--coral);}
.prod-flow__card--low .prod-flow__time{color:var(--coral);}

/* ---------- feature blocks ---------- */
.prod-feature{
  padding:46px 0;
  border-top:1px solid var(--line-soft);
}
.prod-feature--tint{
  background:linear-gradient(180deg,rgba(14,42,64,.7),rgba(7,26,43,.2));
}
.prod-feature__grid{
  display:grid;
  gap:24px;
  align-items:start;
}
.prod-feature__body h2{
  font-size:clamp(23px,5.2vw,34px);
  margin:8px 0 14px;
}
.prod-feature__body p{
  font-size:15px;
  color:rgba(242,239,230,.8);
  margin-bottom:12px;
}
.prod-feature__list{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:9px;
}
.prod-feature__list li{
  position:relative;
  padding-left:20px;
  font-size:14px;
  color:rgba(242,239,230,.9);
}
.prod-feature__list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.62em;
  width:7px;
  height:7px;
  background:var(--cyan);
  transform:rotate(45deg);
}
.prod-feature__meta{
  display:inline-block;
  margin-top:18px;
  padding:6px 12px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--cyan);
  background:rgba(55,240,214,.1);
  border-left:2px solid var(--cyan);
}
.prod-feature__steps{
  list-style:none;
  margin:16px 0;
  padding:0;
  display:grid;
  gap:12px;
  counter-reset:none;
}
.prod-feature__steps li{
  display:grid;
  grid-template-columns:30px 1fr;
  gap:10px;
  align-items:start;
  font-size:14px;
  color:rgba(242,239,230,.88);
  padding:12px 14px;
  background:rgba(19,59,87,.5);
  border-left:2px solid var(--cyan-2);
}
.prod-feature__steps .mono{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--cyan);
}
.prod-feature__body .link-more{
  display:inline-block;
  margin-top:16px;
  font-size:14px;
  color:var(--cyan);
  border-bottom:1px solid rgba(55,240,214,.4);
}
.prod-figure{
  margin:0;
  border:1px solid var(--line);
  background:var(--deep-3);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
}
.prod-figure img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}
.page-products .prod-figure .figure__cap{
  padding:10px 14px;
  font-size:12px;
  color:var(--stone);
  border-top:1px solid var(--line-soft);
  background:rgba(7,26,43,.7);
}

/* ---------- versions (light band) ---------- */
.prod-versions{
  padding:52px 0;
  background:var(--paper);
  color:var(--deep);
}
.prod-versions .eyebrow{color:#1c6b73;}
.prod-versions__head h2{
  font-size:clamp(24px,5.4vw,34px);
  color:var(--deep);
  margin:8px 0 12px;
}
.prod-versions__head p{
  max-width:46em;
  font-size:15px;
  color:#3c4f5e;
}
.prod-versions .prod-figure{
  margin:26px 0 28px;
  border-color:rgba(7,26,43,.18);
  background:#dfdacb;
}
.page-products .prod-versions .figure__cap{
  color:#44586a;
  background:rgba(7,26,43,.05);
  border-top-color:rgba(7,26,43,.12);
}
.prod-ver__grid{
  display:grid;
  gap:14px;
}
.prod-ver__item{
  padding:16px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(7,26,43,.14);
  border-left:3px solid #2ba8c9;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
}
.prod-ver__item--now{
  border-left-color:var(--coral);
  background:rgba(255,255,255,.86);
}
.prod-ver__btn{
  display:flex;
  align-items:baseline;
  gap:8px;
  width:100%;
  padding:8px 10px;
  text-align:left;
  cursor:pointer;
  color:var(--deep);
  background:transparent;
  border:1px solid rgba(7,26,43,.16);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:border-color .24s var(--ease),box-shadow .24s var(--ease),background .24s var(--ease);
}
.prod-ver__btn .mono{
  font-family:var(--font-mono);
  font-size:18px;
  letter-spacing:.02em;
  color:#12405b;
}
.prod-ver__btn span:last-child{
  font-size:13px;
  color:#3c4f5e;
}
.prod-ver__btn[aria-pressed="true"]{
  border-color:var(--coral);
  background:#fff;
  box-shadow:0 0 0 2px rgba(255,107,74,.18);
}
.prod-ver__btn[aria-pressed="true"] .mono{color:var(--coral);}
.prod-ver__btn:focus-visible{
  outline:2px solid #0f8f86;
  outline-offset:2px;
}
.prod-ver__panel p{
  margin-top:10px;
  font-size:14px;
  color:#3c4f5e;
}

/* ---------- device spec ---------- */
.prod-spec{
  padding:50px 0;
  background:var(--deep);
}
.prod-spec__head h2{
  font-size:clamp(24px,5.4vw,34px);
  margin:8px 0 12px;
}
.prod-spec__head p{
  font-size:15px;
  color:rgba(242,239,230,.78);
  max-width:44em;
}
.prod-spec__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:22px 0 18px;
}
.prod-spec__chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:10px 14px;
  cursor:pointer;
  color:var(--paper);
  background:rgba(19,59,87,.6);
  border:1px solid var(--line-soft);
  font-size:13px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:border-color .24s var(--ease),background .24s var(--ease);
}
.prod-spec__chip .mono{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--cyan-2);
}
.prod-spec__chip[aria-pressed="true"]{
  border-color:var(--cyan);
  background:rgba(55,240,214,.14);
}
.prod-spec__chip[aria-pressed="true"] .mono{color:var(--cyan);}
.prod-spec__chip:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}
.prod-spec__grid{
  display:grid;
  gap:14px;
}
.prod-spec__card{
  padding:20px 18px;
  background:var(--prod-card);
  border:1px solid var(--line-soft);
  border-top:2px solid var(--cyan-2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
}
.prod-spec__card h3{
  font-size:18px;
  margin-bottom:8px;
}
.prod-spec__card p{
  font-size:14px;
  color:rgba(242,239,230,.78);
}
.prod-spec__k{
  margin-top:12px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--cyan);
}
.prod-spec__kpis{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:24px;
}
.prod-spec__kpi{
  padding:16px 14px;
  border:1px solid var(--line-soft);
  background:rgba(7,26,43,.55);
}
.prod-spec__kpi .mono{
  display:block;
  font-family:var(--font-mono);
  font-size:24px;
  line-height:1.2;
  color:var(--sand);
  letter-spacing:.01em;
}
.prod-spec__kpi p{
  margin-top:6px;
  font-size:12px;
  color:var(--stone);
}
.prod-spec__copy{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:26px;
  padding:18px;
  border:1px dashed var(--line-soft);
  background:rgba(14,42,64,.5);
}
.prod-spec__copy p{
  font-size:14px;
  color:rgba(242,239,230,.8);
  flex:1 1 240px;
}
.prod-copy{
  min-height:44px;
  padding:10px 18px;
  cursor:pointer;
  font-family:var(--font-sans);
  font-size:13px;
  color:var(--deep);
  background:var(--cyan);
  border:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:background .24s var(--ease);
}
.prod-copy:hover{background:#63f6e1;}
.prod-copy:focus-visible{
  outline:2px solid var(--paper);
  outline-offset:2px;
}

/* ---------- fit + cta ---------- */
.prod-fit{
  padding:48px 0 56px;
  border-top:1px solid var(--line-soft);
}
.prod-fit h2{
  font-size:clamp(24px,5.4vw,34px);
  margin-bottom:20px;
}
.prod-fit__grid{
  display:grid;
  gap:16px;
}
.prod-fit__card{
  padding:22px 20px;
  background:linear-gradient(170deg,rgba(19,59,87,.8),rgba(14,42,64,.5));
  border:1px solid var(--line);
  border-bottom:3px solid var(--cyan-2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
}
.prod-fit__tag{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--sand);
}
.prod-fit__card h3{
  font-size:19px;
  margin:8px 0 8px;
}
.prod-fit__card p{
  font-size:14px;
  color:rgba(242,239,230,.78);
}
.prod-fit__card .link-more{
  display:inline-block;
  margin-top:12px;
  font-size:13px;
  color:var(--cyan);
}
.prod-cta{
  display:grid;
  gap:16px;
  margin-top:26px;
  padding:24px 22px;
  background:rgba(255,107,74,.08);
  border:1px solid rgba(255,107,74,.34);
  border-left:4px solid var(--coral);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut-lg)),calc(100% - var(--cut-lg)) 100%,0 100%);
}
.prod-cta h3{
  font-size:20px;
  margin-bottom:8px;
}
.prod-cta p{
  font-size:14px;
  color:rgba(242,239,230,.8);
}
.prod-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- responsive ---------- */
@media (min-width:640px){
  .prod-hero__stats{grid-template-columns:repeat(4,minmax(0,1fr));}
  .prod-flow__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .prod-spec__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .prod-ver__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .prod-spec__kpis{grid-template-columns:repeat(4,minmax(0,1fr));}
}

@media (min-width:900px){
  .prod-hero{padding-top:26px;}
  .prod-hero__grid{grid-template-columns:1.55fr .9fr;gap:44px;}
  .prod-hero__card{margin-top:12px;}
  .prod-switch{padding-top:44px;}
  .prod-flow{padding-bottom:58px;}
  .prod-flow__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
  .prod-flow__card--mid{margin-top:16px;}
  .prod-flow__card--low{margin-top:32px;}
  .prod-feature{padding:64px 0;}
  .prod-feature__grid{grid-template-columns:1.38fr 1fr;gap:48px;align-items:center;}
  .prod-feature--flip .prod-feature__fig{order:-1;}
  .prod-versions{padding:64px 0;}
  .prod-ver__grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .prod-ver__item:nth-child(2){margin-top:14px;}
  .prod-ver__item:nth-child(3){margin-top:28px;}
  .prod-ver__item:nth-child(4){margin-top:42px;}
  .prod-spec{padding:62px 0;}
  .prod-spec__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .prod-fit__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .prod-cta{grid-template-columns:1.5fr auto;align-items:center;padding:28px 30px;}
}

@media (min-width:1100px){
  .prod-feature__grid{gap:64px;}
  .prod-feature__body p{font-size:16px;}
  .prod-flow__card{padding:26px 24px;}
}

@media (prefers-reduced-motion:reduce){
  .page-products *{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
  }
}
<<<END>>>