/* ============================================================
   Xioma Automotive — solution product pages (Linear-inspired).
   Dark hero band with a floating product shot, alternating
   feature rows, and a crossfading product cycler. Reuses the
   existing design tokens + the .reveal scroll animation (site3).
   Loaded only on solution detail pages.
   ============================================================ */

/* ---- eyebrow (base .eyebrow is display:none sitewide) ---- */
.sol-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-dark); }
.sol-eyebrow::before { content:""; width:22px; height:1px; background:currentColor; opacity:.6; }

/* ---- hero band (light, our palette) ---- */
.sol-hero { position:relative; overflow:hidden; background:var(--bg); color:var(--ink);
  padding: clamp(40px,5vw,72px) 0 clamp(48px,6vw,88px); border-bottom:1px solid var(--line); }
.sol-hero::before { content:""; position:absolute; top:-34%; left:50%; transform:translateX(-50%);
  width:1200px; height:760px; pointer-events:none;
  background:radial-gradient(56% 56% at 50% 30%, rgba(47,134,201,.12), transparent 70%); }
.sol-hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(47,134,201,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,134,201,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(78% 80% at 50% 30%, #000 30%, transparent 78%);
  mask-image:radial-gradient(78% 80% at 50% 30%, #000 30%, transparent 78%); }
.sol-hero .container { position:relative; z-index:1; }
.sol-hero-head { max-width:800px; margin:0 auto; text-align:center; }
.sol-hero-head .crumb { display:block; }
.sol-hero .sol-eyebrow { justify-content:center; }
.sol-hero h1 { font-size:clamp(36px,5vw,58px); letter-spacing:-.03em; line-height:1.05; margin:14px 0 18px; }
.sol-hero-sub { color:var(--mute); font-size:clamp(16px,1.5vw,19px); line-height:1.6; margin:0 auto; max-width:62ch; }
.sol-hero-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.sol-hero > * { animation:rise .65s cubic-bezier(.2,.7,.2,1) backwards; }

.sol-hero-shot { margin:clamp(36px,5vw,56px) auto 0; max-width:1060px; }
/* bare (pre-chromed) hero image — used on pages without a raw app shot */
.sol-hero-shot > img { display:block; width:100%; height:auto; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-frame, 0 30px 70px -30px rgba(19,41,61,.4)); }

/* ---- browser-chrome product frame ---- */
.shot { background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-frame, 0 30px 70px -30px rgba(19,41,61,.4)); }
.shot-chrome { display:flex; align-items:center; gap:7px; padding:11px 15px;
  background:var(--bg-soft); border-bottom:1px solid var(--line); }
.shot-dot { width:11px; height:11px; border-radius:50%; background:#D9DEE4; flex:0 0 auto; }
.shot-dot.r { background:#F0736A; } .shot-dot.y { background:#F4BD4E; } .shot-dot.g { background:#5FB97C; }
.shot-addr { margin-left:8px; font-family:var(--font-mono); font-size:11px; color:var(--mute);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-pill); padding:3px 12px; }
.shot-body { display:block; }
.shot-body > img { display:block; width:100%; height:auto; }

/* ---- crossfading product cycler (deal pipeline) ---- */
.shot-cycle { position:relative; aspect-ratio:943 / 289; background:var(--bg); }
.shot-cycle img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; animation:solCycle 15.4s ease-in-out infinite; }
.shot-cycle img:nth-child(1){ animation-delay:0s }
.shot-cycle img:nth-child(2){ animation-delay:2.2s }
.shot-cycle img:nth-child(3){ animation-delay:4.4s }
.shot-cycle img:nth-child(4){ animation-delay:6.6s }
.shot-cycle img:nth-child(5){ animation-delay:8.8s }
.shot-cycle img:nth-child(6){ animation-delay:11s }
.shot-cycle img:nth-child(7){ animation-delay:13.2s }
@keyframes solCycle { 0%{opacity:0} 5%{opacity:1} 14.3%{opacity:1} 19.3%{opacity:0} 100%{opacity:0} }
@media (prefers-reduced-motion: reduce){
  .shot-cycle img{ animation:none; opacity:0 } .shot-cycle img:first-child{ opacity:1 }
}

/* ---- mobile device frame (phone-format app shots) ---- */
.shot.phone { position:relative; border-radius:40px; padding:10px; background:#10161f;
  border:1px solid #2b3644; box-shadow:var(--shadow-frame, 0 30px 70px -30px rgba(19,41,61,.4)); }
.shot.phone .shot-body { border-radius:30px; overflow:hidden; }
.shot.phone::after { content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:76px; height:20px; border-radius:11px; background:#10161f; z-index:2; }

/* ---- alternating feature rows ---- */
.sol-feature { display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(28px,5vw,64px); align-items:center; }
.sol-feature + .sol-feature { margin-top:clamp(40px,6vw,88px); }
.sol-feature.reverse .sol-feature-media { order:-1; }
.sol-feature-copy h2 { font-size:clamp(24px,3vw,36px); letter-spacing:-.02em; margin:14px 0 12px; }
.sol-feature-copy p { color:var(--mute); font-size:16px; line-height:1.65; margin:0; }
.sol-feature-list { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.sol-feature-list li { display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink-2); line-height:1.45; }
.sol-feature-list .chk { color:var(--accent); flex:0 0 auto; margin-top:1px; }

@media (max-width:860px){
  .sol-feature { grid-template-columns:1fr; }
  .sol-feature.reverse .sol-feature-media { order:0; }
}