html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 50% 0%, rgba(46, 140, 255, .08), transparent 26%),
        #05070D;
    color: #fff;
    font-family: Inter, sans-serif;
}

.hero {
    min-height: 680px;
    overflow: hidden;
    position: relative;
    /*background:
        linear-gradient(90deg, rgba(5, 7, 13, .92) 0%, rgba(5, 7, 13, .72) 34%, rgba(5, 7, 13, .2) 68%, rgba(5, 7, 13, .08) 100%),
        linear-gradient(180deg, rgba(5, 7, 13, .15) 0%, rgba(5, 7, 13, .1) 70%, #080B12 100%),
        url('../images/hero-mars-bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;*/
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 40%, rgba(46, 140, 255, .08), transparent 28%),
        linear-gradient(180deg, rgba(5, 7, 13, .08), rgba(5, 7, 13, .32));
    pointer-events: none;
    z-index: 1;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    bottom: -150px;
    /* 蒙砂（毛玻璃）效果 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* 渐变遮罩：底部蒙砂，往上逐渐清晰 */
    mask-image: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.8) 20%, transparent 60%);
    -webkit-mask-image: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.8) 20%, transparent 60%);

    /* 黑色底色渐变，完美融合下方背景 */
    background: linear-gradient(to top, #05070D 0%, rgba(5, 7, 13, 0.85) 25%, rgba(5, 7, 13, 0.4) 60%, transparent 100%);

    pointer-events: none;
    z-index: 2;
}

.mars-planet {
    width: min(790px, 58vw);
    aspect-ratio: 1;
    border-radius: 999px;
    background:
        radial-gradient(circle at 42% 32%, rgba(255, 184, 118, .55), transparent 11%),
        radial-gradient(circle at 58% 48%, rgba(44, 8, 8, .55), transparent 13%),
        radial-gradient(circle at 37% 64%, rgba(108, 25, 14, .7), transparent 17%),
        radial-gradient(circle at 72% 35%, rgba(83, 16, 12, .8), transparent 21%),
        linear-gradient(135deg, #ff8b55 0%, #d94a2b 38%, #551717 82%);
    box-shadow: -18px 0 54px rgba(255, 90, 54, .42), inset 42px -58px 90px rgba(0, 0, 0, .62);
}

.mars-planet::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 28%, rgba(0, 0, 0, .58) 76%);
}

.orbit {
    border: 1px solid rgba(255, 90, 54, .22);
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(-16deg);
}

.surface {
    background:
        linear-gradient(174deg, transparent 0 42%, rgba(255, 90, 54, .2) 42.2%, transparent 43%),
        radial-gradient(ellipse at 50% 85%, rgba(255, 90, 54, .28), transparent 54%),
        linear-gradient(180deg, transparent, #080B12 82%);
    clip-path: polygon(0 48%, 10% 43%, 24% 50%, 42% 40%, 58% 49%, 74% 39%, 100% 45%, 100% 100%, 0 100%);
}

.panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)),
        radial-gradient(circle at 85% 15%, rgba(46, 140, 255, .06), transparent 30%);
    border: 1px solid rgba(255, 255, 255, .105);
    box-shadow: 0 18px 70px rgba(0, 0, 0, .28);
}

.section-label {
    color: #2E8CFF;
    font-family: Space Grotesk, Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mars-bg {
    background:
        linear-gradient(90deg, rgba(5, 7, 13, .96) 0%, rgba(5, 7, 13, .86) 34%, rgba(5, 7, 13, .48) 64%, rgba(5, 7, 13, .2) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)),
        url('../images/bg-mars-migration-program.jpg'),
        radial-gradient(ellipse at 78% 88%, rgba(255, 90, 54, .28), transparent 48%),
        linear-gradient(180deg, rgba(255, 90, 54, .025), rgba(5, 7, 13, .96));
    background-position: center, center, center right, center, center;
    background-repeat: no-repeat;
    background-size: cover, cover, cover, cover, cover;
    isolation: isolate;
}

.mars-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 42%),
        radial-gradient(circle at 68% 28%, rgba(46, 140, 255, .08), transparent 24%);
    pointer-events: none;
    z-index: -1;
}

