.page-products{
  --prod-accent:#d4af37;
  --prod-line:rgba(197,168,94,.28);
  --prod-bg:#12271d;
  --prod-card:#1a3328;
  --prod-pad:clamp(1.25rem, 3vw, 2.5rem);
}

.page-products .breadcrumb{
  margin:0 var(--gutter);
  padding-top:1rem;
}

.page-products .prod-hero{
  position:relative;
  overflow:hidden;
  padding:2.5rem 0;
  background:
    linear-gradient(120deg, rgba(10,92,42,.42) 0%, rgba(10,92,42,.42) 42%, transparent 42.5%, transparent 100%),
    radial-gradient(120% 160% at 92% 8%, rgba(212,175,55,.08) 0%, transparent 52%),
    var(--color-bg);
  border-top:1px solid var(--prod-line);
  border-bottom:1px solid var(--prod-line);
}

.page-products .prod-hero::before{
  content:"";
  position:absolute;
  top:-2.5rem;
  right:-3rem;
  width:9rem;
  height:9rem;
  background:var(--color-gold);
  opacity:.08;
  transform:rotate(14deg);
  pointer-events:none;
}

.page-products .prod-hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}

.page-products .prod-hero-copy{
  padding-right:1rem;
}

.page-products .prod-hero-copy h1{
  margin:.5rem 0 1rem;
  font-family:var(--font-head);
  font-size:clamp(2rem, 1.2rem + 4vw, 3.2rem);
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--color-text);
}

.page-products .h1-en{
  display:block;
  font-family:var(--font-mono);
  font-size:.48em;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--color-muted);
  font-weight:400;
  margin-top:.55rem;
}

.page-products .prod-hero-desc{
  font-size:.9375rem;
  line-height:1.75;
  color:var(--color-muted);
  max-width:560px;
}

.page-products .prod-hero-stats{
  display:grid;
  grid-template-columns:1fr;
  gap:.75rem;
  margin-top:1.5rem;
  border-top:1px solid var(--prod-line);
  padding-top:1.25rem;
}

.page-products .prod-stat{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"label value" "label caption";
  column-gap:1rem;
  align-items:baseline;
  padding:.5rem 0;
  border-bottom:1px solid rgba(197,168,94,.12);
}

.page-products .prod-stat .index-label{
  grid-area:label;
  align-self:center;
}

.page-products .prod-stat strong{
  grid-area:value;
  font-family:var(--font-mono);
  font-size:1.15rem;
  color:var(--color-text);
}

.page-products .prod-stat small{
  grid-area:caption;
  color:var(--color-muted);
  font-size:.75rem;
}

.page-products .prod-hero-guide{
  border-left:2px solid var(--color-gold);
  padding-left:1.25rem;
  align-self:start;
}

.page-products .prod-guide-title{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--color-gold);
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:.9rem;
}

.page-products .prod-chapter-nav{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}

.page-products .prod-chapter-nav .chapter-link{
  display:flex;
  align-items:baseline;
  gap:.7rem;
  padding:.35rem 0;
  font-size:.9375rem;
  color:var(--color-muted);
  text-decoration:none;
  border-bottom:1px solid rgba(197,168,94,.14);
  transition:color .3s ease, border-color .3s ease;
}

.page-products .prod-chapter-nav .chapter-link:hover,
.page-products .prod-chapter-nav .chapter-link.is-active{
  color:var(--color-gold);
  border-bottom-color:var(--color-gold);
}

.page-products .prod-chapter-nav .chapter-code{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--color-gold);
}

.page-products .prod-head{
  position:relative;
  margin-bottom:1.75rem;
}

.page-products .prod-head::after{
  content:"";
  display:block;
  width:2.5rem;
  height:2px;
  background:linear-gradient(90deg, var(--color-gold), transparent);
  margin-top:1rem;
}

.page-products .prod-head .section-desc{
  max-width:640px;
  line-height:1.7;
}

.page-products .prod-wide-frame{
  position:relative;
  border:1px solid var(--prod-line);
  background:var(--prod-bg);
  margin-bottom:2rem;
  overflow:hidden;
}

