/* =========================================
   FUTUREVERSE SPACE CENTER
   SPACE MISSIONS
   space-missions.css
========================================= */


/* =========================================
   01. ROOT & RESET
========================================= */

:root {

    --missions-primary: #3157d5;
    --missions-secondary: #5278f0;
    --missions-accent: #7e9cff;

    --missions-dark: #10182f;
    --missions-deep: #070d20;

    --missions-text: #17213d;
    --missions-muted: #66708a;

    --missions-bg: #f5f7fc;
    --missions-card: #ffffff;
    --missions-border: rgba(38, 63, 130, 0.10);

    --missions-shadow:
        0 18px 55px rgba(25, 43, 91, 0.10);

    --missions-radius: 24px;

}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--missions-bg);

    color: var(--missions-text);

    line-height: 1.7;

}


a {
    text-decoration: none;
    color: inherit;
}


button {
    font: inherit;
}


.missions-section,
.mission-flow-section,
.mission-story-section {
    scroll-margin-top: 100px;
}



/* =========================================
   02. PAGE
========================================= */

.space-missions-page {

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

}



/* =========================================
   03. HEADER
========================================= */

.missions-header {

    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;

    min-height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.missions-brand {

    display: flex;

    align-items: center;

    gap: 12px;

}


.missions-brand-icon {

    width: 46px;
    height: 46px;

    border-radius: 15px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--missions-primary),
            var(--missions-secondary)
        );

    box-shadow:
        0 10px 25px rgba(49, 87, 213, 0.25);

}


.missions-brand-icon i {
    font-size: 20px;
}


.missions-brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1.15;

}


.missions-brand-text strong {

    font-size: 17px;

    letter-spacing: -0.3px;

}


.missions-brand-text span {

    margin-top: 3px;

    font-size: 11px;

    color: var(--missions-muted);

    text-transform: uppercase;

    letter-spacing: 1.4px;

}


.back-home-btn {

    min-height: 42px;

    padding: 0 17px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 12px;

    color: var(--missions-primary);

    background: rgba(49, 87, 213, 0.08);

    font-size: 13px;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        background 0.2s ease;

}


.back-home-btn:hover {

    transform: translateY(-2px);

    background: rgba(49, 87, 213, 0.14);

}



/* =========================================
   04. HERO
========================================= */

.missions-hero {

    position: relative;

    width: min(1180px, calc(100% - 40px));

    min-height: 570px;

    margin: 20px auto 0;

    padding: 75px 70px;

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    gap: 40px;

    overflow: hidden;

    border-radius: 34px;

    color: #ffffff;

    background:

        radial-gradient(
            circle at 75% 45%,
            rgba(103, 135, 255, 0.25),
            transparent 30%
        ),

        radial-gradient(
            circle at 15% 90%,
            rgba(53, 102, 225, 0.18),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #071128,
            #101e49 52%,
            #1b3472
        );

    box-shadow:
        0 30px 80px rgba(14, 29, 75, 0.22);

}


.missions-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.55;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,0.75) 1px,
            transparent 1.5px
        );

    background-size: 95px 95px;

}


.missions-hero-content {

    position: relative;

    z-index: 2;

}


.missions-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

    color: #aebfff;

}


.missions-eyebrow::before {

    content: "";

    width: 24px;
    height: 2px;

    border-radius: 10px;

    background: var(--missions-secondary);

}


.missions-hero h1 {

    max-width: 650px;

    font-size: clamp(48px, 7vw, 82px);

    line-height: 0.98;

    letter-spacing: -4px;

    font-weight: 850;

}


.missions-hero h1 span {

    display: block;

    color: #8ea8ff;

}


.missions-hero p {

    max-width: 650px;

    margin-top: 25px;

    color: #d3dbf4;

    font-size: 16px;

    line-height: 1.85;

}


.missions-hero-meta {

    margin-top: 38px;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}


.missions-meta-item {

    min-width: 135px;

    padding: 13px 16px;

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 14px;

    background: rgba(255,255,255,0.06);

    backdrop-filter: blur(8px);

}


.missions-meta-item strong {

    display: block;

    font-size: 12px;

    color: #a9bbff;

    letter-spacing: 1px;

}


.missions-meta-item span {

    display: block;

    margin-top: 2px;

    font-size: 12px;

    color: #e3e8fa;

}



