/* Trial 2 mobile only. Desktop/web styles stay in index-trial2.css */

@media (max-width: 800px) {
    body.sr-trial-v2 header .header-content {
        padding: 8px 8px;
        gap: 8px;
    }

    .trial-hero {
        min-height: 100dvh;
    }

    .trial-hero-brand {
        inset: auto 0 0 0;
        height: 22%;
        min-height: 118px;
        z-index: 3;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        background:
            linear-gradient(180deg, #081426 0%, #0b1a34 48%, #07111f 100%);
    }

    .trial-hero-brand::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 3px;
        z-index: 2;
        background: linear-gradient(90deg, #fff6d0, #ffd45c 22%, #f4b740 50%, #ffd45c 78%, #fff6d0);
        box-shadow:
            0 0 8px 2px rgba(255, 215, 0, 0.9),
            0 0 18px 4px rgba(244, 183, 64, 0.55);
    }

    .trial-hero-curve {
        display: none !important;
    }

    .trial-hero::after {
        display: none !important;
        content: none;
        background: none;
    }

    .trial-hero-brand-inner {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 14px 16px 14px 22px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 18px;
        text-align: left;
    }

    .trial-hero-brand-inner::after {
        content: "";
        flex: 0 0 64px;
        width: 64px;
        height: 1px;
        margin: 12px 8px 4px calc(6px + 10vw);
        order: -1;
    }

    .trial-hero-aura {
        position: absolute;
        z-index: 0;
        width: 88px;
        height: 88px;
        max-width: none;
        left: calc(54px + 10vw);
        top: calc(50% + 8px);
        transform: translate(-50%, -50%);
        background:
            radial-gradient(circle, rgba(255, 236, 170, 0.45) 0%, rgba(244, 183, 64, 0.22) 36%, transparent 70%);
        box-shadow:
            0 0 0 2px rgba(255, 236, 170, 0.95),
            0 0 0 8px rgba(244, 183, 64, 0.32),
            0 0 18px 6px rgba(255, 215, 0, 0.65),
            0 0 36px 12px rgba(244, 183, 64, 0.45);
        animation: trialMobileAura 2.8s ease-in-out infinite;
    }

    .trial-hero-logo {
        position: absolute;
        z-index: 1;
        width: 58px;
        max-width: 58px;
        height: auto;
        left: calc(54px + 10vw);
        top: calc(50% + 8px);
        margin: 0;
        transform: translate(-50%, -50%);
        filter:
            drop-shadow(0 0 6px rgba(255, 236, 170, 1))
            drop-shadow(0 0 14px rgba(244, 183, 64, 0.95))
            drop-shadow(0 0 28px rgba(212, 160, 23, 0.8));
        animation: trialMobileLogoGlow 2.8s ease-in-out infinite;
    }

    .trial-tagline {
        flex: 1 1 auto;
        margin: 40px 30px 30px 30px;
        max-width: none;
        color: #fff;
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.3;
        letter-spacing: 0.02em;
        text-align: left;
        text-shadow: 0 0 12px rgba(244, 183, 64, 0.35);

    }

    .trial-hero-auth {
        padding: 72px 12px 16px;
        place-items: end center;
    }

    .trial-hero-auth__panel {
        margin-right: 0;
        max-height: calc(100dvh - 88px);
    }

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

    .trial-hero-overlay {
        background:
            linear-gradient(180deg, rgba(7, 16, 31, 0.12) 0%, rgba(7, 16, 31, 0.08) 55%, rgba(7, 16, 31, 0.2) 78%, transparent 100%);
    }
}

@media (max-width: 600px) {
    body.sr-trial-v2 header .logo img {
        max-height: 34px !important;
    }

    .trial-hero {
        min-height: calc(100dvh - 4.5rem);
    }

    .trial-hero-brand {
        min-height: 108px;
    }

    .trial-hero-brand-inner {
        gap: 14px;
        padding: 12px 14px 12px 18px;
    }

    .trial-hero-aura {
        width: 78px;
        height: 78px;
        left: calc(28px + 10vw);
        top: calc(50% + 8px);
    }

    .trial-hero-logo {
        width: 52px;
        max-width: 52px;
        left: calc(28px + 10vw);
        top: calc(50% + 8px);
    }

    .trial-hero-brand-inner::after {
        flex-basis: 56px;
        width: 56px;
        margin: 12px 6px 4px calc(1px + 10vw);
    }

    .trial-tagline {
        font-size: 1.5rem;
    }
}

@keyframes trialMobileAura {
    0%, 100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@keyframes trialMobileLogoGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 6px rgba(255, 236, 170, 1))
            drop-shadow(0 0 14px rgba(244, 183, 64, 0.95))
            drop-shadow(0 0 28px rgba(212, 160, 23, 0.8));
    }
    50% {
        filter:
            drop-shadow(0 0 10px rgba(255, 248, 210, 1))
            drop-shadow(0 0 22px rgba(255, 215, 0, 1))
            drop-shadow(0 0 40px rgba(244, 183, 64, 0.95));
    }
}

@media (max-width: 800px) {
    .trial-city-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .trial-city-left {
        gap: 18px;
    }

    .trial-city-intro h2 {
        font-size: 1.8rem;
    }

    .trial-city-cards {
        gap: 12px;
    }

    .trial-city-card {
        border-radius: 16px;
    }

    .trial-city-card strong {
        font-size: 0.86rem;
    }

    .trial-city-card em {
        font-size: 0.72rem;
    }

    .trial-india-map__frame {
        max-width: 340px;
    }

    .trial-city-hero {
        min-height: 240px;
        padding: 24px 0 30px;
    }

    .trial-lead-modal {
        padding: 12px;
    }

    .trial-lead-modal__panel {
        padding: 20px 16px 18px;
        border-radius: 20px;
    }
}