/* ============================================
   PRODUCTS PAGE - genicon.ai/products
   Reuses the pricing hero; product rows below.
   Site palette: teal #70B4AF + orange #EE704A
   Product accents: Auto BIM Route amber #E8A13A, Superb yellow #F5D547
   ============================================ */

.page-products { --abr: #E8A13A; --abr-2: #C9781C; --sup: #F5D547; --sup-2: #D9AE12; --ink: #0E1015; }

/* ===== HERO additions ===== */
.products-hero { padding-bottom: 110px; }
.hero-products { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 9px; border-radius: 999px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px; color: #fff;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .25s, transform .25s, border-color .25s;
}
.hero-chip:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); transform: translateY(-2px); }
.chip-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.abr-ico { background: linear-gradient(135deg, #F6C26B, var(--abr)); color: #2A1A05; }
.sup-ico { background: linear-gradient(135deg, #FFF7A8, var(--sup)); color: #1F1A02; }

/* ===== PRODUCT ROWS ===== */
.products-section { padding: 90px 0 40px; background: var(--bg); }
.product-row {
  display: grid; grid-template-columns: 1fr 1.08fr; gap: 64px; align-items: center;
  padding: 50px 0 80px;
}
.product-row + .product-row { border-top: 1px solid rgba(41,41,41,.08); padding-top: 90px; }
.product-row.reverse .product-copy { order: 2; }

.product-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.p-num {
  font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .12em;
  color: rgba(41,41,41,.45);
}
.p-tag {
  font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.abr-tag { background: rgba(232,161,58,.12); color: #A9610F; }
.sup-tag { background: rgba(245,213,71,.22); color: #7A5F00; }

.product-name {
  font-family: var(--font-head); font-weight: 600; font-size: 52px; letter-spacing: -.025em; line-height: 1.04;
  color: var(--text); margin: 0;
}
.abr-accent { color: var(--abr); }
.product-head {
  margin: 10px 0 0; font-family: var(--font-head); font-weight: 600; font-size: 22px; letter-spacing: -.01em;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.product-desc { margin: 18px 0 0; font-size: 16.5px; line-height: 1.65; color: rgba(41,41,41,.72); }

.product-features { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.product-features li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.pf-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; }
.product-features b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--text); }
.product-features span:not(.pf-ico) { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.55; color: rgba(41,41,41,.62); }

.product-actions { display: flex; align-items: center; gap: 22px; margin-top: 32px; flex-wrap: wrap; }
.product-actions .btn-solid { display: inline-flex; align-items: center; gap: 10px; }
.p-link {
  font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--text);
  display: inline-flex; align-items: center; gap: 8px; border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
  transition: color .25s;
}
.p-link:hover { color: var(--secondary); }
.arr { transition: transform .25s; display: inline-block; }
.btn-solid:hover .arr, .p-link:hover .arr { transform: translateX(3px); }

/* ===== VISUALS ===== */
.product-visual { position: relative; perspective: 1400px; }
.pv-tilt { position: relative; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.22,1,.36,1); will-change: transform; }
.pv-frame {
  position: relative; border-radius: 22px; overflow: hidden; background: var(--ink);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 40px 80px -30px rgba(14,16,21,.55), 0 10px 30px -12px rgba(14,16,21,.25);
}
.pv-abr { box-shadow: 0 40px 80px -30px rgba(14,16,21,.6), 0 0 70px -20px rgba(232,161,58,.55); }
.pv-sup { box-shadow: 0 40px 80px -30px rgba(14,16,21,.6), 0 0 70px -20px rgba(245,213,71,.6); }
.pv-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #15171E; border-bottom: 1px solid rgba(255,255,255,.06); }
.pv-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3A3D47; }
.pv-bar i:nth-child(1) { background: #FF5F57; } .pv-bar i:nth-child(2) { background: #FEBC2E; } .pv-bar i:nth-child(3) { background: #28C840; }
.pv-bar span { margin-left: 10px; font-family: var(--font-head); font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.55); }
.pv-frame > img { width: 100%; height: auto; display: block; }

.pv-chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 15px; border-radius: 14px; background: #fff; color: var(--text);
  font-family: var(--font-head); font-weight: 500; font-size: 14px; white-space: nowrap;
  box-shadow: 0 18px 40px -14px rgba(14,16,21,.35), 0 0 0 1px rgba(14,16,21,.05);
  transform: translateZ(60px);
  animation: pv-bob 6s ease-in-out infinite;
}
.pv-chip b { font-size: 18px; font-weight: 700; color: var(--abr-2); }
.pv-chip.sup b { color: #A67F00; }
.pv-chip .ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--abr); color: #fff; }
.pv-chip.sup .ok { background: var(--sup); color: #1F1A02; }
.pv-chip-a { top: 58px; left: -26px; }
.pv-chip-b { bottom: -18px; right: -18px; animation-delay: -3s; }
.pv-chip-a.pv-chip-right { left: auto; right: -22px; top: 72px; animation-delay: -1.5s; }
@keyframes pv-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* Superb: drawing with a scanning beam that reveals the result */
.scan { position: relative; aspect-ratio: 1600 / 1000; background: #fff; overflow: hidden; }
.scan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-after { clip-path: inset(0 100% 0 0); animation: scan-reveal 7s cubic-bezier(.65,0,.35,1) infinite; }
.scan-beam {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px; z-index: 2;
  background: var(--sup); box-shadow: 0 0 16px 4px rgba(245,213,71,.85), 0 0 50px 10px rgba(245,213,71,.35);
  animation: scan-move 7s cubic-bezier(.65,0,.35,1) infinite;
}
.scan-beam::after { content: ""; position: absolute; top: 0; bottom: 0; right: 2px; width: 80px; background: linear-gradient(90deg, transparent, rgba(245,213,71,.25)); }
@keyframes scan-reveal { 0%, 8% { clip-path: inset(0 100% 0 0); } 45%, 70% { clip-path: inset(0 0 0 0); } 92%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes scan-move { 0%, 8% { left: 0; opacity: 1; } 45% { left: 100%; opacity: 1; } 46%, 70% { left: 100%; opacity: 0; } 71% { left: 100%; opacity: 1; } 92%, 100% { left: 0; opacity: 1; } }

/* ===== WHICH ONE FITS ===== */
.fit-section { padding: 40px 0 90px; }
.fit-header { text-align: center; margin-bottom: 40px; }
.fit-header h2 { font-family: var(--font-head); font-weight: 600; font-size: 40px; letter-spacing: -.02em; margin: 0; }
.fit-table { border-radius: 24px; background: var(--surface); padding: 10px 26px; border: 1px solid rgba(41,41,41,.06); }
.fit-row { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid rgba(41,41,41,.07); align-items: center; }
.fit-row:last-child { border-bottom: 0; }
.fit-row > span:first-child { font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgba(41,41,41,.45); }
.fit-row > span { font-size: 15.5px; color: rgba(41,41,41,.8); }
.fit-head > span { font-family: var(--font-head); font-weight: 600; font-size: 19px !important; color: var(--text) !important; letter-spacing: -.01em !important; text-transform: none !important; display: flex; align-items: center; gap: 10px; }
.fit-row .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.fit-row .dot.abr { background: var(--abr); box-shadow: 0 0 10px rgba(232,161,58,.7); }
.fit-row .dot.sup { background: var(--sup); box-shadow: 0 0 10px rgba(245,213,71,.8); }
.fit-links a { font-family: var(--font-head); font-weight: 600; color: var(--text); border-bottom: 1.5px solid currentColor; padding-bottom: 2px; transition: color .25s; }
.fit-links a:hover { color: var(--secondary); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .product-row, .product-row.reverse { grid-template-columns: 1fr; gap: 44px; }
  .product-row.reverse .product-copy { order: 0; }
  .product-name { font-size: 44px; }
  .pv-chip-a { left: 10px; }
  .pv-chip-b { right: 10px; }
  .pv-chip-a.pv-chip-right { right: 10px; }
}
@media (max-width: 720px) {
  .products-section { padding-top: 60px; }
  .product-row { padding: 30px 0 60px; }
  .product-row + .product-row { padding-top: 60px; }
  .product-name { font-size: 38px; }
  .product-head { font-size: 19px; }
  .pv-chip { font-size: 12px; padding: 8px 11px; }
  .pv-chip b { font-size: 15px; }
  .pv-chip-a { top: 48px; }
  .fit-header h2 { font-size: 30px; }
  .fit-table { padding: 6px 16px; }
  .fit-row { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .fit-row > span:first-child { grid-column: 1 / -1; }
  .fit-head > span:first-child, .fit-links > span:first-child { display: none; }
  .fit-head > span { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-chip, .scan-beam { animation: none; }
  .scan-after { animation: none; clip-path: none; }
  .scan-beam { display: none; }
}