/*
 * SkyCloud Web Design System
 * Shared visual foundation for SkyCloud Client Center
 * and SkyCloud operational web experiences.
 *
 * Specialized application interfaces may extend this foundation
 * without overriding it globally.
 */

:root {
    --skycloud-navy-950: #071A2B;
    --skycloud-navy-900: #0A2238;
    --skycloud-navy-800: #10324D;

    --skycloud-blue-700: #0B55B5;
    --skycloud-blue-600: #1268D8;
    --skycloud-blue-500: #1D7FE8;

    --skycloud-cyan-500: #24B7E5;
    --skycloud-cyan-300: #78D8F3;

    --skycloud-gold-500: #E0A82E;

    --skycloud-surface: #FFFFFF;
    --skycloud-page: #EEF6FC;
    --skycloud-border: #D5E5F2;

    --skycloud-text: #13283A;
    --skycloud-muted: #5D7182;

    --skycloud-success: #1A9A69;

    --skycloud-shadow:
        0 18px 50px rgba(7, 26, 43, .12);

    --skycloud-shadow-hover:
        0 24px 60px rgba(7, 26, 43, .18);
}

/* =========================================================
   SkyCloud Brand / Hero
   Shared across Client Center and operational web pages.
   ========================================================= */

.skycloud-hero {
    position: relative;
    overflow: hidden;
    margin: 0 0 2rem;
    border-radius: 0 0 28px 28px;
    background:
        linear-gradient(
            125deg,
            var(--skycloud-navy-950) 0%,
            var(--skycloud-navy-900) 42%,
            var(--skycloud-blue-700) 100%
        );
    color: #FFFFFF;
    box-shadow: var(--skycloud-shadow);
}

.skycloud-hero::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -150px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}

.skycloud-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
    pointer-events: none;
}

.skycloud-hero-glow-one {
    top: -130px;
    right: 12%;
    width: 330px;
    height: 330px;
    background: rgba(36, 183, 229, .22);
}

.skycloud-hero-glow-two {
    bottom: -180px;
    left: 18%;
    width: 360px;
    height: 360px;
    background: rgba(18, 104, 216, .27);
}

.skycloud-hero-content {
    position: relative;
    z-index: 2;
    padding: clamp(1.5rem, 4vw, 3.2rem);
}

.skycloud-brand-lockup {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.skycloud-logo-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 160px;
    width: 160px;
    min-height: 70px;
    padding: .55rem .8rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}

.skycloud-logo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 58px;
    object-fit: contain;
}

.skycloud-brand-copy {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.skycloud-brand-name {
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: .025em;
}

.skycloud-brand-descriptor {
    max-width: 680px;
    font-size: .84rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .7);
}

.skycloud-hero-message {
    max-width: 850px;
    padding: clamp(2rem, 5vw, 4.3rem) 0 2rem;
}

.skycloud-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .85rem;
    padding: .42rem .7rem;
    border: 1px solid rgba(120, 216, 243, .4);
    border-radius: 999px;
    background: rgba(36, 183, 229, .12);
    color: var(--skycloud-cyan-300);
    font-size: .74rem;
    font-weight: 750;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.skycloud-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--skycloud-cyan-500);
    box-shadow: 0 0 0 5px rgba(36, 183, 229, .14);
}

.skycloud-hero h1 {
    margin: 0 0 .7rem;
    font-size: clamp(2.25rem, 6vw, 4.65rem);
    font-weight: 780;
    letter-spacing: -.045em;
    line-height: .98;
    color: #FFFFFF;
}

.skycloud-welcome {
    margin: 0 0 .65rem;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 650;
    color: #FFFFFF;
}

.skycloud-introduction {
    max-width: 760px;
    margin: 0;
    font-size: clamp(1rem, 1.8vw, 1.16rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, .76);
}

.skycloud-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.35rem;
    padding-top: 1.3rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.skycloud-trust-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .76);
}

.skycloud-trust-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--skycloud-success);
    box-shadow: 0 0 0 4px rgba(26, 154, 105, .18);
}

@media (max-width: 767px) {
    .skycloud-hero {
        border-radius: 0 0 22px 22px;
    }

    .skycloud-brand-lockup {
        align-items: flex-start;
        flex-direction: column;
    }

    .skycloud-logo-shell {
        width: 145px;
        flex-basis: auto;
    }

    .skycloud-brand-descriptor {
        font-size: .76rem;
    }
}

/* =========================================================
   SkyCloud Hero Centered Presentation Refinement
   ========================================================= */

.skycloud-hero-content {
    text-align: center;
}

.skycloud-brand-lockup {
    justify-content: center;
}

.skycloud-brand-copy {
    text-align: left;
}

