/* index3b.html — editorial / luxury: serif headline + humanist sans taglines */

/* Contain horizontal overflow on phones (visible overflow was causing sideways scroll + menu off-screen). */
html.index3b-page,
body.index3b-page {
    overflow-x: hidden !important;
    max-width: 100%;
}

/* Light parchment theme — overrides demo1 :root for this page only (readable on newbg.png) */
body.index3b-page {
    /* Parchment fallback under newbg (warmer / less “bright white” than styles.css #f5f3f0) */
    --bg-dark: #e4dbd0;
    --text-light: #2a2318;
    --text-muted: #5c5044;
    --accent-gold: #6b5420;
    --accent-gold-light: #8a6a28;
    --brand-red-light: #a94432;
    --glass-bg: rgba(255, 252, 246, 0.9);
    --glass-border: rgba(74, 58, 42, 0.22);
    /* Hero copy: title = burgundy · taglines = warm brown (clearly different) */
    --hero-copy-title: #5c1822;
    --hero-copy-subtitle: #3f352c;
    --hero-copy-description: #52483c;
    --hero-copy-title-shadow:
        0 1px 0 rgba(255, 252, 244, 0.55),
        0 1px 4px rgba(72, 18, 18, 0.2);
    --hero-copy-tagline-shadow:
        0 1px 0 rgba(255, 252, 244, 0.45),
        0 1px 2px rgba(42, 34, 24, 0.14);
    background: url('./public/images/newbg.png') center top / cover no-repeat fixed;
    background-color: var(--bg-dark);
    color: var(--text-light);
}

body.index3b-page #loader.loader {
    background: url('./public/images/newbg.png') center top / cover no-repeat fixed;
    background-color: var(--bg-dark);
}

body.index3b-page .stars-container {
    background: url('./public/images/newbg.png') center top / cover no-repeat fixed;
}

/*
 * Hero-only vignette (does not darken the whole page): pulls dial + card off the
 * bright parchment so changes are visible. Content sits above via .hero-container z-index.
 */
body.index3b-page .hero.hero--sample3 {
    position: relative;
    isolation: isolate;
}

body.index3b-page .hero.hero--sample3::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Solid base + non-transparent radial avoids a bright “hole” mid-hero (was reading as half-screen seam) */
    background:
        linear-gradient(
            180deg,
            rgba(28, 22, 16, 0.1) 0%,
            rgba(24, 19, 14, 0.13) 45%,
            rgba(20, 16, 12, 0.14) 100%
        ),
        radial-gradient(
            ellipse 118% 96% at 50% 50%,
            rgba(32, 26, 20, 0.06) 0%,
            rgba(26, 20, 15, 0.1) 48%,
            rgba(22, 17, 13, 0.13) 100%
        ),
        rgba(22, 18, 14, 0.08);
}

/* Dial column above wide hero glow (glow spills horizontally from .hero-premium-v3) */
body.index3b-page .hero.hero--sample3 .hero-container {
    position: relative;
    z-index: 1;
}

body.index3b-page .hero.hero--sample3 .hero-left {
    position: relative;
    z-index: 1;
}

body.index3b-page .hero.hero--sample3 .hero-right {
    position: relative;
    z-index: 4;
}

body.index3b-page .hero.hero--sample3 .hero-visual-v3 {
    position: relative;
    z-index: 1;
}

body.index3b-page .hero.hero--sample3 .hero-zodiac-stack {
    position: relative;
    z-index: 2;
}

