@import url("./index/tokens.css");

body.page-index .main-content {
    padding-top: clamp(0.8rem, 2vw, 1.4rem);
}

body.page-index .public-navbar {
    position: sticky;
    top: 0;
    z-index: 1055;
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--landing-surface) 86%, transparent),
        color-mix(in srgb, var(--landing-surface-soft) 90%, transparent)
    );
    border-bottom: 1px solid color-mix(in srgb, var(--landing-border) 70%, transparent);
    box-shadow: none;
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}

body.page-index .public-navbar.is-scrolled {
    border-bottom-color: var(--landing-border-strong);
    box-shadow: var(--landing-shadow);
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--surface-0) 92%, transparent),
        color-mix(in srgb, var(--surface-1) 88%, transparent)
    );
}

body.page-index .public-page-switcher {
    position: sticky;
    top: calc(var(--header-height) + 0.4rem);
    z-index: 1040;
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto 0.9rem;
}

#autoLogoutBanner {
    margin: 0 auto 1rem;
    width: min(1180px, calc(100% - 2rem));
    border-radius: 14px;
    border: 1px solid var(--landing-border-strong);
    background: var(--landing-surface);
    color: var(--text-soft);
    padding: 0.9rem 1rem;
    box-shadow: var(--shadow-sm);
}

.landing-hero {
    position: relative;
    padding: 0.15rem 0 0.85rem;
}

.landing-hero-shell {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid var(--landing-border-strong);
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--surface-0) 92%, transparent),
            color-mix(in srgb, var(--surface-1) 90%, transparent)
        ),
        linear-gradient(120deg, rgba(34, 99, 255, 0.12), rgba(110, 59, 248, 0.08));
    box-shadow: var(--landing-shadow-strong);
    padding: clamp(0.75rem, 1.45vw, 1.12rem);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.landing-hero-shell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(
        90deg,
        var(--landing-saffron),
        #fef3c7 40%,
        var(--landing-india-green)
    );
    opacity: 0.9;
}

.landing-hero-shell::after {
    content: "";
    position: absolute;
    right: 8%;
    bottom: 12%;
    width: clamp(100px, 16vw, 162px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--landing-lotus-blue) 34%, transparent);
    box-shadow:
        0 0 0 8px color-mix(in srgb, var(--landing-lotus-blue) 8%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--landing-lotus-blue) 34%, transparent);
    opacity: 0.36;
    pointer-events: none;
    animation: chakraPulse 5.2s ease-in-out infinite;
}

@keyframes chakraPulse {
    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.28;
    }

    50% {
        transform: translateY(-4px) scale(1.03);
        opacity: 0.44;
    }
}

.hero-noise {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15px 15px, rgba(255, 153, 51, 0.14) 2px, transparent 3px),
        radial-gradient(circle at 45px 45px, rgba(19, 136, 8, 0.12) 2px, transparent 3px);
    background-size: 64px 64px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 85%);
    opacity: 0.45;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(0.2px);
    opacity: 0.35;
    pointer-events: none;
    animation: heroOrbFloat 6s ease-in-out infinite;
}

.hero-orb.saffron {
    width: clamp(120px, 18vw, 200px);
    height: clamp(120px, 18vw, 200px);
    left: -40px;
    top: 15%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 153, 51, 0.5), transparent 60%);
}

.hero-orb.green {
    width: clamp(90px, 14vw, 160px);
    height: clamp(90px, 14vw, 160px);
    right: -30px;
    bottom: 18%;
    background: radial-gradient(circle at 30% 30%, rgba(19, 136, 8, 0.5), transparent 62%);
    animation-delay: 1.4s;
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(0.85rem, 2vw, 1.45rem);
    align-items: center;
}

.hero-copy {
    display: grid;
    align-content: start;
    gap: 0.62rem;
}

.hero-brand-row {
    display: grid;
    gap: 0.48rem;
    width: min(100%, 680px);
    justify-items: center;
}

.hero-brand-logo {
    width: clamp(70px, 8.5vw, 98px);
    height: auto;
    filter: drop-shadow(0 14px 28px rgba(34, 99, 255, 0.26));
    justify-self: center;
}

.hero-typing-line {
    margin: 0;
    width: 100%;
    border: 1px solid var(--landing-border);
    border-radius: 14px;
    background: var(--landing-surface-soft);
    box-shadow: var(--shadow-xs);
    padding: 0.42rem 0.7rem;
    text-align: center;
    font-size: clamp(0.84rem, 1.35vw, 0.96rem);
    font-weight: 700;
    color: var(--text-soft);
    letter-spacing: 0.01em;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

.landing-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border: 1px solid var(--landing-border);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    background: var(--landing-surface-soft);
    color: var(--text-soft);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
}

.hero-copy h1 {
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 2.65rem);
    line-height: 1.06;
    color: var(--text-strong);
    max-width: 16ch;
    font-weight: 800;
    letter-spacing: 0;
}

.hero-subheadline {
    margin: 0;
    color: var(--text-soft);
    font-size: clamp(0.96rem, 1.7vw, 1.03rem);
    line-height: 1.55;
    max-width: 56ch;
    font-weight: 500;
}

.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.hero-cta-group .btn {
    border-radius: 999px;
    min-height: 44px;
    padding-inline: 1.15rem;
}

.hero-secondary-link {
    display: inline-block;
    margin-top: 0.7rem;
    color: var(--brand-2);
    font-weight: 700;
    text-underline-offset: 0.2em;
}

.hero-secondary-link:focus-visible {
    outline: 3px solid var(--brand-2);
    outline-offset: 3px;
    border-radius: 3px;
}

.hero-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    border: 1px solid var(--landing-border);
    border-radius: 999px;
    background: var(--landing-surface-soft);
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.38rem 0.72rem;
}

.hero-chip i {
    color: var(--brand-1);
}

.hero-legal-links {
    margin-top: 0.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hero-legal-links a {
    color: var(--text-soft);
    font-weight: 700;
    font-size: 0.84rem;
}

.hero-legal-links a:hover {
    color: var(--brand-1);
}

.hero-preview-wrap {
    display: grid;
    gap: 0.65rem;
    align-content: start;
}

.hero-preview-card {
    border: 1px solid var(--landing-border);
    border-radius: var(--landing-radius-lg);
    background: color-mix(in srgb, var(--landing-surface) 90%, transparent);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
}

.hero-preview-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(34, 99, 255, 0.16), transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}

.hero-preview-card:hover {
    transform: translateY(-3px);
    border-color: var(--landing-border-strong);
    box-shadow: var(--landing-glow);
}

.hero-preview-card:hover::after {
    opacity: 0.22;
}

.hero-preview-main {
    padding: 0.82rem;
}

.hero-preview-main h3 {
    margin: 0.2rem 0 0.65rem;
    font-size: 1.2rem;
}

.preview-kicker {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-weight: 800;
}

.hero-preview-main ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.pricing-saas-strip {
    margin-bottom: 0.9rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.pricing-strip-item {
    border: 1px solid var(--landing-border);
    border-radius: var(--landing-radius-md);
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--landing-surface) 94%, transparent),
        color-mix(in srgb, var(--landing-surface-soft) 90%, transparent)
    );
    box-shadow: var(--shadow-xs);
    padding: 0.82rem;
    display: grid;
    gap: 0.42rem;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
}

.pricing-strip-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
    border-color: var(--landing-border-strong);
}

.pricing-strip-item.premium {
    border-color: color-mix(in srgb, var(--brand-2) 42%, var(--line-soft));
}

.pricing-strip-item.secure {
    border-color: color-mix(in srgb, #16a34a 36%, var(--line-soft));
}

.strip-label {
    width: fit-content;
    border: 1px solid var(--landing-border);
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--landing-surface-soft) 90%, transparent);
}

.pricing-strip-item strong {
    color: var(--text-strong);
    font-size: 0.9rem;
    line-height: 1.45;
}

.pricing-strip-item p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.82rem;
}

.pricing-appline {
    margin: 0.62rem auto 0.35rem;
    width: min(100%, 860px);
    border: 1px solid color-mix(in srgb, var(--brand-2) 38%, var(--line-soft));
    border-radius: 999px;
    padding: 0.58rem 1.1rem;
    color: color-mix(in srgb, var(--brand-2) 66%, var(--text-main));
    background: color-mix(in srgb, var(--brand-2) 12%, transparent);
    font-weight: 800;
    font-size: clamp(1.08rem, 2.8vw, 1.78rem);
    line-height: 1.24;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-preview-main li {
    border: 1px solid var(--landing-border);
    border-radius: var(--landing-radius-sm);
    background: color-mix(in srgb, var(--surface-0) 80%, transparent);
    padding: 0.58rem 0.64rem;
    display: flex;
    gap: 0.58rem;
    align-items: center;
}

.hero-preview-main strong {
    display: block;
    color: var(--text-strong);
    font-size: 0.86rem;
}

.hero-preview-main small {
    display: block;
    margin-top: 0.16rem;
    color: var(--text-soft);
    font-size: 0.77rem;
}

.task-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.task-dot.ai {
    background: #326dff;
}

.task-dot.notes {
    background: #0ea5e9;
}

.task-dot.quiz {
    background: #f97316;
}

.hero-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.hero-preview-card.mini {
    padding: 0.68rem 0.74rem;
    min-height: 96px;
    display: grid;
    align-content: start;
    gap: 0.3rem;
}

.hero-preview-card.mini strong,
.hero-preview-card.mini .mini-title {
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    font-size: clamp(1.05rem, 2.4vw, 1.22rem);
    line-height: 1.3;
    color: var(--text-strong);
}

.mini-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 700;
}

.hero-preview-card.mini small {
    color: var(--text-soft);
    font-size: 0.76rem;
}

.landing-highlights {
    padding: 0.25rem 0 1.8rem;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.highlight-card {
    border: 1px solid var(--landing-border);
    border-radius: var(--landing-radius-md);
    background: var(--landing-surface);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.05rem;
    display: grid;
    gap: 0.38rem;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.highlight-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(34, 99, 255, 0.14), transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}

.highlight-card:hover {
    transform: translateY(-3px);
    border-color: var(--landing-border-strong);
    box-shadow: var(--shadow-md);
}

.highlight-card:hover::after {
    opacity: 0.22;
}

.highlight-card h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-strong);
}

.highlight-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.55;
}

.features-section,
.testimonials-section,
.pricing-section,
.faq-section {
    padding: 1.8rem 0 2.8rem;
}

.section-head {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 1.45rem;
}

.section-badge {
    border: 1px solid var(--landing-border);
    border-radius: 999px;
    padding: 0.38rem 0.8rem;
    display: inline-flex;
    align-items: center;
    color: var(--text-soft);
    background: var(--landing-surface-soft);
    font-size: 0.73rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-weight: 800;
}

.section-title {
    margin: 0.8rem 0 0.48rem;
    font-size: clamp(1.7rem, 4vw, 2.55rem);
    font-weight: 800;
    letter-spacing: 0;
}

.section-subtitle {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.98rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.feature-panel {
    border: 1px solid var(--landing-border);
    border-radius: var(--landing-radius-lg);
    background: var(--landing-surface);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    display: grid;
    gap: 0.6rem;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.feature-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}

.feature-panel:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--landing-border-strong);
}

.feature-panel:hover::after {
    opacity: 0.22;
}

.feature-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.15rem;
}

.tone-ai {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.tone-notes {
    background: linear-gradient(135deg, #0ea5e9, #0f766e);
}

.tone-video {
    background: linear-gradient(135deg, #f97316, #ef4444);
}

.tone-tools {
    background: linear-gradient(135deg, #7c3aed, #1d4ed8);
}

.tone-saarthi {
    background: linear-gradient(135deg, #138808, #f97316);
}

#feature-saarthi {
    grid-column: 1 / -1;
    background: linear-gradient(
        128deg,
        color-mix(in srgb, #138808 13%, var(--surface-0)),
        color-mix(in srgb, #f97316 11%, var(--surface-0))
    );
}

.feature-panel h3 {
    margin: 0;
    font-size: 1.15rem;
}

.feature-panel p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.65;
    font-size: 0.91rem;
}

.feature-link {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    width: fit-content;
    color: var(--brand-1);
    font-weight: 700;
    font-size: 0.88rem;
}

.feature-link i {
    font-size: 0.78rem;
    transition: transform var(--transition-fast);
}

.feature-link:hover i {
    transform: translateX(3px);
}

.saarthi-launch-banner {
    margin-top: 0.95rem;
    border: 1px solid color-mix(in srgb, var(--landing-india-green) 40%, var(--line-soft));
    border-radius: var(--landing-radius-lg);
    padding: clamp(0.95rem, 2vw, 1.2rem);
    background:
        linear-gradient(
            120deg,
            color-mix(in srgb, var(--surface-0) 88%, transparent),
            color-mix(in srgb, var(--surface-1) 84%, transparent)
        ),
        linear-gradient(125deg, rgba(19, 136, 8, 0.14), rgba(249, 115, 22, 0.12));
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
}

.saarthi-launch-banner:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--landing-india-green) 55%, var(--line-soft));
}

.saarthi-launch-banner h3 {
    margin: 0;
    font-size: clamp(1.2rem, 2.6vw, 1.52rem);
    line-height: 1.35;
}

.saarthi-launch-banner p {
    margin: 0.4rem 0 0;
    color: var(--text-soft);
    line-height: 1.6;
}

.saarthi-launch-banner .btn {
    border-radius: 999px;
    min-height: 46px;
    white-space: nowrap;
}

.split-showcase {
    margin-top: 0.95rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.split-panel {
    border: 1px solid var(--landing-border);
    border-radius: var(--landing-radius-lg);
    background: var(--landing-surface);
    box-shadow: var(--shadow-sm);
    padding: clamp(1rem, 3vw, 1.35rem);
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
}

.split-panel:hover {
    transform: translateY(-3px);
    border-color: var(--landing-border-strong);
    box-shadow: var(--shadow-md);
}

.split-panel.left {
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--brand-1) 16%, var(--surface-0)),
        color-mix(in srgb, var(--brand-2) 14%, var(--surface-0))
    );
}

.split-panel.right {
    background: linear-gradient(
        120deg,
        color-mix(in srgb, #f97316 14%, var(--surface-0)),
        color-mix(in srgb, #14b8a6 12%, var(--surface-0))
    );
}

.ey-label {
    display: inline-block;
    margin-bottom: 0.6rem;
    color: var(--text-soft);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}

.split-panel h3 {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.35;
}

.split-panel p {
    margin: 0.55rem 0 0;
    color: var(--text-soft);
    line-height: 1.62;
    font-size: 0.9rem;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.testimonial-card {
    border: 1px solid var(--landing-border);
    border-radius: var(--landing-radius-md);
    background: var(--landing-surface);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    display: grid;
    gap: 0.8rem;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.testimonial-card::before {
    content: "\201C";
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 2.4rem;
    color: color-mix(in srgb, var(--brand-1) 30%, transparent);
    opacity: 0.35;
}

.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--landing-border-strong);
}

.testimonial-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #fff;
    background: var(--button-gradient);
    box-shadow: var(--glow-brand);
}

.testimonial-head h3 {
    margin: 0;
    font-size: 0.92rem;
}

.testimonial-head p {
    margin: 0.14rem 0 0;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.testimonial-card > p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.7;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.pricing-card {
    position: relative;
    border: 1px solid var(--landing-border);
    border-radius: var(--landing-radius-lg);
    background: var(--landing-surface);
    box-shadow: var(--shadow-sm);
    padding: 1.15rem;
    display: grid;
    gap: 0.9rem;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
}

.pricing-card.featured::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.6), rgba(34, 99, 255, 0.5));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.pricing-card:hover {
    transform: translateY(-4px);
    border-color: var(--landing-border-strong);
    box-shadow: var(--shadow-md);
}

.pricing-card.featured {
    border-color: color-mix(in srgb, var(--brand-2) 56%, var(--line-soft));
    box-shadow: 0 20px 54px rgba(63, 47, 140, 0.22);
}

.popular-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--button-gradient);
    color: #fff;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    padding: 0.35rem 0.72rem;
}

.pricing-card h3 {
    margin: 0;
    font-size: 1.24rem;
}


.plan-kicker {
    margin: 0;
    width: fit-content;
    border: 1px solid var(--landing-border);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    color: var(--text-soft);
    background: var(--landing-surface-soft);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
}

.price {
    margin: 0;
    font-size: 2rem;
    line-height: 1;
    color: var(--text-strong);
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
}

.price small {
    font-size: 0.86rem;
    color: var(--text-muted);
    font-family: "Manrope", "Segoe UI", sans-serif;
}

.pricing-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.pricing-card li {
    position: relative;
    padding-left: 1.2rem;
    color: var(--text-soft);
    font-size: 0.88rem;
}

.pricing-card li::before {
    content: "";
    position: absolute;
    top: 0.45rem;
    left: 0.2rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-1);
}

.plan-footnote {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.83rem;
    line-height: 1.5;
}

.faq-item {
    border-radius: var(--landing-radius-md) !important;
    border: 1px solid var(--landing-border) !important;
    background: var(--landing-surface) !important;
    box-shadow: var(--shadow-xs);
    margin-bottom: 0.7rem;
}

.faq-item .accordion-button {
    border-radius: var(--landing-radius-md) !important;
    font-weight: 700;
    color: var(--text-strong);
    background: transparent;
    box-shadow: none;
}

.faq-item .accordion-button:not(.collapsed) {
    color: var(--brand-1);
    background: color-mix(in srgb, var(--brand-1) 8%, transparent);
}

.faq-item .accordion-body {
    color: var(--text-soft);
    line-height: 1.7;
    font-size: 0.92rem;
}

body.page-index [data-scroll-reveal] {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
    transition:
        opacity 0.6s var(--ease-standard),
        transform 0.6s var(--ease-standard);
    transition-delay: var(--reveal-delay, 0ms);
}

body.page-index [data-scroll-reveal].is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

body.page-index :is(#loginModal, #signupModal) .modal-dialog {
    max-width: min(1020px, calc(100vw - 1.8rem));
    max-height: calc(100vh - 1rem);
}

body.page-index :is(#loginModal, #signupModal) .premium-auth-modal {
    position: relative;
    overflow: hidden;
    max-height: min(92vh, 820px);
    border: 1px solid var(--landing-border-strong);
    border-radius: 26px;
    background:
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--surface-0) 96%, transparent),
            color-mix(in srgb, var(--surface-1) 90%, transparent)
        ),
        linear-gradient(
            130deg,
            color-mix(in srgb, var(--brand-1) 10%, transparent),
            color-mix(in srgb, var(--brand-2) 8%, transparent)
        );
    box-shadow: 0 28px 70px rgba(8, 18, 45, 0.32);
}

