.page-products{
  background:
    radial-gradient(circle at 82% 4%, rgba(138,43,226,.16), transparent 38%),
    radial-gradient(circle at 8% 12%, rgba(255,215,0,.05), transparent 46%),
    var(--c-bg);
  min-height: 100vh;
}

.page-products .products-hero{
  padding-top: 26px;
}

.page-products .products-hero__grid{
  display: grid;
  gap: 30px;
  align-items: center;
}

.page-products .products-hero__eyebrow{
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.page-products .products-hero__title{
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: clamp(28px, 5vw, 50px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: .01em;
  color: var(--c-white);
  text-wrap: balance;
}

.page-products .products-hero__lead{
  margin: 0;
  max-width: 38em;
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
  color: var(--c-ink);
}

.page-products .products-quick{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 24px;
}

@media (min-width: 640px){
  .page-products .products-quick{
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}

.page-products .products-quick__item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid rgba(200,182,255,.22);
  border-radius: var(--radius-md);
  background: rgba(18,26,58,.52);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 200ms var(--ease), background 200ms var(--ease), transform 200ms var(--ease);
}

.page-products .products-quick__item .products-quick__index{
  font-size: 12px;
  font-weight: 800;
  color: var(--c-gold);
}

.page-products .products-quick__item:hover,
.page-products .products-quick__item:focus-visible{
  border-color: var(--c-purple);
  background: rgba(138,43,226,.14);
  transform: translateY(-2px);
}

.page-products .products-hero__visual{
  position: relative;
  min-height: 310px;
  isolation: isolate;
}

.page-products .products-orbit{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250px;
  height: 250px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}

.page-products .products-orbit__ring{
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(138,43,226,.35);
  pointer-events: none;
}

.page-products .products-orbit__ring--outer{
  inset: 0;
  border-top-color: rgba(255,215,0,.8);
  border-right-color: rgba(255,215,0,.25);
  animation: productsSpin 28s linear infinite;
}

.page-products .products-orbit__ring--inner{
  inset: 34px;
  border-bottom-color: rgba(255,215,0,.7);
  border-left-color: rgba(255,215,0,.2);
  animation: productsSpinReverse 18s linear infinite;
}

.page-products .products-orbit__core{
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  background: radial-gradient(circle at 34% 28%, rgba(255,215,0,.2), rgba(18,26,58,.92) 62%);
  border: 1px solid rgba(255,215,0,.5);
  box-shadow: 0 0 42px rgba(255,215,0,.18), inset 0 0 24px rgba(138,43,226,.12);
}

.page-products .products-orbit__number{
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: var(--c-gold);
}

.page-products .products-orbit__label{
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-purple-soft);
}

.page-products .products-file{
  position: absolute;
  padding: 8px 14px 9px;
  background: linear-gradient(145deg, rgba(18,26,58,.96), rgba(10,14,39,.9));
  border: 1px solid rgba(138,43,226,.45);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--c-purple-soft);
  box-shadow: 0 12px 26px rgba(2,6,23,.5);
}

.page-products .products-file__tab{
  position: relative;
  display: block;
}

.page-products .products-file__tab::before{
  content: "";
  position: absolute;
  right: -14px;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 0 0 4px 0;
  background: var(--c-gold);
  opacity: .75;
}

.page-products .products-file--one{ top: 5%; left: 0; transform: rotate(-6deg); }
.page-products .products-file--two{ bottom: 4%; left: 2%; transform: rotate(5deg); }
.page-products .products-file--three{ top: 11%; right: 0; transform: rotate(4deg); }
.page-products .products-file--four{ bottom: 11%; right: 1%; transform: rotate(-5deg); }

.page-products .products-dice{
  position: absolute;
  right: 17%;
  bottom: 14%;
  display: grid;
  grid-template-columns: repeat(2, 5px);
  gap: 5px;
  padding: 9px;
  border-radius: 8px;
  background: linear-gradient(145deg, #FFE55C, var(--c-gold));
  box-shadow: 0 8px 20px rgba(255,215,0,.26);
  transform: rotate(14deg);
}

.page-products .products-dice__dot{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-bg-deep);
}

@media (min-width: 1080px){
  .page-products .products-hero__grid{
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 46px;
  }
  .page-products .products-hero__visual{
    min-height: 380px;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-products .products-orbit__ring,
  .page-products .products-orbit__ring--outer,
  .page-products .products-orbit__ring--inner{
    animation: none;
  }
}

.page-products .products-section{
  margin-top: 54px;
}

.page-products .products-section__head{
  max-width: 860px;
  margin-bottom: 20px;
}

.page-products .products-section__kicker{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-purple-soft);
}

.page-products .products-section__kicker span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,215,0,.4);
  background: rgba(255,215,0,.06);
  color: var(--c-gold);
  font-size: 12px;
}

.page-products .products-section__head h2{
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 900;
  line-height: 1.25;
  color: var(--c-white);
}

