/* =========================================
   FUTUREVERSE SPACE CENTER
   ASTRONOMY
   astronomy.css
========================================= */


/* =========================================
   01. ROOT
========================================= */

:root {

    --astro-primary: #6957d9;
    --astro-secondary: #8b6ff0;
    --astro-accent: #b38cff;

    --astro-dark: #211d3d;
    --astro-text: #34314a;
    --astro-muted: #737086;

    --astro-bg: #f7f6fc;
    --astro-card: #ffffff;

    --astro-border:
        rgba(105, 87, 217, 0.12);

    --astro-shadow:
        0 20px 55px
        rgba(53, 42, 100, 0.10);

    --astro-radius: 24px;
}


/* =========================================
   02. RESET
========================================= */

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

html {
    scroll-behavior: smooth;
}

body {

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        var(--astro-bg);

    color:
        var(--astro-text);

    line-height: 1.7;

    overflow-x: hidden;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

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

button {
    font: inherit;
}

img {
    max-width: 100%;
    display: block;
}


/* =========================================
   03. PAGE
========================================= */

.astronomy-page {
    width: 100%;
    min-height: 100vh;
}


/* =========================================
   04. HEADER
========================================= */

.astronomy-header {

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

    min-height: 82px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


/* Brand */

.astronomy-brand {

    display: flex;

    align-items: center;

    gap: 12px;
}

.astronomy-brand-icon {

    width: 46px;
    height: 46px;

    display: flex;

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

    border-radius: 14px;

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

    color: #ffffff;

    font-size: 20px;

    box-shadow:
        0 10px 28px
        rgba(105,87,217,0.25);
}

.astronomy-brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1.2;
}

.astronomy-brand-text strong {

    color:
        var(--astro-dark);

    font-size: 17px;

    letter-spacing:
        -0.3px;
}

.astronomy-brand-text span {

    margin-top: 3px;

    color:
        var(--astro-muted);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1.3px;
}


/* Back button */

.back-home-btn {

    display: inline-flex;

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

    gap: 8px;

    min-height: 42px;

    padding:
        0 17px;

    border-radius: 12px;

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

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

    color:
        var(--astro-dark);

    font-size: 13px;

    font-weight: 600;

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

.back-home-btn:hover {

    transform:
        translateY(-2px);

    background:
        #ffffff;

    box-shadow:
        0 10px 25px
        rgba(53,42,100,0.10);
}


/* =========================================
   05. HERO
========================================= */

.astronomy-hero {

    position: relative;

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

    min-height: 545px;

    margin:
        18px auto 0;

    padding:
        72px 70px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    overflow: hidden;

    border-radius: 34px;

    background:

        radial-gradient(
            circle at 75% 45%,
            rgba(166,123,255,0.24),
            transparent 30%
        ),

        radial-gradient(
            circle at 15% 15%,
            rgba(88,72,190,0.18),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #111026,
            #21194a 52%,
            #38216c
        );

    color:
        #ffffff;

    box-shadow:
        0 30px 85px
        rgba(43,31,93,0.25);
}


/* Cosmic particles */

.astronomy-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 12% 28%,
            rgba(255,255,255,0.7) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 28% 70%,
            rgba(255,255,255,0.55) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 48% 20%,
            rgba(255,255,255,0.7) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 67% 78%,
            rgba(255,255,255,0.45) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 89% 30%,
            rgba(255,255,255,0.7) 0 1px,
            transparent 2px
        );

    pointer-events: none;
}


/* Hero content */

.astronomy-hero-content {

    position: relative;

    z-index: 3;

    width:
        min(620px, 100%);
}

.astronomy-eyebrow {

    display: inline-block;

    margin-bottom: 14px;

    color:
        #c4adff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;
}

.astronomy-hero h1 {

    margin-bottom: 26px;

    font-size:
        clamp(52px, 6vw, 84px);

    line-height:
        0.96;

    letter-spacing:
        -4px;

    font-weight: 800;
}

.astronomy-hero h1 span {

    display: block;

    color:
        #b898ff;
}

.astronomy-hero p {

    max-width: 650px;

    color:
        rgba(255,255,255,0.75);

    font-size: 16px;

    line-height: 1.8;
}


/* Hero meta */

.astronomy-hero-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 30px;

    margin-top: 35px;
}

.astronomy-meta-item {

    display: flex;

    flex-direction: column;

    min-width: 110px;
}

.astronomy-meta-item strong {

    color:
        #ffffff;

    font-size: 22px;

    line-height: 1.2;
}

.astronomy-meta-item span {

    margin-top: 4px;

    color:
        rgba(255,255,255,0.52);

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}


/* =========================================
   06. COSMIC HERO VISUAL
========================================= */

