/*==================================================
NIBNOB
STYLE.CSS
==================================================*/

/*========================
ROOT VARIABLES
=========================*/

:root {
    --background: #060714;
    --background-light: #101328;

    --purple: #8b5cf6;
    --purple-light: #b794f6;

    --cyan: #22d3ee;
    --cyan-light: #67e8f9;

    --green: #14f195;
    --pink: #ec4899;

    --white: #ffffff;
    --text: #cbd5e1;
    --text-muted: #8b93aa;

    --glass: rgba(255, 255, 255, 0.055);
    --glass-hover: rgba(255, 255, 255, 0.09);
    --glass-border: rgba(255, 255, 255, 0.1);

    --shadow:
        0 22px 65px rgba(0, 0, 0, 0.42);

    --section-width: 1250px;
    --header-height: 82px;
}

/*========================
RESET
=========================*/

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}

body {
    min-height: 100vh;
    overflow-x: hidden;

    color: var(--white);

    font-family: "Inter", sans-serif;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(139, 92, 246, 0.08),
            transparent 38%
        ),
        var(--background);
}

body.menu-open {
    overflow: hidden;
}

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

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

button {
    color: inherit;
    font: inherit;
}

h1,
h2,
h3,
.brand-name,
.footer-brand,
.button,
.nav-buy-button {
    font-family: "Orbitron", sans-serif;
}

::selection {
    color: var(--white);
    background: var(--purple);
}

/*========================
ACCESSIBILITY
=========================*/

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
}

/*========================
BACKGROUND EFFECTS
=========================*/

.background-effects {
    position: fixed;
    inset: 0;

    z-index: -10;

    overflow: hidden;
    pointer-events: none;
}

#stars,
#nebula,
#shooting-stars {
    position: absolute;
    inset: 0;
}

#stars {
    opacity: 0.24;

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

    background-position: 0 0;
    background-size: 52px 52px;

    animation: starDrift 80s linear infinite;
}

#stars::before,
#stars::after {
    content: "";

    position: absolute;
    inset: 0;

    background-repeat: repeat;
}

#stars::before {
    opacity: 0.48;

    background-image:
        radial-gradient(
            circle,
            rgba(103, 232, 249, 0.9) 0 1px,
            transparent 1.7px
        );

    background-position: 21px 13px;
    background-size: 89px 89px;
}

#stars::after {
    opacity: 0.32;

    background-image:
        radial-gradient(
            circle,
            rgba(183, 148, 246, 0.9) 0 1.2px,
            transparent 1.8px
        );

    background-position: 38px 47px;
    background-size: 126px 126px;
}

#nebula::before,
#nebula::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);
}

#nebula::before {
    width: 900px;
    height: 900px;

    top: -260px;
    left: -250px;

    background:
        radial-gradient(
            circle,
            rgba(139, 92, 246, 0.22),
            transparent 68%
        );

    animation: nebulaOne 22s ease-in-out infinite;
}

#nebula::after {
    width: 850px;
    height: 850px;

    right: -240px;
    bottom: -250px;

    background:
        radial-gradient(
            circle,
            rgba(34, 211, 238, 0.16),
            transparent 68%
        );

    animation: nebulaTwo 25s ease-in-out infinite;
}

#planet-one,
#planet-two {
    position: absolute;

    border-radius: 50%;

    opacity: 0.72;
}

#planet-one {
    width: 175px;
    height: 175px;

    top: 8%;
    right: 5%;

    background:
        radial-gradient(
            circle at 30% 28%,
            #e2c7ff,
            var(--purple) 38%,
            #2f1d58 76%
        );

    box-shadow:
        0 0 95px rgba(139, 92, 246, 0.4);

    animation: planetFloatOne 14s ease-in-out infinite;
}

#planet-two {
    width: 110px;
    height: 110px;

    bottom: 12%;
    left: 4%;

    background:
        radial-gradient(
            circle at 30% 28%,
            #b7fbff,
            var(--cyan) 38%,
            #11495a 76%
        );

    box-shadow:
        0 0 80px rgba(34, 211, 238, 0.32);

    animation: planetFloatTwo 17s ease-in-out infinite;
}

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

.site-header {
    position: fixed;

    top: 18px;
    right: 0;
    left: 0;

    z-index: 1000;

    pointer-events: none;
}

