/* Extracted CSS for pages/solutions/index.html */
/* ── Variables ── */
        :root {
            --sol-bg: #0a0a0c;
            --sol-alt: #121217;
            --sol-panel: #17171e;
            --sol-line: rgba(255, 255, 255, .08);
            --sol-muted: rgba(255, 255, 255, .5);
            --sol-purple: #5E0ED7;
            --sol-purple-dim: rgba(94, 14, 215, .15);
        }

        body {
            background: var(--sol-bg);
            color: #f7f7fb;
            font-family: Inter, sans-serif;
        }

        /* ── Hero ── */
        .sol-hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 150px 0 100px;
            background: var(--sol-bg);
            position: relative;
            overflow: hidden;
            isolation: isolate;
        }

        .sol-hero-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            z-index: -2;
            opacity: .72;
        }

        .sol-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(10, 10, 12, .48), rgba(10, 10, 12, .72)), radial-gradient(ellipse 55% 45% at 50% 30%, rgba(94, 14, 215, .16) 0%, transparent 70%), linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .025) 1px, transparent 1px);
            background-size: auto, auto, 72px 100%;
            pointer-events: none;
            z-index: -1;
        }

        .sol-hero::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -1px;
            width: min(680px, 80vw);
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(94, 14, 215, .8), transparent);
            box-shadow: 0 0 28px rgba(94, 14, 215, .55);
            transform: translateX(-50%);
        }

        .sol-hero-inner {
            text-align: center;
            position: relative;
        }

        .sol-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--sol-purple);
            margin-bottom: 1.75rem;
        }

        .sol-eyebrow::before {
            content: "";
            display: block;
            width: 20px;
            height: 1.5px;
            background: var(--sol-purple);
            border-radius: 2px;
        }

        .sol-h1 {
            font-size: clamp(3rem, 6vw, 5.5rem);
            font-weight: 800;
            line-height: .95;
            letter-spacing: -.045em;
            text-transform: uppercase;
            color: #fff;
            margin-bottom: 1.75rem;
        }

        .sol-h1 .accent {
            color: var(--sol-purple);
        }

        .sol-hero-desc {
            font-size: clamp(.95rem, 1.2vw, 1.1rem);
            color: var(--sol-muted);
            max-width: 560px;
            margin: 0 auto 2.5rem;
            line-height: 1.75;
        }

        .sol-cta-group {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .btn-sol-primary {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .9rem 1.85rem;
            background: var(--sol-purple);
            color: #fff;
            font-size: .9rem;
            font-weight: 700;
            letter-spacing: .04em;
            border-radius: 8px;
            text-decoration: none;
            transition: background .25s, transform .2s, box-shadow .25s;
            box-shadow: 0 12px 28px rgba(94, 14, 215, .22);
        }

        .btn-sol-primary:hover {
            background: #7a2ef0;
            transform: translateY(-2px);
            box-shadow: 0 16px 34px rgba(94, 14, 215, .34);
        }

        .btn-sol-primary:focus-visible,
        .sol-module:focus-visible {
            outline: 2px solid #b993ff;
            outline-offset: 4px;
        }

        .sol-cta-sub {
            font-size: .78rem;
            color: rgba(255, 255, 255, .35);
            letter-spacing: .05em;
        }

        .sol-signal {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0;
            margin: 4rem auto 0;
            max-width: 620px;
            border-top: 1px solid var(--sol-line);
            border-bottom: 1px solid var(--sol-line);
        }

        .sol-signal-item {
            display: grid;
            gap: .35rem;
            padding: 1rem 1.5rem;
            text-align: left;
            flex: 1;
        }

        .sol-signal-item+.sol-signal-item {
            border-left: 1px solid var(--sol-line);
        }

        .sol-signal-value {
            font-size: .95rem;
            font-weight: 800;
            letter-spacing: .03em;
            color: #fff;
        }

        .sol-signal-label {
            font-size: .62rem;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--sol-muted);
        }

        /* ── Section base ── */
        .sol-section {
            padding: clamp(5rem, 10vh, 8rem) 0;
            background: var(--sol-bg);
        }

        .sol-section.alt {
            background: var(--sol-alt);
        }

        .sol-section-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .sol-eyebrow-sm {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--sol-purple);
            margin-bottom: 1.25rem;
        }

        .sol-eyebrow-sm::before {
            content: "";
            display: block;
            width: 20px;
            height: 1.5px;
            background: var(--sol-purple);
            border-radius: 2px;
        }

        .sol-h2 {
            font-size: clamp(1.8rem, 3.5vw, 3rem);
            font-weight: 800;
            line-height: 1;
            letter-spacing: -.04em;
            text-transform: uppercase;
            color: #fff;
        }

        .sol-h2 .accent {
            color: var(--sol-purple);
        }

        /* ── Architecture Matrix ── */
        .sol-matrix-wrap {
            position: relative;
            max-width: 860px;
            margin: 0 auto;
        }

        .sol-matrix {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1px;
            background: var(--sol-line);
            border: 1px solid var(--sol-line);
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            z-index: 1;
            box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
        }

        .sol-module {
            background: var(--sol-bg);
            padding: 2.5rem 2rem;
            position: relative;
            transition: background .25s, transform .25s;
            cursor: pointer;
            text-decoration: none;
            display: block;
        }

        .sol-module:hover {
            background: linear-gradient(135deg, #17131f, var(--sol-alt));
            transform: translateY(-3px);
            z-index: 2;
        }

        .sol-module-num {
            font-size: .65rem;
            font-weight: 700;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: rgba(94, 14, 215, .5);
            margin-bottom: 1.5rem;
        }

        .sol-module-label {
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--sol-purple);
            margin-bottom: .6rem;
        }

        .sol-module-name {
            font-size: 1.15rem;
            font-weight: 800;
            letter-spacing: -.02em;
            color: #fff;
            margin-bottom: .65rem;
        }

        .sol-module-desc {
            font-size: .85rem;
            color: var(--sol-muted);
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .sol-module-arrow {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            font-size: .78rem;
            font-weight: 700;
            color: var(--sol-purple);
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .sol-module-arrow svg {
            width: 12px;
            height: 12px;
            transition: transform .2s;
        }

        .sol-module:hover .sol-module-arrow svg {
            transform: translate(2px, -2px);
        }

        .sol-module-border {
            position: absolute;
            inset: 0;
            border: 2px solid transparent;
            border-radius: 0;
            pointer-events: none;
            transition: border-color .25s;
        }

        .sol-module:hover .sol-module-border {
            border-color: rgba(94, 14, 215, .4);
        }

        /* SVG connector overlay */
        .sol-matrix-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
        }

        /* ── Why Custom — split ── */
        .sol-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: start;
        }

        .sol-split-col-title {
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--sol-purple);
            margin-bottom: 1.5rem;
        }

        .sol-indexed-list {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .sol-indexed-row {
            display: grid;
            grid-template-columns: 36px 1fr;
            gap: 1rem;
            align-items: flex-start;
            padding: .9rem 0;
            border-bottom: 1px solid var(--sol-line);
        }

        .sol-indexed-row:last-child {
            border-bottom: none;
        }

        .sol-indexed-num {
            font-size: .7rem;
            font-weight: 700;
            color: rgba(94, 14, 215, .5);
            padding-top: .15rem;
        }

        .sol-indexed-text {
            font-size: .9rem;
            color: var(--sol-muted);
            line-height: 1.6;
        }

        .sol-indexed-text strong {
            color: #fff;
            font-weight: 600;
        }

        /* ── Process Timeline ── */
        .sol-timeline {
            position: relative;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 0;
        }

        .sol-timeline::before {
            content: "";
            position: absolute;
            top: 28px;
            left: 10%;
            right: 10%;
            height: 1px;
            background: var(--sol-line);
        }

        .sol-timeline-line {
            position: absolute;
            top: 28px;
            left: 10%;
            height: 1px;
            background: var(--sol-purple);
            width: 0;
            transition: width .8s ease;
        }

        .sol-step {
            position: relative;
            z-index: 1;
            padding: 0 1rem 0 0;
            text-align: left;
        }

        .sol-step-dot {
            width: 56px;
            height: 56px;
            display: grid;
            place-items: center;
            background: var(--sol-bg);
            border: 1px solid var(--sol-purple);
            color: var(--sol-purple);
            font-size: .75rem;
            font-weight: 800;
            letter-spacing: .1em;
            margin-bottom: 1.25rem;
            box-shadow: 0 0 0 7px var(--sol-alt);
        }

        .sol-step-title {
            font-size: .9rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: .5rem;
            letter-spacing: -.01em;
        }

        .sol-step-desc {
            font-size: .8rem;
            color: var(--sol-muted);
            line-height: 1.55;
        }

        /* ── Industries ── */
        .sol-industry-list {
            border-top: 1px solid var(--sol-line);
        }

        .sol-industry-row {
            display: grid;
            grid-template-columns: 56px 1fr 1.4fr 24px;
            gap: 1.5rem;
            align-items: center;
            padding: 1.25rem 0;
            border-bottom: 1px solid var(--sol-line);
            transition: padding .2s;
        }

        .sol-industry-row:hover {
            padding-left: .75rem;
        }

        .sol-industry-num {
            font-size: .72rem;
            font-weight: 700;
            color: var(--sol-purple);
        }

        .sol-industry-name {
            font-size: 1.1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: -.01em;
            color: #fff;
        }

        .sol-industry-detail {
            font-size: .85rem;
            color: var(--sol-muted);
        }

        .sol-industry-arrow {
            color: var(--sol-purple);
            font-size: 1rem;
            transition: transform .2s;
        }

        .sol-industry-row:hover .sol-industry-arrow {
            transform: translate(3px, -3px);
        }

        /* ── Final CTA ── */
        .sol-cta {
            padding: clamp(5rem, 10vh, 8rem) 0;
            background: var(--sol-bg);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .sol-cta::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 700px;
            height: 350px;
            background: radial-gradient(ellipse, rgba(94, 14, 215, .18) 0%, transparent 70%);
            pointer-events: none;
        }

        .sol-cta-h2 {
            font-size: clamp(2.5rem, 5.5vw, 4.5rem);
            font-weight: 800;
            line-height: .95;
            letter-spacing: -.04em;
            text-transform: uppercase;
            color: #fff;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .sol-cta-desc {
            font-size: 1rem;
            color: var(--sol-muted);
            max-width: 500px;
            margin: 0 auto 2.5rem;
            line-height: 1.65;
            position: relative;
        }

        .sol-cta-sub {
            font-size: .78rem;
            color: rgba(255, 255, 255, .3);
            margin-top: .75rem;
            letter-spacing: .04em;
        }

        .sol-cta .btn-sol-primary {
            margin: 0 auto;
            display: inline-flex;
        }

        /* ── Responsive ── */
        @media(max-width:900px) {
            .sol-matrix {
                grid-template-columns: 1fr;
            }

            .sol-split {
                grid-template-columns: 1fr;
                gap: 3rem;
            }

            .sol-timeline {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .sol-timeline::before,
            .sol-timeline-line {
                display: none;
            }

            .sol-step {
                display: grid;
                grid-template-columns: 56px 1fr;
                column-gap: 1.25rem;
            }

            .sol-step-dot {
                grid-row: span 2;
                margin: 0;
            }

            .sol-industry-row {
                grid-template-columns: 36px 1fr 20px;
                gap: .75rem;
            }

            .sol-industry-detail {
                display: none;
            }
        }

        @media(max-width:600px) {
            .sol-hero {
                min-height: 100svh;
                padding: 120px 0 64px;
            }

            .sol-h1 {
                font-size: clamp(2.4rem, 8vw, 3.5rem);
            }

            .sol-signal {
                margin-top: 3rem;
            }

            .sol-signal-item {
                padding: 1rem .7rem;
            }

            .sol-signal-value {
                font-size: .8rem;
            }

            .sol-signal-label {
                font-size: .54rem;
                letter-spacing: .08em;
            }
        }