/* ===== SCROLL-DRIVEN BACKGROUND TEXT ===== */

.scroll-text-wrapper {
    position: relative;
    overflow: hidden;
    padding: var(--section-padding) 0 clamp(40px, 5vw, 60px);
    background: linear-gradient(180deg, #023755 0%, #012e48 40%, #012e48 60%, #023755 100%);
}

.scroll-text-wrapper--blue {
    background: linear-gradient(180deg, #023755 0%, #01304a 40%, #01304a 60%, #023755 100%);
}

.scroll-text-wrapper--accent {
    background: linear-gradient(180deg, #023755 0%, #012c45 40%, #012c45 60%, #023755 100%);
}

.scroll-text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(100px, 16vw, 240px);
    letter-spacing: -0.04em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.12);
    user-select: none;
    will-change: transform;
    transition: none;
}

.scroll-text--filled {
    -webkit-text-stroke: none;
    color: rgba(255, 255, 255, 0.06);
}

.scroll-text--gradient {
    -webkit-text-stroke: 1.5px rgba(0, 229, 176, 0.1);
    color: transparent;
}

.scroll-text-wrapper .section-header {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

.showcase,
.demos,
.comparison {
    position: relative;
}

.showcase > .showcase__categories,
.showcase > .showcase__grid,
.demos > .container > .demos__grid,
.demos > .container > .demos__cta,
.comparison > .container > .comparison__grid {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .scroll-text {
        font-size: clamp(50px, 12vw, 100px);
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
    }
    .scroll-text-wrapper {
        padding: clamp(60px, 10vh, 100px) 0 clamp(24px, 4vw, 40px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-text {
        display: none;
    }
}