/* ============================================
   Solutions Template Styles
   ============================================
   Shared styles for all solution pages
   (Analytics, Data Lakes, Business Intelligence, etc.)
   ============================================ */

.solution-page {
    background: var(--bs-body-bg);
    padding-top: 64px;
}

[data-bs-theme="dark"] .solution-page {
    background:
        radial-gradient(ellipse at 50% 18%, rgba(26, 35, 50, 0.7) 0%, rgba(15, 18, 24, 0.25) 45%, transparent 72%),
        linear-gradient(180deg, #000000 0%, #0a0e14 50%, #0f1419 100%);
}

.solution-page .solution-hero {
    position: relative;
    background: transparent;
    padding-top: clamp(3rem, 7vw, 6rem);
    padding-bottom: clamp(4rem, 7vw, 6.5rem);
}

.solution-page .solution-hero::after,
.solution-page .solution-hero::before {
    content: none;
}

.solution-page .solution-hero > .container {
    position: relative;
    z-index: 1;
}

.solution-page .solution-section:first-of-type {
    margin-top: 0;
    padding-top: 3rem;
    background: transparent;
}

.solution-page .solution-flow {
    position: relative;
    background: transparent;
}

[data-bs-theme="dark"] .solution-page .solution-flow {
    background: linear-gradient(
        180deg,
        rgba(15, 17, 21, 0) 0%,
        rgba(19, 24, 32, 0.96) 16%,
        rgba(19, 24, 32, 0.96) 84%,
        rgba(15, 17, 21, 0) 100%
    );
}

.solution-page .solution-section,
.solution-page .solution-section-alt {
    background: transparent;
    /* Skip rendering off-screen sections until near viewport */
    content-visibility: auto;
    /* Hint the browser to a reasonable section height to reserve space */
    contain-intrinsic-size: 0 600px;
}

.solution-page .solution-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    color: var(--bs-body-color);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.15;
    text-transform: uppercase;
}

.solution-page .solution-pill .scramble-line {
    display: inline-block;
}

.solution-page .solution-pill .scramble-line__text {
    font: inherit;
    color: inherit;
    white-space: pre;
    min-height: 1em;
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

.solution-page .solution-pill .scramble-line[data-phase="scrambling"] .scramble-line__text {
    text-shadow:
        0 0 10px rgba(67, 196, 0, 0.45),
        0 0 18px rgba(255, 206, 140, 0.35),
        0 0 26px rgba(120, 206, 255, 0.3);
}

.solution-page .solution-pill .scramble-line[data-phase="settling"] .scramble-line__text {
    text-shadow: 0 0 10px rgba(67, 196, 0, 0.2);
}

[data-bs-theme="light"] .solution-page .solution-pill,
:root .solution-page .solution-pill {
    background: rgba(17, 19, 21, 0.88);
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

[data-bs-theme="dark"] .solution-page .solution-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    color: #fff;
}

/* Rotating halo to match homepage/product pill border effect */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .solution-page .solution-pill {
        position: relative;
        isolation: isolate;
        border: none !important;
    }

    .solution-page .solution-pill::after {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: inherit;
        background: conic-gradient(
            from var(--pill-angle, 0deg),
            transparent 0%,
            transparent 78%,
            rgba(9, 184, 80, 0.3) 82%,
            rgba(9, 184, 80, 0.85) 85%,
            rgba(228, 255, 238, 0.95) 86.5%,
            rgba(9, 184, 80, 0.85) 88%,
            rgba(9, 184, 80, 0.3) 92%,
            transparent 96%,
            transparent 100%
        );
        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 1;
        opacity: 0.85;
        animation: rotatePillBorder 6s linear infinite;
    }

    .solution-page .solution-pill > * {
        position: relative;
        z-index: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solution-page .solution-pill::after {
        animation: none;
    }
}

.solution-page .solution-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.85);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

