/* ==========================================================================
   Desktop Hero Redesign (Landing v5.2)
   New, self-contained styles. Prefixed with .dt- so nothing existing is touched.
   NOTE: text selectors are scoped under .dt-hero (two classes) so they win over
   the global `.welcome h1 { font-size:4.8rem }` rule in landing.css.
   ========================================================================== */

.dt-hero {
    position: relative;
    z-index: 0;
    background: transparent;
    padding: 24px 0 30px;
}

/* Full-bleed dark background: breaks out of the Bootstrap .container to span the
   whole viewport width, and extends upward behind the header (z-index:-1 keeps it
   behind the nav and hero content while covering the .welcome nebula). */
.dt-hero::before {
    content: "";
    position: absolute;
    top: -220px;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    height: calc(100% + 220px);
    background: url('https://xpalassets.s3.us-east-1.amazonaws.com/xp-background-nlp.png') center top / cover no-repeat, #0c0620;
    z-index: -1;
    pointer-events: none;
}

/* Left separator line: the native .welcome::before (at left:100px) paints as the
   section's first child, so our full-bleed dark .dt-hero::before covers it inside
   this section (while .welcome::after, the right line, paints last and stays on
   top). Replace it with a real full-height line on .welcome that paints above the
   dark background — same coordinate system as .welcome::after, so both sides span
   the whole section identically and form matching intersections at every boundary.
   The native .welcome::before (left line) normally paints behind our dark
   .dt-hero::before; lifting it to z-index:2 makes it show on top — and, unlike a
   separate element, it keeps ALL of landing.css's responsive positioning
   (100px > 30px at <=1500px, hidden at <=767px), staying in lockstep with the
   right line (.welcome::after) at every breakpoint. */
.welcome::before {
    z-index: 2;
}

/* The full-bleed .dt-hero::before uses 100vw (which includes the scrollbar width),
   so clip any resulting horizontal overflow at the section without affecting
   vertical overflow or creating a scroll container. */
.welcome {
    overflow-x: clip;
}

/* Navbar spacing (index page, all breakpoints) */
.welcome header .navbar {
    margin-top: 15px;
}

.dt-hero-inner {
    max-width: 1880px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

/* ---------------- FIRST HALF : heading block ---------------- */
.dt-hero-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 0 8px;
    /* keep the heading + CTA buttons stacked above the overlapping mockup so they
       stay clickable (mockup uses a negative margin and covers this area) */
    position: relative;
    z-index: 3;
}

.dt-hero .dt-hero-title {
    font-size: clamp(1.8rem, 2.55vw, 2.75rem);
    line-height: 1.2;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 30px;
    letter-spacing: 0.2px;
    /* reuse the existing inline SVG inner-shadow filter used by the old hero h1 */
    filter: url(#h1-inner-shadow-strong);
}

.dt-hero-title-accent {
    background: linear-gradient(90deg, #8ea2ff 0%, #b9a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #9db0ff;
}

.dt-hero .dt-hero-subtitle {
    font-size: 1.6rem;
    font-weight: 500;
    color: #4ea8ff;
    line-height: 1.3;
    margin: 0 0 5px;
    filter: url(#h3-inner-shadow-top);
}

.dt-hero .dt-hero-desc {
    font-size: 0.92rem;
    line-height: 1.6;
    font-weight: 400;
    color: #c9c7d6;
    max-width: 620px;
    margin: 0 auto 30px;
}

/* ---- Buttons ---- */
.dt-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-bottom: 70px;
}

/* Default (no-JS / Windows & other desktop): show Windows, hide Mac.
   The inline toggle script in Index.cshtml adjusts this per user agent. */
.dt-hero-cta .dt-cta-mac {
    display: none;
}

/* Mobile-only store badges — hidden on desktop; JS reveals exactly one on mobile */
.dt-hero-cta .dt-cta-store {
    display: none;
    transition: transform 0.2s ease;
}

    .dt-hero-cta .dt-cta-store:hover {
        transform: translateY(-2px);
    }

    .dt-hero-cta .dt-cta-store img {
        height: 54px;
        width: auto;
        display: block;
    }

.dt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    padding: 13px 17px;
    border-radius: 22px;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    white-space: nowrap;
}

.dt-btn-primary {
    background: linear-gradient(90deg, #4b52ff 0%, #6a52ff 100%);
    color: #ffffff;
    border: 1px solid transparent;
    box-shadow: 0 8px 24px rgba(75, 82, 255, 0.35);
}

    .dt-btn-primary:hover {
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(75, 82, 255, 0.5);
    }

.dt-btn-outline {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    border: 1px solid #8ea6ff;
}

    .dt-btn-outline:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        border-color: #a9bcff;
    }

.dt-btn-primary .fa-apple {
    font-size: 1.05rem;
}

.dt-hero .dt-hero-experience {
    font-size: 1.05rem;
    font-weight: 500;
    color: #8ea6ff;
    line-height: 1.3;
    margin: 0;
    filter: url(#h3-inner-shadow-top);
}

/* ---------------- Panel : mockup + stores ---------------- */
.dt-panel {
    position: relative;
    border-radius: 0;
    background: transparent;
    border: none;
    padding: 0 20px 36px;
    margin-top: 0;
}

.dt-mockup-wrap {
    text-align: center;
    /* pull up so the mockup sits right below the heading (its glow overlaps) */
    margin-top: -60px;
    /* the image is non-interactive; its (mostly transparent) box overlaps the CTA
       buttons after being pulled up, so let clicks pass through to the buttons */
    pointer-events: none;
}

.dt-mockup {
    width: 100%;
    max-width: 1820px;
    height: auto;
    display: inline-block;
}

.dt-panel .dt-available-label {
    font-size: 1rem;
    font-weight: 500;
    color: white;
    margin: -40px 0 20px;
}

/* ---- store button row ---- */
.dt-store-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
}

.dt-store-link {
    display: inline-block;
    transition: transform 0.2s ease;
}

    .dt-store-link:hover {
        transform: translateY(-2px);
    }

    .dt-store-link img {
        height: 48px;
        width: auto;
        display: block;
    }

/* ---------------- SECOND HALF : cards ---------------- */
.dt-cards-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: stretch;
    margin-top: 44px;
    margin-bottom: 80px;
}