.page-products .products-section__intro{
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-muted);
}

.page-products .product-filecard{
  background: linear-gradient(145deg, rgba(18,26,58,.86), rgba(10,14,39,.62));
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 52px rgba(2,6,23,.36);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}

.page-products .product-filecard:hover{
  border-color: rgba(138,43,226,.4);
  box-shadow: 0 24px 70px rgba(2,6,23,.5);
  transform: translateY(-2px);
}

.page-products .product-filecard__head{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid var(--c-line);
  background: rgba(6,9,24,.55);
}

.page-products .product-filecard__index{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,215,0,.35);
  background: linear-gradient(135deg, rgba(255,215,0,.16), rgba(138,43,226,.2));
  color: var(--c-gold);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(138,43,226,.16);
}

.page-products .product-filecard__title{
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 800;
  line-height: 1.4;
  color: var(--c-ink);
}

.page-products .product-filecard__toggle{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(200,182,255,.22);
  border-radius: 999px;
  background: rgba(10,14,39,.6);
  color: var(--c-purple-soft);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
}

.page-products .product-filecard__toggle:hover,
.page-products .product-filecard__toggle:focus-visible{
  border-color: var(--c-purple);
  background: rgba(138,43,226,.18);
  color: var(--c-white);
}

.page-products .product-filecard__toggle-icon{
  width: 14px;
  height: 14px;
  transition: transform 200ms var(--ease);
}

.page-products .product-filecard__toggle-expand{ display: none; }
.page-products .product-filecard__toggle-retract{ display: inline; }

.page-products .product-filecard:has(.product-filecard__panel:not([data-open])) .product-filecard__toggle-retract{ display: none; }
.page-products .product-filecard:has(.product-filecard__panel:not([data-open])) .product-filecard__toggle-expand{ display: inline; }
.page-products .product-filecard:has(.product-filecard__panel:not([data-open])) .product-filecard__toggle-icon{ transform: rotate(180deg); }

.page-products .product-filecard__panel{
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 240ms var(--ease);
}

.page-products .product-filecard__panel:not([data-open]){
  grid-template-rows: 0fr;
}

.page-products .product-filecard__panel-inner{
  min-height: 0;
  overflow: hidden;
}

.page-products .product-filecard__grid{
  display: grid;
  gap: 22px;
  padding: 24px 20px 26px;
}

@media (min-width: 860px){
  .page-products .product-filecard__grid{
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 34px;
    padding: 28px 28px 32px;
  }
  .page-products .products-section--flip .product-filecard__media{
    order: 2;
  }
}

.page-products .product-filecard__media{
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: linear-gradient(145deg, rgba(255,215,0,.06), rgba(138,43,226,.06));
}

.page-products .product-filecard__media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.page-products .product-filecard__media--portrait img{
  aspect-ratio: 3 / 4;
}

.page-products .product-filecard__body h4{
  margin: 22px 0 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  color: var(--c-gold);
}

.page-products .product-filecard__body h4:first-child{
  margin-top: 0;
}

.page-products .product-filecard__body p{
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-ink);
}

.page-products .product-filecard__body a{
  color: var(--c-purple-soft);
  text-underline-offset: 4px;
  text-decoration-color: rgba(200,182,255,.4);
}

.page-products .products-feature-list{
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-products .products-feature-list li{
  position: relative;
  padding-left: 30px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-ink);
}

.page-products .products-feature-list li::before{
  content: "";
  position: absolute;
  left: 6px;
  top: .74em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--c-gold);
  border-bottom: 2px solid var(--c-gold);
  transform: rotate(-45deg);
}

.page-products .product-filecard__note{
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--c-purple);
  background: linear-gradient(135deg, rgba(138,43,226,.14), rgba(255,215,0,.05));
}

.page-products .product-filecard__note-label{
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(138,43,226,.4);
  background: rgba(138,43,226,.18);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--c-purple-soft);
}

.page-products .product-filecard__note p{
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--c-ink);
}

.page-products .product-filecard__note a{
  font-size: 13px;
}

.page-products .products-stat-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 4px 0 0;
  padding: 20px 20px 24px;
}

@media (min-width: 640px){
  .page-products .products-stat-row{
    grid-template-columns: repeat(3, 1fr);
    padding: 0 28px 30px;
  }
}

.page-products .products-stat{
  padding: 14px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(200,182,255,.08);
  background: rgba(6,9,24,.5);
  text-align: center;
}

.page-products .products-stat__num{
  display: block;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  color: var(--c-gold);
}

.page-products .products-stat__label{
  display: block;
  margin-top: 7px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--c-muted);
}

.page-products .products-path{
  display: grid;
  gap: 18px;
  margin: 4px 0 12px;
}

.page-products .products-path__item{
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(200,182,255,.12);
  background: rgba(6,9,24,.46);
}

