/* Hindustan E-Bike — Surat
   Deep forest ground, electric-lime accent, warm paper. */

:root {
  --ink:        #0d1a14;
  --ink-2:      #405549;
  --ink-3:      #6d8279;
  --paper:      #ffffff;
  --paper-2:    #f3f7f4;
  --paper-3:    #e9f0eb;
  --line:       #dde6e0;

  --deep:       #08140f;
  --deep-2:     #0f2a1c;
  --deep-3:     #163a26;

  --accent:     #2fd76b;
  --accent-dk:  #23b357;
  --accent-ink: #042b14;
  --accent-2:   #d6fbe3;

  --wa:         #25d366;
  --star:       #f5a623;

  --radius:     18px;
  --radius-sm:  11px;
  --shadow:     0 1px 2px rgba(13,26,20,.05), 0 10px 28px -14px rgba(13,26,20,.2);
  --shadow-lg:  0 28px 70px -28px rgba(8,20,15,.45);

  --wrap:       1180px;
  --sans:       "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --guj:        "Noto Sans Gujarati", "Shruti", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
html[lang="gu"] body { font-family: var(--guj); }
html[lang="gu"] h1, html[lang="gu"] h2 { letter-spacing: 0; line-height: 1.3; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
svg { flex: none; }

h1, h2, h3, h4 { line-height: 1.14; margin: 0 0 .5em; letter-spacing: -.025em; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 1.1rem + 3.6vw, 3.9rem); font-weight: 900; }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.5rem); }
p  { margin: 0 0 1em; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: .75rem 1.25rem; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.kicker {
  font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent-dk); margin: 0 0 .7rem;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 22px -10px rgba(47,215,107,.7); }
