/*--------------------------------------------------------------
# Intro Section (mesh gradient background, headline above bar)
--------------------------------------------------------------*/
/* Intro base stays; key variables */
.intro {
    --header-h: 100px;
    --fade-start: 68%;
    position: relative;
    width: 100%;
    min-height: clamp(520px, 68vh, 880px);
    margin-top: calc(-1 * var(--header-h));
    padding-top: calc(var(--header-h) + 12px);
    padding-bottom: 120px;
    /* extra room for the breaker overlap */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    z-index: 0;
    background: none;
}

/* Video layer */
.intro-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.8) contrast(.95) brightness(.92) grayscale(.06);
}

/* Fade to white at bottom (same feel as your mesh fade) */
.intro-fade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* top transparent -> bottom white */
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) var(--fade-start),
            #ffffff 100%);
}

/* gentle highlight + vignette (static) */
.intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(140% 80% at 50% -10%, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(120% 80% at 50% 110%, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}

.intro::after {
    content: "";
    position: absolute;
    inset: -1px;
    background: radial-gradient(120% 90% at 50% 50%, rgba(0, 0, 0, .06), transparent 70%);
    mix-blend-mode: soft-light;
    opacity: .35;
    pointer-events: none;
}

/* wrapper for headline + sub + search bar */
.intro-wrap {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
}

/* Headline & lead text */
.intro h1 {
    margin: 0 0 12px;
    font-size: clamp(34px, 4vw, 46px);
    /* was 36–56px */
    line-height: 1.15;
    font-weight: 600;
    /* was 700 */
}

.intro p.lead {
    margin: 0 auto 20px;
    max-width: 820px;
    color: rgba(11, 18, 32, .70);
    font-size: clamp(16px, 2.2vw, 18px);
}

/* Align left on large screens (like the reference) */
@media (min-width: 992px) {
    .intro {
        text-align: left;
    }

    .intro p.lead {
        margin-left: 0;
    }
}

@media (max-width: 1600px) and (min-width: 1200px) {
    .intro {
        padding-top: calc(var(--header-h) + 48px);
        /* more space below nav */
    }
}

@media (prefers-reduced-motion: reduce) {
    .intro-video {
        display: none;
    }

    .intro-media {
        background: url("assets/background-poster.jpg") center/cover no-repeat;
    }
}

/* Gradient highlight utility */
/* gradient highlight utility */
.highlight-text {
    background: linear-gradient(135deg, #423dfc, #7271fb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 530;
    display: inline-block;
}

.highlight-text.highlight-navy {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: #012970 !important;
}

/* spacer helper */
.spacer {
    height: 10px;
}

/* ---------- Optional: image wrapper & floating bits ---------- */
.intro-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    margin: 0 auto;
}

.intro-image {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    position: relative;
    z-index: 2;
}

/* Responsive headline sizes (kept for safety) */
@media (max-width: 768px) {
    .intro h1 {
        font-size: 28px;
        line-height: 36px;
    }
}

@media (max-width: 480px) {
    .intro h1 {
        font-size: 24px;
        line-height: 32px;
    }
}

/* Floating images (if you still use them) */
.floating-image {
    position: absolute;
    height: auto;
    transition: transform .3s ease-in-out;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .15));
    z-index: 3;
}

.floating-1 {
    width: 300px;
    top: 20px;
    left: -150px;
    animation: float 3s infinite ease-in-out alternate;
}

.floating-2 {
    width: 350px;
    bottom: -20px;
    right: 200px;
    animation: float 4s infinite ease-in-out alternate;
}

.floating-3 {
    width: 450px;
    top: 300px;
    right: -300px;
    animation: float 5s infinite ease-in-out alternate;
}

@keyframes float {
    from {
        transform: translateY(-8px);
    }

    to {
        transform: translateY(8px);
    }
}

@media (max-width: 768px) {
    .intro-image-wrapper {
        max-width: 300px;
    }

    .floating-image {
        width: 45px;
    }
}

/* Lottie preview cards you use elsewhere */
.lottie-animation {
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
}

/* ---------- Buttons below hero text ---------- */
.intro-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

/* CTA (kept from your previous version) */
.btn-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    filter: brightness(0) invert(1);
}