.page-products .products-path__item::before{
  content: "";
  position: absolute;
  left: 29px;
  top: 48px;
  bottom: -18px;
  width: 1px;
  background: linear-gradient(180deg, rgba(138,43,226,.42), rgba(255,215,0,.1));
}

.page-products .products-path__item:last-child::before{
  display: none;
}

.page-products .products-path__step{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(138,43,226,.52);
  background: rgba(138,43,226,.18);
  color: var(--c-gold);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
}

.page-products .products-path__step::after{
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(255,215,0,.55);
  opacity: 0;
}

.page-products .products-path__content h5{
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  color: var(--c-ink);
}

.page-products .products-path__content p{
  margin: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-muted);
}

@media (prefers-reduced-motion: no-preference){
  .page-products .products-path__item:nth-child(1) .products-path__step::after{
    animation: productsPulse 3s ease-in-out infinite;
  }
  .page-products .products-path__item:nth-child(2) .products-path__step::after{
    animation: productsPulse 3s ease-in-out infinite .9s;
  }
  .page-products .products-path__item:nth-child(3) .products-path__step::after{
    animation: productsPulse 3s ease-in-out infinite 1.8s;
  }
}

.page-products .products-tree{
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-products .products-tree__item{
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(200,182,255,.12);
  background: rgba(6,9,24,.46);
  transition: border-color 200ms var(--ease), background 200ms var(--ease), transform 200ms var(--ease);
}

.page-products .products-tree__item:hover,
.page-products .products-tree__item:focus-within{
  border-color: rgba(255,215,0,.4);
  background: rgba(18,26,58,.72);
  transform: translateX(4px);
}

.page-products .products-tree__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.page-products .products-tree__branch{
  position: relative;
  padding-left: 22px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  color: var(--c-ink);
}

.page-products .products-tree__branch::before{
  content: "";
  position: absolute;
  left: 0;
  top: .26em;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--c-gold), var(--c-purple));
  transform: rotate(45deg);
}

.page-products .products-tree__count{
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,215,0,.25);
  color: var(--c-gold);
}

.page-products .products-tree__hint{
  margin: 9px 0 0 22px;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-muted);
  transition: color 200ms var(--ease);
}

.page-products .products-tree__item:hover .products-tree__hint,
.page-products .products-tree__item:focus-within .products-tree__hint{
  color: var(--c-ink);
}

.page-products .products-update{
  margin-top: 56px;
  padding: 34px 0;
  background: linear-gradient(135deg, rgba(138,43,226,.2), rgba(18,26,58,.86) 42%, rgba(10,14,39,.9));
  border-top: 1px solid rgba(138,43,226,.3);
  border-bottom: 1px solid rgba(138,43,226,.3);
  position: relative;
  overflow: hidden;
}

.page-products .products-update::before{
  content: "";
  position: absolute;
  top: -70%;
  right: -8%;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,.14), transparent 68%);
  pointer-events: none;
}

.page-products .products-update__inner{
  position: relative;
  display: grid;
  gap: 24px;
}

@media (min-width: 860px){
  .page-products .products-update__inner{
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
  .page-products .products-update__actions{
    justify-content: flex-end;
  }
}

.page-products .products-update__signal{
  display: grid;
  justify-items: start;
  gap: 2px;
}

.page-products .products-update__batch{
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-purple-soft);
}

.page-products .products-update__signal strong{
  font-family: var(--font-sans);
  font-size: 54px;
  font-weight: 900;
  line-height: 1;
  color: var(--c-gold);
  text-shadow: 0 0 34px rgba(255,215,0,.28);
}

.page-products .products-update__date{
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--c-muted);
}

.page-products .products-update__body h2{
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  color: var(--c-white);
}

.page-products .products-update__body p{
  margin: 0;
  max-width: 60em;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-ink);
}

.page-products .products-update__actions{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.page-products .products-support{
  margin-top: 54px;
  padding-bottom: 64px;
}

.page-products .products-support__head{
  max-width: 760px;
  margin-bottom: 22px;
}

.page-products .products-support__head h2{
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  color: var(--c-white);
}

.page-products .products-support__head > p{
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-muted);
}

.page-products .products-support__media{
  margin: 0 0 22px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: rgba(18,26,58,.5);
}

.page-products .products-support__media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-products .products-support__footer{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.page-products .products-support__footer p{
  margin: 0;
  max-width: 42em;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-muted);
}

.page-products .products-support__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@keyframes productsSpin{
  to{ transform: rotate(360deg); }
}

@keyframes productsSpinReverse{
  to{ transform: rotate(-360deg); }
}

@keyframes productsPulse{
  0%, 35%{ opacity: 0; transform: scale(.8); }
  12%{ opacity: .8; transform: scale(1.05); }
  100%{ opacity: 0; transform: scale(1.22); }
}

@media (prefers-reduced-motion: reduce){
  .page-products .products-path__step::after{
    animation: none;
  }
}