/* =========================================
   05. HERO ROCKET VISUAL
========================================= */

.missions-hero-visual {

    position: relative;

    width: min(440px, 100%);

    height: 400px;

    margin-left: auto;

}


.mission-orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid rgba(155, 177, 255, 0.20);

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-18deg);

}


.orbit-one {

    width: 330px;
    height: 150px;
}


.orbit-two {

    width: 390px;
    height: 190px;

    transform:
        translate(-50%, -50%)
        rotate(28deg);

}


.mission-planet {

    position: absolute;

    left: 54%;
    top: 55%;

    width: 150px;
    height: 150px;

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

    border-radius: 50%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 32% 28%,
            #7f9cff,
            #4164cf 48%,
            #233c8c 78%,
            #152653
        );

    box-shadow:
        inset -20px -18px 35px rgba(0,0,0,0.32),
        0 0 70px rgba(101, 135, 255, 0.20);

}


.mission-land {

    position: absolute;

    border-radius: 50%;

    background: rgba(153, 182, 255, 0.28);

    filter: blur(1px);

}


.land-a {

    width: 75px;
    height: 28px;

    left: 18px;
    top: 48px;

    transform: rotate(-25deg);

}


.land-b {

    width: 60px;
    height: 22px;

    right: 12px;
    bottom: 38px;

    transform: rotate(30deg);

}


.mission-rocket {

    position: absolute;

    left: 61%;
    top: 26%;

    width: 72px;
    height: 150px;

    transform:
        translate(-50%, -50%)
        rotate(38deg);

    z-index: 4;

}


.rocket-body {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 42px;
    height: 115px;

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

    border-radius: 50% 50% 40% 40%;

    background:
        linear-gradient(
            90deg,
            #dce4ff,
            #ffffff,
            #aebcf0
        );

}


.rocket-window {

    position: absolute;

    left: 50%;
    top: 38px;

    width: 16px;
    height: 16px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #4267d8;

    border: 3px solid #d7def5;

    z-index: 2;

}


.rocket-fin {

    position: absolute;

    bottom: 25px;

    width: 20px;
    height: 35px;

    background: #7189d9;

    z-index: 1;

}


.fin-left {

    left: 3px;

    clip-path:
        polygon(100% 0, 100% 100%, 0 100%);

}


.fin-right {

    right: 3px;

    clip-path:
        polygon(0 0, 100% 100%, 0 100%);

}


.rocket-flame {

    position: absolute;

    left: 50%;
    bottom: -12px;

    width: 20px;
    height: 35px;

    transform: translateX(-50%);

    border-radius:
        50%
        50%
        65%
        65%;

    background:
        linear-gradient(
            to bottom,
            #fff6ad,
            #ffb04c,
            #ef5b55
        );

    filter: blur(1px);

    animation:
        rocketFlame 0.55s ease-in-out infinite alternate;

}


@keyframes rocketFlame {

    from {
        transform:
            translateX(-50%)
            scaleY(0.82);
    }

    to {
        transform:
            translateX(-50%)
            scaleY(1.12);
    }

}


.mission-star {

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 10px rgba(255,255,255,0.8);

}


.ms-one {
    left: 12%;
    top: 22%;
}

.ms-two {
    right: 8%;
    top: 30%;
}

.ms-three {
    left: 20%;
    bottom: 20%;
}

.ms-four {
    right: 18%;
    bottom: 15%;
}

.ms-five {
    left: 42%;
    top: 8%;
}



/* =========================================
   06. DOCUMENTARY NAVIGATION
========================================= */

.missions-documentary-nav {

    position: sticky;

    top: 0;

    z-index: 100;

    width: 100%;

    margin-top: 28px;

    padding: 12px max(20px, calc((100% - 1180px) / 2));

    display: flex;

    align-items: center;

    gap: 7px;

    overflow-x: auto;

    background:
        rgba(245, 247, 252, 0.90);

    border-top:
        1px solid var(--missions-border);

    border-bottom:
        1px solid var(--missions-border);

    backdrop-filter: blur(14px);

    scrollbar-width: none;

}


.missions-documentary-nav::-webkit-scrollbar {
    display: none;
}


.missions-documentary-nav a {

    flex: 0 0 auto;

    padding: 8px 13px;

    border-radius: 10px;

    color: var(--missions-muted);

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        background 0.2s ease;

}


