/* ==========================================================
   YOGERA — SOLUTIONS PAGES SHARED STYLES
   Used by: uba-developers.html (and any future agencies.html /
   government.html / consultancy.html built on the same template)
   Depends on shared.css. Mirrors modes.css's structure so the
   two "dedicated page" families (Modes / Solutions) stay
   visually related without being identical.
   ========================================================== */

.sol-hero{ padding:170px 24px 20px; }
.sol-hero .wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.sol-eyebrow{ display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; color:var(--blue); text-transform:uppercase; margin-bottom:14px; }
.sol-hero h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem, 4vw, 3rem); letter-spacing:-0.01em; margin-bottom:10px; }
.sol-tagline{ font-size:17px; color:var(--text-secondary); font-weight:600; margin-bottom:18px; }
.sol-desc{ font-size:15px; line-height:1.75; color:var(--text-muted); max-width:540px; margin-bottom:22px; }
.sol-desc b{ color:var(--text-secondary); font-weight:600; }

.sol-subtypes{ display:flex; flex-wrap:wrap; gap:8px; }
.sol-subtypes span{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.03em; padding:6px 12px; border-radius:var(--radius-pill);
  border:1px solid var(--line-strong); color:var(--text-muted);
}

.sol-visual{
  position:relative; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface);
  padding:28px; min-height:280px; overflow:hidden; box-shadow:0 30px 70px var(--shadow-md);
}
.sol-visual::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 75% 15%, var(--purple-soft), transparent 55%); pointer-events:none; }

/* ---- Developer workspace demo ---- */
.demo-workspace{ position:relative; z-index:1; }
.demo-workspace-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.demo-workspace-head b{ font-family:var(--font-display); font-size:14px; }
.demo-workspace-head .demo-workspace-status{ font-family:var(--font-mono); font-size:10.5px; padding:4px 10px; border-radius:var(--radius-pill); background:var(--success); color:#06231a; font-weight:700; }
.demo-workspace-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; color:var(--text-secondary); }
.demo-workspace-row:last-child{ border-bottom:none; }
.demo-workspace-row .demo-workspace-val{ font-family:var(--font-mono); font-weight:700; color:var(--text-primary); }
.demo-workspace-bar{ height:5px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:8px; }
.demo-workspace-bar span{ display:block; height:100%; background:linear-gradient(90deg, var(--blue), var(--purple)); border-radius:3px; animation:dw-fill 2.6s ease-in-out infinite alternate; }
@keyframes dw-fill{ from{ width:35%; } to{ width:78%; } }

/* ---- Procurement workflow section (Government only — reuses shared .track engine) ---- */
.sol-procurement{ padding:20px 24px 70px; }
.sol-procurement .section-head{ margin-bottom:34px; }

/* ---- Benefits grid (shared visual language with modes.css, distinct class name) ---- */
.sol-benefits{ padding:70px 24px; }
.sol-benefits .section-head{ text-align:left; margin:0 0 40px; max-width:none; }
.benefits-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; perspective:1200px; }
.benefit-card{
  padding:22px 20px; border-radius:var(--radius-md); border:1px solid var(--line); background:var(--surface);
  transition:all var(--dur-comp) var(--ease);
}
.benefit-card:hover{ border-color:var(--blue-glow); background:var(--surface-raised); transform:translateY(-3px) var(--card-tilt); }
.benefit-card .benefit-card-icon{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px;
  background:linear-gradient(135deg, var(--blue-soft), var(--purple-soft)); margin-bottom:14px;
}
.benefit-card h4{ font-family:var(--font-display); font-size:14.5px; font-weight:700; margin-bottom:7px; }
.benefit-card p{ font-size:12.5px; color:var(--text-muted); line-height:1.6; }
@media (max-width:960px){ .benefits-grid{ grid-template-columns:1fr 1fr; } .sol-hero .wrap{ grid-template-columns:1fr; } }
@media (max-width:640px){ .benefits-grid{ grid-template-columns:1fr; } }

/* ---- Pricing teaser banner (links out to pricing.html rather than duplicating plan detail) ---- */
.sol-pricing-banner{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:26px 30px; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface);
  margin:0 24px 70px; max-width:1160px; margin-left:auto; margin-right:auto;
}
.sol-pricing-banner .pricing-banner-text b{ display:block; font-family:var(--font-display); font-size:16px; margin-bottom:4px; }
.sol-pricing-banner .pricing-banner-text span{ font-size:13px; color:var(--text-muted); }
@media (max-width:640px){ .sol-pricing-banner{ flex-direction:column; align-items:flex-start; } }

/* ---- CTA ---- */
.sol-cta-wrap{ text-align:center; padding:20px 24px 80px; }

/* ---- Cross-navigation (build modes) ---- */
.sol-cross-nav{ padding:50px 24px 90px; border-top:1px solid var(--line); }
.sol-cross-nav .section-head{ margin-bottom:26px; }
.cross-nav-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; perspective:1200px; }
.cross-card{
  display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:var(--radius-md);
  border:1px solid var(--line); background:var(--surface); transition:all var(--dur-comp) var(--ease);
}
.cross-card:hover{ border-color:var(--blue-glow); background:var(--surface-raised); transform:translateY(-2px) var(--card-tilt); }
.cross-card .cross-card-icon{ font-size:22px; flex-shrink:0; }
.cross-card b{ display:block; font-size:14px; margin-bottom:2px; }
.cross-card span{ font-size:12.5px; color:var(--text-muted); }
@media (max-width:860px){ .cross-nav-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .cross-nav-grid{ grid-template-columns:1fr; } }
@media (max-width:960px){ .cross-nav-grid{ grid-template-columns:1fr 1fr; } }