.astronomy-visual {

    position: relative;

    width: 370px;
    height: 370px;

    flex-shrink: 0;

    display: flex;

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

    z-index: 2;
}

.cosmic-glow {

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        rgba(151,110,255,0.22);

    filter:
        blur(45px);
}

.cosmic-orbit {

    position: absolute;

    border:
        1px solid
        rgba(190,160,255,0.23);

    border-radius: 50%;

    transform:
        rotate(-18deg);
}

.orbit-one {

    width: 330px;
    height: 170px;
}

.orbit-two {

    width: 280px;
    height: 280px;

    transform:
        rotate(55deg);
}

.orbit-three {

    width: 190px;
    height: 330px;

    transform:
        rotate(-42deg);
}


/* Central star */

.cosmic-star {

    position: relative;

    z-index: 4;

    display: flex;

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

    border-radius: 50%;
}

.star-core {

    width: 120px;
    height: 120px;

    background:
        radial-gradient(
            circle,
            #ffffff 0%,
            #d8c6ff 25%,
            #9871ff 55%,
            #5d3bc5 100%
        );

    box-shadow:

        0 0 35px
        rgba(177,143,255,0.9),

        0 0 90px
        rgba(133,94,237,0.45);
}

.star-core i {

    color:
        #ffffff;

    font-size: 38px;

    filter:
        drop-shadow(
            0 0 10px
            rgba(255,255,255,0.8)
        );
}


/* Small stars */

.cosmic-star-dot {

    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #ffffff;

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

    animation:
        starPulse 2.5s ease-in-out infinite;
}

.dot-one {
    top: 48px;
    left: 105px;
}

.dot-two {
    top: 95px;
    right: 45px;
    animation-delay: 0.5s;
}

.dot-three {
    bottom: 62px;
    left: 52px;
    animation-delay: 0.9s;
}

.dot-four {
    bottom: 95px;
    right: 65px;
    animation-delay: 1.3s;
}

.dot-five {
    top: 30px;
    right: 125px;
    animation-delay: 1.7s;
}

@keyframes starPulse {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}


/* =========================================
   07. DOCUMENTARY NAV
========================================= */

.astronomy-documentary-nav {

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

    margin:
        26px auto 0;

    padding: 12px;

    display: flex;

    gap: 8px;

    overflow-x: auto;

    scrollbar-width: none;

    position: sticky;

    top: 12px;

    z-index: 50;

    border-radius: 18px;

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

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

    box-shadow:
        0 10px 35px
        rgba(53,42,100,0.07);
}

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