.missions-documentary-nav a:hover {

    color: var(--missions-primary);

    background:
        rgba(49, 87, 213, 0.08);

}


.missions-documentary-nav a.active {

    color: var(--missions-primary);

    background:
        rgba(49, 87, 213, 0.10);

}



/* =========================================
   07. GENERAL SECTIONS
========================================= */

.missions-section {

    width: min(1100px, calc(100% - 40px));

    margin: 105px auto 0;

}


.section-heading {

    max-width: 820px;

    margin-bottom: 42px;

}


.section-heading > span {

    display: block;

    margin-bottom: 10px;

    color: var(--missions-primary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.section-heading h2 {

    font-size: clamp(30px, 5vw, 48px);

    line-height: 1.1;

    letter-spacing: -1.7px;

    color: var(--missions-dark);

}


.section-heading p {

    margin-top: 17px;

    color: var(--missions-muted);

    font-size: 15px;

    line-height: 1.85;

}



/* =========================================
   08. OVERVIEW
========================================= */

.mission-overview-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;

}


.overview-card {

    padding: 28px 23px;

    border:
        1px solid var(--missions-border);

    border-radius:
        var(--missions-radius);

    background:
        var(--missions-card);

    box-shadow:
        var(--missions-shadow);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.overview-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 25px 65px rgba(25, 43, 91, 0.14);

}


.overview-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 15px;

    color: var(--missions-primary);

    background:
        rgba(49, 87, 213, 0.10);

}


.overview-icon i {
    font-size: 19px;
}


.overview-card h3 {

    font-size: 17px;

    color: var(--missions-dark);

}


.overview-card p {

    margin-top: 10px;

    color: var(--missions-muted);

    font-size: 13px;

    line-height: 1.75;

}



/* =========================================
   09. MISSION FLOW
========================================= */

.mission-flow-section {

    width: min(1180px, calc(100% - 40px));

    margin: 105px auto 0;

    padding: 60px 50px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #f8f9ff
        );

    border:
        1px solid rgba(49, 87, 213, 0.08);

}


.mission-flow {

    display: flex;

    align-items: center;

    justify-content: center;

}


.mission-flow-step {

    flex: 1;

    min-width: 120px;

    text-align: center;

}


.mission-flow-step span {

    display: block;

    margin-bottom: 8px;

    color: var(--missions-primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


.mission-flow-step i {

    width: 55px;
    height: 55px;

    margin: 0 auto 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 18px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--missions-primary),
            var(--missions-secondary)
        );

    box-shadow:
        0 12px 25px rgba(49, 87, 213, 0.20);

}


.mission-flow-step strong {

    display: block;

    color: var(--missions-dark);

    font-size: 14px;

}


.mission-flow-step small {

    display: block;

    margin-top: 4px;

    color: var(--missions-muted);

    font-size: 11px;

    line-height: 1.5;

}


.flow-line {

    width: 45px;

    height: 1px;

    flex: 0 0 auto;

    background:
        rgba(49, 87, 213, 0.20);

}



/* =========================================
   10. DESIGN
========================================= */

.design-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;

}


.design-card {

    position: relative;

    padding: 30px 24px;

    min-height: 220px;

    overflow: hidden;

    border-radius:
        var(--missions-radius);

    background:
        var(--missions-card);

    border:
        1px solid var(--missions-border);

    box-shadow:
        var(--missions-shadow);

}


.design-number {

    font-size: 42px;

    font-weight: 850;

    line-height: 1;

    color:
        rgba(49, 87, 213, 0.10);

}


.design-card h3 {

    margin-top: 18px;

    color: var(--missions-dark);

    font-size: 17px;

}


.design-card p {

    margin-top: 9px;

    color: var(--missions-muted);

    font-size: 13px;

    line-height: 1.75;

}



/* =========================================
   11. LAUNCH
========================================= */

.launch-feature {

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 50px;

    align-items: center;

    padding: 50px;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #101a3a,
            #17295d
        );

    color: #ffffff;

}


