.page-products{
  --products-accent:#FF6B35;
  --products-neon:#39FF14;
  --products-blue:#0B1F3A;
  --products-blue-dark:#071426;
  --products-cream:#F8F5F0;
  --products-ink:#1A1A1A;
  --products-link:#1E4D8C;
  --products-gray:#E6E6E6;
  --products-radius-lg:20px;
  --products-radius-md:14px;
  --products-radius-sm:8px;
  --products-radius-pill:999px;
  --products-ease-fast:160ms ease;
  --products-ease-base:260ms cubic-bezier(0.22,0.61,0.36,1);
  background:var(--products-blue);
  color:var(--products-cream);
  overflow-x:hidden;
}

.page-products .container{
  width:min(1200px,100% - 3rem);
  margin-inline:auto;
}

.page-products .breadcrumb{
  padding-block:1.25rem 0;
}

.page-products .breadcrumb__list{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  list-style:none;
  margin:0;
  padding:0;
  font-size:0.875rem;
}

.page-products .breadcrumb__item + .breadcrumb__item::before{
  content:"/";
  margin-inline:0.5rem;
  color:rgba(248,245,240,0.4);
}

.page-products .breadcrumb__item a{
  color:var(--products-link);
  text-decoration:none;
  transition:color var(--products-ease-fast);
}

.page-products .breadcrumb__item a:hover{
  color:var(--products-neon);
}

.page-products .breadcrumb__item[aria-current="page"]{
  color:rgba(248,245,240,0.7);
}

.page-products .page-enter{
  padding-block:3.5rem 2.5rem;
  position:relative;
}

.page-products .page-enter::after{
  content:"";
  position:absolute;
  right:-4rem;
  top:2rem;
  width:12rem;
  height:12rem;
  background:conic-gradient(from 90deg,var(--products-accent),transparent 30%,var(--products-neon) 60%,transparent);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);
  mask:radial-gradient(circle,transparent 58%,#000 60%);
  opacity:0.35;
  pointer-events:none;
}

.page-products .page-enter__index{
  font-size:0.875rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--products-neon);
  margin:0 0 1.25rem;
  font-weight:700;
}

.page-products .page-enter__index::before{
  content:"";
  display:inline-block;
  width:2.25rem;
  height:0.5rem;
  background:var(--products-accent);
  margin-right:0.75rem;
  clip-path:polygon(0 0,100% 0,calc(100% - 0.375rem) 50%,100% 100%,0 100%);
  vertical-align:middle;
}

.page-products .page-enter__title{
  font-family:var(--font-headline);
  font-size:clamp(2.25rem,7vw,4.25rem);
  line-height:1.05;
  margin:0 0 1.5rem;
  color:var(--products-cream);
  letter-spacing:-0.02em;
  max-width:11em;
}

.page-products .page-enter__statement{
  font-size:clamp(1rem,1.6vw,1.125rem);
  line-height:1.8;
  max-width:36em;
  margin:0 0 1.25rem;
  color:rgba(248,245,240,0.85);
}

.page-products .page-enter__meta{
  font-size:0.875rem;
  color:var(--products-neon);
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 1.5rem;
}

.page-products .section-heading-row{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-bottom:2rem;
}

.page-products .section-kicker{
  font-size:0.8125rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--products-neon);
  margin:0 0 0.5rem;
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.page-products .section-kicker::before{
  content:"";
  width:2rem;
  height:0.375rem;
  background:var(--products-accent);
  clip-path:polygon(0 0,100% 0,calc(100% - 0.25rem) 100%,0 100%);
  flex-shrink:0;
}

.page-products .section-title{
  font-family:var(--font-headline);
  font-size:clamp(1.75rem,4vw,2.75rem);
  line-height:1.15;
  margin:0;
  color:var(--products-cream);
}

.page-products .section-desc{
  font-size:0.9375rem;
  line-height:1.7;
  color:rgba(248,245,240,0.7);
  margin:0;
  max-width:34em;
}

.page-products .feature-bento{
  padding-block:2.5rem 3rem;
}

.page-products .feature-grid{
  display:grid;
  gap:1rem;
}

.page-products .feature-card{
  background:var(--products-blue-dark);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--products-radius-md);
  padding:1.25rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  position:relative;
  overflow:hidden;
  transition:transform var(--products-ease-base),box-shadow var(--products-ease-base);
}