.astronomy-documentary-nav a {

    flex-shrink: 0;

    padding:
        9px 14px;

    border-radius: 10px;

    color:
        var(--astro-muted);

    font-size: 12px;

    font-weight: 600;

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

.astronomy-documentary-nav a:hover {

    color:
        var(--astro-primary);

    background:
        rgba(105,87,217,0.08);
}

.astronomy-documentary-nav a.active {

    color:
        var(--astro-primary);

    background:
        rgba(105,87,217,0.11);
}


/* =========================================
   08. GENERAL SECTIONS
========================================= */

.astronomy-section {

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

    margin:
        110px auto 0;
}

.section-heading {

    max-width: 780px;

    margin-bottom: 42px;
}

.section-heading > span {

    display: inline-block;

    margin-bottom: 10px;

    color:
        var(--astro-primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.section-heading h2 {

    margin-bottom: 14px;

    color:
        var(--astro-dark);

    font-size:
        clamp(30px, 4vw, 47px);

    line-height: 1.1;

    letter-spacing:
        -1.5px;
}

.section-heading p {

    color:
        var(--astro-muted);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================
   09. OVERVIEW
========================================= */

.astronomy-overview-grid {

    display: grid;

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

    gap: 18px;
}

.overview-card {

    padding:
        28px 24px;

    background:
        var(--astro-card);

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

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

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

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

.overview-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 25px 60px
        rgba(53,42,100,0.14);
}

.overview-icon {

    width: 48px;
    height: 48px;

    margin-bottom: 20px;

    display: flex;

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

    border-radius: 14px;

    background:
        rgba(105,87,217,0.09);

    color:
        var(--astro-primary);

    font-size: 19px;
}

.overview-card h3 {

    margin-bottom: 9px;

    color:
        var(--astro-dark);

    font-size: 18px;
}

.overview-card p {

    color:
        var(--astro-muted);

    font-size: 13px;

    line-height: 1.75;
}


/* Fact */

.astronomy-fact-box {

    margin-top: 24px;

    padding: 34px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(105,87,217,0.08),
            rgba(179,140,255,0.08)
        );

    border:
        1px solid
        rgba(105,87,217,0.12);
}

.astronomy-fact-box > span {

    color:
        var(--astro-primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;
}

.astronomy-fact-box h3 {

    margin:
        8px 0;

    color:
        var(--astro-dark);

    font-size: 22px;
}

.astronomy-fact-box p {

    max-width: 820px;

    color:
        var(--astro-muted);

    font-size: 14px;
}


/* =========================================
   10. LIGHT
========================================= */

.light-grid {

    display: grid;

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

    gap: 18px;
}

.light-card {

    padding: 30px 27px;

    background:
        var(--astro-card);

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

    border-radius: 22px;

    box-shadow:
        var(--astro-shadow);
}

.light-icon {

    width: 50px;
    height: 50px;

    margin-bottom: 20px;

    display: flex;

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

    border-radius: 15px;

    background:
        rgba(139,111,240,0.10);

    color:
        var(--astro-secondary);

    font-size: 20px;
}

.light-card h3 {

    margin-bottom: 9px;

    color:
        var(--astro-dark);

    font-size: 19px;
}

.light-card p {

    color:
        var(--astro-muted);

    font-size: 13px;
}


/* Spectrum */

.spectrum-bar {

    margin-top: 24px;

    padding:
        19px 20px;

    display: flex;

    justify-content: space-between;

    gap: 10px;

    overflow-x: auto;

    border-radius: 16px;

    background:
        linear-gradient(
            90deg,
            #3923a0,
            #5c45d0,
            #8b6ff0,
            #bd8dff,
            #7656df,
            #4932a7,
            #24166c
        );

    color:
        #ffffff;
}

.spectrum-bar span {

    flex-shrink: 0;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* =========================================
   11. STARS
========================================= */

.stars-feature {

    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #16112e,
            #28194d,
            #3b236b
        );

    color:
        #ffffff;

    box-shadow:
        0 25px 70px
        rgba(44,27,91,0.20);
}

.star-visual {

    position: relative;

    min-height: 360px;

    display: flex;

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

    overflow: hidden;
}

.star-glow {

    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    background:
        rgba(180,135,255,0.24);

    filter:
        blur(35px);
}

.star-visual .star-core {

    position: relative;

    width: 135px;
    height: 135px;

    border-radius: 50%;

    display: flex;

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

    background:
        radial-gradient(
            circle,
            #ffffff,
            #ffe5a6 32%,
            #ffb75d 60%,
            #e87845 100%
        );

    box-shadow:
        0 0 50px
        rgba(255,190,95,0.8);
}

.star-visual .star-core i {

    color:
        #ffffff;

    font-size: 42px;
}

.star-ray {

    position: absolute;

    width: 190px;
    height: 1px;

    background:
        rgba(255,220,160,0.25);
}

.ray-one {
    transform: rotate(0deg);
}

.ray-two {
    transform: rotate(45deg);
}

.ray-three {
    transform: rotate(90deg);
}

.ray-four {
    transform: rotate(135deg);
}

.star-content {

    padding:
        52px 48px;
}

.star-content > span {

    color:
        #c8aaff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.star-content h3 {

    margin:
        12px 0 16px;

    font-size:
        clamp(27px, 3vw, 39px);

    line-height: 1.15;
}

.star-content > p {

    color:
        rgba(255,255,255,0.70);

    font-size: 14px;
}

.star-life-cycle {

    display: grid;

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

    gap: 10px;

    margin-top: 30px;
}

.star-life-cycle div {

    padding:
        15px 12px;

    border-radius: 13px;

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

    border:
        1px solid
        rgba(255,255,255,0.08);
}

.star-life-cycle strong {

    display: block;

    margin-bottom: 5px;

    color:
        #bca0ff;

    font-size: 10px;
}

.star-life-cycle span {

    color:
        rgba(255,255,255,0.62);

    font-size: 10px;

    line-height: 1.4;
}


/* =========================================
   12. NEBULAE
========================================= */

.nebula-grid {

    display: grid;

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

    gap: 18px;
}

.nebula-card {

    position: relative;

    overflow: hidden;

    padding:
        32px 27px;

    border-radius: 22px;

    background:
        var(--astro-card);

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

    box-shadow:
        var(--astro-shadow);
}

.nebula-card::after {

    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -55px;
    top: -55px;

    border-radius: 50%;

    background:
        rgba(139,111,240,0.08);
}

.nebula-icon {

    position: relative;

    z-index: 2;

    width: 52px;
    height: 52px;

    margin-bottom: 20px;

    display: flex;

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

    border-radius: 15px;

    background:
        rgba(105,87,217,0.09);

    color:
        var(--astro-primary);

    font-size: 21px;
}

.nebula-card h3 {

    margin-bottom: 9px;

    color:
        var(--astro-dark);

    font-size: 19px;
}

.nebula-card p {

    color:
        var(--astro-muted);

    font-size: 13px;
}


/* =========================================
   13. GALAXIES
========================================= */

.galaxy-types {

    display: grid;

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

    gap: 20px;
}

.galaxy-card {

    padding:
        25px;

    border-radius: 24px;

    background:
        var(--astro-card);

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

    box-shadow:
        var(--astro-shadow);
}

.galaxy-visual {

    position: relative;

    width: 100%;
    height: 190px;

    margin-bottom: 24px;

    display: flex;

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

    overflow: hidden;

    border-radius: 18px;

    background:
        radial-gradient(
            circle,
            #24164f,
            #0e0b1e
        );
}


/* Spiral */

.spiral-galaxy span {

    width: 130px;
    height: 55px;

    border-radius: 50%;

    border:
        8px solid
        rgba(194,158,255,0.75);

    box-shadow:
        0 0 30px
        rgba(154,113,255,0.65);

    transform:
        rotate(-25deg);
}

.spiral-galaxy::before,
.spiral-galaxy::after {

    content: "";

    position: absolute;

    width: 90px;
    height: 25px;

    border-radius: 50%;

    border:
        5px solid
        rgba(120,90,220,0.55);

    transform:
        rotate(25deg);
}

.spiral-galaxy::after {

    width: 55px;
    height: 15px;

    border-width: 3px;

    transform:
        rotate(-30deg);
}


/* Elliptical */

.elliptical-galaxy span {

    width: 170px;
    height: 100px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            #e2c8ff,
            #8e64d2 35%,
            #35215d 70%,
            transparent 72%
        );

    filter:
        blur(1px);

    box-shadow:
        0 0 40px
        rgba(160,110,255,0.45);
}


/* Irregular */

.irregular-galaxy span {

    width: 150px;
    height: 105px;

    border-radius:
        42% 58% 65% 35% /
        50% 35% 65% 50%;

    background:
        radial-gradient(
            circle at 40% 45%,
            #b9d6ff,
            #7c55d1 45%,
            #251548
        );

    transform:
        rotate(-18deg);

    box-shadow:
        0 0 40px
        rgba(132,94,229,0.45);
}

.galaxy-card h3 {

    margin-bottom: 9px;

    color:
        var(--astro-dark);

    font-size: 19px;
}

.galaxy-card p {

    color:
        var(--astro-muted);

    font-size: 13px;
}


/* =========================================
   14. BLACK HOLES
========================================= */

.black-hole-layout {

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items: center;

    gap: 55px;
}

.black-hole-visual {

    position: relative;

    width: 350px;
    height: 350px;

    margin: auto;

    display: flex;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #000000 0 18%,
            #180f35 19% 30%,
            #6d36bd 31% 34%,
            transparent 35%
        );
}

.accretion-disk {

    position: absolute;

    width: 330px;
    height: 125px;

    border-radius: 50%;

    border:
        18px solid
        rgba(180,102,255,0.68);

    box-shadow:
        0 0 30px
        rgba(170,80,255,0.7);

    transform:
        rotate(-17deg);
}

.black-hole-core {

    position: relative;

    z-index: 4;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background:
        #020106;

    box-shadow:
        0 0 45px
        rgba(120,55,220,0.6);
}

.event-horizon {

    position: absolute;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    border:
        1px solid
        rgba(213,174,255,0.55);

    box-shadow:
        0 0 25px
        rgba(151,98,255,0.55);
}

.black-hole-content {

    display: flex;

    flex-direction: column;

    gap: 16px;
}

.black-hole-block {

    padding:
        25px;

    border-radius: 20px;

    background:
        var(--astro-card);

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

    box-shadow:
        0 14px 35px
        rgba(53,42,100,0.07);
}

.black-hole-block > span {

    color:
        var(--astro-primary);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.6px;
}

.black-hole-block h3 {

    margin:
        5px 0 7px;

    color:
        var(--astro-dark);

    font-size: 18px;
}

.black-hole-block p {

    color:
        var(--astro-muted);

    font-size: 13px;
}


/* =========================================
   15. EXOPLANETS
========================================= */

.exoplanet-grid {

    display: grid;

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

    gap: 18px;
}

.exoplanet-card {

    padding:
        30px 24px;

    border-radius: 22px;

    background:
        var(--astro-card);

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

    box-shadow:
        var(--astro-shadow);
}

.exoplanet-card > i {

    margin-bottom: 20px;

    color:
        var(--astro-secondary);

    font-size: 25px;
}

.exoplanet-card h3 {

    margin-bottom: 9px;

    color:
        var(--astro-dark);

    font-size: 18px;
}

.exoplanet-card p {

    color:
        var(--astro-muted);

    font-size: 13px;
}


/* =========================================
   16. NEUTRON STARS
========================================= */

.neutron-feature {

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #10182e,
            #17294b,
            #293b68
        );

    color:
        #ffffff;

    box-shadow:
        0 25px 65px
        rgba(25,38,77,0.20);
}

.neutron-visual {

    position: relative;

    min-height: 340px;

    display: flex;

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

    overflow: hidden;
}

.neutron-star-core {

    position: relative;

    z-index: 3;

    width: 105px;
    height: 105px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff,
            #a9dcff 25%,
            #5c91e8 55%,
            #243a91 100%
        );

    box-shadow:
        0 0 45px
        rgba(130,194,255,0.85);
}

