/* Above-the-fold index: loader + hero (style-home.css / tailwind.css load async). */
:root {
    --brand-violet: #7b06cc;
    --text-light: #1a1a1a;
    --text-muted: #4b5563;
    --type-home-section-h2-ls: -0.03em;
    --type-home-hero-rot-body-size: clamp(0.9375rem, 1.85vw, 1rem);
    --type-home-hero-rot-body-weight: 300;
    --type-home-hero-rot-body-color: var(--text-muted);
    --font-main: "Lexend", system-ui, sans-serif;
    --page-bg-infinite: #1a171f;
    --page-sheet-radius: clamp(1.35rem, 3vw, 3rem);
}

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

html {
    background-color: var(--page-bg-infinite);
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--font-main);
    color: var(--text-light);
    overflow-x: hidden;
    min-height: 100%;
    background-color: var(--page-bg-infinite);
}

body.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.page-is-loading {
    overflow: hidden;
}

/* Critical: dock nav hidden until full CSS + post-loader arm (avoids flash) */
.navbar-bar {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

body.page-is-loading .navbar-reveal {
    visibility: hidden;
    pointer-events: none;
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.72s;
    will-change: opacity;
}

html.dark .page-loader {
    background: radial-gradient(ellipse 85% 70% at 50% 42%, #16122a 0%, #0b0814 100%);
}

.page-loader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-loader__inner--logo {
    gap: 0;
}

.page-loader--hidden .page-loader__inner {
    transform: translate3d(0, 10px, 0) scale(0.985);
}

.page-loader .logo__stack .logo-img,
.page-loader .logo__stack img {
    display: block;
    width: clamp(7.5rem, 32vw, 11rem);
    height: auto;
}

.content-card,
.content-card > main {
    position: relative;
    z-index: 1;
}

.content-card {
    background: #ffffff;
    min-height: 100vh;
    border-bottom-left-radius: var(--page-sheet-radius);
    border-bottom-right-radius: var(--page-sheet-radius);
}

body:has(#hero.page-section--hero) .content-card > main {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hero.page-section--hero {
    --hero-pad-top: clamp(4.5rem, 6vw, 5.5rem);
    position: relative;
    background: transparent;
    overflow: hidden;
    padding: var(--hero-pad-top) 0 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    align-items: stretch;
    justify-content: flex-start;
}

.hero-layout {
    display: grid;
    width: 100%;
    max-width: 1800px;
    margin-inline: auto;
    grid-template-columns: 1fr;
    gap: 2rem;
    flex: 1 1 auto;
    align-items: center;
    padding-inline: clamp(1rem, 2vw, 2rem);
}

@media (min-width: 768px) {
    .hero-layout {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 2.5rem;
    }

    .hero-layout .hero-copy {
        grid-column: span 5 / span 5;
    }
}

.hero .hero-copy {
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    position: relative;
    top: -10px;
    z-index: 3;
    padding-left: clamp(1.5rem, 6vw, 10rem);
    padding-right: clamp(1rem, 2vw, 2rem);
}

#hero.page-section--hero .hero-copy h1.hero-title.hero-title--stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin: 0;
    color: #0f172a;
}

html.dark #hero.page-section--hero .hero-copy h1.hero-title.hero-title--stack {
    color: #f1f5f9;
}

#hero.page-section--hero .hero-copy h1.hero-title .hero-title__brand {
    font-size: clamp(2.85rem, 7.35vw, 4.65rem);
    font-weight: 600;
    letter-spacing: var(--type-home-section-h2-ls);
    line-height: 1.05;
}

#hero.page-section--hero .hero-copy h1.hero-title .text-gradient {
    background: linear-gradient(to right, #7b06cd, #3630a7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    font-size: clamp(2.55rem, 5.75vw, 4.05rem);
    line-height: 1.08;
    font-weight: inherit;
}

.hero-copy-rot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 36rem;
    width: 100%;
}

.hero-rotator {
    position: relative;
    min-height: clamp(3.25rem, 8.5vw, 4.25rem);
}

@media (min-width: 768px) {
    .hero-rotator {
        min-height: 3.75rem;
    }
}

#main-content .home-hero-rot__body {
    font-size: var(--type-home-hero-rot-body-size);
    font-weight: var(--type-home-hero-rot-body-weight);
    line-height: 1.35;
    color: var(--type-home-hero-rot-body-color);
    margin: 0;
}