.navbar {
    position: relative;

    width: min(1300px, 95%);
    min-height: var(--header-height);

    margin: 0 auto;
    padding: 15px 26px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    pointer-events: auto;

    border: 1px solid var(--glass-border);
    border-radius: 999px;

    background: rgba(10, 12, 29, 0.63);

    box-shadow: var(--shadow);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition:
        min-height 0.3s ease,
        padding 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.site-header.is-scrolled .navbar {
    min-height: 70px;
    padding-top: 11px;
    padding-bottom: 11px;

    border-color: rgba(139, 92, 246, 0.25);
    background: rgba(8, 10, 25, 0.88);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    flex-shrink: 0;
}

.brand-logo {
    width: 44px;
    height: 44px;

    object-fit: contain;
}

.brand-name {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 2px;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 40px);
}

.nav-links a {
    position: relative;

    color: var(--text);

    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;

    transition: color 0.25s ease;
}

.nav-links a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -8px;
    left: 0;

    height: 2px;

    border-radius: 99px;

    background: linear-gradient(
        90deg,
        var(--purple),
        var(--cyan)
    );

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.25s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--cyan-light);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
}

.nav-buy-button {
    flex-shrink: 0;

    padding: 13px 24px;

    overflow: hidden;

    border-radius: 999px;

    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    background:
        rgba(142, 38, 240, 0.47);

    box-shadow:
        0 0 32px rgba(139, 92, 246, 0.28);

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

}

.nav-buy-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 0 42px rgba(34, 211, 238, 0.42);
}

.mobile-menu-button {
    display: none;

    width: 44px;
    height: 44px;

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

    flex-shrink: 0;

    cursor: pointer;

    border: 1px solid var(--glass-border);
    border-radius: 14px;

    color: var(--white);
    background: rgba(255, 255, 255, 0.055);

    font-size: 1.4rem;
}

/*========================
SHARED SECTIONS
=========================*/

.section {
    position: relative;
    z-index: 2;

    width: min(var(--section-width), 92%);

    margin: 0 auto;
}

.content-section {
    padding: 30px 0;
}

.section-heading {
    margin-bottom: 55px;

    text-align: center;
}