.page-products .feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,0.35);
}

.page-products .feature-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:0.25rem;
  background:linear-gradient(90deg,var(--products-blue),var(--products-link));
}

.page-products .feature-card--accent{
  background:linear-gradient(135deg,#B33A12 0%,var(--products-accent) 100%);
}

.page-products .feature-card--accent::before{
  background:var(--products-neon);
}

.page-products .feature-card--neon{
  background:linear-gradient(135deg,#1A7A10 0%,var(--products-neon) 130%);
}

.page-products .feature-card--neon::before{
  background:#fff;
}

.page-products .feature-card--team{
  background:linear-gradient(135deg,var(--products-blue-dark) 0%,#123457 100%);
}

.page-products .feature-card--team::before{
  background:var(--products-accent);
}

.page-products .feature-card--primary{
  background:var(--products-blue-dark);
}

.page-products .feature-card--primary::before{
  background:var(--products-link);
}

.page-products .feature-card__content{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  flex:1;
}

.page-products .feature-card__num{
  font-family:var(--font-headline);
  font-size:0.8125rem;
  color:var(--products-neon);
  letter-spacing:0.08em;
  opacity:0.9;
}

.page-products .feature-card--accent .feature-card__num,
.page-products .feature-card--neon .feature-card__num{
  color:#fff;
}

.page-products .feature-card__title{
  font-family:var(--font-headline);
  font-size:1.25rem;
  line-height:1.3;
  margin:0;
  color:var(--products-cream);
}

.page-products .feature-card__text{
  font-size:0.875rem;
  line-height:1.65;
  margin:0;
  color:rgba(248,245,240,0.8);
}

.page-products .feature-card--accent .feature-card__text,
.page-products .feature-card--neon .feature-card__text{
  color:rgba(255,255,255,0.92);
}

.page-products .feature-card__tags{
  list-style:none;
  margin:0.25rem 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}

.page-products .feature-card__tags li{
  font-size:0.75rem;
  padding:0.25rem 0.75rem;
  border-radius:var(--products-radius-pill);
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.14);
  color:rgba(248,245,240,0.85);
  white-space:nowrap;
}

.page-products .feature-card__figure{
  margin:0;
  border-radius:var(--products-radius-sm);
  overflow:hidden;
  background:linear-gradient(135deg,#0d2a4d,#16407a);
  border:1px solid rgba(255,255,255,0.1);
}

.page-products .feature-card__img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}

.page-products .figure__caption{
  font-size:0.75rem;
  color:rgba(248,245,240,0.6);
  padding:0.625rem 0.875rem;
  margin:0;
  background:rgba(7,20,38,0.7);
}

.page-products .mobile-section{
  padding-block:3rem;
  display:grid;
  gap:2rem;
  grid-template-columns:1fr;
}

.page-products .mobile-section__intro{
  padding:1.5rem 0;
}

.page-products .mobile-section__list{
  list-style:none;
  margin:1.5rem 0 0;
  padding:0;
  display:grid;
  gap:0.875rem;
}

.page-products .mobile-section__list li{
  position:relative;
  padding-left:1.5rem;
  font-size:0.9375rem;
  line-height:1.6;
  color:rgba(248,245,240,0.85);
}

.page-products .mobile-section__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55em;
  width:0.625rem;
  height:0.625rem;
  background:var(--products-accent);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}

.page-products .mobile-section__list strong{
  color:var(--products-cream);
}

.page-products .mobile-section__note{
  margin-top:1.5rem;
  font-size:0.875rem;
  color:var(--products-neon);
  border-left:3px solid var(--products-neon);
  padding-left:0.875rem;
  line-height:1.6;
}

.page-products .mobile-section__visual{
  position:relative;
  display:flex;
  justify-content:center;
  padding-inline:1rem;
}

.page-products .mobile-frame{
  margin:0;
  max-width:19rem;
  width:100%;
  border-radius:2rem;
  overflow:hidden;
  border:4px solid rgba(248,245,240,0.14);
  background:linear-gradient(180deg,#0d2a4d,#0a1a30);
  position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
  transform:rotate(-2deg);
  transition:transform var(--products-ease-base);
}

.page-products .mobile-frame:hover{
  transform:rotate(0deg) translateY(-4px);
}

.page-products .mobile-frame__img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}

.page-products .mobile-frame .figure__caption{
  text-align:center;
}

.page-products .mobile-section__badge{
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  right:-0.5rem;
  top:15%;
  z-index:2;
}

.page-products .mobile-section__badge span{
  background:var(--products-accent);
  color:#fff;
  font-size:0.75rem;
  font-weight:700;
  padding:0.375rem 0.75rem;
  border-radius:var(--products-radius-pill);
  box-shadow:0 4px 14px rgba(255,107,53,0.4);
  white-space:nowrap;
}

.page-products .mobile-section__badge span:last-child{
  background:var(--products-neon);
  color:#071426;
  box-shadow:0 4px 14px rgba(57,255,20,0.3);
}

.page-products .version-section{
  padding-block:3rem 4rem;
}

.page-products .version-layout{
  display:grid;
  gap:1.5rem;
  grid-template-columns:1fr;
}

.page-products .version-timeline{
  background:var(--products-blue-dark);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--products-radius-lg);
  padding:1.5rem;
}