.neutron-beam {

    position: absolute;

    width: 300px;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(159,217,255,0.7),
            transparent
        );
}

.beam-one {
    transform: rotate(25deg);
}

.beam-two {
    transform: rotate(-25deg);
}

.neutron-content {

    padding:
        52px 48px;
}

.neutron-content > span {

    color:
        #a6d7ff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.neutron-content h3 {

    margin:
        12px 0 16px;

    font-size:
        clamp(27px, 3vw, 38px);

    line-height: 1.15;
}

.neutron-content > p {

    color:
        rgba(255,255,255,0.68);

    font-size: 14px;
}

.neutron-points {

    display: grid;

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

    gap: 12px;

    margin-top: 28px;
}

.neutron-points div {

    padding:
        17px;

    border-radius: 14px;

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

    border:
        1px solid
        rgba(255,255,255,0.08);
}

.neutron-points strong {

    display: block;

    color:
        #b5dcff;

    font-size: 13px;
}

.neutron-points span {

    color:
        rgba(255,255,255,0.55);

    font-size: 10px;
}


/* =========================================
   17. SUPERNOVAE
========================================= */

.supernova-grid {

    display: grid;

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

    gap: 18px;
}

.supernova-card {

    position: relative;

    padding:
        32px 27px;

    overflow: hidden;

    border-radius: 22px;

    background:
        var(--astro-card);

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

    box-shadow:
        var(--astro-shadow);
}

