/* R04 scene pages: industrial world model and restricted-space inspection.
   Shared typography, spacing, buttons and shells live in r04.css. */

.r04-world-model,
.r04-low-altitude {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

.r04-world-model :where(figure, ul),
.r04-low-altitude :where(figure, ul) {
    margin: 0;
}

.r04-world-model :where(svg, picture, img),
.r04-low-altitude :where(svg, picture, img) {
    max-width: 100%;
}

.r04-world-model :where(.r04-section-split > *, .r04-world-hero-layout > *, .r04-scene-panel > *),
.r04-low-altitude :where(.r04-low-hero-layout > *, .r04-hotspot-story > *, .r04-section-split > *) {
    min-width: 0;
}

/* -------------------------------------------------------------------------- */
/* Industrial world model: full-page dark mechanism language                  */
/* -------------------------------------------------------------------------- */

.r04-world-model {
    --r04-world-bg: #020c1b;
    --r04-world-bg-raised: #06162b;
    --r04-world-panel: rgba(9, 31, 56, 0.74);
    --r04-world-panel-strong: rgba(10, 37, 67, 0.9);
    --r04-world-line: rgba(151, 194, 232, 0.2);
    --r04-world-line-strong: rgba(111, 186, 248, 0.48);
    --r04-world-text: #edf5fc;
    --r04-world-copy: #aebfd1;
    --r04-world-muted: #7f96ae;
    --r04-world-blue: #48a9ff;
    --r04-world-blue-2: #1f78d6;
    --r04-world-orange: var(--r04-orange, #ed5a19);
    color: var(--r04-world-text);
    background:
        radial-gradient(circle at 78% 18%, rgba(28, 111, 186, 0.13), transparent 32%),
        radial-gradient(circle at 13% 55%, rgba(24, 83, 139, 0.1), transparent 30%),
        var(--r04-world-bg);
    color-scheme: dark;
}

.r04-world-model .r04-section {
    position: relative;
    color: var(--r04-world-text);
    background: transparent;
    border-top: 1px solid var(--r04-world-line);
}

.r04-world-model .r04-section-heading h2,
.r04-world-model .r04-section-heading p,
.r04-world-model .r04-hero-copy h1,
.r04-world-model .r04-hero-copy p {
    color: inherit;
}

.r04-world-model .r04-section-heading > p:last-child,
.r04-world-model .r04-hero-lead {
    color: var(--r04-world-copy);
}

.r04-world-model .r04-kicker {
    color: #69b9ff;
}

.r04-world-model .r04-button-secondary {
    color: var(--r04-world-text);
    background: rgba(4, 17, 33, 0.5);
    border-color: rgba(231, 243, 253, 0.42);
}

.r04-world-model .r04-button-secondary:hover,
.r04-world-model .r04-button-secondary:focus-visible {
    color: #fff;
    background: rgba(75, 165, 239, 0.13);
    border-color: rgba(231, 243, 253, 0.72);
}

body.page-world-model,
body.page-r04-world-model {
    background: #020c1b;
}

body.page-world-model main,
body.page-r04-world-model main {
    background: #020c1b;
}

body.page-world-model .site-header:not(.mega-open),
body.page-r04-world-model .site-header:not(.mega-open) {
    color: #edf5fc;
    background: rgba(2, 12, 27, 0.74);
    border-bottom-color: rgba(173, 205, 232, 0.14);
    box-shadow: none;
    backdrop-filter: blur(18px) saturate(0.85);
}

body.page-world-model .site-header.is-scrolled:not(.mega-open),
body.page-world-model .site-header.menu-open:not(.mega-open),
body.page-r04-world-model .site-header.is-scrolled:not(.mega-open),
body.page-r04-world-model .site-header.menu-open:not(.mega-open) {
    background: rgba(2, 12, 27, 0.96);
    border-bottom-color: rgba(173, 205, 232, 0.2);
}

body.page-world-model .site-header:not(.mega-open) :where(.brand, .nav-link, .menu-toggle),
body.page-r04-world-model .site-header:not(.mega-open) :where(.brand, .nav-link, .menu-toggle) {
    color: rgba(237, 245, 252, 0.82);
}

body.page-world-model .site-header:not(.mega-open) .brand-cn,
body.page-r04-world-model .site-header:not(.mega-open) .brand-cn {
    color: rgba(237, 245, 252, 0.58);
}

body.page-world-model .site-header:not(.mega-open) .nav-link:hover,
body.page-world-model .site-header:not(.mega-open) .nav-link:focus-visible,
body.page-world-model .site-header:not(.mega-open) .nav-link.is-current,
body.page-r04-world-model .site-header:not(.mega-open) .nav-link:hover,
body.page-r04-world-model .site-header:not(.mega-open) .nav-link:focus-visible,
body.page-r04-world-model .site-header:not(.mega-open) .nav-link.is-current {
    color: #fff;
}

body.page-world-model .site-header:not(.mega-open) .menu-toggle,
body.page-r04-world-model .site-header:not(.mega-open) .menu-toggle {
    border-color: rgba(237, 245, 252, 0.3);
}

body.page-world-model .mobile-menu,
body.page-r04-world-model .mobile-menu {
    color: var(--r04-world-text, #edf5fc);
    background: rgba(2, 12, 27, 0.99);
    border-top-color: rgba(173, 205, 232, 0.16);
}

body.page-world-model .mobile-nav-group,
body.page-world-model .mobile-menu-inner > a,
body.page-r04-world-model .mobile-nav-group,
body.page-r04-world-model .mobile-menu-inner > a {
    border-color: rgba(173, 205, 232, 0.15);
}

body.page-world-model :where(.mobile-nav-parent, .mobile-nav-submenu a strong),
body.page-r04-world-model :where(.mobile-nav-parent, .mobile-nav-submenu a strong) {
    color: #edf5fc;
}

body.page-world-model .mobile-nav-submenu a,
body.page-r04-world-model .mobile-nav-submenu a {
    border-color: rgba(173, 205, 232, 0.12);
}

body.page-world-model .mobile-nav-submenu a small,
body.page-r04-world-model .mobile-nav-submenu a small {
    color: #8fa5ba;
}

body.page-world-model .site-footer,
body.page-r04-world-model .site-footer {
    background: #010816;
    border-top: 1px solid rgba(173, 205, 232, 0.14);
}

body.page-world-model .no-script-navigation,
body.page-r04-world-model .no-script-navigation {
    border-color: rgba(173, 205, 232, 0.18);
}

body.page-world-model .no-script-navigation :where(strong, a),
body.page-r04-world-model .no-script-navigation :where(strong, a) {
    color: #dcebf7;
    border-color: rgba(173, 205, 232, 0.14);
}

.r04-world-hero {
    position: relative;
    min-height: min(880px, calc(100svh - 24px));
    display: grid;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    background: #020c1b;
    isolation: isolate;
}

.r04-world-hero::before,
.r04-world-hero::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    pointer-events: none;
}

.r04-world-hero::before {
    background:
        linear-gradient(90deg, rgba(2, 12, 27, 0.99) 0%, rgba(2, 12, 27, 0.9) 34%, rgba(2, 12, 27, 0.28) 67%, rgba(2, 12, 27, 0.08) 100%),
        linear-gradient(180deg, rgba(2, 12, 27, 0.1) 58%, #020c1b 100%);
}

.r04-world-hero::after {
    opacity: 0.2;
    background-image:
        linear-gradient(rgba(94, 163, 223, 0.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 163, 223, 0.11) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 58%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 58%, #000 100%);
}

.r04-world-hero-media,
.r04-world-hero-media picture,
.r04-world-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.r04-world-hero-media picture,
.r04-world-hero-media img {
    display: block;
}

.r04-world-hero-media {
    z-index: 0;
}

.r04-world-hero-media img {
    object-fit: cover;
    object-position: center;
    filter: saturate(0.86) contrast(1.05) brightness(0.76);
}

.r04-world-hero-layout {
    position: relative;
    z-index: 2;
    min-height: inherit;
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
    align-items: center;
    gap: clamp(42px, 6vw, 96px);
    padding-block: clamp(132px, 13vw, 190px) clamp(86px, 9vw, 132px);
}

.r04-world-hero .r04-hero-copy {
    max-width: 620px;
}

.r04-world-hero-signals {
    position: relative;
    width: 100%;
    height: clamp(430px, 38vw, 560px);
    align-self: center;
}

.r04-world-hero-signals svg {
    position: absolute;
    inset: 4% 0 11%;
    width: 100%;
    height: 85%;
    overflow: visible;
    filter: drop-shadow(0 0 14px rgba(55, 155, 242, 0.3));
}

.r04-world-hero-signals path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.r04-world-signal-path {
    stroke: #ff7a32;
    stroke-width: 4;
    stroke-dasharray: 12 14;
    animation: r04-scene-path-flow 6s linear infinite;
}

.r04-world-signal-branch {
    stroke: #56b5ff;
    stroke-width: 2;
    stroke-dasharray: 5 10;
}

.r04-world-hero-signals circle {
    fill: #ff7a32;
    stroke: rgba(255, 236, 222, 0.9);
    stroke-width: 3;
    filter: drop-shadow(0 0 12px rgba(255, 104, 32, 0.85));
}

.r04-world-hero-signals figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 420px;
    color: rgba(225, 238, 249, 0.55);
    font-size: 11px;
    line-height: 1.55;
    text-align: right;
}

.r04-world-signal-labels,
.r04-running-world-nodes {
    padding: 0;
    list-style: none;
}

.r04-world-signal-label {
    position: absolute;
    padding: 8px 12px;
    color: #e9f5ff;
    background: rgba(4, 20, 38, 0.78);
    border: 1px solid rgba(100, 181, 248, 0.35);
    border-radius: 999px;
    box-shadow: 0 12px 34px rgba(0, 5, 15, 0.34);
    backdrop-filter: blur(10px);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

.r04-world-signal-label-event { top: 65%; left: 3%; }
.r04-world-signal-label-object { top: 47%; left: 32%; }
.r04-world-signal-label-rule { top: 20%; right: 21%; }
.r04-world-signal-label-future { top: 4%; right: 0; }

.r04-world-model .r04-world-questions {
    background:
        radial-gradient(circle at 0% 68%, rgba(38, 132, 206, 0.14), transparent 31%),
        linear-gradient(180deg, #041328, #031024);
}

.r04-world-questions .r04-section-split,
.r04-world-boundaries .r04-section-split {
    grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(56px, 8vw, 132px);
}

.r04-world-model .r04-question-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.r04-world-model .r04-question-list li {
    position: relative;
    min-height: 78px;
    display: flex;
    align-items: center;
    padding: 18px 52px 18px 28px;
    color: #dfeefb;
    border-top: 1px solid var(--r04-world-line);
    font-size: clamp(17px, 1.45vw, 21px);
    font-weight: 560;
    line-height: 1.55;
}

.r04-world-model .r04-question-list li:last-child {
    border-bottom: 1px solid var(--r04-world-line);
}

.r04-world-model .r04-question-list li::before {
    position: absolute;
    top: 22%;
    bottom: 22%;
    left: 0;
    width: 2px;
    background: linear-gradient(#65bbff, #2079d0);
    content: "";
    box-shadow: 0 0 18px rgba(72, 169, 255, 0.52);
}

.r04-world-model .r04-world-composition {
    background:
        radial-gradient(circle at 50% 40%, rgba(29, 107, 175, 0.13), transparent 40%),
        #020d1f;
}

.r04-world-composition .r04-section-heading,
.r04-world-cycle .r04-section-heading,
.r04-world-prototype .r04-section-heading {
    max-width: 760px;
}

.r04-running-world {
    position: relative;
    margin-top: 0;
    padding: 18px 18px 22px;
    overflow: hidden;
    background:
        linear-gradient(rgba(86, 167, 233, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(86, 167, 233, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 50% 55%, rgba(37, 130, 206, 0.16), transparent 34%),
        rgba(3, 17, 35, 0.88);
    background-size: 54px 54px, 54px 54px, auto, auto;
    border: 1px solid rgba(106, 177, 233, 0.28);
    border-radius: 24px;
    box-shadow: 0 34px 90px rgba(0, 4, 14, 0.36), inset 0 1px rgba(255, 255, 255, 0.04);
}

.r04-world-model .r04-world-legend {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: hidden;
    background: rgba(8, 27, 49, 0.82);
    border: 1px solid rgba(116, 185, 241, 0.25);
    border-radius: 999px;
}

.r04-world-model .r04-world-legend span {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 11px;
    color: #b8cbdd;
    border-right: 1px solid rgba(116, 185, 241, 0.16);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.r04-world-model .r04-world-legend span:last-child { border-right: 0; }

.r04-world-model .r04-world-legend span::before {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    background: #3b9eef;
    border: 1px solid #9bd2ff;
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 10px rgba(66, 165, 246, 0.65);
}

.r04-world-model .r04-world-legend [data-r04-world-kind="event"]::before { background: #ff6b24; border-color: #ffd0b9; }
.r04-world-model .r04-world-legend [data-r04-world-kind="rule"]::before { background: transparent; border-radius: 2px; }
.r04-world-model .r04-world-legend [data-r04-world-kind="relation"]::before { width: 13px; height: 1px; border: 0; border-radius: 0; }

.r04-running-world-stage {
    position: relative;
    min-height: 620px;
    margin-top: 8px;
}

.r04-running-world-stage > svg {
    position: absolute;
    z-index: 0;
    inset: 2%;
    width: 96%;
    height: 96%;
    overflow: visible;
}

.r04-running-world-relations {
    fill: none;
    stroke: rgba(82, 174, 248, 0.58);
    stroke-width: 2;
    stroke-dasharray: 7 9;
}

.r04-running-world-events {
    fill: #ff6b24;
    stroke: #ffe1d2;
    stroke-width: 3;
    filter: drop-shadow(0 0 10px rgba(255, 107, 36, 0.72));
}

.r04-running-world-core,
.r04-world-node {
    position: absolute;
    z-index: 2;
    display: grid;
    align-content: center;
    text-align: center;
}

.r04-running-world-core {
    top: 50%;
    left: 50%;
    width: clamp(190px, 20vw, 250px);
    min-height: 112px;
    padding: 22px;
    color: #fff;
    background: radial-gradient(circle at 50% 0%, #164f81, #09294c 70%);
    border: 1px solid rgba(119, 199, 255, 0.66);
    border-radius: 18px;
    box-shadow: 0 0 0 12px rgba(43, 141, 219, 0.07), 0 20px 56px rgba(0, 4, 15, 0.5), 0 0 36px rgba(45, 147, 227, 0.2);
    transform: translate(-50%, -50%);
}

.r04-running-world-core span {
    font-size: clamp(17px, 1.5vw, 22px);
    font-weight: 700;
}

.r04-running-world-core small,
.r04-world-node span {
    margin-top: 6px;
    color: #91aac1;
    font-size: 11px;
    font-weight: 500;
}

.r04-running-world-nodes {
    position: absolute;
    z-index: 2;
    inset: 0;
}

.r04-world-node {
    width: clamp(126px, 13vw, 166px);
    min-height: 74px;
    padding: 13px 16px;
    color: #dcebf7;
    background: rgba(7, 27, 50, 0.88);
    border: 1px solid rgba(104, 178, 236, 0.34);
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(0, 5, 16, 0.34);
    backdrop-filter: blur(10px);
}

.r04-world-node strong { font-size: 14px; font-weight: 680; }
.r04-world-node-system { top: 7%; left: 3%; }
.r04-world-node-task { top: 1%; left: 43%; transform: translateX(-50%); }
.r04-world-node-device { top: 5%; right: 3%; }
.r04-world-node-space { top: 47%; right: 0; transform: translateY(-50%); }
.r04-world-node-resource { right: 14%; bottom: 2%; }
.r04-world-node-operation { bottom: 1%; left: 15%; }
.r04-world-node-rule { top: 53%; left: 0; transform: translateY(-50%); }

.r04-running-world > figcaption,
.r04-world-cycle-figure > figcaption {
    color: var(--r04-world-muted);
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

.r04-world-model .r04-world-cycle {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(34, 116, 188, 0.15), transparent 52%),
        #031127;
}

.r04-world-cycle-figure {
    position: relative;
    min-height: 390px;
    margin-top: 0;
    padding: 24px 30px 20px;
    overflow: hidden;
    background: rgba(4, 18, 36, 0.72);
    border: 1px solid var(--r04-world-line);
    border-radius: 22px;
}

.r04-world-cycle-figure > svg {
    position: absolute;
    inset: 26px 4% 60px;
    width: 92%;
    height: calc(100% - 86px);
    overflow: visible;
    fill: none;
    stroke-linecap: round;
    filter: drop-shadow(0 0 15px rgba(56, 153, 232, 0.2));
}

.r04-world-cycle-current {
    stroke: #3ea9ff;
    stroke-width: 5;
    stroke-dasharray: 14 16;
    animation: r04-scene-path-flow 7s linear infinite;
}

.r04-world-cycle-return {
    stroke: #ff762f;
    stroke-width: 3;
    stroke-dasharray: 7 13;
    animation: r04-scene-path-return 8s linear infinite;
}

.r04-world-cycle-arrow { stroke: #f5d2bf; stroke-width: 2; }

.r04-world-cycle-stages {
    position: absolute;
    z-index: 2;
    inset: 55px 7% 76px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 18px;
}

.r04-world-cycle-stages > div {
    min-height: 90px;
    display: grid;
    align-content: center;
    padding: 15px;
    color: #e7f3fc;
    background: rgba(4, 19, 38, 0.78);
    border: 1px solid rgba(100, 178, 239, 0.28);
    border-radius: 12px;
    text-align: center;
    backdrop-filter: blur(9px);
}

.r04-world-cycle-stages strong { font-size: 14px; }
.r04-world-cycle-stages span { margin-top: 6px; color: #91a8bd; font-size: 11px; line-height: 1.5; }

.r04-world-cycle-figure > figcaption {
    position: absolute;
    right: 24px;
    bottom: 16px;
    left: 24px;
}

.r04-world-model .r04-world-prototype {
    background:
        linear-gradient(rgba(67, 145, 208, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(67, 145, 208, 0.04) 1px, transparent 1px),
        #020d1e;
    background-size: 64px 64px;
}

.r04-scene-tabs {
    margin-top: 0;
    overflow: hidden;
    background: rgba(4, 18, 36, 0.88);
    border: 1px solid rgba(106, 177, 233, 0.3);
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(0, 4, 14, 0.32);
}

.r04-world-model .r04-tab-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    background: rgba(8, 28, 52, 0.82);
    border-bottom: 1px solid rgba(106, 177, 233, 0.25);
}

.r04-world-model .r04-tab {
    min-width: 0;
    min-height: 62px;
    padding: 13px 18px;
    color: #8399ae;
    background: transparent;
    border: 0;
    border-right: 1px solid rgba(106, 177, 233, 0.16);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.r04-world-model .r04-tab:last-child { border-right: 0; }

.r04-world-model .r04-tab:hover,
.r04-world-model .r04-tab:focus-visible,
.r04-world-model .r04-tab[aria-selected="true"],
.r04-world-model .r04-tab.r04-is-active {
    color: #fff;
    background: rgba(40, 132, 205, 0.13);
    box-shadow: inset 0 -2px #4caaff;
}

.r04-world-model .r04-tab:focus-visible,
.r04-world-model :where(a, summary):focus-visible {
    outline: 2px solid #75c2ff;
    outline-offset: -3px;
}

.r04-scene-panel {
    min-height: 510px;
    display: grid;
    grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
}

.r04-scene-panel[hidden] { display: none !important; }

.r04-scene-copy {
    padding: clamp(30px, 4vw, 56px);
    border-right: 1px solid rgba(106, 177, 233, 0.2);
}

.r04-world-model .r04-concept-label {
    margin: 0 0 24px;
    min-height: 28px;
    padding: 5px 10px;
    color: #9dd3ff;
    background: rgba(55, 143, 211, 0.1);
    border-color: rgba(105, 183, 245, 0.32);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.r04-scene-copy h3 {
    margin: 0;
    color: #f0f7fd;
    font-size: clamp(24px, 2.5vw, 36px);
    line-height: 1.25;
}

.r04-scene-copy > p:not(.r04-concept-label) {
    margin: 20px 0 0;
    color: #9fb2c4;
    line-height: 1.75;
}

.r04-scene-copy ul {
    display: grid;
    gap: 0;
    margin-top: 28px;
    padding: 0;
    list-style: none;
}

.r04-scene-copy li {
    position: relative;
    padding: 11px 0 11px 18px;
    color: #c4d4e2;
    border-top: 1px solid rgba(106, 177, 233, 0.16);
    font-size: 13px;
}

.r04-scene-copy li::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    background: #ff6d27;
    border-radius: 50%;
    content: "";
    transform: translateY(-50%);
}

.r04-scene-visual {
    position: relative;
    min-height: 510px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: clamp(22px, 3vw, 40px);
    overflow: hidden;
    background:
        linear-gradient(rgba(80, 160, 224, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 160, 224, 0.07) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(29, 120, 195, 0.13), transparent 44%);
    background-size: 42px 42px, 42px 42px, auto;
}

.r04-scene-visual-rail {
    background-color: rgba(3, 16, 32, 0.72);
}

.r04-scene-visual-low {
    background-color: rgba(4, 29, 39, 0.7);
}

.r04-scene-visual-fab {
    background-color: rgba(8, 23, 44, 0.76);
}

.r04-scene-visual > svg {
    width: 100%;
    height: 100%;
    min-height: 300px;
    overflow: visible;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.r04-scene-base-line,
.r04-scene-space {
    stroke: rgba(192, 215, 235, 0.52);
    stroke-width: 3;
}

.r04-scene-space { stroke-width: 2; stroke-dasharray: 7 9; }
.r04-scene-candidate-a { stroke: #ff702b; stroke-width: 4; }
.r04-scene-candidate-b { stroke: #4daeff; stroke-width: 4; stroke-dasharray: 9 11; }
.r04-scene-visual circle { fill: #06162b; stroke: #dbedfb; stroke-width: 3; }

.r04-scene-outcomes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.r04-scene-outcomes span {
    min-width: 0;
    min-height: 70px;
    display: grid;
    align-content: center;
    padding: 12px 14px;
    color: #8ea6bc;
    background: rgba(7, 25, 47, 0.82);
    border: 1px solid rgba(105, 179, 238, 0.22);
    border-radius: 9px;
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.r04-scene-outcomes strong {
    margin-bottom: 3px;
    color: #e3f1fb;
    font-size: 12px;
}

.r04-scene-fab-grid {
    align-self: center;
    display: grid;
    grid-template-columns: minmax(52px, 0.65fr) repeat(5, minmax(28px, 1fr));
    gap: 9px;
    padding: clamp(18px, 3vw, 36px);
    background: rgba(4, 18, 36, 0.62);
    border: 1px solid rgba(105, 179, 238, 0.2);
    border-radius: 14px;
}

.r04-scene-fab-grid span {
    align-self: center;
    color: #aabed0;
    font-size: 11px;
}

.r04-scene-fab-grid i {
    min-width: 0;
    height: 24px;
    background: linear-gradient(90deg, #1c5791, #2e84cb);
    border: 1px solid rgba(126, 198, 255, 0.25);
    border-radius: 4px;
}

.r04-scene-fab-grid .r04-is-event { background: #d75b25; }
.r04-scene-fab-grid .r04-is-candidate { background: #2e9ec4; }

.no-js .r04-world-model .r04-tab-list { display: none; }
.no-js .r04-world-model .r04-scene-panel[hidden] { display: grid !important; }
.no-js .r04-world-model .r04-scene-panel + .r04-scene-panel { border-top: 1px solid var(--r04-world-line); }

.r04-world-model .r04-world-boundaries {
    background:
        radial-gradient(circle at 85% 82%, rgba(32, 113, 181, 0.12), transparent 30%),
        #031126;
}

.r04-world-model .r04-faq {
    border-top: 0;
}

.r04-world-model .r04-faq details {
    border-bottom: 0;
    border-top: 1px solid var(--r04-world-line);
}

.r04-world-model .r04-faq details:last-child {
    border-bottom: 1px solid var(--r04-world-line);
}

.r04-world-model .r04-faq summary {
    position: relative;
    min-height: 66px;
    display: flex;
    align-items: center;
    padding: 16px 52px 16px 0;
    color: #dcebf7;
    cursor: pointer;
    font-size: 15px;
    font-weight: 620;
    list-style: none;
}

.r04-world-model .r04-faq summary::-webkit-details-marker { display: none; }

.r04-world-model .r04-faq summary::before,
.r04-world-model .r04-faq summary::after {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 14px;
    height: 1px;
    background: #77bdf4;
    border: 0;
    content: "";
    transition: transform 180ms ease;
}

.r04-world-model .r04-faq summary::after { transform: rotate(90deg); }
.r04-world-model .r04-faq details[open] summary::after { transform: rotate(0); }

.r04-world-model .r04-faq details p {
    max-width: 760px;
    margin: -2px 52px 0 0;
    padding: 0 0 24px;
    color: #91a8bc;
    font-size: 13px;
    line-height: 1.75;
}

.r04-world-cta {
    position: relative;
    overflow: hidden;
    color: #edf5fc;
    background:
        radial-gradient(circle at 86% 48%, rgba(47, 144, 219, 0.22), transparent 28%),
        linear-gradient(120deg, #061b34, #020c1b 62%);
    border-top: 1px solid var(--r04-world-line);
}

.r04-world-cta::after {
    position: absolute;
    right: -7%;
    bottom: -46%;
    width: 480px;
    height: 480px;
    background:
        linear-gradient(rgba(84, 171, 238, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(84, 171, 238, 0.12) 1px, transparent 1px);
    background-size: 42px 42px;
    border: 1px solid rgba(84, 171, 238, 0.2);
    content: "";
    opacity: 0.58;
    transform: rotate(32deg);
    pointer-events: none;
}

.r04-world-cta .r04-cta-inner { position: relative; z-index: 1; }
.r04-world-cta h2 { color: #fff; }
.r04-world-cta p { color: #9fb2c4; }

/* -------------------------------------------------------------------------- */
/* Restricted-space inspection: scene, hotspots and safety language           */
/* -------------------------------------------------------------------------- */

.r04-low-altitude {
    --r04-low-teal: #0d5960;
    --r04-low-teal-deep: #073d49;
    --r04-low-blue: #236fca;
    --r04-low-glow: #56aefe;
    color: var(--r04-ink, #08294f);
    background: #f8fafc;
}

.r04-low-altitude :where(.r04-hotspot, .r04-tab, summary):focus-visible {
    outline: 3px solid rgba(238, 87, 18, 0.8);
    outline-offset: 3px;
}

.r04-low-hero {
    position: relative;
    min-height: min(820px, calc(100svh - 10px));
    display: grid;
    padding: 0;
    overflow: hidden;
    background: #eef3f7;
    isolation: isolate;
}

.r04-low-hero::before,
.r04-low-hero::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    pointer-events: none;
}

.r04-low-hero::before {
    background:
        linear-gradient(90deg, #f5f8fb 0%, rgba(245, 248, 251, 0.98) 29%, rgba(245, 248, 251, 0.74) 46%, rgba(245, 248, 251, 0.08) 73%),
        linear-gradient(180deg, transparent 68%, rgba(238, 244, 248, 0.68) 100%);
}

.r04-low-hero::after {
    background: radial-gradient(circle at 74% 48%, rgba(49, 145, 232, 0.09), transparent 32%);
}

.r04-low-hero-media,
.r04-low-hero-media picture,
.r04-low-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.r04-low-hero-media picture,
.r04-low-hero-media img {
    display: block;
}

.r04-low-hero-media { z-index: 0; }
.r04-low-hero-media img { object-fit: cover; object-position: center; filter: saturate(0.82) contrast(1.02); }

.r04-low-hero-layout {
    position: relative;
    z-index: 2;
    min-height: inherit;
    display: grid;
    grid-template-columns: minmax(310px, 0.77fr) minmax(440px, 1.23fr);
    align-items: center;
    gap: clamp(26px, 4vw, 70px);
    padding-block: clamp(128px, 12vw, 176px) clamp(74px, 8vw, 110px);
}

.r04-low-hero .r04-hero-copy {
    max-width: 570px;
}

.r04-low-hero-route {
    position: relative;
    width: 100%;
    height: clamp(430px, 38vw, 560px);
}

.r04-low-hero-route > svg {
    position: absolute;
    inset: 2% 0 10%;
    width: 100%;
    height: 88%;
    overflow: visible;
    fill: none;
    stroke: #4ea8ff;
    stroke-width: 5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgba(47, 145, 234, 0.8));
}

.r04-low-hero-route path {
    stroke-dasharray: 12 14;
    animation: r04-scene-path-flow 6s linear infinite;
}

.r04-low-hero-route circle {
    fill: #f7fbff;
    stroke: #2d8ce1;
    stroke-width: 4;
}

.r04-low-route-labels a {
    position: absolute;
    padding: 8px 13px;
    color: #fff;
    background: rgba(5, 39, 73, 0.88);
    border: 1px solid rgba(184, 222, 251, 0.62);
    border-radius: 999px;
    box-shadow: 0 12px 26px rgba(1, 21, 42, 0.24);
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    backdrop-filter: blur(8px);
}

.r04-low-route-labels a:nth-child(1) { bottom: 14%; left: 2%; }
.r04-low-route-labels a:nth-child(2) { bottom: 31%; left: 38%; }
.r04-low-route-labels a:nth-child(3) { top: 34%; right: 20%; }
.r04-low-route-labels a:nth-child(4) { top: 8%; right: 1%; }

.r04-low-hero-route figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 420px;
    color: rgba(8, 41, 79, 0.66);
    font-size: 11px;
    line-height: 1.55;
    text-align: right;
}

.r04-low-conditions,
.r04-low-capabilities,
.r04-low-implementation {
    background: #fbfcfd;
}

.r04-low-mission,
.r04-low-system {
    background:
        radial-gradient(circle at 85% 12%, rgba(35, 111, 202, 0.07), transparent 28%),
        var(--r04-ice-50, #f4f8fb);
}

.r04-hotspot-story {
    display: grid;
    grid-template-columns: minmax(0, 1.52fr) minmax(280px, 0.48fr);
    gap: clamp(28px, 4vw, 58px);
    margin-top: 0;
    align-items: stretch;
}

.r04-hotspot-media,
.r04-capability-media {
    position: relative;
    overflow: hidden;
    background: #092443;
    border-radius: 18px;
    box-shadow: 0 24px 68px rgba(8, 41, 79, 0.17);
}

.r04-hotspot-media { aspect-ratio: 16 / 10; }
.r04-capability-media { aspect-ratio: 16 / 7.5; }

.r04-hotspot-media picture,
.r04-hotspot-media img,
.r04-capability-media picture,
.r04-capability-media img {
    display: block;
    width: 100%;
    height: 100%;
}

.r04-hotspot-media img,
.r04-capability-media img {
    object-fit: cover;
    filter: saturate(0.78) contrast(1.05) brightness(0.83);
}

.r04-hotspot-media::after,
.r04-capability-media::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, transparent 52%, rgba(2, 19, 36, 0.76) 100%);
    content: "";
    pointer-events: none;
}

.r04-hotspot-media figcaption,
.r04-capability-media figcaption {
    position: absolute;
    z-index: 3;
    right: 18px;
    bottom: 13px;
    left: 18px;
    color: rgba(239, 247, 252, 0.7);
    font-size: 10px;
    line-height: 1.5;
    text-align: right;
}

.r04-hotspot-links,
.r04-capability-hotspots {
    position: absolute;
    z-index: 4;
    inset: 0;
}

.r04-hotspot {
    position: absolute;
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    color: #fff;
    background: rgba(5, 42, 75, 0.86);
    border: 1px solid rgba(189, 224, 249, 0.6);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 12, 26, 0.28);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.15;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.r04-hotspot::before {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    background: #65b8ff;
    border: 2px solid #f2f9ff;
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 5px rgba(75, 167, 246, 0.22), 0 0 18px rgba(60, 158, 242, 0.82);
}

.r04-hotspot::after {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(114, 194, 255, 0.6);
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%);
    animation: r04-hotspot-pulse 2.4s ease-out infinite;
}

.r04-hotspot:hover,
.r04-hotspot:focus-visible,
.r04-hotspot.r04-is-active,
.r04-hotspot[aria-current="true"] {
    color: #fff;
    background: rgba(17, 89, 139, 0.96);
    border-color: #d8efff;
    transform: translateY(-2px);
}

.r04-hotspot-positioning { top: 24%; left: 7%; }
.r04-hotspot-space { top: 12%; left: 40%; }
.r04-hotspot-medium { top: 22%; right: 6%; }
.r04-hotspot-communication { bottom: 20%; left: 12%; }
.r04-hotspot-energy { right: 31%; bottom: 13%; }
.r04-hotspot-authority { right: 5%; bottom: 24%; }

.r04-hotspot-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: stretch;
    border-top: 1px solid var(--r04-line, #dbe5ee);
}

.r04-hotspot-details article,
.r04-capability-details article {
    min-width: 0;
    padding: 18px 4px 18px 18px;
    border-bottom: 1px solid var(--r04-line, #dbe5ee);
    border-left: 2px solid transparent;
    scroll-margin-top: 110px;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.js .r04-hotspot-details article.r04-is-active,
.js .r04-capability-details article.r04-is-active {
    display: grid;
    align-content: center;
    animation: r04-scene-detail-in 240ms ease-out both;
}

.js .r04-hotspot-details article.r04-is-active {
    min-height: 164px;
    padding: clamp(26px, 3.2vw, 46px);
}

.js .r04-capability-details article.r04-is-active {
    min-height: 142px;
    padding: 26px clamp(22px, 3vw, 38px);
    border-right: 0;
}

.r04-hotspot-details article:target,
.r04-hotspot-details article.r04-is-active,
.r04-capability-details article:target,
.r04-capability-details article.r04-is-active {
    background: rgba(42, 124, 194, 0.07);
    border-left-color: var(--r04-orange, #ed5a19);
}

.r04-hotspot-details h3,
.r04-capability-details h3 {
    margin: 0;
    color: var(--r04-ink, #08294f);
    font-size: 14px;
    line-height: 1.4;
}

.js .r04-hotspot-details article.r04-is-active h3,
.js .r04-capability-details article.r04-is-active h3 {
    font-size: clamp(18px, 1.6vw, 22px);
}

.r04-hotspot-details p,
.r04-capability-details p {
    margin: 6px 0 0;
    color: var(--r04-text, #38516b);
    font-size: 11px;
    line-height: 1.65;
}

.js .r04-hotspot-details article.r04-is-active p,
.js .r04-capability-details article.r04-is-active p {
    max-width: 56em;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.75;
}

.r04-mission-flow {
    position: relative;
    margin-top: 0;
    padding: 24px clamp(22px, 3vw, 42px) 24px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid var(--r04-line, #dbe5ee);
    border-radius: 18px;
    box-shadow: 0 16px 44px rgba(8, 41, 79, 0.07);
}

.r04-mission-flow > svg {
    position: absolute;
    top: 26px;
    left: 4%;
    width: 92%;
    height: 150px;
    overflow: visible;
    fill: none;
    stroke: #3d8ed9;
    stroke-width: 2;
    stroke-linecap: round;
}

.r04-mission-flow circle {
    fill: #fff;
    stroke: #2d82d0;
    stroke-width: 3;
}

.r04-mission-stages {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    padding: 154px 0 4px;
    list-style: none;
}

.r04-mission-stages li {
    min-width: 0;
    text-align: center;
}

.r04-mission-stages strong,
.r04-implementation-flow strong {
    display: block;
    color: var(--r04-ink, #08294f);
    font-size: 13px;
    font-weight: 690;
    line-height: 1.45;
}

.r04-mission-stages span,
.r04-implementation-flow span {
    display: block;
    margin-top: 7px;
    color: var(--r04-muted, #6e8296);
    font-size: 10px;
    line-height: 1.6;
}

.r04-mission-flow figcaption,
.r04-low-system-diagram figcaption,
.r04-safety-state-flow figcaption {
    margin-top: 22px;
    color: var(--r04-muted, #6e8296);
    font-size: 10px;
    line-height: 1.55;
    text-align: center;
}

.r04-low-system .r04-section-split {
    grid-template-columns: minmax(250px, 0.68fr) minmax(540px, 1.32fr);
    gap: clamp(46px, 6vw, 96px);
    align-items: center;
}

.r04-low-system-diagram {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(29, 114, 187, 0.1), transparent 36%),
        linear-gradient(rgba(38, 105, 162, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(38, 105, 162, 0.055) 1px, transparent 1px),
        rgba(255, 255, 255, 0.78);
    background-size: auto, 42px 42px, 42px 42px, auto;
    border: 1px solid var(--r04-line, #dbe5ee);
    border-radius: 20px;
    box-shadow: 0 22px 60px rgba(8, 41, 79, 0.09);
}

.r04-low-system-diagram > svg {
    position: absolute;
    inset: 4%;
    width: 92%;
    height: 88%;
    fill: none;
    stroke: rgba(35, 111, 202, 0.48);
    stroke-width: 2;
    stroke-dasharray: 7 9;
}

.r04-low-system-core {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 230px;
    min-height: 108px;
    display: grid;
    align-content: center;
    padding: 20px;
    color: #fff;
    background: linear-gradient(145deg, #0d4779, #082c55);
    border: 1px solid rgba(111, 183, 238, 0.8);
    border-radius: 16px;
    box-shadow: 0 18px 46px rgba(4, 35, 68, 0.25), 0 0 0 10px rgba(35, 111, 202, 0.06);
    text-align: center;
    transform: translate(-50%, -50%);
}

.r04-low-system-core span { font-size: 19px; font-weight: 720; }
.r04-low-system-core small { margin-top: 6px; color: #a8cce7; font-size: 10px; font-weight: 500; }

.r04-low-system-domains {
    position: absolute;
    z-index: 2;
    inset: 0;
}

.r04-low-system-domains article {
    position: absolute;
    width: min(34%, 245px);
    min-height: 118px;
    padding: 18px;
    background: rgba(253, 254, 255, 0.92);
    border: 1px solid rgba(38, 105, 162, 0.27);
    border-radius: 13px;
    box-shadow: 0 12px 34px rgba(8, 41, 79, 0.08);
    backdrop-filter: blur(9px);
}

.r04-low-system-domains h3 {
    margin: 0;
    color: var(--r04-ink, #08294f);
    font-size: 14px;
}

.r04-low-system-domains p {
    margin: 8px 0 0;
    color: var(--r04-text, #38516b);
    font-size: 11px;
    line-height: 1.6;
}

.r04-low-system-aircraft { top: 7%; left: 4%; }
.r04-low-system-spatial { top: 7%; right: 4%; }
.r04-low-system-safety { bottom: 9%; left: 4%; }
.r04-low-system-evidence { right: 4%; bottom: 9%; }

.r04-low-system-diagram > figcaption {
    position: absolute;
    right: 24px;
    bottom: 16px;
    left: 24px;
    margin: 0;
}

.r04-capability-scene {
    margin-top: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--r04-line, #dbe5ee);
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(8, 41, 79, 0.1);
}

.r04-capability-hotspot-positioning { bottom: 19%; left: 5%; }
.r04-capability-hotspot-route { bottom: 31%; left: 31%; }
.r04-capability-hotspot-event { top: 19%; left: 51%; }
.r04-capability-hotspot-evidence { right: 18%; bottom: 23%; }
.r04-capability-hotspot-takeover { top: 27%; right: 3%; }

.r04-capability-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.r04-capability-details article {
    padding: 20px;
    border-right: 1px solid var(--r04-line, #dbe5ee);
    border-bottom: 0;
    border-left: 2px solid transparent;
}

.r04-capability-details article:last-child { border-right: 0; }

.no-js .r04-capability-details {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.r04-low-safety {
    color: #f4fbfb;
    background:
        radial-gradient(circle at 18% 0%, rgba(46, 175, 168, 0.24), transparent 32%),
        radial-gradient(circle at 92% 100%, rgba(25, 102, 133, 0.26), transparent 30%),
        linear-gradient(120deg, var(--r04-low-teal), var(--r04-low-teal-deep));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.r04-low-safety .r04-section-heading h2,
.r04-low-safety .r04-section-heading p { color: inherit; }
.r04-low-safety .r04-section-heading > p:last-child { color: rgba(232, 248, 248, 0.7); }
.r04-low-safety .r04-kicker { color: #b7ece6; }

.r04-safety-state-flow {
    position: relative;
    margin-top: 0;
    padding: 28px clamp(22px, 3vw, 38px) 20px;
    background: rgba(0, 25, 34, 0.18);
    border: 1px solid rgba(224, 250, 248, 0.25);
    border-radius: 18px;
    backdrop-filter: blur(8px);
}

.r04-safety-state-flow ul {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
    padding: 0;
    list-style: none;
}

.r04-safety-state-flow ul::before {
    position: absolute;
    top: 23px;
    right: 8%;
    left: 8%;
    height: 1px;
    background: rgba(213, 246, 244, 0.45);
    content: "";
}

.r04-safety-state-flow li {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding-top: 62px;
    text-align: center;
}

.r04-safety-state-flow li::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 46px;
    height: 46px;
    background: #0c5961;
    border: 1px solid rgba(224, 250, 248, 0.62);
    border-radius: 50%;
    box-shadow: 0 0 0 7px rgba(199, 242, 238, 0.07);
    content: "";
    transform: translateX(-50%);
}

.r04-safety-state-flow li::after {
    position: absolute;
    top: 19px;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #bceee9;
    border-radius: 50%;
    content: "";
    transform: translateX(-50%);
}

.r04-safety-state-flow strong { display: block; color: #f4fbfb; font-size: 13px; }
.r04-safety-state-flow span { display: block; margin-top: 7px; color: rgba(226, 246, 245, 0.66); font-size: 10px; line-height: 1.55; }
.r04-safety-state-flow figcaption { color: rgba(226, 246, 245, 0.56); }

.r04-implementation-flow {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    margin-top: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--r04-line, #dbe5ee);
    border-bottom: 1px solid var(--r04-line, #dbe5ee);
}

.r04-implementation-flow li {
    position: relative;
    min-width: 0;
    min-height: 150px;
    padding: 32px 28px 24px 20px;
    border-right: 1px solid var(--r04-line, #dbe5ee);
}

.r04-implementation-flow li:last-child { border-right: 0; }

.r04-implementation-flow li:not(:last-child)::after {
    position: absolute;
    top: 34px;
    right: 8px;
    color: var(--r04-orange, #ed5a19);
    content: "\2192";
    font-size: 16px;
}

.r04-low-cta {
    position: relative;
    overflow: hidden;
    color: var(--r04-ink, #08294f);
    background:
        radial-gradient(circle at 86% 50%, rgba(39, 121, 198, 0.12), transparent 26%),
        linear-gradient(rgba(39, 105, 162, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(39, 105, 162, 0.045) 1px, transparent 1px),
        #f1f6fa;
    background-size: auto, 46px 46px, 46px 46px, auto;
}

.r04-low-cta .r04-cta-inner > div:first-child > p:last-child {
    color: var(--r04-text, #354f69);
}

/* -------------------------------------------------------------------------- */
/* Native reflow: compact desktop / tablet                                    */
/* -------------------------------------------------------------------------- */

@media (max-width: 1120px) {
    .r04-world-hero {
        min-height: auto;
    }

    .r04-world-hero-layout {
        min-height: 850px;
        grid-template-columns: minmax(0, 0.88fr) minmax(360px, 1.12fr);
        gap: 26px;
        padding-block: 128px 84px;
    }

    .r04-world-hero-signals {
        height: 440px;
    }

    .r04-world-questions .r04-section-split,
    .r04-world-boundaries .r04-section-split {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .r04-world-questions .r04-section-heading,
    .r04-world-boundaries .r04-section-heading {
        max-width: 700px;
    }

    .r04-running-world-stage { min-height: 560px; }
    .r04-world-node { width: 138px; }
    .r04-world-node-operation { left: 11%; }
    .r04-world-node-resource { right: 10%; }

    .r04-scene-panel {
        grid-template-columns: 1fr;
    }

    .r04-scene-copy {
        padding: 34px;
        border-right: 0;
        border-bottom: 1px solid rgba(106, 177, 233, 0.2);
    }

    .r04-scene-copy ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .r04-scene-copy li {
        border-bottom: 1px solid rgba(106, 177, 233, 0.16);
    }

    .r04-low-hero {
        min-height: 760px;
    }

    .r04-low-hero-layout {
        grid-template-columns: minmax(280px, 0.86fr) minmax(340px, 1.14fr);
        gap: 12px;
        padding-block: 116px 72px;
    }

    .r04-low-hero-route { height: 430px; }

    .r04-hotspot-story {
        grid-template-columns: 1fr;
    }

    .r04-hotspot-media { aspect-ratio: 16 / 8.5; }

    .r04-hotspot-details {
        grid-template-columns: minmax(0, 1fr);
        border-left: 1px solid var(--r04-line, #dbe5ee);
    }

    .r04-hotspot-details article {
        padding: 18px;
        border-right: 1px solid var(--r04-line, #dbe5ee);
    }

    .r04-mission-flow > svg { display: none; }

    .r04-mission-stages {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        padding-top: 0;
        border-top: 1px solid var(--r04-line, #dbe5ee);
        border-left: 1px solid var(--r04-line, #dbe5ee);
    }

    .r04-mission-stages li {
        min-height: 132px;
        padding: 24px 20px;
        border-right: 1px solid var(--r04-line, #dbe5ee);
        border-bottom: 1px solid var(--r04-line, #dbe5ee);
        text-align: left;
    }

    .r04-low-system .r04-section-split {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .r04-low-system .r04-section-heading { max-width: 720px; }
    .r04-low-system-diagram { width: min(100%, 820px); margin-inline: auto; }

    .r04-capability-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .no-js .r04-capability-details {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .r04-capability-details article {
        border-bottom: 1px solid var(--r04-line, #dbe5ee);
    }

    .r04-safety-state-flow ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px 18px;
    }

    .r04-safety-state-flow ul::before { display: none; }

    .r04-implementation-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-left: 1px solid var(--r04-line, #dbe5ee);
    }

    .r04-implementation-flow li {
        border-bottom: 1px solid var(--r04-line, #dbe5ee);
    }

    .r04-implementation-flow li:nth-child(3n) { border-right: 0; }
    .r04-implementation-flow li:not(:last-child)::after { display: none; }
}

/* -------------------------------------------------------------------------- */
/* Native reflow: narrow tablet / mobile                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .r04-world-hero {
        min-height: 820px;
    }

    .r04-world-hero::before {
        background:
            linear-gradient(180deg, rgba(2, 12, 27, 0.98) 0%, rgba(2, 12, 27, 0.84) 49%, rgba(2, 12, 27, 0.3) 76%, #020c1b 100%);
    }

    .r04-world-hero::after { display: none; }

    .r04-world-hero-media img { object-position: 69% center; }

    .r04-world-hero-layout {
        min-height: 820px;
        display: block;
        padding-block: 106px 50px;
    }

    .r04-world-hero .r04-hero-copy {
        max-width: 600px;
    }

    .r04-world-hero-signals {
        height: 340px;
        margin-top: 36px;
    }

    .r04-world-signal-label {
        padding: 7px 9px;
        font-size: 10px;
    }

    .r04-world-model .r04-world-legend {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-radius: 14px;
    }

    .r04-world-model .r04-world-legend span:nth-child(3) { border-right: 0; }
    .r04-world-model .r04-world-legend span:nth-child(-n + 3) { border-bottom: 1px solid rgba(116, 185, 241, 0.16); }

    .r04-running-world {
        padding: 12px;
        border-radius: 16px;
    }

    .r04-running-world-stage {
        min-height: 0;
        padding: 28px 0 8px;
    }

    .r04-running-world-stage > svg { display: none; }

    .r04-running-world-core {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        min-height: 96px;
        transform: none;
    }

    .r04-running-world-nodes {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 20px;
    }

    .r04-world-node {
        position: static;
        width: auto;
        min-height: 76px;
        transform: none;
    }

    .r04-world-cycle-figure {
        min-height: 0;
        padding: 18px;
    }

    .r04-world-cycle-figure > svg { display: none; }

    .r04-world-cycle-stages {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .r04-world-cycle-stages > div {
        min-height: 108px;
    }

    .r04-world-cycle-figure > figcaption {
        position: static;
        margin-top: 18px;
    }

    .r04-world-model .r04-tab {
        min-height: 56px;
        padding: 10px 8px;
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .r04-scene-panel,
    .r04-scene-visual {
        min-height: 0;
    }

    .r04-scene-copy { padding: 26px 22px; }

    .r04-scene-copy ul {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .r04-scene-visual { padding: 18px; }
    .r04-scene-visual > svg { min-height: 260px; }

    .r04-scene-fab-grid {
        grid-template-columns: minmax(44px, 0.7fr) repeat(5, minmax(18px, 1fr));
        gap: 5px;
        padding: 14px 10px;
    }

    .r04-scene-fab-grid i { height: 20px; }

    .r04-world-model .r04-faq summary {
        padding-right: 42px;
        font-size: 14px;
    }

    .r04-world-model .r04-faq details p { margin-right: 28px; }

    .r04-low-hero {
        min-height: 0;
        display: block;
        padding: 0;
        background: #f4f8fb;
    }

    .r04-low-hero::before {
        height: 330px;
        bottom: auto;
        background: linear-gradient(180deg, rgba(3, 22, 40, 0.08), rgba(3, 22, 40, 0.64));
    }

    .r04-low-hero::after { display: none; }

    .r04-low-hero-media,
    .r04-low-hero-media picture,
    .r04-low-hero-media img {
        position: relative;
        height: 330px;
    }

    .r04-low-hero-media img { object-position: 64% center; }

    .r04-low-hero-layout {
        position: static;
        min-height: 0;
        display: block;
        padding-block: 0 54px;
    }

    .r04-low-hero .r04-hero-copy {
        max-width: none;
        padding-top: 36px;
    }

    .r04-low-hero-route {
        position: absolute;
        z-index: 2;
        top: 0;
        right: max(20px, calc((100% - var(--r04-shell, 1240px)) / 2));
        left: max(20px, calc((100% - var(--r04-shell, 1240px)) / 2));
        width: auto;
        height: 330px;
        margin: 0;
    }

    .r04-low-hero-route figcaption {
        right: 0;
        bottom: 10px;
        max-width: 270px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 9px;
    }

    .r04-low-route-labels a {
        padding: 6px 9px;
        font-size: 9px;
    }

    .r04-hotspot-media,
    .r04-capability-media {
        aspect-ratio: auto;
        overflow: visible;
        background: transparent;
        border-radius: 14px;
        box-shadow: none;
    }

    .r04-hotspot-media picture,
    .r04-capability-media picture {
        height: auto;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: #092443;
        border-radius: 14px;
    }

    .r04-capability-media picture { aspect-ratio: 16 / 10; }

    .r04-hotspot-media::after,
    .r04-capability-media::after { display: none; }

    .r04-hotspot-media figcaption,
    .r04-capability-media figcaption {
        position: static;
        margin-top: 10px;
        color: var(--r04-muted, #6e8296);
        text-align: left;
    }

    .r04-hotspot-links,
    .r04-capability-hotspots {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 14px;
    }

    .r04-hotspot {
        position: relative;
        inset: auto;
        min-width: 0;
        min-height: 44px;
        justify-content: flex-start;
        color: var(--r04-ink, #08294f);
        background: #fff;
        border-color: var(--r04-line, #dbe5ee);
        border-radius: 8px;
        box-shadow: none;
        white-space: normal;
        transform: none;
    }

    .r04-hotspot:hover,
    .r04-hotspot:focus-visible,
    .r04-hotspot.r04-is-active,
    .r04-hotspot[aria-current="true"] {
        color: var(--r04-ink, #08294f);
        background: #edf6fd;
        border-color: #4b9bdf;
        transform: none;
    }

    .r04-hotspot::after { display: none; }

    .r04-hotspot-details,
    .r04-capability-details {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 18px;
        border-left: 1px solid var(--r04-line, #dbe5ee);
    }

    .r04-hotspot-details article,
    .r04-capability-details article {
        padding: 17px;
        border-right: 1px solid var(--r04-line, #dbe5ee);
        border-bottom: 1px solid var(--r04-line, #dbe5ee);
    }

    .no-js .r04-capability-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .r04-mission-flow { padding: 16px; }

    .r04-mission-stages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .r04-low-system-diagram {
        min-height: 0;
        padding: 18px;
    }

    .r04-low-system-diagram > svg { display: none; }

    .r04-low-system-core {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        min-height: 94px;
        transform: none;
    }

    .r04-low-system-domains {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 14px;
    }

    .r04-low-system-domains article {
        position: static;
        width: auto;
        min-height: 128px;
    }

    .r04-low-system-diagram > figcaption {
        position: static;
        margin-top: 18px;
    }

    .r04-capability-scene {
        overflow: visible;
        padding: 14px;
        border-radius: 14px;
    }

    .r04-safety-state-flow ul,
    .r04-implementation-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .r04-safety-state-flow li {
        min-height: 140px;
    }

    .r04-implementation-flow li:nth-child(3n) { border-right: 1px solid var(--r04-line, #dbe5ee); }
    .r04-implementation-flow li:nth-child(2n) { border-right: 0; }
}

/* -------------------------------------------------------------------------- */
/* Native reflow: 390px phones                                                */
/* -------------------------------------------------------------------------- */

@media (max-width: 390px) {
    .r04-world-hero {
        min-height: 760px;
    }

    .r04-world-hero-layout {
        min-height: 760px;
        padding-top: 92px;
    }

    .r04-world-hero-signals {
        height: 280px;
        margin-top: 24px;
    }

    .r04-world-signal-label-object { left: 24%; }
    .r04-world-signal-label-rule { right: 14%; }
    .r04-world-signal-label-future { right: -4px; }

    .r04-world-model .r04-world-legend span {
        min-height: 42px;
        gap: 6px;
        padding: 7px 5px;
        font-size: 10px;
    }

    .r04-running-world-nodes,
    .r04-world-cycle-stages,
    .r04-scene-outcomes {
        grid-template-columns: 1fr;
    }

    .r04-running-world-core { padding-inline: 12px; }

    .r04-world-model .r04-tab { font-size: 11px; }
    .r04-scene-copy { padding: 23px 18px; }
    .r04-scene-visual { padding: 12px; }
    .r04-scene-visual > svg { min-height: 210px; }

    .r04-scene-fab-grid {
        grid-template-columns: 42px repeat(5, minmax(14px, 1fr));
        gap: 3px;
        padding-inline: 7px;
    }

    .r04-scene-fab-grid span { font-size: 9px; }

    .r04-world-cta::after { display: none; }

    .r04-low-hero::before,
    .r04-low-hero-media,
    .r04-low-hero-media picture,
    .r04-low-hero-media img,
    .r04-low-hero-route {
        height: 286px;
    }

    .r04-low-hero .r04-hero-copy { padding-top: 30px; }

    .r04-low-route-labels a:nth-child(2) { left: 31%; }
    .r04-low-route-labels a:nth-child(3) { right: 14%; }

    .r04-hotspot-links,
    .r04-capability-hotspots,
    .r04-hotspot-details,
    .r04-capability-details,
    .r04-mission-stages,
    .r04-low-system-domains,
    .r04-safety-state-flow ul,
    .r04-implementation-flow {
        grid-template-columns: 1fr;
    }

    .r04-hotspot-details article,
    .r04-capability-details article {
        border-right: 0;
    }

    .no-js .r04-capability-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .r04-mission-stages li {
        min-height: 0;
        padding: 20px;
        text-align: left;
    }

    .r04-low-system-domains article { min-height: 0; }

    .r04-safety-state-flow {
        padding-inline: 18px;
    }

    .r04-safety-state-flow li {
        min-height: 0;
        padding: 0 0 24px 62px;
        text-align: left;
    }

    .r04-safety-state-flow li::before {
        top: 0;
        left: 22px;
        transform: none;
    }

    .r04-safety-state-flow li::after {
        top: 19px;
        left: 41px;
        transform: none;
    }

    .r04-implementation-flow li,
    .r04-implementation-flow li:nth-child(2n),
    .r04-implementation-flow li:nth-child(3n) {
        min-height: 0;
        padding: 22px 18px;
        border-right: 0;
    }
}

@keyframes r04-scene-path-flow {
    to { stroke-dashoffset: -104; }
}

@keyframes r04-scene-path-return {
    to { stroke-dashoffset: 104; }
}

@keyframes r04-hotspot-pulse {
    0% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.72); }
    72%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}

@keyframes r04-scene-detail-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .r04-world-model *,
    .r04-world-model *::before,
    .r04-world-model *::after,
    .r04-low-altitude *,
    .r04-low-altitude *::before,
    .r04-low-altitude *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .r04-world-signal-path,
    .r04-world-cycle-current,
    .r04-world-cycle-return,
    .r04-low-hero-route path,
    .r04-hotspot::after {
        animation: none !important;
    }
}