:root { --orange: #ff5900; --muted: #c4c2c1; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0c0e10; color: #f8f8f8; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
.landing { isolation: isolate; position: relative; min-height: max(100svh, 940px); overflow: hidden; display: flex; flex-direction: column; }
.landing::before { content: ''; position: absolute; z-index: -2; inset: 0; background: url('../images/bg-img.png') center bottom / 100% auto no-repeat; }
.landing::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, #0c0e10 0%, rgba(12,14,16,.98) 23%, rgba(12,14,16,.94) 37%, rgba(12,14,16,.77) 50%, rgba(12,14,16,.2) 73%, rgba(12,14,16,.16) 83%, #0c0e10 100%); }
.container { max-width: 1280px; }
.site-header { padding-top: 20px; }
.navbar { padding: 0; min-height: 110px; }
.brand { display: block; width: 170px; margin-top: -12px; }
.brand img { width: 100%; height: auto; }
.main-nav { padding-top: 19px; }
.main-nav .nav-link { position: relative; padding: 4px 0; color: #d5d5d5; font-size: 15px; }
.main-nav .nav-link:hover, .main-nav .nav-link.active { color: var(--orange); }
.main-nav .active::after { content: ''; width: 17px; height: 1px; background: var(--orange); position: absolute; bottom: 0; left: calc(50% - 8px); }
.icon { width: 24px; height: 24px; font-size: 24px; line-height: 1; text-align: center; flex-shrink: 0; }
.launch-link { border: 1.5px solid var(--orange); color: var(--orange); border-radius: 40px; font-size: 14px; padding: 10px 22px; display: flex; align-items: center; gap: 20px; margin-top: 13px; }
.launch-link:hover { color: #fff; background: #b83d00; border-color: var(--orange); }
.hero { padding-top: 3px; }
.eyebrow { display: flex; justify-content: center; align-items: center; gap: 21px; font-size: 17px; color: #bcbcbc; text-transform: uppercase; letter-spacing: 7px; margin: 0 0 6px; }
.eyebrow::before, .eyebrow::after { content: ''; width: 29px; height: 1px; background: var(--orange); }
h1 { font-size: clamp(52px, 5.2vw, 80px); font-weight: 750; line-height: .98; letter-spacing: -2px; margin: 0 0 18px; }
h1 span { color: var(--orange); }
.hero-description { font-size: 20px; line-height: 1.25; color: #d0cecd; max-width: 650px; margin-bottom: 27px; scroll-margin-top: 25px; }
.benefits { max-width: 690px; margin-bottom: 24px; scroll-margin-top: 25px; }
.benefit { position: relative; }
.benefit + .benefit::before { content: ''; position: absolute; left: 0; top: 25px; bottom: 20px; width: 1px; background: #ffffff30; }
.benefit-icon { width: 56px; height: 56px; background: #ff590021; border-radius: 14px; color: var(--orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.benefit-icon .icon { font-size: 36px; width: 36px; height: 36px; }
.benefit h2 { font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.benefit p { font-size: 14px; color: var(--muted); margin: 0; }
.signup { max-width: 585px; scroll-margin-top: 30px; }
.signup-field { border: 1.5px solid #ffffff32; background: #10101070; border-radius: 40px; overflow: hidden; box-shadow: 0 0 0 1px #ffffff08; }
.mail-icon { margin-left: 21px; font-size: 21px; width: 21px; }
.signup .form-control { min-width: 0; border: 0; background: transparent; color: white; box-shadow: none; padding: 16px 20px; font-size: 15px; }
.signup .form-control::placeholder { color: #aaa6a3; }
.signup-field:focus-within { border-color: var(--orange); }
.notify-button { background: var(--orange); color: #090909; border: 0; border-radius: 40px; font-size: 16px; font-weight: 600; padding: 16px 32px; display: flex; align-items: center; justify-content: center; gap: 23px; white-space: nowrap; }
.notify-button:hover, .notify-button:focus-visible { background: #ff782f; color: #000; }
.notify-button:disabled { background: #ff782f; color: #151515; }
.signup-note { color: #c6c0bd; margin: 13px 0 0; font-size: 12px; line-height: 1.5; }
.signup-note .icon { font-size: 14px; width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.signup-status { font-size: 14px; margin: 8px 0 0; min-height: 21px; color: #f4f4f4; }
.signup-status.error { color: #ffc2a2; }
.vehicle-footer { margin-top: auto; padding-top: 230px; padding-bottom: 43px; }
.vehicle { gap: 23px; position: relative; }
.vehicle + .vehicle::before { content: ''; position: absolute; top: 12px; bottom: 5px; left: 0; width: 1px; background: #ffffff35; }
.vehicle > .icon { color: var(--orange); font-size: 49px; width: 49px; height: 49px; }
.vehicle h2 { font-size: 16px; font-weight: 600; margin: 0 0 7px; }
.vehicle p { font-size: 13px; color: var(--muted); margin: 0; }
a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.skip-link { position: absolute; background: #111; color: #fff; z-index: 10; padding: 10px; }
@media (min-width: 1600px) { .landing { min-height: 100svh; } .hero { padding-top: 25px; } }
@media (max-width: 991px) { .container { padding-left: 28px; padding-right: 28px; } .landing::before { background-size: auto 720px; } .brand { width: 145px; } .launch-link { padding: 9px 15px; gap: 12px; } h1 { font-size: 67px; } .vehicle { gap: 14px; } .vehicle p { font-size: 11px; } }
@media (max-width: 767px) {
    .landing { min-height: 100svh; } .site-header { padding-top: 14px; } .navbar { min-height: 145px; align-items: flex-start; } .brand { width: 135px; }
    .main-nav { order: 3; width: 100%; justify-content: center; padding-top: 0; margin-top: -5px; gap: 30px !important; } .main-nav .nav-link { font-size: 14px; }
    .launch-link { font-size: 12px; margin-top: 7px; } .launch-link .icon { font-size: 18px; width: 18px; }
    .hero { padding-top: 18px; } .eyebrow { font-size: 11px; letter-spacing: 4px; gap: 12px; margin-bottom: 15px; } .eyebrow::before, .eyebrow::after { width: 22px; }
    h1 { font-size: clamp(39px, 9.3vw, 65px); letter-spacing: -1.5px; line-height: 1.02; margin-bottom: 20px; }
    .hero-description { font-size: 16px; line-height: 1.5; max-width: 470px; margin-bottom: 26px; }
    .benefit h2 { font-size: 12px; line-height: 1.35; } .benefit p { font-size: 11px; } .benefit-icon { width: 46px; height: 46px; border-radius: 12px; } .benefit-icon .icon { font-size: 29px; width: 29px; height: 29px; }
    .signup .form-control { font-size: 13px; padding: 15px 10px; } .mail-icon { margin-left: 13px; font-size: 18px; width: 18px; } .notify-button { font-size: 13px; padding: 15px 18px; gap: 8px; } .notify-button .icon { font-size: 18px; width: 18px; }
    .signup-note { font-size: 11px; } .vehicle-footer { padding-top: 210px; padding-bottom: 28px; } .vehicle-footer .row { gap: 22px; } .vehicle { max-width: 270px; margin: auto; gap: 22px; } .vehicle + .vehicle::before { display: none; } .vehicle p { font-size: 13px; } .vehicle h2 { font-size: 15px; }
    .landing::before { background-size: auto 730px; background-position: center bottom 140px; } .landing::after { background: linear-gradient(180deg, #0c0e10 0%, #0c0e10f5 34%, #0c0e10c9 49%, #0c0e1025 65%, #0c0e1050 73%, #0c0e10 89%); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

.signup-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Use the actual Bajaji artwork in the supplied brand image, not a car glyph.
   The 100px source window starts at (576, 653) in the 1264 × 843 PNG. */
.icon-bajaj { display: inline-block; position: relative; }
.icon-bajaj::before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url('../images/logo-white.png') -5.76em -6.53em / 12.64em 8.43em no-repeat;
    mask: url('../images/logo-white.png') -5.76em -6.53em / 12.64em 8.43em no-repeat;
}