.supernova-number {

    position: absolute;

    right: 20px;
    top: 12px;

    color:
        rgba(105,87,217,0.07);

    font-size: 48px;

    font-weight: 800;
}

.supernova-card h3 {

    margin-bottom: 11px;

    color:
        var(--astro-dark);

    font-size: 20px;
}

.supernova-card p {

    color:
        var(--astro-muted);

    font-size: 13px;
}


/* =========================================
   18. MILKY WAY
========================================= */

.milky-way-layout {

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items: center;

    gap: 55px;
}

.milky-way-visual {

    position: relative;

    width: 350px;
    height: 300px;

    margin: auto;

    border-radius: 50%;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at center,
            #f0d5ff 0 5%,
            #9d70dd 7%,
            #4b3192 18%,
            #21154a 40%,
            #090711 72%
        );

    box-shadow:
        0 0 55px
        rgba(116,80,210,0.35);
}

.milky-core {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 75px;
    height: 230px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            #fff1dc,
            #e6a9ff 30%,
            transparent 70%
        );

    filter:
        blur(3px);
}

.milky-arm {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 290px;
    height: 85px;

    border-radius: 50%;

    border:
        12px solid
        rgba(178,137,255,0.42);

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

.arm-two {
    transform:
        translate(-50%, -50%)
        rotate(25deg)
        scale(0.88);
}

.arm-three {
    transform:
        translate(-50%, -50%)
        rotate(70deg)
        scale(0.70);
}

.arm-four {
    transform:
        translate(-50%, -50%)
        rotate(-70deg)
        scale(0.70);
}

.solar-location {

    position: absolute;

    width: 13px;
    height: 13px;

    left: 57%;
    top: 38%;

    display: flex;

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

    border-radius: 50%;

    background:
        #ffffff;

    box-shadow:
        0 0 18px
        rgba(255,255,255,0.9);
}

.solar-location span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #9b70ff;
}

