.dual-roadmap {
    padding: 28px 28px 22px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at 82% 28%,
            rgba(0,255,209,.06),
            transparent 35%
        ),
        rgba(255,255,255,.025);

    overflow: hidden;
}


/* ======================================================
   HEADER
   ====================================================== */

.dr-header {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: flex-start;
}

.dr-kicker {
    display: block;
    margin-bottom: 7px;

    font-size: 10px;
    letter-spacing: .17em;

    color: rgba(220,234,235,.60);
}

.dr-title {
    margin: 0;

    font-size: 17px;
    font-weight: 650;
    line-height: 1.35;
}

.dr-gap {
    flex: 0 0 auto;
    text-align: right;
}

.dr-gap-label {
    display: block;

    margin-bottom: 4px;

    font-size: 10px;
    font-weight: 750;
    letter-spacing: .11em;

    color: rgba(220,231,233,.55);
}

.dr-gap strong {
    display: block;

    font-size: 20px;
    line-height: 1;

    font-weight: 800;
}

.dr-gap small {
    display: block;

    margin-top: 5px;

    font-size: 11.5px;

    color: rgba(220,231,233,.53);
}


/* ======================================================
   LEGEND
   ====================================================== */

.dr-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 21px;

    margin-top: 29px;
    margin-bottom: 37px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .075em;

    color: rgba(225,235,236,.60);
}

.dr-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dr-legend-dot {
    width: 10px;
    height: 10px;

    box-sizing: border-box;

    display: inline-block;
}

.dr-legend-measured {
    border-radius: 50%;

    background: #dffdf7;

    border: 2px solid rgba(56,211,184,.96);

    box-shadow:
        0 0 9px rgba(56,211,184,.48);
}

.dr-legend-target {
    transform: rotate(45deg);

    border: 2px solid rgba(255,190,92,.94);

    background: #0b181c;
}

.dr-legend-crqc {
    border-radius: 50%;

    background: #ff8a8a;

    border: 2px solid rgba(255,91,91,.96);

    box-shadow:
        0 0 9px rgba(255,91,91,.50);
}


/* ======================================================
   SECTION
   ====================================================== */

.dr-section + .dr-section {
    margin-top: 30px;
    padding-top: 28px;

    border-top: 1px solid rgba(255,255,255,.07);
}

.dr-section-title {
    margin-bottom: 5px;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .075em;
}

.dr-section-desc {
    margin-bottom: 8px;

    font-size: 12.5px;
    line-height: 1.45;

    color: rgba(220,231,233,.48);
}


/* ======================================================
   TIMELINE STAGE

   All labels live in controlled lanes.
   The line itself is always at y=118px.
   ====================================================== */

.dr-stage {
    position: relative;

    height: 255px;

    margin-top: 4px;
}

.dr-line {
    position: absolute;

    left: 1%;
    right: 1%;

    top: 118px;

    height: 6px;

    border-radius: 999px;

    background: rgba(255,255,255,.08);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025);
}

.dr-line.logical {
    background:
        linear-gradient(
            90deg,
            rgba(56,211,184,.58) 0%,
            rgba(56,211,184,.52) 30%,
            rgba(255,190,92,.60) 52%,
            rgba(255,91,91,.72) 63%,
            rgba(255,91,91,.72) 100%
        );
}

.dr-line.physical {
    background:
        linear-gradient(
            90deg,
            rgba(56,211,184,.55),
            rgba(255,190,92,.62)
        );
}


/* Flying highlight */

.dr-line::after {
    content: "";

    position: absolute;

    top: -7px;
    left: 0;

    width: 72px;
    height: 18px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.92),
            transparent
        );

    filter: blur(2px);

    animation: drSweep 4.8s ease-in-out infinite;
}

@keyframes drSweep {

    0% {
        left: 0;
        opacity: 0;
    }

    10% {
        opacity: .72;
    }

    88% {
        opacity: .72;
    }

    100% {
        left: 94%;
        opacity: 0;
    }

}


/* ======================================================
   POINTS
   ====================================================== */

.dr-point {
    position: absolute;

    /*
     * Point is a child of .dr-line.
     * Therefore it must sit on the line itself,
     * not another 120px below it.
     */
    top: 50%;

    transform: translate(-50%, -50%);

    z-index: 5;
}

