/* =========================================
   Cyber Range Page Styles
   ========================================= */

.cyber-range-page {
    background-color: #050A22;
}

/* Hero */
.cyber-range-hero__title {
    line-height: 1;
}

.cyber-range-hero__description {
    color: #9B9DA7;
}

/* Pain Points Grid */
.cyber-range-ppg__eyebrow {
    color: #FF7F85;
    border-color: #ff7f852b;
    background-color: #ff7f851a;
}

.cyber-range-ppg__background {
    width: 662px;
    min-width: 662px;
}

/* Legacy Problem Section - dashed border via CSS masking */
.cyber-range-legacy-box {
    position: relative;
    background-image: linear-gradient(to bottom, rgba(255, 127, 133, 0), rgba(255, 127, 133, 0.1));
}

.cyber-range-legacy-box::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, #ff7f8519, #ff7f8519);
    -webkit-mask:
        repeating-linear-gradient(to right, #000 0 3px, transparent 3px 8px) top / 100% 1px no-repeat,
        repeating-linear-gradient(to right, #000 0 3px, transparent 3px 8px) bottom / 100% 1px no-repeat,
        repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 8px) left / 1px 100% no-repeat,
        repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 8px) right / 1px 100% no-repeat;
    mask:
        repeating-linear-gradient(to right, #000 0 3px, transparent 3px 8px) top / 100% 1px no-repeat,
        repeating-linear-gradient(to right, #000 0 3px, transparent 3px 8px) bottom / 100% 1px no-repeat,
        repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 8px) left / 1px 100% no-repeat,
        repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 8px) right / 1px 100% no-repeat;
}

/* Exercise step cards */
.cyber-range-steps .cyber-range-step {
    position: relative;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    border-radius: 12px;
    outline: none;
    transition: background-color .25s ease, border-color .25s ease, transform .08s ease;
}

.cyber-range-steps .cyber-range-step:active {
    transform: translateY(1px);
}

.cyber-range-steps .cyber-range-step.is-active {
    background-color: #42236669;
    border: 1px solid #ffffff1f;
}

.cyber-range-steps .cyber-range-step:not(.is-active) {
    background-color: transparent;
    border: 1px solid transparent;
}

.cyber-range-steps .cyber-range-step-badge {
    color: #9B9DA7;
    background-color: #373b4e;
}

.cyber-range-steps .cyber-range-step.is-active .cyber-range-step-badge {
    color: #ffffff;
    background-color: #a145d3;
}

.cyber-range-steps .cyber-range-step-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    overflow: hidden;
    opacity: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 12px 12px;
    transition: opacity .2s ease;
}

.cyber-range-steps .cyber-range-step.is-active .cyber-range-step-progress {
    opacity: 1;
}

.cyber-range-steps .cyber-range-step-progress-bar {
    width: 0%;
    height: 100%;
    background-color: #a145d3;
    will-change: width;
}

/* Feature Cards */
.cyber-range-fc__grid {
    border-color: #373B4E;
}

.cyber-range-fc__card {
    border-color: #373b4e;
}

.cyber-range-fc__corner-dot {
    background-color: #a145d3;
}

/* Process section */
.cyber-range-process-step__subtitle {
    color: #9B9DA7;
}

.cyber-range-process-preview {
    background-color: #050A22;
    border-color: rgba(255, 255, 255, 0.08);
    min-height: 464px;
}

.cyber-range-process-preview__glow {
    width: 291px;
    height: 232px;
    filter: blur(100px);
}

.cyber-range-process-mobile__badge {
    background-color: #373b4e;
    color: #9b9da7;
}

.cyber-range-process-mobile__subtitle {
    color: #ffffff99;
}

.cyber-range-process-mobile__media {
    background-color: #050A22;
    border-color: rgba(255, 255, 255, 0.08);
    min-height: 248px;
}

.cyber-range-process-mobile__glow {
    width: 200px;
    height: 160px;
    filter: blur(80px);
}

.cyber-range-page .readiness-cta__card {
    display: flex;
    align-items: center;
}

.logo-slider .logo-slider--overlay-left {
    background-image: linear-gradient(to right, #050a22 0%, rgba(2, 6, 25, 0) 100%)
}

.logo-slider .logo-slider--overlay-right {
    background-image: linear-gradient(to left, #050a22 0%, rgba(2, 6, 25, 0) 100%)
}