/* =====================================================================
   Solution-page template styles (Vantage, and future solution pages).
   ===================================================================== */

/* ---- Hero ---- */
.sol-hero {
    position: relative;
    min-height: 86vh;
    display: flex;
    align-items: center;
    background: var(--bg-dark, #0F0F1A);
    color: #fff;
    overflow: hidden;
    padding-top: var(--header-height, 80px);
}
.sol-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1100px 600px at 80% 18%, rgba(var(--color-primary-rgb,237,41,57), .22), transparent 60%),
        radial-gradient(900px 500px at 10% 90%, rgba(120,90,255,.16), transparent 60%),
        var(--bg-dark, #0F0F1A);
    z-index: 0;
}
.sol-hero .container { position: relative; z-index: 1; }
.sol-hero-inner { max-width: 760px; }
.sol-hero-eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.8); }
.sol-orb {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--color-primary, #ED2939);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb,237,41,57), .25);
    animation: solPulse 2.4s var(--ease, ease) infinite;
}
@keyframes solPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.25);opacity:.7} }
.sol-hero-h1 {
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.05;
    margin: 1rem 0 1.25rem;
    letter-spacing: -.5px;
    /* base.css sets h1{color:var(--text-dark)} globally; .sol-hero isn't a
       .section-dark, so force white here for the dark hero. */
    color: var(--text-light, #fff);
}
.sol-hero-sub {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.6;
    color: rgba(255,255,255,.78);
    max-width: 620px;
    margin-bottom: 2rem;
}
.sol-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---- Value cards ---- */
.sol-value-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}
.sol-value-card {
    background: var(--bg-alt, #F8F8F8);
    border: 1px solid rgba(0,0,0,.05);
    border-radius: var(--radius-lg, 16px);
    padding: 2rem 1.6rem;
    transition: transform var(--duration,.3s) var(--ease,ease), box-shadow var(--duration,.3s);
}
.sol-value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover, 0 12px 48px rgba(0,0,0,.15)); }
.sol-value-icon {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: rgba(var(--color-primary-rgb,237,41,57), .10);
    color: var(--color-primary, #ED2939);
    margin-bottom: 1.1rem;
}
.sol-value-icon svg { width: 26px; height: 26px; }
.sol-value-card h3 { font-family: var(--font-heading, sans-serif); font-size: 1.2rem; margin-bottom: .5rem; }
.sol-value-card p { color: var(--text-secondary, #666); line-height: 1.6; font-size: .95rem; }

/* ---- How it works ---- */
.sol-how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}
.sol-step { text-align: center; }
.sol-step-num {
    width: 64px; height: 64px;
    margin: 0 auto 1.2rem;
    display: grid; place-items: center;
    border-radius: 50%;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-primary, #ED2939);
    box-shadow: 0 8px 26px rgba(var(--color-primary-rgb,237,41,57), .4);
}
.sol-step h3 { font-family: var(--font-heading, sans-serif); font-size: 1.25rem; margin-bottom: .5rem; color: #fff; }
.sol-step p { color: rgba(255,255,255,.7); line-height: 1.6; max-width: 320px; margin: 0 auto; }

/* ---- Proof ---- */
.sol-proof-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.sol-proof-media img {
    width: 100%;
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-lg, 0 8px 40px rgba(0,0,0,.12));
    display: block;
}
.sol-proof-body h2 { font-family: var(--font-heading, sans-serif); font-size: clamp(1.6rem, 3vw, 2.4rem); margin: .75rem 0 1rem; }
.sol-proof-body p { color: var(--text-secondary, #666); line-height: 1.7; margin-bottom: 1.6rem; }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .sol-value-grid { grid-template-columns: repeat(2, 1fr); }
    .sol-how-steps { grid-template-columns: 1fr; gap: 2.5rem; }
    .sol-proof-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
    .sol-value-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Template additions (data-driven solution pages). Accent-aware via
   --sol-accent set on .sol-page.
   ===================================================================== */
.sol-page { --sol-accent: var(--color-primary, #ED2939); }

/* Accent the hero glow + orb + numbers per solution */
.sol-hero--accent .sol-hero-bg {
    background:
        radial-gradient(1100px 600px at 80% 18%, color-mix(in srgb, var(--sol-accent) 28%, transparent), transparent 60%),
        radial-gradient(900px 500px at 10% 90%, rgba(120,90,255,.14), transparent 60%),
        var(--bg-dark, #0F0F1A);
}
.sol-page .sol-orb { background: var(--sol-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sol-accent) 25%, transparent); }

/* Grid column counts */
.sol-value-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sol-value-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Numbered value cards */
.sol-value-num {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 9px;
    font-family: var(--font-heading, sans-serif);
    font-weight: 700;
    color: var(--sol-accent);
    background: color-mix(in srgb, var(--sol-accent) 12%, transparent);
    margin-bottom: 1.1rem;
}

/* ---- The shift (old way -> new way) ---- */
.sol-shift-wrap { text-align: center; }
.sol-shift-label {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .8rem;
    font-weight: 700;
    color: var(--sol-accent);
    margin-bottom: 1.5rem;
}
.sol-shift-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: stretch;
}
.sol-shift-card {
    border-radius: var(--radius-lg, 16px);
    padding: 1.75rem;
    text-align: start;
    border: 1px solid rgba(0,0,0,.06);
}
.sol-shift-card.is-from { background: var(--bg-alt, #F8F8F8); opacity: .85; }
.sol-shift-card.is-to {
    background: color-mix(in srgb, var(--sol-accent) 8%, #fff);
    border-color: color-mix(in srgb, var(--sol-accent) 30%, transparent);
}
.sol-shift-tag {
    display: block;
    font-family: var(--font-heading, sans-serif);
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: .6rem;
}
.sol-shift-card.is-from .sol-shift-tag { color: var(--text-muted, #999); }
.sol-shift-card.is-to .sol-shift-tag { color: var(--sol-accent); }
.sol-shift-card p { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.sol-shift-arrow {
    align-self: center;
    color: var(--sol-accent);
}
.sol-shift-arrow svg { width: 36px; height: 36px; }

/* ---- Impact stats band ---- */
.sol-stats { background: var(--bg-alt, #F8F8F8); }
.sol-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
    text-align: center;
}
.sol-stat-num {
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(2.5rem, 5vw, 3.6rem);
    font-weight: 700;
    color: var(--sol-accent);
    line-height: 1;
}
.sol-stat-label { color: var(--text-secondary, #666); margin-top: .6rem; max-width: 240px; margin-inline: auto; }

/* ---- Capabilities list ---- */
.sol-caps-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 2.5rem;
    max-width: 880px;
    margin: 2.5rem auto 0;
}
.sol-caps-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: 1.05rem;
    color: var(--text-dark, #1A1A1A);
}
.sol-caps-list svg {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    color: var(--sol-accent);
    margin-top: 2px;
}

@media (max-width: 860px) {
    .sol-value-grid--3, .sol-value-grid--4 { grid-template-columns: 1fr 1fr; }
    .sol-shift-row { grid-template-columns: 1fr; }
    .sol-shift-arrow { transform: rotate(90deg); justify-self: center; }
    .sol-caps-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .sol-value-grid--3, .sol-value-grid--4 { grid-template-columns: 1fr; }
}

/* ---- Industry: "solutions that apply" cards ---- */
.ind-sol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}
.ind-sol-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.6rem;
    border-radius: var(--radius-lg, 16px);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    transition: transform var(--duration,.3s) var(--ease,ease), background var(--duration,.3s), border-color var(--duration,.3s);
}
.ind-sol-card:hover {
    transform: translateY(-4px);
    background: color-mix(in srgb, var(--sol-accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--sol-accent) 45%, transparent);
}
.ind-sol-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-family: var(--font-heading, sans-serif);
    font-weight: 700;
    font-size: 1.3rem;
    color: #fff;
}
.ind-sol-name svg { width: 20px; height: 20px; color: var(--sol-accent); flex: 0 0 auto; }
.ind-sol-desc { color: rgba(255,255,255,.6); line-height: 1.5; }
[dir="rtl"] .ind-sol-name svg { transform: scaleX(-1); }