.section-eyebrow {
    margin-bottom: 13px;

    color: var(--purple-light);

    font-family: "Orbitron", sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.section-title {
    color: var(--white);

    font-family: "Orbitron", sans-serif;
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.12;
}

.section-title span {
    color: var(--cyan);

    text-shadow:
        0 0 28px rgba(34, 211, 238, 0.34);
}

/*========================
HERO
=========================*/

.hero {
    min-height: 100svh;
    padding: 100px 0 80px;

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

    overflow: hidden;

    text-align: center;
}

.hero-content {
    position: relative;
    z-index: 5;

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

.hero-image {
    --pointer-x: 0px;
    --pointer-y: 0px;

    width: min(420px, 75vw);

    margin: 0 auto 18px;

    position: relative;
    z-index: 4;

    border: 0;
    border-radius: 0;

    background: transparent;

    filter:
        drop-shadow(0 24px 30px rgba(0, 0, 0, 0.4))
        drop-shadow(0 0 42px rgba(139, 92, 246, 0.28));

    cursor: pointer;

    animation: heroFloat 5.5s ease-in-out infinite;

    will-change: transform;
}

.hero-title {
    margin-bottom: 18px;

    font-family: "Orbitron", sans-serif;
    font-size: clamp(4rem, 11vw, 8rem);
    font-weight: 900;
    line-height: 0.94;
    letter-spacing: clamp(2px, 1vw, 8px);

    text-shadow:
        0 12px 45px rgba(0, 0, 0, 0.35);
}

.hero-title span {
    color: var(--purple-light);

    text-shadow:
        0 0 34px rgba(139, 92, 246, 0.45);
}

.hero-badge {
    width: fit-content;

    margin: 0 auto 25px;
    padding: 10px 19px;

    border: 1px solid rgba(139, 92, 246, 0.27);
    border-radius: 999px;

    color: #e8deff;
    background: rgba(139, 92, 246, 0.15);

    font-family: "Orbitron", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;

    backdrop-filter: blur(12px);

    animation: badgeFloat 4.5s ease-in-out infinite;
}

.hero-description {
    max-width: 660px;

    margin: 0 auto 36px;

    color: var(--text);

    font-size: clamp(1rem, 2vw, 1.17rem);
    line-height: 1.9;
}

.hero-actions {
    margin-bottom: 38px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    flex-wrap: wrap;
}

.button {
    min-width: 190px;
    padding: 16px 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

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

.button:hover {
    transform: translateY(-4px);
}

.button-primary {
    background:
        rgba(142, 38, 240, 0.47);

    box-shadow:
        0 0 32px rgba(139, 92, 246, 0.28);

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

}

.button-primary:hover {
    box-shadow:
        0 19px 52px rgba(34, 211, 238, 0.36);
}

.button-secondary {
    border: 1px solid rgba(255, 255, 255, 0.14);

    color: #e4dcf8;
    background: rgba(255, 255, 255, 0.045);

    backdrop-filter: blur(14px);
}

.button-secondary:hover {
    border-color: rgba(139, 92, 246, 0.38);
    background: rgba(139, 92, 246, 0.14);
}

/*========================
ORBIT RINGS
=========================*/

.orbit {
    position: absolute;

    top: 40%;
    left: 50%;

    z-index: 1;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    pointer-events: none;
}

.orbit::before {
    content: "";

    position: absolute;

    top: 50%;
    left: -5px;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 20px var(--cyan);
}

.orbit-small {
    width: 540px;
    height: 540px;

    animation: orbitClockwise 25s linear infinite;
}

.orbit-large {
    width: 800px;
    height: 800px;

    opacity: 0.55;

    animation: orbitCounterClockwise 34s linear infinite;
}

/*========================
CONTRACT CARD
=========================*/

.contract-card {
    width: min(650px, 96%);

    margin: 0 auto;
    padding: 17px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border: 1px solid var(--glass-border);
    border-radius: 20px;

    background: var(--glass);

    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.22);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.contract-details {
    min-width: 0;

    text-align: left;
}

.contract-label {
    display: block;

    margin-bottom: 6px;

    color: var(--text-muted);

    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.contract-address {
    display: block;

    overflow-wrap: anywhere;

    color: var(--cyan-light);

    font-size: 0.88rem;
}

.contract-copy-button {
    flex-shrink: 0;

    padding: 11px 20px;

    cursor: pointer;

    border: 0;
    border-radius: 999px;

    color: var(--white);
    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--cyan)
        );

    font-family: "Orbitron", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

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

.contract-copy-button:hover {
    transform: scale(1.04);

    box-shadow:
        0 0 24px rgba(34, 211, 238, 0.3);
}

.contract-copy-button.is-copied {
    color: #07120e;
    background: var(--green);
}

.scroll-indicator {
    width: 42px;
    height: 42px;

    margin: 42px auto 0;

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

    color: var(--purple-light);

    font-size: 1.65rem;

    animation: scrollBounce 1.8s ease-in-out infinite;
}

/*========================
TICKER
=========================*/

.ticker {
    position: relative;
    z-index: 3;

    width: 100%;
    overflow: hidden;

    padding: 18px 0;

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

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

    backdrop-filter: blur(12px);
}

.ticker-track {
    width: max-content;

    display: flex;
    align-items: center;

    animation: tickerMove 30s linear infinite;
}

.ticker-track:hover {
    animation-play-state: paused;
}

.ticker-track span {
    margin-right: 72px;

    color: var(--cyan-light);

    font-family: "Orbitron", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}

/*========================
INFOGRAPHICS
=========================*/

.infographic {
    width: min(800px, 100%);

    margin: 0 auto;

    position: relative;
}

.infographic::before {
    content: "";

    position: absolute;

    inset: 5% 8%;

    z-index: -1;

    border-radius: 36px;

    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.22),
            rgba(34, 211, 238, 0.12)
        );

    filter: blur(50px);
}

.infographic-image {
    width: 100%;
    height: auto;

    margin: 0 auto;

    border-radius: 28px;

    border: 4px solid black;

    filter:
        drop-shadow(0 28px 45px rgba(0, 0, 0, 0.34));

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}

.infographic-image:hover {
    transform: translateY(-5px);

    filter:
        drop-shadow(0 34px 55px rgba(0, 0, 0, 0.42))
        drop-shadow(0 0 25px rgba(139, 92, 246, 0.16));
}

/*========================
GALLERY
=========================*/

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.gallery-item {
    overflow: hidden;

    aspect-ratio: 1;

    border: 4px solid black;
    border-radius: 24px;

    background: var(--glass);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.27);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.gallery-item:hover {
    z-index: 2;

    transform: translateY(-8px) rotate(-1deg);

    border-color: rgba(139, 92, 246, 0.5);

    box-shadow:
        0 25px 60px rgba(139, 92, 246, 0.2);
}

.gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: top;

    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.06);
}

