:root {
        --navy: #0A1F44;
        --navy-light: #0f2a5c;
        --saffron: #FF6B00;
        --saffron-dark: #cc5500;
        --saffron-light: #FFF4EC;
        --white: #FFFFFF;
        --grey-text: #8A94A6;
        --grey-light: #F4F6FA;
        --border: #E8ECF4;
        --india-green: #138808;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
        font-family: 'DM Sans', sans-serif;
        background: var(--white);
        color: var(--navy);
        overflow-x: hidden;
    }

    h1,h2,h3,h4,h5 { font-family: 'Poppins', sans-serif; }

    /* ─── NAVBAR ─── */
    nav {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 1000;
        background: var(--navy);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 64px;
        height: 72px;
        box-shadow: 0 2px 24px rgba(0,0,0,0.25);
        transition: box-shadow 0.3s;
    }

    .nav-logo {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
    }

    .nav-logo img {
    height: 44px;
    width: 44px;
    object-fit: contain;
    border-radius: 6px;
    transition: transform 0.3s;
    filter: drop-shadow(0 2px 8px rgba(255,107,0,0.3));
    }
    .nav-logo:hover img { transform: scale(1.08); }

    .logo-text {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 18px;
        color: var(--white);
        line-height: 1.1;
    }
    .logo-text span { color: var(--saffron); }

    .nav-links {
        display: flex;
        gap: 40px;
        list-style: none;
    }
    .nav-links a {
        color: rgba(255,255,255,0.75);
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        transition: color 0.2s;
        position: relative;
        padding-bottom: 4px;
    }
    .nav-links a::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0;
        width: 0; height: 2px;
        background: var(--saffron);
        transition: width 0.3s;
        border-radius: 2px;
    }
    .nav-links a:hover { color: var(--white); }
    .nav-links a:hover::after { width: 100%; }

    .nav-right {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .lang-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 100px;
        padding: 8px 14px 8px 10px;
        color: var(--white);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s;
        user-select: none;
        white-space: nowrap;
    }
    .lang-toggle:hover { background: rgba(255,255,255,0.18); }
    .globe-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; }
    .lang-arrow { font-size: 9px; opacity: 0.7; margin-left: 1px; }

    .btn-login {
        background: var(--saffron);
        color: var(--white);
        border: none;
        border-radius: 8px;
        padding: 10px 24px;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.2s, transform 0.15s;
    }
    .btn-login:hover { background: var(--saffron-dark); transform: translateY(-1px); }

    /* ─── ANNOUNCEMENT BANNER ─── */
    .announcement {
        position: fixed;
        top: 72px; left: 0; right: 0;
        z-index: 999;
        background: linear-gradient(90deg, var(--saffron), #ff8c42);
        color: var(--white);
        text-align: center;
        padding: 10px 64px;
        font-size: 13px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }
    .announcement-close {
        position: absolute;
        right: 24px;
        cursor: pointer;
        opacity: 0.8;
        font-size: 18px;
        transition: opacity 0.2s;
    }
    .announcement-close:hover { opacity: 1; }

    /* ─── HERO ─── */
    .hero {
        background: var(--navy);
        min-height: 100vh;
        padding: 184px 64px 96px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 64px;
        position: relative;
        overflow: hidden;
    }

    .hero::before {
        content: '';
        position: absolute;
        top: -200px; right: -200px;
        width: 600px; height: 600px;
        background: radial-gradient(circle, rgba(255,107,0,0.12) 0%, transparent 70%);
        pointer-events: none;
    }

    .hero::after {
        content: '';
        position: absolute;
        bottom: -100px; left: -100px;
        width: 400px; height: 400px;
        background: radial-gradient(circle, rgba(19,136,8,0.08) 0%, transparent 70%);
        pointer-events: none;
    }

    .hero-left {
        flex: 1;
        max-width: 560px;
        z-index: 1;
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255,107,0,0.15);
        border: 1px solid rgba(255,107,0,0.4);
        border-radius: 100px;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        color: var(--saffron);
        margin-bottom: 32px;
        animation: fadeInUp 0.6s ease both;
    }

    .hero h1 {
        font-size: 62px;
        font-weight: 800;
        line-height: 1.1;
        color: var(--white);
        margin-bottom: 24px;
        animation: fadeInUp 0.6s 0.1s ease both;
    }
    .hero h1 span { color: var(--saffron); }

    .hero-subtitle {
        font-size: 18px;
        color: rgba(255,255,255,0.65);
        line-height: 1.7;
        margin-bottom: 40px;
        animation: fadeInUp 0.6s 0.2s ease both;
    }

    .hero-btns {
        display: flex;
        gap: 16px;
        animation: fadeInUp 0.6s 0.3s ease both;
    }

    .btn-primary {
        background: var(--saffron);
        color: var(--white);
        border: none;
        border-radius: 8px;
        padding: 16px 32px;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
        box-shadow: 0 4px 20px rgba(255,107,0,0.35);
    }
    .btn-primary:hover {
        background: var(--saffron-dark);
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(255,107,0,0.45);
    }

    .btn-secondary {
        background: transparent;
        color: var(--white);
        border: 2px solid rgba(255,255,255,0.4);
        border-radius: 8px;
        padding: 14px 32px;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 16px;
        cursor: pointer;
        transition: border-color 0.2s, background 0.2s, transform 0.15s;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .btn-secondary:hover {
        border-color: var(--white);
        background: rgba(255,255,255,0.08);
        transform: translateY(-2px);
    }

    .play-icon {
        width: 28px; height: 28px;
        background: var(--white);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }
    .play-icon::after {
        content: '';
        border-left: 9px solid var(--navy);
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        margin-left: 2px;
    }

    /* Hero Right - Phone Mockup */
    .hero-right {
        flex: 0 0 480px;
        z-index: 1;
        animation: fadeInRight 0.8s 0.2s ease both;
    }

    .phone-mockup {
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 32px;
        padding: 24px;
        backdrop-filter: blur(10px);
        position: relative;
    }

    .phone-top-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .phone-avatar {
        width: 40px; height: 40px;
        background: var(--saffron);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 18px;
    }
    .phone-title { color: var(--white); font-weight: 600; font-size: 15px; }
    .phone-subtitle { color: rgba(255,255,255,0.5); font-size: 12px; }
    .online-dot {
        width: 8px; height: 8px;
        background: #22c55e;
        border-radius: 50%;
        margin-left: auto;
        box-shadow: 0 0 8px #22c55e;
        animation: pulse 2s infinite;
    }

    .chat-bubble {
        border-radius: 16px;
        padding: 12px 16px;
        font-size: 14px;
        margin-bottom: 12px;
        line-height: 1.5;
        max-width: 85%;
    }
    .chat-bubble.ai {
        background: rgba(255,255,255,0.1);
        color: var(--white);
        border-bottom-left-radius: 4px;
    }
    .chat-bubble.user {
        background: var(--saffron);
        color: var(--white);
        margin-left: auto;
        border-bottom-right-radius: 4px;
    }
    .chat-bubble.hindi { font-size: 15px; }

    .chat-input-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(255,255,255,0.1);
        border-radius: 12px;
        padding: 10px 16px;
        margin-top: 16px;
    }
    .chat-input-text { color: rgba(255,255,255,0.4); font-size: 13px; flex: 1; }
    .chat-send-btn {
        width: 32px; height: 32px;
        background: var(--saffron);
        border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        font-size: 14px;
    }

    /* India flag accent */
    .india-stripe {
        height: 4px;
        background: linear-gradient(90deg, var(--saffron) 33.3%, var(--white) 33.3%, var(--white) 66.6%, var(--india-green) 66.6%);
        border-radius: 2px;
        margin-bottom: 20px;
    }

    /* ─── STATS BAR ─── */
    .stats-bar {
        background: linear-gradient(135deg, var(--saffron) 0%, #e85d00 100%);
        padding: 48px 64px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: relative;
        overflow: hidden;
    }
    .stats-bar::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
    }

    .stat-item {
        text-align: center;
        flex: 1;
        position: relative;
    }
    .stat-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0; top: 50%;
        transform: translateY(-50%);
        height: 48px;
        width: 1px;
        background: rgba(255,255,255,0.4);
    }
    .stat-number {
        font-family: 'Poppins', sans-serif;
        font-size: 40px;
        font-weight: 800;
        color: var(--white);
        line-height: 1;
        margin-bottom: 6px;
    }
    .stat-label {
        font-size: 14px;
        font-weight: 500;
        color: rgba(255,255,255,0.85);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* ─── FEATURES ─── */
    .features {
        background: var(--grey-light);
        padding: 96px 64px;
        position: relative;
        overflow: hidden;
    }
    .features::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--saffron) 33%, white 33%, white 66%, var(--india-green) 66%);
        background-size: 300% 100%;
        animation: flagSlide 4s linear infinite;
    }
    @keyframes flagSlide {
        0%   { background-position: 100% 0; }
        100% { background-position: -100% 0; }
    }
    .features::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(10,31,68,0.06) 1px, transparent 1px);
        background-size: 32px 32px;
        pointer-events: none;
    }

    .section-header {
        text-align: center;
        margin-bottom: 56px;
    }
    .section-tag {
        display: inline-block;
        background: var(--saffron-light);
        color: var(--saffron);
        border-radius: 100px;
        padding: 6px 16px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 16px;
    }
    .section-title {
        font-size: 40px;
        font-weight: 800;
        color: var(--navy);
        margin-bottom: 16px;
    }
    .section-subtitle {
        font-size: 17px;
        color: var(--grey-text);
        max-width: 560px;
        margin: 0 auto;
        line-height: 1.7;
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .feature-card {
        background: var(--white);
        border-radius: 20px;
        padding: 32px;
        border: 1px solid var(--border);
        position: relative;
        cursor: pointer;
        transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, border-color 0.3s;
        overflow: hidden;
        z-index: 1;
    }
    .feature-card::after {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 60%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,107,0,0.06), transparent);
        transition: left 0.5s ease;
        pointer-events: none;
    }
    .feature-card:hover::after { left: 150%; }
    .feature-card::before {
        content: '';
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, var(--saffron), #ff8c42);
        border-radius: 4px 0 0 4px;
        transform: scaleY(0);
        transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
        transform-origin: bottom;
    }
    .feature-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 24px 56px rgba(10,31,68,0.13);
        border-color: rgba(255,107,0,0.2);
    }
    .feature-card:hover::before { transform: scaleY(1); }

    .card-badge {
        position: absolute;
        top: 16px; right: 16px;
        background: var(--saffron);
        color: var(--white);
        font-size: 10px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 100px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .card-icon {
        width: 56px; height: 56px;
        border-radius: 14px;
        display: flex; align-items: center; justify-content: center;
        font-size: 26px;
        margin-bottom: 20px;
        transition: transform 0.3s;
    }
    .feature-card:hover .card-icon { transform: scale(1.1) rotate(-5deg); }

    .icon-green { background: #DCFCE7; }
    .icon-red { background: #FFE4E4; }
    .icon-blue { background: #DBEAFE; }
    .icon-purple { background: #EDE9FE; }
    .icon-yellow { background: #FEF9C3; }
    .icon-teal { background: #CCFBF1; }

    .card-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--navy);
        margin-bottom: 10px;
    }
    .card-desc {
        font-size: 14px;
        color: var(--grey-text);
        line-height: 1.65;
        margin-bottom: 20px;
    }
    .card-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--saffron);
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        transition: gap 0.2s;
    }
    .card-link:hover { gap: 10px; }

    /* ─── TESTIMONIALS ─── */
    .testimonials {
        background: #060f24;
        padding: 96px 64px;
        position: relative;
        overflow: hidden;
    }
    .testimonials::before {
        content: '';
        position: absolute;
        top: -200px; right: -200px;
        width: 600px; height: 600px;
        background: radial-gradient(circle, rgba(255,107,0,0.06) 0%, transparent 70%);
        pointer-events: none;
    }
    .testimonials::after {
        content: '';
        position: absolute;
        bottom: -150px; left: -150px;
        width: 500px; height: 500px;
        background: radial-gradient(circle, rgba(19,136,8,0.05) 0%, transparent 70%);
        pointer-events: none;
    }
    .testimonials .section-tag { background: rgba(255,107,0,0.15); }
    .testimonials .section-title { color: var(--white); }
    .testimonials .section-subtitle { color: rgba(255,255,255,0.5); }

    .testimonials-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 56px;
        align-items: stretch;
        position: relative;
        z-index: 1;
    }

    .testi-card {
        background: rgba(255,255,255,0.04);
        border-radius: 20px;
        padding: 32px;
        border: 1px solid rgba(255,255,255,0.08);
        transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, border-color 0.3s;
        position: relative;
        display: flex;
        flex-direction: column;
        backdrop-filter: blur(8px);
        overflow: hidden;
    }
    .testi-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255,107,0,0.06) 0%, transparent 60%);
        opacity: 0;
        transition: opacity 0.3s;
    }
    .testi-card:hover {
        transform: translateY(-8px) scale(1.01);
        box-shadow: 0 24px 64px rgba(255,107,0,0.18);
        border-color: rgba(255,107,0,0.35);
    }
    .testi-card:hover::before { opacity: 1; }
    .testi-quote { flex: 1; }

    .quote-icon {
        font-size: 56px;
        color: var(--saffron);
        opacity: 0.25;
        line-height: 1;
        font-family: Georgia, serif;
        margin-bottom: 8px;
    }

    .stars {
        display: flex;
        gap: 3px;
        margin-bottom: 16px;
    }
    .star { color: var(--saffron); font-size: 16px; }
    .star.empty { color: rgba(255,255,255,0.15); }

    .testi-quote {
        font-size: 15px;
        color: rgba(255,255,255,0.75);
        line-height: 1.8;
        margin-bottom: 24px;
        font-style: italic;
    }

    .testi-author {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-top: 20px;
        margin-top: auto;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .author-avatar {
        width: 44px; height: 44px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 16px;
        color: var(--white);
        flex-shrink: 0;
        border: 2px solid rgba(255,255,255,0.15);
    }
    .av-orange { background: var(--saffron); }
    .av-navy { background: #1e3a6e; }
    .av-green { background: var(--india-green); }

    .author-name {
        font-weight: 700;
        font-size: 14px;
        color: var(--white);
    }
    .author-loc {
        font-size: 12px;
        color: rgba(255,255,255,0.45);
        margin-top: 2px;
    }
    .verified-badge {
        margin-left: auto;
        background: rgba(34,197,94,0.15);
        color: #4ade80;
        font-size: 11px;
        font-weight: 700;
        padding: 5px 10px;
        border-radius: 100px;
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        flex-shrink: 0;
        border: 1px solid rgba(34,197,94,0.25);
    }

    /* ─── CTA BANNER ─── */
    .cta-banner {
        background: var(--navy);
        padding: 112px 64px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .cta-banner::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 600px; height: 600px;
        border-radius: 50%;
        border: 1px solid rgba(255,107,0,0.1);
        animation: ringPulse 4s ease-in-out infinite;
        pointer-events: none;
    }
    .cta-banner::after {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 900px; height: 900px;
        border-radius: 50%;
        border: 1px solid rgba(255,107,0,0.05);
        animation: ringPulse 4s 2s ease-in-out infinite;
        pointer-events: none;
    }
    @keyframes ringPulse {
        0%,100% { transform: translate(-50%,-50%) scale(0.9); opacity: 0.5; }
        50% { transform: translate(-50%,-50%) scale(1.05); opacity: 1; }
    }
    .cta-inner { position: relative; z-index: 1; }

    .cta-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--saffron);
        background: rgba(255,107,0,0.1);
        border: 1px solid rgba(255,107,0,0.25);
        padding: 6px 16px;
        border-radius: 100px;
        margin-bottom: 24px;
    }
    .cta-title {
        font-size: 48px;
        font-weight: 800;
        color: var(--white);
        max-width: 720px;
        margin: 0 auto 16px;
        line-height: 1.15;
    }
    .cta-title span { color: var(--saffron); }
    .cta-sub {
        color: rgba(255,255,255,0.55);
        font-size: 18px;
        margin-bottom: 48px;
    }
    .cta-btns {
        display: flex;
        justify-content: center;
        gap: 16px;
    }
    .india-flag-row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 56px;
        color: rgba(255,255,255,0.35);
        font-size: 13px;
    }
    .flag-stripe { width: 32px; height: 4px; border-radius: 2px; }
    .fs-orange { background: var(--saffron); }
    .fs-white { background: rgba(255,255,255,0.4); }
    .fs-green { background: var(--india-green); }

    /* ─── FOOTER FIX ─── */
    footer {
        background: #040a1a;
        padding: 80px 64px 40px;
        color: rgba(255,255,255,0.7);
        border-top: 1px solid rgba(255,255,255,0.1);
        position: relative;
        z-index: 10;
        width: 100%;
        display: block;
        clear: both;
    }

    .footer-top {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
        gap: 48px;
        margin-bottom: 56px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-brand .logo-text { 
        font-size: 20px; 
        margin-bottom: 12px; 
        display: block; 
        color: white; 
    }
    
    .footer-tagline {
        font-size: 14px;
        line-height: 1.7;
        max-width: 280px;
        margin-bottom: 24px;
    }

    .footer-col h5 {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--white);
        margin-bottom: 20px;
    }

    .footer-col ul { list-style: none; padding: 0; }
    .footer-col li { margin-bottom: 12px; }
    .footer-col a {
        color: rgba(255,255,255,0.5);
        text-decoration: none;
        font-size: 14px;
        transition: color 0.2s;
    }
    .footer-col a:hover { color: var(--saffron); }

    .footer-bottom {
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* ─── ANIMATIONS ─── */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(24px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeInRight {
        from { opacity: 0; transform: translateX(40px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
    }
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-12px); }
    }

    /* Animation Assignments */
    .hero-badge { animation: fadeInUp 0.6s ease both; }
    .hero h1 { animation: fadeInUp 0.6s 0.1s ease both; }
    .hero-subtitle { animation: fadeInUp 0.6s 0.2s ease both; }
    .hero-btns { animation: fadeInUp 0.6s 0.3s ease both; }
    .hero-right { animation: fadeInRight 0.8s 0.3s ease both; }
    .phone-mockup { animation: float 5s ease-in-out infinite; }

    /* ─── HOW IT WORKS ─── */
    .how-it-works {
        background: #060f24;
        padding: 96px 64px;
        position: relative;
        overflow: hidden;
    }
    .how-it-works::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
        radial-gradient(ellipse 60% 40% at 20% 50%, rgba(255,107,0,0.07) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 50%, rgba(10,31,68,0.9) 0%, transparent 70%);
        pointer-events: none;
    }
    .how-it-works::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
        linear-gradient(rgba(255,107,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,107,0,0.04) 1px, transparent 1px);
        background-size: 48px 48px;
        pointer-events: none;
    }

    .how-it-works .section-header .section-tag { background: rgba(255,107,0,0.15); }
    .how-it-works .section-title { color: var(--white); }
    .how-it-works .section-subtitle { color: rgba(255,255,255,0.5); }

    .steps-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        margin-bottom: 56px;
        position: relative;
        z-index: 1;
    }

    .steps-row::before {
        content: '';
        position: absolute;
        top: 72px;
        left: 15%;
        right: 15%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--saffron), var(--saffron), transparent);
        opacity: 0.4;
        z-index: 0;
    }

    .step-card {
        background: rgba(255,255,255,0.04);
        border-radius: 24px;
        padding: 40px 28px 32px;
        text-align: center;
        flex: 1;
        max-width: 260px;
        border: 1px solid rgba(255,255,255,0.08);
        transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
        position: relative;
        z-index: 1;
        backdrop-filter: blur(8px);
    }
    .step-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 32px 64px rgba(255,107,0,0.15);
        border-color: var(--saffron);
    }

    .step-number {
        position: absolute;
        top: -14px;
        right: -10px;
        background: var(--saffron);
        color: var(--white);
        font-family: 'Poppins', sans-serif;
        font-size: 12px;
        font-weight: 800;
        width: 36px; height: 36px;
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 16px rgba(255,107,0,0.5);
        letter-spacing: 0;
    }

    .step-icon-wrap {
        width: 88px; height: 88px;
        background: rgba(255,255,255,0.06);
        border-radius: 22px;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 24px;
        border: 1.5px solid rgba(255,255,255,0.1);
        transition: border-color 0.3s, background 0.3s, transform 0.4s;
        position: relative;
    }
    .step-card:hover .step-icon-wrap {
        border-color: var(--saffron);
        background: rgba(255,107,0,0.1);
        transform: scale(1.06) rotate(-3deg);
    }
    .step-icon-wrap::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 26px;
        border: 2px solid var(--saffron);
        opacity: 0;
        transition: opacity 0.3s;
    }
    .step-card:hover .step-icon-wrap::after { opacity: 1; }

    .step-icon-wrap svg { filter: drop-shadow(0 0 8px rgba(255,107,0,0.4)); }

    .step-title {
        font-size: 17px;
        font-weight: 700;
        color: var(--white);
        margin-bottom: 10px;
    }
    .step-desc {
        font-size: 13px;
        color: rgba(255,255,255,0.5);
        line-height: 1.7;
    }

    .step-connector {
        display: flex;
        align-items: center;
        padding: 0 12px;
        flex-shrink: 0;
        z-index: 1;
        margin-top: -60px;
    }
    .connector-line { display: none; }
    .connector-arrow {
        color: var(--saffron);
        font-size: 28px;
        opacity: 0.6;
        animation: arrowPulse 1.8s ease-in-out infinite;
    }
    @keyframes arrowPulse {
        0%,100% { opacity: 0.4; transform: translateX(0); }
        50% { opacity: 1; transform: translateX(5px); }
    }

    .trust-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        background: rgba(255,255,255,0.04);
        border-radius: 16px;
        padding: 24px 40px;
        border: 1px solid rgba(255,255,255,0.08);
        flex-wrap: wrap;
        position: relative;
        z-index: 1;
    }
    .trust-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        font-weight: 600;
        color: rgba(255,255,255,0.75);
    }

    /* ─── MODAL OVERLAY ─── */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(10,31,68,0.7);
        backdrop-filter: blur(6px);
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
    }
    .modal-overlay.open {
        opacity: 1;
        pointer-events: all;
    }
    .modal {
        background: var(--white);
        border-radius: 24px;
        padding: 40px;
        width: 100%;
        max-width: 440px;
        box-shadow: 0 32px 80px rgba(10,31,68,0.25);
        transform: translateY(24px) scale(0.97);
        transition: transform 0.3s ease;
        position: relative;
    }
    .modal-overlay.open .modal {
        transform: translateY(0) scale(1);
    }
    .modal-close {
        position: absolute;
        top: 16px; right: 20px;
        font-size: 22px;
        cursor: pointer;
        color: var(--grey-text);
        transition: color 0.2s;
        background: none; border: none;
        line-height: 1;
    }
    .modal-close:hover { color: var(--navy); }
    .modal-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 24px;
    }
    .modal-logo img { height: 36px; width: 36px; object-fit: contain; border-radius: 6px; }.modal-logo-text { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; color: var(--navy); }
    .modal-logo-text span { color: var(--saffron); }
    .modal h2 {
        font-size: 24px;
        font-weight: 800;
        color: var(--navy);
        margin-bottom: 6px;
    }
    .modal-sub {
        font-size: 14px;
        color: var(--grey-text);
        margin-bottom: 28px;
    }
    .modal-tabs {
        display: flex;
        background: var(--grey-light);
        border-radius: 10px;
        padding: 4px;
        margin-bottom: 24px;
        gap: 4px;
    }
    .modal-tab {
        flex: 1;
        padding: 9px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: var(--grey-text);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
        background: none;
        font-family: 'DM Sans', sans-serif;
    }
    .modal-tab.active {
        background: var(--white);
        color: var(--navy);
        box-shadow: 0 2px 8px rgba(10,31,68,0.1);
    }
    .modal-field {
        margin-bottom: 16px;
    }
    .modal-field label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 6px;
    }
    .modal-field input {
        width: 100%;
        padding: 12px 16px;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        font-size: 14px;
        font-family: 'DM Sans', sans-serif;
        color: var(--navy);
        background: var(--grey-light);
        transition: border-color 0.2s, background 0.2s;
        outline: none;
    }
    .modal-field input:focus {
        border-color: var(--saffron);
        background: var(--white);
    }
    .modal-field input::placeholder { color: var(--grey-text); }
    .modal-btn {
        width: 100%;
        padding: 14px;
        background: var(--saffron);
        color: var(--white);
        border: none;
        border-radius: 10px;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 15px;
        cursor: pointer;
        margin-top: 8px;
        transition: background 0.2s, transform 0.15s;
    }
    .modal-btn:hover { background: var(--saffron-dark); transform: translateY(-1px); }
    .modal-or {
        text-align: center;
        font-size: 13px;
        color: var(--grey-text);
        margin: 16px 0;
        position: relative;
    }
    .modal-or::before, .modal-or::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 40%;
        height: 1px;
        background: var(--border);
    }
    .modal-or::before { left: 0; }
    .modal-or::after { right: 0; }
    .modal-social {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
    }
    .modal-social-btn {
        flex: 1;
        padding: 10px;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        background: var(--white);
        font-size: 13px;
        font-weight: 600;
        color: var(--navy);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: border-color 0.2s, background 0.2s;
        font-family: 'DM Sans', sans-serif;
    }
    .modal-social-btn:hover { border-color: var(--saffron); background: var(--saffron-light); }
    .modal-footer-text {
        text-align: center;
        font-size: 13px;
        color: var(--grey-text);
        margin-top: 16px;
    }
    .modal-footer-text a { color: var(--saffron); font-weight: 600; text-decoration: none; cursor: pointer; }

    /* ─── SAVE / TOAST NOTIFICATION ─── */
    .toast {
        position: fixed;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%) translateY(80px);
        background: var(--navy);
        color: var(--white);
        padding: 14px 28px;
        border-radius: 100px;
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 3000;
        box-shadow: 0 8px 32px rgba(10,31,68,0.3);
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .toast.show { transform: translateX(-50%) translateY(0); }
    .toast-icon {
        width: 22px; height: 22px;
        background: #22c55e;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 12px;
    }

    /* ─── LANGUAGE DROPDOWN ─── */
    .lang-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        background: var(--white);
        border-radius: 12px;
        box-shadow: 0 16px 48px rgba(10,31,68,0.18);
        padding: 8px;
        min-width: 160px;
        z-index: 1100;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: all 0.2s;
    }
    .lang-dropdown.open { opacity: 1; pointer-events: all; transform: translateY(0); }
    .lang-dropdown-item {
        padding: 10px 14px;
        font-size: 14px;
        font-weight: 500;
        color: var(--navy);
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: background 0.15s;
    }
    .lang-dropdown-item:hover { background: var(--saffron-light); color: var(--saffron); }
    .lang-dropdown-item.selected { background: var(--saffron-light); color: var(--saffron); font-weight: 700; }
    .lang-dropdown-item .lang-check { margin-left: auto; color: var(--saffron); font-size: 12px; }
    .nav-lang-wrap { position: relative; }

    @keyframes ripple {
        to { transform: scale(30); opacity: 0; }
    }

    /* Fade in on scroll */
    .fade-in {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .fade-in.animate-ready {
        opacity: 0;
        transform: translateY(32px);
    }
    .fade-in.animate-ready.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* ═══════════════════════════════════
        HAMBURGER MENU — added for mobile
        (all existing CSS above untouched)
    ═══════════════════════════════════ */

    /* Hamburger button — hidden on desktop */
    .hamburger {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px;
        border-radius: 6px;
        flex-shrink: 0;
    }
    .hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--white);
        border-radius: 2px;
        transition: all 0.28s ease;
    }
    /* Animate to X when open */
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    /* Mobile drawer */
    .mobile-drawer {
        display: none;
        position: fixed;
        top: 64px;
        left: 0; right: 0;
        background: var(--navy-light);
        z-index: 997;
        padding: 8px 0 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    }
    .mobile-drawer.open { display: block; }
    .mobile-drawer a {
        display: block;
        color: rgba(255,255,255,0.8);
        text-decoration: none;
        font-family: 'DM Sans', sans-serif;
        font-size: 16px;
        font-weight: 500;
        padding: 14px 24px;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        transition: color 0.2s, background 0.2s;
    }
    .mobile-drawer a:hover { color: var(--white); background: rgba(255,255,255,0.05); }
    .mobile-drawer .drawer-login {
        display: block;
        margin: 16px 24px 0;
        width: calc(100% - 48px);
        padding: 13px;
        background: var(--saffron);
        color: var(--white);
        border: none;
        border-radius: 8px;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
        text-align: center;
        transition: background 0.2s;
    }
    .mobile-drawer .drawer-login:hover { background: var(--saffron-dark); }

    /* ── TABLET ≤ 1024px ── */
    @media (max-width: 1024px) {
        nav { padding: 0 32px; }
        .nav-links { gap: 24px; }
        .hero { padding: 160px 40px 80px; gap: 40px; }
        .hero h1 { font-size: 48px; }
        .hero-right { flex: 0 0 360px; }
        .stats-bar { padding: 40px 32px; }
        .stat-number { font-size: 32px; }
        .features { padding: 80px 32px; }
        .features-grid { grid-template-columns: repeat(2, 1fr); }
        .testimonials { padding: 80px 32px; }
        .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
        .how-it-works { padding: 80px 32px; }
        .cta-banner { padding: 80px 32px; }
        .cta-title { font-size: 38px; }
        footer { padding: 64px 32px 32px; }
        .footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
        .footer-brand { grid-column: 1 / -1; }
    }

    /* ── MOBILE ≤ 768px ── */
    @media (max-width: 768px) {
        /* Navbar */
        nav { padding: 0 20px; height: 64px; }
        .nav-links { display: none; }
        .hamburger { display: flex; }
        .announcement { top: 64px; padding: 9px 40px 9px 16px; font-size: 12px; }
        #langLabel { display: none; }
        .lang-toggle { padding: 7px 10px; }
        .btn-login { padding: 8px 14px; font-size: 13px; }

        /* Hero — stack vertically */
        .hero {
        flex-direction: column;
        padding: 120px 20px 56px;
        gap: 40px;
        min-height: unset;
        text-align: center;
        }
        .hero-left { max-width: 100%; }
        .hero h1 { font-size: 34px; line-height: 1.15; }
        .hero-subtitle { font-size: 15px; margin-bottom: 28px; }
        .hero-btns { justify-content: center; flex-wrap: wrap; gap: 12px; }
        .btn-primary { padding: 13px 24px; font-size: 15px; }
        .btn-secondary { padding: 11px 24px; font-size: 15px; }
        .hero-right { flex: none; width: 100%; max-width: 400px; margin: 0 auto; }
        .hero::before, .hero::after { display: none; }

        /* Stats — 2x2 grid */
        .stats-bar { padding: 28px 16px; flex-wrap: wrap; gap: 0; }
        .stat-item { flex: 0 0 50%; padding: 16px 8px; }
        .stat-item:not(:last-child)::after { display: none; }
        .stat-item:nth-child(1), .stat-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.2); }
        .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.2); }
        .stat-number { font-size: 26px; }
        .stat-label { font-size: 11px; }

        /* Sections */
        .section-title { font-size: 26px; }
        .section-subtitle { font-size: 14px; }
        .section-header { margin-bottom: 36px; }
        .features { padding: 56px 20px; }
        .features-grid { grid-template-columns: 1fr; gap: 14px; }
        .feature-card:hover { transform: none; }

        /* How it works */
        .how-it-works { padding: 56px 20px; }
        .steps-row { flex-direction: column; align-items: center; gap: 12px; margin-bottom: 36px; }
        .steps-row::before { display: none; }
        .step-card { max-width: 100%; width: 100%; }
        .step-connector { transform: rotate(90deg); margin-top: 0; }
        .trust-bar { flex-direction: column; gap: 16px; padding: 20px; }
        .trust-item { justify-content: center; font-size: 13px; }

        /* Testimonials */
        .testimonials { padding: 56px 20px; }
        .testimonials-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
        .testi-card:hover { transform: none; }

        /* CTA */
        .cta-banner { padding: 56px 20px; }
        .cta-title { font-size: 26px; max-width: 100%; }
        .cta-sub { font-size: 14px; margin-bottom: 32px; }
        .cta-btns { flex-direction: column; align-items: center; gap: 12px; }
        .cta-btns .btn-primary, .cta-btns .btn-secondary { width: 100%; max-width: 300px; justify-content: center; }
        .cta-banner::before, .cta-banner::after { display: none; }
        .india-flag-row { flex-wrap: wrap; margin-top: 36px; font-size: 12px; }

        /* Footer */
        footer { padding: 48px 20px 28px; }
        .footer-top { grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 36px; }
        .footer-brand { grid-column: 1 / -1; }
        .footer-tagline { max-width: 100%; }
        .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

        /* Modal */
        .modal { margin: 16px; padding: 24px 18px; border-radius: 18px; }
        .modal h2 { font-size: 20px; }
        .modal-social { flex-direction: column; }
    }

    /* ── SMALL MOBILE ≤ 480px ── */
    @media (max-width: 480px) {
        .hero h1 { font-size: 28px; }
        .hero-btns { flex-direction: column; align-items: stretch; }
        .btn-primary, .btn-secondary { width: 100%; justify-content: center; text-align: center; }
        .phone-mockup { padding: 16px; }
        .chat-bubble { font-size: 13px; }
        .stat-number { font-size: 22px; }
        .section-title { font-size: 22px; }
        .cta-title { font-size: 22px; }
        .footer-top { grid-template-columns: 1fr; }
        .footer-brand { grid-column: auto; }
        .testi-author { flex-wrap: wrap; }
        .verified-badge { margin-left: 0; }
    }