:root {
    color-scheme: dark;
    --welcome-bg: #08090d;
    --welcome-text: #f5f5f7;
    --welcome-muted: #aaa8b5;
    --welcome-violet: #c9c0ff;
    --welcome-violet-bright: #ded8ff;
    --welcome-button-text: #171323;
    --welcome-toggle-bg: rgb(255 255 255 / 5%);
    --welcome-toggle-border: rgb(201 192 255 / 30%);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-width: 320px;
    min-height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
    overflow: hidden;
    background: var(--welcome-bg);
    color: var(--welcome-text);
    font-family: "Segoe UI", Arial, sans-serif;
    transition: background-color 350ms ease, color 350ms ease;
}

.welcome-stage {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
    padding: 6rem 1.5rem;
    background:
        radial-gradient(ellipse at 50% 48%, rgb(91 77 145 / 16%), transparent 48%),
        var(--welcome-bg);
    transition: background 350ms ease;
}

.welcome-stage::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    background: url("../Images/hero-mesh.svg") center / cover no-repeat;
    content: "";
    opacity: 0.32;
    pointer-events: none;
}

.welcome-stage::after {
    position: fixed;
    z-index: 5;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%, #282039 0%, #111018 58%, #08090d 100%);
    content: "";
    pointer-events: none;
    transform: translateY(102%);
    transition: transform 850ms cubic-bezier(0.76, 0, 0.24, 1);
}

.welcome-stage.is-entering::after {
    transform: translateY(0);
}

.welcome-brand {
    position: absolute;
    z-index: 1;
    top: 2rem;
    left: clamp(1.5rem, 7vw, 6rem);
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--welcome-text);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
}

.welcome-theme-toggle {
    position: absolute;
    z-index: 1;
    top: 2rem;
    right: clamp(1.5rem, 7vw, 6rem);
    display: grid;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-items: center;
    padding: 0;
    border: 1px solid var(--welcome-toggle-border);
    border-radius: 50%;
    background: var(--welcome-toggle-bg);
    color: var(--welcome-text);
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: color 250ms ease, background-color 250ms ease, border-color 250ms ease;
}

.welcome-theme-toggle:hover,
.welcome-theme-toggle:focus-visible {
    border-color: var(--welcome-violet);
    background: rgb(201 192 255 / 12%);
}

.welcome-theme-toggle:focus-visible {
    outline: 2px solid var(--welcome-violet);
    outline-offset: 4px;
}

.welcome-theme-icon {
    line-height: 1;
}

.brand-mark {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border: 1px solid rgb(201 192 255 / 45%);
    border-radius: 50%;
    color: var(--welcome-violet);
    font-size: 0.75rem;
}

.welcome-glow {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: min(60vw, 680px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(134 109 211 / 14%), transparent 68%);
    filter: blur(18px);
    transform: translate(-50%, -50%);
}

.welcome-globe {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: min(70vw, 720px);
    opacity: 0.24;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: welcome-orbit 18s ease-in-out infinite alternate;
}

.welcome-content {
    width: min(100%, 900px);
    text-align: center;
    animation: welcome-arrive 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.welcome-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.6rem;
    color: #c4c1ce;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
}

.welcome-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #68d391;
    box-shadow: 0 0 14px rgb(104 211 145 / 58%);
    animation: status-pulse 2.4s ease-in-out infinite;
}

.welcome-content h1 {
    margin: 0;
    font-size: clamp(3rem, 8vw, 6.8rem);
    font-weight: 750;
    letter-spacing: -0.075em;
    line-height: 0.98;
}

.welcome-content h1 span {
    color: var(--welcome-violet);
}

.welcome-description {
    max-width: 520px;
    margin: 1.5rem auto 2rem;
    color: var(--welcome-muted);
    font-size: clamp(0.98rem, 2vw, 1.12rem);
    line-height: 1.75;
}

