.sky-page {
    --sky-top: #2c6fd4;
    --sky-mid: #60b8ff;
    --sky-horizon: #d8ecff;
    --sun-glow: rgba(255, 209, 122, 0.72);
    --sun-core: #ffe79d;
    --haze-opacity: 0.14;
    --cloud-opacity: 0.18;
}

.sky-page .section-heading {
    margin-bottom: 1.25rem;
}

.sky-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.85fr);
    gap: 1.5rem;
    overflow: hidden;
    position: relative;
}

.sky-hero::after {
    content: "";
    position: absolute;
    inset: auto -12% -18% auto;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 194, 102, 0.26), transparent 70%);
    pointer-events: none;
}

.sky-hero__content {
    position: relative;
    z-index: 1;
}

.sky-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.sky-hero__highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1.5rem;
}

.sky-chip-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.1rem;
    padding: 1rem;
    backdrop-filter: blur(6px);
    color: rgba(248, 251, 255, 0.94);
}

.sky-chip-card__label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 225, 194, 0.88);
}

.sky-hero__visual {
    display: grid;
    gap: 1rem;
    align-content: center;
}

.sky-orb {
    position: relative;
    min-height: 25rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background:
        radial-gradient(circle at 68% 28%, rgba(255, 233, 164, 0.95), transparent 16%),
        linear-gradient(180deg, rgba(137, 200, 255, 0.98) 0%, rgba(84, 164, 243, 0.96) 42%, rgba(255, 218, 158, 0.78) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.sky-orb__sun,
.sky-orb__glow,
.sky-worlds__sun {
    position: absolute;
    border-radius: 50%;
}

.sky-orb__sun {
    width: 5.75rem;
    height: 5.75rem;
    top: 3rem;
    right: 3.4rem;
    background: radial-gradient(circle at 35% 35%, #fff9d6, #ffd56d 68%, rgba(255, 182, 48, 0.92));
    box-shadow: 0 0 30px rgba(255, 220, 128, 0.65);
}

.sky-orb__glow {
    width: 12rem;
    height: 12rem;
    top: 0.4rem;
    right: 0.4rem;
    background: radial-gradient(circle, rgba(255, 210, 118, 0.48), transparent 70%);
    filter: blur(3px);
}

.sky-orb__cloud {
    position: absolute;
    height: 3.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    filter: blur(0.5px);
    box-shadow:
        1.9rem -0.7rem 0 0 rgba(255, 255, 255, 0.78),
        4.2rem -0.2rem 0 0 rgba(255, 255, 255, 0.74),
        2.8rem 0.75rem 0 0 rgba(255, 255, 255, 0.74);
    animation: sky-cloud-drift 16s ease-in-out infinite;
}

.sky-orb__cloud--one {
    width: 7.5rem;
    top: 5.4rem;
    left: 2rem;
}

.sky-orb__cloud--two {
    width: 8.5rem;
    top: 10.4rem;
    left: 8rem;
    animation-delay: -6s;
}

.sky-orb__horizon {
    position: absolute;
    inset: auto 0 0;
    height: 22%;
    background:
        linear-gradient(180deg, rgba(28, 59, 57, 0) 0%, rgba(28, 59, 57, 0.1) 20%, rgba(28, 59, 57, 0.94) 100%),
        radial-gradient(circle at 30% 0%, rgba(102, 142, 108, 0.42), transparent 35%);
}

.sky-hero__caption {
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(248, 251, 255, 0.9);
}

.sky-lab__grid {
    display: grid;
    grid-template-columns: minmax(19rem, 22rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.sky-lab__controls {
    display: grid;
    gap: 1rem;
}

.sky-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.sky-control {
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(18, 52, 88, 0.04);
    border: 1px solid rgba(18, 52, 88, 0.08);
}

.sky-control__header,
.sky-control__ends,
.sky-summary__chips,
.sky-worlds__facts,
.sky-info-card__meter {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
}

.sky-control__header output {
    font-weight: 700;
    color: var(--site-primary);
}

.sky-control__ends {
    color: var(--site-muted);
    font-size: 0.86rem;
}

.sky-summary {
    padding: 1rem 1.05rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(18, 52, 88, 0.07), rgba(199, 124, 62, 0.08));
    border: 1px solid rgba(18, 52, 88, 0.1);
}

.sky-summary__lead {
    font-size: 1rem;
}

.sky-summary__chips {
    flex-wrap: wrap;
}

.sky-summary__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
}

.sky-lab__display {
    display: grid;
    gap: 1rem;
}

.sky-stage {
    position: relative;
    min-height: 23rem;
    border-radius: 1.6rem;
    border: 1px solid rgba(18, 52, 88, 0.1);
    overflow: hidden;
    background: #dcecff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.sky-stage__sky,
.sky-stage__glow,
.sky-stage__clouds,
.sky-stage__haze,
.sky-stage__ground,
.sky-worlds__preview::before {
    position: absolute;
    inset: 0;
}

.sky-stage__sky {
    background:
        radial-gradient(circle at calc(var(--sun-x, 72) * 1%) calc(var(--sun-y, 24) * 1%), rgba(255, 237, 167, 0.24), transparent 22%),
        linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-horizon) 100%);
    transition: background 220ms ease;
}

.sky-stage__glow {
    background: radial-gradient(circle at calc(var(--sun-x, 72) * 1%) calc(var(--sun-y, 24) * 1%), var(--sun-glow), transparent 26%);
    transition: background 220ms ease;
}

.sky-stage__sun {
    position: absolute;
    width: clamp(3rem, 8vw, 4.5rem);
    aspect-ratio: 1;
    left: calc(var(--sun-x, 72) * 1%);
    top: calc(var(--sun-y, 24) * 1%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff7d7, var(--sun-core) 72%, #ffbe49);
    box-shadow: 0 0 22px rgba(255, 211, 110, 0.62);
}

.sky-stage__clouds {
    opacity: var(--cloud-opacity);
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0 4%, transparent 5%),
        radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.95) 0 5%, transparent 6%),
        radial-gradient(circle at 70% 28%, rgba(255, 255, 255, 0.95) 0 4%, transparent 5%),
        radial-gradient(circle at 78% 25%, rgba(255, 255, 255, 0.95) 0 5%, transparent 6%),
        radial-gradient(circle at 46% 15%, rgba(255, 255, 255, 0.95) 0 3.6%, transparent 4.7%);
    filter: blur(5px);
}

