/* ═══ PRODUCTS PAGE — page-scoped styling (loaded ONLY by products.html) ═══ */
/* Operator-approved seam-free continuous hex window (dark-navy). Page-scoped via this
   file only being linked from products.html — never affects home/contact. */
:root { --dark:#070f1c; }
html { background:#070f1c; }
body { background:#070f1c; background-image:var(--hexbg); background-size:78px 45px; }
section { background-color:transparent; background-image:none; }   /* body provides ONE continuous hex */
.hero-grid { background:transparent; }
.hero-glow, .hero-glow2 { display:none; }                         /* removes the glow-edge that was the seam */
.page-hero { padding-bottom:18px; background:transparent; }
#products, #products .section-inner { background:transparent; }
#products { padding:1.4rem 2rem 5rem; }

/* ── cinematic banner stack (uniform full-width) ── */
#products .pv-stack { display:flex; flex-direction:column; gap:1.6rem; margin-top:2.8rem; }
#products .banner { position:relative; display:block; width:100%; border-radius:16px; overflow:hidden; isolation:isolate;
  aspect-ratio:16/7; background:var(--dark2); border:1px solid rgba(255,255,255,.07);
  box-shadow:0 24px 60px rgba(0,0,0,.35); transition:transform .3s ease, box-shadow .3s ease; }
/* gold hover-glow (operator-approved medium glow, site gold #f0a500) + keep the lift */
#products .banner:hover { transform:translateY(-4px); box-shadow:0 0 42px 3px rgba(240,165,0,.55), 0 22px 55px rgba(0,0,0,.4); }
#products .banner:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
#products .banner picture, #products .banner .bimg { position:absolute; inset:0; width:100%; height:100%; }
#products .banner .bimg { object-fit:cover; display:block; }
#products .scrim { position:absolute; inset:0; z-index:1; }
#products .scrim.left { background:linear-gradient(90deg, rgba(6,12,24,.94) 0%, rgba(6,12,24,.8) 32%, rgba(6,12,24,.15) 62%, transparent 82%); }
#products .banner-body { position:absolute; z-index:2; top:50%; transform:translateY(-50%); max-width:min(56%,560px);
  padding:0 clamp(1.5rem,4vw,3.2rem); display:flex; flex-direction:column; align-items:flex-start; gap:.85rem; }
#products .banner-body.right { right:0; left:auto; align-items:flex-end; text-align:right; }
#products .banner-body.right * { text-align:right; }
#products .b-emblem { width:56px; height:auto; margin-bottom:.2rem; filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
#products .b-eyebrow { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--accent2); border:1px solid rgba(240,165,0,.5); border-radius:100px; padding:.32rem .85rem; background:rgba(240,165,0,.08); }
#products .banner-body h3 { font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.04; letter-spacing:.3px; color:#fff; }
#products .banner-body .b-tag { font-family:'Raleway',sans-serif; font-weight:500; font-size:clamp(.95rem,1.5vw,1.1rem); line-height:1.55; color:rgba(255,255,255,.9); max-width:34ch; }
#products .b-cta { margin-top:.5rem; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.9rem; letter-spacing:1.5px; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.5rem; color:var(--accent); min-height:44px; }
#products .banner:hover .b-cta { color:#fff; }
#products .b-cta .arw { transition:transform .3s ease; }
#products .banner:hover .b-cta .arw { transform:translateX(5px); }
/* Expentomy — green fintech, screenshot floats right */
#products .banner--exp { background:linear-gradient(115deg,#141414 0%,#085041 46%,#1D9E75 128%); border-color:rgba(29,158,117,.28); }
#products .banner--exp .exp-shot { position:absolute; right:clamp(-40px,-2vw,-20px); top:50%; transform:translateY(-50%) rotate(-3deg);
  height:auto; display:block; object-fit:contain; width:min(50%,540px); border-radius:12px; box-shadow:0 30px 70px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12); transition:transform .4s ease; }
#products .banner--exp:hover .exp-shot { transform:translateY(-50%) rotate(-1.5deg) scale(1.02); }
#products .banner--exp .b-eyebrow { color:#7ff0c0; border-color:rgba(46,224,160,.5); background:rgba(46,224,160,.08); }
#products .banner--exp .b-cta { color:#5fe0a0; }
#products .banner--exp .banner-body { max-width:min(50%,480px); }
/* QU4D-Strike — game palette, board screenshot floats left, text right */
#products .banner--qu4d { background:
    radial-gradient(55% 92% at 6% 50%, rgba(192,57,43,.17), transparent 62%),
    radial-gradient(55% 92% at 94% 50%, rgba(47,121,200,.19), transparent 62%),
    linear-gradient(115deg,#0a0e1a 0%,#121a2e 55%,#0a0e1a 100%);
  border-color:rgba(47,121,200,.24); }
#products .qu4d-shot { position:absolute; left:clamp(20px,3vw,44px); top:50%; transform:translateY(-50%) rotate(1.5deg);
  height:auto; display:block; object-fit:contain; width:min(52%,600px); border-radius:12px; box-shadow:0 30px 70px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.12); transition:transform .4s ease; }
#products .banner--qu4d:hover .qu4d-shot { transform:translateY(-50%) rotate(.5deg) scale(1.02); }
/* MOBILE: stack, image on top / text below, no overflow */
@media (max-width:768px) {
  #products .banner, #products .banner--exp, #products .banner--qu4d { aspect-ratio:auto; }
  #products .banner-body, #products .banner-body.right { position:static; transform:none; max-width:100%; align-items:flex-start; text-align:left; padding:1.5rem 1.4rem 1.7rem; }
  #products .banner-body.right * { text-align:left; }
  #products .banner--lf .banner-body { background:linear-gradient(180deg, rgba(8,14,26,.55) 0%, #0b1526 22%); }
  #products .banner--lf .b-tag, #products .banner--qu4d .b-tag { color:#fff; }
  #products .banner picture { position:relative; display:block; width:100%; aspect-ratio:4/5; }
  #products .banner .bimg { aspect-ratio:4/5; }
  #products .scrim.left { background:linear-gradient(0deg, rgba(6,12,24,.96) 6%, rgba(6,12,24,.3) 44%, transparent 66%); }
  #products .banner--qu4d .qu4d-shot { position:relative; left:auto; top:auto; transform:none; width:90%; margin:1.6rem auto 0; rotate:1.5deg; }
  #products .banner--qu4d:hover .qu4d-shot { transform:none; }
  #products .banner--exp { display:flex; flex-direction:column; }
  #products .banner--exp .exp-shot { position:relative; right:auto; top:auto; transform:none; width:86%; margin:1.6rem auto 0; rotate:-1.5deg; }
  #products .banner--exp:hover .exp-shot { transform:none; }
  #products .banner-body .b-tag { max-width:100%; }
  #products .b-emblem { width:48px; }
}

/* product banner tiles are block-level <a> links — kill the default underline on their text */
#products .banner, #products .banner:hover, #products .banner:focus { text-decoration:none; }