.page-products .prod-wide-frame::after{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(212,175,55,.35);
  pointer-events:none;
}

.page-products .prod-wide-frame img,
.page-products .prod-version-frame img,
.page-products .prod-archive-frame img,
.page-products .prod-service-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.page-products .media-label{
  position:absolute;
  z-index:2;
  left:0;
  bottom:0;
  padding:.4rem .8rem;
  background:rgba(13,27,20,.82);
  border-top:1px solid var(--prod-line);
  border-right:1px solid var(--prod-line);
}

.page-products .prod-wide-frame .media-label{
  left:12px;
  bottom:12px;
}

.page-products .prod-wide-grid,
.page-products .prod-version-grid,
.page-products .prod-mobile-grid{
  gap:1.5rem;
}

.page-products .prod-wide-grid h3,
.page-products .prod-version-side h3,
.page-products .prod-mobile-copy h3{
  margin:.25rem 0 .6rem;
  font-family:var(--font-head);
  font-size:1.125rem;
  color:var(--color-text);
}

.page-products .prod-wide-grid p,
.page-products .prod-version-side p,
.page-products .prod-mobile-copy p{
  color:var(--color-muted);
  line-height:1.65;
  font-size:.9375rem;
}

.page-products .prod-checklist{
  margin:1rem 0;
  padding:0;
  list-style:none;
}

.page-products .prod-checklist li{
  position:relative;
  padding:.3rem 0 .3rem 1.4rem;
  font-size:.875rem;
  line-height:1.5;
  color:var(--color-text);
}

.page-products .prod-checklist li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65rem;
  width:7px;
  height:7px;
  background:var(--color-gold);
  transform:rotate(45deg);
}

.page-products .prod-entry-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1rem;
  align-items:start;
  padding:.85rem 0;
  border-bottom:1px solid rgba(197,168,94,.12);
}

.page-products .prod-entry-row:first-of-type{
  margin-top:.25rem;
}

.page-products .prod-entry-row strong{
  display:block;
  font-weight:600;
  color:var(--color-text);
  margin-bottom:.2rem;
}

.page-products .prod-entry-row p{
  margin:0;
  font-size:.8125rem;
}

.page-products .prod-scroll{
  margin-top:2rem;
  border-top:1px solid var(--prod-line);
  padding-top:1.25rem;
}

.page-products .prod-scroll-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:.75rem;
  font-size:.8125rem;
}

.page-products .prod-scroll-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(220px, 1fr);
  gap:.75rem;
  overflow-x:auto;
  padding-bottom:.5rem;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}

.page-products .prod-scroll-track::-webkit-scrollbar{
  display:none;
}

.page-products .prod-scroll-item{
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  padding:1rem 1.1rem;
  background:var(--color-card);
  border-left:2px solid var(--color-gold);
  text-decoration:none;
  color:var(--color-text);
  transition:background .3s ease;
}

.page-products .prod-scroll-item:hover{
  background:rgba(212,175,55,.12);
}

.page-products .prod-scroll-item .index-label{
  font-size:.75rem;
}

.page-products .prod-scroll-item strong{
  font-size:.9375rem;
}

.page-products .prod-scroll-item .text-muted{
  font-size:.8125rem;
}

.page-products .prod-version-frame{
  position:relative;
  border:1px solid var(--prod-line);
  background:var(--prod-bg);
  margin-bottom:2rem;
}

.page-products .prod-version-frame img{
  width:100%;
  height:auto;
  min-height:220px;
  object-fit:cover;
}

.page-products .prod-version-side .btn{
  margin-top:.5rem;
}

.page-products .prod-vtable-wrap{
  overflow-x:auto;
  border:1px solid var(--prod-line);
  background:rgba(13,27,20,.7);
}

.page-products .prod-version-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  background:transparent;
}

.page-products .prod-version-table th,
.page-products .prod-version-table td{
  padding:.8rem .85rem;
  border-bottom:1px solid rgba(197,168,94,.14);
  font-family:var(--font-mono);
  font-size:.8125rem;
  vertical-align:top;
  text-align:left;
}