body.page-index :is(#loginModal, #signupModal) .premium-auth-modal::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #ff9933, #f4f4f5 35%, #138808 72%, #2263ff);
    z-index: 2;
}

body.page-index :is(#loginModal, #signupModal) .btn-close-premium {
    top: 0.8rem;
    right: 0.8rem;
    width: 36px;
    height: 36px;
    border-color: color-mix(in srgb, var(--brand-1) 25%, var(--line-soft));
    background: color-mix(in srgb, var(--surface-0) 92%, transparent);
    color: var(--text-soft);
}

body.page-index :is(#loginModal, #signupModal) .auth-banner-gradient {
    min-height: 100%;
    background:
        radial-gradient(circle at 8% 8%, rgba(255, 255, 255, 0.2), transparent 34%),
        radial-gradient(circle at 92% 88%, rgba(255, 255, 255, 0.16), transparent 30%),
        linear-gradient(155deg, #1f62ff 0%, #5d42ef 48%, #25c4e9 100%);
}

body.page-index :is(#loginModal, #signupModal) .auth-banner-gradient.signup-gradient {
    background:
        radial-gradient(circle at 8% 8%, rgba(255, 255, 255, 0.2), transparent 34%),
        radial-gradient(circle at 92% 88%, rgba(255, 255, 255, 0.16), transparent 30%),
        linear-gradient(155deg, #0f8c6a 0%, #2563eb 52%, #6d3bf8 100%);
}

body.page-index :is(#loginModal, #signupModal) .auth-banner-content {
    padding: 1.65rem 1.4rem;
    gap: 1rem;
}

body.page-index :is(#loginModal, #signupModal) .auth-banner-title {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.15;
}

body.page-index :is(#loginModal, #signupModal) .auth-banner-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.55;
}

body.page-index :is(#loginModal, #signupModal) .auth-features {
    display: grid;
    gap: 0.52rem;
}

body.page-index :is(#loginModal, #signupModal) .auth-feature-item {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.84rem;
    line-height: 1.45;
}

body.page-index :is(#loginModal, #signupModal) .auth-feature-item i {
    margin-top: 0.08rem;
}

body.page-index :is(#loginModal, #signupModal) .auth-form-container {
    height: 100%;
    max-height: min(92vh, 820px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.45rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.9rem;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--surface-0) 96%, transparent),
        color-mix(in srgb, var(--surface-1) 90%, transparent)
    );
}

body.page-index :is(#loginModal, #signupModal) .auth-mobile-glance {
    border: 1px solid var(--landing-border);
    border-radius: 14px;
    padding: 0.62rem 0.78rem;
    background: color-mix(in srgb, var(--brand-1) 9%, var(--surface-0));
}

body.page-index :is(#loginModal, #signupModal) .auth-mobile-glance strong {
    color: var(--text-strong);
    font-size: 0.92rem;
}

body.page-index :is(#loginModal, #signupModal) .auth-mobile-glance p {
    margin: 0.18rem 0 0;
    color: var(--text-soft);
    font-size: 0.8rem;
    line-height: 1.45;
}

body.page-index :is(#loginModal, #signupModal) .signup-mobile-glance {
    background: color-mix(in srgb, #0f8c6a 10%, var(--surface-0));
}

body.page-index :is(#loginModal, #signupModal) .auth-header {
    display: grid;
    gap: 0.4rem;
}

body.page-index :is(#loginModal, #signupModal) .auth-title {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    line-height: 1.12;
    color: var(--text-strong);
}

body.page-index :is(#loginModal, #signupModal) .auth-description {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.55;
}

body.page-index :is(#loginModal, #signupModal) .auth-top-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    margin-top: 0.2rem;
}

body.page-index :is(#loginModal, #signupModal) .auth-top-badges span {
    border: 1px solid var(--landing-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
    color: var(--text-soft);
    font-size: 0.71rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.22rem 0.54rem;
}

body.page-index :is(#loginModal, #signupModal) .auth-top-badges i {
    color: var(--brand-1);
}

body.page-index :is(#loginModal, #signupModal) .auth-form-premium {
    border: 1px solid var(--landing-border);
    border-radius: 16px;
    padding: 0.92rem;
    background: color-mix(in srgb, var(--surface-0) 92%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body.page-index :is(#loginModal, #signupModal) .form-group-modern {
    margin-bottom: 0.85rem;
}

body.page-index :is(#loginModal, #signupModal) .form-label-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    margin-bottom: 0.36rem;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

body.page-index :is(#loginModal, #signupModal) .label-icon {
    color: var(--brand-1);
    font-size: 0.8rem;
}

body.page-index :is(#loginModal, #signupModal) .input-wrapper-modern {
    position: relative;
}

body.page-index :is(#loginModal, #signupModal) .form-input-modern {
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--line-soft) 92%, var(--brand-1) 8%);
    background: color-mix(in srgb, var(--surface-0) 96%, transparent);
    color: var(--text-strong);
}

body.page-index :is(#loginModal, #signupModal) .form-input-modern:focus {
    border-color: color-mix(in srgb, var(--brand-1) 56%, var(--line-soft));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-1) 18%, transparent);
    outline: none;
}

body.page-index :is(#loginModal, #signupModal) .input-border-effect {
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: border-color var(--transition-fast);
}

body.page-index
    :is(#loginModal, #signupModal)
    .input-wrapper-modern:focus-within
    .input-border-effect {
    border-color: color-mix(in srgb, var(--brand-3) 44%, transparent);
}

body.page-index :is(#loginModal, #signupModal) .password-toggle {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--surface-muted) 78%, transparent);
    color: var(--text-muted);
}

body.page-index :is(#loginModal, #signupModal) .password-toggle:hover {
    border-color: var(--landing-border);
    color: var(--brand-1);
}

body.page-index :is(#loginModal, #signupModal) .form-options {
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.page-index :is(#loginModal, #signupModal) .custom-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--text-soft);
    cursor: pointer;
}

body.page-index :is(#loginModal, #signupModal) .custom-checkbox input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

body.page-index :is(#loginModal, #signupModal) .checkmark {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1px solid var(--landing-border);
    border-radius: 4px;
    background: color-mix(in srgb, var(--surface-0) 90%, transparent);
}

body.page-index :is(#loginModal, #signupModal) .custom-checkbox input:checked + .checkmark {
    border-color: transparent;
    background: var(--button-gradient);
}

body.page-index :is(#loginModal, #signupModal) .custom-checkbox input:checked + .checkmark::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #fff;
}

body.page-index :is(#loginModal, #signupModal) .checkbox-label {
    font-size: 0.84rem;
    line-height: 1.45;
}

body.page-index :is(#loginModal, #signupModal) .forgot-link,
body.page-index :is(#loginModal, #signupModal) .auth-link {
    color: var(--brand-1);
    font-weight: 700;
    text-decoration: none;
}

body.page-index :is(#loginModal, #signupModal) .forgot-link:hover,
body.page-index :is(#loginModal, #signupModal) .auth-link:hover {
    color: color-mix(in srgb, var(--brand-2) 68%, var(--brand-1));
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.page-index :is(#loginModal, #signupModal) .btn-auth-submit {
    width: 100%;
    min-height: 50px;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--brand-1) 34%, transparent);
}

body.page-index :is(#loginModal, #signupModal) .auth-progress-bar {
    margin-top: 0.62rem;
    height: 5px;
}

body.page-index :is(#loginModal, #signupModal) .auth-divider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.68rem;
    margin: 0.82rem 0;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

body.page-index :is(#loginModal, #signupModal) .auth-divider span {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--landing-border), transparent);
}

body.page-index :is(#loginModal, #signupModal) .btn-google-auth {
    width: 100%;
    min-height: 50px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--landing-border-strong) 78%, var(--line-soft));
    background: color-mix(in srgb, var(--surface-0) 96%, transparent);
    color: var(--text-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

body.page-index :is(#loginModal, #signupModal) .btn-google-auth:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--brand-1) 42%, var(--landing-border-strong));
    background: color-mix(in srgb, var(--surface-0) 82%, var(--brand-1) 6%);
    box-shadow: var(--shadow-xs);
}

body.page-index :is(#loginModal, #signupModal) .btn-google-auth:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

body.page-index :is(#loginModal, #signupModal) .google-logo {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

body.page-index :is(#loginModal, #signupModal) .google-logo svg {
    width: 22px;
    height: 22px;
}

body.page-index :is(#loginModal, #signupModal) .google-btn-loading {
    display: none;
    align-items: center;
    gap: 0.48rem;
}

body.page-index :is(#loginModal, #signupModal) .btn-google-auth.loading .google-btn-text,
body.page-index :is(#loginModal, #signupModal) .btn-google-auth.loading .google-logo {
    display: none;
}

body.page-index :is(#loginModal, #signupModal) .btn-google-auth.loading .google-btn-loading {
    display: inline-flex;
}

body.page-index :is(#loginModal, #signupModal) .auth-footer {
    margin-top: 0.18rem;
    border-top: 1px solid var(--landing-border);
    padding-top: 0.65rem;
}

body.page-index :is(#loginModal, #signupModal) .auth-footer-text {
    margin: 0;
    color: var(--text-soft);
}

body.page-index #loginModal.auth-modal-active .auth-kpi-item,
body.page-index #signupModal.auth-modal-active .auth-kpi-item {
    animation: authLiftIn 0.5s var(--ease-standard) forwards;
}

body.page-index #loginModal.auth-modal-active .auth-kpi-item:nth-child(1),
body.page-index #signupModal.auth-modal-active .auth-kpi-item:nth-child(1) {
    animation-delay: 0.08s;
}

body.page-index #loginModal.auth-modal-active .auth-kpi-item:nth-child(2),
body.page-index #signupModal.auth-modal-active .auth-kpi-item:nth-child(2) {
    animation-delay: 0.16s;
}

body.page-index #loginModal.auth-modal-active .auth-kpi-item:nth-child(3),
body.page-index #signupModal.auth-modal-active .auth-kpi-item:nth-child(3) {
    animation-delay: 0.24s;
}

.auth-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.auth-kpi-item {
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 0.26rem 0.56rem;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.btn-close-premium {
    position: absolute;
    top: 0.72rem;
    right: 0.72rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--surface-0) 88%, transparent);
    color: var(--text-soft);
    display: grid;
    place-items: center;
    z-index: 3;
}

.auth-inline-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.auth-flex-input {
    min-width: 0;
}

.auth-inline-row .btn {
    min-height: 44px;
    white-space: nowrap;
}

.auth-submessage-inline {
    align-self: center;
}

.auth-submessage-spaced {
    margin-top: 6px;
}

.auth-legal-link {
    color: var(--brand-1);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 700;
}

.auth-legal-link:hover {
    color: color-mix(in srgb, var(--brand-2) 66%, var(--brand-1));
}

.auth-feature-item {
    opacity: 0;
    transform: translateY(8px);
}

#loginModal .premium-auth-modal,
#signupModal .premium-auth-modal {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
    filter: blur(4px);
    transition:
        opacity 0.42s var(--ease-standard),
        transform 0.42s var(--ease-standard),
        filter 0.42s var(--ease-standard);
}

#loginModal.show .premium-auth-modal,
#signupModal.show .premium-auth-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

#loginModal.auth-modal-active .auth-feature-item,
#signupModal.auth-modal-active .auth-feature-item {
    animation: authLiftIn 0.55s var(--ease-standard) forwards;
}

.floating-shapes .shape {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    animation: shapeFloat 5s ease-in-out infinite;
}

.shape-1 {
    width: 54px;
    height: 54px;
    right: 12%;
    top: 14%;
}

.shape-2 {
    width: 30px;
    height: 30px;
    right: 24%;
    bottom: 26%;
    animation-delay: 0.7s;
}

.shape-3 {
    width: 24px;
    height: 24px;
    right: 10%;
    bottom: 10%;
    animation-delay: 1.4s;
}

@keyframes authLiftIn {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shapeFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes heroOrbFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-8px) scale(1.04);
    }
}

@media (max-width: 1200px) {
    .highlights-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .testimonials-grid,
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-index .public-page-switcher {
        width: min(100%, calc(100% - 1.4rem));
    }
}