.launch-visual {

    position: relative;

    height: 350px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.launch-rocket-body {

    position: relative;

    width: 58px;
    height: 210px;

    border-radius:
        50%
        50%
        22%
        22%;

    background:
        linear-gradient(
            90deg,
            #bfcaf0,
            #ffffff,
            #8799d2
        );

    box-shadow:
        0 0 40px rgba(126,156,255,0.20);

}


.launch-window {

    position: absolute;

    left: 50%;
    top: 55px;

    width: 22px;
    height: 22px;

    transform: translateX(-50%);

    border-radius: 50%;

    border: 4px solid #dbe2f6;

    background: #405fc1;

}


.launch-fin {

    position: absolute;

    top: 225px;

    width: 30px;
    height: 55px;

    background: #6478bc;

}


.launch-fin.left {

    margin-left: -55px;

    clip-path:
        polygon(100% 0, 100% 100%, 0 100%);

}


.launch-fin.right {

    margin-left: 25px;

    clip-path:
        polygon(0 0, 100% 100%, 0 100%);

}


.launch-flame {

    position: absolute;

    width: 34px;
    height: 90px;

    margin-top: 265px;

    border-radius:
        50%
        50%
        70%
        70%;

    background:
        linear-gradient(
            to bottom,
            #fff3a4,
            #ffad43,
            #ef5656
        );

    filter: blur(2px);

    animation:
        launchFlame 0.5s ease-in-out infinite alternate;

}


@keyframes launchFlame {

    from {
        transform: scaleY(0.82);
    }

    to {
        transform: scaleY(1.12);
    }

}


.launch-content > span {

    color: #9db1ff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.launch-content h3 {

    margin-top: 10px;

    max-width: 600px;

    font-size: clamp(27px, 4vw, 40px);

    line-height: 1.15;

    letter-spacing: -1px;

}


.launch-content > p {

    margin-top: 17px;

    color: #cbd4ef;

    font-size: 14px;

    line-height: 1.85;

}


.launch-points {

    margin-top: 28px;

    display: grid;

    gap: 15px;

}


.launch-points div {

    display: grid;

    grid-template-columns: 110px 1fr;

    gap: 15px;

    padding-bottom: 13px;

    border-bottom:
        1px solid rgba(255,255,255,0.10);

}


.launch-points strong {

    color: #ffffff;

    font-size: 13px;

}


.launch-points span {

    color: #bfc9e5;

    font-size: 12px;

}



/* =========================================
   12. ORBIT
========================================= */

.orbit-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

}


.orbit-card {

    padding: 30px;

    border-radius:
        var(--missions-radius);

    background:
        var(--missions-card);

    border:
        1px solid var(--missions-border);

    box-shadow:
        var(--missions-shadow);

}


.orbit-icon {

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 16px;

    color: var(--missions-primary);

    background:
        rgba(49, 87, 213, 0.10);

}


.orbit-card h3 {

    margin-top: 20px;

    font-size: 18px;

    color: var(--missions-dark);

}


.orbit-card p {

    margin-top: 10px;

    color: var(--missions-muted);

    font-size: 13px;

}



/* =========================================
   13. JOURNEY
========================================= */

.journey-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;

}


.journey-card {

    padding: 28px 23px;

    border-radius:
        var(--missions-radius);

    background:
        var(--missions-card);

    border:
        1px solid var(--missions-border);

    box-shadow:
        var(--missions-shadow);

}


.journey-card > i {

    font-size: 22px;

    color: var(--missions-primary);

}


.journey-card h3 {

    margin-top: 18px;

    font-size: 17px;

    color: var(--missions-dark);

}


.journey-card p {

    margin-top: 9px;

    color: var(--missions-muted);

    font-size: 13px;

}



/* =========================================
   14. NAVIGATION
========================================= */

.navigation-layout {

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    align-items: center;

    gap: 70px;

}


.navigation-radar {

    position: relative;

    width: 330px;
    height: 330px;

    margin: auto;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(49, 87, 213, 0.05),
            rgba(49, 87, 213, 0.01) 60%,
            transparent 61%
        );

}


.radar-circle {

    position: absolute;

    left: 50%;
    top: 50%;

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

    border:
        1px solid rgba(49, 87, 213, 0.20);

    border-radius: 50%;

}


.radar-large {

    width: 100%;
    height: 100%;
}


.radar-medium {

    width: 68%;
    height: 68%;
}


.radar-small {

    width: 36%;
    height: 36%;
}


.radar-line {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 47%;

    height: 1px;

    transform-origin: left center;

    background:
        var(--missions-secondary);

    transform:
        rotate(-35deg);

}