.intro .btn-watch-video:hover {
    background: linear-gradient(135deg, #423dfc, #7271fb);
    color: #fff;
}

.intro .btn-watch-video i {
    color: #423dfc;
    font-size: 20px;
    margin-right: 8px;
    transition: color .3s ease-in-out;
}

.intro .btn-watch-video:hover i {
    color: #fff;
}

/* === Colored Glass CTA (gradient + 3D + thin ring) === */
.intro .btn-get-started {
    --c1: #423dfc;
    --c2: #7271fb;
    --ring: rgba(120, 112, 255, .55);
    --top-rim: rgba(255, 255, 255, .28);
    --bottom-depth: rgba(0, 0, 0, .22);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 42px;
    min-width: 260px;
    border-radius: 22px;
    border: 0;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .2px;
    overflow: hidden;
    isolation: isolate;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .06)),
        linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow:
        0 0 0 1px var(--ring),
        0 18px 40px rgba(66, 77, 254, .28),
        inset 0 1px 0 var(--top-rim),
        inset 0 -10px 18px var(--bottom-depth);
}

.intro .btn-get-started::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, .12));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.intro .btn-get-started::after {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: inherit;
    background: radial-gradient(80% 60% at 50% 120%, rgba(255, 255, 255, .35), transparent 70%);
    filter: blur(18px);
    pointer-events: none;
    z-index: -1;
}

.intro .btn-get-started:hover {
    box-shadow:
        0 0 0 1px var(--ring),
        0 22px 48px rgba(66, 77, 254, .34),
        inset 0 1px 0 rgba(255, 255, 255, .32),
        inset 0 -12px 20px rgba(0, 0, 0, .24);
    transform: translateY(-1px);
}

.intro .btn-get-started:active {
    transform: translateY(0);
}

.intro-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* center horizontally */
    justify-content: center;
    /* center within the section */
    text-align: center;
    gap: 16px;
    /* tight, even spacing between pieces */
    max-width: 1100px;
    margin: 0 auto;
}

/* Center everything on desktop too */
@media (min-width: 992px) {
    .intro {
        text-align: center !important;
    }

    .intro .intro-stack {
        align-items: center !important;
    }

    .intro p.lead {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===== HERO background image & fade — FINAL OVERRIDES ===== */

/* Don't paint over the image */
#intro {
    background: transparent !important;
    position: relative;
    overflow: hidden;
}

/* Background IMAGE (bottom-most visual layer) */
#intro::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--intro-bg, url('assets/img/glass-background.jpeg')) center/cover no-repeat;
    filter: saturate(.9) contrast(.95) brightness(.96);
    pointer-events: none;
}

/* Ambient FX above image (no solid fills here) */
#intro .intro-ambient {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: none !important;
    /* nuke any gradient fills */
    pointer-events: none;
}

/* Bottom FADE to white */
#intro::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    /* above image + ambient, below content */
    pointer-events: none;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) var(--fade-start, 66%),
            rgba(255, 255, 255, .08) calc(var(--fade-start, 66%) + 10%),
            #ffffff 100%);
}

/* Your content sits on top */
#intro .intro-stack {
    position: relative;
    z-index: 3;
}

/* Kill any old element-based fade if still present */
#intro .intro-fade {
    display: none !important;
}

/* Optional: earlier fade on small screens */
@media (max-width: 768px) {
    #intro {
        --fade-start: 56%;
    }
}

/* ==== HERO image: lighter + fade to TRANSPARENT (final) ==== */

#intro {
    --fade-start: 66%;
    /* where the fade begins */
    --veil: .28;
    /* how much we lighten the image (0–1) */
    position: relative;
    background: transparent !important;
    overflow: hidden;
}

/* Background IMAGE + light veil, then mask it out toward the bottom */
#intro::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* 1) light veil on top of the photo, 2) the photo itself */
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, var(--veil)) 0%,
            rgba(255, 255, 255, calc(var(--veil) * .5)) 40%,
            rgba(255, 255, 255, 0) 70%),
        var(--intro-bg, url('/assets/img/glass-background.jpeg')) center/cover no-repeat;

    filter: saturate(.9) contrast(.95) brightness(1.02);
    pointer-events: none;

    /* 3) fade the image itself to transparent at the bottom */
    -webkit-mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start),
            rgba(0, 0, 0, .85) calc(var(--fade-start) + 8%),
            rgba(0, 0, 0, .35) calc(var(--fade-start) + 16%),
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start),
            rgba(0, 0, 0, .85) calc(var(--fade-start) + 8%),
            rgba(0, 0, 0, .35) calc(var(--fade-start) + 16%),
            transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Ambient FX above the image */
#intro .intro-ambient {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: none !important;
    pointer-events: none;
}

/* Remove the old white overlay fade; we’re using a mask now */
#intro::after {
    content: "";
    background: none;
}

/* Content on top */
#intro .intro-stack {
    position: relative;
    z-index: 3;
}

/* Tune fade for small screens */
@media (max-width:768px) {
    #intro {
        --fade-start: 56%;
    }
}

/* ===== Background mode toggles ===== */
#intro {
    --fade-start: 66%;
    --fade-color: #fff;
    /* set to 'transparent' if you want true transparency */
    --veil: .22;
    /* lighten the media (0–1) */
    position: relative;
    background: transparent !important;
    overflow: hidden;
}