.btn-primary:hover { background: var(--accent-dk); }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 8px 22px -10px rgba(37,211,102,.7); }
.btn-wa:hover { background: #1fb955; }
.btn-ghost { border-color: currentColor; background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-ghost.dark { color: var(--ink); border-color: var(--line); }
.btn-ghost.dark:hover { background: var(--paper-2); }

/* ── Utility bar ─────────────────────────────────────── */
.util { background: var(--deep); color: #93b3a1; font-size: .8rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.util-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.util-tag { margin: 0; }
.util-links { display: flex; align-items: center; gap: .7rem; }
.util-links a { text-decoration: none; font-weight: 500; }
.util-links a:hover { color: var(--accent); }
.util-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.07); }
.util-ico:hover { background: var(--accent); color: var(--accent-ink); }
.dot { opacity: .4; }

/* ── Header ──────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,20,15,.94); backdrop-filter: blur(14px);
  color: #eaf3ed; border-bottom: 1px solid rgba(255,255,255,.08);
}
.head-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }

.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.brand-mark { height: 40px; width: auto; flex: none; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 1.05rem; letter-spacing: -.03em; }
.brand-text small { font-size: .7rem; color: #8fae9c; letter-spacing: .06em; text-transform: uppercase; }

.nav { display: flex; gap: 1.5rem; }
.nav a { text-decoration: none; font-size: .9rem; font-weight: 500; color: #cfe2d6; }
.nav a:hover { color: var(--accent); }

.head-actions { display: flex; align-items: center; gap: .7rem; }
.lang { display: flex; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.lang-btn { background: none; border: 0; color: #cfe2d6; font: inherit; font-size: .78rem; font-weight: 600; padding: .35rem .75rem; cursor: pointer; }
.lang-btn:last-child { font-family: var(--guj); }
.lang-btn.is-on { background: var(--accent); color: var(--accent-ink); }

.btn-call { background: rgba(255,255,255,.1); color: #fff; padding: .55rem 1.1rem; font-size: .88rem; }
.btn-call:hover { background: var(--accent); color: var(--accent-ink); }

.burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: .5rem; }
.burger span { width: 22px; height: 2px; background: #eaf3ed; border-radius: 2px; transition: .2s; }

/* ── Hero ────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(820px 460px at 82% 8%, rgba(47,215,107,.2), transparent 62%),
    linear-gradient(170deg, var(--deep) 0%, var(--deep-2) 60%, var(--deep-3) 100%);
  color: #eaf3ed;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden;
}
.hero-inner { display: grid; grid-template-columns: 1.02fr .98fr; gap: 3.5rem; align-items: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); background: rgba(47,215,107,.1);
  border: 1px solid rgba(47,215,107,.28); border-radius: 999px; padding: .4rem 1rem .4rem .75rem;
  margin-bottom: 1.3rem;
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(47,215,107,.7); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(47,215,107,0); } 100% { box-shadow: 0 0 0 0 rgba(47,215,107,0); } }

.hero h1 { margin-bottom: .5em; }
.hero h1 em { font-style: normal; color: var(--accent); display: block; }
.lede { font-size: clamp(1rem, .95rem + .35vw, 1.15rem); color: #b3cbbe; max-width: 48ch; }

.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 2.5rem; }

.hero-facts { display: flex; gap: 2.5rem; list-style: none; margin: 0; padding: 1.6rem 0 0; border-top: 1px solid rgba(255,255,255,.12); }
.hero-facts li { display: flex; flex-direction: column; }
.hero-facts strong { font-size: 1.75rem; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.hero-facts span { font-size: .78rem; color: #8fae9c; }

.hero-shot { margin: 0; position: relative; }
.hero-shot img { border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.1); }
.hero-shot figcaption { margin-top: .8rem; font-size: .8rem; color: #8fae9c; text-align: center; }

/* ── Quick actions ───────────────────────────────────── */
.quick { background: var(--deep-3); padding: 0 0 2.5rem; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: -2.25rem; }
.qa {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem 1.3rem; text-decoration: none; display: grid; gap: .2rem;
  box-shadow: var(--shadow); transition: transform .16s ease, border-color .16s ease;
}
.qa:hover { transform: translateY(-3px); border-color: var(--accent); }
.qa-ico { font-size: 1.5rem; margin-bottom: .3rem; }
.qa b { font-size: .97rem; letter-spacing: -.01em; }
.qa span:last-child { font-size: .84rem; color: var(--ink-3); }

/* ── Brand strip ─────────────────────────────────────── */
.brands { background: var(--paper); border-bottom: 1px solid var(--line); padding: 2rem 0; }
.brands-inner { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.brands-label { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.brand-logos { display: flex; align-items: center; gap: 2.75rem; flex-wrap: wrap; }
.brand-logos img { height: 40px; width: auto; object-fit: contain; }
.brand-word { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink-2); }

/* ── Track record ────────────────────────────────────── */
.record {
  background:
    radial-gradient(700px 380px at 12% 115%, rgba(47,215,107,.15), transparent 65%),
    var(--deep);
  color: #eaf3ed;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}
.record-head { max-width: 58ch; margin-bottom: 2.75rem; }
.record-head .kicker { color: var(--accent); }
.record-head p:not(.kicker) { margin: 0; color: #b3cbbe; font-size: 1.05rem; }

.record-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.stat {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.7rem 1.5rem; border-radius: var(--radius);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
}
.stat .num {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem); font-weight: 900;
  letter-spacing: -.04em; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: .88rem; color: #b3cbbe; }

/* ── Sections ────────────────────────────────────────── */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section.alt { background: var(--paper-2); }

.sec-head { max-width: 64ch; margin-bottom: 2.75rem; }
.sec-head p:not(.kicker) { color: var(--ink-2); font-size: 1.05rem; margin: 0; }

/* ── Tabs ────────────────────────────────────────────── */
.tabs { display: inline-flex; gap: .3rem; background: var(--paper-2); border: 1px solid var(--line); padding: .3rem; border-radius: 999px; margin-bottom: 2.25rem; }
.section.alt .tabs { background: var(--paper); }
.tab { border: 0; background: none; font: inherit; font-weight: 600; font-size: .92rem; padding: .55rem 1.4rem; border-radius: 999px; cursor: pointer; color: var(--ink-2); }
.tab.is-on { background: var(--deep); color: #fff; }

.grp {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); margin: 2.75rem 0 1.15rem; padding-bottom: .65rem; border-bottom: 1px solid var(--line);
}
.grp:first-child { margin-top: 0; }
.grp em { font-style: normal; font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: .84rem; color: var(--ink-3); }

/* ── Model cards ─────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 1.25rem; }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem; display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #bfd6c7; }

.card-img { height: 176px; display: grid; place-items: center; margin-bottom: .9rem; background: linear-gradient(160deg, #f7faf8, #e9f1ec); border-radius: var(--radius-sm); padding: .75rem; }
.card-img img { max-height: 100%; width: auto; object-fit: contain; }

.card h4 { font-size: 1.12rem; margin: 0 0 .6rem; }

.spec { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.spec li { display: flex; justify-content: space-between; gap: .5rem; font-size: .84rem; color: var(--ink-3); }
.spec b { color: var(--ink); font-weight: 600; }

.price { margin: auto 0 .9rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; }
.price span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.muted { color: var(--ink-3); font-size: .85rem; margin: auto 0 .9rem; }

.card-cta { text-align: center; text-decoration: none; font-weight: 600; font-size: .87rem; padding: .62rem; border-radius: 999px; background: var(--accent-2); color: var(--accent-ink); }
.card-cta:hover { background: var(--accent); }

.disclaimer { margin-top: 2.5rem; font-size: .82rem; color: var(--ink-3); max-width: 78ch; }

/* ── Used EVs ────────────────────────────────────────── */
.used { background: linear-gradient(165deg, var(--deep-2), var(--deep)); color: #eaf3ed; }
.used-inner { display: grid; grid-template-columns: 1.45fr .55fr; gap: 3rem; align-items: center; }
.used .kicker { color: var(--accent); }
.used-copy > p { color: #b3cbbe; max-width: 56ch; }

.used-list { list-style: none; margin: 2rem 0; padding: 0; display: grid; gap: .9rem; }
.used-list li { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; align-items: baseline; padding-bottom: .9rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.used-list b { color: var(--accent); font-size: .95rem; }
.used-list span { color: #b3cbbe; font-size: .93rem; }

.used-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.used-cta .btn-ghost.dark { color: #eaf3ed; border-color: rgba(255,255,255,.3); }
.used-cta .btn-ghost.dark:hover { background: rgba(255,255,255,.08); }
.used-note { font-size: .87rem; color: #8fae9c; max-width: 52ch; margin: 0; }

.used-badge {
  display: grid; place-items: center; gap: .5rem; text-align: center;
  aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(47,215,107,.28), rgba(47,215,107,.05) 70%);
  border: 1px solid rgba(47,215,107,.3);
}
.ub-num { font-size: clamp(3rem, 7vw, 5rem); font-weight: 900; color: var(--accent); line-height: 1; }
.used-badge p { margin: 0; font-size: .85rem; font-weight: 600; color: #b3cbbe; letter-spacing: .04em; }

/* ── Batteries ───────────────────────────────────────── */
.batt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.batt { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; }
.batt.featured { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,215,107,.12); }
.batt > header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.batt h3 { font-size: 1.2rem; margin: 0; }
.batt h3 .sub { font-size: .78rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.batt .tag { font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; background: var(--accent-2); color: var(--accent-ink); padding: .3rem .6rem; border-radius: 999px; white-space: nowrap; }
.batt p { color: var(--ink-2); font-size: .93rem; }

.bspec { list-style: none; margin: auto 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .4rem; }
.bspec li { display: flex; justify-content: space-between; gap: .75rem; font-size: .85rem; color: var(--ink-3); }
.bspec b { color: var(--ink); font-weight: 600; text-align: right; }

.batt-cta {
  margin-top: 1.75rem; padding: 1.5rem 1.75rem; border-radius: var(--radius);
  background: var(--deep); color: #eaf3ed;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.batt-cta b { display: block; font-size: 1.05rem; margin-bottom: .2rem; }
.batt-cta span { font-size: .9rem; color: #b3cbbe; }

/* ── Services ────────────────────────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.15rem; }
.svc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; transition: transform .16s ease, border-color .16s ease; }
.svc:hover { transform: translateY(-3px); border-color: #bfd6c7; }
.svc.hl { background: var(--accent-2); border-color: var(--accent); }
.svc .ico { font-size: 1.6rem; display: block; margin-bottom: .8rem; }
.svc h3 { font-size: 1.03rem; margin-bottom: .35rem; }
.svc p { margin: 0; color: var(--ink-2); font-size: .92rem; }

/* ── Reviews ─────────────────────────────────────────── */
.rev-summary { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 2rem; padding: 1.25rem 1.6rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.rev-score { display: flex; align-items: baseline; gap: .6rem; }
.rev-score strong { font-size: 2.5rem; font-weight: 900; letter-spacing: -.04em; }
.stars { color: var(--star); letter-spacing: .08em; font-size: 1.05rem; }
.rev-summary p { margin: 0; color: var(--ink-2); font-size: .92rem; }

.rev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.15rem; }
.rev-state { grid-column: 1 / -1; color: var(--ink-3); margin: 0; }

.rev { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; display: flex; flex-direction: column; gap: .65rem; }
.rev-top { display: flex; align-items: center; gap: .7rem; }
.rev-av { width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--accent-2); display: grid; place-items: center; font-weight: 700; font-size: .82rem; color: var(--accent-ink); overflow: hidden; }
.rev-av img { width: 100%; height: 100%; object-fit: cover; }
.rev-who { display: flex; flex-direction: column; line-height: 1.3; }
.rev-who b { font-size: .92rem; }
.rev-who span { font-size: .74rem; color: var(--ink-3); }
.rev-text { margin: 0; font-size: .91rem; color: var(--ink-2); }

.rev-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 2rem; }
.rev-link { display: grid; gap: .2rem; padding: 1.25rem 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color .16s ease, transform .16s ease; }
.rev-link:hover { border-color: var(--accent); transform: translateY(-2px); }
.rev-link b { font-size: .97rem; }
.rev-link span { font-size: .85rem; color: var(--ink-3); }

/* ── Running gallery ─────────────────────────────────
   Two identical copies of the strip sit side by side; translating
   the track by exactly -50% lands copy 2 where copy 1 began, so the
   loop is seamless. The duplicate is aria-hidden and its images have
   empty alt, so screen readers hear each photo once. */

.marquee {
  position: relative;
  margin-inline: calc(50% - 50vw);        /* break out to full width */
  width: 100vw; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex; gap: 1rem; width: max-content;
  animation: marquee 90s linear infinite;
  will-change: transform;
}
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

.shot {
  margin: 0; flex: none; width: auto;
  border-radius: var(--radius); overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.shot img { height: 300px; width: auto; object-fit: cover; display: block; }
.shot figcaption {
  padding: .7rem .95rem; font-size: .82rem; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch;
}

/* No animation for reduced-motion or no-JS-CSS-anim users: the strip
   becomes a normal horizontal scroller instead of freezing mid-slide. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .marquee-track { animation: none; }
}

.gal-socials { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.15rem; margin-top: 2rem; }

.gal-social { display: grid; align-content: center; gap: .3rem; padding: 1.5rem; border-radius: var(--radius); text-decoration: none; color: #fff; transition: transform .16s ease; }
.gal-social:hover { transform: translateY(-3px); }
.gal-social b { font-size: 1.05rem; margin-top: .5rem; }
.gal-social span { font-size: .87rem; opacity: .85; }
.gal-social.ig { background: linear-gradient(135deg, #833ab4, #fd1d1d 55%, #fcb045); }
.gal-social.fb { background: #1877f2; }
.gal-social.jd { background: linear-gradient(135deg, #f26722, #d94b12); }

/* ── Sub-page hero + blocks ──────────────────────────── */
.page-hero {
  background:
    radial-gradient(760px 420px at 85% 0%, rgba(47,215,107,.18), transparent 62%),
    linear-gradient(170deg, var(--deep) 0%, var(--deep-2) 100%);
  color: #eaf3ed;
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.page-hero .kicker { color: var(--accent); }
.page-hero h1 { max-width: 20ch; }
.page-hero .lede { max-width: 62ch; margin-bottom: 0; }
.page-hero .hero-cta { margin-bottom: 0; }

.crumbs { font-size: .82rem; color: #8fae9c; margin-bottom: 1.5rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-hidden] { opacity: .5; margin: 0 .35rem; }

.pcard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 1.15rem; }
.pcard {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem;
  transition: transform .16s ease, border-color .16s ease;
}
.pcard:hover { transform: translateY(-3px); border-color: #bfd6c7; }
.pcard .ico { font-size: 1.55rem; display: block; margin-bottom: .75rem; }
.pcard h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.pcard p { margin: 0; color: var(--ink-2); font-size: .93rem; }

.endcta {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  background: var(--deep); color: #eaf3ed;
  border-radius: var(--radius); padding: 2.25rem 2.5rem; margin-bottom: 3.5rem;
}
.endcta h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin-bottom: .4rem; }
.endcta p { margin: 0; color: #b3cbbe; max-width: 52ch; font-size: .95rem; }
.endcta-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.endcta .btn-ghost.dark { color: #eaf3ed; border-color: rgba(255,255,255,.3); }
.endcta .btn-ghost.dark:hover { background: rgba(255,255,255,.08); }

.rel-head { font-size: 1.1rem; margin-bottom: 1.1rem; }
.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.rel-card {
  display: grid; gap: .2rem; text-decoration: none;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem 1.4rem;
  transition: border-color .15s ease, transform .15s ease;
}
.rel-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.rel-card b { font-size: .97rem; }
.rel-card span { font-size: .85rem; color: var(--ink-3); }

.nav a[aria-current="page"] { color: var(--accent); }

/* ── FAQ ─────────────────────────────────────────────
   <details> so the answers are in the DOM for crawlers even
   when collapsed, and it works with no JavaScript at all. */

.faq { display: grid; gap: .75rem; max-width: 78ch; }
.faq-item {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem 1.4rem;
}
.faq-item[open] { border-color: var(--accent); }
.faq-item summary {
  cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; font-size: 1.3rem; font-weight: 400;
  line-height: 1; color: var(--accent-dk); transition: transform .18s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: .85rem 0 0; color: var(--ink-2); font-size: .95rem; }

/* ── About ───────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.about-grid p:not(.kicker) { color: var(--ink-2); }

.facts { margin: 2rem 0 0; display: grid; gap: 1rem; }
.facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.facts dt { font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 0; font-size: .95rem; }
.facts a { color: var(--accent-ink); font-weight: 500; }

.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--paper); }
.map iframe { width: 100%; height: 400px; border: 0; display: block; }
.map-cta { display: block; padding: 1rem 1.25rem; font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--accent-ink); border-top: 1px solid var(--line); }
.map-cta:hover { background: var(--paper-2); }

/* ── Contact ─────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: start; }

.form { display: grid; gap: 1rem; max-width: 36rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form label { display: grid; gap: .35rem; }
.form label > span { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.form input, .form textarea, .form select {
  font: inherit; padding: .78rem .95rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); width: 100%;
}
.form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236d8279' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 11px; padding-right: 2.4rem;
}
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(47,215,107,.18); }
.form .btn { justify-self: start; }
.field-error { border-color: #d94b4b !important; }

.contact-side { display: grid; gap: .8rem; }
.ctile {
  display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: .9rem;
  align-items: center; text-decoration: none;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.05rem 1.25rem;
  transition: border-color .15s ease, transform .15s ease;
}
.ctile:hover { border-color: var(--accent); transform: translateY(-2px); }
.ctile.wa { background: rgba(37,211,102,.09); border-color: rgba(37,211,102,.35); }
.ctile .ico { grid-row: 1 / 3; font-size: 1.45rem; }
.ctile b { font-size: .95rem; }
.ctile > span:last-child { font-size: .85rem; color: var(--ink-3); }

/* ── Footer ──────────────────────────────────────────── */
.site-foot { background: var(--deep); color: #a9c4b5; padding: 3.5rem 0 1.75rem; }
.foot-inner { display: grid; grid-template-columns: 1.7fr 1fr 1.2fr 1fr; gap: 2.5rem; padding-bottom: 2.25rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.foot-inner strong { color: #fff; font-size: 1.15rem; display: block; margin-bottom: .5rem; letter-spacing: -.02em; }
.foot-inner b { display: block; color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .9rem; }
.foot-brand p { margin: 0 0 .6rem; font-size: .9rem; max-width: 36ch; }
.gst { font-size: .78rem !important; color: #74907f; letter-spacing: .03em; }

.foot-nav, .foot-contact, .foot-social { display: flex; flex-direction: column; gap: .55rem; }
.foot-nav a, .foot-contact a, .foot-social a { color: #a9c4b5; text-decoration: none; font-size: .89rem; }
.foot-nav a:hover, .foot-contact a:hover, .foot-social a:hover { color: var(--accent); }
.foot-social a { display: flex; align-items: center; gap: .55rem; }
.foot-contact p { margin: .4rem 0 0; font-size: .82rem; color: #74907f; max-width: 28ch; }

.foot-legal { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; }
.foot-legal p { margin: 0; font-size: .82rem; color: #74907f; }
.tiny { font-size: .76rem !important; }

/* ── WhatsApp float ──────────────────────────────────── */
.wa-float {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wa); color: #fff; text-decoration: none; box-shadow: var(--shadow-lg);
  transition: transform .15s ease;
}
.wa-float:hover { transform: scale(1.07); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero-inner, .about-grid, .contact-grid, .used-inner { grid-template-columns: 1fr; }
  .hero-shot { order: -1; }
  .used-badge { max-width: 220px; justify-self: center; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .nav {
    position: fixed; inset: 68px 0 auto; flex-direction: column; gap: 0;
    background: var(--deep); padding: 1rem 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
    transform: translateY(-130%); transition: transform .25s ease; visibility: hidden;
  }
  .nav.is-open { transform: translateY(0); visibility: visible; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .burger { display: flex; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .util-tag { display: none; }
  .util-inner { justify-content: center; }
  .record-grid { grid-template-columns: 1fr 1fr; }
  .hero-facts { gap: 1.5rem; }
  .hero-facts strong { font-size: 1.4rem; }
  .quick-grid { margin-top: -1.75rem; }
  .facts > div, .used-list li { grid-template-columns: 1fr; gap: .2rem; }
  .batt-cta { flex-direction: column; align-items: flex-start; }
  .foot-inner { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .card { padding: .8rem; }
  .card-img { height: 118px; }
  .card h4 { font-size: .95rem; }
  .price { font-size: 1rem; }
  .form-row { grid-template-columns: 1fr; }
  .shot img { height: 220px; }
  .brand-text small { display: none; }
  .lang-btn:last-child { font-size: .7rem; }
}

/* ── "More about …" links out of home-page summary sections ── */
.more { margin: 1.75rem 0 0; }
.more a {
  font-weight: 600; font-size: .93rem; text-decoration: none;
  color: var(--accent-dk); border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.more a:hover { color: var(--ink); }
.used .more a { color: var(--accent); }

/* ── Mobile safety net ───────────────────────────────
   The running gallery breaks out to 100vw. When a vertical scrollbar
   is present 100vw exceeds the visible width, which would add a
   horizontal scrollbar and let the whole page slide sideways on a
   phone. Clipping at the root prevents that without breaking
   position:sticky on the header (overflow:hidden would). */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* Long unbroken strings — email address, URLs — must not push the
   layout wider than the screen on a narrow phone. */
.foot-contact a, .ctile > span:last-child, .facts dd, .rev-text { overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .endcta { padding: 1.5rem 1.35rem; }
  .endcta-actions { width: 100%; }
  .endcta-actions .btn { flex: 1 1 auto; }
  .page-hero .hero-cta .btn { flex: 1 1 auto; }
  .hero-cta .btn { flex: 1 1 auto; }
  .btn { padding: .8rem 1.15rem; font-size: .9rem; }
  .util-links { font-size: .78rem; gap: .5rem; }
  .wa-float { width: 52px; height: 52px; right: 1rem; bottom: 1rem; }
}

/* ── Header fits a phone ─────────────────────────────
   On a 390px screen the logo, brand text, language toggle, Call
   button and burger all competed for the same row. The brand text
   overflowed and the language pill painted over it. Below 820px the
   wordmark is dropped — the logo image already reads "Hindustan
   E-bike" — and the Gujarati label shortens to "ગુ". */

.lang-short { display: none; }

.brand { min-width: 0; }
.brand-text { min-width: 0; }
.brand-text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 820px) {
  .head-inner { gap: .55rem; }
  .brand { flex: 0 1 auto; }
  .brand-mark { height: 36px; }
  .brand-text strong { font-size: .82rem; letter-spacing: -.02em; }
  .brand-text small { display: none; }   /* "Sarthana, Surat" — the address is in the footer */
  .lang-full { display: none; }
  .lang-short { display: inline; }
  .head-actions { gap: .45rem; margin-left: auto; }
}

/* Under ~480px the Call button gives up its label so the wordmark keeps its. */
@media (max-width: 480px) {
  .brand-mark { height: 32px; }
  .brand-text strong { font-size: .76rem; }
  .btn-call { padding: .5rem .7rem; }
  .btn-call span { display: none; }
  .lang-btn { padding: .3rem .55rem; font-size: .74rem; }
}

/* The hero eyebrow wrapped awkwardly on narrow screens */
@media (max-width: 560px) {
  .eyebrow { font-size: .68rem; letter-spacing: .06em; padding: .35rem .8rem .35rem .65rem; }
}

/* ── Brand tabs must never be clipped ────────────────
   Three tabs (Joy e-bike / Okaya / Tunwal) can exceed a narrow
   viewport. Since the root now clips horizontal overflow, an
   overflowing third tab would simply vanish. Let them wrap. */
@media (max-width: 620px) {
  .tabs { display: flex; flex-wrap: wrap; width: 100%; justify-content: stretch; }
  .tab { flex: 1 1 auto; padding: .55rem .9rem; font-size: .88rem; white-space: nowrap; }
}