[data-bs-theme="dark"] .solution-page .solution-chip {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

.solution-page .solution-card {
    background: #eef0f2;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15);
}

[data-bs-theme="dark"] .solution-page .solution-card {
    background: rgba(17, 23, 34, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
}

.solution-page .solution-surface {
    background: #e8eaed;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
}

[data-bs-theme="dark"] .solution-page .solution-surface {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.solution-page .solution-foundry-section .solution-card,
.solution-page .solution-foundry-section .solution-surface {
    background: #eef0f2;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
}

[data-bs-theme="dark"] .solution-page .solution-foundry-section .solution-card,
[data-bs-theme="dark"] .solution-page .solution-foundry-section .solution-surface {
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.solution-page .solution-foundry-section .solution-card::before,
.solution-page .solution-foundry-section .solution-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    background: none;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

[data-bs-theme="dark"] .solution-page .solution-foundry-section .solution-card::before,
[data-bs-theme="dark"] .solution-page .solution-foundry-section .solution-surface::before {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(100, 100, 100, 0.08) 100%
    );
}

.solution-page .solution-foundry-section .solution-card > *,
.solution-page .solution-foundry-section .solution-surface > * {
    position: relative;
    z-index: 1;
}

.solution-page .solution-grid-card {
    background: #eef0f2;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 1.5rem;
    height: 100%;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.solution-page .solution-grid-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(9, 184, 80, 0.3);
    border-color: rgba(9, 184, 80, 0.5);
}

[data-bs-theme="dark"] .solution-page .solution-grid-card {
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .solution-page .solution-grid-card:hover {
    box-shadow: 0 20px 40px rgba(9, 184, 80, 0.15), 0 0 0 0.5px rgba(9, 184, 80, 0.4);
}

.solution-page .solution-grid-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: none;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

[data-bs-theme="dark"] .solution-page .solution-grid-card::before {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(100, 100, 100, 0.08) 100%
    );
}

.solution-page .solution-grid-card > * {
    position: relative;
    z-index: 1;
}

.solution-page .solution-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    color: rgba(64, 73, 84, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-bs-theme="dark"] .solution-page .solution-icon {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    color: rgba(229, 233, 240, 0.9);
}

/* Disable backdrop-filter on icons in light mode — prevents scroll repaints/flicker */
[data-bs-theme="light"] .solution-page .solution-icon {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
}

.solution-page .solution-grid-card:hover .solution-icon {
    transform: scale(1.1);
}

.solution-page .solution-muted {
    color: rgba(0, 0, 0, 0.65);
}

[data-bs-theme="dark"] .solution-page .solution-muted {
    color: rgba(255, 255, 255, 0.65);
}

.solution-page .solution-logo {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.78);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

[data-bs-theme="dark"] .solution-page .solution-logo {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.78);
}

.solution-page .solution-table {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

[data-bs-theme="dark"] .solution-page .solution-table {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.solution-page .solution-table::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(9, 184, 80, 0.03) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(200, 200, 200, 0.06) 100%
    );
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

[data-bs-theme="dark"] .solution-page .solution-table::before {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(100, 100, 100, 0.08) 100%
    );
}

.solution-page .solution-table .table {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    --bs-table-color: rgba(0, 0, 0, 0.88);
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.03);
    --bs-table-border-color: rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] .solution-page .solution-table .table {
    --bs-table-color: rgba(255, 255, 255, 0.88);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
    --bs-table-border-color: rgba(255, 255, 255, 0.08);
}

.solution-page .solution-table .table thead th {
    color: var(--bs-body-color);
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding: 1.4rem 1.35rem;
}

[data-bs-theme="dark"] .solution-page .solution-table .table thead th {
    color: #f6f8fb;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.solution-page .solution-table .table tbody th,
.solution-page .solution-table .table tbody td {
    padding: 1.25rem 1.35rem;
    vertical-align: middle;
    color: rgba(0, 0, 0, 0.88);
}

.solution-page .solution-table .table tbody th {
    font-weight: 600;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .solution-page .solution-table .table tbody th,
[data-bs-theme="dark"] .solution-page .solution-table .table tbody td {
    color: rgba(255, 255, 255, 0.88);
}

[data-bs-theme="dark"] .solution-page .solution-table .table tbody th {
    color: #f6f8fb;
}

.solution-page .solution-table .table tbody td {
    font-size: 1.05rem;
}

.solution-page .solution-table .table tbody tr + tr th,
.solution-page .solution-table .table tbody tr + tr td {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] .solution-page .solution-table .table tbody tr + tr th,
[data-bs-theme="dark"] .solution-page .solution-table .table tbody tr + tr td {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.solution-page .solution-cta {
    background: rgba(8, 10, 12, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

[data-bs-theme="dark"] .solution-page .solution-cta {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.solution-page .solution-cta #ctaParticles {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    opacity: 0.7;
}

[data-bs-theme="dark"] .solution-page .solution-cta #ctaParticles {
    opacity: 0.6;
}

.solution-page .solution-cta > * {
    position: relative;
    z-index: 1;
}

/* CTA text color overrides for inverted background */
.solution-page .solution-cta h2 {
    color: #ffffff;
}

[data-bs-theme="dark"] .solution-page .solution-cta h2 {
    color: #0b0d12;
}

.solution-page .solution-cta .solution-muted {
    color: rgba(255, 255, 255, 0.85);
}

[data-bs-theme="dark"] .solution-page .solution-cta .solution-muted {
    color: rgba(0, 0, 0, 0.7);
}

.solution-page .solution-cta .solution-chip {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .solution-page .solution-cta .solution-chip {
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.8);
}

.solution-page .solution-video-section {
    position: relative;
    padding-top: clamp(0.75rem, 2vw, 1.5rem);
    padding-bottom: clamp(2.25rem, 5vw, 4rem);
    overflow: visible;
}

.solution-page .solution-video-section > .container {
    overflow: visible;
}

.solution-page .solution-video-window {
    position: relative;
    padding: 0;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #f8f9fa;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    overflow: hidden;
}

[data-bs-theme="dark"] .solution-page .solution-video-window {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #040608;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.solution-page .solution-video-window.solution-video-scroll-animate {
    --solution-video-scale: 0.68;
    --solution-video-reveal: 34%;
    /* Width is fixed — animating width triggers layout recalc every frame */
    width: min(96vw, 1600px);
    max-width: none;
    margin-left: 50%;
    margin-right: 0;
    transform: translate3d(-50%, 0, 0) scale(var(--solution-video-scale));
    transform-origin: center top;
    clip-path: inset(0 0 var(--solution-video-reveal) 0 round 16px);
    border-radius: 16px;
    /* Only hint GPU-composited properties */
    will-change: transform, clip-path;
}

.solution-page .solution-video-window::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% -12%, rgba(9, 184, 80, 0.06), transparent 36%),
        radial-gradient(circle at 90% 80%, rgba(59, 130, 246, 0.06), transparent 34%);
    pointer-events: none;
}

[data-bs-theme="dark"] .solution-page .solution-video-window::before {
    background:
        radial-gradient(circle at 18% -12%, rgba(255, 255, 255, 0.08), transparent 36%),
        radial-gradient(circle at 90% 80%, rgba(59, 130, 246, 0.14), transparent 34%);
}

.solution-page .solution-video-head {
    position: absolute;
    top: clamp(0.75rem, 1.5vw, 1rem);
    left: clamp(1rem, 2vw, 1.4rem);
    z-index: 3;
}

.solution-page .solution-video-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: #ffffff;
    color: #0b0d12;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-bs-theme="dark"] .solution-page .solution-video-pill {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.solution-page .solution-video-frame {
    position: relative;
    z-index: 1;
    margin-top: 0;
    border-radius: inherit;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #e9ecef;
}

[data-bs-theme="dark"] .solution-page .solution-video-frame {
    background: #05070b;
}

.solution-page .solution-video-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.82);
}