.radar-spacecraft {

    position: absolute;

    right: 18px;
    top: 68px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: #ffffff;

    background:
        var(--missions-primary);

    box-shadow:
        0 10px 25px rgba(49, 87, 213, 0.28);

}


.navigation-content {

    display: grid;

    gap: 20px;

}


.navigation-content article {

    padding: 23px 25px;

    border-left:
        3px solid var(--missions-primary);

    border-radius: 0 17px 17px 0;

    background:
        var(--missions-card);

    box-shadow:
        var(--missions-shadow);

}


.navigation-content strong {

    font-size: 16px;

    color: var(--missions-dark);

}


.navigation-content p {

    margin-top: 6px;

    color: var(--missions-muted);

    font-size: 13px;

}



/* =========================================
   15. SPACECRAFT
========================================= */

.spacecraft-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

}


.spacecraft-card {

    padding: 28px 24px;

    border-radius:
        var(--missions-radius);

    background:
        var(--missions-card);

    border:
        1px solid var(--missions-border);

    box-shadow:
        var(--missions-shadow);

}


.spacecraft-card > i {

    color: var(--missions-primary);

    font-size: 23px;

}


.spacecraft-card h3 {

    margin-top: 16px;

    color: var(--missions-dark);

    font-size: 17px;

}


.spacecraft-card p {

    margin-top: 9px;

    color: var(--missions-muted);

    font-size: 13px;

}



/* =========================================
   16. ARRIVAL
========================================= */

.arrival-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;

}


.arrival-card {

    padding: 28px 23px;

    border-radius:
        var(--missions-radius);

    background:
        var(--missions-card);

    border:
        1px solid var(--missions-border);

    box-shadow:
        var(--missions-shadow);

}


.arrival-number {

    font-size: 35px;

    font-weight: 850;

    line-height: 1;

    color:
        rgba(49, 87, 213, 0.14);

}


.arrival-card h3 {

    margin-top: 17px;

    color: var(--missions-dark);

    font-size: 17px;

}


.arrival-card p {

    margin-top: 9px;

    color: var(--missions-muted);

    font-size: 13px;

}



/* =========================================
   17. EXPLORATION
========================================= */

.exploration-section {

    padding-top: 15px;

}


.exploration-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 20px;

}


.exploration-card {

    padding: 35px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #ffffff
        );

    border:
        1px solid rgba(49,87,213,0.10);

}


.exploration-icon {

    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--missions-primary),
            var(--missions-secondary)
        );

}


.exploration-card h3 {

    margin-top: 20px;

    color: var(--missions-dark);

    font-size: 21px;

}


.exploration-card p {

    margin-top: 10px;

    color: var(--missions-muted);

    font-size: 14px;

    line-height: 1.8;

}



/* =========================================
   18. MISSION TYPES
========================================= */

.mission-types-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

}


.mission-type-card {

    padding: 28px 24px;

    border-radius:
        var(--missions-radius);

    background:
        var(--missions-card);

    border:
        1px solid var(--missions-border);

    box-shadow:
        var(--missions-shadow);

}


.mission-type-card > i {

    color: var(--missions-primary);

    font-size: 22px;

}


.mission-type-card h3 {

    margin-top: 16px;

    color: var(--missions-dark);

    font-size: 17px;

}


.mission-type-card p {

    margin-top: 8px;

    color: var(--missions-muted);

    font-size: 13px;

}



/* =========================================
   19. TARGETS
========================================= */

.targets-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;

}


.target-card {

    position: relative;

    min-height: 235px;

    padding: 28px 23px;

    overflow: hidden;

    border-radius:
        var(--missions-radius);

    background:
        var(--missions-card);

    border:
        1px solid var(--missions-border);

    box-shadow:
        var(--missions-shadow);

    transition:
        transform 0.25s ease;

}


.target-card:hover {

    transform: translateY(-5px);

}


.target-card::after {

    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -55px;
    bottom: -55px;

    border-radius: 50%;

    background:
        rgba(49, 87, 213, 0.06);

}


.target-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    color: var(--missions-primary);

    background:
        rgba(49, 87, 213, 0.10);

}


.target-card h3 {

    margin-top: 17px;

    color: var(--missions-dark);

    font-size: 17px;

}


.target-card p {

    margin-top: 9px;

    color: var(--missions-muted);

    font-size: 13px;

    line-height: 1.7;

}