@media (max-width: 991px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy h1 {
        max-width: 100%;
    }

    .hero-preview-main,
    .hero-preview-card.mini {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .feature-grid,
    .split-showcase {
        grid-template-columns: 1fr;
    }

    .saarthi-launch-banner {
        grid-template-columns: 1fr;
    }

    .pricing-saas-strip {
        grid-template-columns: 1fr;
    }

    body.page-index :is(#loginModal, #signupModal) .modal-dialog {
        max-width: calc(100vw - 1rem);
        margin: 0.5rem auto;
    }

    body.page-index :is(#loginModal, #signupModal) .premium-auth-modal {
        border-radius: 18px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-form-container {
        padding: 1.05rem;
    }
}

@media (max-width: 768px) {
    body.page-index .main-content {
        padding-top: 0.55rem;
    }

    .landing-hero-shell {
        border-radius: 22px;
        padding: 1rem;
    }

    .hero-cta-group {
        gap: 0.55rem;
    }

    .hero-cta-group .btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .hero-mini-grid {
        grid-template-columns: 1fr;
    }

    .pricing-strip-item {
        padding: 0.72rem;
    }

    .saarthi-launch-banner .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-brand-logo {
        width: 88px;
    }

    body.page-index .public-page-switcher {
        top: calc(var(--header-height) + 0.32rem);
        margin-bottom: 0.72rem;
    }

    body.page-index .public-page-switcher .page-switcher-link {
        min-width: 112px;
        justify-content: center;
    }

    .highlights-grid,
    .testimonials-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .highlight-card,
    .feature-panel,
    .split-panel,
    .testimonial-card,
    .pricing-card {
        border-radius: 14px;
    }

    #autoLogoutBanner {
        width: calc(100% - 1rem);
    }
}

/* Keep the primary hero actions clear of the fixed chat launcher on short
   mobile viewports while retaining comfortable, full-width actions on taller
   phones. */
@media (max-width: 768px) and (max-height: 700px) {
    body.page-index .hero-cta-group {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }

    body.page-index .hero-cta-group .btn:not([hidden]) {
        min-width: 0;
        padding-inline: 0.5rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }
}

@media (max-width: 360px) and (max-height: 700px) {
    body.page-index .hero-cta-group {
        margin-right: 0.5rem;
    }

    body.page-index .hero-cta-group .btn:not([hidden]) {
        padding-inline: 0.3rem;
        font-size: 0.82rem;
    }
}

@media (max-width: 576px) {
    .hero-brand-row {
        width: 100%;
    }

    .hero-copy h1 {
        font-size: clamp(1.68rem, 8vw, 2.1rem);
    }

    .hero-subheadline {
        font-size: 0.94rem;
        line-height: 1.62;
    }

    .hero-chip {
        font-size: 0.74rem;
    }

    .section-title {
        font-size: clamp(1.45rem, 7vw, 1.88rem);
    }

    .price {
        font-size: 1.76rem;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-form-premium {
        padding: 0.78rem;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-form-container {
        max-height: calc(100svh - 1rem);
        padding: 0.9rem;
        justify-content: flex-start;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-inline-row {
        grid-template-columns: 1fr;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-inline-row .btn {
        width: 100%;
    }

    body.page-index :is(#loginModal, #signupModal) .form-options {
        flex-direction: column;
        align-items: flex-start;
    }

    body.page-index .public-page-switcher {
        width: calc(100% - 1.1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-index [data-scroll-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero-orb,
    .landing-hero-shell::after {
        animation: none;
    }
}

/* Auth surfaces: keep the forms readable, scrollable, and usable at every height. */
body.page-index :is(#loginModal, #signupModal) .auth-experience-modal {
    max-height: min(880px, calc(100dvh - 2rem));
    overflow: hidden;
    background: var(--surface-0);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.page-index :is(#loginModal, #signupModal) .auth-shell {
    min-height: 0;
    max-height: inherit;
    grid-template-columns: minmax(0, 1.08fr) minmax(270px, 0.92fr);
}

body.page-index :is(#loginModal, #signupModal) .auth-primary-panel {
    min-width: 0;
    min-height: 0;
    max-height: min(880px, calc(100dvh - 2rem));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: clamp(24px, 3vw, 40px);
    background: var(--surface-0);
}

body.page-index :is(#loginModal, #signupModal) .auth-header {
    gap: 10px;
    padding-right: 38px;
}

body.page-index :is(#loginModal, #signupModal) .auth-title {
    max-width: 13ch;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.08;
}

body.page-index :is(#loginModal, #signupModal) .auth-description {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.94rem;
}

body.page-index :is(#loginModal, #signupModal) .auth-form-premium {
    gap: 14px;
}

body.page-index :is(#loginModal, #signupModal) .form-input-modern {
    border-color: var(--line-soft);
    background: var(--surface-1);
    box-shadow: none;
}

body.page-index :is(#loginModal, #signupModal) .form-input-modern:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-1) 40%, transparent);
    outline-offset: 2px;
}

body.page-index :is(#loginModal, #signupModal) .password-toggle:focus-visible,
body.page-index :is(#loginModal, #signupModal) .auth-close-btn:focus-visible,
body.page-index :is(#loginModal, #signupModal) .btn-google-auth:focus-visible,
body.page-index :is(#loginModal, #signupModal) .btn-auth-submit:focus-visible,
body.page-index :is(#loginModal, #signupModal) .auth-link:focus-visible,
body.page-index :is(#loginModal, #signupModal) .forgot-link:focus-visible,
body.page-index :is(#loginModal, #signupModal) .auth-legal-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-1) 50%, transparent);
    outline-offset: 3px;
}

body.page-index :is(#loginModal, #signupModal) .auth-login-options {
    justify-content: flex-end;
}

body.page-index :is(#loginModal, #signupModal) .auth-visual-panel {
    min-width: 0;
    background: linear-gradient(155deg, #12223b 0%, #176c78 55%, #16715d 100%);
}

body.page-index #signupModal .auth-visual-signup {
    background: linear-gradient(155deg, #182342 0%, #3a5381 55%, #276a62 100%);
}

body.page-index .auth-reset-modal {
    max-height: min(760px, calc(100dvh - 2rem));
    overflow-y: auto;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: var(--surface-0);
    color: var(--text-strong);
    box-shadow: 0 24px 72px rgba(15, 23, 42, 0.2);
}

body.page-index .auth-reset-modal .p-4 {
    display: grid;
    gap: 14px;
    padding: clamp(22px, 5vw, 36px) !important;
}

body.page-index .auth-reset-modal h2 {
    margin: 0 !important;
    font-size: 1.7rem;
    line-height: 1.2;
}

body.page-index .auth-reset-modal .text-muted {
    margin: 0;
    color: var(--text-muted) !important;
}

body.page-index .auth-reset-modal .form-label-modern {
    display: block;
    margin-bottom: 7px;
}

body.page-index .auth-reset-modal .form-input-modern {
    width: 100%;
    min-height: 50px;
    padding: 12px 46px 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--surface-1);
    color: var(--text-strong);
    font-size: 16px;
}

body.page-index .auth-reset-modal .btn-close-premium:focus-visible,
body.page-index .auth-reset-modal button:focus-visible,
body.page-index .auth-reset-modal input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-1) 48%, transparent);
    outline-offset: 3px;
}

body.page-index .auth-password-hint {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

body.page-index .auth-reset-modal .auth-password-hint {
    margin-top: -8px;
}

body.page-index .auth-submessage {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    body.page-index :is(#loginModal, #signupModal) .modal-dialog {
        width: calc(100vw - 24px);
        max-width: 560px;
        margin: 12px auto;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-shell {
        display: block;
        max-height: calc(100dvh - 24px);
    }

    body.page-index :is(#loginModal, #signupModal) .auth-visual-panel {
        display: none;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-primary-panel {
        max-height: calc(100dvh - 24px);
        padding: 24px clamp(18px, 6vw, 32px);
        scrollbar-gutter: auto;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-title {
        max-width: 18ch;
        font-size: clamp(1.7rem, 7vw, 2.25rem);
    }

    body.page-index :is(#loginModal, #signupModal) .auth-inline-row {
        grid-template-columns: minmax(0, 1fr) 104px;
        gap: 8px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-inline-row .btn {
        width: auto;
        padding-inline: 8px;
        font-size: 0.86rem;
    }
}

@media (max-width: 359.98px) {
    body.page-index :is(#loginModal, #signupModal) .auth-primary-panel {
        padding: 22px 16px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-inline-row {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-index :is(#loginModal, #signupModal) .auth-inline-row .btn {
        width: 100%;
    }

    body.page-index :is(#loginModal, #signupModal) .password-strength {
        grid-template-columns: 88px minmax(0, 1fr);
    }
}

@media (max-height: 700px) {
    body.page-index :is(#loginModal, #signupModal) .modal-dialog {
        margin-block: 8px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-experience-modal,
    body.page-index :is(#loginModal, #signupModal) .auth-primary-panel {
        max-height: calc(100dvh - 16px);
    }

    body.page-index :is(#loginModal, #signupModal) .auth-primary-panel {
        justify-content: flex-start;
        gap: 14px;
    }
}

@media (max-width: 767.98px) {
    body.page-index #resetModal .modal-dialog {
        min-height: 0;
        margin: 8px auto;
        align-items: flex-start;
    }

    body.page-index #resetModal .auth-reset-modal {
        max-height: calc(100dvh - 16px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-index :is(#loginModal, #signupModal) .auth-experience-modal,
    body.page-index :is(#loginModal, #signupModal) .auth-experience-modal * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Premium AI-native authentication */
body.page-index .auth-modal .modal-backdrop,
body.page-index.modal-open .modal-backdrop {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.page-index :is(#loginModal, #signupModal) {
    --auth-radius: 24px;
    --auth-field-height: 56px;
    --auth-panel: color-mix(in srgb, var(--surface-0) 84%, transparent);
    --auth-panel-strong: color-mix(in srgb, var(--surface-0) 94%, transparent);
    --auth-border: color-mix(in srgb, var(--brand-1) 18%, var(--line-soft));
    --auth-border-strong: color-mix(in srgb, var(--brand-1) 36%, var(--line-soft));
    --auth-shadow: 0 34px 100px rgba(15, 23, 42, 0.24);
    --auth-glow: 0 0 0 1px rgba(34, 99, 255, 0.18), 0 24px 70px rgba(34, 99, 255, 0.22);
}

body.page-index :is(#loginModal, #signupModal) .auth-modal-dialog {
    width: min(900px, calc(100vw - 32px));
    max-width: 900px;
    margin: 1rem auto;
}

body.page-index :is(#loginModal, #signupModal) .auth-experience-modal {
    max-height: 90vh;
    overflow: hidden;
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    background:
        linear-gradient(
            140deg,
            color-mix(in srgb, var(--surface-0) 96%, transparent),
            color-mix(in srgb, var(--surface-1) 88%, transparent)
        ),
        radial-gradient(
            circle at 14% 10%,
            color-mix(in srgb, var(--brand-3) 18%, transparent),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 86%,
            color-mix(in srgb, var(--brand-2) 18%, transparent),
            transparent 36%
        );
    box-shadow: var(--auth-shadow);
    backdrop-filter: blur(26px) saturate(1.25);
    -webkit-backdrop-filter: blur(26px) saturate(1.25);
}

body.page-index :is(#loginModal, #signupModal) .auth-experience-modal::before {
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--brand-3),
        var(--brand-1),
        var(--brand-2),
        var(--brand-warm)
    );
}

body.page-index :is(#loginModal, #signupModal) .auth-close-btn {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    z-index: 8;
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--brand-1) 24%, var(--line-soft));
    background: color-mix(in srgb, var(--surface-0) 78%, transparent);
    color: var(--text-soft);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        background var(--transition-fast);
}

body.page-index :is(#loginModal, #signupModal) .auth-close-btn:hover,
body.page-index :is(#loginModal, #signupModal) .auth-close-btn:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--brand-1) 44%, var(--line-soft));
    color: var(--brand-1);
    background: color-mix(in srgb, var(--surface-0) 92%, transparent);
    outline: none;
}

body.page-index :is(#loginModal, #signupModal) .auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr);
    min-height: 480px;
}

body.page-index :is(#loginModal, #signupModal) .auth-primary-panel {
    position: relative;
    z-index: 2;
    height: auto;
    max-height: none;
    overflow: visible;
    justify-content: center;
    gap: 18px;
    padding: clamp(28px, 4vw, 46px);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--surface-0) 90%, transparent),
        color-mix(in srgb, var(--surface-1) 82%, transparent)
    );
}

body.page-index :is(#loginModal, #signupModal) .auth-header {
    display: grid;
    gap: 8px;
    padding-right: 32px;
}

body.page-index :is(#loginModal, #signupModal) .auth-eyebrow {
    margin: 0;
    color: var(--brand-1);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

body.page-index :is(#loginModal, #signupModal) .auth-title {
    max-width: 12ch;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    letter-spacing: 0;
}

body.page-index :is(#loginModal, #signupModal) .auth-description {
    max-width: 52ch;
    font-size: 0.98rem;
    line-height: 1.58;
}

body.page-index :is(#loginModal, #signupModal) .auth-form-premium {
    display: grid;
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.page-index :is(#loginModal, #signupModal) .auth-fields {
    display: grid;
    gap: 12px;
}

body.page-index :is(#loginModal, #signupModal) .form-group-modern {
    margin: 0;
}

body.page-index :is(#loginModal, #signupModal) .input-wrapper-modern {
    position: relative;
    border-radius: 16px;
}

body.page-index :is(#loginModal, #signupModal) .auth-floating-field {
    min-height: var(--auth-field-height);
}

body.page-index :is(#loginModal, #signupModal) .auth-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: var(--brand-1);
    transform: translateY(-50%);
    pointer-events: none;
}

body.page-index :is(#loginModal, #signupModal) .auth-input-icon i {
    font-size: 0.9rem;
}

body.page-index :is(#loginModal, #signupModal) .form-input-modern {
    width: 100%;
    min-height: var(--auth-field-height);
    padding: 23px 48px 8px 48px;
    border: 1px solid var(--auth-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-0) 74%, transparent);
    color: var(--text-strong);
    font-size: 16px;
    font-weight: 650;
    letter-spacing: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);
}

body.page-index :is(#loginModal, #signupModal) .form-input-modern:focus {
    border-color: color-mix(in srgb, var(--brand-1) 62%, var(--line-soft));
    background: color-mix(in srgb, var(--surface-0) 92%, transparent);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--brand-1) 14%, transparent),
        0 14px 34px rgba(34, 99, 255, 0.12);
    outline: none;
}

body.page-index :is(#loginModal, #signupModal) .auth-floating-field-password .form-input-modern {
    padding-right: 3rem;
}

body.page-index :is(#loginModal, #signupModal) .form-input-modern.input-error,
body.page-index :is(#loginModal, #signupModal) .input-error .form-input-modern {
    border-color: color-mix(in srgb, #ef4444 74%, var(--line-soft));
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

body.page-index :is(#loginModal, #signupModal) .auth-floating-field .form-label-modern,
body.page-index :is(#loginModal, #signupModal) .auth-inline-field .form-label-modern {
    position: absolute;
    top: 18px;
    left: 48px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0 0.25rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 750;
    text-transform: none;
    letter-spacing: 0;
    pointer-events: none;
    transform-origin: left top;
    transition:
        transform var(--transition-fast),
        color var(--transition-fast),
        opacity var(--transition-fast);
}

body.page-index :is(#loginModal, #signupModal) .auth-floating-field:focus-within .form-label-modern,
body.page-index :is(#loginModal, #signupModal) .auth-floating-field.is-filled .form-label-modern,
body.page-index
    :is(#loginModal, #signupModal)
    .auth-floating-field.is-autofilled
    .form-label-modern,
body.page-index
    :is(#loginModal, #signupModal)
    .auth-floating-field
    .form-input-modern:focus
    + .form-label-modern,
body.page-index
    :is(#loginModal, #signupModal)
    .auth-floating-field
    .form-input-modern:not(:placeholder-shown)
    + .form-label-modern,
body.page-index :is(#loginModal, #signupModal) .auth-inline-field:focus-within .form-label-modern,
body.page-index :is(#loginModal, #signupModal) .auth-inline-field.is-filled .form-label-modern,
body.page-index :is(#loginModal, #signupModal) .auth-inline-field.is-autofilled .form-label-modern,
body.page-index
    :is(#loginModal, #signupModal)
    .auth-inline-field
    .form-input-modern:focus
    + .form-label-modern,
body.page-index
    :is(#loginModal, #signupModal)
    .auth-inline-field
    .form-input-modern:not(:placeholder-shown)
    + .form-label-modern {
    transform: translateY(-11px) scale(0.78);
    color: var(--brand-1);
    opacity: 0.92;
}

body.page-index :is(#loginModal, #signupModal) .input-border-effect {
    display: none;
}

body.page-index :is(#loginModal, #signupModal) .password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-muted) 82%, transparent);
    transform: translateY(-50%);
    z-index: 4;
}

body.page-index :is(#loginModal, #signupModal) .auth-inline-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 10px;
    align-items: stretch;
}

body.page-index :is(#loginModal, #signupModal) .auth-inline-field {
    position: relative;
    min-width: 0;
    min-height: var(--auth-field-height);
}

@keyframes authAutofillStart {
    from {
    }
    to {
    }
}

body.page-index :is(#loginModal, #signupModal) .form-input-modern:-webkit-autofill {
    animation-duration: 0.01s;
    animation-name: authAutofillStart;
    animation-iteration-count: 1;
    -webkit-text-fill-color: var(--text-strong);
    -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--surface-0) 88%, transparent) inset;
    box-shadow: 0 0 0 1000px color-mix(in srgb, var(--surface-0) 88%, transparent) inset;
    caret-color: var(--text-strong);
}

body.page-index
    :is(#loginModal, #signupModal)
    .form-input-modern:-webkit-autofill
    + .form-label-modern {
    transform: translateY(-11px) scale(0.78);
    color: var(--brand-1);
    opacity: 0.92;
}

body.page-index :is(#loginModal, #signupModal) .auth-inline-row .btn {
    min-height: var(--auth-field-height);
    border-radius: 16px;
    font-weight: 800;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--brand-1) 24%, transparent);
}

body.page-index :is(#loginModal, #signupModal) .auth-google-primary {
    min-height: 54px;
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--brand-1) 20%, var(--line-soft));
    background: color-mix(in srgb, var(--surface-0) 82%, transparent);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
    font-size: 1rem;
}

body.page-index :is(#loginModal, #signupModal) .auth-google-primary:hover:not(:disabled),
body.page-index :is(#loginModal, #signupModal) .auth-google-primary:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand-1) 48%, var(--line-soft));
    box-shadow: var(--auth-glow);
    outline: none;
}

body.page-index :is(#loginModal, #signupModal) .auth-divider {
    margin: 0;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.page-index :is(#loginModal, #signupModal) .auth-divider strong {
    white-space: nowrap;
}

body.page-index :is(#loginModal, #signupModal) .form-options {
    margin: 0;
    gap: 10px;
}

body.page-index :is(#loginModal, #signupModal) .custom-checkbox {
    align-items: flex-start;
}

body.page-index :is(#loginModal, #signupModal) .checkmark {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 6px;
}

body.page-index :is(#loginModal, #signupModal) .checkbox-label {
    font-size: 0.88rem;
}

body.page-index :is(#loginModal, #signupModal) .btn-auth-submit {
    min-height: 54px;
    border-radius: 16px;
    box-shadow: 0 18px 44px color-mix(in srgb, var(--brand-1) 30%, transparent);
}

body.page-index :is(#loginModal, #signupModal) .btn-auth-submit:hover:not(:disabled) {
    transform: translateY(-2px);
}

body.page-index :is(#loginModal, #signupModal) .btn-auth-submit.btn-disabled {
    opacity: 0.62;
    filter: saturate(0.8);
}

body.page-index :is(#loginModal, #signupModal) .auth-progress-bar {
    margin: -2px 0 0;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-muted) 68%, transparent);
}

body.page-index :is(#loginModal, #signupModal) .auth-message {
    margin: 0;
    border-radius: 14px;
}

body.page-index :is(#loginModal, #signupModal) .auth-footer {
    margin: 0;
    padding-top: 2px;
    border-top: 0;
}

body.page-index :is(#loginModal, #signupModal) .auth-footer-text {
    font-size: 0.92rem;
}

body.page-index :is(#loginModal, #signupModal) .password-strength {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}

body.page-index :is(#loginModal, #signupModal) .strength-bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

body.page-index :is(#loginModal, #signupModal) .strength-bars .bar {
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

body.page-index
    :is(#loginModal, #signupModal)
    .password-strength.password-weak
    .bar:nth-child(-n + 1) {
    background: #ef4444;
}

body.page-index
    :is(#loginModal, #signupModal)
    .password-strength.password-medium
    .bar:nth-child(-n + 2) {
    background: #f59e0b;
}

body.page-index
    :is(#loginModal, #signupModal)
    .password-strength.password-strong
    .bar:nth-child(-n + 3),
body.page-index :is(#loginModal, #signupModal) .password-strength.password-very-strong .bar {
    background: linear-gradient(90deg, var(--brand-1), var(--brand-3));
}

body.page-index :is(#loginModal, #signupModal) .strength-text {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

body.page-index :is(#loginModal, #signupModal) .auth-visual-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 18px;
    min-height: 100%;
    padding: 44px 34px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 74% 15%, rgba(255, 255, 255, 0.26), transparent 22%),
        radial-gradient(circle at 18% 28%, rgba(45, 212, 255, 0.35), transparent 32%),
        linear-gradient(155deg, #0b1020 0%, #1f54ff 52%, #6e3bf8 100%);
}

body.page-index :is(#loginModal, #signupModal) .auth-visual-signup {
    background:
        radial-gradient(circle at 72% 14%, rgba(255, 255, 255, 0.22), transparent 22%),
        radial-gradient(circle at 16% 24%, rgba(45, 212, 255, 0.32), transparent 32%),
        linear-gradient(155deg, #071421 0%, #0f8c6a 34%, #2263ff 70%, #6e3bf8 100%);
}

body.page-index :is(#loginModal, #signupModal) .auth-visual-panel::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    pointer-events: none;
}

body.page-index :is(#loginModal, #signupModal) .auth-visual-orbit {
    position: absolute;
    top: 54px;
    right: 42px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 58%),
        conic-gradient(
            from 80deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.44),
            rgba(255, 255, 255, 0)
        );
    filter: blur(0.2px);
    animation: authOrbit 8s linear infinite;
}

body.page-index :is(#loginModal, #signupModal) .auth-visual-kicker {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

body.page-index :is(#loginModal, #signupModal) .auth-visual-panel h3 {
    position: relative;
    z-index: 1;
    max-width: 12ch;
    margin: 0;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    line-height: 1.04;
    letter-spacing: 0;
}

body.page-index :is(#loginModal, #signupModal) .auth-workflow-stack,
body.page-index :is(#loginModal, #signupModal) .auth-study-map,
body.page-index :is(#loginModal, #signupModal) .auth-mini-card {
    position: relative;
    z-index: 1;
}

body.page-index :is(#loginModal, #signupModal) .auth-workflow-stack {
    display: grid;
    gap: 10px;
}

body.page-index :is(#loginModal, #signupModal) .auth-workflow-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.page-index :is(#loginModal, #signupModal) .auth-workflow-item i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
}

body.page-index :is(#loginModal, #signupModal) .auth-workflow-item span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.86rem;
}

body.page-index :is(#loginModal, #signupModal) .auth-workflow-item strong {
    color: #fff;
    font-size: 0.78rem;
}

body.page-index :is(#loginModal, #signupModal) .auth-visual-note,
body.page-index :is(#loginModal, #signupModal) .auth-mini-card small {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.86rem;
    line-height: 1.6;
}

body.page-index :is(#loginModal, #signupModal) .auth-study-map {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body.page-index :is(#loginModal, #signupModal) .auth-study-map span,
body.page-index :is(#loginModal, #signupModal) .auth-mini-card {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.page-index :is(#loginModal, #signupModal) .auth-study-map span {
    border-radius: 14px;
    padding: 8px 10px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
}

body.page-index :is(#loginModal, #signupModal) .auth-study-map i {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.78rem;
}

body.page-index :is(#loginModal, #signupModal) .auth-mini-card {
    display: grid;
    gap: 4px;
    border-radius: 18px;
    padding: 14px;
}

body.page-index :is(#loginModal, #signupModal) .auth-mini-card span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

body.page-index :is(#loginModal, #signupModal) .auth-mini-card strong {
    color: #fff;
    font-size: 0.98rem;
}

body.page-index
    #loginModal.auth-modal-active
    :is(
        .auth-eyebrow,
        .auth-title,
        .auth-description,
        .auth-form-premium,
        .auth-footer,
        .auth-visual-panel > *
    ),
body.page-index
    #signupModal.auth-modal-active
    :is(
        .auth-eyebrow,
        .auth-title,
        .auth-description,
        .auth-form-premium,
        .auth-footer,
        .auth-visual-panel > *
    ) {
    animation: authLiftIn 0.48s var(--ease-standard) both;
}

body.page-index #loginModal.auth-modal-active .auth-title,
body.page-index #signupModal.auth-modal-active .auth-title {
    animation-delay: 0.04s;
}

body.page-index #loginModal.auth-modal-active .auth-description,
body.page-index #signupModal.auth-modal-active .auth-description {
    animation-delay: 0.08s;
}

body.page-index #loginModal.auth-modal-active .auth-form-premium,
body.page-index #signupModal.auth-modal-active .auth-form-premium {
    animation-delay: 0.12s;
}

body.page-index #loginModal.auth-modal-active .auth-footer,
body.page-index #signupModal.auth-modal-active .auth-footer {
    animation-delay: 0.16s;
}

/* ===================================================================
   SIGNUP MODAL = LOGIN MODAL (unified)
   Signup now shares the same modal chrome, form styling, spacing,
   typography, button style, shadows, corner radius and interaction
   behavior as the login modal via the :is(#loginModal,#signupModal)
   rules above. Only the right-hand showcase CONTENT differs; it is
   styled below to sit cohesively on the shared gradient visual panel.
   =================================================================== */

body.page-index :is(#loginModal, #signupModal) .auth-visual-signup {
    justify-content: space-between;
    gap: 14px;
}

@media (min-width: 992px) {
    body.page-index #signupModal .auth-visual-signup {
        padding: 40px 30px;
    }
}

.svp-section {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.svp-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.74);
}

.svp-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7dd3fc;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.28);
    animation: svpLivePulse 2.4s ease-in-out infinite;
}

@keyframes svpLivePulse {
    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.28);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(125, 211, 252, 0.08);
    }
}

.svp-convo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.svp-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.svp-msg-user {
    flex-direction: row-reverse;
}

.svp-ai-pip {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: linear-gradient(135deg, #60a5fa, #a855f7);
    flex-shrink: 0;
    align-self: flex-start;
}

.svp-bubble {
    max-width: 86%;
    padding: 9px 12px;
    border-radius: 13px;
    font-size: 0.84rem;
    line-height: 1.5;
    font-weight: 500;
}

.svp-msg-user .svp-bubble {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.86);
    border-bottom-right-radius: 5px;
}

.svp-msg-ai .svp-bubble {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-bottom-left-radius: 5px;
}

.svp-section-journey {
    gap: 10px;
}
.svp-journey {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.svp-section-journey .svp-step {
    padding: 6px 11px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.svp-section-journey .svp-step-end {
    border-color: rgba(110, 231, 183, 0.45);
    background: rgba(110, 231, 183, 0.18);
    color: #d1fae5;
}

.svp-arrow {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

.svp-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.svp-card-top {
    display: flex;
    align-items: center;
    gap: 9px;
}

.svp-card-crown {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(255, 214, 102, 0.22);
    border: 1px solid rgba(255, 214, 102, 0.4);
    color: #ffe08a;
    font-size: 0.74rem;
    flex-shrink: 0;
}

.svp-card-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
}

.svp-card-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 10px;
}

.svp-card-features li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.3;
}

.svp-card-features li i {
    color: #6ee7b7;
    font-size: 0.64rem;
    flex-shrink: 0;
}

.svp-card-trust {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.66);
    text-align: right;
}

@media (prefers-reduced-motion: reduce) {
    .svp-live-dot {
        animation: none;
    }
}

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

@media (max-width: 991px) {
    body.page-index :is(#loginModal, #signupModal) .auth-modal-dialog {
        width: min(640px, calc(100vw - 18px));
        margin: 0.6rem auto;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-visual-panel {
        display: none;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-primary-panel {
        padding: clamp(22px, 5vw, 34px);
    }

    body.page-index :is(#loginModal, #signupModal) .auth-title {
        max-width: 14ch;
    }
}

@media (max-width: 576px) {
    body.page-index :is(#loginModal, #signupModal) {
        --auth-radius: 24px;
        --auth-field-height: 50px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-modal-dialog {
        width: 100%;
        max-width: 100%;
        min-height: 100svh;
        margin: 0;
        align-items: flex-end;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-experience-modal {
        width: 100%;
        max-height: calc(100svh - 8px);
        border-radius: 24px 24px 0 0;
        overflow: auto;
        scrollbar-width: none;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-experience-modal::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-primary-panel {
        min-height: auto;
        padding: 22px 18px 18px;
        gap: 14px;
        justify-content: flex-start;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-header {
        gap: 5px;
        padding-right: 42px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-eyebrow {
        font-size: 0.7rem;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-title {
        max-width: 100%;
        font-size: clamp(1.58rem, 7vw, 2rem);
        line-height: 1.05;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-description {
        font-size: 0.86rem;
        line-height: 1.42;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-form-premium {
        gap: 10px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-fields {
        gap: 10px;
    }

    body.page-index :is(#loginModal, #signupModal) .form-input-modern {
        min-height: var(--auth-field-height);
        padding: 20px 44px 8px 44px;
        border-radius: 14px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-input-icon {
        left: 14px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-floating-field .form-label-modern,
    body.page-index :is(#loginModal, #signupModal) .auth-inline-field .form-label-modern {
        top: 15px;
        left: 44px;
        font-size: 0.84rem;
    }

    body.page-index
        :is(#loginModal, #signupModal)
        .auth-floating-field-password
        .form-input-modern {
        padding-right: 2.75rem;
    }

    body.page-index :is(#loginModal, #signupModal) .password-toggle {
        right: 6px;
        width: 36px;
        height: 36px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-google-primary,
    body.page-index :is(#loginModal, #signupModal) .btn-auth-submit {
        min-height: 50px;
        border-radius: 14px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-divider {
        gap: 8px;
        font-size: 0.62rem;
    }

    body.page-index :is(#loginModal, #signupModal) .form-options {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }

    body.page-index :is(#loginModal, #signupModal) .checkbox-label,
    body.page-index :is(#loginModal, #signupModal) .forgot-link,
    body.page-index :is(#loginModal, #signupModal) .auth-footer-text {
        font-size: 0.82rem;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-inline-row {
        grid-template-columns: minmax(0, 1fr) 104px;
        gap: 8px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-inline-row .btn {
        min-height: var(--auth-field-height);
        border-radius: 14px;
        padding-inline: 8px;
        font-size: 0.78rem;
    }

    body.page-index :is(#loginModal, #signupModal) .password-strength {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 8px;
        margin-top: 6px;
    }

    body.page-index :is(#loginModal, #signupModal) .strength-text {
        font-size: 0.68rem;
        line-height: 1.25;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-close-btn {
        top: 14px;
        right: 14px;
    }
}

@media (max-width: 360px) {
    body.page-index :is(#loginModal, #signupModal) .auth-primary-panel {
        padding: 18px 14px 14px;
        gap: 10px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-description {
        display: none;
    }

    body.page-index :is(#loginModal, #signupModal) .form-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-inline-row {
        grid-template-columns: 1fr;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-inline-row .btn {
        width: 100%;
    }
}

/* ── Highlight card icons ── */
.highlight-icon {
    font-size: 1.35rem;
    color: var(--brand-1);
    opacity: 0.85;
    margin-bottom: 0.1rem;
}

/* ── Hero headline gradient accent ── */
.hero-copy h1 {
    background: linear-gradient(
        135deg,
        var(--text-strong) 60%,
        color-mix(in srgb, var(--brand-1) 72%, var(--text-strong))
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dark mode: keep gradient readable */
body.dark-mode .hero-copy h1 {
    background: linear-gradient(135deg, #fff 55%, color-mix(in srgb, var(--brand-3) 80%, #fff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Pricing appline tweak — tighter on mobile ── */
@media (max-width: 576px) {
    .pricing-appline {
        font-size: clamp(0.92rem, 4.5vw, 1.2rem);
        padding: 0.48rem 0.9rem;
    }
}

/* ── Feature panel icon: tighter gap on hover ── */
.feature-panel:hover .feature-icon {
    box-shadow: 0 8px 22px rgba(34, 99, 255, 0.28);
    transform: translateY(-2px);
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

/* ── Highlight card: icon-led layout ── */
.highlight-card {
    gap: 0.5rem;
}

/* ═══════════════════════════════════════
   MOTION LAYER — premium micro-interactions
   GPU-accelerated, transform+opacity only
   ═══════════════════════════════════════ */

/* ── 1. Shine sweep on primary CTA buttons ── */
.btn-gradient-primary {
    position: relative;
    overflow: hidden;
}
.btn-gradient-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    pointer-events: none;
    transition: none;
}
.btn-gradient-primary:hover::after {
    transform: translateX(200%);
    transition: transform 0.55s ease;
}

/* ── 2. Glow pulse on primary CTA (hero only) ── */
.hero-cta-group .btn-gradient-primary {
    animation: ctaGlowPulse 3.2s ease-in-out infinite;
}
@keyframes ctaGlowPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(34, 99, 255, 0);
    }
    50% {
        box-shadow:
            0 0 0 8px rgba(34, 99, 255, 0.15),
            0 18px 40px rgba(34, 99, 255, 0.22);
    }
}
.hero-cta-group .btn-gradient-primary:hover {
    animation: none;
    box-shadow:
        0 0 0 8px rgba(34, 99, 255, 0.18),
        0 20px 44px rgba(34, 99, 255, 0.28);
    transform: translateY(-2px);
}

/* ── 3. Magnetic button base (JS adds transform) ── */
.btn-magnetic {
    transition:
        transform 0.18s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow var(--transition-fast);
    will-change: transform;
}

/* ── 4. Card border glow on hover — feature panels ── */
.feature-panel {
    transition:
        transform 0.28s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}
.feature-panel:hover {
    border-color: color-mix(in srgb, var(--brand-1) 50%, var(--landing-border));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--brand-1) 24%, transparent),
        var(--shadow-md);
}

/* ── 5. Pricing card scale + spotlight ── */
.pricing-card {
    transition:
        transform 0.28s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.28s ease,
        border-color 0.28s ease;
    will-change: transform;
}
.pricing-card:hover {
    transform: translateY(-6px) scale(1.012);
}
.pricing-card.featured:hover {
    box-shadow:
        0 28px 64px rgba(63, 47, 140, 0.3),
        0 0 0 1px color-mix(in srgb, var(--brand-2) 50%, transparent);
}

/* ── 6. Highlight card stagger entrance ── */
.highlight-card {
    transition:
        transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}
.highlight-card:hover {
    transform: translateY(-4px);
    border-color: var(--landing-border-strong);
    box-shadow: var(--shadow-md);
}

/* ── 7. Testimonial card tilt container ── */
.testimonial-card {
    will-change: transform;
    transition:
        transform 0.28s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

/* ── 8. Mouse-follow ambient glow ── */
#mouseGlow {
    position: fixed;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 99, 255, 0.06) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease;
    will-change: transform;
}

/* ── 9. Floating ambient orb behind hero ── */
@keyframes ambientDrift {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(18px, -14px) scale(1.04);
    }
    66% {
        transform: translate(-12px, 10px) scale(0.97);
    }
}
.hero-orb.saffron {
    animation: ambientDrift 9s ease-in-out infinite;
}
.hero-orb.green {
    animation: ambientDrift 11s ease-in-out infinite reverse;
}

/* ── 10. Staggered reveal: section cards ── */
.highlights-grid .highlight-card,
.testimonials-grid .testimonial-card,
.pricing-grid .pricing-card {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.55s var(--ease-standard),
        transform 0.55s var(--ease-standard);
}
.highlights-grid .highlight-card.is-visible,
.testimonials-grid .testimonial-card.is-visible,
.pricing-grid .pricing-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── 11. Text reveal for section titles ── */
.section-title {
    overflow: hidden;
}
.section-title .line-inner {
    display: block;
    transform: translateY(100%);
    opacity: 0;
    transition:
        transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.62s ease;
}
.section-title.is-visible .line-inner {
    transform: translateY(0);
    opacity: 1;
}

/* ── 12. Hero preview card glass reflection ── */
.hero-preview-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    transform: skewX(-12deg);
    pointer-events: none;
    opacity: 0;
    transition:
        opacity 0.4s ease,
        left 0.55s ease;
}
.hero-preview-card:hover::before {
    left: 130%;
    opacity: 1;
}

/* ── 13. Feature link arrow micro-interaction ── */
.feature-link {
    transition:
        gap 0.2s ease,
        color 0.2s ease;
}
.feature-link:hover {
    gap: 0.55rem;
}

/* ── 14. Reduce motion overrides ── */
@media (prefers-reduced-motion: reduce) {
    .btn-gradient-primary::after,
    #mouseGlow,
    .hero-cta-group .btn-gradient-primary {
        animation: none !important;
        transition: none !important;
    }
    .highlights-grid .highlight-card,
    .testimonials-grid .testimonial-card,
    .pricing-grid .pricing-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===================================================================
   LANDING HERO — looping SVG orbit accent + ambient orb layering
   Tasteful, GPU-accelerated (transform/opacity only), reduced-motion safe
   =================================================================== */
.hero-grid {
    position: relative;
    z-index: 1;
}

.hero-orbit {
    position: absolute;
    top: clamp(10px, 4%, 30px);
    right: clamp(10px, 4%, 38px);
    width: clamp(108px, 15vw, 176px);
    height: clamp(108px, 15vw, 176px);
    z-index: 0;
    opacity: 0.55;
    pointer-events: none;
    overflow: visible;
}

.hero-orbit-ring {
    fill: none;
    stroke: color-mix(in srgb, var(--brand-1) 42%, transparent);
    stroke-width: 1;
    stroke-dasharray: 3 7;
}

.hero-orbit-ring--inner {
    stroke: color-mix(in srgb, var(--landing-india-green) 42%, transparent);
    stroke-dasharray: 2 6;
}

.hero-orbit-spin {
    transform-box: view-box;
    transform-origin: 100px 100px;
    animation: heroOrbitSpin 14s linear infinite;
}

.hero-orbit-spin--rev {
    animation-duration: 9s;
    animation-direction: reverse;
}

.hero-orbit-dot {
    fill: var(--landing-saffron);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--landing-saffron) 60%, transparent));
}

.hero-orbit-dot--teal {
    fill: var(--landing-lotus-blue);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--landing-lotus-blue) 60%, transparent));
}

.hero-orbit-core {
    fill: color-mix(in srgb, var(--brand-1) 70%, #fff);
    transform-box: fill-box;
    transform-origin: center;
    animation: heroOrbitCore 3.4s ease-in-out infinite;
}

@keyframes heroOrbitSpin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes heroOrbitCore {
    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

@media (max-width: 768px) {
    .hero-orbit {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-orbit-spin,
    .hero-orbit-core {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   EDUYANTRA LANDING — POLISH LAYER
   Built only on existing palette variables (--brand-*, --surface-*,
   --text-*, --line-soft, --landing-*). No new color system.
   Sections: A11y · Hero upgrade · Study Loop · Saarthi · Features
   · Pricing · Testimonials · FAQ · Back-to-top · Motion · Responsive
   ═══════════════════════════════════════════════════════════════ */

/* ---------- Accessibility: skip link + focus-visible ---------- */
.skip-to-content {
    position: fixed;
    top: -120px;
    left: 16px;
    z-index: 3000;
    padding: 0.6rem 1rem;
    border-radius: var(--landing-radius-sm);
    background: var(--brand-1);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--landing-shadow);
    transition: top 0.2s var(--ease-standard);
}
.skip-to-content:focus {
    top: 16px;
}
body.page-index a:focus-visible,
body.page-index button:focus-visible,
body.page-index .btn:focus-visible,
body.page-index .feature-link:focus-visible,
body.page-index .accordion-button:focus-visible,
body.page-index [tabindex]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--landing-lotus-blue) 60%, transparent);
    outline-offset: 3px;
    border-radius: 8px;
}

/* ---------- Section rhythm: soft dividers + generous flow ---------- */
.features-section,
.testimonials-section,
.pricing-section,
.faq-section,
.study-loop-section,
.saarthi-signature {
    position: relative;
}
.ey-divider {
    width: min(960px, 92%);
    height: 1px;
    margin: 0 auto;
    border: 0;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--landing-border-strong) 90%, transparent),
        transparent
    );
}

/* ===============================================================
   HERO — workspace progress ring, streak chip, mentor mini,
   Saarthi journey line, connectors
   =============================================================== */
.hero-progress-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0.15rem 0 0.55rem;
    flex-wrap: wrap;
}
.hero-progress-ring {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
}
.hero-progress-ring circle {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
}
.hero-progress-ring .ring-track {
    stroke: color-mix(in srgb, var(--landing-border-strong) 70%, transparent);
}
.hero-progress-ring .ring-fill {
    stroke: var(--landing-india-green);
    stroke-dasharray: 138;
    stroke-dashoffset: 41;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 1.1s var(--ease-standard);
}
.hero-progress-meta {
    display: grid;
    gap: 0.1rem;
    line-height: 1.2;
}
.hero-progress-meta strong {
    font-size: 1.05rem;
    color: var(--text-strong);
}
.hero-progress-meta small {
    font-size: 0.74rem;
    color: var(--text-soft);
}
.hero-streak-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    padding: 0.34rem 0.7rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--landing-saffron) 70%, var(--text-strong));
    background: color-mix(in srgb, var(--landing-saffron) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--landing-saffron) 38%, transparent);
}
.hero-streak-chip i {
    font-size: 0.72rem;
}

.task-dot.mentor {
    background: linear-gradient(135deg, var(--landing-lotus-blue), var(--brand-2));
}
.hero-preview-card.mini.mentor .mini-label {
    color: color-mix(in srgb, var(--landing-lotus-blue) 75%, var(--text-main));
}

/* Saarthi journey progress line inside hero */
.hero-saarthi-line {
    margin-top: 0.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--landing-radius-md);
    border: 1px solid var(--landing-border);
    background: color-mix(in srgb, var(--landing-surface-soft) 92%, transparent);
}
.hero-saarthi-line p {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-soft);
}
.hero-saarthi-track {
    width: 100%;
    height: 26px;
    display: block;
}
.hero-saarthi-track .sj-line {
    fill: none;
    stroke: color-mix(in srgb, var(--landing-border-strong) 80%, transparent);
    stroke-width: 2.5;
    stroke-linecap: round;
}
.hero-saarthi-track .sj-progress {
    fill: none;
    stroke: url(#sjGrad);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: sjDraw 2.4s var(--ease-standard) forwards;
}
.hero-saarthi-track .sj-node {
    fill: var(--surface-0);
    stroke: var(--landing-border-strong);
    stroke-width: 2;
}
.hero-saarthi-track .sj-node.done {
    fill: var(--landing-india-green);
    stroke: var(--landing-india-green);
}
.hero-saarthi-track .sj-node.live {
    fill: var(--landing-saffron);
    stroke: var(--landing-saffron);
}
@keyframes sjDraw {
    to {
        stroke-dashoffset: 60;
    }
}

/* ===============================================================
   STUDY LOOP / LEARNING PATH
   =============================================================== */
.study-loop-section {
    padding: clamp(2.4rem, 5vw, 4rem) 0;
}
.study-loop {
    position: relative;
    margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
.study-loop-track {
    position: absolute;
    inset: 38px 6% auto 6%;
    width: 88%;
    height: 40px;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}
.study-loop-track .loop-base {
    fill: none;
    stroke: color-mix(in srgb, var(--landing-border-strong) 75%, transparent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 4 9;
}
.study-loop-track .loop-draw {
    fill: none;
    stroke: url(#loopGrad);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1.8s var(--ease-standard);
}
[data-scroll-reveal].is-visible .study-loop-track .loop-draw {
    stroke-dashoffset: 0;
}

.study-loop-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.9rem;
    position: relative;
    z-index: 1;
}
.study-loop-step {
    text-align: center;
    display: grid;
    gap: 0.45rem;
    justify-items: center;
    padding: 0.4rem 0.4rem 0;
}
.study-loop-node {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: var(--shadow-sm);
    position: relative;
}
.study-loop-node svg {
    width: 28px;
    height: 28px;
}
.study-loop-node .step-index {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-strong);
    background: var(--surface-0);
    border: 1px solid var(--landing-border-strong);
}
.study-loop-node.n1 {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
}
.study-loop-node.n2 {
    background: linear-gradient(135deg, #0ea5e9, #0f766e);
}
.study-loop-node.n3 {
    background: linear-gradient(135deg, #f97316, #ef4444);
}
.study-loop-node.n4 {
    background: linear-gradient(135deg, #7c3aed, #1d4ed8);
}
.study-loop-node.n5 {
    background: linear-gradient(135deg, #138808, #f97316);
}
.study-loop-step h3 {
    margin: 0;
    font-size: 0.98rem;
    color: var(--text-strong);
}
.study-loop-step p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-soft);
}

/* ===============================================================
   SAARTHI SIGNATURE — guided route with milestones
   =============================================================== */
.saarthi-signature {
    padding: clamp(2.4rem, 5vw, 4rem) 0;
}
.saarthi-stage-wrap {
    margin-top: clamp(1.4rem, 3vw, 2.2rem);
    border: 1px solid color-mix(in srgb, var(--landing-india-green) 32%, var(--line-soft));
    border-radius: var(--landing-radius-lg);
    padding: clamp(1.2rem, 3vw, 2rem);
    background:
        linear-gradient(
            120deg,
            color-mix(in srgb, var(--landing-surface) 90%, transparent),
            color-mix(in srgb, var(--landing-surface-soft) 88%, transparent)
        ),
        linear-gradient(125deg, rgba(19, 136, 8, 0.12), rgba(249, 115, 22, 0.1));
    box-shadow: var(--landing-shadow);
    position: relative;
    overflow: hidden;
}
.saarthi-route {
    width: 100%;
    height: 64px;
    display: block;
    margin-bottom: 0.4rem;
}
.saarthi-route .route-base {
    fill: none;
    stroke: color-mix(in srgb, var(--landing-border-strong) 70%, transparent);
    stroke-width: 3;
    stroke-linecap: round;
}
.saarthi-route .route-draw {
    fill: none;
    stroke: url(#saarthiGrad);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 760;
    stroke-dashoffset: 760;
    transition: stroke-dashoffset 2s var(--ease-standard);
}
[data-scroll-reveal].is-visible .saarthi-route .route-draw {
    stroke-dashoffset: 0;
}
.saarthi-route .route-milestone {
    fill: var(--surface-0);
    stroke-width: 3;
}
.saarthi-route .m-learn {
    stroke: var(--landing-lotus-blue);
}
.saarthi-route .m-practice {
    stroke: var(--landing-saffron);
}
.saarthi-route .m-improve {
    stroke: var(--landing-india-green);
}
.saarthi-stages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}
.saarthi-stage {
    border: 1px solid var(--landing-border);
    border-radius: var(--landing-radius-md);
    background: color-mix(in srgb, var(--surface-0) 80%, transparent);
    padding: 1rem;
    display: grid;
    gap: 0.5rem;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
}
.saarthi-stage:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--landing-border-strong);
}
.saarthi-stage-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.saarthi-stage-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    flex: 0 0 auto;
}
.saarthi-stage-icon svg {
    width: 22px;
    height: 22px;
}
.saarthi-stage.learn .saarthi-stage-icon {
    background: linear-gradient(135deg, var(--landing-lotus-blue), var(--brand-2));
}
.saarthi-stage.practice .saarthi-stage-icon {
    background: linear-gradient(135deg, var(--landing-saffron), #ef4444);
}
.saarthi-stage.improve .saarthi-stage-icon {
    background: linear-gradient(135deg, var(--landing-india-green), #0ea5e9);
}
.saarthi-stage h3 {
    margin: 0;
    font-size: 1.02rem;
    color: var(--text-strong);
}
.saarthi-stage p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-soft);
}
.saarthi-stage ul {
    margin: 0.1rem 0 0;
    padding-left: 1.05rem;
    display: grid;
    gap: 0.2rem;
}
.saarthi-stage li {
    font-size: 0.82rem;
    color: var(--text-soft);
}

/* ===============================================================
   FEATURE CARDS — command label + equal heights
   =============================================================== */
.feature-panel {
    height: 100%;
    align-content: start;
}
.feature-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    margin-top: -0.1rem;
    padding: 0.22rem 0.55rem;
    border-radius: 7px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--landing-surface-soft) 80%, transparent);
    border: 1px solid var(--landing-border);
}
.feature-meta .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--landing-india-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--landing-india-green) 18%, transparent);
}
.feature-link:focus-visible i {
    transform: translateX(3px);
}

/* ===============================================================
   PRICING — clearer hierarchy + featured emphasis
   =============================================================== */
.pricing-card {
    height: 100%;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
}
.pricing-card .price {
    letter-spacing: -0.01em;
}
.pricing-card.featured {
    border-color: color-mix(in srgb, var(--landing-saffron) 48%, var(--line-soft));
    box-shadow: var(--landing-shadow-strong);
}
.pricing-card.featured:hover {
    transform: translateY(-6px);
}
.popular-badge {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--landing-saffron) 32%, transparent);
}
.plan-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid var(--landing-border);
    color: var(--text-soft);
    background: color-mix(in srgb, var(--landing-surface-soft) 82%, transparent);
}
.plan-tag.free {
    color: color-mix(in srgb, var(--landing-lotus-blue) 72%, var(--text-strong));
    border-color: color-mix(in srgb, var(--landing-lotus-blue) 30%, var(--line-soft));
}
.plan-tag.week {
    color: color-mix(in srgb, var(--landing-saffron) 70%, var(--text-strong));
    border-color: color-mix(in srgb, var(--landing-saffron) 36%, var(--line-soft));
}
.plan-tag.month {
    color: color-mix(in srgb, var(--landing-india-green) 70%, var(--text-strong));
    border-color: color-mix(in srgb, var(--landing-india-green) 36%, var(--line-soft));
}
.pricing-trust-note {
    margin: 1.1rem auto 0;
    max-width: 620px;
    text-align: center;
    font-size: 0.84rem;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}
.pricing-trust-note i {
    color: var(--landing-india-green);
}

/* ===============================================================
   TESTIMONIALS — quote mark + mobile scroll-snap
   =============================================================== */
.testimonial-card {
    scroll-snap-align: start;
}
.testimonial-quote {
    width: 30px;
    height: 30px;
    color: color-mix(in srgb, var(--brand-1) 55%, transparent);
    margin-bottom: 0.3rem;
}
.testimonial-role {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-soft);
}
.testimonial-role i {
    color: var(--landing-lotus-blue);
    font-size: 0.72rem;
}
@media (max-width: 768px) {
    .testimonials-grid {
        grid-auto-flow: column;
        grid-auto-columns: 84%;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.6rem;
        scrollbar-width: thin;
    }
    .study-loop-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem 0.8rem;
    }
    .study-loop-track {
        display: none;
    }
    .saarthi-stages {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .study-loop-steps {
        grid-template-columns: 1fr;
    }
    .testimonials-grid {
        grid-auto-columns: 90%;
    }
    .hero-streak-chip {
        margin-left: 0;
    }
}

/* ===============================================================
   FAQ — accessible chevron with smooth rotation
   =============================================================== */
.faq-item .accordion-button {
    padding-right: 3rem;
    position: relative;
}
.faq-item .accordion-button::after {
    display: none;
}
.faq-chevron {
    position: absolute;
    right: 1.05rem;
    top: 50%;
    width: 26px;
    height: 26px;
    transform: translateY(-50%);
    color: var(--brand-1);
    transition: transform 0.3s var(--ease-standard);
    pointer-events: none;
}
.faq-item .accordion-button.collapsed .faq-chevron {
    transform: translateY(-50%) rotate(0deg);
    color: var(--text-soft);
}
.faq-item .accordion-button:not(.collapsed) .faq-chevron {
    transform: translateY(-50%) rotate(180deg);
}

/* ===============================================================
   BACK TO TOP
   =============================================================== */
.back-to-top {
    position: fixed;
    right: clamp(14px, 3vw, 28px);
    bottom: clamp(14px, 3vw, 28px);
    width: 46px;
    height: 46px;
    z-index: 1500;
    display: grid;
    place-items: center;
    border: 1px solid var(--landing-border-strong);
    border-radius: 14px;
    background: var(--landing-surface);
    color: var(--brand-1);
    box-shadow: var(--landing-shadow);
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px) scale(0.9);
    pointer-events: none;
    transition:
        opacity 0.3s var(--ease-standard),
        transform 0.3s var(--ease-standard),
        box-shadow var(--transition-fast);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.back-to-top:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--landing-shadow-strong);
}
.back-to-top svg {
    width: 20px;
    height: 20px;
}

/* ---------- Active nav highlight (targets base.html nav links) ---------- */
body.page-index .public-navbar a.nav-link.is-active,
body.page-index .public-navbar .nav-link.is-active {
    color: var(--brand-1);
    font-weight: 700;
}

/* ---------- Floating micro-motion for hero workspace cards ---------- */
@keyframes eyFloatSoft {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hero-preview-card.mini {
        animation: eyFloatSoft 6s ease-in-out infinite;
    }
    .hero-preview-card.mini:nth-child(2) {
        animation-delay: 1.4s;
    }
    .hero-preview-card.mini.mentor {
        animation-delay: 2.6s;
    }
}

/* ---------- Reduced motion safety for all new components ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-saarthi-track .sj-progress {
        animation: none;
        stroke-dashoffset: 60;
    }
    .study-loop-track .loop-draw,
    .saarthi-route .route-draw {
        transition: none;
        stroke-dashoffset: 0;
    }
    .hero-preview-card.mini {
        animation: none;
    }
    .hero-progress-ring .ring-fill {
        transition: none;
    }
    .back-to-top {
        transition: opacity 0.001ms;
    }
    .skip-to-content {
        transition: none;
    }
}

/* ---------- Large screens: tighten study-loop readability ---------- */
@media (max-width: 991px) {
    .study-loop-steps {
        gap: 0.8rem;
    }
    .study-loop-node {
        width: 58px;
        height: 58px;
    }
}

/* ---------- Corrections / refinements ---------- */
/* FAQ chevron drawn via pseudo-element (no markup change, recolorable) */
.faq-item .accordion-button::after {
    display: block;
    content: "";
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    margin-left: auto;
    background-image: none;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    border-radius: 2px;
    transform: rotate(45deg);
    transition: transform 0.3s var(--ease-standard);
}
.faq-item .accordion-button:not(.collapsed)::after {
    transform: rotate(225deg);
}
@media (prefers-reduced-motion: reduce) {
    .faq-item .accordion-button::after {
        transition: none;
    }
}

/* Hero: mentor mini becomes a full-width strip under the two minis */
.hero-mini-grid .hero-preview-card.mini.mentor {
    grid-column: 1 / -1;
}

/* Testimonial role: small status dot for clearer student-role presentation */
.testimonial-head > div > p {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.testimonial-head > div > p::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--landing-lotus-blue);
    flex: 0 0 auto;
}

/* =================================================================== */
/* v2 refinements: hero clarity, modal SVG polish, remove back-to-top  */
/* =================================================================== */

/* Back-to-top removed \u2014 the chat launcher already lives in that corner */
.back-to-top {
    display: none !important;
}

/* Hero: calmer, clearer preview column (no idle floating, tidy 2-up minis) */
.hero-preview-wrap {
    gap: 14px;
}
.hero-preview-wrap .hero-preview-card,
.hero-preview-wrap .hero-preview-card.mini {
    animation: none;
}
.hero-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}
.hero-mini-grid .hero-preview-card.mini {
    height: 100%;
}
.hero-mini-grid .hero-preview-card.mini.mentor {
    grid-column: auto;
}

/* ---------- Auth modals: center content + world-class orbit SVG ---------- */
body.page-index :is(#loginModal, #signupModal) .auth-visual-panel {
    justify-content: center;
    gap: 16px;
}

.auth-orbit-illustration {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin: 0 0 2px;
}
.auth-orbit-illustration svg {
    width: clamp(104px, 9vw, 128px);
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.32));
    animation: aoiFloat 6s ease-in-out infinite;
}
.aoi-spin {
    transform-box: fill-box;
    transform-origin: center;
    animation: aoiSpin 24s linear infinite;
}
.aoi-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.34);
    stroke-width: 1.4;
}
.aoi-ring-2 {
    stroke: rgba(255, 255, 255, 0.22);
    stroke-dasharray: 4 7;
}
.aoi-node-1 {
    fill: #ffd699;
}
.aoi-node-2 {
    fill: #7dd3fc;
}
.aoi-node-3 {
    fill: #86efac;
}
.aoi-core rect {
    fill: rgba(255, 255, 255, 0.16);
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 1.5;
}
.aoi-spark {
    fill: #fff;
    transform-box: fill-box;
    transform-origin: center;
    animation: aoiTwinkle 3.4s ease-in-out infinite;
}
@keyframes aoiSpin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes aoiFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}
@keyframes aoiTwinkle {
    0%,
    100% {
        opacity: 0.6;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-orbit-illustration svg,
    .aoi-spin,
    .aoi-spark {
        animation: none;
    }
}

/* ===== Iteration 2: fit signup panel · polish modal orbit SVG ===== */

/* Signup visual panel was clipping (orbit cut off top, trust line cut off
   bottom). Compact spacing/sizes so all content fits cleanly. */
body.page-index :is(#loginModal, #signupModal) .auth-visual-signup {
    justify-content: center;
    gap: 11px;
    padding: 26px 24px;
}
.auth-visual-signup .auth-orbit-illustration {
    margin: 0 0 2px;
}
.auth-visual-signup .auth-orbit-illustration svg {
    width: clamp(64px, 6vw, 84px);
}
.auth-visual-signup .svp-section {
    gap: 8px;
}
.auth-visual-signup .svp-convo {
    gap: 7px;
}
.auth-visual-signup .svp-bubble {
    font-size: 0.8rem;
    padding: 8px 11px;
    line-height: 1.45;
}
.auth-visual-signup .svp-card {
    padding: 13px;
    gap: 9px;
}
.auth-visual-signup .svp-card-features {
    gap: 6px 10px;
}
.auth-visual-signup .svp-card-features li {
    font-size: 0.72rem;
}
.auth-visual-signup .svp-section-journey .svp-step {
    font-size: 0.72rem;
}

/* Safety net for short viewports: scroll silently instead of clipping. */
@media (max-height: 760px) {
    body.page-index :is(#loginModal, #signupModal) .auth-visual-signup {
        justify-content: flex-start;
        overflow-y: auto;
        scrollbar-width: none;
    }
    body.page-index :is(#loginModal, #signupModal) .auth-visual-signup::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

/* World-class touch: soft animated aura behind the orbit core (both modals).
   Reuses existing palette (sky/brand light) — no new colors. */
.auth-orbit-illustration {
    position: relative;
}
.auth-orbit-illustration svg {
    position: relative;
    z-index: 1;
}
.auth-orbit-illustration::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(125, 211, 252, 0.42), transparent 62%);
    filter: blur(12px);
    transform: translate(-50%, -50%);
    animation: aoiAura 5s ease-in-out infinite;
}
@keyframes aoiAura {
    0%,
    100% {
        opacity: 0.42;
        transform: translate(-50%, -50%) scale(0.9);
    }
    50% {
        opacity: 0.74;
        transform: translate(-50%, -50%) scale(1.06);
    }
}
@media (prefers-reduced-motion: reduce) {
    .auth-orbit-illustration::before {
        animation: none;
    }
}

/* ============================================================
   ITERATION 3 — PREMIUM SAAS POLISH (palette-safe, dark-aware)
   Reuses existing tokens only; loads last to refine, not replace.
   ============================================================ */

/* --- Signup visual panel: distribute content to remove top gap --- */
body.page-index :is(#loginModal, #signupModal) .auth-visual-signup {
    justify-content: space-between;
    gap: 12px;
}
.auth-visual-signup .auth-orbit-illustration {
    margin: 2px 0 0;
}
.auth-visual-signup .svp-section-card {
    margin-top: auto;
}

/* --- Section rhythm: generous, premium breathing room --- */
.features-section,
.testimonials-section,
.pricing-section,
.faq-section,
.study-loop-section,
.saarthi-signature {
    padding: 3rem 0 3.4rem;
}
@media (min-width: 992px) {
    .features-section,
    .testimonials-section,
    .pricing-section,
    .faq-section,
    .study-loop-section,
    .saarthi-signature {
        padding: 4.2rem 0 4.6rem;
    }
}

/* --- Section header: premium badge + gradient accent bar --- */
.section-badge {
    color: color-mix(in srgb, var(--landing-lotus-blue) 78%, var(--text-strong));
    background: color-mix(in srgb, var(--landing-lotus-blue) 10%, var(--landing-surface-soft));
    border-color: color-mix(in srgb, var(--landing-lotus-blue) 26%, var(--line-soft));
}
.section-title {
    letter-spacing: -0.022em;
    line-height: 1.1;
}
.section-head {
    position: relative;
}
.section-head::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 1.05rem auto 0;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--landing-saffron),
        #fef3c7 45%,
        var(--landing-india-green)
    );
    opacity: 0.92;
}

/* --- Cards: crisper borders + layered premium shadow --- */
.highlight-card,
.feature-panel,
.testimonial-card,
.pricing-card {
    border-color: color-mix(in srgb, var(--brand-1) 14%, var(--line-soft));
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--brand-1) 8%, transparent),
        0 10px 30px color-mix(in srgb, var(--brand-1) 6%, transparent);
}
.highlight-card:hover,
.feature-panel:hover,
.testimonial-card:hover,
.pricing-card:hover {
    box-shadow:
        0 2px 6px color-mix(in srgb, var(--brand-2) 14%, transparent),
        0 22px 50px color-mix(in srgb, var(--brand-2) 16%, transparent);
}

/* subtle top sheen on feature + pricing cards (premium detail) */
.feature-panel,
.pricing-card {
    isolation: isolate;
}
.feature-panel::before,
.pricing-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--brand-2) 50%, transparent),
        transparent
    );
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
}

/* --- Pricing: stronger 'Most Popular' premium emphasis --- */
.pricing-card.featured {
    box-shadow:
        0 2px 8px color-mix(in srgb, var(--landing-saffron) 20%, transparent),
        0 26px 60px color-mix(in srgb, var(--landing-saffron) 22%, transparent);
}
@media (min-width: 992px) {
    .pricing-card.featured {
        transform: translateY(-6px) scale(1.02);
    }
    .pricing-card.featured:hover {
        transform: translateY(-11px) scale(1.02);
    }
}
.popular-badge {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-2) 34%, transparent);
}

/* --- Hero workspace cards: a touch more depth --- */
.hero-preview-main {
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--brand-1) 8%, transparent),
        0 24px 60px color-mix(in srgb, var(--brand-1) 12%, transparent);
}

/* --- Subtle brand glow behind pricing + features (very low alpha) --- */
.pricing-section,
.features-section {
    position: relative;
    isolation: isolate;
}
.pricing-section::before,
.features-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        60% 50% at 50% 0%,
        color-mix(in srgb, var(--landing-lotus-blue) 7%, transparent),
        transparent 70%
    );
}

/* ============================================================
   ITERATION 4 — Signup visual panel redesigned to mirror Login
   Same clean layout (orbit → kicker → headline → workflow stack
   → note). Keeps the distinct signup green identity. Reuses all
   login-panel component CSS; neutralizes earlier compacting.
   ============================================================ */
body.page-index :is(#loginModal, #signupModal) .auth-visual-signup {
    justify-content: center;
    gap: 16px;
    padding: 44px 34px;
}
.auth-visual-signup .auth-orbit-illustration {
    margin: 0 0 2px;
}
.auth-visual-signup .auth-orbit-illustration svg {
    width: clamp(104px, 9vw, 128px);
}

@media (min-width: 992px) {
    body.page-index #signupModal .auth-visual-signup {
        padding: 44px 34px;
    }
}