.page-products .version-timeline__title,
.page-products .version-milestone__title{
  font-family:var(--font-headline);
  font-size:1.125rem;
  margin:0 0 1.5rem;
  color:var(--products-cream);
}

.page-products .version-timeline__list{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}

.page-products .version-timeline__list::before{
  content:"";
  position:absolute;
  left:0.375rem;
  top:0.375rem;
  bottom:0.375rem;
  width:2px;
  background:linear-gradient(180deg,var(--products-accent),var(--products-neon) 60%,rgba(255,255,255,0.14));
}

.page-products .version-timeline__item{
  position:relative;
  padding-left:1.75rem;
  padding-bottom:1.5rem;
}

.page-products .version-timeline__item:last-child{
  padding-bottom:0;
}

.page-products .version-timeline__dot{
  position:absolute;
  left:0;
  top:0.25rem;
  width:0.75rem;
  height:0.75rem;
  border-radius:50%;
  background:var(--products-neon);
  box-shadow:0 0 12px rgba(57,255,20,0.5);
}

.page-products .version-timeline__dot--accent{
  background:var(--products-accent);
  box-shadow:0 0 12px rgba(255,107,53,0.5);
}

.page-products .version-timeline__body{
  display:flex;
  flex-direction:column;
  gap:0.375rem;
}

.page-products .version-timeline__version{
  font-family:var(--font-headline);
  font-size:0.9375rem;
  margin:0;
  color:var(--products-cream);
}

.page-products .version-timeline__desc{
  font-size:0.8125rem;
  line-height:1.6;
  margin:0;
  color:rgba(248,245,240,0.7);
}

.page-products .version-milestone{
  background:var(--products-cream);
  border-radius:var(--products-radius-lg);
  padding:1.5rem;
  color:var(--products-ink);
  position:relative;
  overflow:hidden;
}

.page-products .version-milestone__title{
  color:var(--products-ink);
}

.page-products .version-milestone__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0.75rem;
}

.page-products .version-milestone__list li{
  font-size:0.875rem;
  line-height:1.6;
  display:grid;
  grid-template-columns:3.5rem 1fr;
  gap:0.75rem;
  color:rgba(26,26,26,0.8);
}

.page-products .version-milestone__list span{
  font-family:var(--font-headline);
  color:var(--products-accent);
  font-size:0.875rem;
}

.page-products .version-milestone__figure{
  margin:1.5rem 0 0;
  display:flex;
  align-items:center;
  gap:1rem;
}

.page-products .version-milestone__img{
  width:6rem;
  height:6rem;
  border-radius:var(--products-radius-md);
  object-fit:cover;
  mix-blend-mode:multiply;
}

.page-products .version-milestone .figure__caption{
  font-size:0.8125rem;
  color:rgba(26,26,26,0.65);
}

.page-products .get-section{
  padding-block:1rem 4rem;
}

.page-products .get-section__card{
  background:linear-gradient(120deg,var(--products-blue-dark) 0%,#0d2a4d 100%);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--products-radius-lg);
  overflow:hidden;
  display:grid;
  gap:0;
  grid-template-columns:1fr;
}

.page-products .get-section__content{
  padding:1.75rem;
}

.page-products .get-section__list{
  list-style:none;
  margin:1.5rem 0;
  padding:0;
  display:grid;
  gap:1rem;
}

.page-products .get-section__list li{
  font-size:0.875rem;
  line-height:1.7;
  color:rgba(248,245,240,0.8);
  padding-left:1.25rem;
  position:relative;
}

.page-products .get-section__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.375rem;
  width:0.5rem;
  height:2rem;
  background:var(--products-accent);
  border-radius:var(--products-radius-pill);
}