/*========================
COMMUNITY
=========================*/

.social-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.social-link {
    min-height: 125px;
    padding: 28px 20px;

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

    overflow: hidden;

    border: 1px solid var(--glass-border);
    border-radius: 24px;

    background: var(--glass);

    font-family: "Orbitron", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1px;

    backdrop-filter: blur(17px);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.social-link:hover {
    transform: translateY(-7px);

    border-color: rgba(34, 211, 238, 0.35);

    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.18),
            rgba(34, 211, 238, 0.12)
        );

    box-shadow:
        0 20px 50px rgba(34, 211, 238, 0.12);
}

.join-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;              /* space between images */
    flex-wrap: wrap;        /* stacks on mobile */
    margin: 40px 0;
}

.infographic-tall {
    height: 360px;          /* choose your desired height */
    width: auto;
    display: block;
    border: 4px solid black;
    border-radius: 22px;
}

/*========================
FOOTER
=========================*/

.site-footer {
    margin-top: 90px;
    padding: 80px 24px 42px;

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

    text-align: center;
}

.footer-brand {
    width: fit-content;

    margin: 0 auto 18px;

    display: inline-flex;
    align-items: center;
    gap: 13px;

    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 2px;
}

.footer-logo {
    width: 64px;
    height: 64px;

    object-fit: contain;
}

.footer-tagline {
    color: var(--text);

    line-height: 1.8;
}

.footer-links {
    margin: 36px 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;

    flex-wrap: wrap;
}

.footer-links a {
    color: var(--text);

    font-size: 0.9rem;

    transition: color 0.25s ease;
}

.footer-links a:hover {
    color: var(--cyan-light);
}

.copyright {
    max-width: 800px;

    margin: 0 auto;
    padding-top: 30px;

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

    color: #717990;

    font-family: "Orbitron", sans-serif;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    line-height: 1.8;
    text-transform: uppercase;
}

/*========================
SHOOTING STARS
=========================*/

.shooting-star {
    position: absolute;

    width: var(--star-length, 180px);
    height: 2px;

    pointer-events: none;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(103, 232, 249, 0.35),
            rgba(255, 255, 255, 1)
        );

    box-shadow:
        0 0 7px rgba(255, 255, 255, 0.85),
        0 0 17px rgba(34, 211, 238, 0.45);

    transform-origin: right center;

    animation:
        shootingStar var(--star-duration, 1.6s)
        linear forwards;
}

.shooting-star::after {
    content: "";

    position: absolute;

    top: 50%;
    right: -3px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 12px white,
        0 0 24px var(--cyan);

    transform: translateY(-50%);
}

/*========================
REVEAL ANIMATIONS
=========================*/

.reveal {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
}

.reveal.is-visible {
    opacity: 1;

    transform: translateY(0);
}

/*========================
KEYFRAMES
=========================*/

@keyframes starDrift {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-52px, 52px);
    }
}

@keyframes nebulaOne {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(110px, 70px) scale(1.08);
    }
}

@keyframes nebulaTwo {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-120px, -80px) scale(1.07);
    }
}

@keyframes planetFloatOne {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-24px);
    }
}

@keyframes planetFloatTwo {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(28px);
    }
}

@keyframes heroFloat {
    0%,
    100% {
        transform:
            translate(
                var(--pointer-x),
                var(--pointer-y)
            );
    }

    50% {
        transform:
            translate(
                var(--pointer-x),
                calc(var(--pointer-y) - 14px)
            );
    }
}

@keyframes badgeFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes orbitClockwise {
    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}

@keyframes orbitCounterClockwise {
    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }
}