/* ============================================================
   PREMIUM ENHANCEMENT LAYER — 2026 polish pass
   Additive only. Reuses existing brand tokens + `ey-` naming
   convention already used in the project (.ey-divider/.ey-label).
   Nothing here overrides working rules; every animation is
   neutralised under prefers-reduced-motion at the very end.
   ============================================================ */

/* ---------- Hero ambient FX: grid · mesh · blobs · particles · floating icons ---------- */
.landing-hero-shell .hero-grid {
    position: relative;
    z-index: 2;
}

.ey-hero-fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
    --ey-px: 0;
    --ey-py: 0;
}

.ey-fx-grid {
    position: absolute;
    inset: -12%;
    background-image:
        linear-gradient(
            to right,
            color-mix(in srgb, var(--landing-lotus-blue) 9%, transparent) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--landing-lotus-blue) 9%, transparent) 1px,
            transparent 1px
        );
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(72% 62% at 50% 40%, #000 0%, transparent 82%);
    mask-image: radial-gradient(72% 62% at 50% 40%, #000 0%, transparent 82%);
    opacity: 0.65;
    transform: translate3d(calc(var(--ey-px) * -8px), calc(var(--ey-py) * -8px), 0);
    transition: transform 0.45s ease-out;
    animation: eyGridPan 24s linear infinite;
}
@keyframes eyGridPan {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 46px 46px;
    }
}

