/* ============================================================
   AUTOBODY — premium layer
   ============================================================ */

/* ---- film grain for depth ---- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04; mix-blend-mode: overlay;
}
:root[data-vibe="light"] body::after { opacity: 0.025; }
nav, .tweaks-root, .sticky-cta { z-index: 60; }

/* ---- tactile buttons ---- */
.btn-primary {
  background: linear-gradient(177deg, color-mix(in srgb, var(--accent) 82%, #fff 18%), var(--accent) 58%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 12px 28px -10px var(--accent), 0 2px 6px rgba(0,0,0,.28);
}
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 22px 44px -12px var(--accent), 0 2px 6px rgba(0,0,0,.28); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-lg .arr {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent-ink) 22%, transparent); font-size: 14px;
}

/* ---- nav price chip (selling) ---- */
.nav-price {
  display: inline-flex; flex-direction: column; line-height: 1.05; text-align: right;
  font-size: 11px; color: var(--fg-dim); padding-right: 14px; margin-right: 2px; border-right: 1px solid var(--line);
}
.nav-price b { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--fg); letter-spacing: -0.02em; }
@media (max-width: 600px) { .nav-price { display: none; } }

/* ---- hero car stage ---- */
.hero-visual.has-car { aspect-ratio: auto; }
.hero-stage { position: relative; width: 100%; display: grid; place-items: center; padding: 4% 0; }
.stage-glow {
  position: absolute; z-index: 0; width: 88%; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%,-58%);
  background: radial-gradient(circle, var(--accent) 0%, transparent 62%);
  opacity: .34; filter: blur(34px); mix-blend-mode: screen; pointer-events: none;
}
:root[data-vibe="light"] .stage-glow { mix-blend-mode: normal; opacity: .18; }
.hero-car-img {
  position: relative; z-index: 2; width: 122%; max-width: none; margin-left: -4%;
  filter: drop-shadow(0 50px 44px rgba(0,0,0,.55));
}
.stage-floor {
  position: absolute; z-index: 1; bottom: 9%; left: 14%; right: 14%; height: 46px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 72%);
  filter: blur(10px); pointer-events: none;
}
:root[data-vibe="light"] .stage-floor { background: radial-gradient(ellipse at center, rgba(20,24,34,.28), transparent 72%); }

/* ---- hero trust row (social proof) ---- */
.hero-trust { display: flex; align-items: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.trust-rate { display: inline-flex; align-items: center; gap: 9px; }
.trust-stars { color: var(--accent); font-size: 15px; letter-spacing: 2px; }
.trust-rate b { font-family: var(--font-head); font-weight: 800; font-size: 16px; }
.trust-rate span { color: var(--fg-dim); font-size: 13px; }
.trust-sep { width: 1px; height: 26px; background: var(--line); }
.trust-b2b { font-size: 13px; color: var(--fg-dim); max-width: 22ch; }
.trust-b2b b { color: var(--fg); font-weight: 600; }

/* ---- pricing: selling cues ---- */
.assure { display: flex; gap: 14px 28px; justify-content: center; flex-wrap: wrap; margin: -22px 0 34px; }
.assure span { display: inline-flex; align-items: center; gap: 9px; color: var(--fg-dim); font-size: 14px; }
.assure .ck { color: var(--accent); font-size: 15px; }
.tier .save-line {
  align-self: flex-start; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: .01em;
  color: var(--accent); background: var(--accent-soft); padding: 7px 11px; border-radius: 9px; margin: -8px 0 20px;
}
.tier.feat-tier { background: linear-gradient(180deg, var(--accent-soft), transparent 38%), var(--surface); }
.tier.feat-tier::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, var(--accent), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.tier { position: relative; }

/* ---- premium vibe character: champagne accents + serspace ---- */
:root[data-vibe="premium"] .eyebrow { color: var(--champagne); }
:root[data-vibe="premium"] .eyebrow::before { background: var(--champagne); }
:root[data-vibe="premium"] .badge { border-color: color-mix(in srgb, var(--champagne) 36%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--champagne) 8%, var(--surface)), var(--surface)); }
:root[data-vibe="premium"] .sec-head h2 { font-weight: 700; letter-spacing: -0.03em; }
:root[data-vibe="premium"] .ben,
:root[data-vibe="premium"] .tier,
:root[data-vibe="premium"] .col,
:root[data-vibe="premium"] .calc { background-image: linear-gradient(180deg, color-mix(in srgb, var(--champagne) 4%, transparent), transparent 30%); }
:root[data-vibe="premium"] .logo .mark { box-shadow: 0 0 0 1px color-mix(in srgb, var(--champagne) 40%, transparent); }
:root[data-vibe="premium"] .stat .num { color: var(--fg); }
:root[data-vibe="premium"] .trust-stars { color: var(--champagne); }

