.page-products{
  --section-gap:3.5rem;
  --speed-line:rgba(55,255,139,0.055);
  --blue-line:rgba(0,217,255,0.05);
  font-family:var(--font-sans);
  color:var(--color-text);
}

@media (min-width:760px){
  .page-products{
    --section-gap:5rem;
  }
}

.page-products .hero-device{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:3rem 2.5rem;
  align-items:center;
  padding:2.5rem 1.25rem 3rem;
  overflow:hidden;
  border-bottom:1px solid var(--color-border);
}

.page-products .hero-device::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(115deg,transparent 0 26px,var(--speed-line) 26px 27px,transparent 27px 54px),
    repeating-linear-gradient(65deg,transparent 0 42px,var(--blue-line) 42px 43px,transparent 43px 84px);
  pointer-events:none;
  z-index:0;
}

.page-products .hero-copy,
.page-products .device-stage{
  position:relative;
  z-index:1;
}

.page-products .hero-copy .page-subtitle{
  margin-bottom:0.5rem;
}

.page-products .hero-copy .page-title{
  margin-bottom:1rem;
  line-height:1.2;
  letter-spacing:-0.02em;
}

.page-products .title-accent{
  display:block;
  margin-top:0.6rem;
  font-size:1.125rem;
  font-weight:600;
  color:var(--color-text-muted);
  letter-spacing:0;
}

.page-products .hero-desc{
  max-width:540px;
  color:var(--color-text-muted);
  line-height:1.75;
  margin:0 0 1.5rem;
}

.page-products .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  margin-bottom:2rem;
}

.page-products .hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.75rem;
  max-width:500px;
  margin:0;
}

.page-products .stat-item{
  display:flex;
  flex-direction:column;
  gap:0.15rem;
  padding:0.8rem 1rem;
  background:rgba(20,27,45,0.75);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
}

.page-products .stat-item dt{
  order:2;
  color:var(--color-text-muted);
  font-size:0.8125rem;
}

.page-products .stat-item dd{
  order:1;
  margin:0;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1.3rem;
  line-height:1.2;
  color:var(--color-primary);
}

@media (min-width:960px){
  .page-products .hero-device{
    grid-template-columns:1.05fr 0.95fr;
    gap:3rem;
    padding:4.5rem 5vw 4rem;
  }

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

.page-products .device-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.page-products .phone-device{
  width:min(320px,82vw);
  padding:12px 10px 16px;
  background:linear-gradient(160deg,#1c2437,var(--color-surface) 55%,#111827);
  border:1px solid #39425e;
  border-radius:42px;
  box-shadow:
    0 28px 55px rgba(0,0,0,0.45),
    0 0 0 1px rgba(55,255,139,0.08),
    inset 0 0 24px rgba(0,0,0,0.4);
}

.page-products .phone-speaker{
  width:54px;
  height:5px;
  margin:0 auto 10px;
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
}

.page-products .phone-screen{
  height:500px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  border-radius:24px;
  background:var(--color-bg);
  scrollbar-width:none;
  outline:none;
}

.page-products .phone-screen::-webkit-scrollbar{
  display:none;
}

.page-products .phone-screen:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

.page-products .screen-track{
  display:flex;
  height:100%;
}

.page-products .screen-shot{
  flex:0 0 100%;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  scroll-snap-align:start;
}

.page-products .home-indicator{
  width:96px;
  height:4px;
  margin:12px auto 0;
  border-radius:var(--radius-pill);
  background:#aab6c9;
  opacity:0.45;
}

.page-products .screen-caption{
  margin:1rem auto 0;
  max-width:320px;
  color:var(--color-text-muted);
  font-size:0.875rem;
  line-height:1.6;
  text-align:center;
}

.page-products .why-section{
  position:relative;
  padding:var(--section-gap) 1.25rem;
  max-width:1200px;
  margin:0 auto;
}

.page-products .why-section::before{
  content:"";
  position:absolute;
  inset:-1rem -1.25rem;
  background-image:
    linear-gradient(rgba(240,244,248,0.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,244,248,0.032) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,black,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 0%,black,transparent 78%);
  pointer-events:none;
  z-index:0;
}

.page-products .why-section > *{
  position:relative;
  z-index:1;
}

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

.page-products .why-card{
  position:relative;
  overflow:hidden;
  padding:1.75rem 1.5rem;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.page-products .why-card:hover{
  border-color:rgba(55,255,139,0.4);
  box-shadow:var(--shadow-card);
}

.page-products .why-num{
  position:absolute;
  top:0.6rem;
  right:1rem;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:2.25rem;
  line-height:1;
  color:rgba(240,244,248,0.07);
}

.page-products .why-card h3{
  margin:0 0 0.75rem;
  font-size:1.25rem;
  font-weight:800;
}

.page-products .why-card p{
  margin:0;
  color:var(--color-text-muted);
  line-height:1.7;
}

@media (min-width:760px){
  .page-products .why-grid{
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
  }
}

.page-products .features-section{
  padding:var(--section-gap) 1.25rem;
  max-width:1200px;
  margin:0 auto;
}

.page-products .feature-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  margin-top:2rem;
}

.page-products .feature-card{
  position:relative;
  padding:1.5rem;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-top:3px solid var(--color-primary);
  border-radius:var(--radius-lg);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.page-products .feature-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card);
}

.page-products .feature-card .tag{
  position:absolute;
  top:1.25rem;
  right:1.25rem;
}

.page-products .feature-card h3{
  margin:0 0 0.5rem;
  padding-right:4.5rem;
  font-size:1.25rem;
  font-weight:800;
}

.page-products .feature-card > p{
  margin:0;
  color:var(--color-text-muted);
  line-height:1.65;
}

.page-products .feature-team{
  border-top-color:var(--color-secondary);
}

.page-products .feature-rank{
  border-top-color:var(--color-warning);
}

.page-products .feature-venue{
  border-top-color:var(--color-gradient-end);
}

.page-products .feature-nav{
  border-top-color:var(--color-secondary);
}

.page-products .feature-sync{
  border-top-color:var(--color-primary);
}

.page-products .feature-card details{
  margin-top:1rem;
  padding-top:0.75rem;
  border-top:1px dashed var(--color-border);
}

.page-products .feature-card summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  color:var(--color-text-muted);
  font-size:0.875rem;
  font-weight:600;
  transition:color var(--transition-fast);
}

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