.page-products .get-section__list strong{
  color:var(--products-neon);
}

.page-products .get-section__list a{
  color:var(--products-cream);
  text-decoration:underline;
  text-underline-offset:0.2em;
}

.page-products .get-section__actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.875rem;
}

.page-products .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  font-family:var(--font-body);
  font-size:0.9375rem;
  font-weight:700;
  padding:0.875rem 1.75rem;
  border-radius:var(--products-radius-pill);
  text-decoration:none;
  transition:transform var(--products-ease-fast),box-shadow var(--products-ease-fast),background var(--products-ease-fast);
}

.page-products .btn--primary{
  background:var(--products-accent);
  color:#fff;
  box-shadow:0 8px 24px rgba(255,107,53,0.3);
}

.page-products .btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(255,107,53,0.45);
}

.page-products .btn--secondary{
  background:transparent;
  color:var(--products-cream);
  border:2px solid rgba(248,245,240,0.3);
}

.page-products .btn--secondary:hover{
  border-color:var(--products-neon);
  color:var(--products-neon);
  transform:translateY(-2px);
}

.page-products .get-section__figure{
  margin:0;
  position:relative;
}

.page-products .get-section__img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
  min-height:10rem;
}

.page-products .get-section__figure .figure__caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(transparent,rgba(7,20,38,0.85));
  border-radius:0;
  color:rgba(248,245,240,0.9);
}

.page-products .related-section{
  padding-block:0 4rem;
}

.page-products .related-section__title{
  font-family:var(--font-headline);
  font-size:1.5rem;
  margin:0 0 1.5rem;
  color:var(--products-cream);
}

.page-products .related-section__grid{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr;
}

.page-products .related-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--products-radius-md);
  padding:1.25rem;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  transition:border-color var(--products-ease-fast),transform var(--products-ease-fast),background var(--products-ease-fast);
}

.page-products .related-card:hover{
  border-color:var(--products-neon);
  background:rgba(57,255,20,0.08);
  transform:translateY(-2px);
}

.page-products .related-card__tag{
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--products-accent);
}

.page-products .related-card__title{
  font-family:var(--font-headline);
  font-size:1rem;
  margin:0;
  color:var(--products-cream);
}

.page-products .related-card__text{
  font-size:0.8125rem;
  line-height:1.6;
  margin:0;
  color:rgba(248,245,240,0.65);
}

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

  .page-products .feature-card--span8{
    grid-column:span 8;
  }

  .page-products .feature-card--span4{
    grid-column:span 4;
  }

  .page-products .feature-card{
    padding:1.5rem;
  }

  .page-products .version-layout{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }

  .page-products .get-section__card{
    grid-template-columns:1.2fr 1fr;
    align-items:stretch;
  }

  .page-products .get-section__figure{
    min-height:100%;
  }

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

  .page-products .mobile-section{
    grid-template-columns:1fr auto;
    align-items:center;
  }
}

@media (min-width: 1024px){
  .page-products .feature-card--span8{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:1.5rem;
    align-items:center;
  }

  .page-products .feature-card--span8 .feature-card__figure{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .page-products .feature-card--span8 .feature-card__img{
    width:100%;
    height:auto;
  }

  .page-products .mobile-section{
    grid-template-columns:1fr 22rem;
    gap:4rem;
  }

  .page-products .mobile-section__badge{
    right:-1.5rem;
  }

  .page-products .version-timeline{
    padding:2rem;
  }

  .page-products .version-milestone{
    padding:2rem;
  }

  .page-products .get-section__content{
    padding:2.5rem;
  }

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

@media (prefers-reduced-motion: reduce){
  .page-products .feature-card,
  .page-products .mobile-frame,
  .page-products .related-card,
  .page-products .btn{
    transition:none;
    transform:none;
  }

  .page-products .feature-card:hover,
  .page-products .mobile-frame:hover,
  .page-products .related-card:hover,
  .page-products .btn--primary:hover,
  .page-products .btn--secondary:hover{
    transform:none;
  }
}