@keyframes scrollBounce {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(9px);
    }
}

@keyframes tickerMove {
    from {
        transform: translateX(0);
    }

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

/*
Shooting stars travel from upper-right to lower-left.
The star element is rotated to align with its movement.
*/

@keyframes shootingStar {
    0% {
        opacity: 0;

        transform:
            translate(0, 0)
            rotate(-32deg);
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translate(-115vw, 70vh)
            rotate(-32deg);
    }
}

/*========================
TABLET
=========================*/

@media (max-width: 1050px) {
    .nav-buy-button {
        display: none;
    }

    .gallery-grid,
    .social-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .orbit-large {
        width: 680px;
        height: 680px;
    }
}

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

@media (max-width: 820px) {
    :root {
        --header-height: 70px;
    }

    .site-header {
        top: 10px;
    }

    .navbar {
        width: min(94%, 700px);

        padding: 11px 14px 11px 17px;

        border-radius: 24px;
    }

    .brand-logo {
        width: 38px;
        height: 38px;
    }

    .brand-name {
        font-size: 1rem;
    }

    .mobile-menu-button {
        display: inline-flex;
    }

    .nav-links {
        position: absolute;

        top: calc(100% + 10px);
        right: 0;
        left: 0;

        padding: 22px;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;

        visibility: hidden;
        opacity: 0;

        border: 1px solid var(--glass-border);
        border-radius: 23px;

        background: rgba(8, 10, 25, 0.96);

        box-shadow: var(--shadow);

        backdrop-filter: blur(20px);

        transform: translateY(-10px) scale(0.98);
        transform-origin: top;

        transition:
            visibility 0.25s ease,
            opacity 0.25s ease,
            transform 0.25s ease;
    }

    .navbar.menu-open .nav-links {
        visibility: visible;
        opacity: 1;

        transform: translateY(0) scale(1);
    }

    .nav-links a {
        padding: 13px 15px;

        border-radius: 12px;

        text-align: center;
    }

    .nav-links a:hover,
    .nav-links a.active {
        background: rgba(139, 92, 246, 0.1);
    }

    .nav-links a::after {
        display: none;
    }

    .hero {
        padding-top: 120px;
    }

    .orbit-small {
        width: 430px;
        height: 430px;
    }

    .orbit-large {
        width: 600px;
        height: 600px;
    }

    #planet-one {
        width: 110px;
        height: 110px;
    }

    #planet-two {
        width: 75px;
        height: 75px;
    }
}

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

@media (max-width: 600px) {
    .content-section {
        padding: 60px 0;
    }

    .section {
        width: 90%;
    }

    .section-heading {
        margin-bottom: 35px;
    }

    .hero {
        min-height: auto;
        padding-top: 125px;
        padding-bottom: 65px;
    }

    .hero-image {
        width: min(430px, 94vw);

        margin-bottom: 10px;
    }

    .hero-title {
        font-size: clamp(3.6rem, 20vw, 5rem);
    }

    .hero-badge {
        max-width: 94%;

        padding: 9px 13px;

        font-size: 0.62rem;
        letter-spacing: 1.3px;
    }

    .hero-description {
        font-size: 0.98rem;
        line-height: 1.75;
    }

    .hero-actions {
        width: 100%;

        flex-direction: column;
    }

    .button {
        width: 100%;
        min-width: 0;
    }

    .contract-card {
        flex-direction: column;

        padding: 19px;

        text-align: center;
    }

    .contract-details {
        text-align: center;
    }

    .contract-copy-button {
        width: 100%;
    }

    .scroll-indicator {
        margin-top: 28px;
    }

    .orbit-small {
        width: 330px;
        height: 330px;
    }

    .orbit-large {
        width: 470px;
        height: 470px;
    }

    .ticker-track span {
        margin-right: 48px;

        font-size: 0.68rem;
    }

    .infographic-image {
        border-radius: 16px;
    }

    .gallery-grid,
    .social-links {
        grid-template-columns: 1fr;
    }

    .social-link {
        min-height: 95px;
    }

    .site-footer {
        margin-top: 40px;
        padding-top: 65px;
    }

    .footer-links {
        gap: 18px;
    }
}

/*========================
REDUCED MOTION
=========================*/

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}