.welcome-cta {
    display: inline-flex;
    min-width: 155px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 0.8rem 1.35rem;
    border: 1px solid var(--welcome-violet);
    border-radius: 999px;
    background: var(--welcome-violet);
    box-shadow: 0 12px 35px rgb(169 156 255 / 20%);
    color: var(--welcome-button-text);
    font-size: 0.95rem;
    font-weight: 750;
    text-decoration: none;
    transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
    animation: cta-glow 3.2s ease-in-out 1.2s infinite;
}

.welcome-cta:hover,
.welcome-cta:focus-visible {
    animation-play-state: paused;
    transform: translateY(-3px);
    background: var(--welcome-violet-bright);
    box-shadow: 0 16px 42px rgb(169 156 255 / 30%);
    color: var(--welcome-button-text);
}

.welcome-cta:focus-visible,
.welcome-brand:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 5px;
}

.cta-arrow {
    transition: transform 180ms ease;
}

.welcome-cta:hover .cta-arrow {
    transform: translate(3px, -3px);
}

.welcome-hint {
    margin: 1rem 0 0;
    color: #777382;
    font-size: 0.8rem;
}

.welcome-footer {
    position: absolute;
    bottom: 1.5rem;
    margin: 0;
    color: #777382;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}

@keyframes welcome-arrive {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes welcome-orbit {
    from {
        transform: translate(-52%, -48%) rotate(-7deg) scale(0.96);
    }

    to {
        transform: translate(-48%, -52%) rotate(7deg) scale(1.04);
    }
}

@keyframes status-pulse {
    50% {
        box-shadow: 0 0 5px rgb(104 211 145 / 32%);
        transform: scale(0.82);
    }
}

@keyframes cta-glow {
    50% {
        box-shadow: 0 12px 42px rgb(169 156 255 / 34%);
    }
}

body[data-theme="light"] {
    color-scheme: light;
    --welcome-bg: #eeecf5;
    --welcome-text: #282638;
    --welcome-muted: #686577;
    --welcome-violet: #6755bd;
    --welcome-violet-bright: #5543a8;
    --welcome-button-text: #fff;
    --welcome-toggle-bg: rgb(255 255 255 / 72%);
    --welcome-toggle-border: rgb(103 85 189 / 24%);
}

body[data-theme="light"] .welcome-stage {
    background:
        radial-gradient(ellipse at 18% 18%, rgb(177 160 238 / 34%), transparent 42%),
        radial-gradient(ellipse at 82% 76%, rgb(163 196 235 / 31%), transparent 44%),
        linear-gradient(145deg, #f4f1fa, #e9e6f1);
}

body[data-theme="light"] .welcome-stage::before {
    opacity: 0.3;
    mix-blend-mode: multiply;
}

body[data-theme="light"] .welcome-stage::after {
    background:
        radial-gradient(ellipse at 50% 50%, #ddd6f1 0%, #eeecf5 58%, #f7f5fb 100%);
}

body[data-theme="light"] .welcome-globe {
    opacity: 0.16;
}

body[data-theme="light"] .welcome-eyebrow {
    color: #656174;
}

body[data-theme="light"] .welcome-content h1 span {
    color: #6755bd;
}

body[data-theme="light"] .welcome-cta {
    background: #6755bd;
    --welcome-button-text: #fff;
}

body[data-theme="light"] .welcome-cta:hover,
body[data-theme="light"] .welcome-cta:focus-visible {
    background: #5543a8;
}

body[data-theme="light"] .welcome-hint,
body[data-theme="light"] .welcome-footer {
    color: #777386;
}

@media (max-width: 600px) {
    .welcome-stage {
        padding: 5rem 1.25rem;
    }

    .welcome-brand {
        top: 1.25rem;
        left: 1.25rem;
    }

    .welcome-theme-toggle {
        top: 1.25rem;
        right: 1.25rem;
    }

    .welcome-globe {
        width: min(115vw, 600px);
        opacity: 0.2;
    }

    .welcome-content h1 {
        font-size: clamp(2.8rem, 12vw, 4.4rem);
    }

    .welcome-eyebrow {
        font-size: 0.62rem;
        letter-spacing: 0.15em;
    }

    .welcome-footer {
        font-size: 0.55rem;
        letter-spacing: 0.13em;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .welcome-status,
    .welcome-cta {
        animation: none;
    }
}