@media (max-width: 992px) {
    body.index3b-page .hero.hero--sample3 {
        max-width: 100%;
        overflow-x: hidden;
        position: relative;
        isolation: isolate;
        align-items: flex-start;
        /* demo1 `.hero { height: 100vh }` caps the scrim — grow with stacked card + dial */
        height: auto !important;
        min-height: 0 !important;
    }

    /* Match full scroll height of hero content (no half-screen vignette cut-off) */
    body.index3b-page .hero.hero--sample3::before {
        inset: 0;
        background:
            linear-gradient(
                180deg,
                rgba(22, 17, 13, 0.16) 0%,
                rgba(20, 15, 11, 0.2) 38%,
                rgba(18, 14, 10, 0.22) 72%,
                rgba(16, 12, 9, 0.2) 100%
            ),
            radial-gradient(
                ellipse 125% 105% at 50% 52%,
                rgba(28, 22, 17, 0.12) 0%,
                rgba(22, 17, 13, 0.18) 52%,
                rgba(18, 14, 10, 0.2) 100%
            ),
            rgba(20, 15, 11, 0.14);
    }

    body.index3b-page .hero.hero--sample3 .hero-container {
        position: relative;
        z-index: 1;
    }

    body.index3b-page .hero.hero--sample3 .hero-premium-v3 {
        --hero-v3-copy-width: min(28rem, calc(100% - 1.5rem));
        max-width: min(40rem, 100%);
    }

    body.index3b-page.intro-hero-mode .hero.hero--sample3 {
        /* Intro overlay keeps full viewport; don’t force auto height here */
        height: 100vh !important;
        min-height: 100vh !important;
    }

    body.index3b-page.intro-hero-mode .hero.hero--sample3::before {
        background:
            linear-gradient(
                180deg,
                rgba(24, 19, 14, 0.16) 0%,
                rgba(20, 15, 11, 0.22) 50%,
                rgba(18, 14, 10, 0.2) 100%
            ),
            radial-gradient(
                ellipse 120% 100% at 50% 48%,
                rgba(30, 24, 18, 0.12) 0%,
                rgba(24, 18, 14, 0.2) 45%,
                rgba(20, 15, 11, 0.22) 100%
            ),
            rgba(20, 15, 11, 0.14);
    }

    /* First mobile view: hero + door fill viewport height; contact starts below fold */
    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 {
        display: flex;
        flex-direction: column;
        min-height: 100svh;
        min-height: 100dvh;
        height: auto !important;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        flex: 1 1 auto;
        width: 100%;
        min-height: calc(100svh - var(--hero-offset-top, 80px));
        min-height: calc(100dvh - var(--hero-offset-top, 80px));
        justify-items: center;
        align-items: stretch;
        gap: 0;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-left,
    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-right {
        grid-row: 1;
        grid-column: 1;
        width: 100%;
        max-width: calc(100vw - max(0.5rem, calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px))));
        min-height: 100%;
        margin-inline: auto;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-right {
        z-index: 1;
        margin-top: 0;
        display: flex;
        justify-content: center;
        align-items: stretch;
        height: 100%;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-left {
        z-index: 3;
        align-self: end;
        justify-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        margin-inline: 0;
        /* Lift copy block upward inside the door arch */
        padding-bottom: clamp(2.85rem, 13vw, 4.1rem);
        box-sizing: border-box;
        pointer-events: none;
        text-align: center;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-left .hero-content {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-left .hero-cta-v3,
    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-left a {
        pointer-events: auto;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-visual-v3 {
        width: 100%;
        max-width: 100%;
        height: 100%;
        min-height: 100%;
        display: flex;
        align-items: stretch;
        justify-content: center;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-zodiac-stack {
        --hero-v3-dial-scale: 90%;
        --hero-v3-arch-min-h: calc(100svh - var(--hero-offset-top, 80px) - env(safe-area-inset-bottom, 0px));
        --hero-v3-arch-min-h: calc(100dvh - var(--hero-offset-top, 80px) - env(safe-area-inset-bottom, 0px));
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        height: 100%;
        flex: 1 1 auto;
        justify-content: flex-start;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-zodiac-door {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        top: 0;
        height: 100%;
        min-height: 100%;
        transform: translate(-50%, 0);
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-zodiac-stack > .zodiac-wheel-tint {
        margin-top: clamp(2.1rem, 9vw, 3.75rem);
        transform: translateY(clamp(1.35rem, 5.2vw, 2.35rem));
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .zodiac-wheel-tint .zodiac-wheel {
        margin-top: 0 !important;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-premium-v3 {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        margin-bottom: clamp(0.5rem, 2.8vw, 1.1rem);
        padding: 0 0.45rem 0.35rem;
        display: flex;
        flex-direction: column !important;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        transform: translateY(clamp(-28px, -6.5vw, -42px));
    }

    /* Lock copy order: AstroTalk → line → taglines (never reversed by anim offsets) */
    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-heading-block-v3 {
        order: 1;
        transform: none !important;
        opacity: 1 !important;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-accent-row-v3 {
        order: 2;
        transform: none !important;
        opacity: 1 !important;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-lines-v3 {
        order: 3;
        transform: none !important;
        opacity: 1 !important;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-cta-v3 {
        order: 4;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-glow-v3 {
        left: 50%;
        top: auto;
        bottom: 18%;
        transform: translateX(-50%);
        height: clamp(6rem, 28vw, 9rem);
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-heading-block-v3 {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        margin-bottom: 0.18rem;
        text-align: center;
        position: relative;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-title-v3 {
        display: block;
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        text-align: center;
        font-size: clamp(2.15rem, 11.5vw, 3.65rem) !important;
        letter-spacing: 0.02em !important;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-accent-row-v3 {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        margin-bottom: 0.28rem;
        justify-content: center;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-accent-line-wrap-v3 {
        width: min(19rem, 92vw);
        margin-inline: auto;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-lines-v3 {
        /* Sized so both taglines stay one line each (2 lines total on mobile) */
        --hero-v3-tagline-size: clamp(0.74rem, 4.15vw, 1.28rem);
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        margin-top: 0.32rem;
        padding-inline: 0.2rem;
        padding-top: 0;
        text-align: center;
        align-items: center;
        line-height: 1.3;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-lines-v3 .hero-subtitle,
    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-lines-v3 .hero-description {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        text-align: center;
        white-space: nowrap !important;
        word-spacing: normal !important;
        font-size: var(--hero-v3-tagline-size) !important;
        line-height: 1.3;
        overflow: visible;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-lines-v3 .hero-subtitle {
        margin-bottom: 0.22rem;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-lines-v3 .hero-description {
        margin-bottom: 0;
    }

}

@media (max-width: 400px) {
    body.index3b-page .hero.hero--sample3 .hero-premium-v3 {
        --hero-v3-copy-width: min(28rem, calc(100% - 1rem));
    }
}

.stars-container::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Soft top glow only — light shade as before (no heavy wash over the photo) */
    background:
        radial-gradient(circle at 50% 26%, rgba(255, 232, 176, 0.18) 0%, rgba(255, 232, 176, 0.05) 18%, transparent 48%);
    pointer-events: none;
}

.star {
    opacity: 0.34;
}

.navbar {
    border-bottom-color: rgba(74, 58, 42, 0.14);
    background: linear-gradient(180deg, rgba(255, 252, 246, 0.94) 0%, rgba(255, 249, 238, 0.82) 100%) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px rgba(42, 32, 22, 0.06);
}

.navbar:hover,
.navbar:focus-within {
    background: linear-gradient(180deg, rgba(255, 252, 246, 0.98) 0%, rgba(255, 249, 238, 0.9) 100%) !important;
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent-gold);
}

/* Navbar wordmark: same ink as hero “Astrotalk” (.hero-title-v3 #3a2e22) */
body.index3b-page .navbar .logo-text {
    color: #3a2e22;
    -webkit-text-fill-color: #3a2e22;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
}

.nav-link,
.dropdown-menu li a {
    color: rgba(42, 35, 26, 0.88);
}

.dropdown-menu {
    background: rgba(255, 252, 246, 0.96);
    border-color: rgba(74, 58, 42, 0.14);
}

.hero.hero--sample3 .hero-premium-v3 {
    padding: 1.25rem 1.4rem 1.35rem;
    border-radius: 1.6rem;
    /* Warmer, lower-L panel — less glare than near-white glass; blur helps legibility */
    background: linear-gradient(
        180deg,
        rgba(234, 226, 214, 0.97) 0%,
        rgba(218, 206, 190, 0.95) 52%,
        rgba(206, 192, 176, 0.93) 100%
    );
    border: 1px solid rgba(74, 58, 42, 0.2);
    box-shadow:
        0 18px 48px rgba(42, 32, 22, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.32) inset,
        inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    backdrop-filter: saturate(1.05) blur(8px);
    -webkit-backdrop-filter: saturate(1.05) blur(8px);
}

.hero.hero--sample3 .hero-heading-block-v3 {
    position: relative;
    isolation: isolate;
}

.hero.hero--sample3 .hero-smoke-v3 {
    position: absolute;
    inset: -1rem -1.4rem -0.45rem;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}

.hero.hero--sample3 .hero-smoke-cloud-v3 {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.72) 0%, rgba(236, 241, 255, 0.38) 22%, rgba(160, 179, 222, 0.2) 52%, rgba(120, 138, 190, 0.08) 68%, transparent 82%);
    mix-blend-mode: screen;
    filter: blur(24px);
    opacity: 0;
    transform: translate(-50%, -50%);
}

.hero.hero--sample3 .hero-smoke-cloud-v3--1 {
    width: 52%;
    height: 96%;
    margin-left: -28%;
    margin-top: -3%;
}

.hero.hero--sample3 .hero-smoke-cloud-v3--2 {
    width: 66%;
    height: 112%;
    margin-top: -11%;
}

.hero.hero--sample3 .hero-smoke-cloud-v3--3 {
    width: 50%;
    height: 92%;
    margin-left: 29%;
    margin-top: 4%;
}

.hero.hero--sample3 .hero-title-v3 {
    font-family: 'Sephora', 'Haydena', 'Cormorant Garamond', serif;
    font-weight: 700;
    letter-spacing: 0.035em;
    position: relative;
    z-index: 3;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

/* index3b: unified title + tagline colors (overrides generic #2a2018 / muted browns) */
body.index3b-page .hero.hero--sample3 .hero-title-v3,
body.index3b-page .hero.hero--sample3 .hero-title-v3 .char-v3,
body.index3b-page .hero.hero--sample3 .hero-title-v3 .hero-title-v3-part {
    color: var(--hero-copy-title) !important;
    -webkit-text-fill-color: var(--hero-copy-title) !important;
    text-shadow: var(--hero-copy-title-shadow) !important;
    filter: none;
}

body.index3b-page .hero.hero--sample3 .hero-lines-v3 .hero-subtitle,
body.index3b-page .hero.hero--sample3 .hero-lines-v3 .hero-description {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.index3b-page .hero.hero--sample3 .hero-lines-v3 .hero-subtitle {
    color: var(--hero-copy-subtitle) !important;
    -webkit-text-fill-color: var(--hero-copy-subtitle) !important;
    text-shadow: var(--hero-copy-tagline-shadow) !important;
    font-weight: 600;
}

body.index3b-page .hero.hero--sample3 .hero-lines-v3 .hero-description {
    color: var(--hero-copy-description) !important;
    -webkit-text-fill-color: var(--hero-copy-description) !important;
    text-shadow: var(--hero-copy-tagline-shadow) !important;
    font-weight: 600;
}

.hero.hero--sample3 .hero-title-v3-part {
    display: inline-block;
    white-space: nowrap;
}

.hero.hero--sample3 .hero-title-v3-part--sephora {
    font-family: 'Sephora', 'Cormorant Garamond', serif;
    font-weight: 700;
}

/* Haydena on CDN Fonts (requested “Hayden”) — script weight for “TALK” */
.hero.hero--sample3 .hero-title-v3-part--hayden {
    font-family: 'Haydena', 'Cormorant Garamond', cursive;
    font-weight: 400;
    margin-left: 0.06em;
    letter-spacing: 0.02em;
    font-size: 1.06em;
    vertical-align: baseline;
}

.hero.hero--sample3 .hero-title-v3.is-shimmer-v3 {
    animation: heroTitleGlowPulseV3 5.8s ease-in-out infinite;
}

.hero.hero--sample3 .hero-glow-v3 {
    width: min(158%, 34rem);
    height: clamp(12rem, 34vw, 18rem);
    background:
        radial-gradient(ellipse 74% 64% at 50% 36%, rgba(255, 234, 184, 0.38) 0%, rgba(255, 220, 185, 0.16) 38%, rgba(200, 160, 130, 0.08) 58%, transparent 78%);
    filter: blur(10px);
}

.hero.hero--sample3 .hero-flourish-v3--l {
    background: linear-gradient(90deg, transparent, rgba(240, 211, 147, 0.24), rgba(240, 211, 147, 0.8));
    box-shadow: 0 0 12px rgba(240, 211, 147, 0.22);
}

.hero.hero--sample3 .hero-flourish-v3--r {
    background: linear-gradient(90deg, rgba(240, 211, 147, 0.8), rgba(240, 211, 147, 0.24), transparent);
    box-shadow: 0 0 12px rgba(240, 211, 147, 0.22);
}

.hero.hero--sample3 .hero-accent-line-v3 {
    background: linear-gradient(
        90deg,
        rgba(148, 118, 72, 0.45) 0%,
        rgba(184, 148, 92, 0.95) 18%,
        #d9c089 50%,
        rgba(118, 148, 188, 0.72) 82%,
        rgba(96, 118, 154, 0.28) 100%
    );
    box-shadow:
        0 0 6px rgba(178, 148, 98, 0.42),
        0 0 18px rgba(148, 118, 74, 0.38),
        0 0 36px rgba(88, 112, 148, 0.22);
}

/* index3-hero shimmer ::before reads very bright on parchment — soften so the bar stays darker */
.hero.hero--sample3 .hero-accent-line-v3::before {
    opacity: 0.5;
}

.hero.hero--sample3 .hero-accent-line-v3::after {
    opacity: 0.65;
}

.hero.hero--sample3 .hero-accent-dot-v3 {
    box-shadow:
        0 0 8px 2px rgba(255, 255, 255, 0.95),
        0 0 20px 5px rgba(255, 236, 193, 0.72),
        0 0 34px 12px rgba(153, 192, 255, 0.34);
}

.hero.hero--sample3 .hero-lines-v3 .hero-subtitle,
.hero.hero--sample3 .hero-lines-v3 .hero-description {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
    /* Same px size for h2 + p; demo1 uses 1.8rem vs 1.2rem on generic .hero-* */
    font-size: var(--hero-v3-tagline-size);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Desktop only: widen subtitle word spacing so both tagline lines align visually */
@media (min-width: 993px) {
    body.index3b-page .hero.hero--sample3 .hero-lines-v3 .hero-subtitle {
        word-spacing: clamp(0.1em, 0.75vw, 0.32em);
    }
}

.hero.hero--sample3 .hero-cta-v3 .btn-primary {
    background: linear-gradient(135deg, #c86a46, #a94d32);
    box-shadow: 0 18px 40px rgba(81, 23, 11, 0.28);
}

.hero.hero--sample3 .hero-cta-v3 .btn-primary:hover {
    background: linear-gradient(135deg, #d57a55, #b45739);
}

/* Arch behind zodiac — muted parchment so the dial reads brighter on top */
.hero-zodiac-stack {
    position: relative;
    display: inline-block;
    line-height: 0;
    transform-origin: center center;
}

.hero-zodiac-door {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: -7%;
    margin-left: auto;
    margin-right: auto;
    width: 62%;
    min-width: 8.25rem;
    max-width: 19rem;
    height: 112%;
    min-height: 17rem;
    border-radius: 9999px 9999px 0 0;
    pointer-events: none;
    box-sizing: border-box;
}

/* index3b: frosted glass door — blur + low-opacity tint (mobile + desktop) */
body.index3b-page .hero.hero--sample3 .hero-zodiac-door {
    background: linear-gradient(
        180deg,
        rgba(255, 252, 244, 0.28) 0%,
        rgba(232, 223, 208, 0.22) 30%,
        rgba(227, 218, 193, 0.18) 58%,
        rgba(213, 204, 164, 0.14) 100%
    );
    backdrop-filter: blur(16px) saturate(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
    border: 1px solid rgba(255, 252, 246, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -6px 18px rgba(90, 72, 52, 0.05),
        0 4px 24px rgba(42, 32, 22, 0.07);
}

/* index3b: arch + dial — dial is % of stack; desktop “module” size via width + arch height */
.hero.hero--sample3 .hero-zodiac-stack {
    --hero-v3-dial-scale: 78%;
    --hero-v3-arch-min-h: clamp(24rem, 56vw, 32rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(22.5rem, min(94vw, 28rem));
    min-height: var(--hero-v3-arch-min-h);
}

.hero.hero--sample3 .hero-zodiac-door {
    width: min(92%, 21rem);
    max-width: none;
    min-width: 0;
    left: 50%;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    /* Center + move arch upward (see clamp for amount) */
    transform: translate(-50%, clamp(-26px, -2vw, -10px));
    top: 0;
    height: 100%;
    min-height: var(--hero-v3-arch-min-h);
}

.hero .zodiac-wheel-tint {
    position: relative;
    z-index: 1;
    display: inline-block;
    line-height: 0;
    isolation: isolate;
    filter:
        drop-shadow(0 1px 2px rgba(12, 8, 6, 0.2))
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.85))
        drop-shadow(0 4px 12px rgba(42, 28, 20, 0.12));
}

/* Dial: width is % of .hero-zodiac-stack only (scales with arch column + viewport) */
.hero.hero--sample3 .hero-zodiac-stack > .zodiac-wheel-tint {
    width: var(--hero-v3-dial-scale);
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    /* Nudged up to track the door (was larger positive = lower on card) */
    transform: translateY(clamp(0px, 0.75vw, 8px));
}

/* Fill tint column — !important beats demo1 .zodiac-wheel { 450px / 992px→300px } */
.hero.hero--sample3 .zodiac-wheel-tint .zodiac-wheel {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Same breakpoint demo1 uses for 300px wheel — keep img tied to % dial, not fixed px */
@media (max-width: 992px) {
    .hero.hero--sample3 .zodiac-wheel-tint .zodiac-wheel {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
    }
}

/* Dial: punchy edges + warm cast (readable on light arch) */
.hero .zodiac-wheel-tint .zodiac-wheel {
    display: block;
    position: relative;
    z-index: 0;
    filter:
        contrast(1.22)
        saturate(0.88)
        brightness(1.1)
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.65))
        drop-shadow(0 0 2px rgba(42, 28, 20, 0.45));
}

/* Terracotta cast — lighter than full multiply so glyphs stay crisp */
.hero .zodiac-wheel-tint::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(165deg, rgba(180, 78, 52, 0.55) 0%, rgba(120, 48, 36, 0.45) 100%);
    mix-blend-mode: color;
    opacity: 0.44;
    -webkit-mask-image: url('./public/images/Astro-2.png');
    mask-image: url('./public/images/Astro-2.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-source-type: luminance;
    mask-mode: luminance;
    pointer-events: none;
}

.section-title,
.contact-section .section-title,
.form-tagline h3,
.form-divider h3,
.form-group label,
.service-item h3,
.service-link,
.service-link:hover,
.info-section .info-title,
.info-section .info-text h4 {
    color: var(--accent-gold) !important;
}

.section-title::after,
.form-tagline h3::after {
    background: linear-gradient(45deg, rgba(74, 58, 42, 0.55), rgba(74, 58, 42, 0.12)) !important;
}

.contact-section .section-subtitle,
.section-subtitle,
.form-note,
.disclaimer,
.about-section .whatsapp-details .disclaimer,
.about-section .contact-item i,
.about-section .whatsapp-item i {
    color: var(--text-muted) !important;
}

.service-link {
    border-color: rgba(169, 68, 50, 0.45) !important;
}

.service-link:hover {
    background: rgba(169, 68, 50, 0.08) !important;
    border-color: rgba(169, 68, 50, 0.75) !important;
    box-shadow: 0 5px 15px rgba(42, 32, 22, 0.1) !important;
}

/* Footer + form fields: index-sections uses a dark strip / dark inputs — align with parchment theme */
body.index3b-page .footer {
    background: rgba(255, 252, 246, 0.94);
}

body.index3b-page .contact-section .form-group input,
body.index3b-page .contact-section .form-group select,
body.index3b-page .contact-section .form-group textarea {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-light) !important;
}

body.index3b-page .contact-section .form-group select option {
    background: #faf8f4 !important;
    color: #2a2318 !important;
}

@media (max-width: 768px) {
    .navbar {
        overflow: visible;
    }

    .navbar .nav-container {
        width: 100%;
        max-width: 100%;
        justify-content: space-between !important;
        gap: 0.75rem;
        padding-left: 14px !important;
        padding-right: 64px !important;
        overflow: visible;
    }

    .navbar .nav-logo {
        min-width: 0;
        flex: 1 1 auto;
    }

    .navbar .hamburger {
        display: inline-flex !important;
        position: fixed;
        top: 10px;
        right: 12px;
        width: 44px;
        height: 44px;
        margin-left: 0;
        margin-right: 0;
        align-items: center;
        justify-content: center;
        gap: 5px;
        flex: 0 0 44px;
        border-radius: 10px;
        background: rgba(255, 252, 246, 0.92);
        border: 1px solid rgba(74, 58, 42, 0.22);
        z-index: 5001;
    }

    .navbar .hamburger .bar {
        display: block;
        width: 22px;
        height: 2.5px;
        border-radius: 999px;
        background-color: #4a3d2e;
        box-shadow: none;
    }

    .navbar .nav-menu {
        z-index: 2001;
    }

    .hero.hero--sample3 .hero-premium-v3 {
        padding: 1rem 0.95rem 1.15rem;
        border-radius: 1.25rem;
    }

    .stars-container,
    body,
    body.index3b-page #loader.loader {
        background-attachment: scroll;
    }

    .hero.hero--sample3 {
        min-height: auto;
        height: auto;
    }

    /* Non–index3b sample-3 pages: stacked layout fallback */
    body:not(.index3b-page) .hero.hero--sample3 .hero-container {
        justify-content: flex-start;
        gap: 1rem;
        padding-bottom: 1.5rem;
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-left,
    body:not(.index3b-page) .hero.hero--sample3 .hero-right {
        width: 100%;
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-right {
        display: flex;
        justify-content: center;
        margin-top: 0.15rem;
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-visual-v3 {
        width: min(18.75rem, calc(100vw - max(1.5rem, calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px)))));
        max-width: 100%;
        margin-inline: auto;
        box-sizing: border-box;
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-zodiac-stack {
        --hero-v3-dial-scale: 78%;
        --hero-v3-arch-min-h: clamp(15.5rem, 76vw, 26rem);
        width: min(18.75rem, calc(100vw - max(1.25rem, calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px)))));
        max-width: 100%;
        min-height: var(--hero-v3-arch-min-h);
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-zodiac-door {
        width: min(92%, 18.75rem);
        min-height: var(--hero-v3-arch-min-h);
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-zodiac-stack > .zodiac-wheel-tint {
        transform: translateY(clamp(0px, 0.85vw, 8px));
    }

    body:not(.index3b-page) .hero.hero--sample3 .zodiac-wheel-tint .zodiac-wheel {
        width: 100% !important;
        height: auto !important;
        margin-top: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero.hero--sample3 .hero-title-v3.is-shimmer-v3 {
        animation: none;
    }

    .hero.hero--sample3 .hero-smoke-v3,
    .hero.hero--sample3 .hero-smoke-cloud-v3 {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero.hero--sample3 .hero-title-v3 {
        letter-spacing: 0.03em;
    }
}

/* Intro gate: after Bismillah, keep ONLY full-screen hero visible */
.navbar,
.floating-social,
.hero.hero--sample3 ~ * {
    transition: opacity 0.55s ease, visibility 0.55s ease;
}

body.intro-hero-mode {
    overflow: hidden;
}

/* No mobile menu FAB during loader / intro / landing reveal */
body.index3b-page.intro-hero-mode .index3b-nav-menu-fab,
body.index3b-page.landing-reveal-mode .index3b-nav-menu-fab,
body.index3b-page:has(#loader) .index3b-nav-menu-fab {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide every section except stars, loader, intro hero, and fixed nav FAB (not inside .navbar) */
body.intro-hero-mode > *:not(.stars-container):not(#loader):not(.hero.hero--sample3):not(.index3b-nav-menu-fab) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Force hero as full-screen overlay */
body.intro-hero-mode .hero.hero--sample3 {
    position: fixed;
    inset: 0;
    z-index: 4000;
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.intro-hero-mode .hero.hero--sample3 .hero-container {
    min-height: 100vh;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.intro-hero-mode .hero.hero--sample3 .hero-left {
    flex: 1 1 100%;
    width: 100%;
}

body.intro-hero-mode .hero.hero--sample3 .hero-right {
    display: none !important;
}

body.intro-hero-mode .hero.hero--sample3 .hero-premium-v3 {
    margin-top: 0;
    --hero-v3-copy-width: min(46rem, 92vw);
    max-width: min(52rem, 96vw);
    transform: scale(1.18);
    transform-origin: center center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

body.intro-hero-mode .hero.hero--sample3 .hero-cta-v3 {
    display: none !important;
}

body.index3b-page.intro-hero-mode .hero.hero--sample3 .hero-title-v3 {
    font-size: clamp(3.95rem, 10.8vw, 9.65rem);
}

body.intro-hero-mode:not(.index3b-page) .hero.hero--sample3 .hero-title-v3 {
    font-size: clamp(2.8rem, 8.2vw, 7.2rem);
}

body.intro-hero-mode .hero.hero--sample3 .hero-lines-v3 {
    --hero-v3-tagline-size: clamp(1.2rem, 2.45vw, 2.1rem);
}

body.intro-hero-mode .hero.hero--sample3 .hero-accent-line-wrap-v3 {
    width: min(22rem, 60vw);
    height: 5px;
}

/* Transition phase: intro hero settles into normal layout, then page reveals */
body.landing-reveal-mode {
    overflow: hidden;
}

body.landing-reveal-mode > *:not(.stars-container):not(.hero.hero--sample3):not(.index3b-nav-menu-fab) {
    pointer-events: none;
}

/* During landing reveal, keep text animation visible but remove only card background */
body.landing-reveal-mode .hero.hero--sample3 .hero-premium-v3 {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
    backdrop-filter: none !important;
}

@media (max-width: 768px) {
    body.intro-hero-mode .hero.hero--sample3 {
        align-items: flex-start;
        overflow-y: auto;
    }

    body.intro-hero-mode .hero.hero--sample3 .hero-container {
        min-height: 100svh;
        height: auto;
        justify-content: flex-start;
        padding-top: max(var(--hero-offset-top), 96px, env(safe-area-inset-top)) !important;
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
    }

    body.intro-hero-mode .hero.hero--sample3 .hero-premium-v3 {
        --hero-v3-copy-width: min(34rem, 94vw);
        transform: scale(1);
    }

    body.index3b-page.intro-hero-mode .hero.hero--sample3 .hero-title-v3 {
        font-size: clamp(3.4rem, 14vw, 6.15rem);
    }

    body.intro-hero-mode:not(.index3b-page) .hero.hero--sample3 .hero-title-v3 {
        font-size: clamp(2.2rem, 11vw, 4.6rem);
    }

    body.intro-hero-mode .hero.hero--sample3 .hero-lines-v3 {
        --hero-v3-tagline-size: clamp(0.9rem, 3.2vw, 1.5rem);
    }

    body.intro-hero-mode .hero.hero--sample3 .hero-accent-line-wrap-v3 {
        width: min(17rem, 76vw);
        height: 4px;
    }
}

@media (max-width: 480px) {
    body.intro-hero-mode .hero.hero--sample3 .hero-container {
        padding-top: max(var(--hero-offset-top), 92px, env(safe-area-inset-top)) !important;
    }

    body.intro-hero-mode .hero.hero--sample3 .hero-premium-v3 {
        --hero-v3-copy-width: min(32rem, 95vw);
    }
}

@media (max-width: 480px) {
    .navbar .nav-container {
        padding-left: 12px !important;
        padding-right: 60px !important;
    }

    .navbar .hamburger {
        top: 8px;
        right: 10px;
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-container {
        gap: 0.8rem;
        padding-bottom: 1.2rem;
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-premium-v3 {
        padding: 0.9rem 0.8rem 1rem;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-container {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-visual-v3 {
        width: min(17.5rem, calc(100vw - max(1rem, calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px)))));
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-zodiac-stack {
        --hero-v3-dial-scale: 78%;
        --hero-v3-arch-min-h: clamp(14.5rem, 74vw, 24rem);
        width: min(17.5rem, calc(100vw - max(1rem, calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px)))));
        min-height: var(--hero-v3-arch-min-h);
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-zodiac-door {
        width: min(92%, 17.5rem);
        min-height: var(--hero-v3-arch-min-h);
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-zodiac-stack > .zodiac-wheel-tint {
        transform: translateY(clamp(0px, 0.85vw, 8px));
    }

}

/* Narrow phones: keep compact dial block (avoid oversized full-bleed wheel) */
@media (max-width: 390px) {
    body:not(.index3b-page) .hero.hero--sample3 {
        margin-bottom: 0.8rem;
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-container {
        padding-bottom: 1.8rem;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 {
        margin-bottom: 0;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-container {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-visual-v3 {
        width: min(16.4rem, calc(100vw - max(1rem, calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px)))));
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-zodiac-stack {
        --hero-v3-dial-scale: 74%;
        --hero-v3-arch-min-h: clamp(13.5rem, 72vw, 22rem);
        width: min(16.4rem, calc(100vw - max(1rem, calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px)))));
        min-height: var(--hero-v3-arch-min-h);
    }

    body:not(.index3b-page) .hero.hero--sample3 .hero-zodiac-door {
        width: min(92%, 16.4rem);
        min-height: var(--hero-v3-arch-min-h);
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-title-v3 {
        font-size: clamp(1.95rem, 10.5vw, 3.25rem) !important;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-zodiac-stack {
        --hero-v3-dial-scale: 88%;
    }

    body.index3b-page:not(.intro-hero-mode) .hero.hero--sample3 .hero-lines-v3 {
        --hero-v3-tagline-size: clamp(0.66rem, 3.75vw, 1.08rem);
    }

}

/* Landscape phone: shorter arch only; dial stays same % of stack as desktop */
@media (max-width: 926px) and (orientation: landscape) and (max-height: 520px) {
    .hero.hero--sample3 .hero-zodiac-stack {
        --hero-v3-dial-scale: 78%;
        --hero-v3-arch-min-h: clamp(14rem, min(52vh, 56vw), 26rem);
        min-height: var(--hero-v3-arch-min-h);
    }

    .hero.hero--sample3 .hero-zodiac-door {
        min-height: var(--hero-v3-arch-min-h);
    }

    .hero.hero--sample3 .hero-zodiac-stack > .zodiac-wheel-tint {
        transform: translateY(clamp(-2px, 0.45vw, 6px));
    }
}

/* Mobile nav fallback:
   Some devices/reporting modes don't match the 768px query reliably.
   Keep hamburger visible for tablets/touch screens as well. */
@media (max-width: 992px), (hover: none) and (pointer: coarse) {
    .navbar .hamburger {
        display: inline-flex !important;
        position: fixed !important;
        top: 10px !important;
        right: 12px !important;
        width: 46px !important;
        height: 46px !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 5px !important;
        border-radius: 10px !important;
        background: rgba(255, 252, 246, 0.96) !important;
        border: 1px solid rgba(74, 58, 42, 0.28) !important;
        box-shadow: 0 6px 14px rgba(42, 32, 22, 0.12) !important;
        z-index: 7000 !important;
    }

    .navbar .hamburger .bar {
        display: block !important;
        width: 24px !important;
        height: 3px !important;
        border-radius: 999px !important;
        background: #4a3d2e !important;
        opacity: 1 !important;
    }

    .navbar .nav-container {
        padding-right: 68px !important;
    }

    .navbar .nav-menu {
        z-index: 6500 !important;
    }
}

/* Fixed menu control: lives outside .navbar so it stays visible during intro-hero-mode */
.index3b-nav-menu-fab {
    display: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1200px) {
    .index3b-nav-menu-fab {
        display: inline-flex;
        position: fixed;
        top: max(10px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        z-index: 15000;
        width: 48px;
        height: 48px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border-radius: 12px;
        background: rgba(255, 252, 246, 0.96);
        border: 1px solid rgba(74, 58, 42, 0.28);
        box-shadow: 0 6px 18px rgba(42, 32, 22, 0.12);
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .index3b-nav-menu-fab__line {
        display: block;
        width: 22px;
        height: 3px;
        border-radius: 999px;
        background: #4a3d2e;
        box-shadow: none;
    }

    .navbar .nav-menu.active {
        z-index: 13000 !important;
    }
}

/* Touch devices: keep menu control even when layout viewport reports > 992px */
@media (hover: none) and (pointer: coarse) {
    .index3b-nav-menu-fab {
        display: inline-flex;
        position: fixed;
        top: max(10px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        z-index: 15000;
        width: 48px;
        height: 48px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border-radius: 12px;
        background: rgba(255, 252, 246, 0.96);
        border: 1px solid rgba(74, 58, 42, 0.28);
        box-shadow: 0 6px 18px rgba(42, 32, 22, 0.12);
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .index3b-nav-menu-fab__line {
        display: block;
        width: 22px;
        height: 3px;
        border-radius: 999px;
        background: #4a3d2e;
        box-shadow: none;
    }
}