/* MEDIA container sits at the very back */
#intro .intro-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* VIDEO fills the section */
#intro .intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.85) contrast(.95) brightness(.95) grayscale(.04);
    display: none;
    /* default off; enabled by .bg-video */
}

/* IMAGE fills the section; uses --intro-bg */
#intro .intro-image {
    position: absolute;
    inset: 0;
    background: var(--intro-bg, none) center/cover no-repeat;
    filter: saturate(.9) contrast(.95) brightness(1.02);
    display: none;
    /* default off; enabled by .bg-image or fallback */
}

/* Turn on the correct medium */
#intro.bg-video .intro-video {
    display: block;
}

#intro.bg-video .intro-image {
    display: none;
}

#intro.bg-image .intro-video {
    display: none;
}

#intro.bg-image .intro-image {
    display: block;
}

/* Soft white veil above media for legibility */
#intro .intro-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, var(--veil)) 0%,
            rgba(255, 255, 255, calc(var(--veil)*.55)) 40%,
            rgba(255, 255, 255, 0) 70%);
}

/* Ambient FX above veil, below fade */
#intro .intro-ambient {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: none !important;
    /* ensure no fills here */
}

/* Bottom fade to white/transparent */
#intro .intro-fade {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) var(--fade-start),
            color-mix(in srgb, var(--fade-color) 8%, transparent) calc(var(--fade-start) + 8%),
            var(--fade-color) 100%);
}

/* Content on top */
#intro .intro-stack {
    position: relative;
    z-index: 4;
}

/* Respect reduced motion: disable video automatically */
@media (prefers-reduced-motion: reduce) {
    #intro.bg-video .intro-video {
        display: none !important;
    }

    #intro.bg-video .intro-image {
        display: block !important;
    }
}

/* Optional: start fade earlier on small screens */
@media (max-width: 768px) {
    #intro {
        --fade-start: 56%;
    }
}

/* --- kill any white overlay fades so we truly go to transparent --- */
#intro::after,
#intro .intro-fade {
    display: none !important;
}

/* where the fade begins (tweak) */
#intro {
    --fade-start: 66%;
}

/* VIDEO MODE: fade the whole ambient layer (which contains the <video> + FX) */
#intro.bg-video .intro-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: none !important;

    /* opaque at top -> fully transparent at bottom */
    -webkit-mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start),
            rgba(0, 0, 0, .85) calc(var(--fade-start) + 8%),
            rgba(0, 0, 0, .35) calc(var(--fade-start) + 16%),
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start),
            rgba(0, 0, 0, .85) calc(var(--fade-start) + 8%),
            rgba(0, 0, 0, .35) calc(var(--fade-start) + 16%),
            transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* IMAGE MODE: fade the ::before background image the same way */
#intro.bg-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--intro-bg, url('/assets/img/glass-background.jpeg')) center/cover no-repeat;
    filter: saturate(.9) contrast(.95) brightness(1.02);
    pointer-events: none;

    -webkit-mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start),
            rgba(0, 0, 0, .85) calc(var(--fade-start) + 8%),
            rgba(0, 0, 0, .35) calc(var(--fade-start) + 16%),
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start),
            rgba(0, 0, 0, .85) calc(var(--fade-start) + 8%),
            rgba(0, 0, 0, .35) calc(var(--fade-start) + 16%),
            transparent 100%);
}

/* keep content on top */
#intro .intro-stack {
    position: relative;
    z-index: 3;
}

/* optional: start fade earlier on small screens */
@media (max-width: 768px) {
    #intro {
        --fade-start: 56%;
    }
}

/* --- Only paint the background image in IMAGE mode --- */
#intro::before {
    content: none !important;
    background: none !important;
}

/* kill global */
#intro.bg-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--intro-bg, url('/assets/img/glass-background.jpeg')) center/cover no-repeat;
    filter: saturate(.9) contrast(.95) brightness(1.02);

    /* same nice fade-to-transparent for the image mode */
    -webkit-mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start, 66%),
            rgba(0, 0, 0, .85) calc(var(--fade-start, 66%) + 8%),
            rgba(0, 0, 0, .35) calc(var(--fade-start, 66%) + 16%),
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start, 66%),
            rgba(0, 0, 0, .85) calc(var(--fade-start, 66%) + 8%),
            rgba(0, 0, 0, .35) calc(var(--fade-start, 66%) + 16%),
            transparent 100%);
}

/* --- VIDEO mode: ensure no image exists behind the fade --- */
#intro.bg-video::before {
    content: none !important;
    background: none !important;
}

