@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("assets/noto-sans-devanagari.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "Noto Sans Devanagari", "Mangal", system-ui, sans-serif;
  --gold: #edbd58;
  --pale-gold: #fff2bd;
  --wine: #51110d;
  background: #050202;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  background: #050202;
}

body {
  min-height: 100%;
  margin: 0;
  color: #fff6dc;
  background:
    radial-gradient(circle at 50% 24rem, rgba(94, 20, 14, .27), transparent 38rem),
    #050202;
}

button,
input { font: inherit; }

.landing-page {
  width: min(100%, 540px);
  min-height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: #080303;
  box-shadow: 0 0 70px rgba(0, 0, 0, .9);
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background: #080303;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.hero-dealers {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: translateY(-6.5%);
  animation: dealers-arrive 1.05s cubic-bezier(.16, .78, .2, 1) both;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 74% 54% at 50% 25%, rgba(116, 18, 12, .14), transparent 72%),
    linear-gradient(180deg, rgba(0, 0, 0, .22), transparent 31%, transparent 73%, rgba(0, 0, 0, .5));
}

.hero-logo {
  position: absolute;
  top: max(11.5%, calc(env(safe-area-inset-top) + 12px));
  left: 50%;
  width: 72%;
  margin: 0;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .62)) drop-shadow(0 0 10px rgba(239, 187, 72, .18));
  animation: logo-arrive .78s .18s cubic-bezier(.18, .82, .22, 1) both;
}

.hero-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-free {
  position: absolute;
  top: 24.5%;
  left: 50%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #f2c86e;
  font-size: clamp(16px, 4.25vw, 21px);
  font-weight: 750;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .85), 0 0 12px rgba(217, 153, 41, .22);
  transform: translateX(-50%);
  animation: copy-arrive .55s .42s ease-out both;
}

.hero-free span {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.hero-free span::before,
.hero-free span::after {
  content: "";
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 200, 110, .8));
}

.hero-free span::after { transform: scaleX(-1); }

.hero-question {
  position: absolute;
  right: 6%;
  bottom: max(15%, calc(env(safe-area-inset-bottom) + 74px));
  left: 6%;
  margin: 0;
  color: #fff4d4;
  font-size: clamp(19px, 5vw, 27px);
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 2px 8px #000, 0 0 12px rgba(0, 0, 0, .82);
  animation: copy-arrive .55s .58s ease-out both;
}

.scroll-cue {
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 2px solid rgba(255, 213, 119, .9);
  border-radius: 999px;
  color: #ffe08d;
  background: radial-gradient(circle, rgba(116, 45, 18, .78), rgba(14, 4, 3, .9) 72%);
  box-shadow: 0 0 0 5px rgba(223, 166, 58, .09), 0 0 24px rgba(238, 181, 67, .34), inset 0 0 12px rgba(255, 210, 109, .12);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .02em;
  text-decoration: none;
  transform: translateX(-50%);
  backdrop-filter: blur(5px);
  animation: copy-arrive .55s .76s ease-out both;
}

.scroll-cue svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  animation: cue-bob 1.8s ease-in-out infinite;
}

.coming-soon {
  position: relative;
  min-height: 100svh;
  padding: clamp(54px, 13vw, 82px) 22px max(42px, calc(env(safe-area-inset-bottom) + 30px));
  background:
    radial-gradient(circle at 50% 12%, rgba(138, 36, 25, .35), transparent 42%),
    linear-gradient(180deg, #120504, #070202 68%);
  scroll-snap-align: start;
}

.coming-soon::before {
  content: "";
  position: absolute;
  top: 0;
  right: 10%;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 203, 112, .62), transparent);
}

.signup-card {
  padding: clamp(28px, 8vw, 42px) clamp(20px, 7vw, 34px) 24px;
  border: 1px solid rgba(233, 183, 86, .3);
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(68, 15, 11, .82), rgba(15, 5, 4, .96) 66%);
  box-shadow: inset 0 1px rgba(255, 232, 174, .08), 0 24px 50px rgba(0, 0, 0, .35);
  text-align: center;
}