.ey-fx-mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            38% 40% at 18% 22%,
            color-mix(in srgb, var(--landing-lotus-blue) 22%, transparent),
            transparent 70%
        ),
        radial-gradient(
            34% 38% at 82% 28%,
            color-mix(in srgb, var(--landing-saffron) 18%, transparent),
            transparent 72%
        ),
        radial-gradient(
            42% 44% at 70% 84%,
            color-mix(in srgb, var(--landing-india-green) 16%, transparent),
            transparent 74%
        );
    filter: blur(8px);
    opacity: 0.5;
    transform: translate3d(calc(var(--ey-px) * 14px), calc(var(--ey-py) * 14px), 0);
    transition: transform 0.55s ease-out;
}

.ey-fx-blob {
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
    filter: blur(10px);
    opacity: 0.26;
    will-change: transform;
}
.ey-fx-blob.b1 {
    top: -64px;
    left: -42px;
    background: radial-gradient(circle at 30% 30%, var(--landing-lotus-blue), transparent 70%);
    animation: eyBlobFloat 19s ease-in-out infinite;
}
.ey-fx-blob.b2 {
    bottom: -72px;
    right: -34px;
    background: radial-gradient(circle at 70% 70%, var(--landing-saffron), transparent 72%);
    animation: eyBlobFloat 23s ease-in-out infinite reverse;
}
@keyframes eyBlobFloat {
    0%,
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    50% {
        transform: translate(20px, -18px) scale(1.08) rotate(12deg);
    }
}