.milky-way-content > span {

    color:
        var(--astro-primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.milky-way-content h3 {

    margin:
        10px 0 15px;

    color:
        var(--astro-dark);

    font-size:
        clamp(27px, 3vw, 38px);

    line-height: 1.15;
}

.milky-way-content > p {

    color:
        var(--astro-muted);

    font-size: 14px;
}

.milky-facts {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 28px;
}

.milky-facts div {

    padding:
        16px 18px;

    border-radius: 14px;

    background:
        var(--astro-card);

    border:
        1px solid
        var(--astro-border);
}

.milky-facts strong {

    display: block;

    margin-bottom: 3px;

    color:
        var(--astro-dark);

    font-size: 13px;
}

.milky-facts span {

    color:
        var(--astro-muted);

    font-size: 11px;
}


/* =========================================
   19. COSMOLOGY
========================================= */

.cosmic-timeline {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 14px;
}

.cosmic-timeline::before {

    content: "";

    position: absolute;

    left: 22px;
    top: 25px;
    bottom: 25px;

    width: 1px;

    background:
        rgba(105,87,217,0.16);
}

.cosmic-timeline-item {

    position: relative;

    display: grid;

    grid-template-columns:
        45px 1fr;

    gap: 20px;

    align-items: center;

    padding:
        23px 25px;

    border-radius: 18px;

    background:
        var(--astro-card);

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

    box-shadow:
        0 12px 30px
        rgba(53,42,100,0.06);
}

.cosmic-timeline-item > span {

    position: relative;

    z-index: 2;

    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 12px;

    background:
        #f0edff;

    color:
        var(--astro-primary);

    font-size: 11px;

    font-weight: 800;
}

.cosmic-timeline-item h3 {

    margin-bottom: 4px;

    color:
        var(--astro-dark);

    font-size: 18px;
}

.cosmic-timeline-item p {

    color:
        var(--astro-muted);

    font-size: 13px;
}

.cosmology-facts {

    display: grid;

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

    gap: 18px;

    margin-top: 22px;
}

.cosmology-facts article {

    padding:
        27px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(105,87,217,0.07),
            rgba(179,140,255,0.08)
        );

    border:
        1px solid
        var(--astro-border);
}

.cosmology-facts strong {

    display: block;

    margin-bottom: 7px;

    color:
        var(--astro-dark);

    font-size: 17px;
}

.cosmology-facts p {

    color:
        var(--astro-muted);

    font-size: 13px;
}


/* =========================================
   20. SEARCH FOR LIFE
========================================= */

.life-grid {

    display: grid;

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

    gap: 18px;
}

.life-card {

    padding:
        30px 24px;

    border-radius: 22px;

    background:
        var(--astro-card);

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

    box-shadow:
        var(--astro-shadow);
}

.life-card > i {

    margin-bottom: 20px;

    color:
        var(--astro-secondary);

    font-size: 24px;
}

.life-card h3 {

    margin-bottom: 9px;

    color:
        var(--astro-dark);

    font-size: 18px;
}

.life-card p {

    color:
        var(--astro-muted);

    font-size: 13px;
}


/* Life banner */

.life-banner {

    margin-top: 24px;

    display: flex;

    align-items: center;

    gap: 20px;

    padding:
        30px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #17102f,
            #32205e,
            #4a2d79
        );

    color:
        #ffffff;

    box-shadow:
        0 20px 55px
        rgba(48,29,94,0.18);
}

.life-banner-icon {

    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 17px;

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

    color:
        #d3baff;

    font-size: 23px;
}

.life-banner span {

    color:
        #c7a8ff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;
}

.life-banner h3 {

    margin:
        3px 0 5px;

    font-size: 24px;
}

.life-banner p {

    max-width: 760px;

    color:
        rgba(255,255,255,0.65);

    font-size: 13px;
}


/* =========================================
   21. CONNECTION
========================================= */

.astronomy-connection {

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

    margin:
        110px auto 0;

    padding:
        48px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(105,87,217,0.08),
            rgba(179,140,255,0.10)
        );

    border:
        1px solid
        var(--astro-border);
}

.connection-content {

    max-width: 620px;
}

