/* PoolBuy — premium automotive. Near-black + ivory, one racing-red accent (v3, MJ 2026-10-25: "use red"; orange and champagne before).
   Display: Cormorant Garamond (italic for emphasis; it has no ₹, so ₹ is set in Manrope via .rupee). Text: Manrope. */
:root {
  --night: #0B0B0C; --night-2: #141415; --night-3: #1C1C1E; --line-d: rgba(244, 238, 228, .12);
  --ivory: #F2EEE6; --ivory-2: #E9E4DA; --paper: #F5F2EC; --line-l: rgba(28, 25, 23, .13);
  --ink: #121212; --stone: #6B6760; --mist: rgba(242, 238, 230, .6);
  --ember: #C8102E; --ember-2: #EC4A5E; --ember-ink: #9E0B22; --gold-deep: #A30D25;
  --green: #9BC5A3; --red: #D9473B; --wa: #1F9E8D;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--night) }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
a { color: inherit }
img, svg { display: block }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px }
@media (min-width: 900px) { .wrap { padding: 0 40px } }
::selection { background: var(--ember); color: #fff }

/* film grain over everything, very faint */
.grain { position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; font-weight: 500 }
.display, h1 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; line-height: 1.04 }
.display em, h1 em { font-style: italic; color: var(--ember) }
.display { font-size: clamp(2.5rem, 6.2vw, 4.5rem); max-width: 18ch }
/* on light sections the champagne is too faint: deeper antique gold */
.display:not(.light) em { color: var(--gold-deep) }
.eyebrow { font: 600 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ember-2); margin: 0 0 1.3rem; display: flex; align-items: center; gap: .7rem }
.eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor }
.eyebrow.dark { color: var(--ember-ink) }
.muted { color: var(--mist) }

/* ---------- buttons ---------- */
.btn { --bg: var(--ember); display: inline-flex; align-items: center; justify-content: center; gap: .6rem; background: var(--bg); color: #fff; text-decoration: none;
  border: 0; border-radius: 999px; padding: 17px 30px; min-height: 54px; font: 600 1rem/1 var(--sans); letter-spacing: .01em; cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 30px -18px rgba(0, 0, 0, .7) }
.btn:hover { transform: translateY(-2px); background: #DE1A3A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 18px 36px -18px rgba(0, 0, 0, .8) }
.btn:active { transform: translateY(0) }
.btn:focus-visible, input:focus-visible, summary:focus-visible, .opts label:has(input:focus-visible) { outline: 2px solid var(--ember-2); outline-offset: 3px }
.btn-sm { padding: 11px 20px; min-height: 42px; font-size: .9rem; box-shadow: none }
.btn.wide { width: 100% }
.btn.wa { --bg: var(--ivory); color: var(--night) } .btn.wa:hover { background: #fff }
.btn.dark { --bg: var(--ink); color: var(--ivory); box-shadow: none } .btn.dark:hover { background: #000 }
.btn[disabled] { opacity: .6; cursor: wait; transform: none }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(15, 14, 13, .94); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line-d); color: var(--ivory) }
.nav-in { display: flex; justify-content: space-between; align-items: center; height: 68px }
.wm { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.65rem/1 var(--serif); letter-spacing: -.01em; color: inherit }
.wm i { font-style: italic; color: var(--ember-2) }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: .92rem }
.nav-links a:not(.btn) { text-decoration: none; color: var(--mist); transition: color .2s } .nav-links a:not(.btn):hover { color: var(--ivory) }
@media (max-width: 720px) { .nav-links a:not(.btn) { display: none } }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--night); color: var(--ivory); overflow: hidden; padding: 56px 0 0 }
.glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 78% 38%, rgba(200, 16, 46, .2), transparent 70%), radial-gradient(40% 40% at 10% 100%, rgba(200, 16, 46, .05), transparent 70%) }
.hero-grid { position: relative; display: grid; gap: 48px; align-items: center; padding-bottom: 64px }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.08fr .92fr; gap: 64px; padding-bottom: 96px; padding-top: 24px } }
.hero h1 { font-size: clamp(3.3rem, 11vw, 6.2rem); line-height: .96; margin-bottom: 1.6rem }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--mist); max-width: 34rem; margin: 0 0 2.2rem; line-height: 1.65 }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px }
.hint-line { color: var(--mist); font-size: .9rem }