.ey-fx-particles {
    position: absolute;
    inset: 0;
}
.ey-fx-particles i {
    position: absolute;
    bottom: 12%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--landing-lotus-blue) 72%, white);
    box-shadow: 0 0 10px color-mix(in srgb, var(--landing-lotus-blue) 55%, transparent);
    opacity: 0;
    animation: eyFloatUp linear infinite;
}
.ey-svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.ey-fx-particles i.p1 {
    left: 8%;
    animation-duration: 7s;
    animation-delay: 0s;
}
.ey-fx-particles i.p2 {
    left: 20%;
    animation-duration: 9.5s;
    animation-delay: 1.2s;
}
.ey-fx-particles i.p3 {
    left: 33%;
    animation-duration: 8s;
    animation-delay: 2.1s;
}
.ey-fx-particles i.p4 {
    left: 51%;
    animation-duration: 11s;
    animation-delay: 0.6s;
}
.ey-fx-particles i.p5 {
    left: 67%;
    animation-duration: 8.5s;
    animation-delay: 1.8s;
}
.ey-fx-particles i.p6 {
    left: 80%;
    animation-duration: 10s;
    animation-delay: 2.6s;
}
.ey-fx-particles i.p7 {
    left: 92%;
    animation-duration: 9s;
    animation-delay: 0.3s;
}
.landing-kicker-dot {
    color: var(--landing-india-green);
    font-size: 0.6rem;
    vertical-align: middle;
}
@keyframes eyFloatUp {
    0% {
        transform: translateY(40px) scale(0.5);
        opacity: 0;
    }
    18% {
        opacity: 0.65;
    }
    82% {
        opacity: 0.55;
    }
    100% {
        transform: translateY(-180px) scale(1);
        opacity: 0;
    }
}

.ey-fx-icon {
    position: absolute;
    width: 30px;
    height: 30px;
    opacity: 0.3;
    animation: eyIconDrift ease-in-out infinite;
}
.ey-fx-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
@keyframes eyIconDrift {
    0%,
    100% {
        transform: translateY(0) rotate(-5deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}
.ey-fx-icon.i1 {
    top: 13%;
    left: 8%;
    color: color-mix(in srgb, var(--landing-lotus-blue) 70%, transparent);
    animation-duration: 9s;
}
.ey-fx-icon.i2 {
    top: 20%;
    right: 11%;
    width: 26px;
    height: 26px;
    color: color-mix(in srgb, var(--landing-saffron) 78%, transparent);
    animation-duration: 11s;
}
.ey-fx-icon.i3 {
    bottom: 20%;
    left: 13%;
    width: 24px;
    height: 24px;
    color: color-mix(in srgb, var(--landing-india-green) 78%, transparent);
    animation-duration: 12.5s;
}
.ey-fx-icon.i4 {
    bottom: 26%;
    right: 15%;
    color: color-mix(in srgb, var(--landing-lotus-blue) 60%, transparent);
    animation-duration: 10.5s;
}
.ey-fx-icon.i5 {
    top: 46%;
    right: 7%;
    width: 22px;
    height: 22px;
    color: color-mix(in srgb, var(--landing-saffron) 60%, transparent);
    animation-duration: 13s;
}

/* ---------- Micro-interaction: click ripple (JS adds .ey-ripple-host + span) ---------- */
.ey-ripple-host {
    position: relative;
    overflow: hidden;
}
.ey-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: color-mix(in srgb, currentColor 38%, transparent);
    opacity: 0.4;
    pointer-events: none;
    animation: eyRipple 0.6s ease-out forwards;
}
@keyframes eyRipple {
    to {
        transform: scale(2.4);
        opacity: 0;
    }
}

/* ---------- Micro-interaction: gradient sheen sweep on primary CTAs (JS adds .ey-sheen) ---------- */
.ey-sheen {
    position: relative;
    overflow: hidden;
}
.ey-sheen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 32%,
        rgba(255, 255, 255, 0.34) 50%,
        transparent 68%
    );
    transform: translateX(-130%);
    transition: transform 0.6s ease;
    pointer-events: none;
}
.ey-sheen:hover::after {
    transform: translateX(130%);
}

/* ---------- Auth: caps-lock hint (JS toggles .is-on) ---------- */
.ey-caps-hint {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--landing-saffron);
}
.ey-caps-hint.is-on {
    display: inline-flex;
    animation: authLiftIn 0.22s ease;
}

/* ---------- Auth: live password requirement checklist ---------- */
.ey-pw-reqs {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 14px;
}
.ey-pw-reqs li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    color: color-mix(in srgb, currentColor 55%, transparent);
    transition: color 0.25s ease;
}
.ey-pw-reqs li::before {
    content: "";
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    flex: none;
    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}
.ey-pw-reqs li.ok {
    color: var(--landing-india-green);
}
.ey-pw-reqs li.ok::before {
    background: var(--landing-india-green);
    border-color: var(--landing-india-green);
}

/* ---------- Auth: premium 6-box OTP (JS progressive enhancement) ---------- */
.ey-otp-grid {
    display: flex;
    flex: 1 1 100%;
    gap: 8px;
    margin: 2px 0 6px;
}
.ey-otp-box {
    flex: 1 1 0;
    min-width: 0;
    height: 52px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: inherit;
    border: 1.5px solid var(--landing-border-strong);
    border-radius: var(--landing-radius-sm);
    background: var(--landing-surface);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}
.ey-otp-box::-webkit-outer-spin-button,
.ey-otp-box::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ey-otp-box:focus {
    outline: none;
    border-color: var(--landing-lotus-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--landing-lotus-blue) 22%, transparent);
    transform: translateY(-1px);
}
.ey-otp-box.is-filled {
    border-color: var(--landing-lotus-blue);
}
.ey-otp-grid.is-error .ey-otp-box {
    border-color: #e5484d;
    animation: eyShake 0.4s ease;
}
.ey-otp-grid.is-success .ey-otp-box {
    border-color: var(--landing-india-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--landing-india-green) 18%, transparent);
}
@keyframes eyShake {
    0%,
    100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-6px);
    }
    40% {
        transform: translateX(6px);
    }
    60% {
        transform: translateX(-4px);
    }
    80% {
        transform: translateX(4px);
    }
}
.ey-otp-resend {
    flex: 1 1 100%;
    margin-top: 2px;
    font-size: 0.74rem;
    color: color-mix(in srgb, currentColor 60%, transparent);
}
.ey-otp-resend button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--landing-lotus-blue);
    cursor: pointer;
}
.ey-otp-resend button[disabled] {
    color: color-mix(in srgb, currentColor 45%, transparent);
    cursor: not-allowed;
}

/* ---------- Accessibility: unified focus-visible for new interactive elements ---------- */
body.page-index .ey-otp-box:focus-visible,
body.page-index .ey-otp-resend button:focus-visible,
body.page-index .feature-link:focus-visible {
    outline: 2px solid var(--landing-lotus-blue);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- Responsiveness: ultrawide containment ---------- */
@media (min-width: 1700px) {
    body.page-index .container {
        max-width: 1320px;
    }
}
/* Foldable / very narrow: keep OTP boxes tappable */
@media (max-width: 360px) {
    .ey-otp-box {
        height: 46px;
        font-size: 1.05rem;
    }
    .ey-pw-reqs {
        grid-template-columns: 1fr;
    }
}

/* ---------- Reduced motion: neutralise everything added above ---------- */
@media (prefers-reduced-motion: reduce) {
    .ey-fx-grid,
    .ey-fx-mesh,
    .ey-fx-blob,
    .ey-fx-particles i,
    .ey-fx-icon,
    .ey-ripple,
    .ey-sheen::after,
    .ey-otp-box,
    .ey-caps-hint {
        animation: none !important;
        transition: none !important;
    }
    .ey-fx-particles,
    .ey-fx-blob {
        display: none;
    }
    .ey-fx-grid,
    .ey-fx-mesh,
    .ey-fx-icon {
        transform: none !important;
    }
}

/* ═════════════════════════════════════
   PREMIUM ENHANCEMENT LAYER v3
   Reusable inline-SVG illustration system · animated auth right panel ·
   4-step signup stepper. Additive only; reuses existing design tokens.
   ═════════════════════════════════════ */

/* ---- Reusable inline SVG illustration system ---- */
.ey-illus {
    width: 100%;
    height: 100%;
    display: block;
    color: var(--landing-lotus-blue);
}
.ey-illus svg,
.ey-illus use {
    width: 100%;
    height: 100%;
}
.ey-illus-pulse {
    transform-origin: center;
    animation: eyIllusPulse 2.6s ease-in-out infinite;
}
@keyframes eyIllusPulse {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 1;
    }
}

/* Decorative feature-card watermark (purely additive, behind nothing interactive) */
.feature-panel {
    position: relative;
}
.ey-illus-watermark {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    opacity: 0.14;
    color: var(--landing-lotus-blue);
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}
.feature-panel:hover .ey-illus-watermark {
    opacity: 0.3;
    transform: translateY(-2px) scale(1.06);
}

/* ---- Auth right panel: gradient lighting + floating icons + glass ---- */
body.page-index #loginModal .auth-visual-panel,
body.page-index #signupModal .auth-visual-panel {
    position: relative;
    overflow: hidden;
}
.ey-auth-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}
.auth-visual-panel > *:not(.ey-auth-fx) {
    position: relative;
    z-index: 1;
}
.ey-auth-fx {
    z-index: 0;
}
.ey-auth-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    filter: blur(42px);
    opacity: 0.5;
    top: -40px;
    left: -40px;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--landing-lotus-blue) 65%, transparent),
        transparent 70%
    );
    animation: eyAuthGlow 14s ease-in-out infinite;
}
.ey-auth-glow.g2 {
    top: auto;
    left: auto;
    right: -40px;
    bottom: -40px;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--landing-saffron) 55%, transparent),
        transparent 70%
    );
    animation-delay: -7s;
}
@keyframes eyAuthGlow {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(40px, 30px) scale(1.12);
    }
}
.ey-auth-icon {
    position: absolute;
    width: 28px;
    height: 28px;
    opacity: 0.55;
    color: rgba(255, 255, 255, 0.88);
    animation: eyIconDrift ease-in-out infinite;
}
/* Glass upgrade for existing workflow cards (additive) */
#signupModal .auth-workflow-item,
#loginModal .auth-workflow-item {
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

/* ---- Signup 4-step flow ---- */
.ey-step-hidden {
    display: none !important;
}
.ey-stepper {
    display: flex;
    align-items: center;
    margin: 0 0 18px;
}
.ey-stepper-item {
    display: flex;
    align-items: center;
    flex: 1;
}
.ey-stepper-item:last-child {
    flex: 0 0 auto;
}
.ey-stepper-dot {
    width: 26px;
    height: 26px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    color: color-mix(in srgb, currentColor 55%, transparent);
    background: var(--landing-surface-soft);
    border: 1.5px solid var(--landing-border);
    transition: all 0.3s ease;
}
.ey-stepper-line {
    height: 2px;
    flex: 1;
    margin: 0 6px;
    background: var(--landing-border);
    border-radius: 2px;
    transition: background 0.3s ease;
}
.ey-stepper-item:last-child .ey-stepper-line {
    display: none;
}
.ey-stepper-item.is-active .ey-stepper-dot {
    color: #fff;
    background: var(--landing-lotus-blue);
    border-color: var(--landing-lotus-blue);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--landing-lotus-blue) 18%, transparent);
}
.ey-stepper-item.is-done .ey-stepper-dot {
    color: #fff;
    background: var(--landing-india-green);
    border-color: var(--landing-india-green);
}
.ey-stepper-item.is-done .ey-stepper-line {
    background: var(--landing-india-green);
}
.ey-step-nav {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}
.ey-step-continue,
.ey-btn-back {
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    border-radius: var(--landing-radius-md);
    padding: 12px 18px;
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        opacity 0.2s ease;
}
.ey-step-continue {
    flex: 1;
    color: #fff;
    background: linear-gradient(
        120deg,
        var(--landing-lotus-blue),
        color-mix(in srgb, var(--landing-lotus-blue) 65%, var(--landing-saffron))
    );
    box-shadow: var(--landing-glow);
}
.ey-step-continue:hover {
    transform: translateY(-1px);
}
.ey-step-continue:disabled {
    opacity: 0.7;
    cursor: default;
    transform: none;
}
.ey-btn-back {
    flex: 0 0 auto;
    background: var(--landing-surface-soft);
    color: inherit;
    border: 1px solid var(--landing-border);
}
.ey-btn-back:hover {
    background: var(--landing-surface);
}
.ey-step-continue:focus-visible,
.ey-btn-back:focus-visible {
    outline: 2px solid var(--landing-lotus-blue);
    outline-offset: 2px;
}
.ey-step-msg {
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    min-height: 1em;
}
.ey-otp-verifying .ey-otp-box {
    opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
    .ey-illus-pulse,
    .ey-auth-glow,
    .ey-auth-icon {
        animation: none !important;
    }
    .ey-step-continue:hover,
    .feature-panel:hover .ey-illus-watermark {
        transform: none;
    }
}