.skycloud-hero-message {
    margin-left: auto;
    margin-right: auto;
}

.skycloud-hero-message p,
.skycloud-hero-message h1 {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   SkyCloud Hero True Centered Layout
   ========================================================= */

.skycloud-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.skycloud-brand-lockup {
    width: fit-content;
}

.skycloud-hero-message {
    width: min(850px, 100%);
    text-align: center;
}

.skycloud-hero-message h1,
.skycloud-hero-message p {
    text-align: center;
}

.skycloud-trust-row {
    justify-content: center;
}


/* =========================================================
   SkyCloud Hero Escape Frappe Header Container
   ========================================================= */

.page-header-wrapper {
    width: 100%;
}

.page-header {
    width: 100%;
    padding: 0;
}

.page-header .skycloud-hero {
    width: 100%;
}

.skycloud-hero-content {
    width: min(1180px, 100%);
    margin-left: auto;
    margin-right: auto;
}



/* =========================================================
   SkyCloud Public Homepage — Animated Ecosystem Hero
   Homepage-scoped so Client Center and other shared heroes
   retain their established presentation.
   ========================================================= */

.sc-home-hero .skycloud-hero-content {
    width: min(1240px, 100%);
    padding-top: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: clamp(2.25rem, 5vw, 4rem);
    text-align: left;
}

.sc-home-hero-stage {
    width: 100%;
    display: grid;
    grid-template-columns:
        minmax(0, .88fr)
        minmax(500px, 1.12fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
}

.sc-home-hero-copy {
    min-width: 0;
}

.sc-home-hero .skycloud-brand-lockup {
    width: 100%;
    justify-content: flex-start;
    padding-bottom: 1.4rem;
}

.sc-home-hero .skycloud-brand-copy {
    text-align: left;
}

.sc-home-hero .skycloud-hero-message {
    width: 100%;
    max-width: 590px;
    margin: 0;
    padding:
        clamp(2rem, 4vw, 3.4rem)
        0
        clamp(1.65rem, 3vw, 2.2rem);
    text-align: left;
}

.sc-home-hero .skycloud-hero-message h1,
.sc-home-hero .skycloud-hero-message p {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

.sc-home-hero .skycloud-hero-message h1 {
    max-width: 560px;
    font-size: clamp(2.5rem, 5vw, 4.4rem);
}

.sc-home-hero .skycloud-introduction {
    max-width: 570px;
    font-size: clamp(1.03rem, 1.55vw, 1.18rem);
}

.sc-home-hero .skycloud-trust-row {
    justify-content: flex-start;
}


/* Ecosystem presentation */

.sc-home-ecosystem {
    position: relative;
    min-width: 0;
    padding:
        clamp(1.2rem, 2vw, 1.65rem)
        clamp(1rem, 2vw, 1.4rem)
        1rem;
    border: 1px solid rgba(150, 214, 239, .22);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(36, 183, 229, .14),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .08),
            rgba(255, 255, 255, .025)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 22px 55px rgba(0, 0, 0, .16);
    overflow: hidden;
}

.sc-home-ecosystem::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        );
    background-size: 34px 34px;
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .8),
            rgba(0, 0, 0, .2)
        );
}

.sc-home-ecosystem-heading {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .15rem .35rem 0;
}