/* staggered entrance */
.rise { opacity: 0; transform: translateY(22px); animation: rise 1s var(--ease) forwards; animation-delay: calc(var(--d) * 120ms + 80ms) }
@keyframes rise { to { opacity: 1; transform: none } }

/* the live group card */
.pool { margin: 0; position: relative; padding: 26px; border-radius: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
  border: 1px solid var(--line-d); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08) }
@media (min-width: 600px) { .pool { padding: 32px } }
.pool-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap }
.tag { font-size: .82rem; font-weight: 600; letter-spacing: .04em; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-d) }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--mist); letter-spacing: .08em; text-transform: uppercase }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 0 rgba(200, 16, 46, .55); animation: pulse 2s infinite }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(200, 16, 46, 0) } 100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0) } }
.rings { margin: 22px auto 6px; max-width: 300px }
.rings svg { width: 100%; height: auto; overflow: visible }
.r { transition: transform 1.1s var(--ease), stroke .6s, opacity .6s; transform-box: fill-box; transform-origin: center }
.r1, .r3 { stroke: var(--ember) } .r2 { stroke: var(--ivory) }
.pool[data-stage="0"] .r1 { transform: translateX(-34px); opacity: .35 } .pool[data-stage="0"] .r3 { transform: translateX(34px); opacity: .35 }
.pool[data-stage="1"] .r1 { transform: translateX(-16px) } .pool[data-stage="1"] .r3 { transform: translateX(16px) }
.buyers { display: flex; justify-content: center; padding-left: 8px; min-height: 40px; margin-bottom: 18px }
.buyers span { width: 36px; height: 36px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; font: 600 .78rem/1 var(--sans);
  color: var(--night); background: var(--ivory); border: 2px solid var(--night-2); animation: pop .55s var(--ease) both }
.buyers span:nth-child(3n+2) { background: var(--ember); color: #fff } .buyers span:nth-child(3n) { background: #C9BBA6 }
@keyframes pop { from { transform: scale(.3) translateY(8px); opacity: 0 } }
.price-block { text-align: center; padding: 14px 0 22px; border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d) }
.price-label { display: block; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin-bottom: 6px }
.price { display: block; font: 500 clamp(2.9rem, 7.6vw, 4rem)/1.05 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.rupee { font-family: var(--sans); font-weight: 400; font-size: .55em; vertical-align: .38em; margin-right: .1em; color: var(--mist) }
.saving { display: inline-block; margin-top: 8px; font-size: .88rem; font-weight: 600; color: var(--mist); transition: color .4s }
.saving.on { color: var(--green) }
.tiers { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px }
.tiers li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-d);
  color: var(--mist); font-size: .92rem; transition: all .5s var(--ease) }
.tiers li b { font-weight: 600; color: var(--ivory); opacity: .55; transition: opacity .5s }
.tiers li.hit { border-color: rgba(200, 16, 46, .55); background: rgba(200, 16, 46, .08); color: var(--ivory) }
.tiers li.hit b { opacity: 1 }
.tiers li.hit span::before { content: '✓ '; color: var(--ember-2) }
.pool figcaption { margin-top: 14px; font-size: .76rem; color: rgba(244, 238, 228, .45); text-align: center }

.ticker { position: relative; border-top: 1px solid var(--line-d); overflow: hidden; padding: 18px 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) }
.ticker-in { display: flex; gap: 56px; width: max-content; animation: slide 38s linear infinite; font: italic 500 1.4rem/1 var(--serif); color: var(--mist); white-space: nowrap }
.ticker-in span::before { content: '◦'; margin-right: 56px; color: var(--ember) }
@keyframes slide { to { transform: translateX(-50%) } }

