/* =========================================================================
   Solutions page - one breathable section per solution.
   Each section sets --c / --c2 (its colour) inline; components read them.
   All motion collapses under prefers-reduced-motion (rule in style.css).
   ========================================================================= */

/* ---------- Sticky jump bar + scrollspy: always one line ---------- */
.sol-nav {
    position: sticky; top: var(--header-h); z-index: 80;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
/* Single row; spreads across the container on desktop, scrolls sideways when narrower */
.sol-nav__inner {
    display: flex; flex-wrap: nowrap; justify-content: space-between; gap: .25rem; padding: .55rem 0;
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.sol-nav__inner::-webkit-scrollbar { display: none; }
.sol-nav a {
    display: inline-flex; align-items: center; gap: .4rem; flex: none; white-space: nowrap;
    padding: .45rem .75rem; border-radius: 999px; text-decoration: none;
    font-family: var(--font-display); font-weight: 500; font-size: .84rem; color: var(--ink-soft);
    transition: background-color .25s, color .25s, box-shadow .25s;
}
.sol-nav a .icon { color: var(--c); width: 1em; height: 1em; }
.sol-nav a:hover { background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--ink); }
.sol-nav a[aria-current="true"] { background: linear-gradient(135deg, var(--c), var(--c2)); color: #fff; box-shadow: 0 8px 18px -10px var(--c); }
.sol-nav a[aria-current="true"] .icon { color: #fff; }

/* ---------- Section rhythm: generous air ---------- */
.sol { padding: clamp(1.25rem, 3vw, 2rem) 0; }
.sol:first-of-type, #applications { padding-top: clamp(2.5rem, 6vw, 4rem); }
.sol:has(+ .section) { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.sol[id], .sol [id] { scroll-margin-top: calc(var(--header-h) + 64px); }
.sol--tint { background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.sol h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 1.1rem 0 .7rem; }
.sol__desc { font-size: 1.08rem; max-width: 60ch; }
.sol .check-list { margin: 1.4rem 0; gap: .65rem; column-gap: 2rem; }
.sol .check-list .icon { color: var(--accent); }
.sol__note {
    font-size: .92rem; color: var(--ink-soft); max-width: 62ch; margin: 1.25rem 0;
    padding: .85rem 1rem; border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--c, var(--accent)) 8%, var(--surface));
    border-left: 3px solid var(--c, var(--accent));
}
.sol__tag {
    display: inline-block; padding: .35rem .8rem; border-radius: 999px;
    font-family: var(--font-display); font-weight: 600; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
    background: rgba(255, 255, 255, .16); color: #fff;
}
.sol .tile__icon { width: 52px; height: 52px; border-radius: 14px; }
.sol .tile__icon .icon { width: 26px; height: 26px; }

/* ---------- 1. Banner (custom apps) ---------- */
.sol-banner {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center;
    padding: clamp(2rem, 5vw, 3.75rem); border-radius: 24px; background: var(--grad-brand); color: #fff;
}
.sol-banner::before, .sol-banner::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.sol-banner::before { width: 380px; height: 380px; right: -120px; top: -140px; background: rgba(255, 255, 255, .1); }
.sol-banner::after { width: 160px; height: 160px; left: 42%; bottom: -80px; border: 22px solid color-mix(in srgb, var(--brand-coral) 35%, transparent); }
.sol-banner h2, .sol-banner p { color: #fff; }
.sol-banner p { opacity: .92; }
.sol-banner .check-list li { color: rgba(255, 255, 255, .9); }
.sol-banner .check-list .icon { color: var(--brand-coral-soft); }
.sol-banner .sol__note { background: rgba(255, 255, 255, .12); border-left-color: var(--brand-coral-soft); color: #fff; }

/* Modules light up one by one */
.modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.modules__tile {
    display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.2rem; border-radius: var(--r);
    font-family: var(--font-display); font-weight: 600; color: #fff;
    background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.modules__tile .icon { box-sizing: content-box; width: 20px; height: 20px; padding: 9px; border-radius: 11px; background: rgba(255, 255, 255, .2); }
@media (prefers-reduced-motion: no-preference) {
    .modules__tile { animation: module-glow 6s ease-in-out infinite; animation-delay: calc(var(--k) * 1s); }
}
@keyframes module-glow {
    0%, 100% { background: rgba(255, 255, 255, .12); transform: none; }
    8%, 16% { background: rgba(255, 255, 255, .95); color: var(--brand-deep); transform: translateY(-4px); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .45); }
    26% { background: rgba(255, 255, 255, .12); transform: none; }
}

/* ---------- Gradient panels (every solution, own colour) ----------
   Deep gradient pairs keep white text readable; set per section via tone(). */
/* Deep gradient pairs (--g-*) live in style.css :root */
.sol-panel {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(2rem, 5vw, 3.5rem); border-radius: 24px; color: #fff;
    background: linear-gradient(135deg, var(--g1, var(--g-violet-1)) 0%, var(--g2, var(--g-violet-2)) 100%);
    box-shadow: 0 34px 70px -40px var(--g1, var(--g-violet-1));
}
.sol-panel::before, .sol-panel::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.sol-panel::before { width: 360px; height: 360px; right: -120px; top: -140px; background: rgba(255, 255, 255, .1); }
.sol-panel::after { width: 150px; height: 150px; left: 40%; bottom: -80px; border: 20px solid rgba(255, 255, 255, .14); }
.sol-panel h2, .sol-panel h3, .sol-panel p { color: #fff; }
.sol-panel .sol__desc { opacity: .92; }
.sol-panel .sol__note { background: rgba(255, 255, 255, .12); border-left-color: rgba(255, 255, 255, .8); color: #fff; }
.sol-panel .tile__icon { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: #fff; }
.sol-panel .btn--light { color: var(--g1, var(--brand-deep)); }

/* Icon and title on one line */
.sol__head { display: flex; align-items: center; gap: 1rem; }
.sol__head h2, .sol__head h3 { margin: 0; }
.sol__head + p { margin-top: 1.1rem; }

/* Capabilities card: white surface inside the colour panel */
.sol__caps {
    padding: clamp(1.4rem, 3vw, 2rem); border-radius: 18px;
    background: var(--surface); color: var(--ink); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .45);
}
.sol__caps h3 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute) !important; }
.sol__caps .check-list { margin: .9rem 0 0; gap: .75rem; }
.sol__caps .check-list li { color: var(--ink-soft); }
.sol__caps .check-list .icon { color: var(--g1, var(--accent)); }
.sol__caps h3 + .check-list { margin-top: 1rem; }

/* ---------- 2-3. Split: story + capabilities card ---------- */
.sol-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sol-split--flip .sol__copy { order: 2; }
.sol-split .sol__copy .btn { margin-top: .25rem; }

/* ---------- Delivered for national shows ---------- */
.delivered {
    margin-top: clamp(1.5rem, 3vw, 2rem); padding: clamp(1.4rem, 3vw, 2rem); border-radius: 20px;
    background: color-mix(in srgb, var(--c) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line));
}
.delivered__intro { display: flex; align-items: flex-start; gap: 1rem; }
.delivered__intro h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-bottom: .3rem; }
.delivered__intro p { max-width: 75ch; }

/* ---------- 4. Wide (award) ---------- */
.sol-wide { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }

/* ---------- 5-8. Paired gradient cards ---------- */
.sol--pair { padding-block: clamp(1.25rem, 3vw, 2rem); }
.sol-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.sol-card { display: flex; flex-direction: column; gap: 1rem; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.sol-card:hover { transform: translateY(-4px); }
.sol-card:hover .tile__icon { transform: scale(1.06); }
.sol-card .sol__desc { margin: 0; }
.sol-card .sol__caps { flex: 1; }
.sol-card .sol__caps .check-list { margin-top: 0; }
.sol-card .btn { align-self: flex-start; }

/* ---------- 9-10. Mini gradient cards ---------- */
.sol-mini__head { margin-top: 0 !important; margin-bottom: 1.5rem !important; color: var(--ink); }
.sol-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 1.75rem); }
.sol-mini__card { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 22px; transition: transform .45s var(--ease); }
.sol-mini__card:hover { transform: translateY(-4px); }
.sol-mini__card:hover .tile__icon { transform: scale(1.06); }
.sol-mini__card h3 { font-size: 1.3rem; }
.sol-mini__card > p { margin-top: .8rem; opacity: .92; }
.sol-mini__card .tile__tags { margin-top: 1.1rem; }
.sol-mini__card .tile__tags li { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
    .sol-nav__inner { justify-content: flex-start; }
}
@media (max-width: 1024px) {
    .sol-banner, .sol-split, .sol-wide, .sol-pair, .sol-mini { grid-template-columns: 1fr; }
    .sol-split--flip .sol__copy { order: 0; }
}
@media (max-width: 640px) {
    .modules { grid-template-columns: 1fr 1fr; }
    .sol__head { gap: .75rem; }
    .sol .tile__icon { width: 44px; height: 44px; }
}

/* Products page: only three pills, so centre them */
.sol-nav__inner--center { justify-content: center; gap: .5rem; }

/* A lone card in a pair row spans the full width */
.sol-pair > .sol-card:only-child { grid-column: 1 / -1; }