/* Reset & Core Styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --side-gap: clamp(24px, 6vw, 96px);
}

body {
    background-color: #000000;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
}

.hero-section {
    position: relative;
}

/* Full-viewport Fixed Canvas */
#hero-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* On mobile, 100vh is measured against the viewport with the browser's
       address bar hidden, so a `position: fixed` element sized with it can
       run taller than what's actually visible and get cut off at the
       bottom while the bar is showing. 100dvh tracks the real, current
       visible viewport instead. Kept 100vh above as a fallback for
       browsers that don't support dvh. */
    height: 100dvh;
    object-fit: cover;
    z-index: 1;
    display: block;
    background-color: #000000;
    opacity: 1;
}

/* Once scrolled past the hero's 600vh track, hide the fixed canvas/text/hint
   so they don't sit on top of the sections that follow. */
.hero-section.hero-passed #hero-canvas,
.hero-section.hero-passed .hero-text-container,
.hero-section.hero-passed .scroll-indicator {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Scroll Container to generate vertical scroll space */
#scroll-container {
    position: relative;
    z-index: 2;
    /* Height controls how slow/fast the scrolling animation feels.
       We will make it 600vh (6 screens of scrolling) for a detailed, fluid effect. */
    height: 600vh;
    pointer-events: none; /* Allows pointer clicks to pass through to canvas if needed, but lets scroll work */
}

/* Premium, Minimalist Preloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* see note on #hero-canvas above */
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

#preloader.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Glassmorphic spinner */
.spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 1s ease-in-out infinite;
}

.percentage {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Hero Text Styles */
.hero-text-container {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    /* Above the hero canvas (z-index 1) but tied with the next section
       (z-index 2) - since that section comes later in the DOM, it wins the
       tie and slides up to cover the text cleanly instead of the text
       bleeding on top of it. */
    z-index: 2;
    pointer-events: none;
    text-align: left;
    width: 100%;
    max-width: 900px;
    padding-left: var(--side-gap);
    padding-right: var(--side-gap);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    opacity: 1;
}

.hero-line {
    /* Nudged to Clash Display per the sitewide revamp's explicit allowance
       (constraint #1: heading font may be nudged if it clashes with the new
       system). Nothing else about the hero changed. */
    font-family: 'Clash Display', 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 0.5rem;
    column-gap: 0.8rem;
}

.line-one {
    font-size: clamp(2.2rem, 5.5vw, 4.5rem);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.line-two {
    font-size: clamp(1.4rem, 3.2vw, 2.3rem);
    font-weight: 500;
}

/* Each word stays intact on one line; individual letters animate within it */
.hero-line .word {
    display: inline-flex;
}

/* The gradient + opacity reveal both live on the letter itself (not an
   ancestor) so the browser never has to composite an animated-opacity
   element against a separately clipped parent background - that combo is
   unreliable across browsers and can leave letters stuck fully visible. */
.line-one .letter {
    display: inline-block;
    background: linear-gradient(180deg, #ffffff 40%, #a0a0a0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    transform: translateY(0.4em);
}

.line-two .letter {
    display: inline-block;
    background: linear-gradient(180deg, #ffffff 50%, #909090 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    transform: translateY(0.4em);
}

/* Scroll-down prompt shown on load until the user starts scrolling */
.scroll-indicator {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.scroll-indicator.hidden {
    opacity: 0;
}

.scroll-indicator-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.scroll-indicator-mouse {
    width: 26px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.scroll-indicator-wheel {
    width: 4px;
    height: 8px;
    background: #ffffff;
    border-radius: 2px;
    animation: scroll-wheel 1.6s ease infinite;
}

@keyframes scroll-wheel {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    70% {
        opacity: 0;
        transform: translateY(14px);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Feature Highlights
   ========================================================================== */

.features-section {
    position: relative;
    z-index: 2;
    /* Must be at least a full viewport tall - it needs one viewport height
       of scroll runway to fully slide up and cover the fixed hero behind
       it. Shorter than that and a sliver of the hero would always peek
       through at the top since there's no scroll room left to cover it. */
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: #000000;
    padding: clamp(5rem, 12vw, 9rem) var(--side-gap);
    overflow: hidden;
}

.features-bg {
    position: absolute;
    inset: 0;
}

.features-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.features-bg-overlay {
    position: absolute;
    inset: 0;
    /* No top fade - this section slides up from the bottom to cover the
       hero directly, so the image should be visible right at its top edge
       with no black band. Bottom fade still blends into the next section. */
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 78%, #000000 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 100%);
}

.features-grid {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.feature-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2.25rem 1.9rem;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    /* Hidden/offset until JS adds .in-view (staggered per card via
       setTimeout - see script.js), then slides up into place. The same
       transform transition also drives the hover lift below. */
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.7s ease, transform 0.5s ease, box-shadow 0.35s ease;
}

.feature-card.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Hover: lift slightly, straight drop shadow underneath, soft glow above */
.feature-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 16px 30px rgba(0, 0, 0, 0.45),
        0 -24px 50px -20px rgba(255, 255, 255, 0.25);
}

.feature-tag {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 1.4rem;
}

.feature-heading-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.35rem;
}

.feature-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    font-weight: 600;
    color: #ffffff;
}

.feature-subheading {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
}

.feature-divider {
    display: block;
    width: 64px;
    height: 10px;
    color: rgba(255, 255, 255, 0.35);
    margin: 1.2rem 0;
}

.feature-divider svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 11px;
    color: #ffffff;
}

.feature-icon svg {
    width: 19px;
    height: 19px;
}

.feature-description {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.6rem;
}

.feature-button {
    display: inline-block;
    margin-top: auto;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.feature-button:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* ==========================================================================
   Floating Glass Navigation
   ========================================================================== */

.floating-nav {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 0.7rem 0.9rem 0.7rem 1.5rem;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

.nav-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    list-style: none;
}

.nav-links a {
    display: inline-block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.nav-links a:hover {
    color: #ffffff;
}

.nav-links a.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 768px) {
    .floating-nav {
        left: 16px;
        right: 16px;
        top: 16px;
        transform: none;
        width: auto;
        justify-content: space-between;
        padding: 0.6rem 0.6rem 0.6rem 1.2rem;
        flex-wrap: wrap;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        width: 100%;
        order: 3;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .floating-nav.nav-open {
        border-radius: 24px;
    }

    .floating-nav.nav-open .nav-links {
        display: flex;
    }

    .floating-nav.nav-open .nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .floating-nav.nav-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    .floating-nav.nav-open .nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .hero-text-container {
        max-width: 100%;
    }
}