/* ─── Page: Products ─── */

/* ─── INTRO ─── */
.prod-intro-wrap {
  position: relative;
  margin-top: 58px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-alt);
}
.prod-intro-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.prod-intro-overlay {
  position: absolute; inset: 0;
  background: rgba(240, 240, 248, 0.55);
}
.prod-intro-text {
  position: relative; z-index: 2;
  padding: 48px var(--px) 36px;
  max-width: calc(var(--w) + var(--px) * 2);
  margin: 0 auto;
}
.prod-hero-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 14px;
}
.prod-intro-title {
  font-size: clamp(30px, 4.4vw, 51px);
  font-weight: 800; color: var(--black);
  letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 14px;
}
.prod-intro-sub {
  font-size: 16px; color: var(--muted);
  max-width: 520px; line-height: 1.7;
}

/* ─── STATS BAR ─── */
.prod-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 0; border-bottom: 1px solid var(--border);
  background: var(--black);
}
.prod-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 40px; gap: 4px;
  border-right: 1px solid rgba(255,255,255,0.08);
  flex: 1;
}
.prod-stat:last-child { border-right: none; }
.prod-stat-val { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.prod-stat-label { font-size: 11px; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.08em; }

/* ─── PRODUCT SECTIONS ─── */
.prod-section {
  padding: 100px var(--px);
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.prod-section.is-alt { background: var(--bg-alt); }

.prod-inner {
  max-width: calc(var(--w) + var(--px) * 2);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.prod-inner.is-reversed { direction: rtl; }
.prod-inner.is-reversed > * { direction: ltr; }

.prod-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.prod-num {
  font-size: 11px; font-weight: 800; color: var(--blue);
  opacity: 0.5; letter-spacing: 0.08em;
}
.prod-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--blue);
}
.prod-coming {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--white);
  background: var(--blue); border-radius: 100px;
  padding: 3px 10px;
}

.prod-title {
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 800; color: var(--black);
  letter-spacing: -0.03em; line-height: 1.1;
  margin-bottom: 20px;
}
.prod-desc {
  font-size: 15px; color: var(--muted);
  line-height: 1.8; margin-bottom: 28px;
}
.prod-features {
  list-style: none; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.prod-features li {
  font-size: 14px; color: var(--black);
  padding-left: 20px; position: relative; line-height: 1.5;
}
.prod-features li::before {
  content: '';
  position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
}
.prod-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 40px;
}
.prod-badge {
  font-size: 11px; font-weight: 600;
  color: var(--black); background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: 100px;
  padding: 5px 14px;
}

/* ─── VISUAL ─── */
.prod-visual {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border);
  background: #0d0e26;
  aspect-ratio: 16/10;
  display: flex; align-items: center; justify-content: center;
}
.prod-visual video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.prod-visual.is-dark { background: #0d0e26; }

.prod-visual--perception { position: relative; overflow: hidden; }
.prod-perception-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-perception-overlay {
  position: absolute; inset: 0;
  background: rgba(10, 10, 20, 0.55);
  display: flex; align-items: center; justify-content: center;
}
.prod-perception-badge {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  color: #fff; border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 100px; padding: 10px 22px;
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.08);
}

/* ─── CTA ─── */
.prod-cta {
  background: var(--black);
  padding: 100px var(--px);
  text-align: center;
}
.prod-cta h2 {
  font-size: clamp(22px, 2.8vw, 35px);
  font-weight: 800; color: #fff;
  letter-spacing: -0.03em; margin-bottom: 14px;
}
.prod-cta p {
  font-size: 16px; color: rgba(255,255,255,0.45);
  margin-bottom: 36px;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .prod-inner { gap: 56px; }
  .prod-stat { padding: 24px 24px; }
}
@media (max-width: 900px) {
  .prod-inner { grid-template-columns: 1fr; gap: 40px; }
  .prod-inner.is-reversed { direction: ltr; }
  .prod-section { padding: 72px var(--px); }
  .prod-stats { flex-wrap: wrap; }
  .prod-stat { flex: 1 1 33%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
}
@media (max-width: 640px) {
  .prod-intro-wrap { padding: 40px var(--px) 36px; margin-top: 58px; flex-direction: column; gap: 32px; }
  .prod-intro-text { padding: 40px var(--px) 36px; }
  .prod-section { padding: 56px var(--px); }
  .prod-stat { flex: 1 1 50%; }
  .prod-cta { padding: 72px var(--px); }
}