.page-products .feature-card summary::before{
  content:"+";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.3rem;
  height:1.3rem;
  border:1px solid currentColor;
  border-radius:50%;
  font-family:var(--font-mono);
  font-weight:700;
  line-height:1;
  transition:transform var(--transition-fast);
}

.page-products .feature-card details[open] summary{
  color:var(--color-text);
}

.page-products .feature-card details[open] summary::before{
  content:"−";
  transform:rotate(180deg);
}

.page-products .feature-detail{
  margin-top:0.75rem;
  padding:0.9rem 1rem;
  background:var(--color-surface-soft);
  border-left:2px solid var(--color-secondary);
  border-radius:var(--radius-sm);
  color:var(--color-text-muted);
  font-size:0.9375rem;
  line-height:1.7;
}

.page-products .feature-detail p{
  margin:0;
}

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

@media (min-width:1080px){
  .page-products .feature-grid{
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
  }
}

.page-products .download-section{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  padding:var(--section-gap) 1.25rem;
  max-width:1200px;
  margin:0 auto;
  background:linear-gradient(180deg,rgba(20,27,45,0.55),rgba(11,15,26,0.2));
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}

.page-products .access-steps{
  margin:1.5rem 0;
}

.page-products .access-steps ol{
  margin:0;
  padding:0;
  counter-reset:step;
  list-style:none;
}

.page-products .access-steps li{
  position:relative;
  counter-increment:step;
  padding:0.8rem 0 0.8rem 3rem;
  border-bottom:1px solid var(--color-border);
  color:var(--color-text-muted);
  line-height:1.6;
}

.page-products .access-steps li:last-child{
  border-bottom:none;
}

.page-products .access-steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:0.65rem;
  padding:0.2rem 0.45rem;
  background:rgba(55,255,139,0.09);
  border-radius:var(--radius-sm);
  color:var(--color-primary);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.95rem;
}

.page-products .download-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  margin-top:1.5rem;
}

.page-products .download-note{
  margin:1.25rem 0 0;
  max-width:520px;
  color:var(--color-text-muted);
  font-size:0.9375rem;
  line-height:1.7;
}

.page-products .qr-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem 1.5rem;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  text-align:center;
  overflow:hidden;
}

.page-products .qr-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 28%,rgba(55,255,139,0.12),transparent 60%);
  pointer-events:none;
}

.page-products .qr-svg{
  position:relative;
  width:min(190px,68%);
  height:auto;
  padding:0.75rem;
  background:var(--color-bg);
  border-radius:var(--radius-md);
  transition:transform 0.35s ease;
}

.page-products .qr-panel:hover .qr-svg{
  transform:rotate(-5deg) scale(1.04);
}

.page-products .qr-caption{
  position:relative;
  margin:0.9rem 0 0;
  color:var(--color-text-muted);
  font-size:0.875rem;
  line-height:1.65;
}

.page-products .qr-visual{
  position:relative;
  width:220px;
  max-width:100%;
  height:auto;
  margin-top:1.25rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
}

@media (min-width:920px){
  .page-products .download-section{
    grid-template-columns:1.1fr 0.9fr;
    gap:3rem;
    padding-left:2rem;
    padding-right:2rem;
  }
}

.page-products .docs-section{
  padding:var(--section-gap) 1.25rem;
  max-width:1200px;
  margin:0 auto;
}

.page-products .docs-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  margin-top:2rem;
}

.page-products .docs-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:1.5rem;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  text-decoration:none;
  color:inherit;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.page-products .docs-card:hover{
  transform:translateY(-3px);
  border-color:rgba(55,255,139,0.45);
  box-shadow:var(--shadow-card);
}

.page-products .docs-card .tag{
  position:absolute;
  top:1.25rem;
  right:1.25rem;
  z-index:1;
}

.page-products .docs-main .tag{
  position:static;
  align-self:flex-start;
  margin-bottom:0.6rem;
}

.page-products .docs-visual{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:var(--radius-md);
  margin-bottom:1rem;
}

.page-products .docs-card h3{
  margin:0 0 0.5rem;
  padding-right:4rem;
  font-size:1.125rem;
  font-weight:800;
}

.page-products .docs-card p{
  margin:0 0 1rem;
  color:var(--color-text-muted);
  font-size:0.9375rem;
  line-height:1.7;
}

.page-products .docs-link{
  margin-top:auto;
  color:var(--color-secondary);
  font-weight:700;
  font-size:0.9375rem;
}

@media (min-width:860px){
  .page-products .docs-grid{
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
  }
}

.page-products .section-head h2{
  margin-bottom:0.75rem;
}

.page-products .section-head > p:last-child{
  margin:0;
  color:var(--color-text-muted);
  line-height:1.7;
}

.page-products .section-head-index{
  margin:0 0 0.5rem;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.8125rem;
  letter-spacing:0.08em;
  color:var(--color-primary);
}