/* ═════════════════════════════════════
   PREMIUM ENHANCEMENT LAYER v4
   Auth modal sizing fix (no clipped buttons) · single-action stepper ·
   minimal landing accents. Additive only.
   ═════════════════════════════════════ */

/* ---- Auth panel: center when it fits, scroll when it doesn't (fixes the
   clipped “Create workspace” button on laptops/desktop) ---- */
body.page-index #signupModal .auth-primary-panel,
body.page-index #loginModal .auth-primary-panel {
    overflow-y: auto;
    max-height: min(90vh, 820px);
    justify-content: flex-start;
}
body.page-index #signupModal .auth-primary-panel > :first-child,
body.page-index #loginModal .auth-primary-panel > :first-child {
    margin-top: auto;
}
body.page-index #signupModal .auth-primary-panel > :last-child,
body.page-index #loginModal .auth-primary-panel > :last-child {
    margin-bottom: auto;
}

/* Stepper + nav span the full form width on every breakpoint */
.ey-stepper,
.ey-step-nav {
    width: 100%;
}

/* ---- Landing: minimal animated “live” dot on section badges ---- */
.ey-badge-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--landing-lotus-blue);
    vertical-align: middle;
    position: relative;
}
.ey-badge-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: eyBadgePulse 2.4s ease-out infinite;
}
@keyframes eyBadgePulse {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }
    70%,
    100% {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* ---- Landing: gentle idle float for feature-card SVG illustrations ---- */
.ey-illus-watermark {
    opacity: 0.18;
}
.ey-illus-watermark .ey-illus {
    animation: eyWatermarkFloat 6s ease-in-out infinite;
}
@keyframes eyWatermarkFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ey-badge-dot::after,
    .ey-illus-watermark .ey-illus {
        animation: none !important;
    }
}

/* ═════════════════════════════════════
   PREMIUM ENHANCEMENT LAYER v5
   Reordered signup flow polish: equal-width fields/buttons, clearer step
   caption, error popups, mobile notch/safe-area, compact (no-scroll) modal.
   Additive only.
   ═════════════════════════════════════ */

/* ---- Equal, full width for every entry + the Back/Verify button row ---- */
#signupForm .auth-signup-fields .form-group-modern,
#signupForm .auth-signup-fields .input-wrapper-modern,
#signupForm .auth-signup-fields .auth-inline-row,
#signupForm .auth-signup-fields .auth-inline-field,
#signupForm .ey-stepper,
#signupForm .ey-step-caption,
#signupForm .ey-step-nav,
#signupForm .ey-step-msg {
    width: 100%;
    box-sizing: border-box;
}

#signupForm .auth-inline-row {
    display: flex;
    gap: 10px;
}
#signupForm .ey-otp-grid {
    display: flex;
    gap: 8px;
    width: 100%;
}
#signupForm .ey-otp-box {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

/* Back + primary action share the row at a steady, balanced width */
.ey-step-nav {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.ey-step-nav .ey-step-continue {
    flex: 1 1 auto;
}
.ey-step-nav .ey-btn-back {
    flex: 0 0 auto;
    min-width: 92px;
}

/* ---- Clearer, more generous step header ---- */
.ey-step-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--landing-lotus-blue);
    margin: 2px 0 10px;
}
.ey-step-caption .ey-step-count {
    font-variant-numeric: tabular-nums;
    color: var(--landing-india-green);
}
.ey-step-caption .ey-step-label {
    color: inherit;
}
.ey-stepper {
    margin-bottom: 14px;
}
.ey-stepper-dot {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
}

/* ---- Error/success popups (used when host app toast is unavailable) ---- */
#ey-pop-host {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}
.ey-pop {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--landing-radius-md, 14px);
    background: #fff;
    color: #1f2430;
    font-size: 0.9rem;
    line-height: 1.4;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
    border: 1px solid var(--landing-border, #e6e8ee);
    border-left: 4px solid var(--landing-lotus-blue);
    white-space: pre-line;
    animation: eyPopIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.ey-pop.is-leaving {
    animation: eyPopOut 0.22s ease forwards;
}
.ey-pop.is-error {
    border-left-color: #e5484d;
}
.ey-pop.is-success {
    border-left-color: var(--landing-india-green);
}
.ey-pop .ey-pop-ic {
    flex: 0 0 auto;
    font-weight: 700;
}
.ey-pop.is-error .ey-pop-ic {
    color: #e5484d;
}
.ey-pop.is-success .ey-pop-ic {
    color: var(--landing-india-green);
}
.ey-pop-msg {
    flex: 1 1 auto;
}
.ey-pop-title {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}
@keyframes eyPopIn {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes eyPopOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ---- Compact the signup modal so the 4-step flow does not scroll ---- */
body.page-index #signupModal .auth-title {
    font-size: clamp(1.4rem, 2.3vw, 1.85rem);
    line-height: 1.14;
}
body.page-index #signupModal .auth-header {
    gap: 6px;
    margin-bottom: 6px;
}
body.page-index #signupModal .auth-primary-panel {
    gap: 12px;
    padding-block: clamp(20px, 3vw, 34px);
}
#signupForm .auth-fields,
#signupForm .auth-signup-fields {
    gap: 12px;
}
.ey-pw-reqs {
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
    margin-top: 8px;
}
.ey-pw-reqs li {
    font-size: 0.76rem;
}
#signupForm .password-strength {
    margin-top: 8px;
}

/* ---- Mobile: keep the modal clear of the camera / notch (safe areas) ---- */
@media (max-width: 576px) {
    body.page-index #signupModal .auth-close-btn,
    body.page-index #loginModal .auth-close-btn {
        top: calc(env(safe-area-inset-top, 0px) + 12px);
        right: calc(env(safe-area-inset-right, 0px) + 12px);
    }
    body.page-index #signupModal .auth-primary-panel,
    body.page-index #loginModal .auth-primary-panel {
        padding-top: calc(env(safe-area-inset-top, 0px) + 22px);
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    }
    .ey-pw-reqs {
        grid-template-columns: 1fr 1fr;
    }
    #ey-pop-host {
        top: calc(env(safe-area-inset-top, 0px) + 12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ey-pop {
        animation: none !important;
    }
}

/* ═════════════════════════════════════
   PREMIUM ENHANCEMENT LAYER v6
   Lock the heading + action button to the same position on every signup
   step (stop the vertical “float” between steps). Additive only.
   ═════════════════════════════════════ */

/* Top-anchor the panel content so the heading never drifts down a step */
body.page-index #signupModal .auth-primary-panel,
body.page-index #loginModal .auth-primary-panel {
    justify-content: flex-start;
}
body.page-index #signupModal .auth-primary-panel > :first-child,
body.page-index #loginModal .auth-primary-panel > :first-child {
    margin-top: 0;
}
body.page-index #signupModal .auth-primary-panel > :last-child,
body.page-index #loginModal .auth-primary-panel > :last-child {
    margin-bottom: 0;
}

/* Reserve a steady field area so the Back / Continue row lands in the same
   place on the Email, Verify and Username steps. */
#signupForm .auth-signup-fields {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 158px;
}

/* Keep the subtitle compact + identical on every step */
body.page-index #signupModal .auth-description {
    font-size: 0.92rem;
    line-height: 1.45;
    margin-bottom: 2px;
    min-height: 2.6em; /* same height whether 1 or 2 lines wrap */
}

/* ═════════════════════════════════════
   PREMIUM ENHANCEMENT LAYER v7
   Remove dead whitespace, hug content, single clear password indicator,
   and keep the 4-step signup non-scrollable on every device. Additive only.
   ═════════════════════════════════════ */

/* Drop the reserved field block that created the big mid-form gap */
#signupForm .auth-signup-fields {
    min-height: 0;
    gap: 12px;
}

/* Let the modal hug its content instead of being forced 480px tall */
body.page-index :is(#loginModal, #signupModal) .auth-shell {
    min-height: 0;
}

/* Heading stays anchored at the top; snug, premium padding; silent safety scroll */
body.page-index #signupModal .auth-primary-panel,
body.page-index #loginModal .auth-primary-panel {
    justify-content: flex-start;
    gap: 14px;
    padding: clamp(22px, 3.4vw, 38px);
    overflow-y: auto;
    scrollbar-width: none;
}
body.page-index #signupModal .auth-primary-panel::-webkit-scrollbar,
body.page-index #loginModal .auth-primary-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Compact header */
body.page-index #signupModal .auth-title {
    font-size: clamp(1.32rem, 2vw, 1.66rem);
    line-height: 1.14;
}
body.page-index #signupModal .auth-header {
    gap: 4px;
    margin-bottom: 2px;
}
body.page-index #signupModal .auth-description {
    min-height: 0;
    font-size: 0.9rem;
    line-height: 1.42;
    margin: 0;
}

/* Compact, clearer stepper + caption */
.ey-stepper {
    margin-bottom: 10px;
}
.ey-stepper-dot {
    width: 28px;
    height: 28px;
    font-size: 0.82rem;
}
.ey-step-caption {
    margin: 2px 0 8px;
}

/* One clean password indicator: keep the checklist, drop the redundant native meter */
#signupForm .password-strength {
    display: none;
}
.ey-pw-reqs {
    margin-top: 8px;
    gap: 3px 12px;
}
.ey-pw-reqs li {
    font-size: 0.74rem;
}

/* Tighten the final step so it fits without scrolling */
#signupForm .auth-terms-row {
    margin: 4px 0;
}
#signupForm .btn-auth-submit {
    margin-top: 4px;
}

/* Compact the right visual panel so it no longer towers over the short steps */
body.page-index :is(#loginModal, #signupModal) .auth-visual-signup {
    padding: clamp(24px, 3vw, 32px);
    gap: 12px;
}
.auth-visual-signup .auth-orbit-illustration svg {
    width: clamp(64px, 6vw, 92px);
}
body.page-index :is(#loginModal, #signupModal) .auth-visual-panel h3 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

/* Short viewports (laptops / phones in landscape): shrink so nothing ever scrolls */
@media (max-height: 720px) {
    body.page-index #signupModal .auth-title {
        font-size: clamp(1.18rem, 4.4vh, 1.42rem);
    }
    body.page-index #signupModal .auth-primary-panel {
        padding: 18px 22px;
        gap: 10px;
    }
    body.page-index #signupModal .auth-description {
        display: none;
    } /* free space on small screens only */
    .ey-stepper {
        margin-bottom: 8px;
    }
    .ey-stepper-dot {
        width: 26px;
        height: 26px;
    }
    #signupForm .auth-signup-fields {
        gap: 10px;
    }
}

/* ═════════════════════════════════════
   PREMIUM ENHANCEMENT LAYER v8
   Balance the form body so leftover height reads as intentional breathing
   room (header pinned top, footer pinned bottom, body centered) instead of
   dead space at the bottom. Applies to BOTH login + signup, all devices.
   Plus light premium polish on inputs/controls. Additive only.
   ═════════════════════════════════════ */

/* Make the panel a column so the form can absorb the spare height */
body.page-index :is(#loginModal, #signupModal) .auth-primary-panel {
    display: flex;
    flex-direction: column;
}
body.page-index :is(#loginModal, #signupModal) .auth-header {
    flex: 0 0 auto;
}

/* Form grows to fill; its rows center vertically -> spare space splits evenly */
body.page-index :is(#loginModal, #signupModal) .auth-form-premium {
    flex: 1 1 auto;
    align-content: center;
}

/* Footer always anchored to the very bottom of the panel */
body.page-index :is(#loginModal, #signupModal) .auth-footer {
    flex: 0 0 auto;
    margin-top: auto;
}

/* ---- Light premium polish (both modals) ---- */
/* Smooth, brand-consistent focus ring on the floating inputs */
body.page-index :is(#loginModal, #signupModal) .auth-form .input-wrapper-modern,
body.page-index :is(#loginModal, #signupModal) .auth-form .auth-floating-field {
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}
body.page-index :is(#loginModal, #signupModal) .auth-form .input-wrapper-modern:focus-within,
body.page-index :is(#loginModal, #signupModal) .auth-form .auth-floating-field:focus-within {
    border-color: color-mix(in srgb, var(--landing-lotus-blue) 52%, var(--landing-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--landing-lotus-blue) 15%, transparent);
}

/* Primary actions: subtle premium lift + smoother press */
body.page-index :is(#loginModal, #signupModal) .ey-step-continue,
body.page-index :is(#loginModal, #signupModal) .btn-auth-submit {
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        filter 0.16s ease;
}
body.page-index :is(#loginModal, #signupModal) .ey-step-continue:hover,
body.page-index :is(#loginModal, #signupModal) .btn-auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--landing-lotus-blue) 26%, transparent);
}
body.page-index :is(#loginModal, #signupModal) .ey-step-continue:active,
body.page-index :is(#loginModal, #signupModal) .btn-auth-submit:active {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    body.page-index :is(#loginModal, #signupModal) .ey-step-continue,
    body.page-index :is(#loginModal, #signupModal) .btn-auth-submit {
        transition: none;
    }
}

/* ═════════════════════════════════════
   PREMIUM SITE POLISH v9
   Site-wide consistency pass: unified card interactions, button feedback,
   readable section rhythm, link micro-interactions, and accessible keyboard
   focus. Additive only; scoped to the landing page (body.page-index).
   ═════════════════════════════════════ */

/* Unified, smooth interaction for every landing card type */
body.page-index
    :is(
        .highlight-card,
        .feature-panel,
        .testimonial-card,
        .pricing-card,
        .pricing-strip-item,
        .saarthi-stage,
        .study-loop-step
    ) {
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}
body.page-index
    :is(
        .highlight-card,
        .feature-panel,
        .testimonial-card,
        .pricing-strip-item,
        .saarthi-stage
    ):hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--landing-lotus-blue) 38%, transparent);
    border-color: color-mix(in srgb, var(--landing-lotus-blue) 30%, var(--landing-border));
}
body.page-index .pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 50px -20px color-mix(in srgb, var(--landing-lotus-blue) 40%, transparent);
}

/* Premium button feedback site-wide */
body.page-index :is(.btn-gradient-primary, .btn-outline-premium) {
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        filter 0.16s ease,
        border-color 0.16s ease;
}
body.page-index .btn-gradient-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--landing-lotus-blue) 55%, transparent);
}
body.page-index .btn-outline-premium:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--landing-lotus-blue) 55%, var(--landing-border));
}
body.page-index :is(.btn-gradient-primary, .btn-outline-premium):active {
    transform: translateY(0);
}

/* Feature link arrow nudge on hover */
body.page-index .feature-link i {
    transition: transform 0.18s ease;
}
body.page-index .feature-link:hover i {
    transform: translateX(4px);
}

/* Balanced, readable section subtitle width */
body.page-index .section-subtitle {
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
}

/* Accessible, brand-colored keyboard focus ring */
body.page-index a:focus-visible,
body.page-index button:focus-visible,
body.page-index .btn:focus-visible,
body.page-index summary:focus-visible,
body.page-index [tabindex]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--landing-lotus-blue) 70%, transparent);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    body.page-index
        :is(
            .highlight-card,
            .feature-panel,
            .testimonial-card,
            .pricing-card,
            .pricing-strip-item,
            .saarthi-stage,
            .study-loop-step,
            .btn-gradient-primary,
            .btn-outline-premium,
            .feature-link i
        ) {
        transition: none;
    }
    body.page-index
        :is(
            .highlight-card,
            .feature-panel,
            .testimonial-card,
            .pricing-card,
            .pricing-strip-item,
            .saarthi-stage
        ):hover {
        transform: none;
    }
}

/* ═════════════════════════════════════
   PREMIUM ENHANCEMENT LAYER v10
   In the stepper signup flow the inline Send/Verify buttons are hidden, so the
   email + OTP rows must not reserve their old 120px/104px button column.
   Collapse the inline row to a single full-width column at EVERY breakpoint so
   the field (and the OTP grid) match the full width of the step's primary
   button. One appended !important rule beats the earlier media-query columns.
   ═════════════════════════════════════ */

body.page-index #signupModal .auth-signup-fields .auth-inline-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}
body.page-index #signupModal .auth-signup-fields .auth-inline-field,
body.page-index #signupModal .auth-signup-fields .ey-otp-grid {
    width: 100% !important;
}

/* ═════════════════════════════════════
   PREMIUM SITE POLISH v11 — storytelling sections
   Problem · Student Benefits (animated counters) · Final CTA.
   Reuses existing tokens, scroll-reveal, and counter JS. Additive only.
   ═════════════════════════════════════ */

body.page-index :is(.problem-section, .benefits-section) {
    padding: clamp(48px, 7vw, 96px) 0;
}

/* ---- Problem ---- */
body.page-index .problem-grid,
body.page-index .benefits-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(16px, 2vw, 24px);
    margin-top: clamp(28px, 4vw, 44px);
}
body.page-index .problem-card {
    position: relative;
    padding: clamp(22px, 2.4vw, 30px);
    border: 1px solid var(--landing-border);
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface-0) 90%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}
body.page-index .problem-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--landing-saffron) 42%, var(--landing-border));
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--landing-saffron) 38%, transparent);
}
body.page-index .problem-icon {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 14px;
    color: var(--landing-saffron);
    background: color-mix(in srgb, var(--landing-saffron) 14%, transparent);
}
body.page-index .problem-icon svg {
    width: 28px;
    height: 28px;
}
body.page-index .problem-card h3 {
    font-size: 1.08rem;
    margin: 0 0 6px;
}
body.page-index .problem-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.94rem;
    line-height: 1.5;
}

@keyframes eyPbTab {
    0%,
    100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}
body.page-index .problem-icon .pb-tab {
    animation: eyPbTab 3s ease-in-out infinite;
}
body.page-index .problem-icon .pb-tab:nth-of-type(2) {
    animation-delay: 0.4s;
}
body.page-index .problem-icon .pb-tab:nth-of-type(3) {
    animation-delay: 0.8s;
}
body.page-index .problem-icon .pb-tab:nth-of-type(4) {
    animation-delay: 1.2s;
}
@keyframes eyPbDash {
    to {
        stroke-dashoffset: 0;
    }
}
body.page-index .problem-icon .pb-line {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: eyPbDash 1.6s ease forwards;
}