.dr-node {
    width: 14px;
    height: 14px;

    box-sizing: border-box;

    background: #09171b;
}


/* target */

.dr-point.target .dr-node {
    transform: rotate(45deg);

    border: 2px solid rgba(255,190,92,.96);

    background: #0b181c;

    box-shadow:
        0 0 0 4px rgba(255,190,92,.05),
        0 0 15px rgba(255,190,92,.20);
}


/* measured */

.dr-point.measured .dr-node {
    border-radius: 50%;

    border: 3px solid rgba(56,211,184,.96);

    background: #dffdf7;

    box-shadow:
        0 0 0 5px rgba(56,211,184,.10),
        0 0 18px rgba(56,211,184,.38);
}


/* current */

.dr-point.current .dr-node {
    animation:
        drCurrentPulse
        1.9s
        ease-in-out
        infinite;
}

@keyframes drCurrentPulse {

    0%, 100% {
        box-shadow:
            0 0 0 4px rgba(56,211,184,.08),
            0 0 13px rgba(56,211,184,.35);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(56,211,184,.025),
            0 0 26px rgba(56,211,184,.78);
    }

}


/* CRQC */

.dr-point.crqc .dr-node {
    width: 15px;
    height: 15px;

    border-radius: 50%;

    border: 3px solid rgba(255,91,91,.96);

    background: #ff8a8a;

    animation:
        drCrqcPulse
        1.9s
        ease-in-out
        infinite;
}

@keyframes drCrqcPulse {

    0%, 100% {
        box-shadow:
            0 0 0 4px rgba(255,91,91,.08),
            0 0 13px rgba(255,91,91,.38);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(255,91,91,.025),
            0 0 26px rgba(255,91,91,.76);
    }

}


/* ======================================================
   LABEL SYSTEM

   Year = always close to node.

   Information = placed inside a fixed lane:
   top-a / top-b / bottom-a / bottom-b.
   ====================================================== */

.dr-year {
    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    white-space: nowrap;

    font-size: 12px;
    line-height: 1;

    font-weight: 800;

    color: rgba(255,202,122,.98);
}

.dr-year.top {
    bottom: 21px;
}

.dr-year.bottom {
    top: 21px;
}


/* Info cards */

.dr-info {
    position: absolute;

    left: 50%;

    width: 170px;

    transform: translateX(-50%);

    text-align: center;

    font-size: 10px;
    line-height: 1.3;
}

.dr-info.top-a {
    bottom: 47px;
}

.dr-info.top-b {
    bottom: 78px;
}

.dr-info.bottom-a {
    top: 47px;
}

.dr-info.bottom-b {
    top: 78px;
}

.dr-system {
    display: block;

    font-size: 11.5px;
    line-height: 1.25;

    color: rgba(239,247,247,.78);
}

.dr-value {
    display: block;

    margin-top: 3px;

    font-size: 10.5px;
    line-height: 1.25;

    color: rgba(220,231,233,.48);
}

.dr-info-item + .dr-info-item {
    margin-top: 7px;
}


/* ======================================================
   CURRENT
   ====================================================== */

.dr-current-label {
    position: absolute;

    left: 50%;
    bottom: 25px;

    transform: translateX(-50%);

    padding: 0;

    border: 0;

    border-radius: 0;

    background: transparent;

    white-space: nowrap;

    font-size: 9px;
    line-height: 1;

    font-weight: 800;
    letter-spacing: .09em;

    color: rgba(128,247,221,.96);

    animation:
        drCurrentText
        1.9s
        ease-in-out
        infinite;
}

@keyframes drCurrentText {

    0%, 100% {
        opacity: .62;

        text-shadow:
            0 0 4px
            rgba(56,211,184,.20);
    }

    50% {
        opacity: 1;

        text-shadow:
            0 0 9px
            rgba(56,211,184,.90);
    }

}

.dr-current-info {
    position: absolute;

    left: 50%;
    top: 32px;

    width: 165px;

    transform: translateX(-50%);

    text-align: center;
}

.dr-current-info strong {
    display: block;

    margin-bottom: 7px;

    font-size: 9px;

    letter-spacing: .075em;

    color: rgba(108,232,206,.94);
}


/* ======================================================
   CRQC
   ====================================================== */