.solution-page .solution-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(72px, 9vw, 106px);
    height: clamp(72px, 9vw, 106px);
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.9);
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 2.8vw, 2.8rem);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
    z-index: 2;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.solution-page .solution-video-play:hover,
.solution-page .solution-video-play:focus {
    transform: translate(-50%, -50%) scale(1.04);
    background: #ffffff;
    color: #0b0d12;
}

.solution-page .section-bottom-sticky .bottom-pill-page {
    margin-bottom: calc(clamp(0.75rem, 1.6vw, 1.25rem) + env(safe-area-inset-bottom)) !important;
}

.solution-page .section-bottom-sticky {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    bottom: 0;
}

.solution-page .solution-shadow {
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.solution-page .solution-hero-shell {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: auto;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    display: flex;
    align-items: center;
}

.solution-page .solution-hero-shell::before {
    content: none;
}

.solution-page .solution-hero-shell::after {
    content: none;
}

.solution-page .solution-hero-shell > .row {
    position: relative;
    z-index: 1;
    width: 100%;
}

.solution-page .solution-hero-title {
    line-height: 1.05;
    margin: 1rem 0 1.4rem;
    text-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

/* Hide hero headline before JS typing animation starts — prevents blank flash */
.solution-page .solution-hero-title[data-typing-text] {
    visibility: hidden;
}

[data-bs-theme="dark"] .solution-page .solution-hero-title {
    text-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.solution-page .solution-typed-cursor {
    display: inline-block;
    margin-left: 0.02em;
    color: #7cf0ad;
    background: linear-gradient(180deg, rgba(224, 255, 239, 0.95) 0%, rgba(124, 240, 173, 0.95) 48%, rgba(9, 184, 80, 0.85) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 8px rgba(9, 184, 80, 0.55), 0 0 20px rgba(9, 184, 80, 0.35);
    filter: blur(0) drop-shadow(0 0 10px rgba(9, 184, 80, 0.35));
    animation: solution-cursor-blink 0.9s steps(1, end) infinite;
    transform-origin: center 65%;
}

.solution-page .solution-typed-cursor.solution-typed-cursor-done {
    animation: solution-cursor-fade-out 0.58s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.solution-page .solution-hero-content {
    text-align: center;
}

.solution-page .solution-lead {
    max-width: 520px;
    font-size: 1.05rem;
    color: rgba(0, 0, 0, 0.74);
    margin-left: auto;
    margin-right: auto;
}

[data-bs-theme="dark"] .solution-page .solution-lead {
    color: rgba(255, 255, 255, 0.74);
}

.solution-page .solution-hero-visual {
    position: relative;
    min-height: 420px;
}

.solution-page .solution-hero-panel {
    position: relative;
    padding: 1.6rem;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(6px);
}

[data-bs-theme="dark"] .solution-page .solution-hero-panel {
    background: rgba(16, 20, 28, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.45);
}

.solution-page .solution-hero-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 1.2rem;
}

[data-bs-theme="dark"] .solution-page .solution-hero-panel-header {
    color: rgba(255, 255, 255, 0.6);
}

.solution-page .solution-status-pill {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.65rem;
    background: rgba(9, 184, 80, 0.15);
    color: #0a5f3a;
}

[data-bs-theme="dark"] .solution-page .solution-status-pill {
    background: rgba(9, 184, 80, 0.2);
    color: #d4ffe3;
}

.solution-page .solution-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.solution-page .solution-hero-card {
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.12);
}

[data-bs-theme="dark"] .solution-page .solution-hero-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.solution-page .solution-hero-card p {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 0.35rem;
    color: rgba(0, 0, 0, 0.6);
}

[data-bs-theme="dark"] .solution-page .solution-hero-card p {
    color: rgba(255, 255, 255, 0.6);
}

.solution-page .solution-hero-card h3 {
    margin: 0;
    font-size: 1.45rem;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .solution-page .solution-hero-card h3 {
    color: #f5f7fa;
}

.solution-page .solution-hero-card span {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.6);
}

[data-bs-theme="dark"] .solution-page .solution-hero-card span {
    color: rgba(255, 255, 255, 0.6);
}

.solution-page .solution-hero-stream {
    margin-top: 1.4rem;
    display: grid;
    gap: 0.7rem;
}

.solution-page .solution-stream-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.9rem;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.75);
}

[data-bs-theme="dark"] .solution-page .solution-stream-row {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
}

.solution-page .solution-stream-chip {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(9, 184, 80, 0.15);
    color: #0a5f3a;
    font-size: 0.7rem;
}

[data-bs-theme="dark"] .solution-page .solution-stream-chip {
    background: rgba(9, 184, 80, 0.2);
    color: #d4ffe3;
}

.solution-page .solution-floating-card {
    position: absolute;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.12);
    max-width: 220px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    animation: solution-float 10s ease-in-out infinite;
}