/* =========================================
   20. MISSION STORY
========================================= */

.mission-story-section {

    width: min(1100px, calc(100% - 40px));

    margin: 105px auto 0;

}


.mission-story {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 0;

}


.mission-story::before {

    content: "";

    position: absolute;

    left: 7%;

    right: 7%;

    top: 23px;

    height: 1px;

    background:
        rgba(49, 87, 213, 0.18);

}


.story-item {

    position: relative;

    z-index: 2;

    padding: 0 8px;

    text-align: center;

}


.story-item span {

    width: 46px;
    height: 46px;

    margin: 0 auto;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        var(--missions-primary);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.5px;

    box-shadow:
        0 8px 22px rgba(49,87,213,0.20);

}


.story-item p {

    margin-top: 16px;

    color: var(--missions-muted);

    font-size: 11px;

    line-height: 1.55;

}



/* =========================================
   21. LEGACY
========================================= */

.legacy-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;

}


.legacy-card {

    padding: 28px 23px;

    border-radius:
        var(--missions-radius);

    background:
        var(--missions-card);

    border:
        1px solid var(--missions-border);

    box-shadow:
        var(--missions-shadow);

}


.legacy-card > i {

    color: var(--missions-primary);

    font-size: 22px;

}


.legacy-card h3 {

    margin-top: 17px;

    color: var(--missions-dark);

    font-size: 17px;

}


.legacy-card p {

    margin-top: 9px;

    color: var(--missions-muted);

    font-size: 13px;

}



/* =========================================
   22. CONNECTION
========================================= */

.missions-connection {

    width: min(1180px, calc(100% - 40px));

    margin: 110px auto 0;

    padding: 55px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #101a3a,
            #1c3472
        );

    color: #ffffff;

}


.connection-content {

    max-width: 600px;

}


.connection-content > span {

    color: #a9baff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.connection-content h2 {

    margin-top: 10px;

    font-size: clamp(25px, 4vw, 38px);

    line-height: 1.15;

    letter-spacing: -1px;

}


.connection-content p {

    margin-top: 12px;

    color: #cbd4ef;

    font-size: 13px;

}


.connection-actions {

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 9px;

}