/* ---- Student Benefits / counters ---- */
body.page-index .stat-card {
    text-align: center;
    padding: clamp(24px, 3vw, 36px) clamp(18px, 2vw, 28px);
    border: 1px solid var(--landing-border);
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface-0) 92%, transparent);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}
body.page-index .stat-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--landing-lotus-blue) 34%, var(--landing-border));
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--landing-lotus-blue) 36%, transparent);
}
body.page-index .stat-number {
    display: block;
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(
        120deg,
        var(--landing-lotus-blue),
        var(--landing-saffron) 58%,
        var(--landing-india-green)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.page-index .stat-label {
    display: block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--text-strong);
}
body.page-index .stat-label small {
    display: block;
    margin-top: 4px;
    font-weight: 500;
    color: var(--text-soft);
    font-size: 0.8rem;
}

/* ---- Final CTA ---- */
body.page-index .final-cta-section {
    padding: clamp(40px, 6vw, 88px) 0;
}
body.page-index .final-cta-shell {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(40px, 6vw, 72px) clamp(22px, 4vw, 56px);
    border: 1px solid color-mix(in srgb, var(--landing-lotus-blue) 22%, var(--landing-border));
    border-radius: 28px;
    background:
        radial-gradient(
            120% 140% at 50% 0%,
            color-mix(in srgb, var(--landing-lotus-blue) 12%, transparent),
            transparent 60%
        ),
        color-mix(in srgb, var(--surface-0) 94%, transparent);
    box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--landing-lotus-blue) 50%, transparent);
}
body.page-index .final-cta-aurora {
    position: absolute;
    inset: -45% -10% auto -10%;
    height: 85%;
    z-index: 0;
    background:
        radial-gradient(
            40% 60% at 20% 30%,
            color-mix(in srgb, var(--landing-lotus-blue) 30%, transparent),
            transparent 70%
        ),
        radial-gradient(
            40% 60% at 80% 20%,
            color-mix(in srgb, var(--landing-saffron) 24%, transparent),
            transparent 70%
        ),
        radial-gradient(
            40% 60% at 60% 70%,
            color-mix(in srgb, var(--landing-india-green) 22%, transparent),
            transparent 70%
        );
    filter: blur(30px);
    opacity: 0.7;
    animation: eyAuroraDrift 14s ease-in-out infinite alternate;
}
@keyframes eyAuroraDrift {
    from {
        transform: translate3d(-2%, 0, 0) scale(1);
    }
    to {
        transform: translate3d(3%, 2%, 0) scale(1.06);
    }
}
body.page-index .final-cta-shell > :not(.final-cta-aurora) {
    position: relative;
    z-index: 1;
}
body.page-index .final-cta-shell .section-title {
    margin: 14px auto 10px;
    max-width: 22ch;
}
body.page-index .final-cta-shell .section-subtitle {
    margin-bottom: 22px;
}
body.page-index .final-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
body.page-index .final-cta-note {
    margin-top: 18px;
    color: var(--text-soft);
    font-size: 0.86rem;
}

@media (prefers-reduced-motion: reduce) {
    body.page-index .problem-icon .pb-tab,
    body.page-index .problem-icon .pb-line,
    body.page-index .final-cta-aurora {
        animation: none;
    }
    body.page-index .problem-icon .pb-line {
        stroke-dashoffset: 0;
    }
}

/* ═════════════════════════════════════
   PREMIUM ENHANCEMENT LAYER v12
   Signup modal — pixel alignment + spacing lock.
   Goal: every input container on all 4 steps shares ONE content width that
   matches the primary CTA, on a single clean vertical grid, with a consistent
   8px spacing rhythm. Width / alignment / spacing only — no markup, no JS, no
   colors, gradients, typography, illustrations or right-panel changes.
   Scoped to #signupModal so the login modal and the rest of the site are
   untouched. Appended last so it resolves over earlier media-query columns.
   ═════════════════════════════════════ */

/* 1) One shared content column. Header, form and footer already sit inside the
   panel's horizontal padding, so making the form + its rails full width lines
   every left/right edge up automatically. */
body.page-index #signupModal .auth-form-premium,
body.page-index #signupModal .auth-fields,
body.page-index #signupModal .auth-signup-fields {
    width: 100%;
    box-sizing: border-box;
}
body.page-index #signupModal #signupForm .auth-signup-fields {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* 2) Every control in the flow spans the full content width, so its left and
   right edges match the CTA exactly (no element narrower or wider). */
body.page-index #signupModal .auth-google-primary,
body.page-index #signupModal .auth-divider,
body.page-index #signupModal .ey-stepper,
body.page-index #signupModal .ey-step-caption,
body.page-index #signupModal .auth-signup-fields .form-group-modern,
body.page-index #signupModal .auth-signup-fields .input-wrapper-modern,
body.page-index #signupModal .ey-step-nav,
body.page-index #signupModal .auth-terms-row,
body.page-index #signupModal .btn-auth-submit,
body.page-index #signupModal .auth-progress-bar,
body.page-index #signupModal .ey-step-msg,
body.page-index #signupModal .auth-message {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* 3) Email + OTP rows. The inline Send/Verify buttons are hidden inside the
   stepper, so collapse the 2-column inline row to a single full-width column on
   EVERY breakpoint. The field (and the OTP boxes container) then fill the exact
   CTA width instead of reserving a button column. */
body.page-index #signupModal .auth-signup-fields .auth-inline-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
}
body.page-index #signupModal .auth-signup-fields .auth-inline-field,
body.page-index #signupModal .auth-signup-fields .ey-otp-grid {
    width: 100% !important;
    min-width: 0;
}

/* 4) OTP boxes distribute evenly across the full container width so the row's
   left/right edges line up perfectly with the CTA. */
body.page-index #signupModal .auth-signup-fields .ey-otp-grid {
    display: flex;
    gap: 8px;
    margin: 0;
}
body.page-index #signupModal .auth-signup-fields .ey-otp-box {
    flex: 1 1 0;
    min-width: 0;
}

/* 5) Consistent 8px vertical rhythm for the whole left panel. The panel gap
   spaces header -> form -> footer; the form gap spaces Google -> divider ->
   progress -> step title -> input -> nav -> submit; ad-hoc margins are zeroed so
   the grid gaps are the single source of spacing (no cramped/oversized gaps). */
body.page-index #signupModal .auth-primary-panel {
    --ey-stack: 16px;
    gap: var(--ey-stack);
}
body.page-index #signupModal .auth-header {
    gap: 8px;
}
body.page-index #signupModal .auth-form-premium,
body.page-index #signupModal .auth-fields,
body.page-index #signupModal .auth-signup-fields {
    gap: var(--ey-stack);
}
body.page-index #signupModal .ey-stepper,
body.page-index #signupModal .ey-step-caption,
body.page-index #signupModal .ey-step-nav,
body.page-index #signupModal .ey-step-msg,
body.page-index #signupModal .auth-progress-bar,
body.page-index #signupModal .auth-terms-row,
body.page-index #signupModal .btn-auth-submit {
    margin-top: 0;
    margin-bottom: 0;
}

/* 6) Responsive: keep the same proportions on tablet; gently compact the rhythm
   on phones and short viewports so the flow still never needs to scroll. Inputs
   and the CTA stay 100% width with no horizontal overflow. */
@media (max-width: 576px) {
    body.page-index #signupModal .auth-primary-panel {
        --ey-stack: 12px;
    }
}
@media (max-height: 720px) {
    body.page-index #signupModal .auth-primary-panel {
        --ey-stack: 10px;
    }
}

/* Keep the signup title from wrapping into a narrow stack in the split dialog. */
body.page-index #signupModal .auth-title {
    max-width: 24ch;
}
@media (max-width: 576px) {
    body.page-index #signupModal .auth-title {
        max-width: 20ch;
    }
}

/* ═════════════════════════════════════
   PREMIUM ENHANCEMENT LAYER v13
   Bulletproof width lock for the inline (Email + OTP) entries.
   Root cause of the narrow email box: the inline row kept a reserved ~120px
   column for the "Send code" button (grid-template-columns: minmax(0,1fr) 120px),
   so the field only filled the 1fr track. Here we force the row to a single
   full-width column with the highest practical specificity, and we make the
   field + input fill it. Safe with or without JS: if the stepper is active the
   inline button is hidden; if JS never runs, the button simply drops to a
   full-width row beneath the field (flow preserved, nothing broken).
   Width / alignment only. Scoped to #signupModal > #signupForm.
   ═════════════════════════════════════ */
body.page-index #signupModal #signupForm .auth-signup-fields .auth-inline-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    width: 100% !important;
}
body.page-index #signupModal #signupForm .auth-signup-fields > .form-group-modern,
body.page-index #signupModal #signupForm .auth-signup-fields .input-wrapper-modern {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
body.page-index #signupModal #signupForm .auth-signup-fields .auth-inline-field {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
}
body.page-index #signupModal #signupForm .auth-signup-fields .ey-otp-grid {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}
/* If JS is unavailable, the inline Send/Verify button stays usable and simply
   spans the full width directly below its field (no reserved side column). */
body.page-index #signupModal #signupForm .auth-signup-fields .auth-inline-row > .btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 8px;
}
/* The actual inputs always fill their container edge-to-edge. */
body.page-index #signupModal #signupForm .form-input-modern,
body.page-index #signupModal #signupForm .auth-flex-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================================
   EY PERFORMANCE LAYER (appended)
   Goal: faster first paint + smoother scroll/animation on
   desktop AND mobile. Override-only — no markup changes,
   no visual redesign. Safe to keep at the very end of the file.
   ============================================================ */

/* 1. GPU compositing hints for the interactive/animated layers.
      Promotes transform/opacity work off the main thread so it does
      not repaint the page while scrolling or hovering. */
body.page-index :is(
    #mouseGlow,
    .hero-orb,
    .hero-orbit-spin,
    .hero-preview-main,
    .testimonial-card,
    .btn-magnetic,
    .ey-illus-watermark,
    [class*="blob"],
    [class*="aurora"],
    [class*="orbit"],
    [class*="drift"]
) {
    will-change: transform;
}

/* 2. Defer rendering + layout of below-the-fold sections until they
      are near the viewport. This is the biggest win for "lags to load":
      the browser skips painting off-screen sections on first load.
      `contain-intrinsic-size: auto <h>` lets the browser remember the
      real height after first render so the scrollbar does not jump. */
@supports (content-visibility: auto) {
    body.page-index :is(
        .study-loop-section,
        .saarthi-signature,
        .benefits-section,
        .testimonials-section,
        .pricing-section
    ) {
        content-visibility: auto;
        contain-intrinsic-size: auto 900px;
    }
}

/* 3. Constrain layout/paint scope of repeated cards so a hover or
      reveal on one card cannot force a reflow of the whole grid.
      (No `paint` containment — that would clip shadows.) */
body.page-index :is(
    .feature-card,
    .highlight-card,
    .testimonial-card,
    .pricing-card,
    .benefit-card
) {
    contain: layout style;
}

/* 4. MOBILE / TOUCH: kill the always-running decorative animations and
      trim expensive backdrop blur. Continuous infinite animations plus
      backdrop-filter are the main causes of dropped frames and battery
      drain on phones. Content and layout are untouched. */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
    body.page-index :is(
        [class*="orb"],
        [class*="blob"],
        [class*="aurora"],
        [class*="drift"],
        [class*="orbit"],
        [class*="particle"],
        [class*="float"],
        [class*="glow"],
        [class*="aura"],
        [class*="twinkle"],
        [class*="watermark"],
        [class*="sheen"],
        [class*="chakra"],
        [class*="ripple"],
        .ey-hero-fx,
        .ey-hero-fx *,
        .hero-shape
    ) {
        animation: none !important;
    }

    /* Blur radius is the costly part of backdrop-filter on GPUs. Cap it. */
    body.page-index :is(
        .public-navbar,
        #publicNavbar,
        .modal-content,
        .modal-backdrop,
        .auth-mini-card,
        .auth-workflow-item,
        .hero-preview-card,
        [class*="glass"]
    ) {
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }

    /* Mouse-driven glow is pointless on touch; make sure it is gone. */
    body.page-index #mouseGlow {
        display: none !important;
    }
}

/* 5. Respect reduced-motion everywhere: neutralize animation and long
      transitions but keep the layout fully intact. */
@media (prefers-reduced-motion: reduce) {
    body.page-index *,
    body.page-index *::before,
    body.page-index *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Final auth layout guardrails for short screens and narrow devices. */
body.page-index :is(#loginModal, #signupModal) .auth-experience-modal {
    max-height: min(880px, calc(100dvh - 16px));
    overflow: hidden;
    background: var(--surface-0);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.page-index :is(#loginModal, #signupModal) .auth-shell {
    min-height: 0;
    max-height: inherit;
}

body.page-index :is(#loginModal, #signupModal) .auth-primary-panel {
    min-height: 0;
    max-height: min(880px, calc(100dvh - 16px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
    background: var(--surface-0);
}

body.page-index :is(#loginModal, #signupModal) .form-input-modern:focus-visible,
body.page-index :is(#loginModal, #signupModal) .password-toggle:focus-visible,
body.page-index :is(#loginModal, #signupModal) .auth-close-btn:focus-visible,
body.page-index :is(#loginModal, #signupModal) .btn-google-auth:focus-visible,
body.page-index :is(#loginModal, #signupModal) .btn-auth-submit:focus-visible,
body.page-index :is(#loginModal, #signupModal) .auth-link:focus-visible,
body.page-index :is(#loginModal, #signupModal) .forgot-link:focus-visible,
body.page-index :is(#loginModal, #signupModal) .auth-legal-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-1) 48%, transparent);
    outline-offset: 3px;
}

body.page-index :is(#loginModal, #signupModal) .auth-login-options {
    justify-content: flex-end;
}

body.page-index :is(#loginModal, #signupModal) .auth-visual-panel {
    min-width: 0;
    background: linear-gradient(155deg, #12223b 0%, #176c78 55%, #16715d 100%);
}

body.page-index #signupModal .auth-visual-signup {
    background: linear-gradient(155deg, #182342 0%, #3a5381 55%, #276a62 100%);
}

body.page-index .auth-password-hint {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

body.page-index .auth-reset-modal {
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: var(--surface-0);
    color: var(--text-strong);
}

body.page-index .auth-reset-modal .p-4 {
    display: grid;
    gap: 14px;
    padding: clamp(22px, 5vw, 36px) !important;
}

body.page-index .auth-reset-modal h2 {
    margin: 0 !important;
    font-size: 1.7rem;
    line-height: 1.2;
}

body.page-index .auth-reset-modal .form-label-modern {
    display: block;
    margin-bottom: 7px;
}

body.page-index .auth-reset-modal .form-input-modern {
    width: 100%;
    min-height: 50px;
    padding: 12px 46px 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--surface-1);
    color: var(--text-strong);
    font-size: 16px;
}

body.page-index .auth-reset-modal .auth-password-hint {
    margin-top: -8px;
}

body.page-index .auth-submessage {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    body.page-index :is(#loginModal, #signupModal) .modal-dialog {
        width: calc(100vw - 24px);
        max-width: 560px;
        min-height: calc(100dvh - 16px);
        height: auto;
        margin: 8px auto;
        align-items: center;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-experience-modal {
        max-height: calc(100dvh - 16px);
        border-radius: 24px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-shell {
        display: block;
        max-height: calc(100dvh - 16px);
    }

    body.page-index :is(#loginModal, #signupModal) .auth-visual-panel {
        display: none;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-primary-panel {
        max-height: calc(100dvh - 16px);
        padding: 24px clamp(18px, 6vw, 32px);
        scrollbar-gutter: auto;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-inline-row {
        grid-template-columns: minmax(0, 1fr) 104px;
        gap: 8px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-inline-row .btn {
        width: auto;
        padding-inline: 8px;
        font-size: 0.86rem;
    }
}

@media (max-width: 359.98px) {
    body.page-index :is(#loginModal, #signupModal) .auth-primary-panel {
        padding-inline: 16px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-inline-row {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-index :is(#loginModal, #signupModal) .auth-inline-row .btn {
        width: 100%;
    }
}

@media (max-height: 700px) {
    body.page-index :is(#loginModal, #signupModal) .modal-dialog {
        margin-block: 8px;
    }

    body.page-index :is(#loginModal, #signupModal) .auth-experience-modal,
    body.page-index :is(#loginModal, #signupModal) .auth-primary-panel {
        max-height: calc(100dvh - 16px);
    }
}

/* Calm the first screen and give the product copy the lead. */
body.page-index .landing-hero-shell {
    background: var(--surface-0);
    box-shadow: var(--landing-shadow-strong);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.page-index .landing-hero-shell::after,
body.page-index .hero-noise,
body.page-index .hero-orb,
body.page-index .ey-hero-fx {
    display: none !important;
}

body.page-index .hero-brand-row {
    width: fit-content;
    justify-items: start;
    gap: 0.3rem;
}

body.page-index .hero-brand-logo {
    width: clamp(52px, 6vw, 70px);
    justify-self: start;
    filter: none;
}

body.page-index .hero-typing-line {
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    justify-content: flex-start;
    text-align: left;
    font-size: 0.88rem;
    font-weight: 650;
}

body.page-index .hero-copy h1 {
    max-width: 20ch;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

body.page-index .hero-preview-card {
    box-shadow: none;
    background: var(--surface-0);
}

@media (max-width: 991.98px) {
    body.page-index .hero-brand-row {
        margin-inline: auto;
        justify-items: center;
    }

    body.page-index .hero-brand-logo {
        justify-self: center;
    }

    body.page-index .hero-typing-line {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 576px) {
    body.page-index .landing-hero-shell {
        border-radius: 18px;
        padding: 0.85rem;
        box-shadow: var(--landing-shadow);
    }

    body.page-index .hero-copy h1 {
        max-width: 17ch;
    }
}

@media (max-width: 400px) {
    body.page-index .public-actions {
        gap: 0.4rem;
    }

    body.page-index .public-actions .btn-gradient-primary {
        min-width: 0;
        padding-inline: 0.62rem;
        font-size: 0.86rem;
        white-space: nowrap;
    }
}

@media (max-width: 991.98px) {
    body.page-index .public-actions .btn-gradient-primary {
        padding-inline: 0.7rem;
        font-size: 0.92rem;
        white-space: nowrap;
    }
}

body.page-index.dark-mode .hero-brand-logo {
    filter: brightness(1.32) saturate(1.08) drop-shadow(0 2px 4px rgba(2, 8, 23, 0.38));
}