.page-products .prod-version-table th{
  color:var(--color-gold);
  font-weight:600;
  background:rgba(212,175,55,.06);
  white-space:nowrap;
}

.page-products .prod-version-table tbody tr{
  transition:background .3s ease;
}

.page-products .prod-version-table tbody tr:hover{
  background:rgba(212,175,55,.1);
}

.page-products .prod-version-table td:last-child{
  color:var(--color-muted);
  font-size:.75rem;
  white-space:nowrap;
}

.page-products .panel{
  margin-top:1rem;
}

.page-products .panel details summary{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem 1rem;
  background:var(--color-card);
  border:1px solid var(--prod-line);
  list-style:none;
  font-weight:600;
  font-size:.875rem;
  color:var(--color-text);
  transition:background .3s ease;
}

.page-products .panel details summary:hover{
  background:rgba(212,175,55,.08);
}

.page-products .panel details summary::-webkit-details-marker{
  display:none;
}

.page-products .panel-body{
  padding:1rem;
  border:1px solid var(--prod-line);
  border-top:0;
  background:rgba(13,27,20,.55);
}

.page-products .panel-body h4{
  margin:1rem 0 .35rem;
  font-family:var(--font-head);
  font-size:1rem;
  color:var(--color-gold);
}

.page-products .panel-body h4:first-child{
  margin-top:0;
}

.page-products .panel-body p{
  margin:.25rem 0 .75rem;
  font-size:.875rem;
  line-height:1.6;
  color:var(--color-muted);
}

.page-products .prod-archive{
  display:grid;
  gap:1.5rem;
  margin-top:2rem;
  border-top:1px solid var(--prod-line);
  padding-top:1.5rem;
}

.page-products .prod-archive-frame{
  position:relative;
  border:1px solid var(--prod-line);
  background:var(--color-card);
  max-width:480px;
}

.page-products .prod-archive-frame::after{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(212,175,55,.2);
  pointer-events:none;
}

.page-products .prod-archive-frame img{
  aspect-ratio:4/3;
  object-fit:cover;
}

.page-products .prod-archive-note h3{
  font-family:var(--font-head);
  font-size:1.25rem;
  margin:.25rem 0 .6rem;
}

.page-products .prod-archive-note p{
  color:var(--color-muted);
  line-height:1.7;
  font-size:.9375rem;
  max-width:420px;
}

.page-products .prod-archive-note a,
.page-products .prod-note a{
  color:var(--color-gold);
  text-decoration:underline;
  text-underline-offset:2px;
}

.page-products .prod-mobile{
  position:relative;
}

.page-products .prod-mobile-visual{
  display:flex;
  justify-content:center;
}

.page-products .prod-phone{
  position:relative;
  max-width:320px;
  width:100%;
  padding:10px;
  background:#050a07;
  border:2px solid var(--prod-line);
  border-radius:36px 36px 10px 10px;
  box-shadow:0 24px 50px rgba(0,0,0,.5);
}

.page-products .prod-phone::before{
  content:"";
  display:block;
  width:88px;
  height:18px;
  margin:0 auto 10px;
  border-radius:999px;
  background:#0d1b14;
  border:1px solid rgba(197,168,94,.4);
}

.page-products .prod-phone img{
  display:block;
  width:100%;
  height:auto;
  border-radius:22px 22px 8px 8px;
}

.page-products .prod-phone .media-label{
  left:10px;
  bottom:10px;
}

.page-products .prod-mobile-copy h3{
  margin-top:1.6rem;
}

.page-products .prod-mobile-copy h3:first-child{
  margin-top:0;
}

.page-products .prod-mobile-cta{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.75rem;
}

.page-products .prod-service-frame{
  position:relative;
  border:1px solid var(--prod-line);
  background:var(--prod-bg);
  overflow:hidden;
}

.page-products .prod-service-frame::after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(212,175,55,.28);
  pointer-events:none;
}

.page-products .prod-service-frame img{
  aspect-ratio:2/1;
  object-fit:cover;
}

.page-products .prod-service-grid{
  gap:1.25rem;
  margin-top:2rem;
}