/* ---------- idea ---------- */
.idea { padding: 110px 0 90px }
.idea-grid { display: grid; gap: 44px; margin-top: 64px }
@media (min-width: 860px) { .idea-grid { grid-template-columns: repeat(3, 1fr); gap: 40px } }
.idea article { border-top: 1px solid var(--line-l); padding-top: 26px }
.num { display: block; font: italic 500 3.8rem/1 var(--serif); color: var(--gold-deep); margin-bottom: 18px }
.idea h3, .how h3 { font: 600 1.18rem/1.3 var(--sans); margin-bottom: 10px; letter-spacing: -.005em }
.idea p, .how p { margin: 0; color: var(--stone) }
.idea b { color: var(--ink) }

/* ---------- how ---------- */
.how { padding: 40px 0 120px; background: linear-gradient(var(--paper), var(--ivory-2)) }
.steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 14px }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr) } }
.steps li { display: flex; flex-direction: column; gap: 22px; padding: 28px 26px 30px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line-l); border-radius: 22px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease) }
.steps li:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(28, 25, 23, .35) }
.step-n { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: italic 500 1.7rem/1 var(--serif); color: var(--ember-ink); border: 1px solid rgba(158, 11, 34, .35) }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease) }
.reveal.in { opacity: 1; transform: none }
.reveal:nth-child(2) { transition-delay: .1s } .reveal:nth-child(3) { transition-delay: .2s } .reveal:nth-child(4) { transition-delay: .3s }

/* ---------- plan ---------- */
.plan { background: var(--night); color: var(--ivory); padding: 110px 0; position: relative; overflow: hidden }
.plan::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 40% at 0% 0%, rgba(200, 16, 46, .08), transparent 70%); pointer-events: none }
.plan-grid { position: relative; display: grid; gap: 48px }
@media (min-width: 980px) { .plan-grid { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start } .plan-intro { position: sticky; top: 110px } }
.display.light { color: var(--ivory) }
.plan-intro .muted { font-size: 1.08rem; margin: 1.4rem 0 1.8rem; max-width: 30rem }
.assure { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; color: var(--mist); font-size: .95rem }
.assure li { display: flex; gap: 12px } .assure li::before { content: ''; flex: 0 0 18px; height: 18px; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--ember);
  background: radial-gradient(circle, var(--ember) 3px, transparent 3.5px) }