.ticket-bg {
    background:
        radial-gradient(circle at 84% 45%, rgba(255, 90, 54, .34), transparent 24%),
        radial-gradient(circle at 50% 50%, rgba(214, 168, 79, .1), transparent 30%),
        linear-gradient(135deg, rgba(255, 90, 54, .08), rgba(255, 255, 255, .025));
    background-image: url(../images/mars-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
    position: relative;
}

.ticket-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, #a37762 0%, #7a3120 38%, #1a1313 82%);
    pointer-events: none;
    z-index: -1;
    opacity: .25;
}

.badge {
    clip-path: polygon(50% 0%, 91% 24%, 91% 76%, 50% 100%, 9% 76%, 9% 24%);
    background:
        radial-gradient(circle at 35% 26%, rgba(255, 255, 255, .16), transparent 26%),
        linear-gradient(145deg, rgba(255, 90, 54, .18), rgba(46, 140, 255, .1), rgba(214, 168, 79, .13));
}

.ticker-track {
    width: max-content;
    animation: slide 32s linear infinite;
}

.scroll-cue {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.scroll-cue-arrow {
    animation: scrollCueFloat 1.7s ease-in-out infinite;
}

@keyframes scrollCueFloat {

    0%,
    100% {
        transform: translateY(-6px);
        opacity: .58;
    }

    50% {
        transform: translateY(10px);
        opacity: 1;
    }
}

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

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

.tech-line {
    background: linear-gradient(90deg, #FF5A36, #D6A84F, #2E8CFF);
    box-shadow: 0 0 22px rgba(46, 140, 255, .35);
}

.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion.open .accordion-content {
    grid-template-rows: 1fr;
}

.accordion-content-inner {
    overflow: hidden;
}

.accordion.open .plus {
    transform: rotate(45deg);
}

.rwa-chart-line {
    stroke-dasharray: var(--chart-length, 620);
    stroke-dashoffset: var(--chart-length, 620);
    animation: chartDraw 1.15s ease-out .25s forwards;
}

@keyframes chartDraw {
    to {
        stroke-dashoffset: 0;
    }
}

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

    .hero {
        background:
            linear-gradient(180deg, rgba(5, 7, 13, .58) 0%, rgba(5, 7, 13, .34) 34%, rgba(5, 7, 13, .82) 72%, #080B12 100%),
            url('../images/hero-mars-bg.png');
        background-size: cover;
        background-position: 62% center;
    }
}

/* Floating animations for identity cards */
@keyframes float-card-1 {

    0%,
    100% {
        transform: translate(0, 0) rotate(1deg);
    }

    50% {
        transform: translate(-8px, -15px) rotate(-1deg);
    }
}

@keyframes float-card-2 {

    0%,
    100% {
        transform: translate(0, 0) rotate(-2deg);
    }

    50% {
        transform: translate(10px, -12px) rotate(1deg);
    }
}

@keyframes float-card-3 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(-12px, 8px) rotate(2deg);
    }
}

@keyframes float-card-4 {

    0%,
    100% {
        transform: translate(0, 0) rotate(2deg);
    }

    50% {
        transform: translate(6px, -18px) rotate(-2deg);
    }
}

@keyframes float-card-5 {

    0%,
    100% {
        transform: translate(0, 0) rotate(-1deg);
    }

    50% {
        transform: translate(-10px, -8px) rotate(1deg);
    }
}

@keyframes float-card-6 {

    0%,
    100% {
        transform: translate(0, 0) rotate(3deg);
    }

    50% {
        transform: translate(12px, -10px) rotate(-1deg);
    }
}

/* Desktop-only floating styles and dotted tethers */
@media (min-width: 768px) {
    .animate-float-1 {
        animation: float-card-1 7s ease-in-out infinite;
    }

    .animate-float-2 {
        animation: float-card-2 8s ease-in-out infinite;
    }

    .animate-float-3 {
        animation: float-card-3 9s ease-in-out infinite;
    }

    .animate-float-4 {
        animation: float-card-4 10s ease-in-out infinite;
    }

    .animate-float-5 {
        animation: float-card-5 11s ease-in-out infinite;
    }

    .animate-float-6 {
        animation: float-card-6 12s ease-in-out infinite;
    }

    .card-tether::after {
        content: "";
        position: absolute;
        bottom: -50px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 50px;
        border-left: 1.5px dotted rgba(255, 255, 255, 0.25);
        pointer-events: none;
    }

    .card-tether::before {
        content: "";
        position: absolute;
        bottom: -54px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.4);
        pointer-events: none;
    }
}