.dt-card {
    flex: 1 1 360px;
    max-width: 440px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* NIST card */
.dt-card .dt-card-intro {
    font-size: 0.92rem;
    color: #d8d6e6;
    margin: 0 0 12px;
}

.dt-nist-logo {
    max-width: 140px;
    height: auto;
    margin-bottom: 14px;
}

.dt-card .dt-nist-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #98cfff;
    margin: 0 0 12px;
    line-height: 1.3;
}

.dt-card .dt-nist-desc {
    font-size: 0.88rem;
    color: #b9b7c8;
    margin: 0 0 22px;
}

.dt-nist-btn {
    margin-top: auto;
    padding: 10px 22px;
    font-size: 0.82rem;
    font-weight: 500;
    border-color: #8090f7;
}

/* XAVE card : wordmark logo + supporting text only (no heading) */
.dt-xave-icon {
    width: auto;
    height: 40px;
    margin-bottom: 18px;
}

.dt-xave-badge {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    margin-bottom: 18px;
}

.dt-card .dt-xave-text {
    font-size: 1.15rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.4;
    max-width: 320px;
    margin: 0 0 24px;
}

.dt-xave-stores {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;
    width: 100%;
    margin-top: auto;
}

    /* equal-width columns so all three fit on a single line */
    .dt-xave-stores .dt-store-link-sm {
        flex: 1 1 0;
        min-width: 0;
    }

.dt-store-link-sm img {
    height: auto;
    width: 100%;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
    .dt-hero .dt-hero-subtitle { font-size: 1.2rem; }
    .dt-hero .dt-hero-experience { font-size: 1.2rem; }
    .dt-cards-row { margin-top: 36px; }
    .dt-mockup-wrap { margin-top: -20px; }
    /* Vertical separator lines are a desktop-only accent — hide both on mobile/tablet */
    .welcome::before,
    .welcome::after { display: none; }
    /* Collapsible hamburger menu grows the header and pushes .dt-hero (and its
       -220px dark ::before) down, re-exposing the old nebula behind the header.
       Give the header its own solid dark bg so the expanded menu stays covered. */
    .welcome > header { background-color: #0c0620; }
}

/* ---- Mobile view: drop desktop-specific text, swap to phone mockup ---- */
@media (max-width: 767.98px) {
    /* "Now on Desktop" (title accent) + its line break, and the "Desktop Experience" line */
    .dt-hero .dt-hero-title-accent { display: none; }
    .dt-hero .dt-hero-title br { display: none; }
    .dt-hero .dt-hero-experience { display: none; }
    /* the <picture> swaps the src to the phone mockup here. The phone occupies only
       ~half the image width (transparent sides), so scale it beyond the container and
       center it; the transparent overflow is clipped by .welcome { overflow-x: clip }. */
    .dt-mockup {
        display: block;
        width: 160%;
        max-width: none;
        margin-left: -30%;
        height: auto;
    }
    .dt-mockup-wrap { margin-top: -100px; }
}

@media (max-width: 575.98px) {
    .dt-hero { padding: 24px 0 5px; }
        .dt-hero .dt-hero-title {
            font-size: 1.5rem;
            margin: 0 0 20px;
        }
    .dt-hero-title br { display: none; }
    .dt-hero .dt-hero-subtitle { font-size: 1.3rem; margin: 0 0 20px; }
    .dt-hero .dt-hero-desc { font-size: 1rem; }
    .dt-hero-desc br { display: none; }
    .dt-hero-cta { gap: 12px; margin-bottom: 35px; }
    .dt-hero-cta .dt-cta-store img { height: 38px; width: auto; display: block; }
    .dt-btn { width: 100%; max-width: 320px; padding: 12px 22px; }
    .welcome header .navbar { margin-bottom: 5px; }
    .dt-hero .dt-hero-experience { font-size: 1.4rem; }
    .dt-mockup-wrap { margin-top: -100px; }
    .dt-panel { padding: 0 12px 28px; border-radius: 16px; }
    .dt-panel .dt-available-label { margin: -35px 0 20px; }
    /* "Also Available on" row: equal-width 2x2 grid */
    .dt-store-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .dt-store-row .dt-store-link { width: 100%; }
    .dt-store-row .dt-store-link img { width: 100%; height: auto; }
    /* XAVE row: keep 3 equal columns, preserve aspect ratio (no forced height) */
    .dt-xave-stores .dt-store-link-sm img { width: 100%; height: auto; }
    .dt-card { padding: 24px 20px; }
    .dt-card .dt-nist-title { font-size: 1.15rem; }
    .dt-card .dt-xave-text { font-size: 1.05rem; }
}

/* Override the ≤768px header logo width (was 80% in index.css) -> 90% */
@media (max-width: 768px) {
    .welcome > header .navbar .navbar-brand .logo-header-combined {
        width: 90%;
        margin-bottom: 5px;
    }
}