/* ---- sticky CTA bar (conversion) ---- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  transform: translateY(130%); transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.sticky-cta.show { transform: none; }
.sticky-inner {
  max-width: var(--maxw); margin-inline: auto; margin-bottom: 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 12px 12px 12px 22px; margin-inline: var(--gut);
}
.sticky-inner .txt { font-size: 14px; color: var(--fg-dim); }
.sticky-inner .txt b { font-family: var(--font-head); font-weight: 800; color: var(--fg); font-size: 17px; letter-spacing: -0.02em; }
.sticky-actions { display: flex; align-items: center; gap: 8px; }
.sticky-close { background: none; border: 0; color: var(--fg-faint); cursor: pointer; font-size: 22px; line-height: 1; padding: 6px 10px; border-radius: 8px; }
.sticky-close:hover { color: var(--fg); }
@media (max-width: 560px) {
  .sticky-inner { padding: 10px 10px 10px 16px; }
  .sticky-inner .txt small { display: none; }
}

@media (max-width: 980px) {
  .hero-visual.has-car { max-width: 560px; }
  .hero-car-img { width: 100%; margin-left: 0; }
}

/* ============================================================
   HERO — text + car, two columns (desktop) · square crop (mobile)
   ============================================================ */
.hero-bg-mode .hero-inner {
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(20px, 3vw, 48px); align-items: center;
}
.hero-bg-mode .hero-copy { position: relative; z-index: 3; max-width: 620px; }
.hero-bg-mode h1 { font-size: clamp(34px, 5vw, 64px); }
.hero-car-mobile { display: none; }

/* car fills the right column and bleeds off the right edge */
.hero-bg-car {
  position: relative; z-index: 1; display: block;
  width: 122%; max-width: none; justify-self: end; margin-right: -12%;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 38px 55px rgba(0, 0, 0, .6));
}
.hero-car-light {
  position: absolute; z-index: 0; right: -8%; top: 50%; transform: translateY(-50%);
  width: 58%; aspect-ratio: 16 / 10; pointer-events: none;
  background: radial-gradient(ellipse at 55% 50%, var(--accent) 0%, transparent 62%);
  opacity: .2; filter: blur(48px); mix-blend-mode: screen;
}
:root[data-vibe="light"] .hero-car-light { mix-blend-mode: normal; opacity: .12; }
.hero-scrim { display: none; }
.hero-bg-mode .stats { position: relative; z-index: 4; }

/* full-width trust + price bar under both columns */
.hero-trustbar {
  grid-column: 1 / -1; position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 14px 28px; margin-top: clamp(18px, 3vw, 38px); padding-top: 22px;
  border-top: 1px solid var(--line);
}
.hero-trustbar .hero-trust,
.hero-trustbar .hero-price { margin-top: 0; }

/* mobile: square front crop under the headline, no side car */
@media (max-width: 980px) {
  .hero-bg-mode .hero-inner { display: block; }
  .hero-bg-car { display: none; }
  .hero-bg-mode .hero-copy { max-width: none; }
  .hero-car-mobile {
    display: block; max-width: none;
    width: calc(100% + 2 * var(--gut));
    margin: 12px calc(-1 * var(--gut)) 2px;
    filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .5));
  }
}