.dr-crqc-label {
    position: absolute;

    left: 50%;
    bottom: 23px;

    transform: translateX(-50%);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .09em;

    color: #ff8a8a;

    animation:
        drCrqcText
        1.9s
        ease-in-out
        infinite;
}

@keyframes drCrqcText {

    0%, 100% {
        opacity: .55;

        text-shadow:
            0 0 4px
            rgba(255,91,91,.25);
    }

    50% {
        opacity: 1;

        text-shadow:
            0 0 9px
            rgba(255,91,91,.90),
            0 0 16px
            rgba(255,91,91,.50);
    }

}

.dr-crqc-info {
    position: absolute;

    left: 50%;
    top: 31px;

    width: 170px;

    transform: translateX(-50%);

    text-align: center;
}


/* ======================================================
   DISCLAIMER
   ====================================================== */

.dr-disclaimer {
    margin-top: 5px;

    padding-top: 17px;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    font-size: 12.5px;
    line-height: 1.65;

    color: rgba(220,231,233,.48);
}


/* ======================================================
   MOBILE
   ====================================================== */

@media screen and (max-width: 820px) {

    .dr-page {
        padding: 18px 12px 50px;
    }

    .dual-roadmap {
        padding: 20px 16px;
    }

    .dr-header {
        display: block;
    }

    .dr-gap {
        margin-top: 14px;

        text-align: left;
    }

    .dr-legend {
        margin-top: 25px;
        margin-bottom: 28px;
    }

    .dr-section-desc {
        margin-bottom: 20px;
    }

    .dr-stage {
        height: 610px;
    }

    .dr-line {
        top: 0;
        bottom: 0;

        left: 13px;
        right: auto;

        width: 3px;
        height: auto;
    }

    .dr-line.logical {
        background:
            linear-gradient(
                180deg,
                rgba(56,211,184,.55),
                rgba(255,190,92,.58) 52%,
                rgba(255,91,91,.72) 63%,
                rgba(255,91,91,.72)
            );
    }

    .dr-line.physical {
        background:
            linear-gradient(
                180deg,
                rgba(56,211,184,.55),
                rgba(255,190,92,.60)
            );
    }

    .dr-line::after {
        display: none;
    }

    .dr-point {
        left: 13px !important;
        top: var(--mobile-y) !important;
    }

    .dr-year.top,
    .dr-year.bottom {
        left: 25px;
        top: -5px;
        bottom: auto;

        transform: none;
    }

    .dr-info,
    .dr-info.top-a,
    .dr-info.top-b,
    .dr-info.bottom-a,
    .dr-info.bottom-b,
    .dr-current-info,
    .dr-crqc-info {

        left: 25px;
        top: 13px;
        bottom: auto;

        width:
            calc(100vw - 105px);

        transform: none;

        text-align: left;
    }

    .dr-current-label,
    .dr-crqc-label {

        left: 25px;
        bottom: 15px;

        transform: none;
    }

}



/* ==========================================================
   DYNAMIC DUAL ROADMAP — PRODUCTION ISOLATION
   ========================================================== */