.sc-home-ecosystem-heading span {
    color: var(--skycloud-cyan-300);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sc-home-ecosystem-heading strong {
    color: #FFFFFF;
    font-size: 1.02rem;
    font-weight: 700;
}

.sc-home-ecosystem-map {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    margin: .3rem auto 0;
    overflow: visible;
}


/* Connecting paths */

.sc-home-link {
    fill: none;
    stroke: rgba(120, 216, 243, .54);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation:
        sc-home-link-in
        .9s
        cubic-bezier(.22, .8, .32, 1)
        forwards;
}

.sc-home-link-1 {
    animation-delay: .72s;
}

.sc-home-link-2 {
    animation-delay: 1.12s;
}

.sc-home-link-3 {
    animation-delay: 1.52s;
}

.sc-home-link-4 {
    animation-delay: 1.92s;
}

.sc-home-link-5 {
    animation-delay: 2.32s;
}


/* Service nodes */

.sc-home-node {
    opacity: 0;
    animation:
        sc-home-node-in
        .7s
        cubic-bezier(.22, .8, .32, 1)
        forwards;
}

.sc-home-node-1 {
    animation-delay: 1.02s;
}

.sc-home-node-2 {
    animation-delay: 1.42s;
}

.sc-home-node-3 {
    animation-delay: 1.82s;
}

.sc-home-node-4 {
    animation-delay: 2.22s;
}

.sc-home-node-5 {
    animation-delay: 2.62s;
}

.sc-home-node rect {
    fill: rgba(8, 35, 59, .9);
    stroke: rgba(144, 221, 244, .32);
    stroke-width: 1.5;
}

.sc-home-node text {
    fill: #FFFFFF;
    font-size: 15px;
    font-weight: 750;
}

.sc-home-node .sc-home-node-detail {
    fill: rgba(255, 255, 255, .58);
    font-size: 9px;
    font-weight: 550;
    letter-spacing: .01em;
}


/* SkyCloud core */

.sc-home-core {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation:
        sc-home-core-in
        .8s
        cubic-bezier(.2, .85, .3, 1)
        .12s
        forwards;
}

.sc-home-core-disc {
    fill: rgba(7, 26, 43, .98);
    stroke: rgba(120, 216, 243, .86);
    stroke-width: 2;
    filter: drop-shadow(
        0 0 18px
        rgba(36, 183, 229, .22)
    );
}

.sc-home-core-orbit {
    fill: none;
    transform-box: fill-box;
    transform-origin: center;
}

.sc-home-core-orbit-inner {
    stroke: rgba(120, 216, 243, .24);
    stroke-width: 1.5;
    stroke-dasharray: 4 8;
    animation: sc-home-orbit 18s linear infinite;
}

.sc-home-core-orbit-outer {
    stroke: rgba(120, 216, 243, .13);
    stroke-width: 1;
    stroke-dasharray: 2 11;
    animation: sc-home-orbit-reverse 26s linear infinite;
}

.sc-home-core-name {
    fill: #FFFFFF;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .015em;
}

.sc-home-core-detail {
    fill: rgba(144, 221, 244, .76);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}


/* Traveling signals */

.sc-home-signal {
    fill: var(--skycloud-cyan-300);
    filter:
        drop-shadow(
            0 0 5px
            rgba(120, 216, 243, .86)
        );
    opacity: .92;
}


/* Ecosystem supporting statement */

.sc-home-ecosystem-note {
    position: relative;
    z-index: 2;
    max-width: 520px;
    margin: -.15rem auto .2rem;
    color: rgba(255, 255, 255, .6);
    font-size: .78rem;
    line-height: 1.55;
    text-align: center;
}


/* Motion */

@keyframes sc-home-core-in {
    from {
        opacity: 0;
        transform: scale(.84);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sc-home-link-in {
    from {
        stroke-dashoffset: 1;
        opacity: .25;
    }

    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes sc-home-node-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes sc-home-orbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sc-home-orbit-reverse {
    to {
        transform: rotate(-360deg);
    }
}


/* Responsive ecosystem */

@media (max-width: 1050px) {
    .sc-home-hero-stage {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .sc-home-hero-copy {
        width: min(760px, 100%);
        margin: 0 auto;
    }

    .sc-home-hero .skycloud-brand-lockup {
        justify-content: center;
    }

    .sc-home-hero .skycloud-brand-copy {
        text-align: left;
    }

    .sc-home-hero .skycloud-hero-message {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .sc-home-hero .skycloud-hero-message h1,
    .sc-home-hero .skycloud-hero-message p {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .sc-home-hero .skycloud-trust-row {
        justify-content: center;
    }

    .sc-home-ecosystem {
        width: min(720px, 100%);
        margin: 0 auto;
    }
}

@media (max-width: 620px) {
    .sc-home-hero .skycloud-hero-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .sc-home-hero .skycloud-brand-lockup {
        align-items: center;
    }

    .sc-home-hero .skycloud-brand-copy {
        text-align: center;
    }

    .sc-home-ecosystem {
        padding:
            1rem
            .45rem
            .8rem;
        border-radius: 22px;
    }

    .sc-home-ecosystem-heading {
        padding-left: .7rem;
        padding-right: .7rem;
    }

    .sc-home-node text {
        font-size: 14px;
    }

    .sc-home-node .sc-home-node-detail {
        font-size: 8.3px;
    }

    .sc-home-ecosystem-note {
        padding-left: .75rem;
        padding-right: .75rem;
        font-size: .74rem;
    }
}


/* Accessibility: honor operating-system reduced-motion preference */

@media (prefers-reduced-motion: reduce) {
    .sc-home-link,
    .sc-home-node,
    .sc-home-core,
    .sc-home-core-orbit {
        animation: none !important;
    }

    .sc-home-link {
        stroke-dashoffset: 0;
    }

    .sc-home-node,
    .sc-home-core {
        opacity: 1;
    }

    .sc-home-core {
        transform: none;
    }

    .sc-home-signal-layer {
        display: none;
    }
}