/* Fade the whole ambient (video + FX) to transparent at the bottom */
#intro.bg-video .intro-ambient {
    -webkit-mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start, 66%),
            rgba(0, 0, 0, .85) calc(var(--fade-start, 66%) + 8%),
            rgba(0, 0, 0, .35) calc(var(--fade-start, 66%) + 16%),
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start, 66%),
            rgba(0, 0, 0, .85) calc(var(--fade-start, 66%) + 8%),
            rgba(0, 0, 0, .35) calc(var(--fade-start, 66%) + 16%),
            transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Make sure the video is shown only in video mode */
#intro .intro-video {
    display: none;
}

#intro.bg-video .intro-video {
    display: block;
}

/* Optional: earlier fade on small screens */
@media (max-width:768px) {
    #intro {
        --fade-start: 56%;
    }
}

/* Smoother, longer fade to transparent */
#intro {
    --fade-start: 60%;
    /* where the fade begins */
    --fade-length: 28%;
    /* how long the fade runs (increase for softer) */
}

/* VIDEO mode: fade the whole ambient (video + FX) smoothly */
#intro.bg-video .intro-ambient {
    -webkit-mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start),
            transparent calc(var(--fade-start) + var(--fade-length)));
    mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start),
            transparent calc(var(--fade-start) + var(--fade-length)));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* IMAGE mode: same smooth fade on the ::before image */
#intro::before {
    content: none !important;
    background: none !important;
}

/* kill global image */
#intro.bg-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--intro-bg, url('/assets/img/glass-background.jpeg')) center/cover no-repeat;
    filter: saturate(.9) contrast(.95) brightness(1.02);
    -webkit-mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start),
            transparent calc(var(--fade-start) + var(--fade-length)));
    mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start),
            transparent calc(var(--fade-start) + var(--fade-length)));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Ensure only the chosen medium is visible */
#intro .intro-video {
    display: none;
}

#intro.bg-video .intro-video {
    display: block;
}

#intro.bg-image .intro-video {
    display: none;
}

/* Keep any old white overlay fades off so we truly fade to transparent */
#intro::after,
#intro .intro-fade {
    display: none !important;
}

/* Optional: start fade earlier on small screens */
@media (max-width:768px) {
    #intro {
        --fade-start: 54%;
        --fade-length: 30%;
    }
}


/* ===== Intro: Colorful surface (no video, no image) ===== */

/* ===== Intro: Edges-only color, white center (no video/image) ===== */

/* Knobs */
#intro {
    --fade-start: 62%;
    /* where the bottom fade begins */
    --fade-len: 28%;
    /* how long the fade runs */
    --center-clear: 52%;
    /* size of the white center */

    /* hues for the edge glows */
    --h1: 268;
    /* purple */
    --h2: 255;
    /* blue-violet */
    --h3: 280;
    /* magenta */
}

/* Ensure no media shows */
#intro .intro-ambient,
#intro .intro-video,
#intro .intro-image,
#intro .intro-wash {
    display: none !important;
}

#intro::before,
#intro::after {
    content: none !important;
    background: none !important;
}

/* Paint only the edges; keep center white */
#intro .intro-surface {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    /* Top layers first (closest to viewer) */
    background:
        /* strong white center that fades out, protecting legibility */
        radial-gradient(70% 55% at 50% 45%,
            rgba(255, 255, 255, .98) 0%,
            rgba(255, 255, 255, .96) var(--center-clear),
            rgba(255, 255, 255, 0) calc(var(--center-clear) + 12%)),

        /* corner glows */
        radial-gradient(90% 80% at 0% 0%,
            hsl(var(--h1) 98% 86% / .85) 0%,
            transparent 60%),
        radial-gradient(90% 80% at 100% 0%,
            hsl(var(--h2) 98% 85% / .80) 0%,
            transparent 60%),
        radial-gradient(95% 85% at 0% 100%,
            hsl(var(--h3) 96% 84% / .78) 0%,
            transparent 62%),
        radial-gradient(95% 85% at 100% 100%,
            hsl(var(--h1) 96% 84% / .72) 0%,
            transparent 62%),

        /* faint top/bottom soft white so edges feel airy */
        radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, .35) 0%, transparent 65%),
        radial-gradient(140% 100% at 50% 110%, rgba(255, 255, 255, .28) 0%, transparent 70%);

    /* smooth fade to page background at the bottom */
    -webkit-mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start),
            transparent calc(var(--fade-start) + var(--fade-len)));
    mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 var(--fade-start),
            transparent calc(var(--fade-start) + var(--fade-len)));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Keep content on top */
#intro .intro-stack {
    position: relative;
    z-index: 1;
}

/* Mobile: slightly bigger white center & longer fade */
@media (max-width:768px) {
    #intro {
        --fade-start: 56%;
        --fade-len: 30%;
        --center-clear: 58%;
    }
}