[data-bs-theme="dark"] .solution-page .solution-floating-card {
    background: rgba(12, 17, 25, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.solution-page .solution-float-1 {
    top: 16%;
    right: -4%;
}

.solution-page .solution-float-2 {
    bottom: 6%;
    left: -6%;
    animation-delay: -4s;
}

.solution-page .solution-floating-title {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.6);
    display: block;
    margin-bottom: 0.4rem;
}

[data-bs-theme="dark"] .solution-page .solution-floating-title {
    color: rgba(255, 255, 255, 0.6);
}

.solution-page .solution-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    position: relative;
    z-index: 1;
    margin: 2rem 0 1.6rem;
}

.solution-page .solution-hero-actions .btn {
    font-weight: 600;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.01em;
    opacity: 1;
    position: relative;
    z-index: 1;
}

[data-bs-theme="dark"] .solution-page .solution-hero-actions .btn {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.solution-page .solution-hero-actions::before {
    content: none;
}

.solution-page .solution-hero-actions .btn-light {
    background: #ffffff;
    color: #0b0d12;
    border: 0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

[data-bs-theme="dark"] .solution-page .solution-hero-actions .btn-light {
    box-shadow: 0 20px 50px rgba(255, 255, 255, 0.28);
}

.solution-page .solution-hero-actions .btn-outline-light {
    border-color: rgba(0, 0, 0, 0.3);
    color: var(--bs-body-color);
    background: rgba(0, 0, 0, 0.04);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .solution-page .solution-hero-actions .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.5);
    color: #f8fbff;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.solution-page .solution-hero-actions .btn-outline-light:hover,
.solution-page .solution-hero-actions .btn-outline-light:focus {
    border-color: rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.08);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .solution-page .solution-hero-actions .btn-outline-light:hover,
[data-bs-theme="dark"] .solution-page .solution-hero-actions .btn-outline-light:focus {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.solution-page .solution-hero-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.9rem;
    margin-top: 1.5rem;
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.solution-page .solution-hero-metrics::before {
    content: none;
}

.solution-page .solution-hero-metrics .solution-surface {
    min-width: 150px;
    text-align: center;
    /* backdrop-filter removed in light mode — causes repaints while scrolling */
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 1;
}

[data-bs-theme="dark"] .solution-page .solution-hero-metrics .solution-surface {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.solution-page .solution-hero-metrics .solution-muted {
    color: rgba(0, 0, 0, 0.7);
}

[data-bs-theme="dark"] .solution-page .solution-hero-metrics .solution-muted {
    color: rgba(255, 255, 255, 0.75);
}

.solution-page .solution-hero-metrics.solution-hero-metrics--strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    max-width: 980px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

[data-bs-theme="dark"] .solution-page .solution-hero-metrics.solution-hero-metrics--strip {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.solution-page .solution-hero-metrics.solution-hero-metrics--strip .solution-surface {
    min-width: 0;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: clamp(1.65rem, 2.4vw, 2.35rem) clamp(1rem, 2vw, 1.6rem) !important;
}

.solution-page .solution-hero-metrics.solution-hero-metrics--strip .solution-surface + .solution-surface {
    border-left: 1px solid rgba(0, 0, 0, 0.16);
}

[data-bs-theme="dark"] .solution-page .solution-hero-metrics.solution-hero-metrics--strip .solution-surface + .solution-surface {
    border-left-color: rgba(255, 255, 255, 0.14);
}

.solution-page .solution-hero-metrics.solution-hero-metrics--strip .solution-hero-metric-icon {
    width: clamp(3.35rem, 4.6vw, 4.4rem);
    height: clamp(3.35rem, 4.6vw, 4.4rem);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.05rem;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.16);
    color: rgba(0, 0, 0, 0.72);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        0 10px 20px rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] .solution-page .solution-hero-metrics.solution-hero-metrics--strip .solution-hero-metric-icon {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.86);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.08),
        0 10px 20px rgba(0, 0, 0, 0.26);
}

.solution-page .solution-hero-metrics.solution-hero-metrics--strip .solution-hero-metric-icon i {
    font-size: clamp(1.35rem, 1.8vw, 1.9rem);
    line-height: 1;
}

.solution-page .solution-hero-metrics.solution-hero-metrics--strip h5 {
    margin-bottom: 0.35rem !important;
    font-size: clamp(1.2rem, 1.7vw, 2rem);
    line-height: 1.1;
    font-weight: 600;
}

.solution-page .solution-hero-metrics.solution-hero-metrics--strip .solution-muted {
    font-size: clamp(0.92rem, 1.1vw, 1.2rem);
    line-height: 1.35;
}

@media (max-width: 991px) {
    .solution-page .solution-hero-shell {
        min-height: auto;
        padding: clamp(2rem, 6vw, 3rem);
    }

    .solution-page .solution-hero-actions,
    .solution-page .solution-hero-metrics {
        justify-content: center;
        text-align: center;
        max-width: none;
    }

    .solution-page .solution-hero-visual {
        margin-top: 2rem;
        min-height: 360px;
    }

    .solution-page .solution-floating-card {
        position: static;
        margin-top: 1rem;
        max-width: none;
        animation: none;
    }

    .solution-page .solution-video-frame {
        margin-top: 3rem;
    }
}

@media (max-width: 767.98px) {
    .solution-page .solution-hero-metrics.solution-hero-metrics--strip {
        grid-template-columns: 1fr;
    }

    .solution-page .solution-hero-metrics.solution-hero-metrics--strip .solution-surface + .solution-surface {
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.16);
    }

    [data-bs-theme="dark"] .solution-page .solution-hero-metrics.solution-hero-metrics--strip .solution-surface + .solution-surface {
        border-top-color: rgba(255, 255, 255, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    .solution-page .solution-video-window.solution-video-scroll-animate {
        --solution-video-width: 96vw;
        --solution-video-scale: 1;
        --solution-video-reveal: 0%;
        --solution-video-radius: 16px;
    }
}

@keyframes solution-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes solution-cursor-blink {
    0%,
    49% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0;
    }
}

@keyframes solution-cursor-fade-out {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) drop-shadow(0 0 10px rgba(9, 184, 80, 0.35));
    }
    35% {
        opacity: 1;
        transform: translate3d(0, -0.02em, 0) scale(1.12);
        filter: blur(0.15px) drop-shadow(0 0 15px rgba(9, 184, 80, 0.5));
    }
    100% {
        opacity: 0;
        transform: translate3d(0, -0.18em, 0) scale(0.72);
        filter: blur(1.8px) drop-shadow(0 0 18px rgba(9, 184, 80, 0));
    }
}

