/* =========================
   AI Workflows — Page Styles
   ========================= */

.page-hero{
  padding: clamp(2rem, 5vw, 4rem) 0 2rem;
  background:
    radial-gradient(900px 480px at 0% 0%, rgba(42,160,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(11,30,46,.35), rgba(11,30,46,0) 55%);
  border-bottom: 1px solid var(--border);
}
.hero-inner{display:grid;grid-template-columns:1.05fr .8fr;gap:1.25rem;align-items:center}
.hero-text h1{margin-bottom:.25rem}

/* Image containers (images are in HTML) */
.hero-media,
.band-media{
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(19,50,77,.35), rgba(19,50,77,.15)); /* soft tint */
  max-height: 420px;
}
.hero-media img,
.band-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (max-width: 920px){
  .hero-inner{grid-template-columns:1fr}
}

/* Two-up band */
.band{padding: clamp(2rem, 5vw, 4rem) 0}
.band-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:1rem}
.band-copy h2{margin-bottom:.25rem}
@media (max-width: 920px){
  .band-grid{grid-template-columns:1fr}
}

/* Solutions grid */
.solutions-grid .solution{display:grid;gap:.4rem}
.icon.badge{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#001018;
  box-shadow: inset 0 0 20px rgba(255,255,255,.15), 0 10px 18px rgba(0,0,0,.25);
  margin-bottom:.35rem;border:1px solid rgba(0,0,0,.25)
}
.badge-gold{background:linear-gradient(180deg,#ffd98b,#ffb63b)}
.badge-red{background:linear-gradient(180deg,#ffb3b3,#ff5c5c)}
.badge-cyan{background:linear-gradient(180deg,#bde5ff,#6ac6ff)}
.badge-green{background:linear-gradient(180deg,#bff0c6,#58d38a)}
.dot{list-style:none;margin:.35rem 0 0;padding:0;display:grid;gap:.25rem}
.dot li{position:relative;padding-left:1.1rem;color:var(--muted)}
.dot li::before{content:"•";position:absolute;left:0;color:var(--brand-accent-2);}

/* Use cases */
.usecases .uc h3{margin-bottom:.15rem}

/* Steps (wider list for this page) */
.steps-wide{grid-template-columns:repeat(5,1fr)}
@media (max-width: 1100px){.steps-wide{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 700px){.steps-wide{grid-template-columns:1fr}}

/* FAQ tweaks */
.faq details{background:var(--card)}