.signup-card h2 {
  margin: 0 0 12px;
  color: var(--pale-gold);
  font-size: clamp(34px, 9vw, 44px);
  font-weight: 780;
  line-height: 1.18;
}

.signup-copy {
  max-width: 360px;
  margin: 0 auto 30px;
  color: #d9c7ae;
  font-size: 15px;
  font-weight: 430;
  line-height: 1.6;
}

.notify-form {
  text-align: left;
}

.notify-form label {
  display: block;
  margin: 0 3px 7px;
  color: #d8c49a;
  font-size: 13px;
  font-weight: 620;
}

.notify-form > input,
.phone-field {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(232, 192, 110, .34);
  border-radius: 12px;
  color: #fff8e7;
  background: rgba(3, 1, 1, .72);
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, .42);
  outline: none;
}

.notify-form > input {
  padding: 13px 15px 11px;
}

.notify-form input::placeholder { color: #8f7d6b; }

.notify-form > input:focus,
.phone-field:focus-within {
  border-color: #ecc567;
  box-shadow: 0 0 0 3px rgba(230, 178, 73, .13), inset 0 1px 8px rgba(0, 0, 0, .42);
}

.notify-form input[aria-invalid="true"],
.phone-field:has(input[aria-invalid="true"]) {
  border-color: #ef7869;
}

.phone-field {
  display: flex;
  align-items: center;
}

.phone-field span {
  padding: 1px 12px 0 15px;
  border-right: 1px solid rgba(232, 192, 110, .25);
  color: #e8c878;
  font: 700 14px/1 system-ui, sans-serif;
}

.phone-field input {
  min-width: 0;
  flex: 1;
  padding: 13px 14px 11px;
  border: 0;
  color: inherit;
  background: transparent;
  outline: 0;
}

.field-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 13px 4px;
  color: #957c5c;
  font-size: 11px;
  text-align: center;
}

.field-divider::before,
.field-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(222, 180, 97, .15);
}

.notify-form button {
  width: 100%;
  min-height: 54px;
  margin-top: 22px;
  border: 1px solid #fff0ab;
  border-radius: 999px;
  color: #281406;
  background: linear-gradient(180deg, #fff0a0, #d7972c 66%, #ad6719);
  box-shadow: inset 0 1px rgba(255, 255, 255, .7), 0 8px 20px rgba(0, 0, 0, .4);
  font-size: 18px;
  font-weight: 850;
  cursor: pointer;
  text-shadow: 0 1px rgba(255, 246, 194, .52);
}

.notify-form button:hover { filter: brightness(1.07); }
.notify-form button:active { transform: translateY(1px); }

.notify-form button:focus-visible,
.scroll-cue:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.form-status {
  min-height: 21px;
  margin: 12px 2px 0;
  color: #f5c96c;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.form-status.is-success {
  color: #ffe08a;
  font-size: 14px;
  font-weight: 720;
}

.privacy-note {
  margin: 6px 0 0;
  color: #b7a18b;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

@keyframes dealers-arrive {
  from { opacity: 0; filter: blur(5px) brightness(.72); transform: translateY(-4.5%) scale(1.035); }
  to { opacity: 1; filter: blur(0) brightness(1); transform: translateY(-6.5%) scale(1); }
}

@keyframes logo-arrive {
  from { opacity: 0; filter: blur(3px) drop-shadow(0 8px 16px rgba(0, 0, 0, .62)); transform: translate(-50%, -9px) scale(.93); }
  to { opacity: 1; filter: blur(0) drop-shadow(0 8px 16px rgba(0, 0, 0, .62)) drop-shadow(0 0 10px rgba(239, 187, 72, .18)); transform: translate(-50%, 0) scale(1); }
}

@keyframes copy-arrive {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes cue-bob {
  0%, 100% { transform: translateY(-1px); }
  50% { transform: translateY(2px); }
}

@media (min-width: 541px) {
  .landing-page { border-inline: 1px solid rgba(236, 191, 97, .16); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}