/* Silver accent effect for GPU specs */
.hero-title-accent-silver {
    font-weight: 700;
    background: linear-gradient(135deg, 
        #4a5568 0%, 
        #2d3748 25%, 
        #1a202c 50%, 
        #2d3748 75%, 
        #4a5568 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 8px rgba(74, 85, 104, 0.5));
    letter-spacing: -0.02em;
    position: relative;
}

[data-bs-theme="dark"] .hero-title-accent-silver {
    background: linear-gradient(135deg, 
        #a8b2c1 0%, 
        #e8ecf0 25%, 
        #8a95a5 50%, 
        #d4dce6 75%, 
        #9ba5b3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 8px rgba(168, 178, 193, 0.5));
}

@supports not (-webkit-background-clip: text) {
    .hero-title-accent-silver {
        color: #2d3748;
        text-shadow: 0 2px 12px rgba(45, 55, 72, 0.6);
    }
    [data-bs-theme="dark"] .hero-title-accent-silver {
        color: #c0c8d4;
        text-shadow: 0 2px 12px rgba(192, 200, 212, 0.6);
    }
}

.solution-anchor-section {
    scroll-margin-top: 136px;
}

@media (max-width: 991.98px) {
    .solution-anchor-section {
        scroll-margin-top: 84px;
    }
}