.page-products .prod-service-grid article{
  border-top:2px solid var(--color-gold);
  padding-top:1rem;
}

.page-products .prod-service-grid h3{
  margin:.5rem 0 .4rem;
  font-family:var(--font-head);
  font-size:1.05rem;
  color:var(--color-text);
}

.page-products .prod-service-grid p{
  color:var(--color-muted);
  line-height:1.6;
  font-size:.875rem;
}

.page-products .prod-kpis{
  display:grid;
  grid-template-columns:1fr;
  gap:.75rem;
  margin-top:2rem;
}

.page-products .prod-kpi{
  border:1px solid var(--prod-line);
  padding:.85rem 1rem;
  background:rgba(13,27,20,.65);
}

.page-products .prod-kpi strong{
  display:block;
  font-family:var(--font-mono);
  font-size:1.125rem;
  color:var(--color-gold);
  margin-bottom:.15rem;
}

.page-products .prod-kpi span{
  font-size:.8125rem;
  color:var(--color-muted);
}

.page-products .prod-note{
  margin-top:2rem;
  padding:1rem 1.1rem;
  border-left:2px solid var(--color-gold);
  background:rgba(13,27,20,.55);
}

.page-products .prod-note p{
  margin:0;
  line-height:1.6;
  font-size:.875rem;
}

.page-products .prod-links-grid{
  display:grid;
  gap:.75rem;
  margin-top:1.5rem;
}

.page-products .prod-links-grid .plate{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:1rem;
  padding:1rem 1.1rem;
  background:var(--color-card);
  border-left:2px solid var(--color-gold);
  text-decoration:none;
  color:var(--color-text);
  transition:transform .3s ease, background .3s ease;
}

.page-products .prod-links-grid .plate:hover{
  background:rgba(212,175,55,.1);
  transform:translateY(-2px);
}

.page-products .prod-links-grid .plate-index{
  grid-row:1 / 3;
  align-self:center;
}

.page-products .prod-links-grid .plate-title{
  font-weight:700;
  font-size:.9375rem;
  color:var(--color-text);
}

.page-products .prod-links-grid .plate-desc{
  font-size:.8125rem;
  color:var(--color-muted);
}

@media (min-width: 700px){
  .page-products .prod-hero-stats{
    grid-template-columns:repeat(3, 1fr);
    column-gap:1.5rem;
  }

  .page-products .prod-stat{
    display:flex;
    flex-direction:column;
    gap:.2rem;
    padding:.25rem 0;
  }

  .page-products .prod-stat .index-label{
    align-self:flex-start;
    margin-bottom:.3rem;
  }

  .page-products .prod-kpis{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (min-width: 980px){
  .page-products .prod-hero{
    padding:4rem 0;
  }

  .page-products .prod-hero-inner{
    grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
    gap:clamp(2rem, 6vw, 4.5rem);
    align-items:start;
  }

  .page-products .prod-hero-copy{
    padding-top:.5rem;
  }

  .page-products .prod-hero-guide{
    position:sticky;
    top:1rem;
    margin-top:2.5rem;
  }

  .page-products .prod-wide-grid,
  .page-products .prod-version-grid,
  .page-products .prod-mobile-grid{
    gap:2.5rem;
  }

  .page-products .prod-version-grid,
  .page-products .prod-mobile-grid{
    align-items:start;
  }

  .page-products .prod-scroll-track{
    grid-auto-columns:260px;
  }

  .page-products .prod-archive{
    grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
    gap:2.5rem;
    align-items:center;
  }

  .page-products .prod-service-grid{
    gap:2rem;
  }

  .page-products .prod-kpis{
    grid-template-columns:repeat(4, 1fr);
  }

  .page-products .prod-links-grid{
    grid-template-columns:repeat(5, 1fr);
    gap:1rem;
  }

  .page-products .prod-links-grid .plate{
    display:flex;
    flex-direction:column;
    gap:.4rem;
    padding:1.25rem 1.1rem;
  }

  .page-products .prod-links-grid .plate-index{
    margin-bottom:.5rem;
  }
}