.sky-stage__haze {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 225, 176, calc(var(--haze-opacity) * 0.72)) 72%, rgba(255, 244, 214, calc(var(--haze-opacity) + 0.06)));
}

.sky-stage__ground {
    inset: auto 0 0;
    height: 22%;
    background:
        radial-gradient(circle at 20% 100%, rgba(95, 126, 92, 0.4), transparent 24%),
        linear-gradient(180deg, rgba(31, 47, 56, 0) 0%, rgba(31, 47, 56, 0.22) 15%, rgba(52, 77, 72, 0.96) 100%);
}

.sky-spectrum-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.sky-spectrum-card,
.sky-step-card,
.sky-info-card,
.sky-worlds__panel {
    border: 1px solid rgba(18, 52, 88, 0.1);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 24px rgba(18, 52, 88, 0.05);
}

.sky-spectrum-card {
    padding: 1rem;
}

.sky-spectrum-card__eyebrow,
.sky-worlds__kicker {
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--site-accent);
}

.sky-spectrum {
    min-height: 11rem;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.sky-spectrum__column {
    display: grid;
    gap: 0.55rem;
    justify-items: center;
}

.sky-spectrum__bar {
    width: 100%;
    height: var(--bar-height, 50%);
    min-height: 1rem;
    border-radius: 999px 999px 0.8rem 0.8rem;
    box-shadow: inset 0 -8px 12px rgba(0, 0, 0, 0.1);
    transition: height 220ms ease;
}

.sky-spectrum__bar--violet {
    background: linear-gradient(180deg, #b77cff, #6f49cb);
}

.sky-spectrum__bar--blue {
    background: linear-gradient(180deg, #68c6ff, #2277de);
}

.sky-spectrum__bar--green {
    background: linear-gradient(180deg, #88db8b, #3f9f58);
}

.sky-spectrum__bar--yellow {
    background: linear-gradient(180deg, #ffe38a, #efb644);
}

.sky-spectrum__bar--red {
    background: linear-gradient(180deg, #ff9180, #d44f3f);
}

.sky-spectrum__label {
    font-size: 0.82rem;
    color: var(--site-muted);
}

.sky-process__grid,
.sky-deeper__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.sky-step-card,
.sky-info-card {
    position: relative;
    padding: 1.2rem 1.2rem 1.2rem 4rem;
}

.sky-step-card__number {
    position: absolute;
    left: 1.1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--site-primary), #2a74c5);
    color: #fff;
    font-weight: 700;
}

.sky-info-card__meter {
    flex-direction: column;
    margin-top: 1rem;
    gap: 0.65rem;
}

.sky-info-card__meter div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.9rem;
    background: rgba(18, 52, 88, 0.05);
}

.sky-info-card__meter span,
.sky-worlds__fact span {
    color: var(--site-muted);
    font-size: 0.88rem;
}

.sky-worlds__grid {
    display: grid;
    gap: 1rem;
}

.sky-worlds__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sky-worlds__panel {
    display: grid;
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.sky-worlds__preview {
    position: relative;
    min-height: 18rem;
    border-radius: 1.2rem;
    overflow: hidden;
    background: linear-gradient(180deg, #2d6fdb 0%, #9ed9ff 55%, #ecd3a2 100%);
}

.sky-worlds__preview::before {
    content: "";
    background: radial-gradient(circle at 72% 24%, rgba(255, 230, 157, 0.25), transparent 18%);
}

.sky-worlds__sun {
    width: 3.75rem;
    height: 3.75rem;
    top: 2.2rem;
    right: 2.2rem;
    background: radial-gradient(circle at 35% 35%, #fff9d6, #ffd56d 68%, rgba(255, 182, 48, 0.92));
    box-shadow: 0 0 26px rgba(255, 220, 128, 0.58);
}

.sky-worlds__ground {
    position: absolute;
    inset: auto 0 0;
    height: 22%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(48, 64, 39, 0.16) 20%, rgba(63, 82, 56, 0.9) 100%);
}

.sky-worlds__copy {
    display: grid;
    align-content: start;
}

.sky-worlds__facts {
    flex-wrap: wrap;
    margin-top: 1rem;
}

.sky-worlds__fact {
    flex: 1 1 11rem;
    padding: 0.8rem 0.9rem;
    border-radius: 1rem;
    background: rgba(18, 52, 88, 0.05);
    display: grid;
    gap: 0.25rem;
}

.sky-faq__accordion .accordion-item {
    border-color: rgba(18, 52, 88, 0.08);
    border-radius: 1rem;
    overflow: hidden;
}

.sky-faq__accordion .accordion-item + .accordion-item {
    margin-top: 0.75rem;
}

.sky-faq__accordion .accordion-button {
    font-weight: 600;
}

.sky-faq__accordion .accordion-button:not(.collapsed) {
    background: rgba(18, 52, 88, 0.06);
    color: var(--site-primary);
}

.sky-cta {
    background:
        linear-gradient(135deg, rgba(18, 52, 88, 0.06), rgba(199, 124, 62, 0.08)),
        rgba(255, 255, 255, 0.72);
}

@keyframes sky-cloud-drift {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sky-orb__cloud,
    .sky-spectrum__bar {
        animation: none;
        transition: none;
    }
}

@media (max-width: 1199.98px) {
    .sky-hero {
        grid-template-columns: 1fr;
    }

    .sky-lab__grid,
    .sky-worlds__panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .sky-hero__highlights,
    .sky-spectrum-grid,
    .sky-process__grid,
    .sky-deeper__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .sky-chip-card,
    .sky-step-card,
    .sky-info-card,
    .sky-spectrum-card {
        padding: 1rem;
    }

    .sky-step-card,
    .sky-info-card {
        padding-left: 1rem;
    }

    .sky-step-card__number {
        position: static;
        margin-bottom: 0.75rem;
    }

    .sky-summary__chips,
    .sky-worlds__facts,
    .sky-info-card__meter,
    .sky-control__header,
    .sky-control__ends {
        flex-direction: column;
        align-items: flex-start;
    }

    .sky-orb {
        min-height: 20rem;
    }

    .sky-stage,
    .sky-worlds__preview {
        min-height: 16rem;
    }
}