.dual-roadmap {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.dual-roadmap-header {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: flex-start;
}

.dual-roadmap-title {
    display: block;
    margin: 0;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.35;
}

/*
 * Dynamic CRQC boundary.
 * The CSS variable is supplied by the backend.
 */
.dual-roadmap .dr-line.logical {
    background:
        linear-gradient(
            90deg,
            rgba(56,211,184,.58) 0%,
            rgba(56,211,184,.52) 30%,
            rgba(255,190,92,.60)
                calc(var(--crqc-position) - 4%),
            rgba(255,91,91,.72)
                var(--crqc-position),
            rgba(255,91,91,.72) 100%
        );
}

/*
 * Keep the sweep inside the trajectory.
 */
.dual-roadmap .dr-line {
    overflow: visible;
}

.dual-roadmap .dr-line::after {
    left: 0;
}

/*
 * The roadmap lives inside the existing threat panel,
 * therefore no external page wrapper is used.
 */
.dual-roadmap .dr-section:last-of-type {
    margin-bottom: 0;
}

@media screen and (max-width: 820px) {
    .dual-roadmap-header {
        display: block;
    }

    .dual-roadmap .dr-gap {
        margin-top: 14px;
        text-align: left;
    }
}


/* ==========================================================
   ROADMAP FINE TUNING — 2026-09-10
   Slight separation from the PQC row above.
   ========================================================== */

.dual-roadmap {
    margin-top: 10px;
}






/* ==========================================================
   EXACT MOBILE ROADMAP ALIGNMENT — 2026-09-11

   .dr-point is a CHILD of .dr-line.
   Therefore its horizontal coordinate must be 0 relative
   to the trajectory line. translateX(-50%) then places the
   centre of every node exactly on the line axis.
   ========================================================== */

@media screen and (max-width: 820px) {

    .dual-roadmap .dr-line {
        left: 13px;
    }

    .dual-roadmap .dr-point {
        left: 50% !important;
    }

}


/* 2026-09-19: keep year markers on timeline, put variable-length targets in flow. */
@media screen and (min-width: 821px) {
    .dual-roadmap .dr-point.target .dr-target-inline { display: none; }
    .dual-roadmap .dr-target-cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: 8px 0 20px;
    }
    .dual-roadmap .dr-target-card {
        min-width: 0;
        padding: 12px 14px;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 9px;
        background: rgba(255,255,255,.025);
        overflow-wrap: anywhere;
    }
    .dual-roadmap .dr-target-card-year {
        margin-bottom: 9px;
        color: rgba(255,202,122,.98);
        font-size: 11px;
        font-weight: 800;
    }
    .dual-roadmap .dr-target-card-item + .dr-target-card-item { margin-top: 9px; }
    .dual-roadmap .dr-target-card .dr-system,
    .dual-roadmap .dr-target-card .dr-value { line-height: 1.4; }
}
@media screen and (min-width: 821px) and (max-width: 1100px) {
    .dual-roadmap .dr-target-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 820px) {
    .dual-roadmap .dr-target-cards { display: none; }
}

/* Roadmap card interactions. Trajectory geometry is unchanged. */
.dual-roadmap .dr-target-card-item[hidden] {
    display: none !important;
}

.dual-roadmap .dr-jump-point {
    cursor: pointer;
}

.dual-roadmap .dr-jump-point:focus-visible .dr-node,
.dual-roadmap .dr-jump-point:hover .dr-node {
    outline: 2px solid rgba(255,202,122,.9);
    outline-offset: 5px;
}

.dual-roadmap .dr-target-card {
    scroll-margin-block: 24px;
}

.dual-roadmap .dr-target-card.is-selected {
    border-color: rgba(255,202,122,.9);
    box-shadow: 0 0 0 2px rgba(255,202,122,.15);
    background: rgba(255,202,122,.075);
}

.dual-roadmap .dr-card-expand {
    display: block;
    margin-top: 12px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: rgba(255,202,122,.98);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.dual-roadmap .dr-card-expand:hover {
    text-decoration: underline;
}

.dual-roadmap .dr-card-expand:focus-visible {
    outline: 2px solid rgba(255,202,122,.98);
    outline-offset: 3px;
}

@media screen and (max-width: 820px) {
    .dual-roadmap .dr-target-cards {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin: 8px 0 20px;
    }

    .dual-roadmap .dr-target-card {
        min-width: 0;
        padding: 12px 14px;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 9px;
        background: rgba(255,255,255,.025);
        overflow-wrap: anywhere;
    }

    .dual-roadmap .dr-target-card-year {
        margin-bottom: 9px;
        color: rgba(255,202,122,.98);
        font-size: 11px;
        font-weight: 800;
    }

    .dual-roadmap .dr-target-card-item + .dr-target-card-item {
        margin-top: 9px;
    }

    .dual-roadmap .dr-target-card .dr-system,
    .dual-roadmap .dr-target-card .dr-value {
        line-height: 1.4;
    }

    .dual-roadmap .dr-point.target .dr-target-inline {
        display: none;
    }
}

/* Quantum Radar: название слева, количество кубитов справа */
.dual-roadmap .dr-target-card-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.dual-roadmap .dr-target-card-item .dr-system {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dual-roadmap .dr-target-card-item .dr-value {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

@media screen and (max-width: 480px) {
    .dual-roadmap .dr-target-card-item {
        gap: 8px;
    }

    .dual-roadmap .dr-target-card-item .dr-value {
        white-space: normal;
    }
}