.connection-btn {

    min-height: 43px;

    padding: 0 15px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 12px;

    color: #ffffff;

    background:
        rgba(255,255,255,0.10);

    border:
        1px solid rgba(255,255,255,0.12);

    font-size: 11px;

    font-weight: 700;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.connection-btn:hover {

    transform: translateY(-2px);

    background:
        rgba(255,255,255,0.16);

}



/* =========================================
   23. FOOTER
========================================= */

.missions-footer {

    width: min(1180px, calc(100% - 40px));

    margin: 80px auto 0;

    padding: 35px 0 30px;

    border-top:
        1px solid var(--missions-border);

}


.missions-footer-brand {

    display: flex;

    align-items: center;

    gap: 11px;

}


.footer-rocket-icon {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: #ffffff;

    background:
        var(--missions-primary);

}


.missions-footer-brand div:last-child {

    display: flex;

    flex-direction: column;

    line-height: 1.2;

}


.missions-footer-brand strong {

    font-size: 15px;

}


.missions-footer-brand span {

    margin-top: 3px;

    color: var(--missions-muted);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.missions-footer-links {

    margin-top: 24px;

    display: flex;

    flex-wrap: wrap;

    gap: 17px;

}


.missions-footer-links a {

    color: var(--missions-muted);

    font-size: 12px;

    font-weight: 650;

    transition:
        color 0.2s ease;

}


.missions-footer-links a:hover {

    color: var(--missions-primary);

}


.missions-footer-copy {

    margin-top: 25px;

    color: #8992a8;

    font-size: 11px;

}



/* =========================================
   24. DARK MODE
========================================= */

body[data-theme="dark"] {

    --missions-text: #edf1ff;

    --missions-muted: #a8b1c9;

    --missions-bg: #080d1d;

    --missions-card: #10182e;

    --missions-border:
        rgba(153, 171, 230, 0.11);

    --missions-shadow:
        0 18px 55px rgba(0,0,0,0.25);

}


body[data-theme="dark"] .missions-documentary-nav {

    background:
        rgba(8, 13, 29, 0.90);

}


body[data-theme="dark"] .section-heading h2,
body[data-theme="dark"] .overview-card h3,
body[data-theme="dark"] .design-card h3,
body[data-theme="dark"] .orbit-card h3,
body[data-theme="dark"] .journey-card h3,
body[data-theme="dark"] .navigation-content strong,
body[data-theme="dark"] .spacecraft-card h3,
body[data-theme="dark"] .arrival-card h3,
body[data-theme="dark"] .exploration-card h3,
body[data-theme="dark"] .mission-type-card h3,
body[data-theme="dark"] .target-card h3,
body[data-theme="dark"] .legacy-card h3,
body[data-theme="dark"] .mission-flow-step strong {

    color: #edf1ff;

}


body[data-theme="dark"] .mission-flow-section {

    background:
        linear-gradient(
            135deg,
            #10182e,
            #0c1328
        );

}


body[data-theme="dark"] .exploration-card {

    background:
        linear-gradient(
            135deg,
            #111a33,
            #0d1428
        );

}


body[data-theme="dark"] .navigation-content article {

    background:
        var(--missions-card);

}



/* =========================================
   25. TABLET
========================================= */

@media (max-width: 1000px) {


    .missions-hero {

        grid-template-columns: 1fr;

        padding: 65px 55px;

    }


    .missions-hero-visual {

        margin: 10px auto 0;

    }


    .mission-overview-grid,
    .design-grid,
    .journey-grid,
    .legacy-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .targets-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .mission-types-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .spacecraft-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .navigation-layout {

        gap: 40px;

    }


    .mission-story {

        grid-template-columns:
            repeat(4, 1fr);

        row-gap: 35px;

    }


    .mission-story::before {

        display: none;

    }


    .missions-connection {

        flex-direction: column;

        align-items: flex-start;

    }


    .connection-actions {

        justify-content: flex-start;

    }

}



/* =========================================
   26. MOBILE
========================================= */

@media (max-width: 700px) {


    .missions-header {

        width: min(100% - 28px, 1180px);

        min-height: 68px;

    }


    .missions-brand-icon {

        width: 41px;
        height: 41px;

        border-radius: 13px;

    }


    .missions-brand-text strong {

        font-size: 15px;

    }


    .missions-brand-text span {

        font-size: 9px;

    }


    .back-home-btn {

        min-height: 38px;

        padding: 0 11px;

        font-size: 10px;

    }


    .back-home-btn i {

        font-size: 10px;

    }


    .missions-hero {

        width: calc(100% - 28px);

        min-height: auto;

        margin-top: 14px;

        padding: 48px 25px 35px;

        border-radius: 25px;

    }


    .missions-hero h1 {

        font-size: clamp(43px, 15vw, 65px);

        letter-spacing: -3px;

    }


    .missions-hero p {

        margin-top: 20px;

        font-size: 13px;

        line-height: 1.75;

    }


    .missions-hero-meta {

        margin-top: 25px;

        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 7px;

    }


    .missions-meta-item {

        min-width: 0;

        padding: 10px 8px;

        border-radius: 11px;

    }


    .missions-meta-item strong {

        font-size: 9px;

    }


    .missions-meta-item span {

        font-size: 9px;

    }


    .missions-hero-visual {

        width: 100%;

        height: 285px;

    }


    .mission-planet {

        width: 115px;
        height: 115px;

    }


    .orbit-one {

        width: 270px;
        height: 125px;

    }


    .orbit-two {

        width: 315px;
        height: 155px;

    }


    .mission-rocket {

        transform:
            translate(-50%, -50%)
            rotate(38deg)
            scale(0.78);

    }


    .missions-documentary-nav {

        margin-top: 18px;

        padding:
            9px 14px;

    }


    .missions-documentary-nav a {

        padding: 7px 10px;

        font-size: 10px;

    }


    .missions-section {

        width: calc(100% - 28px);

        margin-top: 75px;

    }


    .section-heading {

        margin-bottom: 28px;

    }


    .section-heading h2 {

        font-size: 31px;

        letter-spacing: -1px;

    }


    .section-heading p {

        margin-top: 13px;

        font-size: 13px;

        line-height: 1.75;

    }


    .mission-overview-grid,
    .design-grid,
    .journey-grid,
    .legacy-grid,
    .orbit-grid,
    .spacecraft-grid,
    .arrival-grid,
    .mission-types-grid,
    .targets-grid {

        grid-template-columns: 1fr;

    }


    .overview-card,
    .design-card,
    .orbit-card,
    .journey-card,
    .spacecraft-card,
    .arrival-card,
    .mission-type-card,
    .legacy-card {

        padding: 24px 21px;

    }


    .design-card {

        min-height: auto;

    }


    .mission-flow-section {

        width: calc(100% - 28px);

        margin-top: 75px;

        padding: 38px 20px;

        border-radius: 24px;

    }


    .mission-flow {

        display: grid;

        grid-template-columns: 1fr;

        gap: 17px;

    }


    .mission-flow-step {

        display: grid;

        grid-template-columns:
            34px 45px 1fr;

        align-items: center;

        gap: 10px;

        min-width: 0;

        text-align: left;

    }


    .mission-flow-step span {

        margin: 0;

        font-size: 9px;

    }


    .mission-flow-step i {

        width: 45px;
        height: 45px;

        margin: 0;

        border-radius: 14px;

    }


    .mission-flow-step strong {

        font-size: 13px;

    }


    .mission-flow-step small {

        grid-column: 3;

        margin-top: -7px;

        font-size: 10px;

    }


    .flow-line {

        display: none;

    }


    .launch-feature {

        grid-template-columns: 1fr;

        gap: 20px;

        padding: 30px 23px;

        border-radius: 24px;

    }


    .launch-visual {

        height: 270px;

    }


    .launch-content h3 {

        font-size: 27px;

    }


    .launch-content > p {

        font-size: 13px;

    }


    .launch-points div {

        grid-template-columns:
            85px 1fr;

        gap: 10px;

    }


    .navigation-layout {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .navigation-radar {

        width: 270px;
        height: 270px;

    }


    .exploration-grid {

        grid-template-columns: 1fr;

    }


    .exploration-card {

        padding: 27px 22px;

        border-radius: 23px;

    }


    .target-card {

        min-height: auto;

    }


    .mission-story-section {

        width: calc(100% - 28px);

        margin-top: 75px;

    }


    .mission-story {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 28px 10px;

    }


    .story-item {

        padding: 0 5px;

    }


    .missions-connection {

        width: calc(100% - 28px);

        margin-top: 75px;

        padding: 35px 24px;

        border-radius: 24px;

    }


    .connection-content h2 {

        font-size: 28px;

    }


    .connection-actions {

        width: 100%;

        display: grid;

        grid-template-columns: 1fr;

    }


    .connection-btn {

        width: 100%;

    }


    .missions-footer {

        width: calc(100% - 28px);

        margin-top: 60px;

    }


    .missions-footer-links {

        gap: 12px 15px;

    }

}



/* =========================================
   27. SMALL MOBILE
========================================= */

@media (max-width: 430px) {


    .missions-header {

        gap: 8px;

    }


    .missions-brand {

        gap: 8px;

    }


    .missions-brand-icon {

        width: 38px;
        height: 38px;

    }


    .missions-brand-text strong {

        font-size: 14px;

    }


    .back-home-btn {

        padding: 0 9px;

        font-size: 9px;

    }


    .missions-hero {

        padding-left: 20px;
        padding-right: 20px;

    }


    .missions-hero h1 {

        font-size: 43px;

    }


    .missions-hero-meta {

        grid-template-columns: 1fr;

    }


    .missions-meta-item {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 10px;

    }


    .missions-meta-item span {

        text-align: right;

    }


    .missions-hero-visual {

        height: 250px;

    }


    .mission-planet {

        width: 100px;
        height: 100px;

    }


    .orbit-one {

        width: 235px;
        height: 110px;

    }


    .orbit-two {

        width: 275px;
        height: 135px;

    }


    .section-heading h2 {

        font-size: 28px;

    }


    .launch-points div {

        grid-template-columns: 1fr;

        gap: 3px;

    }


    .navigation-radar {

        width: 235px;
        height: 235px;

    }


    .mission-story {

        grid-template-columns: 1fr;

        gap: 22px;

    }


    .story-item {

        display: grid;

        grid-template-columns: 46px 1fr;

        align-items: center;

        gap: 13px;

        text-align: left;

    }


    .story-item span {

        margin: 0;

    }


    .story-item p {

        margin: 0;

        font-size: 11px;

    }

}