.plan-card { background: var(--night-2); border: 1px solid var(--line-d); border-radius: 28px; padding: 26px 20px; box-shadow: 0 50px 90px -50px #000 }
@media (min-width: 600px) { .plan-card { padding: 40px } }
.row2 { display: grid; gap: 0 18px } @media (min-width: 640px) { .row2 { grid-template-columns: 1fr 1fr } }
.f { margin: 0 0 24px; border: 0; padding: 0; min-width: 0 }
label, legend { display: block; font-weight: 600; font-size: .9rem; letter-spacing: .01em; margin-bottom: 9px; padding: 0; color: var(--ivory) }
.sub-inline { font-weight: 400; color: var(--mist); margin-left: 4px }
.sub { color: var(--mist); font-size: .84rem; margin: 8px 0 0 }
input[type=tel], input:not([type]) { width: 100%; font: 500 1rem var(--sans); color: var(--ivory); padding: 14px 16px; min-height: 52px; background: var(--night-3);
  border: 1px solid var(--line-d); border-radius: 14px; transition: border-color .2s, background .2s }
input::placeholder { color: rgba(244, 238, 228, .32) }
input:hover { border-color: rgba(244, 238, 228, .25) }
input:focus { border-color: var(--ember); background: #26221E; outline: none }
.phone { display: flex } .phone span { display: grid; place-items: center; padding: 0 14px; background: var(--night-3); border: 1px solid var(--line-d); border-right: 0;
  border-radius: 14px 0 0 14px; color: var(--mist); font-weight: 500 } .phone input { border-radius: 0 14px 14px 0 }
.opts { display: flex; flex-wrap: wrap; gap: 8px }
.opts label { position: relative; margin: 0; font-weight: 500; font-size: .92rem; cursor: pointer }
.opts input { position: absolute; opacity: 0; width: 1px; height: 1px }
.opts span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 17px; border-radius: 999px; border: 1px solid var(--line-d); color: var(--mist);
  background: rgba(255, 255, 255, .02); transition: all .25s var(--ease) }
.opts label:hover span { border-color: rgba(244, 238, 228, .3); color: var(--ivory) }
.opts input:checked + span { background: var(--ember); border-color: var(--ember); color: #fff; font-weight: 600 }
.consent { display: flex; gap: 12px; font-weight: 400; font-size: .86rem; line-height: 1.55; color: var(--mist); margin: 4px 0 6px; cursor: pointer }
.consent input { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ember) }
.consent a { color: var(--ember-2) }
.err { color: #FF8C80; font-size: .86rem; margin: 8px 0 0 } .err:empty { display: none }
.plan-card .btn.wide { margin-top: 18px }
.done { text-align: left } .done-rings { color: var(--ivory); margin-bottom: 18px }
.done h3 { font: 500 2.6rem/1.05 var(--serif); margin-bottom: .8rem } .done p { color: var(--mist) } .done b { color: var(--ivory) }
#myLink { word-break: break-all; color: var(--ivory) }

/* ---------- dealers ---------- */
.dealers { padding: 110px 0; background: var(--paper) }
.dealers-in { display: grid; gap: 48px; align-items: end }
@media (min-width: 980px) { .dealers-in { grid-template-columns: 1.1fr .9fr; gap: 72px } }
.dealer-facts { display: grid; gap: 0 }
.dealer-facts div { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line-l) }
.dealer-facts b { font: 500 2.5rem/1 var(--serif); min-width: 5.2ch; color: var(--ink) }
.dealer-facts .rupee { color: var(--stone) }
.dealer-facts span { color: var(--stone) }
.dealer-facts .btn { margin-top: 20px; justify-self: start }

/* ---------- faq ---------- */
.faq { padding: 30px 0 120px; background: var(--paper) }
.faq-grid { display: grid; gap: 40px; border-top: 1px solid var(--line-l); padding-top: 90px }
@media (min-width: 980px) { .faq-grid { grid-template-columns: .8fr 1.2fr; gap: 72px } }
details { border-bottom: 1px solid var(--line-l) }
summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font: 600 1.06rem/1.4 var(--sans) }
summary::-webkit-details-marker { display: none }
summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 1.5px solid var(--ember-ink); border-bottom: 1.5px solid var(--ember-ink);
  transform: rotate(45deg); transition: transform .35s var(--ease) }
details[open] summary::after { transform: rotate(-135deg); margin-top: -2px }
details p { margin: -6px 0 24px; color: var(--stone); max-width: 40rem }

/* ---------- footer ---------- */
.foot { background: var(--night); color: var(--mist); padding: 56px 0 calc(48px + env(safe-area-inset-bottom)); font-size: .86rem }
.foot-in { display: grid; gap: 22px } @media (min-width: 860px) { .foot-in { grid-template-columns: auto 1fr; gap: 60px; align-items: start } }
.foot .wm { color: var(--ivory) } .foot p { margin: .3rem 0 } .foot a { color: var(--ivory) }

/* ---------- simple pages (privacy, 404) ---------- */
.page { background: var(--paper); min-height: 70vh; padding: 70px 0 90px }
.doc { max-width: 760px } .doc h1 { font-size: clamp(2.6rem, 6vw, 4rem); margin-bottom: 1rem } .doc h2 { font: 600 1.15rem var(--sans); margin: 2.2rem 0 .6rem }
.doc p { color: var(--stone) } .doc .small { color: var(--stone); font-size: .9rem }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  .rise, .reveal { opacity: 1; transform: none }
}

/* Last on purpose: the `font` shorthand on .price etc. resets number styles, so this must come after them.
   Cormorant defaults to old-style figures; prices and facts need level, even-width numbers. */
.price, .dealer-facts b, .num, .step-n, .display, h1 { font-feature-settings: 'lnum' 1, 'tnum' 1; font-variant-numeric: lining-nums tabular-nums }