.connection-content > span {

    color:
        var(--astro-primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.connection-content h2 {

    margin:
        8px 0 10px;

    color:
        var(--astro-dark);

    font-size:
        clamp(25px, 3vw, 36px);

    line-height: 1.2;
}

.connection-content p {

    color:
        var(--astro-muted);

    font-size: 13px;
}

.connection-actions {

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 9px;
}

.connection-btn {

    display: inline-flex;

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

    gap: 8px;

    padding:
        11px 15px;

    border-radius: 12px;

    background:
        #ffffff;

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

    color:
        var(--astro-dark);

    font-size: 12px;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.connection-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(53,42,100,0.10);
}


/* =========================================
   22. FOOTER
========================================= */

.astronomy-footer {

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

    margin:
        100px auto 0;

    padding:
        35px 0 40px;

    border-top:
        1px solid
        var(--astro-border);
}

.astronomy-footer-brand {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;
}

.footer-star-icon {

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 11px;

    background:
        rgba(105,87,217,0.09);

    color:
        var(--astro-primary);
}

.astronomy-footer-brand > div:last-child {

    display: flex;

    flex-direction: column;

    line-height: 1.2;
}

.astronomy-footer-brand strong {

    color:
        var(--astro-dark);

    font-size: 15px;
}

.astronomy-footer-brand span {

    margin-top: 3px;

    color:
        var(--astro-muted);

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}

.astronomy-footer-links {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    margin-bottom: 22px;
}

.astronomy-footer-links a {

    color:
        var(--astro-muted);

    font-size: 12px;

    transition:
        color 0.2s ease;
}

.astronomy-footer-links a:hover {

    color:
        var(--astro-primary);
}

.astronomy-footer-copy {

    color:
        var(--astro-muted);

    font-size: 11px;
}


/* =========================================
   23. DARK MODE
========================================= */

body[data-theme="dark"] {

    --astro-bg: #090817;
    --astro-card: #151226;

    --astro-dark: #f4f1ff;
    --astro-text: #e7e2f6;
    --astro-muted: #a49db8;

    --astro-border:
        rgba(185,158,255,0.11);

    --astro-shadow:
        0 20px 55px
        rgba(0,0,0,0.25);
}

body[data-theme="dark"] .astronomy-brand-text strong {

    color:
        #f4f1ff;
}

body[data-theme="dark"] .back-home-btn {

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

    color:
        #f4f1ff;
}

body[data-theme="dark"] .back-home-btn:hover {

    background:
        rgba(255,255,255,0.09);
}

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

    background:
        rgba(21,18,38,0.94);
}

body[data-theme="dark"]
.astronomy-documentary-nav a:hover {

    background:
        rgba(185,158,255,0.08);
}

body[data-theme="dark"]
.astronomy-documentary-nav a.active {

    background:
        rgba(185,158,255,0.10);
}

body[data-theme="dark"]
.astronomy-fact-box {

    background:
        rgba(105,87,217,0.07);
}

body[data-theme="dark"]
.cosmic-timeline-item > span {

    background:
        rgba(105,87,217,0.13);
}

body[data-theme="dark"]
.connection-btn {

    background:
        #151226;

    color:
        #f4f1ff;
}


/* =========================================
   24. TABLET
========================================= */

@media (max-width: 1000px) {

    .astronomy-hero {

        padding:
            60px 45px;
    }

    .astronomy-visual {

        width: 300px;
        height: 300px;
    }

    .star-core {

        width: 105px;
        height: 105px;
    }

    .cosmic-orbit.orbit-one {

        width: 275px;
        height: 145px;
    }

    .cosmic-orbit.orbit-two {

        width: 235px;
        height: 235px;
    }

    .cosmic-orbit.orbit-three {

        width: 155px;
        height: 270px;
    }

    .astronomy-overview-grid,
    .exoplanet-grid,
    .life-grid {

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

    .galaxy-types,
    .nebula-grid,
    .supernova-grid {

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

    .stars-feature,
    .neutron-feature {

        grid-template-columns:
            1fr 1.3fr;
    }

    .black-hole-layout,
    .milky-way-layout {

        gap: 30px;
    }

    .astronomy-connection {

        flex-direction: column;

        align-items: flex-start;
    }

    .connection-actions {

        justify-content:
            flex-start;
    }
}


/* =========================================
   25. MOBILE
========================================= */

@media (max-width: 700px) {

    .astronomy-header {

        width:
            calc(100% - 28px);

        min-height: 70px;
    }

    .astronomy-brand-icon {

        width: 40px;
        height: 40px;

        font-size: 17px;
    }

    .astronomy-brand-text strong {

        font-size: 15px;
    }

    .astronomy-brand-text span {

        font-size: 9px;
    }

    .back-home-btn {

        min-height: 38px;

        padding:
            0 12px;

        font-size: 11px;
    }


    /* Hero */

    .astronomy-hero {

        width:
            calc(100% - 28px);

        min-height:
            auto;

        padding:
            45px 25px 35px;

        margin-top: 10px;

        flex-direction:
            column;

        align-items:
            flex-start;

        border-radius: 26px;

        gap: 25px;
    }

    .astronomy-hero h1 {

        font-size:
            clamp(46px, 14vw, 67px);

        letter-spacing:
            -3px;

        margin-bottom: 20px;
    }

    .astronomy-hero p {

        font-size: 13px;

        line-height: 1.75;
    }

    .astronomy-hero-meta {

        gap: 20px;

        margin-top: 25px;
    }

    .astronomy-meta-item {

        min-width:
            calc(33.333% - 15px);
    }

    .astronomy-meta-item strong {

        font-size: 17px;
    }

    .astronomy-meta-item span {

        font-size: 8px;

        line-height: 1.4;
    }


    /* Cosmic visual */

    .astronomy-visual {

        width: 255px;
        height: 255px;

        align-self:
            center;
    }

    .cosmic-glow {

        width: 200px;
        height: 200px;
    }

    .star-core {

        width: 90px;
        height: 90px;
    }

    .star-core i {

        font-size: 28px;
    }

    .cosmic-orbit.orbit-one {

        width: 235px;
        height: 120px;
    }

    .cosmic-orbit.orbit-two {

        width: 205px;
        height: 205px;
    }

    .cosmic-orbit.orbit-three {

        width: 130px;
        height: 225px;
    }


    /* Navigation */

    .astronomy-documentary-nav {

        width:
            calc(100% - 28px);

        margin-top: 16px;

        padding: 9px;

        top: 8px;

        border-radius: 14px;
    }

    .astronomy-documentary-nav a {

        padding:
            8px 11px;

        font-size: 10px;
    }


    /* Sections */

    .astronomy-section {

        width:
            calc(100% - 28px);

        margin-top:
            75px;
    }

    .section-heading {

        margin-bottom: 28px;
    }

    .section-heading > span {

        font-size: 9px;

        letter-spacing: 1.5px;
    }

    .section-heading h2 {

        font-size:
            clamp(27px, 8vw, 36px);

        letter-spacing:
            -1px;
    }

    .section-heading p {

        font-size: 13px;
    }


    /* Grids */

    .astronomy-overview-grid,
    .light-grid,
    .nebula-grid,
    .galaxy-types,
    .exoplanet-grid,
    .supernova-grid,
    .life-grid {

        grid-template-columns:
            1fr;
    }


    /* Cards */

    .overview-card,
    .light-card,
    .nebula-card,
    .galaxy-card,
    .exoplanet-card,
    .supernova-card,
    .life-card {

        padding:
            25px 21px;
    }


    /* Spectrum */

    .spectrum-bar {

        justify-content:
            flex-start;

        padding:
            16px;
    }


    /* Stars */

    .stars-feature,
    .neutron-feature {

        grid-template-columns:
            1fr;
    }

    .star-visual {

        min-height:
            260px;
    }

    .star-content,
    .neutron-content {

        padding:
            35px 25px;
    }

    .star-life-cycle {

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


    /* Black hole */

    .black-hole-layout,
    .milky-way-layout {

        grid-template-columns:
            1fr;

        gap: 35px;
    }

    .black-hole-visual {

        width: 270px;
        height: 270px;
    }

    .accretion-disk {

        width: 255px;
        height: 100px;
    }

    .black-hole-core {

        width: 90px;
        height: 90px;
    }

    .event-horizon {

        width: 110px;
        height: 110px;
    }


    /* Neutron */

    .neutron-visual {

        min-height:
            260px;
    }

    .neutron-points {

        grid-template-columns:
            1fr;
    }


    /* Milky Way */

    .milky-way-visual {

        width: 290px;
        height: 250px;
    }


    /* Timeline */

    .cosmic-timeline::before {

        left: 18px;
    }

    .cosmic-timeline-item {

        grid-template-columns:
            38px 1fr;

        gap: 14px;

        padding:
            19px;
    }

    .cosmic-timeline-item > span {

        width: 36px;
        height: 36px;
    }

    .cosmology-facts {

        grid-template-columns:
            1fr;
    }


    /* Life banner */

    .life-banner {

        align-items:
            flex-start;

        padding:
            23px 20px;
    }

    .life-banner h3 {

        font-size:
            20px;
    }


    /* Connection */

    .astronomy-connection {

        width:
            calc(100% - 28px);

        margin-top:
            75px;

        padding:
            30px 22px;

        border-radius:
            23px;
    }

    .connection-actions {

        width: 100%;

        flex-direction:
            column;
    }

    .connection-btn {

        width: 100%;
    }


    /* Footer */

    .astronomy-footer {

        width:
            calc(100% - 28px);

        margin-top:
            75px;

        padding-bottom:
            30px;
    }

    .astronomy-footer-links {

        gap:
            13px 18px;
    }

}


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

@media (max-width: 430px) {

    .astronomy-header {

        gap: 8px;
    }

    .back-home-btn {

        padding:
            0 10px;

        font-size: 10px;
    }

    .astronomy-hero {

        padding:
            38px 20px 28px;
    }

    .astronomy-hero-meta {

        width: 100%;

        justify-content:
            space-between;
    }

    .astronomy-meta-item {

        min-width: 0;

        flex: 1;
    }

    .astronomy-visual {

        width: 230px;
        height: 230px;
    }

    .cosmic-orbit.orbit-one {

        width: 215px;
        height: 110px;
    }

    .cosmic-orbit.orbit-two {

        width: 185px;
        height: 185px;
    }

    .cosmic-orbit.orbit-three {

        width: 120px;
        height: 205px;
    }

    .star-life-cycle {

        gap: 8px;
    }

    .milky-way-visual {

        width: 255px;
        height: 220px;
    }

    .life-banner {

        flex-direction:
            column;
    }

}